Tema 1 Introducción al Diseño Web

 Introducción al Diseño Web

- Páginas web y sitio.

- Conceptos básicos (dominio, URL, hosting, applets).

- Elementos de una página web.

- Estándares de diseño web (W3C).

 

Introducción al Diseño Web

 

Diseño web

El diseño web implica trabajo relacionado con el layout y diseño de páginas online, así como la producción de contenido, aunque generalmente se aplica a la creación de sitios web. En este caso, los diseñadores web crean las páginas utilizando lenguajes de marcado como HTML o XML. Por otro lado, la parte visual de los sitios está a cargo del CSS, término utilizado para estilizar los elementos escritos en HTML. Por lo tanto, es común que los diseñadores web utilicen ambos para construir un site porque juntos definirán cómo aparecerán las páginas en los navegadores.

https://rockcontent.com/es/blog/diseno-web/

 

- Páginas web y sitio.

 

Página web

Una página web es un documento accesible desde cualquier navegador con acceso a internet, y que puede incluir audio, vídeo, texto y sus diferentes combinaciones.

 

Tipos de página web

Estas son las más características:

Página web estática: Se tratan de páginas en las que no se puede cambiar el contenido. Aparece una información permanente, y el usuario no puede interactuar.

Página web dinámica: Los usuarios pueden crear y colaborar en el contenido. Suponen todo lo contrario a las anteriores. En estas podemos destacar: blogs, foros, tiendas online…

Blogs: Se tratan de portales donde un autor suele publicar artículos informativos relacionados con una temática en concreto. Los blogs son muy populares en la actualidad ya que sirven para aportar valor a la audiencia y demostrar la especialización de los profesionales que los escriben.

Tiendas online: Se trata de páginas orientadas a la compra-venta de objetos. Muchas plataformas físicas han descubierto el potencial de internet y gestionan sus propias tiendas online para que se puedan comprar productos desde cualquier parte del mundo.

Buscadores: Son páginas para que los usuarios puedan buscar contenido de interés sobre un tema en concreto.

https://economipedia.com/definiciones/pagina-web.html

 

Sitio web

Un sitio web es un conjunto de páginas web accesibles a través de internet, convenientemente enlazadas y con una finalidad concreta. Está identificado por una dirección URL única, que usualmente es la página de inicio o Home page. Cada página web de un sitio está escrita en un código de programación (principalmente HTML), y tiene enlaces explícitos o links –partes del texto a las que se puede hacer clic– que permiten al usuario moverse de una página del sitio a otra.

https://mx.godaddy.com/blog/que-es-un-sitio-web/

 

 

- Conceptos básicos (dominio, URL, hosting, applets).

 

Dominio

El dominio web o dominio de internet es lo que las personas escriben para acceder a tu sitio, y apunta el navegador web hacia el servidor que almacena esos recursos. Sin un dominio web, las personas tendrían que recordar la dirección IP específica de tu servidor, y eso simplemente no va a suceder.

https://www.hostinger.mx/tutoriales/que-es-un-dominio-web

 

URL

URL significa Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una dirección que es dada a un recurso único en la Web. En teoría, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imágenes, etc. En la práctica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su URL asociada adecuadamente.

https://developer.mozilla.org/es/docs/Learn/Common_questions/Qu%C3%A9_es_una_URL

 

Hosting

Un hosting es un servicio en línea que te permite publicar un sitio o aplicación web en Internet. Cuando te registras en un servicio de alojamiento, básicamente alquilas un espacio en un servidor donde puedes almacenar todos los archivos y datos necesarios para que tu sitio web funcione correctamente.

https://www.hostinger.mx/tutoriales/que-es-un-hosting

 

Applet

El Applet es un programa que puede incrustarse en un documento HTML (página Web). Cuando un Navegador carga una página Web que contiene un Applet, éste se descarga en el navegador Web y comienza a ejecutarse, lo cual nos permite crear programas que cualquier usuario puede ejecutar.

https://www.viafirma.com/faq/es/que-es-un-applet/

 

- Elementos de una página web.

 

En estos momentos existen webs de una única página (se les denomina «onepage»). Es decir, toda la información se condensa en un home más largo de lo normal, y se remite directamente a un formulario si la persona quiere saber más información sobre cualquier aspecto. ¿Es recomendable hacer esto? Si necesitas arrancar «inmediatamente», sí, pero nuestra recomendación es que en cuanto puedas crees una web entera ya que a nivel de ventas, leads y posicionamiento no tiene nada que ver. De hecho, con una Onepage no hay nada que hacer para posicionarla en Google. Aclarado esto, vamos a por esas páginas.

 

