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
Carreras RelacionadasDiseño, Diseño Gráfico, Interacción y Servicios

Alumnos

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