DISEÑO DE INTERFACES WEB, GRADO SUPERIOR

INTRODUCCIÓN

CAPÍTULO 1. PLANIFICACIÓN DE INTERFACES GRÁFICAS

1.1 ELEMENTOS DE DISEÑO: PERCEPCIÓN VISUAL

1.2 FUNDAMENTOS DE LA COMPOSICIÓN

1.2.1 El equilibrio visual

1.2.2 La tensión compositiva

1.3 COLOR, TIPOGRAFÍA, ICONOS

1.3.1 Color

1.3.2 Tipografía

1.3.3 Iconos

1.4 COMPONENTES DE UNA INTERFAZ WEB

1.4.1 Cabecera

1.4.2 Los sistemas de navegación

1.4.3 El cuerpo de la página

1.4.4 El pie de página

1.4.5 Los espacios en blanco

1.5 LENGUAJES DE MARCAS

1.6 MAQUETACIÓN WEB. EL EMENTOS DE ORDENACIÓN

1.6.1 Distribución de elementos en la interfaz: capas, marcos

1.7 MAPA DE NAVEGACIÓN. PROTOTIPOS

1.8 INTERPRETACIÓN DE GU ÍAS DE ESTILO. EL EMENTOS

1.9 APLICACIONES PARA DESARROLLO WEB

1.10 GENERACIÓN DE DOCUMENTOS Y SITIOS WEB

1.11 PLANTILLA DE DISEÑO

1.12 INTERACCIÓN PERSONA-ORDENADOR

1.13 CONCLUSIÓN

RESUMEN DEL CAPÍTULO

EJERCICIOS PROPUESTOS

TEST DE CONOCIMIENTOS

CAPÍTULO 2. USO DE ESTILOS

2.1 INTRODUCCIÓN A HOJAS DE ESTILO EN CASCADA (CSS, CASCADING STYLE SHEET)

2.2 SELECTORES: ESTILOS EN LÍNEA BASADOS EN ETIQUETAS, EN CLASES Y EN IDENTIFICADORES

2.2.1 Selectores basados en etiquetas

2.2.2 Selectores basados en clases

2.2.3 Selectores basados en identificadores

2.3 AGRUPACIÓN Y ANIDAMIENTO DE SELECTORES

2.3.1 Agrupamientos

2.3.2 Anidamientos

2.4 BUENAS PRÁCTICAS AL ESCRIBIR CSS

2.5 ATRIBUTOS. MODELO DE CAJAS

2.5.1 Unidades de medida

2.5.2 Atributos de posición

2.5.3 Atributos margin

2.5.4 Atributos padding

2.5.5 Atributos border-top, border-bottom, border-right, border-left

2.5.6 Atributos del contenido

2.6 ELEMENTOS: COLORES DE FONDO, TEXTOS, ENLACES, LISTAS, TABLAS, VISIBILIDAD, IMÁGENES

2.7 SUPERPOSICIÓN Y PRECEDENCIA DE ESTILOS

2.7.1 Superposición de cajas

2.7.2 Precedencia de estilos

2.8 CREAR Y VINCULAR HOJAS DE ESTILO

2.9 CREAR Y VINCULAR HOJAS DE ESTILO EN CASCADA EXTERNA

2.10 HERRAMIENTAS Y TEST DE VERIFICACIÓN

2.11 CONCLUSIÓN Y PROPUESTAS PARA AMPL IAR

RESUMEN DEL CAPÍTULO

EJERCICIOS PROPUESTOS

TEST DE CONOCIMIENTOS

CAPÍTULO 3. IMPLANTACIÓN DE CONTENIDO MULTIMEDIA

3.1 DERECHOS DE LA PROPIEDAD INTELECTUAL. LICENCIAS. LEY DE LA PROPIEDAD

INTELECTUAL. DERECHOS DE AUTOR

3.1.1 Derechos de la propiedad intelectual

3.1.2 Licencias

3.1.3 Propiedad intelectual

3.1.4 Derechos de autor

3.2 IMÁGENES: MAPA DE BITS, IMAGEN VECTORIAL. SOFTWARE PARA CREAR Y PROCESAR

IMÁGENES. FORMATOS DE ARCHIVOS DE IMÁGENES

3.2.1 Tipos de imágenes en la web

3.2.2 Software para crear y procesar imágenes

3.3 OPTIMIZACIÓN DE IMÁGENES PARA LA WEB. RESOLU CIÓN

3.4 AUDIO: INSERTAR AUDIO EN UNA WEB

3.4.1 Formatos

3.4.2 Conversión de formatos

3.4.3 Insertando audio en una web

3.4.4 Consideraciones para el uso de audio en un sitio web

3.5 VÍDEO: INSERTAR VÍDEO EN UNA WEB

3.5.1 Formatos

3.5.2 Conversión de formatos

3.5.3 Insertar vídeo en una web

3.6 ANIMACIONES

3.6.1 Formatos de animaciones

3.6.2 Herramientas de programación

3.7 CONCLU SIÓN Y PROPUESTAS PARA AMPLIAR

RESUMEN DEL CAPÍTULO

EJERCICIOS PROPUESTOS

TEST DE CONOCIMIENTOS

CAPÍTULO 4. INTEGRACIÓN DE CONTENIDO INTERACTIVO

4.1 ELEMENTOS INTERACTIVOS BÁSICOS Y AVANZADOS

4.1.1 Introducción a jQuery

4.1.2 Manejo de eventos

4.2 CAMBIO DE LAS PROPIEDADES DE UN ELEMENTO

4.2.1 Cambio de las propiedades CSS

4.2.2 Añadir nuevos elementos

4.2.3 Añadiendo texto

4.2.4 Otros métodos

4.3 EJECUCIÓN DE SECUENCIAS DE FUNCIONES

4.4 COMPORTAMIENTO DE LOS ELEMENTOS. EFECTOS VISUALES

4.4.1 Efectos básicos

4.4.2 Efectos Fading (opacidad-transparencia de los elementos)

4.4.3 Efectos Sliding (desplazamiento)

4.4.4 Otros efectos

4.5 COMPORTAMIENTOS INTERACTIVOS

4.5.1 Eventos de ratón

4.5.2 Eventos de teclado

4.5.3 Eventos de ventana

4.6 REPRODUCCIÓN DE SONIDO, VÍDEO Y ANIMACIÓN

4.7 CONCLUSIONES

RESUMEN DEL CAPÍTULO

EJERCICIOS PROPUESTOS

TEST DE CONOCIMIENTOS

CAPÍTULO 5. DESARROLLO DE WEBS ACCESIBLES

5.1 CONCEPTO DE ACCESIBILIDAD

5.2 EL CONSORCIO WORLD WIDE WEB (W3C)

5.3 PRINCIPIOS GENERALES DE DISEÑO ACCESIBLE

5.4 PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB

5.5 CRITERIOS PARA SATISFACER LOS REQUISITOS DEFINIDOS EN LAS WCAG

5.6 PRIORIDADES. PUNTOS DE VERIFICACIÓN. NIVELES DE ADECUACIÓN

5.6.1 Perceptibilidad

5.6.2 Operatividad

5.6.3 Comprensibilidad

5.6.4 Robustez

5.7 MÉTODOS PARA REALIZAR REVISIONES PRELIMINARES Y EVALUACIONES DE ADECUACIÓN O CONFORMIDAD DE DOCUMENTOS WEB

5.8 HERRAMIENTAS DE ANÁLISIS DE ACCESIBILIDAD WEB

5.8.1 Software y herramientas on line

5.8.2 Chequeo de la accesibilidad web desde diferentes navegadores

5.8.3 Chequeo de la accesibilidad web desde dispositivos móviles

5.9 CONCLUSIONES

RESUMEN DEL CAPÍTULO

EJERCICIOS PROPUESTOS

TEST DE CONOCIMIENTOS

CAPÍTULO 6. IMPLEMENTACIÓN DE LA USABILIDAD EN LA WEB. DISEÑO AMIGABLE

6.1 CONCEPTO DE USABILIDAD

6.2 ANÁLISIS DE LA USABILIDAD. TÉCNICAS

6.3 PRINCIPIOS PARA CONSEGUIR WEBS AMIGABLES

6.4 IDENTIFICACIÓN DEL OBJETIVO DE LA WEB

6.5 TIPOS DE USUARIO. NECESIDADES

6.6 BARRERAS IDENTIFICADAS POR LOS USUARIOS E INFORMACIÓN FÁCILMENTE ACCESIBLE

6.7 VELOCIDAD DE CONEXIÓN

6.8 IMPORTANCIA DEL USO DE ESTÁNDARES EXTERNOS

6.9 NAVEGACIÓN FÁCILM ENTE RECORDADA FRENTE A NAVEGACIÓN REDESCUBIERTA

6.10 FACILIDAD DE NAVEGACIÓN EN LA WEB

6.11 VERIFICACIÓN DE LA USABILIDAD EN DIFERENTES NAVEGADORES Y TECNOLOGÍAS

6.12 HERRAMIENTAS Y TEST DE VERIFICACIÓN

6.13 CONCLUSIONES

RESUMEN DEL CAPÍTULO

EJERCICIOS PROPU ESTOS

TEST DE CONOCIMIENTOS

MATERIAL ADICIONAL

ÍNDICE ALFABÉTICO

La presente obra está principalmente dirigida a los estudiantes del Ciclo Formativo Desarrollo de Aplicaciones Web de Grado Superior, en concreto para el módulo profesional Diseño de Interfaces Web.

Los contenidos incluidos en este libro abarcan los conceptos básicos del diseño de interfaces web, que van desde los conceptos básicos del desarrollo web, las hojas de estilo CSS, el manejo de recursos multimedia, hasta la programación de animaciones con jQuery. Todo ello enmarcado dentro de las pautas y criterios que definen la usabilidad y accesibilidad de las interfaces.

Los capítulos incluyen actividades resueltas y ejemplos con el propósito de facilitar la asimilación de los conocimientos tratados. De esta manera, se pretende que el estudiante asimile la teoría desde una perspectiva práctica.

Así mismo, se incorporan test de conocimientos y ejercicios propuestos con la finalidad de comprobar que los objetivos de cada capítulo se han asimilado correctamente.

Además, reúne los recursos necesarios para incrementar la didáctica del libro, tales como un glosario con los términos informáticos necesarios, bibliografía y documentos para ampliación de los conocimientos.