WEB 1 - 2023
El material que se anexa a continuación es el mismo que se encuentra en el Aula Virtual de Moodle.
https://moodle.exa.unicen.edu.ar/user/index.php?id=913
Asincronismo
Slides: https://docs.google.com/presentation/d/1ykUc-B97sHj3iXWaacOtJnNnXAaF8KWIl3fZaI_dwMM
Videos(4)
1. Intro
https://youtu.be/2tEI6HZv3Z8
2. Ejercicio 1 Parte 1
https://youtu.be/iKDnak5oqnM
3. Ejercicio 1 Parte 2
https://youtu.be/inIChLHFohg
4. Ejercicio 1 Parte 3
https://youtu.be/tGaw080vShE
Semana 05/06: SPA y AJAX - Partial Render
Slides: https://docs.google.com/presentation/d/10k0Kco_4Z3HAibkPHff8hN_rG9PibRiogwx_R3Nkhuk
Prácticos: https://docs.google.com/document/d/1JutKPp9G3zxPUQwN_2_eHnlEoPqd9ERQ7H5_G2KZ96I
Videos (5)
1. SPA y AJAX - Intro
https://youtu.be/NO0Xx5tsWHE
2. AJAX - Partial Render
https://youtu.be/VWxhI_nVwWY
3. AJAX - Asincronismo
https://youtu.be/1Vf34yoPt5s
4. SPA y AJAX - Promesas Async/Await
https://youtu.be/IKiHduPAfSc
5. SPA y AJAX - Nav con Partial Render
https://youtu.be/yc-BFiGL4-E
Semana 29/05: Javascript#2 (Parte 2), Javascript #3 (Parte 2)
JS#2 Parte II
Slides: https://docs.google.com/presentation/d/1I4M0__ccjh1KbInKmd-Xa_t32bdsPNFzVq0QROvalJM
Prácticos: https://docs.google.com/document/d/1c93geUq_FsbvmxXwiu9XDfQR3z0CHb6g95efe9bQspI
Videos (4)
1. App contador Parte I
https://youtu.be/mK10H9NVK1o
2. App contador Parte II
https://youtu.be/ewJZ_D7l0qk
3. App contador Parte III
https://youtu.be/EdqyRUeN_3k
4. Ejemplo Bomba
https://youtu.be/7ql-CdEA3vM
JS#3 Parte II
Slides JS#3 Parte1 (desde filmina 35) : https://docs.google.com/presentation/d/1JVNVxgf0qsf3btExNx4GU8oeUM5D9XhnPKxWxl2oa3M/edit#slide=id.g39d7c3b904_0_69
Practico JS#3: https://docs.google.com/document/d/1jYOs_Y_FbGLER4xaVKt--FZBh_DSpeo3uXpXp0rT29g
Videos (1)
1. Ejemplo Mostrar/Ocultar
https://youtu.be/cylL85Pcdk8
Semana 22/05: HTML5 y CSS3
Slides HTML5 y CSS3: https://docs.google.com/presentation/d/1Z-BESfnTrhAkbYsYe5z5YzVp4WudDZeQ9CUzmUuA7eg
Practicos: https://docs.google.com/document/d/1iJt0RcXwfwiExARf_dDlqZmMzUT8Ol3KfJLQhxhPjWs
Videos HTML5 y CSS3 (2)
1. HTML5
https://youtu.be/eBlMSYLEFE4
2. CSS3
https://youtu.be/Luyx52FC8cI
Semana 15/05: Diseño Responsive, Javascript#3 Parte I
Diseño Responsive
Slides: https://docs.google.com/presentation/d/10uWrxIeEYPYI0t2QClVEUfX6VQ7zyKPovQjEj3wNWfQ
Práctico: https://docs.google.com/document/d/1BEz_VzBcxwAAUnx9Yio_4f2-nkcoi0L6ls3hjxZyGFg
Videos (5)
1. Intro Media Queries
https://youtu.be/bmgbcOaguOY
2. Mobile First
https://youtu.be/aiMbF6TjMpQ
3. Menú Responsive
https://youtu.be/hPoFlpvNB6M
4. Flexbox & Grid
https://youtu.be/LZdd1WtgEhg
5. Flexbox versus Grid
https://youtu.be/2Jnrkh8X-9U
Javascript#3 Parte I
Slides JS#3 Parte1 (hasta filmina 35) : https://docs.google.com/presentation/d/1JVNVxgf0qsf3btExNx4GU8oeUM5D9XhnPKxWxl2oa3M
Practico JS#3: https://docs.google.com/document/d/1jYOs_Y_FbGLER4xaVKt--FZBh_DSpeo3uXpXp0rT29g
Videos JS#3 Parte 1 (JSON) - (2)
1. ¿ Qué es JSON ?
https://youtu.be/0VTc-Qq4YSA
2. Ejemplo
https://youtu.be/-t55iQMm20w
Semana 08/05: Formularios con JS, Javascript#2 Parte I y Semántica Web
1. Formularios con JS
Slides: https://docs.google.com/presentation/d/10EptHqlUYyLgQKYascemynp9IJGxL1OATBPiorzdvbM/edit#slide=id.p
https://youtu.be/pJM3inWDSSA
Javascript#2 Parte I
Slides: https://docs.google.com/presentation/d/1I4M0__ccjh1KbInKmd-Xa_t32bdsPNFzVq0QROvalJM
Prácticos: https://docs.google.com/document/d/1c93geUq_FsbvmxXwiu9XDfQR3z0CHb6g95efe9bQspI
Videos (2)
1. Ejemplo 1: Piedra, Papel y Tijera
https://youtu.be/c3_KSoiY3Zc
2. Ejemplo 2: App Sorteos
https://youtu.be/F34fHninCy8
Semántica Web
Slides: https://docs.google.com/presentation/d/1xmZXWj-l5jfJvLW1f1gqfgD3AxWy4q3YRRaCuRKj4Xw
Prácticos: https://docs.google.com/document/d/1iJt0RcXwfwiExARf_dDlqZmMzUT8Ol3KfJLQhxhPjWs
Videos (1)
HTML Semántica
https://youtu.be/M9brpnF1tEo
Semana 01/05: CSS Avanzado
Slides: https://docs.google.com/presentation/d/1g4H5rXzu1xf5okDCYUM6A6_p04AtrfAbb57bwBaNCk0
Práctico: https://docs.google.com/document/d/1PsPHtPHZn3qznzTEqI46-1TOawqW3XDd328J_K8NLOA
Videos (4)
1. Herencia
https://youtu.be/iRB2Q-dno90
2. Selectores combinados
https://youtu.be/I_EBKdIYaRU
3.Cascada
https://youtu.be/Zl4GRFp7UsI
4. Pseudo Clases y Pseudo Elementos
https://youtu.be/nFeSmFRy8vM
Semana 24/04: Javascript Parte I
Slides: https://docs.google.com/presentation/d/1POlnQCLMNC9ckITDK58WmNQK1GCmboH4X8utSj2iPyc
Practico Javascript Parte I: https://docs.google.com/document/d/18gD8JpNWNXrRgpDE7mEE_S3OgXsXAEj2NtRohfHn5JA
Videos(6)
1. Introducción
https://www.youtube.com/watch?v=fukI9g41Bsc
2. Saludo
https://www.youtube.com/watch?v=jVTQk3EN9ZA
3. Saludo editando el DOM
https://www.youtube.com/watch?v=cIzS-3JYD8c
4. Saludo en el DOM al hacer click
https://www.youtube.com/watch?v=u9kbU1M6xgQ
5. Contador de clicks
https://www.youtube.com/watch?v=R7RykyHj3W4
6. Prende y apaga (addEventListener y classList)
https://www.youtube.com/watch?v=2tJ_MZQ14LQ
Semana 17/04: Teorico Web, Lección Layout, Lección Tablas y Formularios, Sitio Completo.
La Web
Las clases teóricas puras son complementarias a las clases teórico prácticas y a las clases prácticas.
El objetivo de estas clases teóricas puras es integrar y ubicar en espacio y tiempo el conocimiento que vas adquiriendo en las demás clases, de forma tal que puedas entender la forma en que se conectan las cosas.
Te recomendamos que vayas viendo las clases a medida que las vamos habilitando, y que verifiques, después de verlas, que podés contestar con tus propias palabras las preguntas que se plantean.
Slides: La Web
https://drive.google.com/file/d/1kQeckOlk2T2KNNUn-K6-6XnWYeqDYW6O/view?usp=sharing
Video (1)
https://youtu.be/SNSJopv2fUE
Layout
En está sección aprenderás como comenzar a realizar el diseño e implementación de un bosquejo de un sitio. También se muestra el modelo de cajas "Box Model" fundamental para el diagramado de cualquier pagina web.
Slides: https://docs.google.com/presentation/d/1tnM0IZNBsITilqWsIhBx9b4NX1ST3mATXCyCy3HHds4/edit#slide=id.g34f4815cb9_0_429
Practico HTML+CSS Parte II
https://docs.google.com/document/d/1A8AZCR8giTJMkCN583Lileded9YHUpXBUhzxbFZIpVM/
Videos (3)
Intro Layouts y BoxModel
https://www.youtube.com/watch?v=94sT_66nQeA&t
Flujo de renderizado y Flex
https://www.youtube.com/watch?v=kyn6AOKAoKY&t
Tipos de medidas y demás
https://www.youtube.com/watch?v=pcx__qswokc&t
Tablas y Formularios
En está sección aprenderás como agregar contenido en formato de tablas y de formularios. Por el momento los datos con los que se rellenan los formularios no van a ser manipulados, esa parte la vamos a manejar con Javascript y lo veremos pronto cuando comencemos a trabajar con ese lenguaje.
Slides: https://docs.google.com/presentation/d/1SIwOG94Lg7Py2FAkT8lKjtWYLQ2c8f7K-YsxXlF38OU/
Practico HTML+CSS Parte II
https://docs.google.com/document/d/1A8AZCR8giTJMkCN583Lileded9YHUpXBUhzxbFZIpVM/
Videos (1)
HTML Tablas y formulario
https://www.youtube.com/watch?v=VmCceDTysiQ&t
Lección Sitio Completo
Slides Sitio Completo
https://docs.google.com/presentation/d/1CD5IPdYnsRxIUoAGd1Dw87wYUd2XVZQuX40vWbOb5No
Practico (Parte del Practico es Layouts, la leccion que sigue)
https://docs.google.com/document/d/1A8AZCR8giTJMkCN583Lileded9YHUpXBUhzxbFZIpVM
Video (1)
https://www.youtube.com/watch?v=9Hp-hCnRXRc
Semana 10/04: Introducción HTML y CSS
Unidad 1 - Páginas web simples
Introducción HTML y CSS
Slides: Introducción HTML y CSS
https://docs.google.com/presentation/d/1P1YBxlot5jJ-NR-OL934eMEXiFrVxRX_g8aL5I2vsl8
Práctico: HTML+CSS - Parte I
https://docs.google.com/document/d/12OlfYhq-7V0PEkUoNyJDPUPCb5XDMvSezexg-fXrmIs
Videos (4)
1.1 Introduccion HTML y CSS
https://www.youtube.com/watch?v=yN1w3IMgRww
1.2 HTML
https://www.youtube.com/watch?v=ReB0loJ6wM4
1.3 CSS
https://www.youtube.com/watch?v=GL5FjhuIzgc
1.4 Listas, caracteres especiales y propiedades CSS
https://www.youtube.com/watch?v=101PsbUWLBA