Construcción 4º DG 2016
De Casiopea
| Asignatura(s) | Construcción de Diseño Gráfico 4 |
|---|---|
| Año | 2016 |
| Tipo de Curso | Taller de Construcción |
| Talleres | DG 4º |
| Profesores | Herbert Spencer, Katherine Exss, Carlos Chávez |
| Estudiantes | Kim López, Consuelo Santis Escudero, Monserrat Torres, Constanza Valdivia, Luciano Aucan Lagomarsino, Nicol Valenzuela, Daniela Gajardo, Martin Araneda |
| Carreras Relacionadas | Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Interacción y Servicios"Interacción y Servicios" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Estudiantes
Calendario
- 17/06/2016: Introducción al curso: GIT y HTML
- 24/06/2016: Diseño para Internet: Soporte HTML
- 1/07/2016: Diseño de cascadas de estilo: CSS
- 8/07/2016: Media queries
- 15/07/2016: Precompiladores (LESS y SASS)
- 22/07/2016: Arquitectura de Información aplicada
- 29/07/2016: Jerarquías y Navegación
- 5/08/2016: Primera revisión de Trabajos
- 12/08/2016: Diseño para pantallas pequeñas (responsive design)
- 19/08/2016: Interacción y patrones
- 26/08/2016: Segunda revisión de Trabajos: Correcciones finales
- 2/09/2016: Entrega y documentación del proceso
Proyectos
24/06/2016: Introducción HTML+CSS
Contenidos de la clase
- Estructura de carpetas para Sitios Web (index.html, js, img, css)
- Entorno de desarrollo: Browser y extensiones, herramientas (Firebug, Tilt, Filesizer, etc) y editor de código
- HTML: Vinculaciones de hoja de estilos, contenidos, javascript, google fonts, etc.
- CSS: Usos y tipos de selectores
- IcoMoon, iconos como tipografía (https://icomoon.io/)
- Media Queries (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
- Border v/s Padding v/s margin
HTML
- Es un lenguage de marcado y no de programación
- DOM: document object model. Es la estructura de los elementos de un sitio
- En el head está la información que no se describe visualmente pero habla de los elementos del sitio (SEO, js, meta tags, etc)
- En HTML 5 aparecen nuevos marcadores semánticos como <section>, <article>, <nav>, etc. Estos permiten a los navegadores controlar los modos de visualización de aquellos elementos.
CSS
- CSS Zen Garden: cada usuario mandaba una cascada de estilo que generaba variaciones visuales del html inicial. (Ejemplo.
NAVEGADORES
- Se utilizan herramientas complementarias para los navegadores que permiten leer el código detrás de los sitios. Son eficientes para solucionar problemas
1/07/2016: Introducción HTML+CSS
Correcciones
- Corrección de Zen Garden
- Corrección 1 de mapas de contenidos
Clase
- Wireframe, prototipado web, mapas de divs,
- Exposición de partidas en el diseño de interfaz (logo, fondos, colores, navegación,etc)
Encargo
- 3 wireframes de alta densidad
- Mapa contenidos final
- Contenidos finales
8/07/2016: Introducción HTML+CSS
Correcciones
- Corrección de trabajos escaneados
- Corrección de 3 wireframes impresos en alta definición
- Corrección de partidas visuales
- Lectura por Idar de estructura de wireframes
Clase
- HTML y CSS ( Ejemplificar un wireframe)
- Herramientas de interfaz. (patterntap, subblepattern, background generator, etc.)
- Mapas de divs, elementos de navegación, etc
- Responder consultas
Encargo
- Corregir wireframes
- Armar HTML y CSS
Referencias y Herramientas
- Git, bajar Github Desktop
- Editor de código Sublime
- Code Academy
- Simulaciones de html http://html-ipsum.com/
- Responsive design - herramienta para generar media queries: Gridpak
- MDN
- Preprocesadores
- LESS
- SASS