1. Página home: La página de inicio o home (casa en inglés) es la página principal de tu web, ya que es la que se visualiza cuando alguien escribe tu dominio. En nuestro caso, esta es la parte central de nuestro home. Pero fuera de eso, tienes que tener en cuenta que es una de las páginas más importantes de tu web, ya que es la encargada de:

Transmitir tu propuesta de valor: la página debe dejar claro a cualquier persona cómo le puedes ayudar desde tu empresa. En nuestro caso, nuestro mensaje se centra en reflejar cómo el SEO no solo sirve para conseguir visitas, sino clientes.

Dirigir el tráfico por el resto de partes de la web: muy importante también. Una persona ha aterrizado en tu home, tiene claro cómo la puedes ayudar, pero… ¿y ahora qué? Por eso, desde la home debes dirigir a la persona hacia el resto de páginas. A tus productos o servicios, a la página de contacto, al «Acerca de» o «Sobre mí»… Ten en cuenta que si el usuario no encuentra lo que quiere rápido, corremos el riesgo de que se vaya.

Posicionar por determinadas palabras clave (transaccionales): hablaremos en más profundidad sobre esto más abajo, pero piensa que la home es una de las página que más autoridad suele tener, por lo que también debemos atacar keywords transaccionales con ella.

Reflejar la autoridad de tu marca: tu home es como la 1ª impresión que se lleva un potencial cliente de ti, por lo que es muy importante que tu página de inicio transmita confianza y profesionalidad. ¿Tú comprarías en un sitio que te transmitiese mala espina? Seguro que no.

 

2. La página «Acerca de» o «Sobre mí»

No son pocas las empresas que suelen descuidar esta página, lo que es un grave error. El objetivo de esta pagina, aunque te resulte curioso, es reforzar la propuesta de valor de tu home y que el usuario entienda cómo tu empresa le puede ayudar. Y es que nosotros no somos los importantes, sino los clientes. Pero además, es una página que debes cuidar al detalle ya que con ella también consigues:

Generar confianza, cercanía, autoridad y credibilidad: aunque sea un canal digital, a todos nos gusta saber quién está detrás de esa empresa. Sobre todo, antes de contratar un servicio o comprar un producto.

Captar leads: ¿sabías que es una de las páginas que más visitas suele recibir? Es muy normal que si la home ha captado el interés de la persona, después se dirija al «Acerca de» para saber más de la empresa. Por eso es muy interesante poner un formulario o un botón hacia un formulario, para captar suscriptores en esta página.

 

3. Página de contacto

Este caso es curioso porque en todas las webs hay una página de contacto, pero son muy pocas las empresas que sacan todo el provecho a esta página. ¿Pero con poner un formulario no era más que suficiente? Pues no. La página de contacto es una de las vías más comunes por la que tus potenciales clientes o tu audiencia se pone en contacto contigo. Entonces, por qué no aprovechar para…

Si es una persona interesada en un producto o servicio: dirigir directamente a la página correspondiente, y así ahorrar tiempo en trámites.

Resolver dudas comunes: ¿cuántas veces te han hecho la misma pregunta? En ese caso es interesante tener un apartado de FAQ en la página de contacto, o si son muchas las preguntas, enlazar a una página específica para esto.

Tu dirección: por si alguien quiere acudir directamente a tus oficinas o tienda.

Lo que no haces: te ahorrará mucho tiempo agregar información acerca de si no realizas determinados servicios, si no aceptas peticiones de «guest post», etc.

 

Otra cuestión interesante a incluir es el tiempo medio en el que tardarás en responder a su correo, o programar una respuesta automática indicando que hemos recibido su email.

 

 

 

4. Páginas de ventas (servicios o productos)

Junto con la home, esta (o estas, porque puedes tener más de una) es la página más importante de tu negocio, ya que es la encargada normalmente de cerrar la venta. En esta página volcarás toda la información correspondiente a tu producto o servicio de cara a cerrar más clientes. Importante, para eso tienes que tener en cuenta:

Copywriting (el arte de escribir para vender): la fórmulas de copywriting tienen una estructura determinada, enfatizan los puntos de dolor del cliente, y se centran en los beneficios en vez de en las características.

Diseño: una landing page también está optimizada a nivel de diseño para convertir más. Por ejemplo, se evitan distracciones (se elimina el menú para que la persona se centre en el texto), se hace visualmente más ligero para que también sea más sencillo de leer, o se destacan los botones para que llamen más la atención.

 

Todas las páginas que te estamos explicando suelen ubicarse en el menú, ya que son páginas que siempre deben estar accesibles para el usuario.

 

5. Páginas de categoría

Las páginas de categoría suelen tener 2 funciones:

