Construcción 4º DG 2016

De Casiopea


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
AlumnosKim 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, Interacción y Servicios

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

  1. MartínAraneda-Portafolio (Alumnos Martin Araneda, URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    https://martinaranedac.github.io/portafolio)
  2. Portafolio Aucan Lagomarsino (Alumnos Luciano Aucan Lagomarsino, URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    https://aucanlagomar.github.io/p.aucan/)
  3. Portafolio Consuelo Santis (Alumnos Consuelo Santis Escudero, URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    http://consuelosantis.github.io/Portafolio)
  4. Portafolio Monserrat Torres (Alumnos Monserrat Torres, URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    https://monsetorres.github.io/Portafolio/)
  5. Portafolio Nicol Valenzuela (Alumnos Nicol Valenzuela, URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    http://nicolvalenzuela.github.io/portafolio)
  6. Portafolio de Daniela Gajardo (Alumnos Daniela Gajardo, URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    https://dgajardocastro.github.io/PortafolioDanielaGajardo/)
  7. Portafolio, Tomás Ortega (URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    https://tolytox.github.io/portafolio/)
  8. Portafolio: Constanza Valdivia Rojas (URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    https://cvaldiviar.github.io/Portafolio-cvr/)
  9. Portafolio: Kim López (Alumnos Kim López, URL
    "URL" is a type and predefined property provided by Semantic MediaWiki to represent URI/URL values.
    https://kimlou.github.io/portafolioklp)

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