UF1841 Elaboración de documentos web mediante lenguajes de marcas

UF1841

Elaboración de documentos web mediante lenguajes de marcas

Datos del autor

José Ramón Santos Dios es diplomado en Ciencias Empresariales por la Universidad de Vigo, graduado superior en TIC por la Universidad de Santiago de Compostela y máster en Software Libre por la UOC. Desde el año 2003 se ha dedicado a la docencia, impartiendo acciones formativas relacionadas con las Tecnologías de la Información y las Comunicaciones en las principales empresas de formación de la comunidad autónoma de Galicia y como Agente TIC para la red CEMIT de la Xunta de Galicia.

En la actualidad, combina su profesión de docente con la elaboración de contenidos didácticos adaptados a diferentes niveles formativos y la elaboración de manuales relacionados con certificados de profesionalidad, también el desarrollo del diseño y programación web ocupan parte de su actividad profesional.

Para ver su currículum profesional completo puede acceder a el enlace de la red Linkedin: https://www.linkedin.com/in/santosdios/

Ficha Elaboración de documentos web mediante lenguajes de marcas. Informática y comunicaciones.

1ª Edición.

Certia Editorial, Pontevedra, 2020 Autor: José Ramón Santos Dios Formato: 170 x 240 mm

E laboración de documentos Informática y comunicaciones.

• 230 páginas.

web mediante lenguajes de marcas .

No está permitida la reproducción total o parcial de este libro, ni su tratamiento informático, ni la transmisión de ninguna forma o por cualquier medio, ya sea electrónico, mecánico, por fotocopia, por registro u otros métodos, sin el permiso previo y por escrito de los titulares del Copyright.

Derechos reservados 2020, respecto a la primera edición en español, por Certia Editorial.

ISBN: 978-84-17328-60-3 Editor: Cenepo Consult, SLU Depósito legal: PO 275-2020 Impreso en España - Printed in Spain Certia Editorial ha incorporado en la elaboración de este material didáctico citas y referencias de obras divulgadas y ha cumplido todos los requisitos establecidos por la Ley de Propiedad Intelectual. Por los posibles errores y omisiones, se excusa previamente y está dispuesta a introducir las correcciones pertinentes en próximas ediciones y reimpresiones.

Fuente fotografia portada: Pixabay, autoriza a copiar, distribuir, comunicar publicamente la obra y adaptar el trabajo.

510

MF0493_3: Implantación de aplicaciones web en entorno internet, intranet y extranet MP0391: Módulo de prácticas profesionales no laborales Duración horas totales certificado de profesionalidad

MF0492_3: Programación web en el entorno servidor

240

90

MF0491_3: Programación web en el entorno cliente

510

80 590

Duración horas módulos formativos

90

60

90

90

30

90

60

Horas

90

240

180

UF1841: Elaboración de documentos web mediante lenguajes de marca UF1842: Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión UF1843: Aplicaciones técnicas de usabilidad y accesibilidad en el entorno cliente UF1844: Desarrollo de aplicaciones web en el entorno servidor.

UF1845: Acceso a datos en aplicaciones web del entorno servidor.

UF1846: Desarrollo de aplicaciones web distribuidas.

Correspondencia con el Catálogo Modular de Formación Profesional Módulos certificado H.CP Unidades formativas

180

H. Q

FICHA DE CERTIFICADO DE PROFESIONALIDAD (IFCD0210) DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB (RD 1531/2011, de 31 de octubre modificado por el RD 628/2013, de 2 de agosto)

Área profesional: Desarrollo

Familia profesional: INFORMÁTICA Y COMUNICACIONES

Índice

INTRODUCCIÓN.................................................................................. 13

Unidad didáctica 1 1. Diseño web........................................................................................... 15 1.1. Principios de diseño web.............................................................................17 1.2. Diseño orientado al usuario........................................................................21 1.3. Diseño orientado a objetivos......................................................................22 1.4. Diseño orientado a la implementación......................................................23 1.5. El proceso de diseño web............................................................................23 1.6. Estructura de un sitio web y navegabilidad...............................................26 1.7. Estructura y composición de páginas........................................................28 1.8. Compatibilidad con navegadores................................................................30 1.9. Diferencias entre diseño orientado a presentación e impresión............31

9

UNIDAD DIDÁCTICA 2 2. Lenguajes de marcado generales......................................................... 35 2.1. Origen de los lenguajes de marcado generales: SGML y XML.............37 2.2. Características generales de los lenguajes de marcado............................40 2.3. Estructura general de un documento con lenguaje de marcado...........41 2.4. Metadatos e instrucciones de proceso.......................................................42 2.5. Codificación de caracteres. Caracteres especiales (escape).....................43 2.6. Etiquetas o marcas........................................................................................44 2.7. Elementos......................................................................................................44 2.8. Atributos.........................................................................................................45 2.9. Comentarios...................................................................................................46 2.10. Documentos válidos y bien formados. Esquemas..................................47

UNIDAD DIDÁCTICA 3 3. Lenguajes de marcado para presentación de páginas web................. 49 3.1. Historia de HTML y XHTML. Diferencias entre versiones..................51 3.2. Estructura de un documento......................................................................52 3.3. Versiones........................................................................................................54 3.4. Elementos de la cabecera.............................................................................54

