Diseño de interfaces web
Para garantizar el éxito de una página web hay que proporcionar al usuario un acceso claro y rápido a los contenidos, a la vez que una experiencia visual agradable. El diseño ha de tener en cuenta lo estético, pero también la usabilidad, la navegabilidad y la accesibilidad.
Esta obra va dirigida a todo aquel que quiera formarse en el mundo del desarrollo web en HTML, en concreto, constituye una guía fundamental para los alumnos del ciclo formativo de grado superior Desarrollo de Aplicaciones Web. Se centra en el diseño de interfaces web y el lenguaje de hojas de estilo CSS, explicado desde un punto de vista práctico, y aplicado con reglas y resúmenes de sintaxis y múltiples códigos de ejemplo, listos para poner en práctica nuestras habilidades, y que harán de este libro y de esta asignatura el comienzo de un futuro como diseñador de interfaces web.
Índice
PRESENTACIÓN............................................................................................................ 11
1. INTRODUCCIÓN AL DISEÑO DE INTERFACES Y APLICACIONES PARA
EL DISEÑO WEB............................................................................................................ 13 Objetivos......................................................................................................................... 13
Mapa conceptual.............................................................................................................. 14 Glosario............................................................................................................................ 14
1.1. Interacción persona-ordenador................................................................................. 15
1.2. Diseño de una interfaz web. El diseño gráfico.......................................................... 16
1.3. Aplicaciones.............................................................................................................. 18
1.3.1. Prototipos. Elementos clave de un prototipo en la interfaz................................... 18
1.3.2. Aplicaciones para desarrollo de interfaces web.................................................... 19
1.4. Planteamiento del diseño de un sitio web................................................................ 24
1.4.1. Área de redacción ................................................................................................ 25
1.4.2. Área de producción............................................................................................... 25
1.4.3. Área técnica.......................................................................................................... 25
1.4.4. Área artística ........................................................................................................ 25 Resumen........................................................................................................................ 26
Ejercicios propuestos..................................................................................................... 27
Actividades de autoevaluación....................................................................................... 28
2. ELEMENTOS PARA EL DISEÑO WEB..................................................................... 31 Objetivos........................................................................................................................ 31
Mapa conceptual............................................................................................................ 32
Glosario.......................................................................................................................... 33
2.1. Componentes de una interfaz web......................................................................... 33
2.2. Maquetación web.................................................................................................... 34
2.2.1. Elementos de una página web............................................................................. 34
2.2.2. Mapa de navegación............................................................................................. 36
2.3. El color..................................................................................................................... 37
2.3.1. Sistema RGB......................................................................................................... 37
2.3.2. Matiz, saturación y brillo......................................................................................... 38
2.3.3. Colores seguros..................................................................................................... 40
2.4. Elementos de diseño................................................................................................. 41
2.4.1. Elementos conceptuales: punto, línea, plano y volumen.......................................... 41
2.4.2. Elementos visuales: forma, medida, color y textura............................................... 42
2.4.3. Elementos de relación: dirección, posición, espacio y gravedad ........................ 43
2.4.4. Elementos prácticos: representación, significado y función.................................... 44 Resumen........................................................................................................................... 46
Ejercicios propuestos......................................................................................................... 47
Actividades de autoevaluación........................................................................................... 48
3. GUÍAS DE ESTILO Y LENGUAJE DE MARCAS ........................................................... 51 Objetivos.............................................................................................................................. 51
Mapa conceptual................................................................................................................. 52 Glosario............................................................................................................................... 52
3.1. Guías de estilo............................................................................................................. 53
3.1.1. Tipografías................................................................................................................ 54
3.1.2. Colores..................................................................................................................... 56
3.1.3. Iconografía............................................................................................................... 56
3.2. Lenguaje de marcas HTML......................................................................................... 57
3.2.1. Estructura................................................................................................................. 57
3.2.2. Texto, párrafos, estilos y formatos........................................................................... 58
3.2.3. Enlaces..................................................................................................................... 59
3.2.4. Imágenes.................................................................................................................. 60
3.2.5. Formularios. La etiqueta .................................................................................... 61
3.3.Tablas........................................................................................................................... 67
3.4. Marcos............................................................................................................. 69
3.5. HTML5 ................................................................................................................... 70 Resumen....................................................................................................................... 74
Ejercicios propuestos.................................................................................................... 75
Actividades de autoevaluación...................................................................................... 76
4. LENGUAJE DE HOJAS DE ESTILO CSS................................................................. 79 Objetivos........................................................................................................................ 79
Mapa conceptual............................................................................................................ 80 Glosario........................................................................................................................... 80
4.1. Introducción a CSS ................................................................................................ 81
4.2. Hojas de estilo externas.......................................................................................... 83
4.3. Medios..................................................................................................................... 84
4.3.1. @media................................................................................................................ 85
4.3.2. @import................................................................................................................ 86
4.4. El modelo de cajas de CSS...................................................................................... 88
4.5. Herencia................................................................................................................... 91
4.6. CSS3 ....................................................................................................................... 93
4.7. Bootstrap 4................................................................................................................ 95 Resumen.......................................................................................................................... 98
Ejercicios propuestos....................................................................................................... 99
Actividades de autoevaluación....................................................................................... 101
5. SELECTORES. CLASES E IDENTIFICADORES....................................................... 103 Objetivos.......................................................................................................................... 103
Mapa conceptual.............................................................................................................. 104 Glosario............................................................................................................................ 104
5.1. Definición de selectores............................................................................................ 105
5.2. Selectores básicos..................................................................................................... 106
5.2.1. Selector universal (*)......................................................................................... 106
5.2.2. Selector etiqueta................................................................................................106
} 5.2.3. Selector descendente ...................................................................................... 109
5.3. Selectores de clase e identificadores......................................................................... 110
5.3.1. Identificadores (ID)............................................................................................ 111
5.3.2. Clases (class).................................................................................................... 112
5.3.3. Combinación de clases e identificadores.......................................................... 113
5.4. Pseudoselectores: pseudoclases y pseudoelementos.............................................. 114
5.4.1. Pseudoclases.................................................................................................... 114
5.4.2. Pseudoelementos.............................................................................................. 116 Resumen........................................................................................................................... 117
Ejercicios propuestos........................................................................................................ 118
Actividades de autoevaluación.......................................................................................... 120
6. PROPIEDADES CSS, TEXTO Y FUENTE, COLORES Y FONDO, FLOTAR Y POSICIONAR.................................................................................................................... 123 Objetivos............................................................................................................................ 123
Mapa conceptual................................................................................................................ 124 Glosario.............................................................................................................................. 125
6.1. Introducción................................................................................................................ 125
6.2. Propiedades de fuente y texto.................................................................................... 125
6.2.1. Propiedades de fuente...................................................................................... 126
6.2.2. Propiedades de texto......................................................................................... 130
6.3. El diseño del fondo....................................................................................................... 134
6.3.1. Color de fondo (‘background-color’) .................................................................. 134
6.3.2. Imagen de fondo (‘background-image’).............................................................. 134
6.3.3. Repetición y posición (‘background-repeat’ y ‘background-position’) .............. 135
6.3.4. Opacity............................................................................................................... 136
6.4. Flotar y posicionar......................................................................................................... 137 Resumen............................................................................................................................. 139
Ejercicios propuestos.......................................................................................................... 141
Actividades de autoevaluación............................................................................................ 143
7. IMÁGENES Y SOFTWARE DE GESTIÓN DE RECURSOS GRÁFICOS ...................... 145 Objetivos............................................................................................................................... 145
Mapa conceptual................................................................................................................... 146 Glosario................................................................................................................................. 146
7.1. Imágenes....................................................................................................................... 147
7.1.1. Tipos de imagen.................................................................................................. 148
7.1.2. Formatos de imagen en la web........................................................................... 149
7.1.3. Resolución y profundidad de color....................................................................... 151
7.1.4. Tamaño y compresión de imágenes.................................................................... 153
7.2. Software para la gestión de recursos gráficos............................................................... 153
7.2.1. Software de visualización de imágenes............................................................... 154
7.2.2. Software de edición de imágenes........................................................................ 156
7.2.3. Software de creación de imágenes...................................................................... 157
7.3. Las imágenes y la Ley de Propiedad Intelectual............................................................ 158
7.3.1. Derechos de la propiedad intelectual .................................................................. 159
7.3.2. Derechos de autor................................................................................................. 159
7.3.3. Licencias............................................................................................................... 160
7.3.4. Registro de contenido ........................................................................................... 161 Resumen................................................................................................................................. 163
Ejercicios propuestos.............................................................................................................. 164
Actividades de autoevaluación................................................................................................ 165
8. ELEMENTOS INTERACTIVOS EN LA WEB: SONIDO, VÍDEO Y ANIMACIONES.............167 Objetivos................................................................................................................................... 167
Mapa conceptual....................................................................................................................... 168 Glosario..................................................................................................................................... 169
8.1. El sonido............................................................................................................................. 169
8.1.1. Conceptos básicos.................................................................................................... 169
8.1.2. Formatos de sonido.................................................................................................. 171
8.1.3. El sonido en la web................................................................................................... 172
8.2. El vídeo en la web.............................................................................................................. 173
8.2.1. Conceptos básicos.................................................................................................... 173
8.2.2. Formatos de vídeo.................................................................................................... 174
8.2.3. Uso del vídeo en la web............................................................................................ 175
8.3. Animaciones....................................................................................................................... 177
8.3.1. La propiedad ‘animation’ .......................................................................................... 177
8.3.2. La propiedad ‘transition’............................................................................................ 178
8.3.3. La propiedad ‘steps ()’.............................................................................................. 180
8.4. Elementos interactivos....................................................................................................... 182
8.4.1. ¿Qué son los elementos interactivos?.......................................................................182
8.4.2. Comportamientos interactivos................................................................................... 182 Resumen................................................................................................................................... 185
Ejercicios propuestos................................................................................................................ 186 Actividades de autoevaluación.................................................................................................. 187
9. USABILIDAD, ACCESIBILIDAD Y NAVEGACIÓN EN LA WEB. ANÁLISIS Y
VERIFICACIÓN DE LA WEB.................................................................................................. 189 Objetivos.................................................................................................................................... 189
Mapa conceptual........................................................................................................................ 190 Glosario....................................................................................................................................... 191
9.1. Usabilidad en la web........................................................................................................... 191
9.1.1. Objetivos de uso y estándares de usabilidad........................................................... 192
9.1.2. Los usuarios............................................................................................................. 194
9.1.3. Navegación en la web.............................................................................................. 194
9.2. Accesibilidad....................................................................................................................... 195
9.2.1. El consorcio World Wide Web (W3C)....................................................................... 196
9.2.2. Tipos de discapacidad y cómo implementar la accesibilidad en la web................... 198
9.2.3. Herramientas para la evaluación de accesibilidad.................................................... 201
9.3. Análisis y verificación de la usabilidad................................................................................ 202
9.3.1. Método por inspección. Evaluación heurística ........................................................ 202
9.3.2. Método de test con usuarios.................................................................................... 203
9.4. Análisis y verificación de la web........................................................................................ 203
9.4.1. Fase de planificación............................................................................................... 204
9.4.2. Fase de diseño........................................................................................................ 205
9.4.3. Fase de implementación.......................................................................................... 205
9.4.4. Fase de evaluación.................................................................................................. 205
9.4.5. Fase de producción ................................................................................................. 206
9.4.6. Fase mantenimiento y seguimiento.......................................................................... 206 Resumen................................................................................................................................... 206
Ejercicios propuestos................................................................................................................. 207 Actividades de autoevaluación...................................................................................................208