YT YouTube2Text

YouTube2Text → Transcripts → Global HTML 3

Global HTML 3 — Transcript

by Liricoteca · 11,799 words · 1,847 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:01Ahí está. Perdón si la compo está un
0:03poco lenta, pero
0:10hay que cerrar cosas que tengo abiertas.
0:14Justo yo digo después lo veo porque no s
0:15[risas]
0:16no pasa nada.
0:19No, no es nada importante para este
0:20momento en particular. Pasa que a veces
0:23me dejo llevar cuando me preguntan
0:25yo. No, ¿qué estás diciendo, Luti?
0:28Bueno, este, intentando intentando ahí
0:32subir un poco de un poco de LP, pero se
0:35me dio mal hoy. Me perdí como tres
0:37seguidos. Malísimo. Bueno, no se me dio,
0:41no se me dio hoy. Bueno, entonces eh lo
0:44siguiente, primero que nada, vamos a ir
0:46a KitHub y les voy a mostrar algo.
0:50¿Se acuerdan que nosotros paren que está
0:52lenta la computadora? Un momentito.
0:55Ah, se me está trabando todo. Espen.
0:59Definitivamente necesito una computadora
1:01nueva.
1:09Poner la musiquita.
1:17Eh,
1:20profe, ¿le puedo hacer una pregunta?
1:21Sí, claro que sí. Por ejemplo, cuando
1:23pasa eso, que se traba mucho la compu,
1:27¿es mejor se puede agregar memoria o es
1:30mejor eh cambiar de
1:33depende. Yo tengo una laptop, así que
1:34estoy frito, pero si vos tenés una compo
1:37de escritorio y te da la el mother para
1:39hacerlo, porque tiene que ser mother
1:41moderno. Sí, por porque la cuestión es
1:44esta, la cuando el cuando un mother
1:46llega al fin de su vida útil,
1:48generalmente no se crean nuevos
1:49componentes para para ese m, tipo nuevas
1:51placas o de video o RAMs, eh, y empiezan
1:55a tipo a sacar al mercado herramientas
1:58para el mader actual. Entonces, si
2:02compras una compu que tiene capaz eh un
2:05una estructura un poco vieja, eh te
2:09sabes que cuando ya no de más eh
2:13fue, ¿no? Salvo que consigas alguien que
2:15te venda usada, una placa o algo que que
2:18sea compatible con la madre que tenés.
2:21Si tenés uno, por ejemplo, en este en
2:22este caso yo estuve averiguando para
2:25comprar una computadora nueva y digamos
2:27que la el actual sería la DDR5.
2:31Esa si vos compras una con R5 te permite
2:34de acá de acá algunos años seguir
2:36pudiendo actualizarla con cosas nuevas
2:39que vayan saliendo. En cambio, si
2:41compras una DDR4,
2:43esa ya llegó al fin de su ciclo y ya no
2:45están haciendo nuevos componentes para
2:47la de DR4, entonces este la estás
2:49jugando. O sea, capaz que si compras una
2:51DR4 te conviene más comprar una usada,
2:53¿no? cosa de que te salga mucho más
2:56barata y cumpla con las expectativas que
2:58tenés en el presente porque no va a
2:59haber no te no va a tener futuro esa
3:01computadora. En cambio, si te compras
3:03una con DDR5, capaz te conviene comprar
3:05una nueva porque ya es nueva y además le
3:09puedes agregar en el futuro más cosas.
3:11Esta compu es una compu que la compré
3:12hace 5 años, es una una Asu Gamer y la
3:16compré en el 2021, así que y adás le
3:20hice mantenimiento dos veces nada más,
3:21pobrecita. Entonces el día que está ya
3:25viste, no de más, lo mejor que le puedo
3:26llegar a hacer es ponerle pasta térmica
3:28y formatearla, porque más que eso no
3:30puedo hacer y hasta donde sobreviva.
3:34Eh, pero bueno, ya para lo que es hoy en
3:36día, trabajar con con agentes de IA está
3:40un poco cortita porque tiene 8 GB de RAM
3:42y muchos agentes consumen bastante más
3:45que eso. Entonces, capaz que le le doy
3:48una tarea de algo complicado y se traba
3:50toda y me entero cuando termina de la
3:54Entonces es como que
3:57igual si la formate andaría bien, pero
3:58el tema es que tengo tanta cantidad de
4:00cosas de las de las clases dando vueltas
4:02que que pasar todo a un drive o así
4:06llevaría bastante tiempo. Es más cómodo
4:08comprar una compu de escritorio. Cuando
4:10ya tengo otra compu a poco a ver otra
4:12compu las cosas y cuando ya la limpio la
4:14mando formatear.
4:16y me queda como una compu de viaje,
4:19una cosa así.
4:21Pero bueno, la la compu que me copó a mí
4:24para comprar escritorio está 2,700, está
4:27carísima, así que bueno, no sé si la voy
4:29a comprar o no.
4:31Esa es una DDR5 con 32 de RAM
4:35y una placa 5070 bastante potente. Te
4:39corre prácticamente cualquier cosa. Yo a
4:42esta compu le pongo un juego indie de
4:43Steam y se se sobrecaliente, imagínate.
4:46Y es un juego en dos dimensiones
4:48nada más. Pobre. Bueno, entonces fíjense
4:51que nosotros acá tenemos Sí, eh una
4:54carpeta. No sé por qué siempre se me
4:56crea esto, porque tengo instalada una
4:57extensión que me crea esa carpeta.
4:59Bueno, vieron que tenemos estas dos
5:01carpetitas y estamos en una rama llamada
5:03master, ¿se acuerdan? Nosotros teníamos
5:05acá eh, ¿dónde está? E
5:12acá estamos.
5:14Teníamos el repositorio, ¿sí? Comisión
5:1627 y tenemos una sola rama. ¿Ven? Rama
5:19master. Nos quedaba pendiente la
5:21cuestión de poder ver cómo crear una
5:22rama, porque yo voy a crear una ahora y
5:25les voy a dejar la actividad en esa rama
5:27paralela. ¿Por qué? para que esté
5:29separado de la parte de las clases. O
5:31sea, acá tenemos las clases y ya vamos a
5:33tener la rama paralela. De hecho, me
5:34acabo de dar cuenta que no pé la otra
5:35clase. Entonces, la cuestión es así.
5:38Primero vamos a pushear esta clase que
5:40todavía no la pusheamos. Vamos a ver si
5:42ya está registrada.
5:46A ver, status, si se acuerdan los
5:50comandos.
5:53It status. Fíjese que no, no estaba
5:55registrada. Git ad
5:58git comit
6:01HTML clase 2 G push Origin Master. Bien
6:06listo. Ahí ya la tenemos pusheada.
6:10Revisamos,
6:11recargamos
6:13y ahí debería pasar la segunda clase.
6:15Bien, entonces, ¿qué vamos a hacer?
6:17Vamos a cambiar de rama. ¿Cómo cambiamos
6:19de rama? Primero que nada, no tenemos
6:20una rama creada, solamente tenemos esta
6:22rama master. ¿Sí? Entonces, ¿qué vamos a
6:25hacer? Vamos a crear una rama nueva de
6:27la siguiente manera. Vamos a ponerle git
6:31checkout-brado.
6:33Podemos hacer esto, miren. Git branch y
6:35el nombre de la rama en cuestión. En
6:37este caso, supóngase que es tareas. Ya.
6:40Si yo ejecuto este este comando, crea
6:43una rama llamada tareas, lo cual va a
6:45ser que cuando yo revise la sola pita
6:47acá eventualmente van a aparecer dos
6:49ramas. Va a aparecer esta y abajo va a
6:50aparecer otra llamada Tigeras. Bien, hay
6:54dos formas de crear una una rama. Si
6:55ustedes pueden hacer esto, git branch
6:57tareas, se crea la rama y luego para ir
7:01a esa rama, porque todavía estaríamos en
7:02master, harían git checkout,
7:06sí, tareas. ¿Vieron como us como
7:08hacíamos para cambiarnos de commit? Era
7:10git checkout y el ID del comit. Bueno,
7:13acá es git checkout y el nombre de la
7:15rama y se cambian.
7:18Otra forma es directamente decirle que
7:20la cree y que nos lleve allá todo en un
7:23solo comando. Eso es git checkout gu B
7:27que es de branch, ¿no? Y le ponemos
7:30tareas. Entonces, ¿qué le estamos
7:32diciendo? Estamos diciendo, "Kit, creame
7:34una rama llamada tareas y llévame a
7:37ella."
7:39Entonces, de vuelta en crioll es gito.
7:45Git.
7:48Creamos una rama llamada tareas
7:52y llévame allá. Bien, eso es lo que hace
7:55ese comando. Entonces, le vamos a decir
7:56eso. Kit checkout B tareas. Pimba. Y
7:59fíjense, me dice cambiado a la nueva
8:01rama tareas y ahí estoy en tareas.
8:04Fíjense que la rama, si revisamos ahora,
8:08no aparece todavía. Miren, ¿ven?
8:14Para que se presente en GitHub tengo que
8:17sincronizarla con el repositorio a
8:19través de esta nube con esta flechita.
8:21Cliqueo ahí y sincroniza.
8:26Bien, ahí está. Entonces, me vuelvo para
8:28acá, reviso.
8:34Miren, cargó y ahí está la rama tareas.
8:37La rama tareas en este momento tiene el
8:39mismo contenido que má porque se está
8:41creando basado en master. ¿Sí? Entonces
8:44noten, estoy en tareas y tengo las
8:46mismas cosas que en master. Entonces,
8:49¿para qué se usa una rama paralela a
8:50líneas generales? En primera instancia
8:52se utiliza a veces para construir
8:57un módulo extra basado en lo que yo
8:59estaba antes y luego se fusiona con la
9:02con la rama principal. ¿Qué significa?
9:04Yo tengo en master, tengo, supóng clase
9:0701, clase 02. Quiero crear clase 03,
9:10pero hasta que no esté no esté lista y
9:12que no tenga errores, no quiero que esté
9:14en la rama principal. Entonces, ¿qué
9:15hago? Le creo una rama paralela, creo
9:18ahí mi clase tres, ¿sí? Y si todo está
9:21bien y no tengo errores, la fusiono con
9:23la rama principal y elimino la rama
9:26paralela. ¿Sí? Es decir, creo una rama
9:28paralela para hacer un trabajo especial,
9:32¿sí? completamente aislado de mis
9:33compañeros de trabajo. Luego agarro eso
9:37que hice, lo pongo a revisión con mis
9:39colegas y si me lo aceptan se una a la
9:42rama principal.
9:44Esto, ¿en qué nos beneficia? En que si
9:45yo estoy trabajando con colegas, si yo
9:47hiciera mi mi tarea en la rama principal
9:50y llego a hacer una macana, podría
9:52llegar a borrar todo, podría llegar a
9:54incrustar un error muy grave en el
9:56sistema. Entonces, ¿qué es lo que hago?
9:58Solo trabajo en algo paralelo que puedo
10:00romper todo lo que quiera, que no va a
10:02afectar a la rama principal a menos que
10:04yo la fusione. Ese es el objetivo. Eso
10:07sería en un proyecto profesional. ¿Qué
10:09es lo que yo voy a hacer en este caso?
10:11Voy a usarla como una rama que tenga
10:13contenido diferente, como si yo quisiera
10:15hacer como capítulos de un libro o como
10:17si yo quisiera hacer, no sé, una especie
10:19de Google Drive donde voy coleccionando
10:21cosas en diferentes ramas. Y en esta
10:23rama puntualmente me interesa colocar
10:25una tarea. Entonces lo que voy a hacer
10:27es borrar el contenido de esta rama. Sí,
10:30lo voy a eliminar. Se va todo el
10:32contenido. Me queda limpita. Y lo que
10:34voy a hacer ahora es crear una carpeta
10:36nueva llamada HTML tarea. Sí, HTML.
10:42Bien, esta tarea va a incorporar lo que
10:45vimos la clase pasada, lo que vimos en
10:47la primera y lo que vamos a ver hoy. Sí,
10:49básicamente todo junto. Y la la próxima
10:53tarea ya vas a tener CSS. Bien, de hecho
10:56vamos a llamar solamente HTML porque ya
10:57se llama la tarea la rama, ¿no?
11:01HTML. Bien, perfecto. Entonces, acá
11:04dentro, ¿qué vamos a hacer? Voy a crear
11:06un archivo readme. MD, ¿sí? Estos
11:09archivos de documentación. Y acá va a ir
11:11la consigna. Yo la consigna la tengo acá
11:12a un costadito.
11:14Sí,
11:24la vamos a agarrar
11:26y lo vamos a pegar acá. Ahí está.
11:28Fíjense, fíjense que tiene unas
11:30consignas. Tu primer sitio web con HTML
11:325, objetivos de desafío. Sí, acá este
11:36nota nota de la temática. Pueden elegir
11:38la temática que quieran. requisitos
11:40técnicos, estructura multipágina y
11:42enlaces, métodos de deseo y
11:43optimización, interactividad de
11:45formularios web, contenidos avanzados de
11:47multimedia, que esto es lo que vamos a
11:48ver hoy, o sea, formularios y est estos
11:50dos puntos lo vamos a ver hoy. Y el
11:52resumen de todo lo que está más arriba y
11:55la cuestión de cómo entregarlo. Sí,
11:57inicialmente este primer proyecto lo que
11:59van a hacer es lo van a comprimir en un
12:01ZIP, ¿sí? y lo van a entregar. Carpetita
12:03con la hoja de HTML o las hojas de HTML
12:06en la carpeta pages, la carpeta de
12:08imágenes y lo entregan comprimido en un
12:10ZIP. El próxima tarea la van a tener que
12:12entregar su vida a su propio
12:14repositorio. Así que ya lo vamos a ver
12:17para la próxima tarea. Pero en esta lo
12:19vamos a hacer simple y me lo van a tenar
12:20simplemente en un comprimido. Yo después
12:22me lo descargo a mi computadora, lo
12:24descomprimo, lo reviso y les dejo una
12:26devolución en el eh en el en el campus.
12:32Bien, ahora fíjense que yo lo coloqué en
12:35un archivo de MED, que es este tipo de
12:36archivo que entiende ciertas ciertas
12:39simbologías que después se convierten en
12:42algo bonito. Bien, ¿cómo puedo yo ver?
12:45Eh, profe, ¿por dónde mandamos el SIP?
12:46Me lo mandan ahí por el campus. Vieron
12:48que ustedes tienen en el campus como el
12:50chat de de la comisión, pero después
12:53tienen como chats de eh
12:57individuales que pueden pueden mandarme
12:59por privado. Bueno, me lo mandan por
13:01ahí. el SIT, las consultas de código por
13:04el general, así yo veo todo, una fecha
13:06de entrega
13:09y yo les diría que
13:12yo les diría que
13:16clase HTML ACCS1 CCSC2 y yo les diría
13:20para el 23,
13:22¿sí? Porque 23 ya vamos a tener la
13:24segunda clase de SSS y posiblemente le
13:26deje la segunda actividad. Entonces, dos
13:29semanas, ¿sí? Para algunos parecerá
13:32poco, para otros parecerá mucho, pero
13:35hacerla, o sea, ustedes tienen que
13:37disfrutar del proceso de armarlo porque
13:40van a armar como la página completa, por
13:42eso sin CSS, pero la idea es que van a
13:44armar, ¿no?, el enrutado para pasar de
13:46página en página, le van a agregar
13:47formularios y como va a ser de la
13:49temática que ustedes elijan, van a poder
13:51jugar todo lo que quieran.
13:54Incluso me acuerdo que he tenido alumnos
13:55que han hecho cada sitio meme, que es
13:57buenísimo, me maté de la risa. Uno me
14:00hizo un sitio que era de eh de eh los
14:06tipos de jugadores más detestables en el
14:07League of Legends. Después otro me hizo
14:10un sitio web exclusivamente sobre eh de
14:14que era eh era de de
14:18Harold No Pain. No sé si les suena un
14:22meme de un tipo que siempre aparece con
14:25una cara que no se sabe si está triste o
14:28contento en diferentes situaciones. Un
14:31chavón de pelo blanco que era muy
14:33popular en Facebook.
14:37Capaz los más jovencitos no se acuerden
14:38de Harold, pero mira, les voy a mostrar
14:41el
14:48Así. Yo me enteré de la historia de
14:50Harold porque yo no la sabía. Yo solo lo
14:52conocía por el meme,
14:54pero
14:56ahí uno se acordó. Pero esperen, miren,
15:00les muestro ahí la imagen
15:05a ver si le suena. Le suena este
15:10el buen Harold.
15:12Bueno, resulta que este tipo eh era eh
15:18era modelo de eh diferentes compañías,
15:22¿no? Y hacía este tipo de
15:25de fotos, ¿no? Y resulta que bueno,
15:28nada, por la expresión que tenía lo
15:31alguien lo agarró y lo empezó a poner en
15:33todos los memes posibles, ¿no? Entonces
15:35aparecía como se me está diciendo, de la
15:36casa esa cara y de acá, de este meme,
15:40salió el del perrito que está prendiendo
15:42fuego en la sentado en la cocina, ¿no?
15:45Con la taza de café y resulta que saben
15:49a qué se dedica Harold de hoy en día. Yo
15:51me enteré por la página que hizo mi
15:52alumno, que la armó justamente como
15:54tarea y me hizo toda una investigación
15:56sobre la vida de Harold
15:58y resulta que el tipo hoy se se dedica a
16:03entrenar jugadores de póker.
16:06en poner cara de póker.
16:08No, no joda,
16:11es en serio.
16:13Entonces, lo van a encontrar en
16:15internet, capaz en YouTube, donde tiene
16:17jugadores profesionales de póker
16:18conocidos y el tipo frente a un pizarrón
16:20explicándoles cómo poner la de póker.
16:25Así que bueno, es la historia del buen
16:27así que bueno, entonces fíjense que
16:29cuando ustedes tienen un archivo como
16:31este, ¿sí? para ustedes ver la vista
16:33previa del archivo, porque ustedes no lo
16:35van a leer así, es un asco, ¿no?
16:36Obviamente, van a hacer lo siguiente,
16:39van a van a utilizar el comando
16:42eh control más shift más bta. Con este
16:47comando lo que van a hacer es abrir la
16:49vista previa. La otra forma puede ser
16:53botón derecho sobre el archivo y vienen
16:56por acá y buscan el de,
17:00no, acá, perdón, acá. botón derecho,
17:04abrir vista previa. Sí, pero pero el
17:07control shift B corta es lo mismo.
17:08Entonces, miren, control shift B corta,
17:11pimba y abren la vista previa del
17:14documento. ¿Ven? Y así es como lo
17:16deberían ver ustedes. Lo tienen abierto,
17:18así de hecho lo pueden tener abierto a
17:19un costadito y acá pueden tener la hoja
17:22HTML, por ejemplo,
17:24¿no? Algo así.
17:27y pueden tener a un costado la la las
17:30consignas, ¿no? Y acá eh pueden ir
17:33construyendo el eh el el sitio. Bien,
17:36para poder abrir doble plano usan eh
17:39esta opción que está por acá, esta de
17:42acá, ¿ven? Dividir editor derecho, ¿ven?
17:46Y les y el archivo son que están parados
17:49lo abre en la otra pantalla y les
17:51permite tener una subdición. Está bueno
17:53para HTML y CSS, ¿no? Poner HTML de un
17:55lado y CSS del otro y como que van como
17:58code si tienen dos monitores, pueden
18:01tener el sitio en un monitor y el Visual
18:04Studio en el otro. Entonces van como
18:05construyendo y lo van mirando cómo va
18:07quedando al lado en el otro monitor. Por
18:09eso es que la mayoría de los
18:10desarrolladores usamos dos monitores y
18:12de hecho eh hay incluso developers que
18:15usan tres monitores porque en uno tienen
18:17el código, en el otro tienen la vista y
18:19en el otro tienen a la para hacerle
18:22preguntas cuando tienen dudas,
18:24¿no? O sea, al Shemin cualquiera la de
18:27la web. Entonces, para no tener que al
18:28tabar usar tres monitores bien de Bado.
18:31Bueno, entonces este sería la la
18:36consigna que básicamente dice lo
18:38siguiente. Sí, dice objetivo del desafío
18:41consolidar los fundamentos de desarrollo
18:43web frontend, ¿sí? La estructuración
18:45semántica avanzada HTML con la eh
18:50para me quedó mal la consigna. Sé que
18:52con no puse ahí, pero cachito
18:56con la estructuración avanzada.
19:00Sí. Eh, para la estructuración avanzada
19:03HTML con
19:10un enrutado. Ahora sí me quedó medio mal
19:12la cocina. Ahora sí. Perfecto.
19:16Me quedó chueca. Ahí está. Sí. Eh, con
19:18el fundamento de desarrollo web, la
19:20estructuración avanzada HTML con un
19:22enrutado. Aprenderás a conectar
19:23múltiples páginas entre sí, recibir
19:25datos del usuario tras de fórmulos
19:27interactivos, integrar contenido nativo
19:29y utilizar iconografía moderna. La
19:31iconografía la pueden tomar de una
19:32librería que se llama Fontosom, que se
19:34las voy a dejar acá en la en la
19:36documento, que les permite conectar por
19:38medio de un enlace, así como usan, no
19:40sé, la van a van a usar la etiqueta link
19:43para conectar con una hoja de CSS. Hay
19:45una etiqueta llamada script que permite
19:47conectar con librerías externas. Una de
19:50ellas es esta librería Fontosom que les
19:51permite colocar iconos. Esos iconos
19:54obviamente son mucho más lindos que los
19:56iconos que yo les había mostrado de
19:58Unicode que son bastante fuleros, ¿no?
20:01Bien, nota sobre la temática. Sí, puede
20:04ser a elección, puede ser un blog
20:06personal, una tienda, un hobby, una
20:08película, un juego, lo que quieran, ¿si?
20:10Mientras que pongan los conceptos a
20:12andar. Entonces, ¿cuáles son las partes?
20:14Sí, estructura multipágina y enlaces de
20:17navegación. Tu sitio deberá con contar
20:19obligatoriamente con al menos dos
20:21páginas. Obviamente dos páginas lo
20:23mínimo, pero ustedes hagan más que eso,
20:24no hagan lo mínimo. Sí. index HTML y una
20:27segunda página temática, por ejemplo,
20:29contactos, producto sobre mí, mínimo dan
20:31cinco. Sí, esto es como los mínimos
20:32indispensables para implementación de un
20:35menú de navegación global con enlaces
20:36absolutos o relativos funcionales que
20:39permitan transaccionar fluidamente entre
20:41todas las páginas de sitio. Metadatos y
20:43SEO y optimización. Sí, esta parte de
20:45los metadatos lo vamos a ver ahora en un
20:47ratito. Eh, el encabezado técnico de
20:49cada documento debe configurarse
20:51profesionalmente, incluyendo la etiqueta
20:53title y por lo menos la etiqueta la
20:56etiqueta este meta de descripción y la
20:59de keywords. Igual yo les voy a decir un
21:01par más que pueden colocar.
21:03Interactividad, formularios web, sí,
21:05campos y texto de email, elementos de
21:08selección de casillas, área de texto
21:09para mensajes y botón de envío. Y botón
21:11de envío. Sí, esta parte estilizada.
21:13Olvídensel. Eso era porque originalmente
21:16esta tarea yo la había hecho para CSS y
21:20por eso es como que tiene eso desilizado
21:22en algunas partes, pero no se preocupe,
21:24no es lo que va bien. Eh, y contenidos
21:29avanzados y multimedia, tablas HTML,
21:33multimedia nativa, si al menos un
21:35archivo audio local y un vídeo local o
21:37incrustado y algunos iframes, si también
21:40esto lo vamos a ver bien, no tiene mucho
21:43más que eso. La carpeta del proyecto eh
21:45con eh carpeta del proyecto, contenido
21:47archivos HTML y la carpeta de recursos
21:50multimedia. O sea, necesitas la carpeta
21:52pages básicamente y una carpeta de
21:54archivos multimedia que hoy la van a
21:56ver. Bien.
21:57y todo junto en una carpeta más grande
22:00comprimido. Eso es todo. Bien, entonces
22:04jueguen un poco porque tiene de todo lo
22:05que vimos HTML y lo que vamos a ver hoy.
22:08Ahora la pregunta es, bueno, ¿cómo me
22:10descargo la tarea? Primero la vamos a
22:12pullear. Sí, vamos a pushearla. Git
22:15addit
22:17comit.
22:19Sí, tarea HTML git push. Acá no hace
22:24falta el origin master porque no estamos
22:25en master, ¿no? Y no vamos a poner
22:27origin porque tareas no es la carpeta,
22:29no es la rama de origen, es una rama
22:31secundaria. Entonces le damos git push,
22:34bien y ahí se pushea. Entonces cuando
22:36volvemos de vuelta para acá, revisamos
22:39el nos vamos ahora a tareas
22:43y fíjense que ahí está la carpeta HTML.
22:45Si cliquean ahí adentro,
22:47sí, que quedan dentro de la carpeta
22:49HTML, van a encontrar ahí la consigna.
22:52Bien, que ahí estamos. Es es el RM y la
22:54documentación se ve directamente en el
22:55repositorio.
22:57¿Cómo hago yo para descargarme esta
22:59tarea y hacerla, no descargarme la
23:01carpetita y poder verla? Bueno, de la
23:03misma forma que les había dicho la vez
23:05pasada, van a venir a la parte principal
23:09del proyecto.
23:11Sí, ha comisión 27. Van a ir al botón
23:15verde.
23:17Espen que me equivoqué ahí. Tuki van a
23:19ir al botón verde, pero será posible.
23:33Ahora sí van al botón verde de code,
23:35copian el enlace,
23:37abren la terminal de la computadora,
23:41¿sí? Y luego se ubican donde ustedes
23:44quieran. Personalmente ponerle, yo suelo
23:46ir al escritorio, tiro todo ahí, después
23:48veo dónde lo pongo, me voy al
23:51escritorio,
23:52que mi caminito hacia el escritorio es
23:54este.
23:55Y una vez que están acá, simplemente
23:57dicen git clon y lo pegan. Bien, nada
24:01más. Si ustedes ya tenían clonado el
24:03proyecto, lo único que tienen que hacer
24:06es ir a eh ir a master, ¿sí? de vuelta,
24:12por ejemplo,
24:15y van a poner KP y se van a descargar
24:18todo el nuevo que hay en el repositorio
24:20y si hay una rama nueva, pues va a
24:21aparecer en su GitHub. Sí. Y ya ahí la
24:24pueden hacer si quieren y después
24:26comprimen la carpetita. Bien. Y si les
24:29da mucha fiaca a todo esto, pueden
24:30simplemente ir al repositorio,
24:33ir a la rama tareas,
24:37ir a HTML.
24:42abren el documento
24:46y se lo pueden copiar todo y se lo
24:48llevan una carpeta nueva, ¿no? Vale, lo
24:50copian todo, crean una carpeta nueva,
24:53supóng en el escritorio,
24:58ahí crean dentro una carpeta llamada, no
25:00sé, docu y pegan todo ahí en un ritmo y
25:03arrancan a laburan en esa carpeta como
25:05ustedes prefieran. Sí, pero eh
25:08cualquiera de los mecanismos es es
25:10viable. Yo normalmente lo que hago, me
25:12lo descargo, le creo una carpetita,
25:14luego lo comprimo y lo mando. Sí, lo más
25:17común. Bien, ¿alguna duda?
25:26Imagino que los que estuvieron jugando
25:27con Git ya esto no les resultar ninguna
25:29novedad, ¿no? Los que han estado jugando
25:32con eso. Buenísimo. Bueno, entonces
25:35clase número tres. Vamos a las chapas
25:38que ya tenemos nos queda media clase. H
25:41clase 03 baj HTML 03. Detalle
25:46importante, les voy a dejar una clase
25:47complementaria de HTML asincrónica que
25:50eh va a tocar un tema que se llama
25:54accesibilidad.
25:56La parte de accesibilidad es una es una
25:58es una clase teórica, ¿sí? puramente
26:00teórica, no tiene eh código ni nada en
26:03en términos de que van a aprender nuevas
26:05cosas en términos de código, sino que
26:07tiene está relacionada con cómo nosotros
26:09encaramos la el desarrollo del de HTML
26:13orientado a tener en cuenta que nuestros
26:17usuarios pueden o no tener pueden tener
26:19diversas discapacidades y cómo podemos
26:23acomodar un poco nuestra estructura para
26:25mejorarle la experiencia de usuario a
26:27esas personas y por lo tanto obviamente
26:29conservar usuarios que de otro modo no
26:32interactuarían con nuestro producto.
26:35Bien. Eh, así que es una clase con
26:37algunas diapositivas y nada, lo traté de
26:41hacer lo más a menos posible. Para
26:42algunos es medio odrio, pero bueno, yo
26:45tampoco soy muy fan de las diapositivas,
26:46como se habrán dado cuenta, pero eh es
26:49lo que hay. Ya le puse 04 sin querer. Me
26:52acabo de dar cuenta.
26:54Entonces vamos a crear una carpeta
26:55nuevamente src. Dentro vamos a crear la
26:58carpeta pages y dentro vamos a crear una
27:00carpeta nueva que antes usábamos la
27:03carpeta images, pero la carpeta de
27:06images es o images eh es eh
27:13real solo para imágenes y nosotros
27:15podemos tener muchos elementos de medida
27:16diferentes. Podemos tener videos,
27:18podemos tener audits, podemos tener
27:19documents. Entonces, le vamos a poner
27:21acá assets. Sí, ese es el nombre
27:23convencional de esta carpeta.
27:26Dentro de esta carpeta Assets vamos a
27:28crear una serie de carpetitas. Vamos a
27:30crear la carpeta de imágenes, vamos a
27:32crear la carpeta de vídeos, vamos a
27:34crear la carpeta de audios y vamos a
27:37crear la carpeta de documents. Sí,
27:42también suele aparecer una quinta
27:44carpeta que nosotros no la vamos a usar
27:46porque no tenemos CSS que se llama
27:49fonts. La carpeta font usualmente trae
27:52fuentes descargadas. ¿Qué es una fuente
27:54descargada?
27:55Yo quiero que mis títulos tengan la
27:58letra de Marvel.
28:01Me tengo que descargar un archivo de de
28:05extensión WTF, TTF, OTT, que son
28:09extensiones de fuentes, y me descargo la
28:12fuente de Marvel y luego por medio de
28:14una función de CSS yo habilito esa
28:17fuente para poder colocársela a todos
28:19mis textos. Entonces puedo hacer, por
28:21ejemplo, no sé, que mis títulos y mis
28:23botones tengan fuente de Marvel y que mi
28:26texto genérico tenga fuente del Señor de
28:27los Anillos porque me pintó. Sí.
28:31Entonces, usualmente ahí colocamos las
28:32fuentes descargadas. En este caso, como
28:34todavía no vimos CSS, pues la de fuentes
28:36no la vamos a agregar, pero las otras
28:38las vamos a dejar. Bien, para esto voy a
28:41traer
28:43de la otra comisión
28:46ejemplo de audio y video que tengo,
28:48acuérdenme, para usar en la clase, que
28:50encima son más viejos, siempre uso los
28:52mismos recursos. Me tengo que
28:54actualizar, ustedes saben.
28:57Ah, eh,
29:04pero bueno, vamos a traer un audio,
29:07vamos a traer
29:09un document
29:11y vamos a traer
29:15un video. No me atró ninguna imagen.
29:18Bueno, las imágenes ya las ya las saben
29:19ustedes cómo funciona, pero ahí vamos a
29:22poner el video. Listo. Entonces, dicho
29:25esto, vamos entonces a crear por acá
29:29nuestra carpeta de index.html
29:32y vamos a levantar el documento ahí.
29:36Bien. Y lo vamos a dejar listo. ¿Qué es
29:38lo primero que vamos a ver antes de ir
29:40con los elementos de media? Vamos a ver
29:41formularios. Bien, formularios es un
29:44tema extremadamente importante porque
29:45está en todos los sitios. No importa de
29:47qué sea el sitio, siempre hay un
29:49formulario, aunque sea un formulario de
29:50contacto, pero siempre hay un
29:52formulario, aunque sea un foro pequeño
29:54como una barra de búsqueda como la de
29:56Mercado Libre, en el fondo es un
29:58formulario. Sí, aunque tenga un solo
30:01cajón, pero sigue siendo un formulario.
30:03Entonces, los formularios son
30:05puntualmente la forma más básica de
30:07interacción del usuario con el dueño del
30:11portal. No, ya sea que ustedes este
30:14quieran este contactarse con el abogado
30:17o quieran suscribirse una newsletter o
30:20quieran buscar productos en
30:22Mercadolibre, ¿no? Es la forma de
30:24interacción más básica que hay. Los
30:27formularios se utilizan a través de un
30:28de un elemento llamado form. ¿Sí? Este
30:31elemento form lo único que tiene es es
30:35el envoltorio básicamente de ese
30:38formulario.
30:39Este formulario suele, o sea, cuando
30:42nosotros le damos enviar a través de
30:45JavaScript podemos adosarle una función
30:48que lo que haga es tomar todos esos
30:51datos que el usuario ingresó en el
30:52formulario
30:54y nosotros después elegir a dónde los
30:56queremos enviar. por ejemplo, enviarlos
30:58a una base de datos, enviarlos por
31:00correo electrónico, etcétera, etcétera,
31:02etcétera. Bien, entonces los formularios
31:06están compuestos por una serie de
31:07elementos que son propios de los
31:09formularios y que según las reglas de
31:11HTML no deberían usarse fuera de un
31:13formulario. Bien, entre estos elementos
31:17el más clásico de todos es uno llamado
31:20input. Sí, los input son cajones para
31:24agregar información, pero cada tipo de
31:26input, porque fíjense que tiene un tipo,
31:28¿ven? En este caso, este es de tipo
31:29texto, aceptan diferente tipo de
31:32información o diferente tipo de de de de
31:38caracteres. Por ejemplo, en este caso,
31:41uno de tipo texto acepta cualquier cosa,
31:43tanto letras como números, como
31:45caracteres raros, ¿sí? lo que sea,
31:49incluso todo esto. Bien, entonces este
31:52es el más básico. Este es usualmente el
31:54que usamos cuando queremos, por ejemplo,
31:56poner eh nombre,
31:59eh nombre de usuario, apellido, ese tipo
32:03de cosas. Bien, ahora imagínense que yo
32:06tengo dos inputs de texto. Uno es para
32:09el nombre y uno es para el eh el
32:13apellido. Supónganse, fíjense que
32:16aparece uno al lado del otro. Y yo
32:18quiero que este esté en un la línea de
32:21abajo con un salto de línea para
32:23hacerlo. Eh, esto no se usa cuando ya
32:26saben CSS porque es una cochinada, pero
32:29cuando no saben CSS una forma es colocar
32:32lo que se llama un BR, que es
32:34básicamente un breaking row, ¿no? Un una
32:36ruptura de renglón, un salto de línea.
32:39Fíjense que automáticamente empuja al
32:41otro elemento por debajo. Ahora yo
32:45quiero indicarle al usuario de que acá
32:47espero un nombre y acá espero un
32:48apellido, pero cómo lo hago. Las formas
32:51más las formas más puras para hacerlo
32:54son utilizando un elemento llamado
32:56label, que básicamente en inglés
32:58significa rótulo. Entonces si yo le
33:02pongo acá, por ejemplo, nombre dos
33:04puntos, van a ver que de repente tengo
33:06un rótulo para ese input. Sin embargo,
33:09como el rótulo está en una línea
33:10distinta al input, visualmente no
33:12parecería que estuvieran
33:13intercomunicados.
33:15De hecho, uno esperaría que estén
33:17intercomunicados si cliqueo sobre el
33:19cajón y se pinta. Y si cliqueo sobre el
33:22nombre también debería pintarse, pero no
33:24se pinta. ¿Ven? Parece como que no hay
33:26una relación entre el cajón y el nombre.
33:29La forma para relacionarlos entre sí es
33:32básicamente que nosotros le pongamos un
33:35ID a este input, por ejemplo, nombre, y
33:39ese ID lo coloquemos dentro de este
33:41atributo llamado for. ¿Por qué? Porque
33:44el for significa para. Entonces, yo que
33:46digo un rótulo para el elemento de ID
33:50nombre. Entonces, una vez que lo tengo,
33:53si cliqueo en el nombre, ping, se pinta
33:55el cajón. Los acabo de vincular de
33:58alguna manera.
33:59Bien, ahora en el en la parte del de
34:03visual están bien vinculados, se ve uno
34:05al lado del otro, cliqueo y se se pinta,
34:08pero en el código parecen bastante como
34:10desconectados porque están en diferentes
34:12líneas. Lo que solemos hacer cuando
34:14usamos rótulos es tomar al input y
34:16colocarlo directamente dentro de el
34:19label o colocarlo de esta manera,
34:24que es la que más me gusta.
34:25ocupo un poco más de líneas de código,
34:27pero es más agradable ver.
34:30Sí. Entonces, de esta manera, ¿no? O si
34:32quieren le pueden poner input adelante,
34:34¿no? Algo así como les guste más, que es
34:37bastante más agradable de ver. y
34:39entonces da una sensación de vinculación
34:41tanto en el código como en la eh parte
34:44de la interfaz de usuario. Bien,
34:47entonces lo mismo pueden hacer luego
34:49colocando otro label
34:51que diga apellido.
34:54Bien, acá colocamos apellido
34:58y simplemente traemos al input
35:01nuevamente
35:04para acá. Bien, ahí está. Y ahí los
35:07tendríamos más o menos ubicados. Fíjense
35:08que queda bastante más bonito
35:11y eh un poquito más ordenado. Sin
35:14embargo, el uso de colocar, por ejemplo,
35:18nombre al lado del cajón suele ser no
35:21muy utilizado. Usualmente uno lo coloca
35:23como por debajo, algo tipo tal que así,
35:27¿no? Algo así, ¿no? Este arriba y este y
35:30este arriba también
35:33suele ser como se suele ver más bien de
35:35esta manera, ¿no? y con alguna especie
35:38de espacio en el medio para que quede
35:39más prolijo. Algo así.
35:44Algo así. A veces incluso sin los
35:46puntos, porque como está uno arriba y el
35:48otro abajo, no hace falta la separación.
35:50Bien, se suele ver así. Pero también hay
35:53formularios que no suelen tener un
35:55rótulo. Lo que suelen tener es como que
35:58el el qué quiero dentro del cajón se
36:01muestra como una especie de mensaje
36:02dentro del cajón.
36:05¿Y cómo es eso? Bueno, supongamos que
36:07comentamos esto y volvemos a intentarlo
36:09nuevo, así les queda con rótulo.
36:10Volvemos a crear un input de sí, para el
36:13nombre o para el username, por ejemplo.
36:16Yo y quiero acá colocarle que yo quiero
36:18indicar que acá se espera un username.
36:21Entonces, hay un atributo que se le
36:23puede colocar al input que se llama
36:24place holder.
36:27Y cuando yo le pongo acá, por ejemplo,
36:29username,
36:32fíjense que aparece como una especie de
36:34texto previo. Entonces yo sé que acaba
36:37el username y le pongo, no sé, John. Y
36:39fíjense que se borra el username que
36:42estaba previamente.
36:44Bien, entonces si nosotros agarramos,
36:45empezamos a crear, por ejemplo, quiero
36:47username y quiero una edad.
36:51Sí, fíjese que van quedando más
36:52prolijitos.
36:54¿Ven?
36:56Y no hay tanta cantidad de texto dando
36:58vueltas al margen de lo justo y
37:00necesario que se requiere. Van a ver que
37:02muchos formularios tienen simplemente el
37:03cajón con eh el indicador interno. Ya.
37:09Ahora, fíjense que estos son inputs
37:11exclusivamente de texto. No tenemos
37:14como, ¿qué pasa si quiero poner un
37:15correo electrónico? ¿Qué pasa si quiero
37:17poner un password? Eh, para cada caso,
37:21¿qué hago? Entonces, la cuestión es así.
37:25Simplemente varía el tipo. En el momento
37:28en el que yo, por ejemplo, decido
37:29colocar un eh vamos a borrar el de age,
37:32que no tiene nada que ver, obviamente,
37:33¿no? Vamos a colocar acá un input de
37:36type email, ¿bien? Y le vamos a poner un
37:40placeholder también. Acá le vamos a
37:42poner
37:44email,
37:46algo así. Bien, ahora fíjense que
37:51visualmente no parecen ser muy
37:52diferentes, pero voy a agregar un botón
37:54por acá que es un input de tipo submit,
37:58que es uno de envío. Sí, el botón de
38:01submit o de envío de un formulario. Y
38:04van a ver qué es lo que sucede cuando yo
38:05coloco acá, sí, John y de email pongo,
38:10no sé, Jorge y nada más y le doy enviar.
38:15Fíjense que me dice, "Por favor, incluya
38:18un @ en esta dirección de email porque a
38:21Jorge le está faltando un @." Pobre
38:23Jorge. Entonces, bueno, le damos el a
38:26Jorge, como nos pide el sistema, le
38:28damos el @ a Jorge. Pero cuando yo
38:30intento enviar de vuelta me dice, "Por
38:32favor ingrese la parte siguiente al
38:35porque Jorge @ está incompleto."
38:38Bueno, Jorge @
38:42tu vieja lo enviamos. Y ahí me deja,
38:47decís, pero pará. Y el punto comom.
38:49Bueno, ese es un pequeño defecto que
38:51obviamente tiene este input y nosotros
38:54obviamente no nos vamos a fiar del input
38:57para esa validación, ¿no? Está claro de
39:00que le vamos a poner una validación
39:01programada, personalizada con JavaScript
39:04para que nos deje, por ejemplo, acá un
39:06mensajito de color rojo debajo del cajón
39:09que diga, "No es un correo electrónico
39:11válido." y ese mensajito no se debería
39:14de ir hasta que vos pongas un correo
39:17electrónico válido y y obviamente
39:19tampoco debería el formulario dejarte
39:21enviar la información hasta que esté
39:22corregido ese detalle, pero bueno, lo
39:25cual no quita que no lo usemos este
39:27input lo usamos, pero la validación se
39:29la damos por otro lado. Vamos a confiar
39:31en ese cajoncito render. Bien.
39:34Eh, después, ¿qué pasa cuando queremos
39:36agregar, por ejemplo, si vamos a agregar
39:38por acá un input para agregar
39:42contraseña, sería el input de password y
39:45le vamos a poner acá también place
39:47holder,
39:49sí, password. Y ahí lo tenemos. ¿Cuál es
39:52la diferencia entre de password y los
39:54otros? Pues
39:57que salen bolitas.
39:59Ahora, la pregunta es, "Profe, yo puedo
40:01saber que dicen esas bolitas.
40:04Porque yo puedo desde JavaScript
40:06capturar el dato. En realidad, esas
40:07pelotitas que están viendo ahí son
40:09simplemente una un bloqueo visual, ¿no?
40:13Pero en el mundo por detrás, en el mundo
40:16de los datos, es completamente
40:18capturable ese detalle. Ahora, la
40:20cuestión es, ¿okay? Significa que si yo
40:22pongo una contraseña, eh, los que tengan
40:26los que sepan de código pueden saber mi
40:28contraseña.
40:29No les explico por qué. Cuando ustedes
40:33se registran en una página y le ponen
40:35una contraseña, el sistema está
40:37programado para automáticamente realizar
40:39un proceso llamado encriptado, más
40:42conocido en el mundo de la programación
40:44como un haeo, ¿sí? más vulgarmente.
40:48Entonces, básicamente lo que sucede es
40:50esto. Ustedes registran su se hacen la
40:52cuenta de usuario y registran su
40:54contraseña, que es, supónganse, sí, es
40:58PP1 2 3 4. Cuando ustedes le dan
41:01registrar, lo que hace esto es que va al
41:03backend y en el backend
41:07un lo atrapa una función que suele
41:09llamarse, por ejemplo, ah
41:13hash sync. Sí, una conocida función
41:17llamada hashc y lo que hace es que
41:19agarra app3 y lo convierte en una cosa
41:21bastante desagradable que se ve más o
41:23menos de esta forma. ¿Sí? Y esto, esta
41:27versión encriptada es la que aparece en
41:31la base de datos. Por lo tanto, lo que
41:32ustedes van a ver es que en la base de
41:34datos aparece, por ejemplo, si username,
41:38eh, no sé, John,
41:42sí.
41:45No sé e cómo era, eh, [email protected]
41:53password
41:56y aparece esto. Esto, ¿qué significa?
41:59Que cuando alguien
42:01ingrese a la base de datos, vamos a
42:03poner la imagen de un hacker. En
42:06realidad, los hackers son buenos. Los
42:07malos se llaman piratas cibernéticos.
42:10Eh, si un pirata entra a la base de
42:13datos, no va a poder acceder a tu cuenta
42:16porque está hallada la contraseña. Bien.
42:19Y ustedes me dirán, "Bueno, pero el el
42:20de la empresa sí puede ver la
42:22contraseña. Tampoco porque programó el
42:25backend para que cuando un dato llega,
42:27automáticamente se haa y se inserta la
42:29base de datos. No hay usuario humano de
42:33por medio que esté en el medio de ese
42:36proceso. Está automatizado.
42:38¿Se entiende? Y me dirán, "¿Y hay alguna
42:41forma de deshaar?"
42:43Sí, como poder se puede, pero es casi
42:46imposible porque en realidad la el hash
42:50es una de las tantas posibilidades
42:53aleatorias que hay de una contraseña. Es
42:55decir, yo la le ejecuto un hash a esta
42:58contraseña y me da esto. Si se lo vuelvo
43:00a hacer, me va a dar otro distinto.
43:02Nunca son iguales. Entonces, como hacer
43:05que esto vuelva a ser la contraseña
43:07original es complicado.
43:09Lo que si puede pasar es que vos puedas
43:11comparar esto con esto y saber si esta
43:13partió de acá.
43:15¿Por qué? Porque la estructura del hash
43:18depende bastante de cómo era la
43:20contraseña original. Entonces, solamente
43:22puede tomar determinada forma si la
43:25contraseña original tenía determinada
43:26forma.
43:28Bien, entonces vos podés comparar esto
43:30con esto y que el sistema diga, "Ah,
43:32okay, esto provenía de esta de acá." Y
43:35las otras cinco que se generaron también
43:36provenían de esta de acá. Bien, pero no
43:39es algo muy sencillo de hacer en el
43:40sentido de que un hacker pueda agarrar
43:43el hash y lograr descubrir cuál era la
43:45contraseña de la que partió.
43:48Si no captura los datos con esa función,
43:49ahí sí lo un hacker puede ver los datos.
43:52Claro, si vos no has ve las contraseñas
43:55planas,
43:57¿no? Es decir, imagínate que vos no
43:59haces este proceso y el backen
44:01directamente sí lo manda a la database
44:05así no más.
44:07¿Qué te pasa? P 1 2 3 4 está en la base
44:10de datos. Alguien entra, agarra esto, se
44:13lo a tu cuenta y te roba la guita.
44:16¿Se entiende? ¿Me siguen la idea?
44:20Por eso es que todas las aplicaciones
44:23hashean las contraseñas y las
44:24colocanadas.
44:29¿Qué me funciona? Si la para o te entra
44:31la pregunta, a ver, si no capturas los
44:32datos de esa función esa función ahí lo
44:35de un hacker puede Ah, entonces no
44:37entendí bien. Ah, okay, okay. Esa
44:38función es la única forma de capturar.
44:40No, no, no. Esto, esto es solamente un
44:41convertidor. Es una función
44:43convertidora, eh, nada más casa, o sea,
44:45llega esto, la agarra y y la convierte y
44:48esto después lo mandas. Sí, esa es la
44:50mecánica. Entonces, claro, yo puedo
44:52capturar ese datito de ahí. Después les
44:54más adelante les enseño cómo ustedes
44:56podrían hacer alguna cosa tipo hack eh
45:00hack casero y decirle tipo a tu a tu a
45:03tu vieja mamá ponés poné eh eh meté tú
45:06un usuario y una contraseña para
45:07registrarte en esta aplicación que armé.
45:10Y entonces, ¿qué hacen ustedes? Ponen
45:11una especie de función que lo que ha es
45:13que capture cuando está tecleando en el
45:16en el password, que capture la
45:18contraseña tecleada y entonces les va a
45:21quedar registrado en un en un log. Y
45:24cuando después al rato vuelven y filan
45:26el log y ven la contraseña que te quitó
45:27tu mamá.
45:29Entonces, ¿cómo se usa esa estrategia
45:31para chorear contraseñas a usuarios
45:34incautos?
45:36Supónganse que ustedes están eh están en
45:39la en la dark web, ¿sí? están en la dark
45:42web, donde saben que ahí hay muchos
45:45sitios que
45:47no están como edificados, que son
45:49seguros, ¿no? Entonces entran en en la
45:53dark web, no sé por qué les pintó, y
45:55entran a una página que parece la página
45:57del Santander
46:00o más bien que entran a una página que
46:01piensan que es la página de eh, no sé,
46:04de no a poner del Santander, ¿no? O del
46:07Galicia, del Galicia.
46:09Pero real no se dieron cuenta que decía
46:11www.garlicia.com.ar.
46:15En realidad decía Garlicia. Ustedes
46:17estaban tan como pasado de rosca que
46:20leyeron Galicia. Tenía logo de Galicia,
46:23todo en los colores, todo parecía
46:25garlicia.com.ar.
46:27Claro. Ustedes agarran y se quieren
46:28loguear,
46:30ponen el usuario, ponen la contraseña,
46:32le dan enviar y el sistema, ¿qué hace?
46:34captura lo que teclaste
46:37y lo guarda y lo guarda en el log.
46:39Entonces, ¿qué hacen los de la página?
46:41Agarran, van a loca, hacan tu
46:42contraseña, van a la página real de
46:43Galicia, ponen tu contraseña y te roban
46:45la pelota.
46:48Es el trucazo, ¿no?
46:52Entonces, este, o no sé si les pasó
46:54alguna vez que los haya llamado alguien
46:56tipo por WhatsApp como que quieren que
46:59usted que les van a mandar un coso donde
47:01tienen que poner un un código y que
47:05porque lo llaman de de no sé de meta y
47:08que si no ponen el código ahí les van a
47:10dar debaja el WhatsApp en 24 horas, una
47:12volud así y ustedes llegan a poner como
47:14el código ese y ellos agarran y pueden
47:16entrar a tu WhatsApp y te lo haquean.
47:19Claro, los truchos de Mercado Pago para
47:21que pongas tu contraseña ahí, después te
47:23la te capturan lo que te creaste y entr
47:26tu cuenta Mercado Pago y lo roban todo.
47:28Así que bueno, nada, hay un montón de
47:30formas de estafas que implican que vos,
47:32pero vos tenés que poner manualmente los
47:34datos. Sí, claro. Vos lo tenés que poner
47:38manualmente porque la estafa requiere de
47:40que vos los coloques porque lo que ellos
47:41capturan es lo tecleado. ¿Y cómo qué es
47:44lo tecleado? Bueno, miren, ¿ven este
47:46botón que dice submit? ¿Qué pasa si yo
47:48le quiero cambiar
47:50el el nombre? Voy a colocar un un
47:53atributo llamado value. ¿Sí? Y miren, si
47:56en value yo pongo enviar,
48:00me salió un portugués. Cambia. Ven.
48:04Bueno, este atributo value es el que
48:06establece el valor de un cajón.
48:09¿Sí?
48:10De tal manera de que si yo, supónganse,
48:14imagínense que estoy programando y
48:16quiero obtener,
48:18sí, y quiero obtener
48:20el password, porque esta es el input de
48:23password, quiero entrar, quiero obtener
48:25el sí, quiero obtener el password punto,
48:29sí, value. Quiero entrar a la al
48:31atributo value del input de password.
48:35Entonces, entonces, ¿qué pasa en el
48:37momento de que yo vaya tecleando acá?
48:38Sí, PP 1 2 3 4.
48:45Lo que va a hacer es que yo accedo al
48:47value de ese cajón y obtengo lo que está
48:49escrito ahí.
48:52Bien. Y ahora lo agarro
48:54y lo uso para leerme. Se ve porque yo
48:58capturé lo que el usuario puso. Pero yo
49:01tengo que tener una función que esté
49:02observando este cajón y guardando lo que
49:05se está tecleando.
49:07Sí.
49:09Es más, miren esto,
49:11¿ven que está vacío? Miren, value
49:15PP 1 2 3 4.
49:19Tarán, ¿lo ven?
49:23Ahí dice PP 1 2 3 4. Pasa que ustedes lo
49:24pueden ver.
49:27Ahora vamos a la reversa. Yo tomo ahora
49:30valor y me lo guardo.
49:32¿Se entiende?
49:35Y así es como lo capturan. Si quieren en
49:37la primera o segunda clase de JavaScript
49:39les muestro cómo tomarlo de del cosito
49:42ese. Sí,
49:44pero bueno, como les digo, esto no es un
49:48un tutorial de de para hacer un sitio
49:50estafa, eh, no es para eso. No sean
49:53ilegales. Sí, esto es un esto es un
49:56tutorial de cómo se leen cajones de
49:58formularios por fines prácticos. Sí.
50:02Después si uno de ustedes cae preso para
50:03hacer payasadas, no es mi problema. Sí,
50:06es como vieron los que están en YouTube,
50:08esto no es una recomendación de
50:10inversión.
50:12Bien,
50:13así que bueno, nada, tengan en cuenta
50:15ese detalle. Muy bien. Entonces, basado
50:18en esto, ¿cuánta cantidad tenemos de
50:20diferentes inputs? Lo voy a enistar
50:21rapidito porque tenemos que ir al otro
50:23tema, ¿sí? Así que lo vamos a hacer bien
50:25rápido. Vamos a poner acá, ¿sí? Algunos
50:27BR para poder hacer más rápido. Vamos a
50:30copiar algunos cuantos berres. Bien,
50:32ahora sí.
50:34Ahora input de
50:37file.
50:38Sí, el input de file es el clásico input
50:41donde cargas un archivo. Ya, eso ven
50:45como acá que están las grabaciones de
50:47las clases de de global. Bueno, ahí
50:50está. y subís un archivo.
50:53Ya. Después vos puedes capturar este
50:55archivo, lo transformas para, por
50:57ejemplo, mandarlo como dato a través de
50:59corre electrónico, lo que sea, ¿no? Eh,
51:02o para postearlo, por ejemplo, en
51:03Facebooka.
51:05Tenemos el input de type search. Sí,
51:08esta es una basura, pero se usa. Sí.
51:10¿Cuál es la diferencia con el cajón de
51:12texto que vos escribís y tiene una
51:13crucecita para que lo borres?
51:17Sí. Y ustedes me dicen, "Profe, ¿y la
51:19lupita? La lupita se pone con CSS, no
51:22viene con HTML la lupita. Bien, input de
51:26type date, ¿sí? Fecha es un calendario
51:30muy simpático. Ustedes pueden poner acá
51:31la fecha manualmente, por ejemplo, mes
51:3305 17 de 1976
51:37o pueden apretar el calendario. Sí, si
51:39algunas vieron este calendario es HTML
51:41puro. Entonces, si ustedes van
51:43modificando acá en el calendario,
51:44cambian el año, cambiándose acá.
51:4984 septiembre, ¿ven? Va cambiando y
51:52pueden enviar esa fecha. También tienen
51:54el
51:56input de type eh time, ¿sí? El de time,
52:01fíjese ahí, no sé, 12 30 AM. Bien. Eh,
52:07después tienen el input de input de
52:10checkbox.
52:12Sí, los de checkbox son los cajoncitos
52:14para hacer clics. Sí, si tenés varios de
52:17estos, puedes cliquearlos todos a la
52:18vez, como verán, ¿ven?
52:23Y después tenés los hermanitos de estos
52:25que se llaman los inputs de tipo radio.
52:29Los de radio son las bolitas, pero la
52:31diferencia con los cajoncitos es que si
52:33bien a primera vista también se pueden
52:35cliquear todos simultáneos, vos podés
52:37interconectarlos para que solo pueda
52:40haber uno cliqueado. Por ejemplo, hace
52:43que yo tuviera uno que fuera por acá.
52:46Eh, vamos a ponernos BRs también.
52:50Sí, BR y BR. Y supóng que este fuera el
52:54de eh masculino,
52:59no, el de arriba
53:01femenino
53:03y otros. Bien, entonces fíjense ahí que
53:07guardo, puedo cliquearlos a la vez, pero
53:10¿cómo los interconecto? Les pongo por
53:11acá, sí, name, un atributo especial y
53:15tienen todos que tener el mismo name.
53:17Por ejemplo, name
53:20así hago así. Tuki, tuki, tuki. Bien. Y
53:24ahora miren, tac, tac, tac, tac. Bien. Y
53:29además también pueden elegir alguno que
53:31esté por defecto y que ya arranque
53:35marcado cuando carga la página. Por
53:37ejemplo, si lo ponemos acá, puede ser
53:39checked.
53:41Ven. Y ahí quedó marcado. Entonces, yo
53:43recargo y ya arranca uno marcado por
53:45defecto. Pero si yo cliqueé otro, ¿ven?
53:47No pasa nada. Si agrego uno que no está
53:49interconectado, por ejemplo, no sé,
53:52este,
53:55noten que ese sí puede estar clicado
53:57junto con los demás porque ese no está
53:59interconectado. Sí. Así que nada,
54:01cositas bonitas de los de radio.
54:04Eh, me falta alguno. File search. Bueno,
54:08sí, hay uno más que no se usa nunca,
54:10pero está por ahí dando vueltas, que es
54:11el de number. Este se usa más que nada
54:13cuando solamente queres números. No te
54:15deja poner teclas de caracteres, pero si
54:18te deja poner números y también te
54:20permite incrementar o decrementar con
54:22flechitas.
54:23Ahora que no lo usa, pero existe. Y uno
54:27que sí se usa un montón, pero no es un
54:28input. Sí.
54:31No es un input, pero se usa es el típico
54:33cajón de comentario. Sí,
54:38fíjense.
54:41Se llama
54:44text area.
54:48El text area es básicamente un cajón de
54:51un cajón de comentarios.
54:55Vale, que no me sale. Ahí está. Ven, se
54:58puede expandir esto. Usualmente esta
54:59funcionaría se la quitamos porque queda
55:01horrible y le podemos poner el tamaño
55:02que querramos. Por ejemplo, podemos
55:04agarrar y ponerle por acá, sí, calls, o
55:10sea, 10
55:1220,
55:14por ejemplo, y rows, ¿no? Filas 10 y
55:18algo así.
55:20Bien, supóng eh entonces este tipo este
55:24típico cajón de comentario donde
55:27nosotros ponemos el producto
55:29está muy bueno.
55:32Sí, excelente
55:35relación, calidad precio.
55:38Como mercado libre me pide que llene con
55:44hasta
55:46500 caracteres.
55:48Voy a dejar
55:51una receta defer,
55:58así que si alguno quiere, ahí está. Sí,
56:02manteca, azúcar,
56:05bien. Pero bueno, ese típico cajón de
56:07comentarios que va a estar en todos los
56:09en todos los formularios.
56:11Eh, y en más esto es más o menos la
56:15generalidad de los formularios. Sí. Un
56:18truquito que solemos hacer para que el
56:20el elemento de envío sí no quede como
56:24este mezclado entre todos los inputs que
56:26no se entiende nada. Les recomiendo
56:28personalmente usar un botón común de
56:31esta manera que diga enviar y le pasan
56:34el type submit al botón.
56:37Les aviso que el type submit es muy
56:39importante porque es lo que nos permite
56:41después hacer que el formulario detecte
56:44cuando el elemento de envío fue
56:46cliqueado. Y cuando detecta que fue
56:48cliqueado, toma toda la data y la
56:51despacha. Si no hay elemento de tipo
56:54envío, el formulario no entiende cuál es
56:57el elemento que desencadena
56:59el envío de la información. Por lo
57:01tanto, siempre lo debe tener. Ya más
57:03adelante lo vamos a ver porque es super
57:05importante. Y esto es porque el
57:07formulario tiene lleva un atributo
57:09especial que es donde se coloca una
57:11función de JavaScript que se llama on
57:14submitil. ¿Sí? Este atributo lo que
57:16espera es una función de programación.
57:18Nosotros normalmente la llamamos manejar
57:21envío. Ese es el nombre que solemos
57:23colocar. Y cuando se ejecuta esta
57:25función, la información se despacha al
57:28objetivo elegido. ¿Sí? ¿Y por qué dice
57:31onit? Bueno, cuando e envíes, ¿sí? Sobre
57:36envío, cuando se cliquee el elemento de
57:38envío, ejecuta esta función y tiene que
57:41haber un elemento de envío para que esto
57:43para que esto desencadene y es este
57:47el de tipo envío. Lo tiene que detectar.
57:50¿Sí? Entonces ahí se activa manejar
57:52envío. Esto lo vamos a ver más adelante,
57:54pero para que sepan porque es importante
57:56que ese elemento esté siempre. Bien, y
57:59ahí el punto de los formularios. Bien,
58:02dicho esto, vamos a comentar un segundo
58:05el formulario y vamos rápido al último
58:07tema de hoy, que es los elementos de
58:09media. Esta es la parte que más les va a
58:10gustar. Básicamente queremos saber,
58:13vamos a ponerlo acá como un comentario.
58:16Sí.
58:22¿Cómo
58:25coloco videos y audios
58:30entre otras cosas? Sí.
58:34Bueno, para colocar un audio usamos un
58:38elemento específicamente que se llama
58:40audio. ¿Sí? Y noten que lleva un src
58:43igual que las imágenes. Por lo tanto,
58:46solo tenemos que enlazar el audio en
58:47cuestión. Por lo tanto, punto barra
58:51salimos, tenemos que salir de la carpeta
58:53donde está index, así que punto barra,
58:55vamos a assets, vamos a audios y vamos a
58:59esta que se llama Jorg MP3. Fíjense que
59:02aparece esta típica cosa que ustedes a
59:04veces ven cuando hay un audio o un video
59:06en anime FLB, ¿sí? para los otacus que
59:10estén en que estén ahí en acá en el
59:13aula, pero no tenemos pero no tenemos
59:15controles para el audio, ¿no? ¿Cómo le
59:18doy play al audio y eso? Ven, acá
59:20solamente puedo como pasar de canción,
59:23pero no tengo para play. Eso es porque
59:25estos elementos utilizan un atributo
59:27especial llamado controls. Sí, cuando lo
59:30cliquean, automáticamente aparecen los
59:32controles. Sin eso no hay controles.
59:34Bien, déjame ver si tengo puesto el
59:36audio de la computadora.
59:46Sí. Entonces, lo ponemos
59:48cocinando
59:49por 500 pesos. Arrancamos con una
59:51calabaza, la cual vamos a cortar por la
59:53mitad, le sacamos la semilla hacia una
59:54mitad, la pelamos y la cortamos en
59:56cubitos.
59:57Bueno, como se darán cuenta, cocinando
59:59por 500 pesos. ¿Saben cuando yo empecé a
1:00:01usar este audio? No se imaginarán
1:00:05el tiempo que debe tener, ¿no? Cocinando
1:00:07por 500.
1:00:09Bien, ahora, ¿qué pasa si quiero colocar
1:00:11un video? Si colocar un video, la
1:00:13estrategia es similar. Vamos al elemento
1:00:15vídeo. Buscamos el video
1:00:21y fíjense que aparece, pero aparece como
1:00:23una imagen. ¿Lo ven? No puedo darle play
1:00:26ni nada. Otra vez no tiene controles. Le
1:00:28damos ahí control y miren. Tarán
1:00:32cocinando
1:00:33por 500 pes. Arrancamos con una
1:00:35calabaza, la cual vamos a cortar por la
1:00:37mitad. Le sacamos la semilla hacia una
1:00:39mitad, la pelamos y la cortamos en
1:00:40cubitos. La otra vacía entera.
1:00:42Bueno, cuestión. Además de los controles
1:00:45es posible agregar algunos detalles
1:00:47extras. Uno, el el video puede arrancar
1:00:51muteado si le colocan el atributo
1:00:54s.
1:00:58De repente son mudos. Ahora también
1:01:01pueden hacer que el video arranque el
1:01:03autoplay. Si le colocan el atributo
1:01:05autoplayando
1:01:08por 500 pesos. Arrancamos con una
1:01:10le recargo y ya no arranca. Recargo y ya
1:01:14no arranca. ¿Por qué no arranca si está
1:01:16en Autoplay? Resulta que ya a finales de
1:01:20los 90 todos los navegadores, tanto
1:01:22Chrome como Firefox, etcétera, bloquean
1:01:25el autoplay de las etiquetas de vídeo
1:01:28por y también de las de audio, pues
1:01:30también el audio se puede poner
1:01:31autoplay. ¿Por qué los bloquean? Porque
1:01:34lo usaban para hacer spam. Entonces,
1:01:36siempre que entrabas a un sitio, no sé
1:01:38si se acuerdan los que sean más jugatos
1:01:39como yo y hayan usado internet en los
1:01:4290,
1:01:44que cada vez que entraran a un sitio,
1:01:46pumba, música de una, pumba, sonido de
1:01:49cosas, pumba, gemidos, esa más de ahora.
1:01:53Entonces siempre había algo que de
1:01:54repente, pum, te explotaba el sonido en
1:01:57la cabeza y decías, "¿Por qué no tenía
1:01:59los parlantes puestos?"
1:02:01Y claro, en algún momento, cuando todos
1:02:02los navegadores se pusieron de acuerdo
1:02:04en ciertas normas, bloquearon el
1:02:07autoplay de los videos a menos que lo
1:02:10pongas también muteado. Entonces, en el
1:02:12momento en el que combinas el Autoplay
1:02:14con el Mut, ahí arranca, pero muteado.
1:02:17Entonces, miren, recargo y arranca.
1:02:19Recargo y arranca. Y de esta manera
1:02:22muchos sitios webs utilizan en lugar de
1:02:24una imagen como banner, ¿no?, en la
1:02:26sección home utilizan simplemente un
1:02:29video de fondo que apenas la página
1:02:31arranca empieza a correr el video en
1:02:32muteado.
1:02:34Habrán visto muchos sitios que arrancan
1:02:35con un video, ¿no? Eh, muteado en en la
1:02:39en la sección principal. Y eso es porque
1:02:42porque ustedes se habrán preguntado,
1:02:43¿por qué nunca tienen sonido? Por eso,
1:02:45porque no pueden tener sonido. Igual yo
1:02:47conozco un truco para poder meterlo con
1:02:49sonido, pero este no por lo menos por
1:02:53las vías comunes que es el uso de la
1:02:55etiqueta vídeo. Sí, la otra es más como
1:02:57una un chanchullín, pero eh igualmente
1:03:01está bastante controlado por por los
1:03:04navegadores y medio como que este tarde
1:03:07o temprano te lo van a te lo van a
1:03:09bloquear, pero se puede por ahí. Otra
1:03:12cosa que pueden hacer es colocar un
1:03:13atributo, y este es el último que les
1:03:14muestro, que se llama loop. El atributo
1:03:17loop básicamente lo que hace es que
1:03:18cuando termina arranca otra vez. Miren,
1:03:24¿ven? Entonces esto hace que si ponen un
1:03:26video como fondo de una sección se
1:03:29repita una y otra vez, nunca se traba.
1:03:32Entonces parece como un gif, ¿no?
1:03:35Así que bueno, esto está muy muy bueno.
1:03:39Ahora, ¿qué sucede? Resulta que nosotros
1:03:42en general no utilizamos ni de
1:03:45casualidad videos descargados y audios
1:03:48descargados en nuestro proyecto porque
1:03:52el peso de estos elementos es bastante
1:03:55bastante elevado. Sí, esta este es un
1:03:58videito de un minuto, ¿no? Pero
1:04:00imagínense que ustedes quieren poner un
1:04:01documental, quieren poner, no sé, el
1:04:03capítulo de la novela esa mexicana que
1:04:06miran los domingos cuando están
1:04:07aburridos, ¿no? como hace Shimbo.
1:04:10Entonces, la cuestión es que tenemos que
1:04:13evitar por todos los medios dejar los
1:04:15elementos de media en la carpeta.
1:04:16Entonces, ¿cuál es la estrategia? Bueno,
1:04:18similar a lo que les recomendé con las
1:04:20imágenes, agarramos todos los vídeos y
1:04:22los audios, los subimos a Dropbox
1:04:25y los traemos desde Dropbox para que le
1:04:27pesen a Dropbox y no a nosotros. O la
1:04:30otra forma es enlazarlos desde YouTube o
1:04:34enlazarlos desde Spotify. Bien, y ese es
1:04:37nuestro siguiente objetivo. Si yo quiero
1:04:41quiero traerme ahora un video de
1:04:43YouTube, por ejemplo,
1:04:47sí, este,
1:04:50vamos a buscar
1:04:52eh,
1:04:54a ver
1:04:58esta musiquita.
1:05:04A ver, está
1:05:10bien. Yo quiero agregar a mi sitio esta
1:05:12música.
1:05:14Bien.
1:05:17Okay. Entonces, vamos a tener pausa.
1:05:20Y ahora lo que quiero hacer es, bueno,
1:05:21¿cómo lo enlazo a mi siti? Bueno, pues
1:05:24voy a utilizar un elemento nuevo y este
1:05:26lo van a amar porque sirve para todos
1:05:28recontra multiuso que se llama iframe.
1:05:31Sí, el iframe básicamente es un también
1:05:34espera un enlace, pero puede poner un
1:05:36enlace de diferentes fuentes. Puede ser
1:05:39un sitio web, puede ser una imagen,
1:05:41puede ser un video, puede ser un audio,
1:05:43puede ser un mapa de Google, puede ser
1:05:44un documento, tipo un PDF, lo que
1:05:47quieran, porque lo que hace Liframe es
1:05:49que te crea un fragmento,
1:05:51¿sí? Suponete de tanto altura por tanto
1:05:54ancho, donde se ve ahí lo que vos
1:05:56enlazaste como una caja. Esa caja la
1:05:59podés ampliar obviamente en alto y en
1:06:01ancho porque le podés agregar al iframe
1:06:03un wid, ¿no? Un ancho y le podés también
1:06:07agregar un high, un alto y podes
1:06:10agrandar o achegar la caja. Ahora lo
1:06:12vamos a ver. Entonces, ¿qué pasa si yo
1:06:14quiero, por ejemplo, el video de
1:06:17YouTube? Bueno, lo primero que se me
1:06:18ocurriría es, bueno, voy acá, agarro el
1:06:21video,
1:06:22¿no? Lo pego acá en el iframe y le doy
1:06:26guardar. Y cuando vuelvo a mi sitio,
1:06:28¿qué me encuentro? Me encuentro esto.
1:06:31YouTube refus to connect. ¿Por qué
1:06:35rechaza la conexión? Porque esa ese
1:06:38mecanismo por el cual yo me estoy
1:06:40intentando enlazar solamente me
1:06:42beneficiaría a mí, me daría a mí
1:06:45popularidad y retención, pero YouTube no
1:06:47le retribuiría absolutamente nada.
1:06:50Entonces, YouTube se ataja de esas cosas
1:06:52y entonces tenemos que usar una
1:06:54mecanismo que sea obviamente bueno para
1:06:57mí y bueno para ellos. Y ese mecanismo
1:07:00es el mecanismo de compartir. Entonces
1:07:03ustedes vuelven al video YouTube y lo
1:07:05que van a hacer es encontrar por acá
1:07:08para que carga. Bajamos un poquito, hay
1:07:11un botoncito que dice compartir.
1:07:14Cliquean en el botoncito de compartir y
1:07:16en lugar de compartir a través de
1:07:18WhatsApp o Telegram o algo por el
1:07:19estilo, van a ver que tienen un
1:07:21botoncito. Espen que cargan y se cargan
1:07:23los iconos.
1:07:34Está medio lentazo. Es este el que dice
1:07:36insertar. Ven que de hecho parece que
1:07:38tiene como código HTML.
1:07:40Entonces cliquen en insertar y qué se
1:07:41van a encontrar. Miren,
1:07:44un iframe, pero un iframe que está
1:07:46configurado por los de YouTube con todas
1:07:49las las partes de de eh de reglas y
1:07:54demás que ellos ponen para que vos
1:07:56puedas consumir el contenido. Vamos al
1:07:58botón de copiar. Sí, volvemos y
1:08:01reemplazamos todo el iframe entero por
1:08:03el iframe de YouTube. Fíjense que el
1:08:05frame de YouTube incluso tiene, creo,
1:08:07por acá los altos y los anchos que un
1:08:09video debería tener acá. ¿Ven? el alto y
1:08:12el ancho típico de un video YouTube ya
1:08:13está preconfigurado, etcétera, etcétera.
1:08:16Guardamos, volvemos a nuestro documento
1:08:20y miren,
1:08:22ahí tenemos el video de YouTube.
1:08:34Sí, también podemos hacer lo mismo,
1:08:36obviamente. ¿Con qué? con
1:08:40Spotify. Entonces vamos para acá, vamos
1:08:43acá a Spotify, ¿sí? Uki.
1:08:48Y vamos a buscar, por ejemplo,
1:09:00World
1:09:02Songs.
1:09:09Bueno, pensé me iba a poner las de LOL,
1:09:10pero no se me poniendo.
1:09:18A ver, ahí
1:09:22acá está bien.
1:09:27Y vamos acá ahora a estos tres puntitos.
1:09:31Sí,
1:09:33vamos acá a donde dice compartir y donde
1:09:35dice insertar playlist. Sí, pinchamos
1:09:39ahí.
1:09:41Pueden poner mostrar código si quieren.
1:09:43Van a ver que es un iframe, lo copian,
1:09:46se vuelven de vuelta para acá y lo pegan
1:09:49debajo del otro iframe
1:09:52hasta el caso est
1:10:04ahí.
1:10:14We are long [canto]
1:10:16[música]
1:10:19now.
1:10:21We are glorious
1:10:25[música] on this.
1:10:32[música]
1:10:36Bueno, ahí ya dejé manija más de uno.
1:10:37Solamente terminan acá se van a ir a
1:10:39tirarse un un lolcito ahí. Bien. Fíjense
1:10:42que puedo traer listas de Spotify, puedo
1:10:44traer videos de YouTube, también puedo
1:10:46traer documentos. De hecho, yo tengo un
1:10:48documento guardado en una carpetita.
1:10:50Vamos a crear otro iframe y vamos a
1:10:52traer por acá desde la desde assets
1:10:55documents y vamos a traer un PDF. En
1:10:57este caso es una partitura de un área de
1:11:00ópera alemana que se llama This
1:11:02Buildingspet Subvion. Es una área de la
1:11:05flauta mágica de Mozar alemana. No, no,
1:11:09no me denuela. Bien. Y fíjense que
1:11:15ahora me sale la duda de dónde salen los
1:11:16capítulos, por ejemplo, en Anime FLB.
1:11:19Eh, no tengo ni idea, pero me pero tiene
1:11:23como pinta de que los chavones los
1:11:24descargan, ¿eh? y los y lo suben como
1:11:27como elementos de vídeo. A mí me hace
1:11:29sensación por la estructura que tiene el
1:11:31coso, no parece una estructura de
1:11:33YouTube, parece más como un video
1:11:34descargado y subido manualmente.
1:11:39Igual como que me daría un poco de cosa
1:11:41que lo hicieran honestamente así. En una
1:11:42época lo hacían así, ojo, eh, pero lo
1:11:44deben haber modificado en un formato más
1:11:47moderno. Irán como colocando subiendo
1:11:50como videos a Dropbox o algo por el
1:11:51estilo, los irán enlazando, pero de
1:11:53manera dinámica, cosa que se haga
1:11:54automático. Cada vez que un video llega
1:11:56a Dropbox, automáticamente se enlaza y
1:11:57así deben tener algún modelo automático
1:12:02porque eh los tipos de anime FLB suben
1:12:05suben un capítulo de, no sé, de 95
1:12:08animes distintos por día. Es una wasada.
1:12:11Igual que creo que los dieron de baja de
1:12:13vuelta porque lo volvieron a brochar por
1:12:14copyright, pero eh pero suben un montón.
1:12:18O sea, fíjate que tiene mucho más
1:12:20tráfico de de contenido que Cruchirol o
1:12:23que cualquiera de las plataformas de de
1:12:25streaming.
1:12:27Todas las semanas
1:12:29hay una un capítulo nuevo de alguna
1:12:32temporada, de algún anime.
1:12:35Así que Ah, por cierto, ¿alguno vio el
1:12:38primer capítulo del anime del anime este
1:12:40argentino?
1:12:43¿Lo llegaron a ver?
1:12:46Está bueno, ¿eh?
1:12:48Yo la verdad que no dos pesos por el
1:12:49animo, pero está bueno. No lo vieron.
1:12:53Encima está está en idioma argentino. O
1:12:55sea, lo hablan. Hay uno hay un hay una
1:12:57parte del anime en el que chaván agarra
1:12:59una zapatillas y dice, "Oh, está en
1:13:01flama." Y en un momento estaban jugando
1:13:03la pelota, eh, como los protagonistas
1:13:06contra unos chavoncitos y dice y salta y
1:13:08le dice, "Dale, termotanque de
1:13:11raviolle." Le dice, "me me maté la risa,
1:13:13te lo juro. Qué buenísimo,
1:13:16¿eh? Claro, uno esperaría tipo, no sé
1:13:19que coran sponsa, no te quesim y el tipo
1:13:22dale terremotanque de raviol e
1:13:28se llama así se llama electro andes
1:13:32y todo ocurre cerca de la cordillera de
1:13:34los Andes en una especie de época tipo
1:13:36cyberpunk donde están todos vestidos
1:13:39como de gauchos pero andan en unas motos
1:13:42todas luminosas con zapatillas luminosas
1:13:45Este nada es reflero y encima te van a
1:13:48encantar porque hay una cena de los
1:13:50chavones vienen en las motos luminosas y
1:13:52de repente sacan el celular y es un que
1:13:5311.
1:13:56Es buenísimo.
1:13:58Ah, y si lo miran bien, hay una
1:13:59referencia al gordo mortero,
1:14:02al de al de al del partido de izquierda.
1:14:04Vieron que tiró con el mortero en el
1:14:06gobierno de Macri.
1:14:08Hay una referencia en una parte del
1:14:10capítulo.
1:14:11Mírenlo bien, porque si no, porque son
1:14:13aparece 2 segundos y después se lo
1:14:14pierden.
1:14:19Está muy bueno. La verdad tengo ganas de
1:14:21ver el segundo capítulo, pero todavía no
1:14:23salió, así que están a tiempo de ponerse
1:14:25al día. Bueno, eh, entonces, bueno, acá
1:14:29tienen la partitura, pueden agrandarlo
1:14:31porque está muy chiquito. Sí, pónganle
1:14:33por acá Wid, por ejemplo, no sé, ancho
1:14:36500.
1:14:38y pónganle una altura de 700 a prox y
1:14:42miren que queda bastante chicharen.
1:14:45¿Ven? Y miren que viene ya con todas las
1:14:47con todas las configuraciones de los
1:14:49PDF. ¿Ven? descarga,
1:14:51pasar página, aumentar Zoom, ¿ven? Tiene
1:14:54todo lo que un PDF ya tiene por defecto.
1:14:56Esta es la estructura que utilizan las
1:14:57páginas que, por ejemplo, ponen libros
1:14:59para leer directamente en la web, ¿no?
1:15:01Las colocan como PDFs puntualmente.
1:15:04Bien, bien. Y lo último que les quiero
1:15:06mostrar y ya los dejo ir con CF son los
1:15:08mapas de Google. Supan que quieren ir a
1:15:10algún lugar. Por ejemplo, yo quiero ir a
1:15:12este
1:15:14em Capitán Barat, bien ir a comprar un
1:15:18manga. Entonces agarro y digo, bueno,
1:15:21¿cómo hago para para colocar el mapa
1:15:23para ir a comprar el manga? Bueno, pongo
1:15:25acá, voy acá mapa en la parte acá de
1:15:28Google, pincho en el mapita.
1:15:31Cuando se me va a ver el mapa de Google,
1:15:33van a ver que tiene acá la opción de
1:15:35compartir, ¿no? Le dan a compartir y
1:15:38fíjense que por acá tienen insertar un
1:15:40mapa. Pinchan ahí y fíjense, ahí está el
1:15:44iframe, así que lo copian
1:15:47y se vuelven de vuelta para el
1:15:49documento. Lo pegamos debajo de la
1:15:51partitura.
1:15:54Sí, ahí está.
1:15:56Y volvemos a mirar de vuelta el
1:15:57documento
1:16:01y acá abajo
1:16:04tienen el mapa de Google. Sí, el mapa es
1:16:06interactivo en el sentido de que ustedes
1:16:08lo pueden mover y toda la pelota, pero
1:16:10es todo lo que pueden hacer. Sí, no
1:16:12tiene más magia que abrirlo, pasarlo al
1:16:15modo este del otro mapa o agrandarlo. Es
1:16:18todo lo que tienen. Sí, no pueden, por
1:16:21ejemplo, sin interactuar colocando otros
1:16:24datos y cambiando el lugar. Lo que hace
1:16:26es centralizar al mapa exactamente en el
1:16:29lugar de donde vos le pasaste el enlace,
1:16:31en este caso la comiquería, pero no
1:16:33puedes agarrar y decirle, "Mostrame
1:16:35dónde está, no sé, el teatro Colón." No,
1:16:37porque solo puede hacer eso. Y ustedes
1:16:40me dirán, "Profe, ¿puedo poner un mapa
1:16:41que sí sea completamente interactivo y
1:16:42lo demás?" Sí, pero no a través de HTML,
1:16:45se hace a través de JavaScript y tenés
1:16:46que pedir un permiso con una K especial
1:16:49a Google. Sí, tenés que entrar a la
1:16:51página de Google API, pedir una pedir lo
1:16:55que se llama una API Key, te la dan, te
1:16:58la dan por tanto tiempo y vos lo vos
1:17:01tenés un acceso a poder poner un mapa
1:17:03interactivo completo en tu sitio. Pero
1:17:06si después se te vence esa aquí,
1:17:08tendrías que pedir una nueva. Por lo
1:17:09tanto, tenés que pedirla con cierta
1:17:11regularidad para que tu sitio no se
1:17:12quede sin mapa porque te la dan por
1:17:14tiempo limitado, digamos. Sí. En cambio,
1:17:17este lo pueden tener para siempre si
1:17:19quieren. Pasa que es un poco limitado en
1:17:20sus posibilidades. Bien, pero está bueno
1:17:23y se agrega agrega algo interesante que
1:17:26se puede poner en la sección de
1:17:27contactos o eh un poquito antes del
1:17:29footer, por ejemplo, como en este sitio,
1:17:34en el liceo británico. Fíjense que el
1:17:36liceo británico en el fondo del sitio,
1:17:39¿sí? Tienen por acá, ¿ves? Los mapitas
1:17:42de Google insertados.
1:17:44Estos son, estos ver si son imágenes.
1:17:47Ah, no, ah, no, no es un mapa
1:17:48interactivo. ¿Ven? Esto básicamente es
1:17:51un iframe, ¿ven? Y pusieron ahí para
1:17:55mostrar dónde está cada una de las
1:17:56sucursales, ¿ven?
1:17:59Así que bueno, ahí tienen un poquito de
1:18:01lo que de lo que vimos de HTML. ¿Qué
1:18:05queda? Entonces, les dejo una clase, una
1:18:08clase complementaria asincrónica sobre
1:18:11accesibilidad HTML. eh donde se explican
1:18:15muchos detalles relativos a eh cómo
1:18:18adaptar un sitio para personas con
1:18:20discapacidad cognitiva, auditiva,
1:18:22visual, eh motriz, etcétera. Sí, buenas
1:18:26prácticas en general para poder guiar
1:18:29bien al usuario a través de tu sitio y
1:18:32como hacer que lo recorra bien. Bien, y
1:18:35ya la clase que viene arrancamos un
1:18:36poquito con CC, ¿les parece bien?
1:18:39Cualquier duda que tengan de la
1:18:40actividad
1:18:41directamente déjenmela en WhatsApp que
1:18:43yo lo miro más seguido, que el chat
1:18:46general de del campus. Déjenmelo
1:18:49directamente ahí y les grabo un audio,
1:18:51les contesto a mí mismo de las dudas que
1:18:53tengan. Dale, hacemos así.
1:19:01Bueno, gente bonita, un abrazo grande,
1:19:03que tengan una buena semana, un buen fin
1:19:05de semana. Si alguno para acá juega LOL
1:19:06y tiene ganas de jugar unas normals, me
1:19:08me avisa también. Así que bueno, buen
1:19:12fin de semana a todos.
1:19:14Buen finte y que la fuerza com
1:19:17abrázate.
1:19:19Mando mando ID. Ahí te vas.
1:19:26Eh,
1:19:28para que ni me lo ni yo me lo acuerdo el
1:19:31el coso, el tal.
1:19:55Ahí está. Así que si alguno me quiere
1:19:57agregar para jugar normals, tiramos ahí
1:20:00un poco de de fachita.
1:20:05Yo me voy a conectar un rato, así que si
1:20:07alguno quiere conectarse, yo estoy.
1:20:09Abrazos grandes. Buen fin de semana a
1:20:11todos.
1:20:12Ciao. Ciao.

About this transcript

This page contains the full transcript of Global HTML 3 by Liricoteca, generated from the public captions YouTube serves with the video. The transcript has 11,799 words across 1,847 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.