DISEÑO WEB. Tecnología digital: Redes y comunicaciones. Imagen digital. Edición y publicación electrónica.

Transcripción

1 DISEÑO WEB OBJETIVOS Tecnología digital: Redes y comunicaciones. Imagen digital. Edición y publicación electrónica. Usabilidad y accesibilidad. Comunicación multimedia. Edición Bitmap vectorial y autoedición. Edición de imágenes digitales. Métodos de investigación y experimentación propios de la materia. REQUITOS PREVIOS No es necesario ningún requisito previo para cursar esta asignatura. PROGRAMA DE TEORIA 1. Qué es internet. La historia de Internet y la web. 2. Introducción a las páginas web. La evolución de los estándares web. 2.1 Los orígenes de Internet. 2.2 La creación de la web mundial. 2.3 La aparición de los estándares web. 2.4 Cómo funciona Internet?. 2.5 Tipos de páginas web. 2.6 Historia del diseño web. 3. Planificación de un sitio Por qué tener un sitio Web?. Tipos de webs Qué significa Webmastering? Diseño Realización Alojamiento Salir a la luz Promoción. Curso académico 2014/2015 1

2 3.8. Fases de planificación: Fase 1: Planificar el sitio web. Fase 2. Desarrollar el sitio Web (diseñar contenidos). Fase 3. Implementar el sitio web. Fase 4. Fidelización de los visitantes. 4. Conceptos teóricos en el diseño de interfaces web. 4.1 Elementos del diseño gráfico que intervienen en una web y sus características. 1. Elementos conceptuales: El punto La línea El plano Volumen 2. Elementos visuales El contorno y las formas La medida La textura El color 3. Elementos de relación La dirección La posición El espacio Gravedad 4. Elementos prácticos Representación Significado Función 4.2 Principios del diseño en la web. 1. Repetición o ritmo. 1.1 Como expresar ritmo 1.2 Clasificación del ritmo Repetición o ritmo regular Repetición o ritmo sincopado (alternancia) Repetición o ritmo no armónico Curso académico 2014/2015 2

3 2. Contraste. 2.1 Como expresar contraste 2.2 Tipos de contrastes Contraste de tono Contraste de color Contraste de contorno Contraste de alineación Contraste de escala o tamaño 3. Balance. Tipos de balance: Balance simétrico Balance asimétrico Fuera de balance 4. Proximidad o unidad. Similitud de elementos en Diseño Web. La similitud. Clases de proximidad. 5. Énfasis. Clasificación de elementos según el énfasis. Elementos dominantes. Elementos sub-dominantes. Elementos subordinados. 5. Leyes fundamentales del diseño web. 5.1 Las leyes fundamentales del diseño. Llamar la atención. Transmitir la información. Mantener la transmisión. 5.2 Consideraciones para diseñar una web de forma eficaz. 5.3 Traducción de las consideraciones de diseño en un buen layout web. 5.4 Usabilidad, estándares w3c y ayudas de navegación. 6. Tipografía y escribir para la web. 6.1 Orígenes de la tipografía. 6.2 Qué es una fuente. Debe distinguirse entre fuente y tipografía. Anatomía de una letra. Partes principales. Vocabulario básico. Línea base. Curso académico 2014/2015 3

4 6.3 Distinciones del tipo. Fuentes serif. Fuentes sans serif. Fuentes escritas a mano. Fuentes de ancho fijo o monoespacio. Fuentes novelty. Letras ornamentales y finales. 6.4 Manipulación de las tipografías. 6.5 Encontrar fuentes y recursos. Galerías de fuentes gratuitas. Fuentes a la venta. Otros. 6.6 Llevar la tipografía a la web. Tipografías seguras. Mostrar texto en imágenes. Sustitución del texto mediante sifr. Google fonts / Fonts Squirrel / uso de Javascript. 6.7 La importancia de la tipografía en el diseño web. Diseño de la información. Consideraciones de usabilidad. 6.8 Escribir para la web. 7. Color 7.1 El color. El color desde el punto de vista lumínico. Los colores luz y colores pigmento. Círculo cromático. Percepción del color. Colores primarios y secundarios. 7.2 Clasificación de los tipos color. El color psicológico. El color simbólico. El color esquemático. El color emblemático. El color señalético. El color convencional. 7.3 Modo RGB. 7.4 Modo de color CMYK. 7.5 El color. Punto de vista sensorial y propiedades. Curso académico 2014/2015 4

5 7.6 Importancia y significado del color. El color denotativo. El color connotativo. 7.7 Significado del color y utilización en la Web Color en la web. 7.9 Esquemas de colores y utilidades para la web. 8. Optimización de imágenes y creación de layout. 8.1 Optimización de imágenes para la web. Formato jpg Formato gif Formato png 8.2 Diseño y creación de layouts de contenidos de nivel básico. 8.3 Diseño y creación de layouts de contenidos de nivel avanzado. 8.4 Aproximación al diseño de layouts para web para dispositivos móviles. Arquitectura de contenidos. Preparación de layouts para dispositivos móviles. Diseño de microsites. Qué es un microsites?. Partes de un microsite. 9. Tipos de navegación y menús. 9.1 Qué es un menú de navegación. 9.2 Tipos de navegación. Definición. Sistemas de navegación lineales Sistemas de navegación jerárquicos Sistemas de navegación globales Sistemas de navegación locales Sistemas de navegación ad hoc Sistemas de navegación directos 9.3 Tipos de menús. Definición, características y evolución. Barras de navegación Menús desplegables 9.4 Los menús en los distintos tipos de sitios Web. Estructura de la información Tipo de contenido Volumen de la información Curso académico 2014/2015 5

6 Perfil del usuario 9.5 Menús de navegación. Tipos de menú de navegación. Tipos de menús de navegación según la posición que ocupan en el diseño Web. 9.6 Consejos prácticos para diseñar un buen menú de navegación. 10. Redes sociales y comunidades Introducción: Concepto de red social. Historia y evolución de las redes sociales. Que es un community manager y que labor ha de desempeñar. Usos, comunicación, publicidad y mantenimiento de una red social. Ciclo de vida de las redes sociales. 11. Lenguaje Html5 y CSS Introducción: Estructura de una página web con Html5 y CSS3. Qué es el Html y XHtml. Especificación oficial. Qué es CSS. Cómo incluir CSS en un documento XHtml. Sintaxis de la definición de cada propiedad CSS Selectores. Selectores básicos: universal, de etiqueta, clase, ID y descendente. Selectores avanzados: de atributos, de hijos y adyacente. Agrupación de reglas. Herencia. Colisiones de estilos Características del Box model o modelo de caja Posicionamiento y visualización. Tipos de elementos. Posicionamiento: normal, float, absoluto. Visualización Unidades de medida y colores. Unidades de medida: relativas, absolutas y porcentajes. Colores: palabras clave, RGB y RGBA Tipografía y texto. Uso de tipografías seguras /fuentes del sistema. Insertar tipografías desde Google.font o FontSquirrel Enlaces. Estilos básicos. Estilos avanzados. Curso académico 2014/2015 6

7 11.8 Listas. Listas ordenadas. Listas desordenadas. Convertir lista desordenada en menú horizontal. Convertir lista desordenada en menú vertical Formularios. Estilos básicos. Estilos avanzados Insertar galerías de imágenes Creación de una web adaptada a dispositivos móviles Recursos útiles. Extensiones para trabajar. Enlaces de interés. 12. Estilos visuales empleados en el diseño web Ejemplos y tendencias. Curso académico 2014/2015 7