Diferencia entre revisiones de «Construcción 4º DG 2016»

De Casiopea
 
(No se muestran 11 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>
==17/06/2016: Introducción al Curso==
* [https://git-scm.com Git]
* Editor de código [https://www.sublimetext.com Sublime]
* Code Academy
* Simulaciones de html http://html-ipsum.com/


==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===
Línea 58: Línea 51:
* 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 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.
* 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.
* Se utiliza el <em> más que el <i>, debido a que el <em> hace referencia al emphasis.


===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ño2016
Tipo de CursoTaller de Construcción
TalleresDG 4º
ProfesoresHerbert Spencer, Katherine Exss, Carlos Chávez
EstudiantesKim López, Consuelo Santis Escudero, Monserrat Torres, Constanza Valdivia, Luciano Aucan Lagomarsino, Nicol Valenzuela, Daniela Gajardo, Martin Araneda
Carreras RelacionadasDiseñ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

  1. 17/06/2016: Introducción al curso: GIT y HTML
  2. 24/06/2016: Diseño para Internet: Soporte HTML
  3. 1/07/2016: Diseño de cascadas de estilo: CSS
  4. 8/07/2016: Media queries
  5. 15/07/2016: Precompiladores (LESS y SASS)
  6. 22/07/2016: Arquitectura de Información aplicada
  7. 29/07/2016: Jerarquías y Navegación
  8. 5/08/2016: Primera revisión de Trabajos
  9. 12/08/2016: Diseño para pantallas pequeñas (responsive design)
  10. 19/08/2016: Interacción y patrones
  11. 26/08/2016: Segunda revisión de Trabajos: Correcciones finales
  12. 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