Primero pasaremos el ejemplo de los electrodomésticos al formato async/await.
Luego veremos cómo funciona el mecanismo de routing de Pelela, para que puedas armar tus rutas en el TP.
El ejemplo Carrito de compras tiene el routing definido, pero estaremos viendo el ejemplo de Rick & Morty donde veremos para qué nos puede servir el método initialize
Video: Routing | Método initialize | y te dejamos el de Manejo de errores
Veremos asincronismo, concurrencia y paralelismo en la VM de JS:
El jueves estaremos
repasando el ejemplo de la Ruleta, donde además veremos cómo es el testing que tienen que hacer en Pelela
Carrito de compras: integración entre un componente contador y un carrito de compras. Conceptos: link-, prop-, const-, for-each. Link a las diapositivas.
Videos: Componentes | Testing | Errores de desarrollo (troubleshooting)
El jueves estaremos presentando este contenido
haciendo un repaso del binding con el ejemplo Cuadrados, que presenta el trabajo con for-each
y viendo un ejemplo de un formulario de apuestas de Ruleta virtual, para presentar el manejo de formularios, el manejo de errores y los componentes
Videos: Renderizado condicional (if) | For-each | Componentes
El jueves veremos:
Una intro a PelelaJS, nuestro primer acercamiento a la programación web
Ejemplos asociados:
Conversor millas a kilómetros: primer proyecto, concepto de binding
Twitter: ejemplo de binding vista-modelo y modelo-vista directo
Videos: Instalación de PelelaJS | El Binding en PelelaJS
Para ayudarte con Typescript te dejamos este material:
Documentación oficial de Typescript | Aprendiendo Typescript en 30 minutos | Cheatsheet o guía rápida para tener a mano mientras programan
Y más información en la página de Typescript de la materia
El martes tenemos:
Presentación oficial del TP
El jueves se ve:
04 - Medidas espaciales: em, rem, px - Presentación - Video de medidas relativas y absolutas - Youtube
06 - Display Grid - Presentación - Video de Display Grid - Youtube. Video de una de las creadoras de CSS Grid.
BONUS: 09- Variables - Custom properties en CSS. - Video de Variables en CSS - Youtube
Bonus:
El martes será la presentación oficial de la materia:
Anotate en la lista
Unidad 1: Introducción a las interfaces de usuario.
Unidad 2 Desarrollo Web Estático.
Diapositivas
Videos de clase
Los temas para ver en la clase del jueves serán:
01 - Especificidad - Ejemplo - Video de especificidad - Youtube
03 - Elementos de línea y de bloque. Position. Z-Index - Ejemplo - Video de Display inline vs. block. Position - Youtube
Si querés podés ver cómo generar un proyecto web desde cero, y cómo importar fuentes de Google (Video youtube)
BONUS: Ejemplo de Maquetado Web, para leer en casa: