Diferencia entre revisiones de «Construcción 4º DG 2016»
De Casiopea
(No se muestran 12 ediciones intermedias de 3 usuarios) | |||
Línea 5: | Línea 5: | ||
|Talleres=DG 4º | |Talleres=DG 4º | ||
|Profesores=Herbert Spencer, Katherine Exss, Carlos Chávez, | |Profesores=Herbert Spencer, Katherine Exss, Carlos Chávez, | ||
|Alumnos=Kim López, Consuelo Santis Escudero, Monserrat Torres, Constanza Valdivia, Luciano Aucan Lagomarsino, Nicol Valenzuela, Daniela Gajardo, | |Alumnos=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, Interacción y Servicios | |Carreras Relacionadas=Diseño, Diseño Gráfico, Interacción y Servicios | ||
}} | }} | ||
<div class='row'> | <div class='row'> | ||
<div class='col-sm-6'> | <div class='col-sm-6'> | ||
Línea 34: | Línea 33: | ||
</div> | </div> | ||
</div> | </div> | ||
==24/06/2016: Introducción HTML+CSS== | ==24/06/2016: Introducción HTML+CSS== | ||
Línea 50: | Línea 43: | ||
* CSS: Usos y tipos de selectores | * CSS: Usos y tipos de selectores | ||
* IcoMoon, iconos como tipografía (https://icomoon.io/) | * IcoMoon, iconos como tipografía (https://icomoon.io/) | ||
* Media Queries | * Media Queries (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) | ||
* Padding v/s margin | * Border v/s Padding v/s margin | ||
===HTML=== | ===HTML=== | ||
* Es un lenguage de marcado y no de programación | * Es un lenguage de marcado y no de programación | ||
* DOM: document object model. Es la estructura de los elementos de un sitio | * 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=== | ||
* CSS Zen Garden: cada usuario mandaba una cascada de estilo que generaba variaciones visuales del html inicial. | * CSS Zen Garden: cada usuario mandaba una cascada de estilo que generaba variaciones visuales del html inicial. ([http://hspencer.github.io/portafolio Ejemplo]. | ||
===NAVEGADORES=== | ===NAVEGADORES=== | ||
* Se utilizan herramientas complementarias para los navegadores que permiten leer el código detrás de los sitios. Son eficientes para solucionar problemas | * 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=== | |||
* [https://git-scm.com Git], bajar [https://desktop.github.com/ Github Desktop] | |||
* Editor de código [https://www.sublimetext.com Sublime] | |||
* Code Academy | |||
* Simulaciones de html http://html-ipsum.com/ | |||
* Responsive design - herramienta para generar media queries: [http://gridpak.com/ Gridpak] | |||
* [https://developer.mozilla.org/es/ MDN] | |||
* Preprocesadores | |||
** LESS | |||
** SASS |
Revisión actual - 17:14 12 ago 2016
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