Diferencia entre revisiones de «Diseño desde el Código 2019»
De Casiopea
Sin resumen de edición |
(→Clases) |
||
| Línea 29: | Línea 29: | ||
* Qué es diseño front-end: lenguajes | * Qué es diseño front-end: lenguajes | ||
[https://docs.google.com/presentation/d/1OT1G22x8zMH0o4v-7X4Fmh4APixc1FWD9H4k5fRMTxA/edit?usp=sharing Ver presentación] | [https://docs.google.com/presentation/d/1OT1G22x8zMH0o4v-7X4Fmh4APixc1FWD9H4k5fRMTxA/edit?usp=sharing → Ver presentación] | ||
=== Referencias === | |||
* [https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/ What is code?] | |||
* [https://www.toptal.com/designers/ui-ux-designers/designers-coding Coding for designers - How much should we know?] | |||
* [https://www.vrk.dev/2019/07/11/why-is-modern-web-development-so-complicated-a-long-yet-hasty-explanation-part-1/ Why is modern web development so complicated? A long yet hasty explanation: Part 1!] - [https://web.archive.org/web/*/https://www.vrk.dev/2019/07/11/why-is-modern-web-development-so-complicated-a-long-yet-hasty-explanation-part-1/ (copia de respaldo en archive.org)] | |||
== HTML == | == HTML == | ||
| Línea 36: | Línea 42: | ||
* Tarea: construcción de Currículum Vitae | * Tarea: construcción de Currículum Vitae | ||
[https://docs.google.com/presentation/d/13a5LE0bQ_6C5pZhN0iquTdc78R89yZ1QZE5377HAjEw/edit?usp=sharing Ver presentación] | [https://docs.google.com/presentation/d/13a5LE0bQ_6C5pZhN0iquTdc78R89yZ1QZE5377HAjEw/edit?usp=sharing → Ver presentación] | ||
=== Referencias === | |||
* [https://developer.mozilla.org/es/docs/Web/HTML HTML en mozilla web docs] | |||
* [https://html.spec.whatwg.org/multipage/ Referencia HTML (living standard)] | |||
* [https://developer.mozilla.org/es/docs/Web/HTML/Elemento Referencia de elementos HTML] | |||
== HTML + CSS == | == HTML + CSS == | ||
| Línea 44: | Línea 56: | ||
* Tarea 2: semántica y estilos de texto (con nota; presentación a través de Github Classroom) | * Tarea 2: semántica y estilos de texto (con nota; presentación a través de Github Classroom) | ||
[https://docs.google.com/presentation/d/1gEwKxZuZpqJeGFYMwQYfh6mixFFI-_C9C6TO4bk5eAA/edit?usp=sharing Ver presentación] | [https://docs.google.com/presentation/d/1gEwKxZuZpqJeGFYMwQYfh6mixFFI-_C9C6TO4bk5eAA/edit?usp=sharing → Ver presentación] | ||
=== Referencias === | |||
* [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference Referencia CSS - Mozilla web docs] | |||
* [https://cssreference.io/ Referencia CSS: ejemplos y visualización de propiedades] | |||
* [https://www.w3.org/Style/CSS/all-properties.en.html Listado de todas las propiedades CSS] | |||
== CSS - Patrones de diseño == | == CSS - Patrones de diseño == | ||
| Línea 55: | Línea 73: | ||
* Presentación proyecto grupal | * Presentación proyecto grupal | ||
[https://docs.google.com/presentation/d/1reKbCx4Baj9tBGO1jDvm0RskI6nQi-pi8ic10oUFW-g/edit?usp=sharing Ver presentación] | [https://docs.google.com/presentation/d/1reKbCx4Baj9tBGO1jDvm0RskI6nQi-pi8ic10oUFW-g/edit?usp=sharing → Ver presentación] | ||
=== Referencias === | |||
* [https://developer.mozilla.org/es/docs/Web/CSS/CSS_Modelo_Caja/Introducci%C3%B3n_al_modelo_de_caja_de_CSS Introducción al modelo de caja de CSS] | |||
* [http://getbem.com/ BEM - Block Element Modifier] | |||
* [https://web.archive.org/web/20080607142315/http://developer.yahoo.com/ypatterns/ Yahoo! Design Pattern Library (respaldo en archive.org)] | |||
* [https://getbootstrap.com/ Documentación Bootstrap] | |||
* [https://foundation.zurb.com/ Documentación Foundation] | |||
== CSS: valores y unidades, diagramación == | == CSS: valores y unidades, diagramación == | ||
| Línea 62: | Línea 88: | ||
* Encargo tarea 3: benchmark | * Encargo tarea 3: benchmark | ||
[https://docs.google.com/presentation/d/1GkGlR-HHSrUuG9KnJX84ZUsmAD85ev9u02yegjRzuG8/edit?usp=sharing Ver presentación] | [https://docs.google.com/presentation/d/1GkGlR-HHSrUuG9KnJX84ZUsmAD85ev9u02yegjRzuG8/edit?usp=sharing → Ver presentación] | ||
=== Referencias === | |||
* [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A complete guide to flexbox] | |||
* [https://css-tricks.com/snippets/css/complete-guide-grid/ A complete guide to grid] | |||
== Presentaciones grupales benchmarks == | == Presentaciones grupales benchmarks == | ||
[https://wiki.ead.pucv.cl/Dise%C3%B1o_desde_el_C%C3%B3digo_2019#Proyectos Ver proyectos] | [https://wiki.ead.pucv.cl/Dise%C3%B1o_desde_el_C%C3%B3digo_2019#Proyectos → Ver proyectos] | ||
== Resposive design == | == Resposive design == | ||
| Línea 76: | Línea 107: | ||
* Ejercicio maquetación responsive | * Ejercicio maquetación responsive | ||
[https://docs.google.com/presentation/d/1nJNUso_y_Dsy1rRKjp7PEIQEy4IGbM38GMjQDqdGJwo/edit?usp=sharing Ver presentación] | [https://docs.google.com/presentation/d/1nJNUso_y_Dsy1rRKjp7PEIQEy4IGbM38GMjQDqdGJwo/edit?usp=sharing → Ver presentación] | ||
=== Referencias === | |||
* [https://alistapart.com/article/responsive-web-design/ Responsive web design (A List Apart)] | |||
* [https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport Aspectos básicos del diseño web adaptable (Google Web Fundamentals)] | |||
* [https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images Imágenes adaptables] | |||
== Accesibilidad y SEO == | == Accesibilidad y SEO == | ||
| Línea 85: | Línea 122: | ||
* Técnicas básicas de SEO | * Técnicas básicas de SEO | ||
[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] | ||
=== Referencias === | |||
* [http://www.sidar.org/traducciones/wcag20/es/ Pautas de accesibilidad para la web, v2.0] | |||
* [https://www.w3.org/WAI/fundamentals/accessibility-intro/ Introducción a la accesibilidad web] | |||
* [https://www.w3.org/WAI/WCAG21/ WCAG 2.1 (versión actual)] | |||
* [http://www.karlgroves.com/2013/05/20/understanding-wcag-level/ Understanding WCAG Level] | |||
* [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute Utilización de atributos ARIA] | |||
* [https://moz.com/beginners-guide-to-seo Beginner's Guide to SEO] | |||
* [https://yoast.com/tag/seo-basics/ SEO Basics] | |||
* [https://css-tricks.com/essential-meta-tags-social-media/ Essential Meta tags for social media] | |||
* [https://developers.facebook.com/docs/sharing/webmasters/#markup Marcado de datos de Opengraph] | |||
= Herramientas = | = Herramientas = | ||
Revisión del 10:55 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
Referencias
- What is code?
- Coding for designers - How much should we know?
- Why is modern web development so complicated? A long yet hasty explanation: Part 1! - (copia de respaldo en archive.org)
HTML
- Sintaxis básica: elementos, atributos
- Tarea: construcción de Currículum Vitae
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)
Referencias
- Referencia CSS - Mozilla web docs
- Referencia CSS: ejemplos y visualización de propiedades
- Listado de todas las propiedades CSS
CSS - Patrones de diseño
- Especificidad
- Box model
- BEM
- Patrones de diseño
- Frameworks
- Presentación proyecto grupal
Referencias
- Introducción al modelo de caja de CSS
- BEM - Block Element Modifier
- Yahoo! Design Pattern Library (respaldo en archive.org)
- Documentación Bootstrap
- Documentación Foundation
CSS: valores y unidades, diagramación
- Flexbox
- Grid
- Encargo tarea 3: benchmark
Referencias
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
Referencias
- Responsive web design (A List Apart)
- Aspectos básicos del diseño web adaptable (Google Web Fundamentals)
- Imágenes adaptables
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
Referencias
- Pautas de accesibilidad para la web, v2.0
- Introducción a la accesibilidad web
- WCAG 2.1 (versión actual)
- Understanding WCAG Level
- Utilización de atributos ARIA
- Beginner's Guide to SEO
- SEO Basics
- Essential Meta tags for social media
- Marcado de datos de Opengraph
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
