ESTETICA Y DISEÑO APLICADOS A LA WEB

ESTETICA Y DISEÑO APLICADOS A LA WEB

Descripción de la asignatura

El propósito de la asignatura es aprender a estructurar, diseñar y formalizar una Web habiendo identificado el público objetivo.

De este modo se plantea una primera fase inicial de introducción a las páginas Web; una fase central donde se aprenden los conceptos de diseño gráfico, composición, tipografía y color aplicados al diseño de interfaces Web y una fase final de aprendizaje de los programas y lenguajes de maquetación (Html5 + CSS3) que cohabita con lo anterior para formalizar una Web real.

Programa de teoría

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.

3.1. ¿Por qué tener un sitio Web?. Tipos de webs. 3.2. ¿Qué significa Webmastering?.

3.3. Diseño. 3.4. Realización. 3.5. Alojamiento. 3.6. Salir a la luz. 3.7. Promoción. 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.

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 ó 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

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. 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.

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 Modos de 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. 7.6 Importancia y significado del color.

• El color denotativo. • El color connotativo.

7.7 Significado del color y utilización en la Web 2.0. 7.8 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 • 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. Lenguaje Html5 y CSS3.

10.1 Introducción: Estructura de una página web con Html5 y CSS3.  Qué es el Html y XHtml. Especificación oficial.

 Cómo incluir CSS en un documento XHtml.  Sintaxis de la definición de cada propiedad CSS. 10.2 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.

10.3 Características del Box model o modelo de caja. 10.4 Posicionamiento y visualización.

 Tipos de elementos.

 Posicionamiento: normal, float, absoluto.  Visualización.

10.5 Unidades de medida y colores.

 Unidades de medida: relativas, absolutas y porcentajes.  Colores: palabras clave, RGB y RGBA.

10.6 Tipografía y texto.

 Uso de tipografías seguras /fuentes del sistema.

 Insertar tipografías con @font-face, desde Google.font o FontSquirrel. 10.7 Enlaces.  Estilos básicos.  Estilos avanzados. 10.8 Listas.  Listas ordenadas.  Listas desordenadas.

 Convertir lista desordenada en menú horizontal.  Convertir lista desordenada en menú vertical. 10.9 Formularios.

 Estilos básicos.  Estilos avanzados.

10.10 Insertar galerías de imágenes con JQuery.

10. 11 Creación de una web adaptada a dispositivos móviles empleando el framework de JQuery mobile.

10.12 Recursos útiles.

 Extensiones para trabajar.  Enlaces de interés.