Temario

• Intro a Frontend. Concepto de UI. Tipos. Ejemplos
• Vistas estáticas. Concepto de HTML. Concepto de CSS
• Interactividad. Eventos. Callbacks
• DOM

Resumen

En esta clase conversamos sobre las siguientes cuestiones:

1. Presentación del concepto de UI. Desktop vs Web vs Movil
2. Cliente pesado vs cliente liviano. Qué lugar ocupan el Frontend y Backend en el contexto de cliente pesado.
3. El navegador: mostramos sus herramientas (dev tools):
   • Redes (Network)
   • Inspector
   • Almacenamiento (storage)
   • Intérprete de JS (console)
4. Estudiamos qué es HTML y CSS y para qué sirve cada uno: estructura vs formato. Presentamos algunos ejemplos
5. Dentro del inspector, profundizamos en el uso del editor de CSS y HTML.
6. Mencionamos algunos de los problemas típicos de las UIs: layout (disposición de componentes), colores, tipografias, tamaños, márgenes, bordes y rellenos (padding)
7. Registramos manejadores de eventos y agregamos dinámicamente elementos al DOM (la representación orientada a objetos de los los elementos de una página HTML).

Material

• Guía de maquetado Web
• Tutorial de Grid
• Tutorial de Flex

Tarea

Sección en progreso