UF1841: Elaboración de documentos web mediante lenguajes de marca

1. Diseño Web

• 1. Itroducciòn
• 2. Principios de diseño Web
• 2.1 Los principios básicos de un buen diseño estético
• 2.2 Diseño orientado al usuario. Diseño orientado a objetivos. Diseño orientado a la implementación
• 3. El proceso de diseño web
• 3.1 Delimitar el tema
• 3.2 Recolección de información
• 3.3 Agregación y descripción
• 3.4 Estructura de un sitio web y navegabilidad
• 3.5 Estructura y composición de páginas
• 3.6 Ensamble final
• 3.7 Testeo. Compatibilidad con navegadores
• 4. Diferencias entre diseño orientado a presentación y a impresión

Diseño web: tarea destinada a la planificación, el diseño y la implementación de páginas y sitios web. Aspectos a tener en cuenta:

• Navegabilidad.
• Interactividad.
• Usabilidad de la página.
• Arquitectura y distribución de la información presentada.
• Integración de recursos tales como imágenes, audio, vídeo, etc.

Aprendizaje de ciertos lenguajes y técnicas de programación: HTML, CSS, JavaScript, etc.

Muy importante distribuir y estructurar adecuadamente la información, además de presentar los contenidos de manera que el conjunto sea lo más atractivo e intuitivo posible para el usuario.

De las miles de millones de páginas web en Internet, solo una pequeña parte están bien diseñadas, dado que los desarrolladores no tienen en cuenta todos o la mayor parte de los principios básicos que rigen el diseño web.

Diseño web: crear páginas que sean útiles y visualmente atractivas. Diseñar gráficamente un sitio web y planificar adecuadamente los contenidos de la página. Estructurar cada uno de los menús, definir la manera en la que el usuario va a interactuar con cada uno de los elementos, etc.

El diseño web se puede dividir en dos partes fundamentales: la funcionalidad o usabilidad y el aspecto o estética. Una página puede funcionar muy bien, pero si no es visualmente atractiva no llamará la atención de posibles usuarios. Y aquellas páginas que se vean muy bien pero que funcionen mal, harán que los usuarios que las visiten (atraídos por su diseño gráfico) no vuelvan a hacerlo por las carencias funcionales.

Página web: Documento electrónico realizado para la WWW (World Wide Web). Estos documentos pueden contener información tal como texto, imágenes, vídeo, animaciones, etc.

La Web consiste en un sistema de documentos enlazados y accesibles a través de Internet. Uno de los principales elementos que caracterizan a las páginas web son los denominados hipervínculos (links o enlaces), que permiten, entre otras cosas, que el usuario “salte” de una página web a otra.

Balance:

equilibrio que debe haber entre los distintos elementos que constituyen la web.

Contraste;

manera de diferenciar los elementos que se desean destacar, llamando la atención del visitante sobre los elementos más importantes de una página.