Clasificar la información del blog: si tratas una temática bastante extensa, al usuario le será útil que organices la información en subtemáticas. Pues justo eso es lo que se hace con las páginas de categoría.

Categorías de producto: si tienes un e-commerce, una de las partes de tu web más importante es esta. En estas páginas se vuelcan las distintas categorías de productos, y además, son muy importantes de cara al posicionamiento SEO (y es que con estas páginas se atacan también palabras clave transaccionales).

 

Es cierto que en la 1ª opción también se pueden usar estas páginas para posicionar determinadas palabras clave, sin embargo, esto implica trabajar a un nivel más profesional la arquitectura SEO de tu web. Si no cuentas con un profesional que te analices de forma específica tu proyecto, no te compliques con esto.

 

6. Fichas de producto

Estas páginas solo las utilizarás si tienes una tienda, ya que como su nombre indica, son como las páginas de venta específicas para los productos. Dos cuestiones importantes:

SEO: estas páginas posicionan por el modelo del producto, por lo que también deben trabajarse a nivel de SEO On Page.

Conversión: deben incitar a la compra, por lo que al igual que con las landing page, también debes optimizarlas a nivel de copywriting y diseño.

Visto esto, vamos a otras páginas que a lo mejor no te gustan tanto.

 

7. Páginas legales (porque también tienes que tenerlas)

No van a posicionar, ni a conseguir clientes, pero también son importantes y debes tenerlas bien redactadas. Como mínimo debes tener:

-Aviso legal.

-Política de Privacidad.

-Política de Cookies.

Ten en cuenta también que tener estas páginas bien aportará confianza y seguridad a tu cliente.

https://www.tuposicionamientoweb.net/partes-de-una-web/

- Estándares de diseño web (W3C).

 

¿Qué son los estándares web?

Para empezar, es necesario definir qué son los estándares web. Se trata de protocolos, lenguajes y tecnologías interoperativas que, de manera internacional, guían la Web hacia su máximo potencial. El W3C denomina este objetivo como “interoperabilidad web”. Para lograr este objetivo, las tecnologías web más conocidas deben ser compatibles entre sí, permitiendo que cualquier software y hardware con acceso a internet funcione a la perfección.

 

¿Qué es la W3C?

Conocido por sus siglas en inglés W3C, el World Wide Web Consortium es un consorcio internacional de organizaciones relacionadas con las tecnologías de la información, la cual busca promover la evolución constante de la web, estableciendo normas que permitan su estandarización. El W3C fue fundado por Tim Berners-Lee, persiguiendo el claro objetivo de garantizar una Web accesible desde cualquier parte del mundo, dejando de lado las diferencias naturales generadas por el idioma o localización geográfica, así como las diferencias tecnológicas existentes, como navegador, sistema operativo o plataforma. Para lograrlo, el W3C propone a diseñadores, programadores, editores y empresas de software el cumplimiento de ciertas directivas de desarrollo. Usando como medio algunos organismos, la W3C libera estándares y tecnologías para que, sobre estos, se basen los documentos web, logrando así el objetivo de interoperabilidad.

 

¿Cuáles son los estándares web W3C?

Entre los estándares web W3C más usados y conocidos, es posible encontrar:

Javascript, el cual otorga dinamismo y funcionalidad a la web.

HTML por sus siglas en inglés “HyperText Markup Language”, define y presenta la estructura de los documentos web.

CSS, por sus siglas en inglés “Cascading Style Sheets”, el cual permite la asignación de estilos para la correcta representación de los documentos.

XML, por sus siglas en inglés “eXtensible Markup Language”, cuya función es la de base para un número extenso de tecnologías.

 

¿Por qué son utilizados los estándares web W3C?

Los estándares web W3C propician el acercamiento de los sitios web a la idea de accesibilidad universal. En la actualidad, el acceso a Internet puede hacerse desde celulares, tablets, televisores y electrodomésticos. Es por ello que los sitios web deben ser capaces de adaptarse a estos cambios, haciendo uso de los estándares web W3C y algunos otros que buscan regular la estructura interna, seguridad y uso del idioma en sitios web. Los estándares web W3C traen consigo ciertas ventajas para su sitio web, como la reducción del tiempo requerido para el desarrollo y mantenimiento del sitio, la simplificación del código fuente y el apoyo que representa en su estrategia SEO.

https://wsiconecta.com/que-son-los-estandares-web-w3c-y-por-que-se-utilizan/

Vocabulario:

Layout: La palabra layout sirve para hacer referencia a la manera en que están distribuidos los elementos y las formas dentro de un diseño. Es un vocablo del idioma inglés que no forma parte del diccionario de la Real Academia Española. Se traduce al español como 'disposión', 'plan' o 'diseño'.

https://www.significados.com/layout/