10

3.5. Elementos del cuerpo del documento.......................................................57 3.6. Color...............................................................................................................57 3.6.1. Codificación de colores..................................................................57 3.6.2. Colores tipo......................................................................................58 3.6.3. Colores seguros...............................................................................59 3.7. Texto...............................................................................................................60 3.8. Encabezados. Jerarquía y estructura del contenido de un documento.....................................................................................................62 3.9. Párrafos...........................................................................................................64 3.10. Alineación, espaciado y sangrado de texto...............................................64 3.11. Características de letra: tipos, tamaños y colores....................................67 3.12. Separadores de texto....................................................................................68 3.13. Etiquetas específicas para el marcado de texto. Estilos lógicos............70 3.14. Enlaces de hipertexto..................................................................................76 3.14.1. Estructura de un enlace: la dirección de internet o URL.........77 3.14.2. Estilos de enlaces............................................................................79 3.14.3. Diferencias entre enlaces absolutos y relativos..........................80 3.14.4. Enlaces internos..............................................................................83 3.14.5. Enlaces especiales: correo electrónico. Enlaces de descarga............................................................................................85 3.15. Atributos específicos: título, destino, atajos de teclado, etc...................87 3.16. Imágenes.......................................................................................................89

11

3.16.1. Formatos de imágenes...................................................................92 3.16.2. Características de imágenes: tamaño, título, textos alternativos.......................................................................................93 3.16.3. Enlaces en imágenes.......................................................................94 3.16.4. Imágenes de fondo.........................................................................95 3.17. Listas..............................................................................................................96 3.17.1. Características..................................................................................97 3.17.2. Ordenación de listas.......................................................................97 3.17.3. Anidamiento en listas.....................................................................98 3.17.4. Otros tipos de listas: listas de definición.....................................99 3.18. Tablas.......................................................................................................... 101 3.18.1. Estructura básica.......................................................................... 101 3.18.2. Formato de tablas: bordes, alineación, tamaño, etc. – Formato de contenido de celdas................................................................ 108 3.18.3. Agrupamiento de filas y columnas............................................ 111 3.18.4. Tablas anidadas............................................................................. 114 3.18.5. Buenas prácticas en el uso de tablas.......................................... 116 3.19. Marcos (frames)........................................................................................... 116 3.19.1. Creación de marcos..................................................................... 116 3.19.2. Ventajas e inconvenientes en el uso de marcos....................... 118 3.19.3. Soporte de navegadores.............................................................. 118 3.19.4. Formateado de marcos................................................................ 119

12

3.19.5. Enlaces entre contenidos de marcos......................................... 122 3.19.6. Marcos incrustados (iFrames)...................................................... 124 3.20. Formularios................................................................................................ 125 3.20.1. Descripción general y uso de formularios............................... 126 3.20.2. Elementos de un formulario: texto, botones, etc.................... 126 3.20.3. Procesamiento de formularios................................................... 128 3.20.4. Formateado de formularios: atajos de teclado, orden de edición, grupos, etiquetas, etc.................................................... 129 3.21. Elementos específicos para tecnologías móviles................................. 132 3.21.1. Selección del lenguaje de marcas para tecnologías móviles........................................................................................... 137 3.22. Elementos en desuso (deprecated)............................................................ 137 3.22.1. Texto parpadeante....................................................................... 137 3.22.2. Marquesinas.................................................................................. 138 3.22.3. Alineaciones.................................................................................. 138

UNIDAD DIDÁCTICA 4 4. Hojas de estilo web............................................................................ 139 4.1. Elementos y estructura de una hoja de estilo........................................ 141 4.2. Creación de hojas de estilo....................................................................... 143 4.3. Aplicación de estilo.................................................................................... 146

13

4.4. Herencia de estilos y aplicación en cascada........................................... 157 4.5. Formateado de páginas mediante estilos................................................ 159 4.6. Estructura de páginas mediante estilos................................................... 168 4.7. Diseño de estilos para diferentes dispositivos....................................... 176 4.8. Buenas prácticas en el uso de hojas de estilo......................................... 179 resumen final............................................................................... 183 actividades..................................................................................... 185 autoEVALUACIÓN FINAL.............................................................. 195 soluciones...................................................................................... 199 BIBLIOGRAFÍA .................................................................................. 225

14

Introducción El manual «UF1841: Elaboración de documentos web mediante lenguajes de marcas» forma parte del módulo formativo «MF0491_3: Programación web en el entorno cliente», del Catálogo Nacional de Cualificaciones Profesionalespertenece al certificado de profesionalidad «IFCD0210: Desarrollo de aplicaciones con tecnologías web».

El manual tiene por objetivo aprender los principales lenguajes de marcado para obtener una página web base que servirá de soporte a el resto de los lenguajes implicados en el desarrollo de plataformas y aplicaciones web que veremos en los sucesivos manuales de este certificado.