Énfasis:(

manera de diferenciar algo dentro de un elemento.

Repetición o ritmo:

manera de definir patrones con los que se ordenan los elementos que forman parte de la página web.

Proximidad o unidad:

consiste en situar juntos o próximos los elementos que se encuentren relacionados.

El diseño orientado a los objetivos consiste en definir y planificar los objetivos que se deseen alcanzar con el desarrollo del correspondiente sitio web.

El diseño web centrado en el usuario se caracteriza por asumir que todo el proceso de diseñar y desarrollar la correspondiente página web debe estar conducido por el usuario, lo que significa que para dicho diseño se deben tener muy en cuenta las necesidades, características y objetivos que este desea alcanzar.

El diseño web orientado a la implementación consiste en centrar el diseño de la página en las posibilidades tecnológicas que están a la disposición del diseñador y que este es capaz de implementar.

Definir qué es lo que se va a tratar en el sitio web y el contenido que se va a añadir (y el que no).

Definir los objetivos que se desean alcanzar con el desarrollo de la página.

Evaluar correctamente la cantidad de tiempo disponible para elaborar el sitio, acorde con el necesario para desarrollarlo.

Organizar la información que se alojará en la página adecuadamente.

Establecer un equilibrio entre la linealidad y la jerarquización.

Diseñar gráficamente un sitio web y planificar adecuadamente los contenidos de la página.

Estructurar cada uno de los menús, definir la manera en la que el usuario va a interactuar con cada uno de los elementos, etc.

Aplicar una clasificación de tipo lineal a aquellos trozos de información que requieren que el usuario que los consulte avance paulatinamente en el conocimiento de algo.

La información complementaria o que dependa de otra, se debería establecer una clasificación de tipo jerárquico, como apartados y subapartados.

Manera en la que se enlazan las distintas páginas, según la agregación de contenidos establecida en la etapa anterior. Se podrían añadir:

• Ayudas para la navegación.
• Enlaces que permitan la jerarquización establecida.
• Hipervínculos entre elementos que pertenezcan a un mismo nivel jerárquico.

Una vez definida la estructura y navegabilidad del sitio web, ya podrá empezar a implementarla con los lenguajes de programación correspondientes (HTML, CSS, etc.).

Las tres partes fundamentales en las que se suelen estructurar la inmensa mayoría de las páginas web son:

• Cabecera (header).
• Cuerpo (body).
• Pie de página (footer).

La cabecera (parte superior de la página web), por lo general, contiene información relacionada con la temática del sitio. Las cabeceras suelen constar de:

• Logo y título.
• Barra de navegación para acceder a las secciones principales del sitio.
• Información de contacto (si no va incluido en el pie).
• Buscadores de contenido dentro de la propia página.

En el cuerpo se localiza el contenido más relevante de un documento web. En esta parte, se pueden añadir barras laterales, las cuales suelen usarse para incluir contenido complementario y/o para mostrar links a otras páginas o secciones.

En el pie de página se puede encontrar información de contacto, menús que direccionan a las secciones más relevantes, links a otras páginas externas y, en general, contenido complementario relacionado con el tema de la página.

Sobre el estilo gráfico de los sitios web: importante tener en cuenta que un diseño gráfico adecuado puede ser algo determinante a la hora de hacer que los usuarios que la visiten se sientan cómodos. Establecer un equilibrio respecto al número y las dimensiones de las imágenes, y la cantidad de texto. Mantener una cierta coherencia gráfica en los colores de fondo, las texturas, la fuente, el tamaño del texto, etc.

Añadir los últimos contenidos que sean necesarios e insertar el estilo gráfico a las páginas del sitio. Solo quedará testearla.

Revisar la coherencia general del sitio, que no existan enlaces o links rotos, la redacción y ortografía de todos los textos, subdividir aquellas páginas que tengan demasiado contenido (para separarlo en dos o más páginas), etc.

Hacer que personas ajenas al diseño de la página interactúen con ella y saquen sus propias conclusiones. Es importante que esto se haga no solo al final, sino durante todo el desarrollo del sitio. Es más rentable replantear un diseño sobre la marcha que rehacerlo una vez finalizado.

En el testeo de cualquier página que se desarrolle es importante comprobar que se visualiza correctamente en, al menos, los navegadores más utilizados. El principal motivo por el que se debe hacer este tipo de comprobación es que, a veces, un mismo código HTML o CSS presenta comportamientos distintos dependiendo del navegador que lo esté interpretando.

Navegador: programa que canaliza las peticiones del usuario que solicita una información por la Web. La mayoría de estos programas son públicos, aunque existen algunos de pago. Navegadores más utilizados:

• Internet Explorer.
• Mozilla Firefox.
• Google Chrome.
• Safari.
• Opera.

En el proceso de diseño orientado a impresión, se diseñan contenidos que están destinados a ser impresos en algún formato físico, como periódicos, revistas, carteles, etc.

El diseño web es un diseño orientado a la presentación de contenidos a través del navegador y, aunque estos programas suelen permitir la impresión en formato físico de las páginas que visualizan, es importante tener siempre en cuenta las evidentes diferencias que existen entre este tipo de diseño y el orientado a la impresión.

Cuando se diseñan contenidos web, hay que ser consciente de que la página podrá visualizarse en un amplio rango de resoluciones y tamaños de pantalla (PC, móviles, tabletas, etc.).