ndice

INTRODUCCIN .......................................................................................................................................................9
CAPTULO 1. PLANIFICACIN DE INTERFACES GRFICAS....................................................................11
1.1 Elementos de diseo: percepcin visual.....................................................................................12
1.2 Fundamentos de la composicin.......................................................................................................13
1.2.1 El equilibrio visual....................................................................................................................................14
1.2.2 La tensin compositiva . ...........................................................................................................................14
1.3 Color, tipografa, iconos......................................................................................................................15
1.3.1 Color...........................................................................................................................................................15
1.3.2 Tipografa..................................................................................................................................................17
1.3.3 Iconos.........................................................................................................................................................18
1.4 Componentes de una interfaz web..................................................................................................19
1.4.1 Cabecera....................................................................................................................................................20
1.4.2 Los sistemas de navegacin......................................................................................................................21
1.4.3 El cuerpo de la pgina...............................................................................................................................24
1.4.4 El pie de pgina.........................................................................................................................................24
1.4.5 Los espacios en blanco...............................................................................................................................25
1.5 Lenguajes de marcas...............................................................................................................................27
1.6 Maquetacin web. Elementos de ordenacin...........................................................................29
1.6.1 Distribucin de elementos en la interfaz: capas, marcos.........................................................................29
1.7 Mapa de navegacin. Prototipos........................................................................................................31
1.8 Interpretacin de guas de estilo. Elementos.........................................................................33
1.9 Aplicaciones para desarrollo web.................................................................................................35
1.10 Generacin de documentos y sitios web......................................................................................36
1.11 Plantilla de diseo..................................................................................................................................37
1.12 Interaccin persona-ordenador.....................................................................................................38
1.13 Conclusin....................................................................................................................................................39
RESUMEN DEL CAPTULO......................................................................................................................................39
ejercicios propuesTOS.....................................................................................................................................40
TEST DE CONOCIMIENTOS....................................................................................................................................41
CAPTULO 2. USO DE ESTILOS...........................................................................................................................43
2.1 Introduccin a hojas de estilo en cascada (CSS, Cascading Style Sheet)..................44
2.2 Selectores: estilos en lnea basados en etiquetas, en clases y en
identificadores..........................................................................................................................................45
2.2.1 Selectores basados en etiquetas................................................................................................................45
2.2.2 Selectores basados en clases.....................................................................................................................47
2.2.3 Selectores basados en identificadores......................................................................................................49

Diseo de Interfaces Web

RA-MA

2.3 Agrupacin y anidamiento de selectores...................................................................................52

2.3.1 Agrupamientos..........................................................................................................................................52
2.3.2 Anidamientos............................................................................................................................................53
2.4 Buenas prcticas al escribir css......................................................................................................57
2.5 Atributos. Modelo de Cajas..................................................................................................................60
2.5.1 Unidades de medida..................................................................................................................................61
2.5.2 Atributos de posicin.................................................................................................................................62
2.5.3 Atributos margin.......................................................................................................................................63
2.5.4 Atributos padding.....................................................................................................................................64
2.5.5 Atributos border-top, border-bottom, border-right, border-left................................................................65
2.5.6 Atributos del contenido.............................................................................................................................67
2.6 Elementos: colores de fondo, textos, enlaces, listas, tablas, visibilidad,
imgenes.........................................................................................................................................................72
2.7 Superposicin y precedencia de estilos......................................................................................79
2.7.1 Superposicin de cajas..............................................................................................................................79
2.7.2 Precedencia de estilos................................................................................................................................83
2.8 Crear y vincular hojas de estilo......................................................................................................85
2.9 Crear y vincular hojas de estilo en cascada externa.........................................................86
2.10 Herramientas y test de verificacin.............................................................................................88
2.11 Conclusin y Propuestas Para Ampliar.........................................................................................90
RESUMEN DEL CAPTULO......................................................................................................................................91
ejercicios propuesTOS.....................................................................................................................................92
TEST DE CONOCIMIENTOS....................................................................................................................................92
CAPTULO 3. IMPLANTACIN DE CONTENIDO MULTIMEDIA................................................................95
3.1 Derechos de la propiedad intelectual. Licencias. Ley de la Propiedad
Intelectual. Derechos de autor.......................................................................................................96
3.1.1 Derechos de la propiedad intelectual........................................................................................................96
3.1.2 Licencias....................................................................................................................................................97
3.1.3 Propiedad intelectual................................................................................................................................99
3.1.4 Derechos de autor......................................................................................................................................99
3.2 Imgenes: mapa de bits, imagen vectorial. Software para crear y procesar
imgenes. Formatos de archivos de imgenes.........................................................................100
3.2.1 Tipos de imgenes en la web...................................................................................................................100
3.2.2 Software para crear y procesar imgenes..............................................................................................102
3.3 Optimizacin de imgenes para la web. Resolucin.............................................................103
3.4 Audio: Insertar audio en una web...................................................................................................104
3.4.1 Formatos..................................................................................................................................................104
3.4.2 Conversin de formatos...........................................................................................................................106
3.4.3 Insertando audio en una web..................................................................................................................107
3.4.4 Consideraciones para el uso de audio en un sitio web............................................................................113
3.5 Vdeo: Insertar vdeo en una web...................................................................................................114
3.5.1 Formatos..................................................................................................................................................114
3.5.2 Conversin de formatos...........................................................................................................................114
3.5.3 Insertar vdeo en una web.......................................................................................................................116

 RA-MA