A lo largo de los dos primeros capítulos del manual, trataremos los principios básicos del diseño web, y la relación de estos con los usuarios y navegadores que utilizarán estos para visualizar los documentos de la web, además del origen de los lenguajes de marcado y sus características básicas. A continuación, trataremos los dos lenguajes de marcado más importantes y utilizados hoy en día como base de las plataformas y aplicaciones web anteriormente citadas, estos son el lenguaje de marcado HTML y el lenguaje de hojas de estilo CSS. Por último, propondremos una serie de tareas y ejercicios teórico-prácticos para poner a prueba los conocimientos adquiridos a lo largo del manual.

Este manual te permitirá adquirir las siguientes capacidades y criterios de evaluación: •

C1: Elaborar documentos utilizando lenguajes de marcas y estándares de desarrollo software. o

CE1.1 Determinar las diferentes partes de un documento creado con lenguaje de marcas utilizado para su implementación.

o

CE1.2 Reconocer las diferentes técnicas de desarrollo de software existentes en el mercado para mejorar la integración en el sistema y elaboración de documentos según el diseño especificado.

o

CE1.3 Utilizar marcas adecuadas para generar la documentación interna

UF1841. Elaboración de documentos web mediante lenguajes de marcas

15

en el desarrollo según las especificaciones del diseño. o

16

CE1.4 En un supuesto práctico, en el que se pide realizar documentos con un lenguaje de marcas que permitan la interacción con el usuario contando con especificaciones dadas: -

Escribir marcas que permitan el cambio de los atributos del texto utilizado.

-

Escribir marcas que permitan el cambio del color e imagen del fondo del documento.

-

Crear marcas referentes a tablas y listas.

-

Crear marcas referentes a enlaces a otros documentos.

-

Integrar marcas que permitan la inclusión de imágenes estáticas o dinámicas, sonidos y vídeos.

-

Integrar marcas referentes a marcos para relacionar diversos documentos.

-

Integrar marcas que permitan la ejecución de programas y controles de cliente.

-

Construir formularios para recoger y validar información del usuario.

-

Diseñar mapas interactivos para facilitar la accesibilidad del usuario.

-

Planificar efectos especiales para ser aplicados en los documentos a elaborar.

o

CE1.5 Enunciar características generales referentes a «hojas de estilo» para ser aplicados en los documentos a elaborar según el diseño especificado.

o

CE1.6 Usar marcas para proporcionar diferentes estilos a los documentos desarrollados según el diseño especificado.

o

CE1.7 Construir documentos utilizando lenguajes de marcas para permitir al usuario el uso de dispositivos móviles y medios específicos de accesibilidad.

UF1841. Elaboración de documentos web mediante lenguajes de marcas

UNIDAD

1

Diseño Web

Contenido 1.1. Principios de diseño web 1.2. Diseño orientado al usuario 1.3. Diseño orientado a objetivos 1.4. Diseño orientado a la implementación 1.5. El proceso de diseño web 1.6. Estructura de un sitio web y navegabilidad 1.7. Estructura y composición de páginas 1.8. Compatibilidad con navegadores 1.9. Diferencias entre diseño orientado a presentación e impresión

UF1841. Elaboración de documentos web mediante lenguajes de marcas

17

La web se ha convertido en poco tiempo en uno de los medios de información más masivos y populares de nuestra era. Su evolución ha sido paralela a la propia evolución de Internet y las TIC; en pocos años, han aparecido multitud de nuevos elementos, herramientas, lenguajes, plataformas, etc. lo que le confiere a este nuevo medio un dinamismo y crecimiento exponencial a veces vertiginoso.

Como nuevo medio, la web ha aprendido mucho de otras disciplinas del diseño tradicional ya consolidadas, como las artes gráficas, fotografía, etc., hasta encontrar su propio camino. Las peculiaridades de este medio hacen necesario tomar en consideración diferentes aspectos que nos permitan crear una metodología y conjunto de normas aplicables al diseño de una página web, como por ejemplo el que se pueda visualizar en diferentes dispositivos, como tablets, móviles o computadoras, con dimensiones de pantalla muy diferentes.

También que el tamaño de las páginas web sea infinito verticalmente, por lo que todas las cuestiones relacionadas con el tamaño de una página han provocado el abandono del enfoque tradicional del diseño basado en medidas absolutas.

1

.1. Principios de diseño web

Entre las características que nos podemos encontrar en una página web y que debemos tener en cuenta para su diseño y la diferencian de otros medios más convencionales, podemos enumerar: UF1841. Elaboración de documentos web mediante lenguajes de marcas

19

•

Uso de contenido multimedia (imagen, gráficos, sonido, animación y video): la utilización de diferentes formatos de contenido en diferentes medios, lo cual hace necesario nuevas metodologías de diseño y maquetación.

•

Ausencia de escalas: ya que no podemos determinar con seguridad el tamaño vertical de la web, ni cuantas páginas están contenidas en el sitio web, por lo tanto, debemos realizar un esfuerzo en la organización de la información, especialmente cuando es muy grande.

•

Ausencia de disposición lineal o secuencial de los contenidos: ya que no existe una secuencialidad en el destino de los hipervínculos ni en la estructura narrativa del texto o de los elementos multimedia, por lo tanto, la navegación a través de las distintas páginas web del sitio también debe ser especialmente organizada mediante un sistema de navegación claro.

