Diseño desde el Código 2021

Asignatura(s)	Diseño desde el Código
Año	2021
Tipo de Curso	Ramo Lectivo
Talleres	DG 3º, DG 4º, DO 3º, DO 4º
Profesores	Basilio Cáceres, Felipe Lavín
Estudiantes	Fauve 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 Clave	codigo, html, frontend, css, javascript, información
Carreras Relacionadas	Diseñ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

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