ndice

3.6 Animaciones................................................................................................................................................120
3.6.1 Formatos de animaciones........................................................................................................................120
3.6.2 Herramientas de programacin..............................................................................................................122
3.7 Conclusin y Propuestas Para Ampliar.......................................................................................129
RESUMEN DEL CAPTULO....................................................................................................................................129
ejercicios propuesTOS...................................................................................................................................130
TEST DE CONOCIMIENTOS..................................................................................................................................130
CAPTULO 4. INTEGRACIN DE CONTENIDO INTERACTIVO ..............................................................133
4.1 Elementos interactivos bsicos y avanzados.........................................................................134
4.1.1 Introduccin a jQuery..............................................................................................................................135
4.1.2 Manejo de eventos...................................................................................................................................136
4.2 Cambio de las propiedades de un elemento.............................................................................140
4.2.1 Cambio de las propiedades CSS..............................................................................................................140
4.2.2 Aadir nuevos elementos........................................................................................................................140
4.2.3 Aadiendo texto.......................................................................................................................................142
4.2.4 Otros mtodos..........................................................................................................................................142
4.3 Ejecucin de secuencias de funciones......................................................................................142
4.4 Comportamiento de los elementos. Efectos visuales.......................................................144
4.4.1 Efectos bsicos.........................................................................................................................................145
4.4.2 Efectos Fading (opacidad-transparencia de los elementos) . ................................................................147
4.4.3 Efectos Sliding (desplazamiento)...........................................................................................................149
4.4.4 Otros efectos............................................................................................................................................150
4.5 Comportamientos interactivos .....................................................................................................155
4.5.1 Eventos de ratn......................................................................................................................................155
4.5.2 Eventos de teclado...................................................................................................................................160
4.5.3 Eventos de ventana.................................................................................................................................162
4.6 Reproduccin de sonido, vdeo y animacin.............................................................................164
4.7 CONCLUSIONES.............................................................................................................................................166
RESUMEN DEL CAPTULO....................................................................................................................................167
ejercicios propuesTOS...................................................................................................................................167
TEST DE CONOCIMIENTOS..................................................................................................................................168
CAPTULO 5. DESARROLLO DE WEBS ACCESIBLES.................................................................................169
5.1 Concepto de accesibilidad.................................................................................................................170
5.2 El Consorcio World Wide Web (W3C)................................................................................................171
5.3 Principios generales de diseo accesible................................................................................173
5.4 Pautas de Accesibilidad al Contenido en la Web...................................................................175
5.5 Criterios para satisfacer los requisitos definidos en las WCAG.................................177
5.6 Prioridades. Puntos de verificacin. Niveles de adecuacin.........................................181
5.6.1 Perceptibilidad........................................................................................................................................182
5.6.2 Operatividad............................................................................................................................................185
5.6.3 Comprensibilidad....................................................................................................................................188
5.6.4 Robustez . ................................................................................................................................................190
5.7 Mtodos para realizar revisiones preliminares y evaluaciones de
adecuacin o conformidad de documentos Web...................................................................191

Diseo de Interfaces Web

RA-MA

5.8 Herramientas de anlisis de accesibilidad Web....................................................................194

5.8.1 Software y herramientas on line.............................................................................................................194
5.8.2 Chequeo de la accesibilidad web desde diferentes navegadores...........................................................196
5.8.3 Chequeo de la accesibilidad web desde dispositivos mviles.................................................................197
5.9 Conclusiones.............................................................................................................................................197
RESUMEN DEL CAPTULO....................................................................................................................................198
ejercicios propuesTOS...................................................................................................................................198
TEST DE CONOCIMIENTOS..................................................................................................................................199
CAPTULO 6. IMPLEMENTACIN DE LA USABILIDAD EN LA WEB. DISEO AMIGABLE.............201
6.1 Concepto de usabilidad.......................................................................................................................202
6.2 Anlisis de la usabilidad. Tcnicas...............................................................................................204
6.3 Principios para conseguir Webs amigables...............................................................................205
6.4 Identificacin del objetivo de la Web........................................................................................208
6.5 Tipos de usuario. Necesidades..........................................................................................................210
6.6 Barreras identificadas por los usuarios e Informacin fcilmente
accesible......................................................................................................................................................211
6.7 Velocidad de conexin.........................................................................................................................213
6.8 Importancia del uso de estndares externos........................................................................215
6.9 Navegacin fcilmente recordada frente a navegacin redescubierta..............216
6.10 Facilidad de navegacin en la Web................................................................................................219
6.11 Verificacin de la usabilidad en diferentes navegadores y tecnologas............220
6.12 Herramientas y test de verificacin...........................................................................................221
6.13 Conclusiones.............................................................................................................................................222
RESUMEN DEL CAPTULO....................................................................................................................................223
ejercicios propuesTOS...................................................................................................................................223
TEST DE CONOCIMIENTOS..................................................................................................................................224
material adicional.......................................................................................................................................225
ndice alfabtico..........................................................................................................................................227