Entre los principales elementos del diseño nos podemos encontrar: •

20

Colores: es un aspecto fundamental del diseño del sitio web, teniendo en cuenta las peculiaridades de los colores en pantalla, brillos, animaciones e interactividad (cambio de color de un elemento como respuesta a una acción del usuario). o

El contraste es una característica fundamental de los colores, se basa en la utilización del claro-oscuro para facilitar la lectura y acceso a la información

o

La consistencia del color se puede utilizar para estructurar la información agrupándola en unidades, creando subsistemas y estructuras por su color. Podemos identificar los diferentes elementos del texto de una web por sus colores: -

Fondos.

-

Vínculos.

-

Fuentes.

-

Estructuras tabulares, listas de elementos.

UF1841. Elaboración de documentos web mediante lenguajes de marcas

•

Logos, ayudas visuales.

Fuentes: otro aspecto muy importante cuando establecemos un diseño es todo el relacionado con las fuentes y tipo de letra, donde tendremos que tener en cuenta cuales son las familias y fuentes tipográficas más adecuadas para la web.

Algunas de las características implícitas a las fuentes tipográficas son:

•

o

Legibilidad: característica que permite a un ojo diferenciar adecuadamente las diferentes letras de la fuente para facilitar su lectura, debemos que tener en cuenta que existen distintas familias tipográficas adecuadas para diferentes dispositivos o medios.

o

Atributos del texto: son los diferentes estilos con los que cuenta una fuente tipográfica: cursiva, subrayado, negrita.

o

Tamaño de la fuente: en el campo del diseño web debemos tener en cuenta los diferentes tipos de unidades de medida de los que disponemos, tanto absolutos como relativos.

o

Espaciado, fundamental en la disposición del texto y su legibilidad, disponemos de diferentes espaciados como el espaciado entre caracteres, entre palabras interlineados y sangrías.

o

Estructura del texto en la web: cuando creamos una página web disponemos de diferentes elementos para estructurar el texto como son el título de la página web, los títulos del cuerpo del documento, párrafos, hipervínculos, listas de elementos, tablas, etc.

Imágenes: otro elemento que conformará el diseño de nuestro sitio web son las imágenes, para ello debemos tener en cuenta los siguientes aspectos. o

Diferentes formatos de imagen, existen multitud de formatos disponibles para los diferentes tipos de imágenes que podemos representar en la web, estáticas y animadas, vectoriales y mapas de bits, etc.

o

Además de los formatos podemos clasificar las imágenes por el tipo de información que tratan de representar: UF1841. Elaboración de documentos web mediante lenguajes de marcas

21

-

Iconos que son representaciones conceptuales de manera simplificada y simbólica, suelen estar agrupados por familias, y su objetivo es la representación de la información de manera inmediata.

-

Elementos gráficos de interfaces de usuario como menús, formularios y barras de navegación entre los que podemos encontrar botones y gráficos, casillas de verificación, sliders, etc.

-

Logotipos y marcas que representación la marca imagen corporativa de la empresa y organización.

-

Infografías, esquemas y gráficos que consisten en una correlación entre datos y objetos gráficos de fácil comprensión para facilitar la asimilación de conceptos por parte de usuario.

-

Fotografía digital, su principal formato es el JPG, posee algunas cualidades como las dimensiones, resolución, profundidad de color, que inciden directamente en la calidad de la imagen.

A la hora de realizar el diseño de la web debemos atender al concepto de composición, que consiste en la distribución de todos los elementos de información que conformarán el diseño de manera equilibrada, clara y concisa, utilizando las herramientas básicas del diseño como la tipografía, color, uso de imágenes, maquetación, etc.

Por lo tanto, en el diseño de composición lo primero que debemos es elegir los elementos que utilizaremos en dicho diseño, estos podrán ser imágenes, texto, elementos multimedia, hipervínculos, etc., a continuación, deberemos distribuirlos en el espacio disponible de manera que estén distribuidos de manera equilibrada.

Para dicha distribución debemos tener en cuenta que los elementos situados en la parte superior o derecha disponen de mayor impacto visual en el usuario que los situados en la parte inferior o izquierda. Esto es debido a que la información se va desplegando de arriba hacia abajo y en occidente nuestro sentido de la lectura es de izquierda a derecha.

Por lo tanto, estas zonas del documento deben reservarse para los elementos de exploración e identificación del sitio web, mientras que las zonas inferiores

22

UF1841. Elaboración de documentos web mediante lenguajes de marcas

e izquierda deben dejarse para los contenidos menos relevantes o secundarios.

En definitiva, la composición en el diseño debe guiar al usuario visualmente, ayudándolo a diferenciar la estructura de la información, la navegación por el sitio web y la identificación de la temática y autoría del mismo.

Otro aspecto muy importante dentro del diseño web es la consistencia, es decir, una estructura y distribución uniforme y equilibrada, que permita la armonía entre los diferentes elementos que la componen. Esta consistencia tiene un impacto directo en la experiencia del usuario, para entender el objetivo, organización, estructura de la información del sitio web, etc.

Para dotar de consistencia a un diseño debe haber uniformidad en cuanto a la distribución de los contenidos, colores, fuentes tipográficas, composiciones de imágenes, etc.

