Diferencia entre revisiones de «Diseño desde el Código 2019»

De Casiopea
Sin resumen de edición
 
(No se muestran 14 ediciones intermedias de 5 usuarios)
Línea 9: Línea 9:
|Carreras Relacionadas=Diseño
|Carreras Relacionadas=Diseño
}}
}}
Este curso documenta sus proyectos principalmente en [https://github.com/eadpucv/ Github]
Los proyectos de este curso se entregan a través de Github Classroom
 
* [https://github.com/eadpucv/ Proyectos asociados a organización "eadpucv"]
* [https://github.com/ead-codigo-2019/ Proyectos asociados a este curso específicamente]
 
(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 =
= Objetivos =
Línea 19: Línea 24:
= Clases =
= Clases =


# Presentación e introducción
== Repaso/Resumen ==
#* Objetivos y metodología del curso
 
#* Qué es diseño front-end: lenguajes
[https://docs.google.com/presentation/d/13hXDi0a9NifUcQleIJQapy2SU7JWUaJxopalOSuiOiM/edit?usp=sharing → Ver presentación]
# HTML
 
#* Sintaxis básica: elementos, atributos
== Presentación e introducción ==
#* Tarea: construcción de Currículum Vitae
 
# HTML + CSS
* Objetivos y metodología del curso
#* Elementos de bloque y elementos de línea
* Qué es diseño front-end: lenguajes
#* CSS - Sintaxis: selectores y propiedades
 
#* Tarea 2: semántica y estilos de texto (con nota; presentación a través de Github Classroom)
[https://docs.google.com/presentation/d/1OT1G22x8zMH0o4v-7X4Fmh4APixc1FWD9H4k5fRMTxA/edit?usp=sharing → Ver presentación]
# CSS - Patrones de diseño
 
#* Especificidad
'''Referencias'''
#* Box model
 
#* BEM
* [https://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/ What is code?]
#* Patrones de diseño
* [https://www.toptal.com/designers/ui-ux-designers/designers-coding Coding for designers - How much should we know?]
#* Frameworks
* [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)]
#* Presentación proyecto grupal
 
# CSS: valores y unidades, diagramación
== HTML ==
#* Flexbox
 
#* Grid
* Sintaxis básica: elementos, atributos
#* Encargo tarea 3: benchmark
* Tarea: construcción de Currículum Vitae
# Presentaciones grupales benchmarks
 
[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 ==
 
* 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)
 
[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 ==
 
* Especificidad
* Box model
* BEM
* Patrones de diseño
* Frameworks
* Presentación proyecto grupal
 
[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 ==
* Flexbox
* Grid
* Encargo tarea 3: benchmark
 
[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 ==
 
[https://wiki.ead.pucv.cl/Dise%C3%B1o_desde_el_C%C3%B3digo_2019#Proyectos → 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
 
[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 ==
 
* 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
 
[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 =
 
* [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]
* [https://search.google.com/structured-data/testing-tool/ Herramienta de prueba de datos estructurados]


= Proyectos =
= 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
*[[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]]
*[[Benchmark: Sitios Web sobre Reciclaje de basura]] - [[Andrea Bastías]], [[María Jopia]], [[Gonzalo Rojas]]
*[[Benchmark: Museos]] - Daniela Murillo, Marilia Cerna, Camila Gonzalez

Revisión actual - 15:20 24 ene 2020



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
EstudiantesKarol 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

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

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