Diseño desde el Código 2021

De Casiopea



Asignatura(s)Diseño desde el Código
Año2021
Tipo de CursoRamo Lectivo
TalleresDG 3º, DG 4º, DO 3º, DO 4º
ProfesoresBasilio Cáceres, Felipe Lavín
EstudiantesFauve Bellenger, Rosario Vicente Gorigoitía, Natalia Soto Vásquez, Daniel Rojas, Javiera Ruiz, Paola Chicano, Romina Flores, Catalina Riveros, Paulina Zúñiga, Itay Rojas, Soledad Araya Urrutia, Francisca Alvarez Escobar, Catalina López, Fernanda Talamilla P, Camila Morales, Daniela Sifaqui, David Silva Bernales, Daniela Sifaqui, Vicente Quezada Salfate, Franco Castañeda Becerra
Palabras Clavecodigo, html, frontend, css, javascript, información
Carreras RelacionadasDiseño

Estudiantes

Proyectos

Github.com

Registros de clases

Google Drive

Clase 1: Introducción al diseño front-end

Presentación y grabaciones de clase: https://drive.google.com/drive/folders/1QbsGy4p3VHSUgPNaUWW7ZF_WlFm9G-v_?usp=sharing

  • Objetivos del curso
  • Cómo funciona un sitio web
  • Lenguajes: HTML, CSS, JS
  • Arquitecturas básicas
  • Metodología DCU
  • Herramientas
  • Trabajos y evaluaciones

Clase 2: HTML

Presentación y grabaciones de clase: https://drive.google.com/drive/folders/1cGEeCBulaXD12mc7LOhrMkfKSHr60jml?usp=sharing

  • Cómo escribir HTML: etiquetas,atributos y contenido
  • Anidación e indentación
  • Recomendaciones de escritura
  • Recomendaciones para nombres de archivos y carpetas
  • Estructura básica
  • Semántica
  • Etiquetas de secciones; etiquetas semánticamente neutras; imágenes y multimedia; hipervínculos
  • Cómo referenciar archivos
  • Validación de HTML

Clase 3: CSS

Presentación y grabaciones de clase: https://drive.google.com/drive/folders/1ndi0WOtJmookoEg9WURf88YfOZ9UrH7P?usp=sharing

  • Objetivos de la clase
  • ¿Cómo funcionan los hipervínculos?
  • Introducción a CSS
  • ¿Cómo escribir CSS?
  • Recomendaciones de escritura
  • ¿Cómo asociar una hoja de estilos a un documento HTML?
  • Selectores CSS
    • Elementales: etiqueta, clase, id
    • Selectores por atributos
    • Pseudo-selectores
    • Pseudo-elementos
  • Especificidad
  • Herencia
  • Recursos de apoyo

Clase 4: Sesión Práctica

Grabación de clase: https://drive.google.com/drive/folders/11Ec9G99CylOzO6iDf8hRKW12XCp08DAc?usp=sharing

En esta sesión se desarrolla un ejercicio práctico que ejemplifica el trabajo en la bitácora personal, aplicando los conceptos abordados en clases anteriores.

Se introduce también el uso de flex para diagramación.

Clase 5: Tipografía; Modelo de caja

Presentaciones y grabaciones de clase: https://drive.google.com/drive/folders/1E9WFKbCUVe3AwqBxvXrKT_InYX193c_f?usp=sharing

  • Variables CSS
  • Tipografía para la web
    • Declaración de una tipografía
    • Propiedades generales
    • @font-face
    • Usos prácticos: Cargar fuentes de Google Fonts, descargadas y otras
  • Introducción al uso de color
  • Introducción al Modelo de caja
  • Recursos de apoyo

Clase 6: Técnicas de Diagramación: Flex

Presentación y grabación de clase: https://drive.google.com/drive/folders/11Ec9G99CylOzO6iDf8hRKW12XCp08DAc?usp=sharing

  • Posicionamiento absoluto/relativo
  • Diagramación con Flexbox
  • Dirección, ejes y orden
  • Distribución y dimensiones

Clase 7: Técnicas de Diagramación: Grid

Presentación y grabaciones de clase: https://drive.google.com/drive/folders/1U20w4pykJ0HMakyOihpjUjKla6KaFdOE?usp=sharing

  • Introducción a Grid CSS
  • Vocabulario básico: contenedor, líneas, celdas, tracks y áreas
  • Trabajo con unidades y revisión de unidad “fr”
  • Creación de grillas: grid-template-columns y grid-template-rows
  • Espaciado: grid-gap
  • Revisión de ejemplos
  • Recursos de apoyo

Clase 8: Ejercicios de Diagramación + JS básico

Presentación y grabación de clase: https://drive.google.com/drive/folders/11Ec9G99CylOzO6iDf8hRKW12XCp08DAc?usp=sharing

En esta clase se desarrolla un ejercicio práctico para ejemplificar el uso de Flex y Grid. También se ilustra el uso de media queries para la construcción de diseño responsivo a partir de técnica mobile first.

También se introducen los principios de javascript a partir de algunos ejemplos.

Clase 9: JS y preprocesadores

Presentación y grabaciones de clase: https://drive.google.com/drive/folders/1qydEi3L63GEKG64YK4dYky00cfUY4W6-?usp=sharing

  • Preprocesadores CSS
    • Introducción
    • Métodos de uso
    • Profundización en Sass (SCSS): variable, funciones, mixins, import
  • Manejo de dependencias
  • Node.js + NPM
  • Línea de comando

Clase 10: Accesibilidad y SEO

Presentación y grabaciones de clase: https://drive.google.com/drive/folders/1lh9RRjaBQDqatamnea-_SsCE6YRiHfSC?usp=sharing

  • Accesibilidad web: qué comprende el concepto de accesibilidad
  • Por qué es importante la accesibilidad
  • Principios de accesibilidad web: perceptible; operable; comprensible; robusto
  • Niveles de conformidad
  • Técnicas básicas para la accesibilidad
  • Validación de accesibilidad
  • SEO. Cómo funciona un buscador
  • Tećnicas básicas de SEO: robots.txt; metadatos; estructura de títulos; sitemap.xml; URL canónica; idioma; URLs amigables; otros factores
  • Metadatos Opengraph

Clase 11: Revisión proyectos grupales

Grabaciones de clase: https://drive.google.com/drive/folders/1_fBPaGTWXDGpqEGWoC2geZvbHbmesZdZ?usp=sharing

En esta sesión revisamos el avance en los proyectos grupales, con el objetivo de resolver dudas y dar recomendaciones para la recta final del curso.

Grupos de trabajo

  1. Grupo Bootleg: Itay Rojas, Javiera Ruiz, Fauve Bellenger
  2. Grupo: Soledad Araya, Natalia Soto Vásquez
  3. Grupo: Francisca Álvarez, Catalina López, Fernanda Talamilla
  4. Grupo: Romina Flores, Catalina Riveros, Paulina Zúñiga
  5. Grupo: Camila Morales, Daniel Rojas, Daniela Sifaqui
  6. Grupo: Rosario Vicente, Emily Hutt
  7. Grupo: Vicente Quezada Salfate, Franco Castañeda Becerra
  8. Grupo: Paola Chicano, Michell Diaz, David Silva Bernales