Otros elementos que aumentan la consistencia del sitio web son el uso de encabezados y pies de página que ayudan a representar la identidad gráfica y el origen del sitio, como la información legal, derechos de autor, fecha de producción, información de contacto, etc.

La composición y consistencia en el diseño de la web inciden en otro aspecto de crucial importancia y del que hablaremos en el manual «UF1843: Aplicación de técnicas de usabilidad y accesibilidad en el entorno cliente», del presente Certificado de Profesionalidad.

La usabilidad es la disciplina que estudia la facilidad de uso de una interfaz por parte del usuario y los posibles problemas que se le presentarían al realizar determinadas tareas en la interacción con un ambiente gráfico. Por lo que un sitio web posee usabilidad cuando permite al usuario facilidad de acceso, navegabilidad y un nivel adecuado de comprensión de los contenidos del mismo.

1

.2. Diseño orientado al usuario

Este tipo de diseño entiende que todo el proceso de desarrollo del mismo debe estar conducido por las necesidades del usuario, esto implica involucrar UF1841. Elaboración de documentos web mediante lenguajes de marcas

23

al usuario y sus objetivos en todo el proceso de desarrollo del sitio, para ello debemos recopilar información acerca de sus necesidades, para que quieren usar el sitio, y realizar procesos de testeos con los mismos de manera interactiva en todas las fases de desarrollo.

Cuando realizamos un diseño orientado al usuario debemos tener en cuenta cual será el público objetivo al que se dirigirá el producto final, podemos clasificar este público objetivo desde varias perspectivas: •

Edad: según la etapa de desarrollo de la vida de los usuarios podemos caracterizar varios aspectos que influirán en el diseño del sitio web, como son la ideología, estilo de vida, tendencias de moda, etc. También deberemos tener en cuenta otros determinantes en la usabilidad del sitio, ya que ciertos sectores de edad, como el infantil o senior, pueden presentar especiales problemas de accesibilidad a la hora de interactuar con el sitio.

•

Género: podemos encontrarnos con webs que estén enfocadas a contenidos o ventas de productos por género, este tipo de condicionantes se verán reflejados en el diseño del sitio.

•

Profesión: de igual forma la profesión puede conformar el objetivo de un sitio cuando trata de vender productos o mostrar información con una determinada actividad profesional o educativa.

•

Procedencia: los contenidos y estructuras del sitio también dependerán del origen del público objetivo, este puede ser local o internacional.

1

.3. Diseño orientado a objetivos

Cuando no podemos definir de manera clara el público objetivo o este abarca un perfil demasiado amplio debemos recurrir a otro tipo de estrategias de diseño.

En este caso, podemos recurrir al diseño orientado a objetivos cuando lo que si tenemos claro es el tipo de producto que deseamos crear para nuestra web. Este objetivo puede ser de diferente naturaleza, orientado a ventas o

24

UF1841. Elaboración de documentos web mediante lenguajes de marcas

captar clientes, orientado a contenidos como son los didácticos o pedagógicos, informativos, etc. Para ello debemos definir los objetivos de manera muy precisa a corto, mediano y largo plazo.

Cuando realizamos un diseño orientado a definir los objetivos centramos el desarrollo en establecer estrategias específicas acerca del modo en el que se va a construir, cuál será el tiempo dedicado al diseño, el testeo, publicación de contenidos, etc.

1

.4. Diseño orientado a la implementación

Cuando no tenemos claro el tipo de producto que deseamos realizar, pero sí los contenidos (sea una narrativa de texto, biblioteca de imágenes, contenido multimedia o un conjunto de datos estructurados), podemos basar el diseño en la implementación de estos contenidos centrándonos en las posibilidades tecnológicas de las que disponemos para presentar este contenido.

1

.5. El proceso de diseño web

El proceso del diseño web comprende todos los pasos que debe realizar el equipo de desarrolladores desde que inicia el proyecto hasta que obtiene el resultado final. Existen varios procedimientos para realizar esta planificación y ejecución del proyecto, todos ellos tienen por objeto definir una serie de elementos que debemos tener en cuenta a la hora de diseñar e implementar nuestro proyecto, en definitiva, debemos realizar una aproximación deductiva del desarrollo del sitio web, que comprende en primer lugar la finalidad del sitio, definir la temática y los objetivos del proyecto. Después se debe elaborar la especificación que incluirá todos los requisitos del sitio y se estimará la audiencia o público objetivo. Luego se realiza el diseño, una vez terminado se implanta y se prueba. A continuación, mostramos todos estos pasos de manera más detallada.

UF1841. Elaboración de documentos web mediante lenguajes de marcas

25

1. Planificación inicial del sitio web: •

Planificación general del proyecto: antes de comenzar a diseñar el sitio web es necesaria la planificación general de todo el proyecto, en este paso realizaremos una definición general del proyecto es aquí donde el proyecto comienza a tomar forma, mediante entrevistas con los clientes, recopilación de datos del público objetivo y los potenciales usuarios y reuniones con el equipo de trabajo.

•

