Diferencia entre revisiones de «Diseño desde el Código 2019»
De Casiopea
Sin resumen de edición |
Sin resumen de edición |
||
Línea 87: | Línea 87: | ||
[https://docs.google.com/presentation/d/1LLfL8i1tjI_cqkCEz7Qpqu-JRppghOCiGyxWrfujFmA/edit?usp=sharing Ver presentación] | [https://docs.google.com/presentation/d/1LLfL8i1tjI_cqkCEz7Qpqu-JRppghOCiGyxWrfujFmA/edit?usp=sharing Ver presentación] | ||
=Proyectos= | = Herramientas = | ||
* [https://code.visualstudio.com/ Visual Studio Code (editor de código)] | |||
* [https://desktop.github.com/ Github desktop (aplicación para control de versiones)] | |||
* [https://validator.w3.org/ Validador HTML] | |||
* [https://jigsaw.w3.org/css-validator/ Validador CSS] | |||
* [https://wave.webaim.org/ Validador Accesibilidad] | |||
= Proyectos = | |||
*[[Benchmarck Diseño desde el codigo]] - Omar Nuñez, Gabriel Olivares Torrijo, Catalina Armijo | *[[Benchmarck Diseño desde el codigo]] - Omar Nuñez, Gabriel Olivares Torrijo, Catalina Armijo | ||
*[[Benchmark Diseño desde el código]] - Christian Gazmuri, Marcelo Mondaca, Rodrigo Toro | *[[Benchmark Diseño desde el código]] - Christian Gazmuri, Marcelo Mondaca, Rodrigo Toro |
Revisión del 11:38 24 nov 2019
Asignatura(s) | Diseño desde el Código |
---|---|
Año | 2019 |
Tipo de Curso | Ramo Lectivo |
Talleres | DG 3º, DG 4º, DO 3º, DO 4º |
Profesores | Basilio Cáceres, Felipe Lavín |
Estudiantes | Karol 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 Clave | codigo, html, front-end |
Carreras Relacionadas | Diseño |
Estudiantes
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
Presentación e introducción
- Objetivos y metodología del curso
- Qué es diseño front-end: lenguajes
HTML
- Sintaxis básica: elementos, atributos
- Tarea: construcción de Currículum Vitae
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)
CSS - Patrones de diseño
- Especificidad
- Box model
- BEM
- Patrones de diseño
- Frameworks
- Presentación proyecto grupal
CSS: valores y unidades, diagramación
- Flexbox
- Grid
- Encargo tarea 3: benchmark
Presentaciones grupales benchmarks
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
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
Herramientas
- Visual Studio Code (editor de código)
- Github desktop (aplicación para control de versiones)
- Validador HTML
- Validador CSS
- Validador Accesibilidad
Proyectos
- Benchmarck Diseño desde el codigo - Omar Nuñez, Gabriel Olivares Torrijo, Catalina Armijo
- Benchmark Diseño desde el código - Christian Gazmuri, Marcelo Mondaca, Rodrigo Toro
- Benchmark: Agencia Publicitaria - Roberta Durán Natalia Duimovic
- Benchmark: Páginas web sobre el cambio climático - Javiera Reyes Natalia Soto
- Diseño desde el código: Análisis de sitios web - Karol Aramayo Camila Morales Valentina López