Diseño desde el Código 2019

De Casiopea



Asignatura(s)Diseño desde el Código
Año2019
Tipo de CursoRamo Lectivo
TalleresDG 3º, DG 4º, DO 3º, DO 4º
ProfesoresBasilio Cáceres, Felipe Lavín
AlumnosKarol Aramayo, Marilia Cerna Sciaccaluga, Roberta Durán, Christian Gazmuri, María Gonzalez, Gonzalo Rojas, María Jopia, Valentina López, Felipe Meza, Marcelo Mondaca, Camila Morales, Daniela Murillo, Mabel Núñez, Omar Nuñez, Gabriel Olivares Torrijo, Diego Osante, Javiera Reyes Herrera, Natalia Soto, Rodrigo Toro, Andrea Bastías, Catalina Armijo, Natalia Duimovic, María Josefa Alcántara, Camila González Ossa
Palabras Clavecodigo, html, front-end
Carreras RelacionadasDiseño

Los proyectos de este curso se entregan a través de Github Classroom

(Al finalizar el curso, todos los proyectos se transferirán desde la cuenta de e[ad] a la organización específica de este curso)

Objetivos

  • Conocer y utilizar las herramientas técnicas para la implementación de proyectos digitales
  • Desarrollar un acercamiento crítico y reflexivo al diseño de interfaces digitales
  • Conocer y comprender las relaciones entre el diseño front-end y el oficio del diseño

Clases

Repaso/Resumen

→ Ver presentación

Presentación e introducción

  • Objetivos y metodología del curso
  • Qué es diseño front-end: lenguajes

→ Ver presentación

Referencias

HTML

  • Sintaxis básica: elementos, atributos
  • Tarea: construcción de Currículum Vitae

→ Ver presentación

Referencias

HTML + CSS

  • Elementos de bloque y elementos de línea
  • CSS - Sintaxis: selectores y propiedades
  • Tarea 2: semántica y estilos de texto (con nota; presentación a través de Github Classroom)

→ Ver presentación

Referencias

CSS - Patrones de diseño

  • Especificidad
  • Box model
  • BEM
  • Patrones de diseño
  • Frameworks
  • Presentación proyecto grupal

→ Ver presentación

Referencias

CSS: valores y unidades, diagramación

  • Flexbox
  • Grid
  • Encargo tarea 3: benchmark

→ Ver presentación

Referencias

Presentaciones grupales benchmarks

→ Ver proyectos

Resposive design

  • Repaso: flujo de elementos, floats, técnicas de diagramación (flex/grid)
  • Media queries
  • Estrategias de transformación
  • Imágenes responsivas
  • Ejercicio maquetación responsive

→ Ver presentación

Referencias

Accesibilidad y SEO

  • Principios de accesibilidad web: perceptible, operable, comprensible, robusto
  • Técnicas básicas para la accesibilidad
  • Cómo funciona un buscador: resultados orgánicos y de pago
  • Técnicas básicas de SEO

→ Ver presentación

Referencias

Herramientas

Proyectos