Equipo de trabajo: realizaremos una asignación de tareas entre los diferentes miembros del equipo de trabajo y de los objetivos a cumplir de cada uno de ellos.

•

Financiamiento del proyecto de sitio web: debemos establecer un presupuesto y modos de financiar el proyecto, costes e inversión inicial del mismo.

•

Instrumentos de seguimiento: establecer de manera clara los métodos de seguimiento del proyecto y los encargados de evaluarlos nos ayudará a crear un plan de trabajo.

2. Definición del sitio web: una vez realizada la planificación inicial del proyecto comenzará el proceso de planificación del diseño propiamente dicho.

26

•

Definición de objetivos del sitio: debemos tener claro que objetivos persigue el sitio web, cuál es su finalidad principal y como implementaremos estos objetivos en el resultado final del proyecto.

•

Definición del público objetivo: como hemos visto, es crucial conocer cuál será el destinatario final que consumirá los contenidos del sitio web para adaptar de mejor manera posible el diseño del sitio a este público.

•

Definición de contenidos del sitio y funcionalidades: una vez conozcamos el objetivo y el público objetivo debemos planificar los contenidos que presentaremos en el sitio, así como las funcionalidades que tendrá el mismo (¿Crearemos una lista de productos? ¿Implementaremos un carrito de la compra? ¿Un buscador de contenidos?, etc.)

UF1841. Elaboración de documentos web mediante lenguajes de marcas

•

Arquitectura de Información, definición de la estructura del sitio, elementos de los sistemas de navegación: realizaremos una planificación de la manera en que se organizarán los datos, si utilizaremos bases de datos o alguna otra colección ordenada de datos, cuál será su sistema de navegación por hipervínculos, de qué manera estructuraremos esta información, etc.

3. Puesta en marcha del sitio web: una vez realizada la planificación del desarrollo procederemos a comenzar el diseño del sitio mediante los siguientes pasos: •

Desarrollo de un prototipo: crearemos un primer diseño que utilizaremos de base para el proyecto final, sobre este prototipo realizaremos las tareas que exponemos a continuación:

•

Testeo de usuarios: es crucial desde el inicio del diseño del proyecto contrastar las opiniones de los clientes o potenciales usuarios del mismo, asegurándonos de que se cumplirán los objetivos, de que los contenidos y su estructura son los adecuados y que las funcionalidades y usabilidad del mismo estarán garantizadas.

•

Desarrollo de un Plan de Pruebas: antes de comenzar un diseño más elaborado debemos especificar un plan de pruebas mediante test y evaluaciones que nos indiquen si se están cumpliendo los objetivos anteriormente fijados.

•

Diseño web y estándares: comenzará el proceso del diseño con estándares cumpliendo toda la normativa necesaria en función del tipo de proyecto que estemos realizando.

•

Diseño para la accesibilidad, diseño de la experiencia del usuario: realizaremos modificaciones e implementaciones que nos acerquen a una experiencia de usuario más amigable y accesible, en determinados proyectos deberemos cumplir con normativas de accesibilidad regladas.

•

Analítica de errores y evaluación de resultados: por último, una vez dispongamos del modelo definitivo realizaremos una analítica con el Plan de Pruebas previamente establecido y un testeo de usuarios y clientes para comprobar si se han cumplido con todos los requisitos UF1841. Elaboración de documentos web mediante lenguajes de marcas

27

y especificaciones del proyecto.

1

.6. Estructura de un sitio web y navegabilidad

La navegación de manera eficiente por el sitio web constituye uno de los ejes fundamentales a la hora de crear proyectos solventes y de calidad. Una vez tengamos los contenidos e información bien estructurados es esencial disponer de una clara presentación y localización de los elementos de navegación del sitio, para ello debemos tener en cuenta los siguientes aspectos:

28

•

Disponibilidad de un menú de navegación principal claro y conciso.

•

Acceso rápido y claro a la página principal desde cualquier otra parte del sitio web.

•

Uso de encabezados y pies de página para establecer los principales accesos de navegación.

•

Mantener consistencia en el diseño de los elementos de navegación por medio de colores y formatos de fuente similares para estos elementos.

•

Ayudas visuales para guiar al usuario en todo momento del lugar en el sitio web donde se encuentran navegando.

UF1841. Elaboración de documentos web mediante lenguajes de marcas

•

Uso de las convenciones para la navegación que especifican la apariencia y la ubicación de los elementos de navegación, permitiendo conocer en todo momento el estado de estos elementos y donde podemos encontrarlos.

•

Herramientas de búsquedas de contenidos dentro del sitio web.

•

Diseñar sistemas de información con una estructura jerárquica en diferentes niveles para estructurar de manera adecuada los contenidos del sitio.

•

Uso de mapas de sitio que representan de manera esquemática la ubicación de todos los elementos dentro del sitio.

UF1841. Elaboración de documentos web mediante lenguajes de marcas

29

•

Índices de sitio que consisten en una lista organizada conceptual o alfabéticamente de los contenidos del sitio.

•

Uso de migas o rutas de temas, que indican el lugar donde está navegando actualmente el usuario y la ruta que se ha seguido para llegar hasta aquí.

1

.7. Estructura y composición de páginas

