El material que se anexa a continuación es el mismo que se encuentra en el Aula Virtual de Moodle.
1er Cuatrimestre : https://moodle.exa.unicen.edu.ar/course/view.php?id=1080
2do Cuatrimestre: https://moodle.exa.unicen.edu.ar/course/view.php?id=1214
Slides
Slides Presentación San Cayetano
Unidad 1 - Páginas web simples
Introducción HTML y CSS
Slides: Introducción HTML y CSS
Slides 2024: https://docs.google.com/presentation/d/1TiZ30sjB4Qtxvvn8Qf3IsKi7Rp7ssmogmJ9CeUJ9d5Y/edit#slide=id.g121126e8c0_0_63
Slides Videos: 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
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 2:
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 formularioS
https://www.youtube.com/watch?v=VmCceDTysiQ&t
Semana 3:
Slides 2024 : https://docs.google.com/presentation/d/1H7UO84vfEf6WxoiaMicHR7kunm7J6P07rfunrFAE3TQ/edit?pli=1#slide=id.gaf9bc24d7_1_0
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. Prende y apaga (addEventListener y classList)
https://www.youtube.com/watch?v=2tJ_MZQ14LQ
Semana 4:
Slides: https://docs.google.com/presentation/d/1g4H5rXzu1xf5okDCYUM6A6_p04AtrfAbb57bwBaNCk0
Práctico: https://docs.google.com/document/d/1PsPHtPHZn3qznzTEqI46-1TOawqW3XDd328J_K8NLOA
Videos (4)
1. Herencia
2. Selectores combinados
3.Cascada
4. Pseudo Clases y Pseudo Elementos
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
2. CSS3
Semana 4:
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
2. Mobile First
3. Menú Responsive
4. Flexbox & Grid
5. Flexbox versus Grid
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
Semana 5:
Formularios con JS
Slides: https://docs.google.com/presentation/d/10EptHqlUYyLgQKYascemynp9IJGxL1OATBPiorzdvbM/edit#slide=id.p
JAVASCRIPT PARTE II
Slides: https://docs.google.com/presentation/d/1I4M0__ccjh1KbInKmd-Xa_t32bdsPNFzVq0QROvalJM
Prácticos: https://docs.google.com/document/d/1c93geUq_FsbvmxXwiu9XDfQR3z0CHb6g95efe9bQspI
Videos (6)
1. Ejemplo 1: Piedra, Papel y Tijera
2. Ejemplo 2: App Sorteos
3. App contador Parte I
4. App contador Parte II
5. App contador Parte III
6. Ejemplo Bomba
Semana 6:
JAVASCRIPT PARTE III
Slides JS#3 : https://docs.google.com/presentation/d/1JVNVxgf0qsf3btExNx4GU8oeUM5D9XhnPKxWxl2oa3M
Practico JS#3: https://docs.google.com/document/d/1jYOs_Y_FbGLER4xaVKt--FZBh_DSpeo3uXpXp0rT29g
Videos JS#3 (3)
1. ¿ Qué es JSON ?
2. Ejemplo
3. Ejemplo Mostrar/Ocultar