Un sitio web es un conjunto de páginas web que disponen de información en diferentes formatos, normalmente con formato multimedia, utilizando como canal Internet. El conjunto de páginas que corresponden a una misma arquitectura de información conforma un sitio web. Este sitio web está formado por diferentes partes que funcionan de manera similar.

A. El homepage o página principal es la parte más importante en cualquier sitio ya que toda la organización del sitio web se basa en ella y actúa como una puerta de entrada a todo el sitio, el usuario generalmente la entiende como el punto de referencia para la exploración del sitio, puesto que presenta la idea general del mismo y las posibilidades de exploración más importantes.

Los elementos que suelen aparecer en la homepage son los siguientes:

30

o

Identidad, autoría y objetivos del sitio, ¿qué es?, ¿para qué?, ¿de quién?

o

Sistemas de búsqueda y exploración de información y de navegación principales

UF1841. Elaboración de documentos web mediante lenguajes de marcas

o

Accesos directos las secciones de información más importantes o que se utilizan con mayor frecuencia.

o

Contenido temporal, como noticias, eventos, promociones, ofertas, publicidad, con su fecha de actualización.

o

Registro de usuario, en el caso de que el usuario pueda acceder a partes del sitio exclusivas como su perfil, últimas noticias, descuentos personalizados, entre otras cosas.

A su vez, podemos encontrarnos diferentes tipos de homepages dependiendo de la temática y diseño del sitio web: o

Página portada, de bienvenida o splash, de la misma forma que la portada de un libro convencional contendrá elementos visuales atractivos sin gran contenido informativo.

o

Página de menú principal, en donde aparecerá una lista de enlaces de manera similar a un índice tradicional de un libro.

o

Página principal de noticias, con información actualizada constantemente en forma de banners o secciones.

o

Página principal orientada al usuario, donde aparecerán los accesos a los contenidos divididos en grupos de interés.

B. Subpáginas. Este tipo de páginas están más orientadas al contenido del sitio propiamente dicho, en esta categoría podemos encontrarnos diferentes tipos como: o

Páginas de contenido, con información sobre determinados temas: artículos, bibliográficas, apéndices, glosarios, wikis (contenidos editados por múltiples usuarios), FAQ (Frequently Asked Questions, preguntas frecuentes), legales o de política de privacidad, etc.

o

Páginas específicas para la exploración del sitio, como índices, mapas del sitio, glosarios, menús, listas de recursos, índices de materias, o buscadores.

o

Páginas específicas para tareas de contacto, formularios de datos, enlaces a redes sociales, teléfonos, videoconferencia, etc.

UF1841. Elaboración de documentos web mediante lenguajes de marcas

31

o

Páginas específicas de salida, de créditos, conclusiones, error de servidor, etc.

1

.8. Compatibilidad con navegadores

En los comienzos de la web básicamente predominaban dos navegadores, Microsoft Internet Explorer y el Netscape que dominaban el mercado. En la actualidad, han aparecido multitud de navegadores para diferentes dispositivos lo cual ha complicado enormemente el diseño multiplataforma y multidispositivo que debe caracterizar una página web. Esto es debido a que cada navegador se comporta de manera diferente cuando interpreta los diferentes lenguajes de marcado y hojas de estilo que conforman una web, por lo que los resultados visuales, como la disposición de elementos, márgenes, tamaños de fuente, pueden variar de uno a otro, haciendo nuestro diseño poco consistente.

Para resolver estos problemas de diseño, debemos utilizar una serie de reglas que comentamos a continuación:

32

•

Uso de estándares y validación de código mediante las herramientas de la W3C (World Wide Web Consortium, https://www.w3c.es)

•

Utilización de un diseño líquido donde predominen las unidades de medida relativas, como porcentajes y medidas relativa de fuente en lugar de medidas absolutas.

•

Usar lenguajes de script para utilizar normas de estilo diferentes según el navegador cuando los anteriores puntos no funcionen.

•

Uso de colores seguros para la web, una gama de colores que se visualizan

UF1841. Elaboración de documentos web mediante lenguajes de marcas

del mismo modo en diferentes navegadores.

•

Testear la página web en diferentes navegadores Para saber más: Podemos ver diferentes comparativas de navegadores, desde el punto de vista de los protocolos y estándares que utilizan, la accesibilidad implementada, soporte y tecnologías web, características generales del navegador, etc., en el siguiente recurso: https://es.wikipedia.org/wiki/Anexo:Comparativa_de_navegadores_ web

1

.9. Diferencias entre diseño orientado a presentación e impresión

Cuando comenzamos un diseño web debemos tener en cuenta que el espacio visible con el que contamos es el de la pantalla, y que para acceder a la web el usuario podrá manejar diferentes dispositivos como PDAs, teléfonos móviles, portátiles, ordenadores de sobremesa e incluso televisiones, además de diferentes navegadores, por lo que las dimensiones de pantallas pueden ser muy variadas.

Aunque como ya sabemos, el tamaño de una página web puede ser infinito, UF1841. Elaboración de documentos web mediante lenguajes de marcas

33

resultaría poco práctico para el usuario disponer los contenidos de esta forma, ya que se vería forzado a desplazarse continuamente horizontal o verticalmente, impidiendo ver la totalidad del sitio en una sola pantalla, además de los problemas que tendríamos para imprimirla. Por lo que lo más adecuado sería la fragmentación de los contenidos en secciones de información interrelacionadas.

Este problema se ha ido acrecentando con los años, ya que al principio en la red se consideraba como estándar el monitor VGA, que presentaba una resolución de pantalla de 640 por 480 pixeles, sin embargo, la tecnología ha evolucionado a gran velocidad, y en los últimos años han aparecido multitud de monitores con diferentes 800×600 px, 1024×768 px, 1280×800 px, etc., del mismo modo en las pantallas de ordenador la relación entre anchura y altura predominante es 4:3 mientras que en los dispositivos móviles y tablets la proporción que predomina es 3:4, actualmente han aparecido las pantallas anchas o widescreen con formatos de 16:9 y resoluciones de todavía superiores a las anteriormente indicadas.

La siguiente tabla muestra las resoluciones más frecuentes de pantalla en diferentes dispositivos: Dispositivo Teléfono móvil

Tablets WebTV PC (baja resolución) PC (resolución estándar)

PC (alta resolución)

34

Resolución

Observaciones La resolución se mide a Varía enormemente, desde menudo en caracteres por 3 líneas de 12 caracteres línea y por el número de hasta 310 x 100 píxeles líneas, en lugar de hacerlo por píxeles También es muy variado, desde 320 x 240 El desplazamiento Desde 544 x 372 en sobre todo horizontal es adelante complicado 640 x 480 Probablemente, la 800 x 600 resolución más común hasta el año 2000 Son las resoluciones más 1.024 x 768, 1.152 x 864, frecuentes en los últimos 1.200 x 1.024, 1.600 x dispositivos salidos al 1.200 mercado

UF1841. Elaboración de documentos web mediante lenguajes de marcas

En cuanto al diseño orientado a la impresión debemos tener en cuenta las dimensiones físicas del papel de impresión que utilizaremos.

Las dimensiones de los tamaños de papel de la serie A, tal como se definen en la norma ISO 2161 (tanto en milímetros como en pulgadas), podemos verlas en la siguiente tabla: Tamaño

Ancho x alto (mm)

Ancho x alto (pulg)

4A0

1682 x 2378 mm

66,2 x 93,6 pulg

2A0

1189 x 1682 mm

46,8 x 66,2 pulg

A0

841 x 1189 mm

33,1 x 46,8 pulg

A1

594 x 841 mm

23,4 x 33,1 pulg

A2

420 x 594 mm

16,5 x 23,4 pulg

A3

297 x 420 mm

11,7 x 16,5 pulg

A4

210 x 297 mm

8,3 x 11,7 pulg

A5

148 x 210 mm

5,8 x 8,3 pulg

A6

105 x 148 mm

4,1 x 5,8 pulg

A7

74 x 105 mm

2,9 x 4,1 pulg

A8

52 x 74 mm

2,0 x 2,9 pulg

A9

37 x 52 mm

1,5 x 2,0 pulg

A10

26 x 37 mm

1,0 x 1,5 pulg

Teniendo en cuenta estas dimensiones del papel, las zonas seguras para diseños que facilitarán la impresión en papel deberán ser de 535x295 pixeles y para las pantallas basadas en el estándar de 640x480 o un formato de 780x410 pixeles como estándar para la visualización en una pantalla de 800x600.

En definitiva, para determinar la longitud de la página web que deseamos diseñar se deben ponderar cuatro factores: •

La relación entre página y tamaño de pantalla.

•

Los contenidos de la página, texto, imágenes, material multimedia, etc.

1 INTERNATIONAL ORGANIZATION FOR STANDARIZATION (2002), Especificación de los formatos de papel, ISO 216, Ginebra.

UF1841. Elaboración de documentos web mediante lenguajes de marcas

35

•

El acceso a los contenidos por medio de visualización en el navegador, para descargarlos o imprimirlos.

•

El ancho de banda de que disponen los usuarios.

El concepto de pliegue, utilizado anteriormente en los medios impresos, se aplica a las páginas web para hacer referencia al área que se podrá visualizar al descargar la página sin hacer uso de las barras de desplazamiento. El problema de determinar el tamaño de la pantalla del usuario dificulta la tarea de establecer este pliegue con exactitud, por lo que deberemos utilizar diferentes hojas de estilo con formatos adaptados a estas resoluciones.

Todas estas variaciones relacionadas con el tamaño de la página web provocan una falta de control lo cual ha obligado a los diseñadores a abandonar las reglas tradicionales del diseño y moverse a otro enfoque basado en la respuesta de las diferentes interfaces al entorno en el que se están mostrando los contenidos.

En este caso la aplicación de diseño líquido tiene como respuesta dejar a los agentes de usuario determinar la composición, lo cual se conseguirá mediante la asignación de valores relativos como unidades de medida, es decir utilizando porcentajes en lugar de valores fijos como pixeles, o unidades relativas de tamaño de fuente, de esta manera la disposición de la página se adecuará al tamaño en que se visualice.

36

UF1841. Elaboración de documentos web mediante lenguajes de marcas