YT YouTube2Text

YouTube2Text → Transcripts → Global HTML 2

Global HTML 2 — Transcript

by Liricoteca · 18,080 words · 2,765 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:02Bueno, entonces hasta la clase pasada
0:04habíamos visto un poquitito la
0:06introducción a HTML y eh habíamos visto
0:09un poco cómo era la estructura. Yo creo
0:11más o menos habrán jugado un poco con
0:12esto. Ya con lo que vamos a ver hoy se
0:13viene la primera tarea, así que yo ya
0:15espero que ahí no ya pongan manos manos
0:18a la hora. Primero que nada les voy les
0:21voy anticipando que cero a en el primer
0:23la primera tarea. Cero. Sí. La idea es
0:26que absorban los conocimientos que vamos
0:30adquiriendo. Después ya van a tener
0:32tiempo para algunas partes hacerlas con
0:35decir, "Esto ya lo hice tres, cuatro
0:37veces, ya no tengo en hacerlo de vuelta,
0:38no pasa nada." Pero primera tarea, nada,
0:41eh, nada, solo para investigar.
0:43Investigar si pueden, investigar o
0:45preguntar, "Che, ¿por qué esto es así?"
0:46Y si sacarse dudas, usarlo para
0:48estudiar, si para generar código,
0:51primera primera tarea, nada, cero. Yo ya
0:53les voy a diciendo en cada tarea cuánto
0:55pueden hacer y qué pueden hacer con i
0:56hasta ese punto. Sí, porque la van a
0:58tener que aprender a usar. Por lo tanto,
1:00obviamente no los voy a tener toda la
1:01diplomatura sin que puedan tocar la
1:02gente porque si no es como que van a
1:05salir como picadores de código y en 2026
1:07ninguna empresa quiere un picador de
1:09código porque ya no existen más. Por
1:11decir una manera hace dos años ya que no
1:12existen más. Entonces, vamos a ir
1:15despacito. Bien, entonces habíamos dicho
1:18que teníamos por acá secciones y hemos
1:21definido títulos, la importancia
1:22jerárquica que tenían los motores de
1:25búsqueda en la lectura de estos
1:26elementos y cómo priorizaban,
1:29dependiendo de las palabras clave, dónde
1:31estaban ubicadas, en un título
1:32importante en un párrafo. Y por ende, al
1:35usuario le voy a presentar aquellos
1:37sitios que no encajen mejor con lo que
1:40está buscando y con sus preferencias.
1:43Ahora nosotros tenemos la representación
1:45de una única página en este momento que
1:48es esta página a la que le pusimos
1:49harina libre. Nosotros vamos a levantar
1:51de vuelta esto, pero les voy a mostrar
1:53un truco. ¿Se acuerdan que en la clase
1:54pasada habíamos hecho botón derecho,
1:56mostrar en el explorador de Windows? Ahí
1:59encontramos el archivito
2:01de index html. Le dimos doble clic y
2:04levantó en el navegador.
2:06Pero nosotros cada vez que hacemos un
2:08cambio tenemos que apretar F5 o el botón
2:12de refrescar página para que se vean los
2:14cambios. Es un una fiaca bárbara hacer
2:17eso. Entonces, ¿qué es lo que vamos a
2:19hacer? Vamos a instalar una extensión
2:21que nos permite no levantar el la página
2:24como local en la computadora, sino que
2:26la levante como en un servidor en
2:28internet, lo cual va a ser que cada vez
2:30que hagamos un cambio, esto se refresca
2:32automáticamente. Es decir, nosotros
2:33hacemos un cambio, ¿no? Supongan que acá
2:36pongo párrafo,
2:39sí,
2:42PP, guardo el documento. ¿Cómo se guarda
2:44el documento? Archivo, guardar
2:48o control S. Yo uso control S. Bien, en
2:51el [resoplido] momento en el que
2:52guardan, si tienen levantada la página a
2:56través de la extensión que les voy a
2:57mostrar ahora, automáticamente van a ver
2:59que se va a realizar el cambio. Si no,
3:01tienen que apretar el botón de refrescar
3:03página para que se vea el cambio. Y la
3:05diferencia, ¿cuál es? Como le dije, una
3:07versión está levantada ya directamente
3:09en un servidor en internet y la otra
3:10está levantada en local. Pero hay un
3:12problema, la versión que está levantada
3:14en internet, que es la que vamos a ver
3:15ahora, si se cae internet no funciona.
3:18Mientras que la la versión local que es
3:20entrando por el explorador de archivos,
3:22esa sí funciona sin internet porque
3:24están levantando una una vista al local,
3:26¿sí?, de la computadora de ustedes.
3:28Importante ese detalle, ¿sí? Así que
3:30sepan que si se les cae internet pueden
3:32seguir trabajando, solamente entren por
3:34el otro lado, entren por la versión
3:35local. Sí,
3:38la extensión ya eh queda para todos los
3:41proyectos. Sí, porque es una extensión
3:43del editor, no es un no es una
3:44dependencia de un proyecto en
3:45particular. Van a ver que hay una
3:47diferencia importante entre una
3:48extensión, que es lo que vamos a
3:49instalar a través de esta opción de acá,
3:51la de los cubitos, que en una extensión
3:54es como si vos le instalaras un un
3:56plugin o un programa al editor. Por lo
3:59tanto, cualquier proyecto que vos abras
4:01en el editor va a tener las herramientas
4:03instaladas al lado. Sí.
4:06distintos una dependencia. Una
4:07dependencia es como una especie de
4:09librería con con programación que vos
4:13instalá en tu proyecto por medio de un
4:15comando. Es decir, ustedes van a ver más
4:17adelante un programa que vamos a
4:18instalar que se llama Node JS. Node js
4:21es un programa que permite ejecutar el
4:23lenguaje de programación JavaScript en
4:25las terminales, o sea, como si fuese un
4:27lenguaje de programación convencional
4:29como Python y demás. Es decir, es para
4:31que ustedes puedan correr JavaScript del
4:33lado del backend.
4:35Cuando ustedes instalans,
4:37les permite ejecutar un comando llamado
4:39npm install. NPM Install lo que hace
4:42básicamente es decirle, bueno, quiero
4:45instalar tal herramienta en mi proyecto.
4:48Por ejemplo, quiero instalar una
4:49librería de CSS. Entonces le ponen npm
4:52installwin, pum, instalan Tidewin. Ahora
4:55quieren instalar un superset de
4:57JavaScript, npm install Typescript.
5:00instalan directamente eso, pero esa
5:02instalación, esa dependencia se instala
5:04únicamente dentro de la carpeta de ese
5:05proyecto.
5:07Por lo tanto, si ustedes abren en el
5:10visual otro proyecto, no contiene esas
5:12dependencias a menos que las instalen.
5:14Esa es la diferencia, ¿sí? Entre una
5:16dependencia y una extensión. Lo que
5:18vamos a instalar es una extensión.
5:20Entonces, van a instalar dos extensiones
5:21en este caso que vamos a usar hoy. La
5:24primera que van a instalar van a
5:25instalar tres, vamos a usar tres. La
5:28primera que vamos a instalar es una
5:29extensión que se llama Live Server. Sí,
5:33yo la tengo instalada, pero a ustedes no
5:35les va a aparecer, les va a aparecer el
5:36botón de instalar. Sí, es esta Live
5:39Server de Reitwick Day. Sí, le van a
5:43instalar. Esta es la que va a habilitar
5:44levantar un servidor en vivo. Sí, a
5:47través de internet. Ahora lo vamos a
5:49poner en acción. Live server de Rewek
5:52Daily. Sí.
5:55Bien. La segunda extensión que van a
5:56instalar es una extensión llamada Mitril
6:00Emet, así con doble M. Sí, de Fallen
6:04Max.
6:06Mitil em. Esta extensión permite usar
6:09atajos especiales para escribir HTML en
6:11las chapas. Ya lo van a ver. Ahora está
6:14bueno para jugar. más adelante no la van
6:16a usar nunca más porque van a usar a la
6:17IA para que les haga el HTML, pero en
6:19las tareas van a amar el uso de Mystery
6:22Lemet porque van a escribir en las
6:24chapas si le agarran la mano. Sí, si
6:26siempre la voy a recomendar porque van a
6:29haber veces donde ustedes van a hacer
6:30alguna algún proyecto de práctica para
6:33simplemente practicar HTML, practicar
6:35CSS y estos este tipo de extensiones de
6:37comandos de atajo son buenísimas, ya la
6:40van a ver. Y la tercera que les
6:42recomiendo es una que se llama Pritier.
6:45Sí, para prier. Ahí está. Sí, pretier es
6:49una extensión. Es está pretier code
6:51format. Es una extensión que lo que hace
6:54es permite formatear el documento. ¿Qué
6:56significa? Que si ya mí se me el
6:57documento se me hace así,
6:59¿sí? Pon. Yo aprieto un un conjunto de
7:04teclas, o sea, un comando, miren, un
7:07atajo más bien,
7:10se acomoda según las convenciones del
7:11lenguaje. Y eso mismo pasa con cualquier
7:14lenguaje, porque prettier funciona con
7:16CSS, con HTML, con JavaScript y con más,
7:20creo. Ver, JavaScript, TyScript, Flow,
7:23JSX, que es de React, Jason, CSS, Super
7:27CSS, que esto sería SAS, eh, les que es
7:30algo parecido a SAS,
7:32eh, HTML y otros frameworks de
7:34JavaScript como View, Angular, Graph
7:37Cool. Bueno, hay un montón de de cosas
7:39que soporta preter. Ahora, ¿funciona
7:42para Python, no, porque solamente
7:44funciona para todo el ecosistema de
7:45JavaScript? Sí, todo lo que es
7:47JavaScript, Typescript, View, Angular,
7:50React, todo el ecosistema JavaScript. Y
7:52bueno, HT1S, pues básicamente están
7:54ligados a a JavaScript dentro de como
7:57que básicamente no eh no son eh
8:02lenguajes que se usan con otros
8:03lenguajes, que ya les mencioné que si
8:05ustedes quieren hacer un un sitio web
8:08con Python, eh en el fondo se tiene que
8:10traducir JavaScript. Por lo tanto, lo
8:12que está interactuando con HTML y CSS en
8:14el fondo JavaScript, así que va el caso.
8:17Así que es muy práctico el comando para
8:19formatear. Sí, lo debería debería estar
8:21en la documentación. Igual yo se los
8:22digo después de estar por acá. Es este
8:26es control shift. Yo no lo hago con P,
8:30yo lo hago con F. Sí, con perdón SMD,
8:33sino se lo dejo acá escrito acá abajo.
8:36El comando sería
8:41control
8:43o como diría Homero,
8:45shift F. Sí, control shift F. Cuando
8:49quieran apretar este comando por primera
8:51vez, una vez que lo tienen instalado,
8:53van a ver que se les va a abrir por un
8:55momento la paleta de comandos, que es
8:56esta. Vem,
8:58y le va a aparecer acá como eh las
9:00opciones que pueden elegir para para
9:04como formateador y ustedes van a elegir
9:06la que diga prettier y una vez que la
9:08seleccionaron, ya automáticamente les
9:09queda configurado y de ahí en adelante
9:12funciona. Bien, esas son las tres que
9:14por el momento me interesaría que
9:15tengan. Más adelante les voy a tirar
9:17otras. Si quieren también pueden
9:20instalar la extensión que pone los
9:21iconitos en neón si les gusta como los
9:23tengo yo, que está en Chiche. Si les
9:25gusta la extensión de los iconitos en
9:26neón, esa extensión es, no me acuerdo el
9:30nombre.
9:32E
9:34ya se las paso. Esta creo que es esta.
9:38Cappucin perfect icons.
9:44Si se instalan esa extensión, todos los
9:45iconos de las carpetas y archivos quedan
9:48en neón. Si les gusta esto, ya más
9:51adelante van a agarrar a la IA, le van a
9:53pegar tipo esta extensión a la IA y le
9:56van a decir, "Dame 15 extensiones para
9:58iconos eh
10:00como esta, por ejemplo, y les va a dar
10:03como 15 extensiones distintas." Si
10:04ustedes van instalando y las van
10:05probando y alguna les va a gustar más
10:07que otra. Yo ya creo que esta es la la
10:10extensión número
10:13ocho o nueve que instalo para para
10:16carpetitas porque voy probándolas. Esta
10:18es la que me gusta ahora, ¿no? Pero ya
10:20pasé por otras siete antes que también
10:21me gustaban. Este modelito está muy
10:23bonito.
10:25Y lo otro que lo otro, si quieren
10:27también embellecer un poco, fíjense que
10:29yo tengo un estilo de código. Ustedes
10:31capazen en su en su editor las etiquetas
10:34HTML son azules y creo que los
10:37atributos, no sé si son rojos o no me
10:39acuerdo los colores que tienen ustedes.
10:41Pues ya me olvidé. Y ven que acá yo
10:43tengo como rosado con verde y amarillo.
10:45Eso es porque tengo una extensión
10:48de para para eso se llama Drácula theme
10:51official, que es la que lo pone en este
10:52color. Sí, si les gusta este es Drácula
10:55Steam Official. sino una que les
10:57recomiendo si les gusta el modelo de los
10:59iconos de neoncito, un un estilo que va
11:02con estos iconos porque es un código
11:04neón, eh, que también lo usé por un par
11:06de años, se llama así, Synth
11:10Wave 84.
11:12Esta
11:14esta de acá tiene iconos en neón, o sea,
11:16perdón, tiene eh eh código en neón
11:19también. El de JavaScript es
11:20hermosísimo. Eh, entonces este de acá,
11:23si quieren lo tienen por acá, ahora se
11:24los muestro. Fíjense, el código brilla,
11:28¿ven? Algunas partes brillan, otras
11:30otras no tanto, pero el código en sí es
11:32medio como estilo neón. Eh, a ver si lo
11:36se ve en acción, ¿no? Bueno, pruébenlo
11:39si quieren, está muy bonito. Una vez que
11:42le instalan, solamente tienen que
11:44reiniciar el visual y ya se aplica. Si
11:46no, en la parte de acá arriba creo que
11:47es control KT.
11:51Ahí está. Si aprietan control, se los
11:53dejo por acá en el en el HTML, se dejo
11:56acá abajo. Si usted esto es eh voy a
12:00poner acá pritier
12:02y acá abajo también les voy a dejar
12:06si hacen
12:08control + K + T.
12:12Sí, abren eh panel de de eh estilos para
12:19el código.
12:22Sí. Entonces, fíjense que se hacen
12:24control KT. Abren
12:27cachito.
12:29Ahí está. Fíjense, dice Claro, Movistar,
12:32no, mentira. Claro, Light, oscuro, Dark,
12:36Dark Dark Visual Studio. Acá están los
12:38de Dracula. Dracula them, Dracula Thoft.
12:42Fíjense cómo cambia. Miren, pongo el
12:43código ahí. Supongase que elijo el
12:45Dráculas Team Soft,
12:49el otro, el soft. Y miren, me cambia.
12:51Ah, me cambia ahí el color de fondo
12:53también. Eh, bueno, pueden elegir
12:56diferentes modelos. También tiene este
12:57King oscuro, ¿ven? Y ahí van cambiando
13:00como los estilos que tienen. A mí, la
13:02verdad que no me gustan esos.
13:04Está. Y si quieren ver, de hecho, lo voy
13:06a instalar para que lo vean no más, por
13:08si les gusta,
13:09este juego 84.
13:13Hace un montón que no lo uso. Este es
13:15muy bonito.
13:19Cuando lo puse la primera vez me enamoré
13:20de este.
13:22Eh, para 5084
13:25para eh Ah, bueno, esta así se ve en
13:28HTML y ven se ve relindo porque además
13:31miren el color de los de los
13:33comentarios, ¿no? Se ve super bonito y
13:36en JavaScript se ve neón como les mostré
13:38en el otro modelito.
13:40Así que a mí me gustó, me gustó mucho,
13:42mucho Steam 84.
13:44Está muy bonito. También tiene la
13:45versión Dark y hay un montón, de hecho,
13:48584.
13:50Buada, es es precioso para después
13:52quedan ustedes y se quedan con este o
13:54con otro. Pero bueno, hasta ahí que voy
13:57a volver al mío.
13:59Bien, eh, así que bueno, ahí tienen
14:02chichecitos. Bien, entonces, ¿qué es lo
14:04que nosotros queremos hacer? Vamos a
14:05usar el live server para levantar eh lo
14:08que les mencioné. Para eso van a van a
14:10ir a la al archivo de HTML, botón
14:12derecho, y van a ver que les va a
14:14aparecer una nueva opción llamada Open
14:15With Server. Le damos acá, pimba.
14:19Bien, una vez que cliquearon se les va a
14:21abrir un navegador. Esperen que ahora se
14:23abre y se va a levantar ahí el sitio.
14:27Puede que demore un poquito. A mí me
14:29está demorando particularmente porque
14:30tengo el zoom en compartir pantalla y
14:32eso. Si ven que tarda mucho, le dan de
14:34vuelta.
14:37Ahí está. Ahí me abrió. Y fíjense que la
14:39diferencia es que ahora ya no abre desde
14:41el disco C, que sea disco C, user, open
14:45drive, escritorio.
14:47Ahora abre desde un desde eh desde el
14:50servidor 127001 en el puerto 5500. ¿Ven?
14:54Está levantado en internet. Si internet
14:56se cae, se me cae automáticamente la
14:58página y por lo tanto no puedo trabajar.
15:00En esos casos, abranlo de la otra forma,
15:02¿no? Mostrar explorad de archivos, clic,
15:05clic y lo abren de ahí. Bien, como la
15:08otra opción. Muy bien. Entonces, ahí lo
15:10tenemos. Vamos a borrar el PP de acá
15:14abajo.
15:16Este no va. Guardamos y miren cómo se
15:18fue el PP automáticamente cuando guardé.
15:20¿Ven? No tengo que recargar la página,
15:22automáticamente se hace el cambio. Ya.
15:25Bueno, ¿qué tenemos que ver hoy? Hasta
15:27ahora habíamos mencionado, vamos a eh
15:31vamos a conservar este archivo HTML tal
15:33cual está porque lo quiero reutilizar.
15:35Lo voy a copiar. y voy a crear una
15:37carpeta nueva que se va a llamar clase y
15:39baj
15:41html y02. Bien, voy a crear acá dentro.
15:45Ahora voy a hacer algo nuevo. Voy a
15:46crear un archivo que antes no usamos.
15:49Antes pusimos pelado ahí el index html.
15:52Ahora vamos a crear una carpeta llamada
15:53src.
15:55La carpeta src significa source o fuente
15:58y básicamente indica que lo que está
16:00dentro de esa carpeta es lo que se
16:01considera el código fuente. El código
16:04fuente es toda que es toda es todo el
16:07código que requiere el sitio web de la
16:09aplicación para funcionar tanto desde el
16:12HTML como el CSS como el JavaScript.
16:15¿Qué va fuera del src?
16:19Archivos de configuración.
16:22Por ejemplo, cuando ustedes trabajen en
16:23React,
16:25el entorno React requiere de muchos
16:27archivos de configuración. Todos esos no
16:30son parte del código fuente, entonces
16:32siempre quedan por fuera. ¿Qué otra cosa
16:34fuera del código fuente? Por ejemplo, un
16:36archivo que lleve variables con datos
16:39sensibles. Por ejemplo, el enlace a la
16:41base de datos, eh contraseñas secretas,
16:44todo eso va en un archivo que no va en
16:45el código fuente. De hecho, ese archivo
16:48con tas sensibles no se sube GitHub.
16:50cuando ustedes levantan el proyecto
16:52porque estarían exponiendo información
16:54confidencial. Entonces, esa información
16:57uno la pasa manualmente a la persona de
16:59confianza. ¿Sí? Entonces, acá solamente
17:01va el código que compone el proyecto.
17:04Sí. Fuera archivos de configuración. Acá
17:07vamos a crear una carpeta nueva también
17:08que se va a llamar Pages. ¿Por qué vamos
17:11a crear una carpeta llamada Pages? Esta
17:13carpeta llamada Pages va a contener
17:16todos los archivos HTML del proyecto.
17:18Solo los de HTML. ¿Por qué? Porque los
17:19archivos HTML son los que definen los
17:23las páginas del sitio. Bien, entonces
17:26acá vamos a colocar, por ejemplo,
17:27nuestro archivo index.
17:30Hm. Bien, dentro de pages vamos a crear
17:33también dentro de CRC una carpeta de
17:35imágenes, como ya la teníamos, ¿sí? Que
17:37se llama así, images, ¿sí? para ver qué
17:41images en realidad es una carpeta
17:42interna de otra carpeta, pero como no es
17:44en esta clase no vamos a ver eso, pues
17:46solamente vamos a crearla para que vean
17:48que queda al lado de la carpeta de
17:49imágenes de páginas, perdón. Bien, muy
17:53bien. Acá vamos a copiar de vuelta todo
17:55el código y vamos a reutilizar esto.
17:57Bien, pero ahora lo que queremos hacer
17:59es lo siguiente. Nosotros tenemos este
18:01sitio de abogados supuestamente y la
18:03cuestión es que esta es la página
18:05principal. Bien, de hecho podríamos
18:07volver una vez más al sitio de abogados,
18:09que no me acuerdo cómo se llamaba. Vamos
18:10a pegar esto en Google seguramente sale.
18:14Bien, vamos a colocar esto ahí, pues
18:18seguramente nos va a salir
18:23bien. Y lo que vamos a hacer acá es eh
18:27vamos a intentar ver qué otra página
18:29tenía esto para jugar un poco con eso.
18:31No me acuerdo si era esta la página o
18:33no. Ahí me voy a fijar. Eh, abas
18:36laaborales. Cava. ¿Era esta? No, no,
18:41no era esta.
18:44¿Cuál era?
18:46Ya encima no puedo volver para atrás.
18:50Vuelta.
18:52No, era una que tenía como tarjetas.
18:54Claro, por eso. Pero no me acuerdo cuál
18:56era esta. ¿Será estudio Chin?
19:00No, tampoco,
19:02¿eh? Ay, no me acuerdo. Che,
19:06tuve jurídico DLS,
19:10¿no? Está la de recién.
19:13Abogado.
19:18A ver qué otra cosa tiene.
19:23A ver, vamos a hacer sintonizaciones.
19:34No, tampoco. Oy, qué fulero. Ay, esas
19:36caras.
19:38Che, no es la misma cara, pero con el
19:40pelo de son hermanos, ¿no?
19:45Parece,
19:46parece. Qué chistoso.
19:49Me parece que abusaron de la I ahí.
19:51Sí, sí. A mí yo pensé lo mismo. Eh,
19:54vamos a poner acá eh abogado.
19:58Tiene que ser alguna de estas.
20:01¿Será este?
20:05Bu. No importa, vamos a hacer de cuenta
20:07que es esta. Sí. Entonces, nosotros
20:09tenemos acá la parte de inicio, ¿sí?
20:12Esta página, la página de inicio, bien,
20:15correspondería al index HTML, por así de
20:18una manera. Para que voy a agarrar el
20:19lápiz. Piens en esto. De esta manera yo
20:22tengo esta página que sería el index
20:25html. Bien, esta opción del menú de
20:29navegación lleva justamente
20:32ahí a a la dirección principal. Pero,
20:35¿por qué? aparece la opción de ir a la
20:37de ir a la página principal. Si estoy en
20:39la página principal, porque menú de
20:41navegación siempre tiene presentes todas
20:43las opciones disponibles de navegación.
20:45Por lo tanto, si yo aprieto inicio, me
20:47va a traer al mismo lugar. Bien, pero si
20:49yo me voy a servicios, me lleva a esta
20:52sección. Bueno, en este caso esto es una
20:53página de un esto es un sitio página
20:55única. Me me me arruinó la el chiste,
20:58pero imagínense que esto me lleva una
20:59página aparte, ¿sí? Como fuese
21:00Mercadoolbre. Mercadoolbre.
21:03Yo cuando cliqueo, por ejemplo, ofertas,
21:07¿qué hace? Me lleva a la página de
21:09ofertas. Y fíjense que acá arriba dice
21:10barra ofertas y estoy en la página de
21:12ofertas. Pero ahora cliqueo acá
21:14supermercado y ahora dice acá barra
21:17supermercado y me llevó a la página
21:19supermercado, ¿no? Pero si vuelvo de
21:21vuelta a clique en Mercadoolbre, ¿a
21:22dónde me lleva? A Index HTML otra vez.
21:25Sí, que es la principal. Ahora, supóng
21:28que en esta de abogados estos servicios
21:30fuera otra página, me llevo ahí y luego
21:33vuelvo de vuelta a la parte principal o
21:35me voy a equipo y luego voy a la parte
21:37principal. Ahora, este sitio es un sitio
21:40que tiene unos cuantos defectos. Ya
21:42vamos a verlo de entrada. Como un
21:44desarrollador observa los defectos de un
21:45sitio. Piensen en la experiencia de
21:48usuario. Sí. Imagínate vos, Nati, por
21:50ejemplo, que vos sos una una developer,
21:52bien, sos una desarrolladora
21:54y vos estás estás probando, estás
21:57desarrollando este sitio y ahora sí, eh,
22:00Fernanda lo que va a hacer es ser la
22:02usuario. Entonces, vos, Nati,
22:04desarrollaste esto, armaste este modelo,
22:07ahora viene, viene Fernanda y aprieta
22:09acá.
22:11Bien, perfecto. Y ahora Fer quiere
22:14seguir navegando por el resto de las
22:15secciones.
22:17¿Qué qué tendría que hacer Fernanda para
22:19poder seguir navegando
22:21y tener algún botón que la que la lleve
22:24[risas]
22:25de vuelta?
22:25Claro, porque porque si no, ¿qué tiene
22:27que hacer? scrolear como un como un
22:29monito, ¿no? O sea, en la experiencia de
22:31usuario, esto es horrible, que yo agarro
22:34la mando al fond y quedé ahí quedé
22:37clavado. Ahora tengo que que scrolear, o
22:40sea, si acá había 20 secciones, yo tengo
22:43que scrlear de vuelta 20 para arriba
22:45para llegar al menú, ¿no? Entonces acá
22:47es verdad,
22:50¿no? Igualmente, fíjense que cuando vos
22:52vas a testimonio, si vos escroleas
22:54apareces, ¿lo ven? Pero si escrase hacia
22:57abajo no aparece. ¿Lo ven? Sí o sí tengo
23:00que esclorear hacia arriba. Ahora se
23:02supone que ahora el usuario tiene que
23:03adivinar que escroreando para arriba
23:05aparece menú
23:08o no. Nosotros como developers no
23:10podemos dejar cosas a la a la adivinanza
23:14del del usuario. Ustedes tienen que
23:16pensar siempre, o que el usuario es
23:18tonto o que el usuario es ciego, o que
23:20el usuario [risas]
23:23es sordo, tiene que pensar todas las
23:24opciones posibles. ¿Por qué? Porque van
23:26a haber usuarios tontos, porque van a
23:28haber usuarios ciegos y porque van a
23:29haber usuarios sordos.
23:31Entonces ustedes para poder desarrollar
23:33algo bueno tiene que pensar que el
23:35usuario tiene todos los problemas
23:37juntos. No uno o ninguno. Tienen que
23:40anticiparse a cualquier situación. ¿Por
23:42qué tienen que que anticiparse a
23:44cualquier situación? Porque si ustedes
23:45no piensan en una persona no viviente,
23:48porque la mayoría pueden ver, esa
23:51persona tiene va a tener una mala
23:53experiencia en el sitio, pierden un
23:54cliente. Ahora, ustedes dicen, "Bueno,
23:56no voy a ocuparme de esta de esta
23:58cuestión del sonido porque o más bien de
24:01que qué sé yo, un video no tenga texto
24:04abajo para que la persona eh sorda pueda
24:07pueda pueda disfrutar, porque la mayoría
24:10de la gente no es sorda." Bueno, todos
24:11los sordos ya dejaron de ser clientes
24:13tuyos porque tiene una mala experiencia.
24:15Vos ponés las cosas en lugares
24:16complicados, una persona con poca
24:18paciencia o con TDH dicen, "Listo, acá
24:21yo no vengo más, perdiste otro cliente."
24:23Bien. Y así va empezas a perder y perder
24:26y perder y perder clientes. Entonces, la
24:28mejor forma es imaginar que todos tus
24:31usuarios tienen todos los problemas
24:32juntos. son sordos, ciegos, tienen TH,
24:35tienen autismo o son tontos o lo que vos
24:37quieras, todo, todo, todo junto.
24:39Entonces, no se te puede escapar nada
24:41porque si vos imaginas que el 100% de
24:42sus usuarios tienen el 100% de los
24:44problemas,
24:45entonces vos decís,
24:48"Me está faltando esto." Y te empezas a
24:49volver una persona obsesiva.
24:53Empezas a volverte una
24:56Mira, dice, "¿Cómo me dijiste?"
24:59Está faltando el mate. Ah,
25:01está faltando el mate lo usé el
25:02micrófono.
25:04Entonces, la cuestión es eh acá no
25:06podemos tomar nada por seguro. Si esto
25:08ya lo vamos a ver la clase que viene
25:09cuando veamos accesibilidad HTML, pero
25:13hay que todo esto hay que tomarlo por
25:14seguro. Entonces, ¿qué es lo que tengo
25:16que pensar? Bueno, necesito una un menú
25:18de navegación de base, ¿no? Para poder
25:20moverme entre sí y tiene que estar
25:22disponible. Si yo me muevo al mercado
25:24libre, ¿sí o con el menú humano, a ver?
25:27Mm.
25:28Esa experiencia no me gusta mucho y
25:29mira, cuando escroleo tampoco vuelve.
25:32Sí, medio medio raro, ¿no? Entonces que
25:34yo quiero ver ofertas ahora, ¿qué tengo
25:36que hacer? Tengo que escoler hasta
25:37arriba, ¿no? Media mala esa experiencia
25:40de usuario. Tal vez esto no lo pensaron
25:42muy bien. Ahora, ¿qué pasa? A ver, en la
25:44versión móvil, eso está un poco más
25:46pensado. Vamos a observar. Vamos a par
25:50que me tengo una receta de un de no sé
25:52qué. A ver, vamos a ver. Voy a entrar un
25:55segundo al mobile a ver qué hace con el
25:58menú de navegación, a ver si es bueno o
26:00es malo.
26:03A ver, cuando yo scroleo, ¿qué pasa?
26:09Bueno, cuando ustedes scrolean, este, no
26:10no sé si se va a llegar a ver. A ver si
26:12yo lo voy a poner un cachito. Si no se
26:14ve un corno me avisan.
26:16No, no se va a ver nada. Bueno, la
26:18cuestión es esta. Cuando en el en el
26:20pruébenlo ustedes entren a Mercado
26:21Libbre en el celular cuando ustedes
26:24escrlean hacia abajo, ¿si? Con el dedo,
26:27bien, o más bien hacia arriba, quiero
26:29decir, ¿no? Ustedes van como bajan,
26:31bajan, bajan, el menú sigue ahí, pero
26:34cuando suben desaparece, pero cuando
26:36bajan aparece de vuelta, o sea, hace el
26:37mismo modelo que esto,
26:40¿sí?
26:44No, al revés. en realidad que este
26:46cuando bajan sigue estando, cuando suben
26:48desaparece, pero en el momento en el que
26:49bajan reaparece. En este al revés cuando
26:51baja desaparece, cuando sube aparece. En
26:53el celular es al revés. Bien. En el
26:56sitio web como se habrán dado cuenta, no
26:58tiene esa misma calidad. ¿Y por qué en
27:01el sitio web no tiene esa misma calidad?
27:02Porque en este momento los de Mercado
27:03Libre están pensando en que su prioridad
27:05es el celular. Entonces, como que la
27:07mayoría de la gente no debe comprar por
27:09la compu, en líneas generales deben
27:11comprar por el celu. Entonces, no le
27:13pusieron como mucha ficha a que la
27:15experiencia de usuario de la página web
27:17sea la mejor, pero deberían, desde mi
27:19punto de vista. Sí, pero por lo visto,
27:22no sé si se dieron cuenta, pero si
27:24ustedes intentan entrar a la página web
27:26desde el celular, te manda Play Store a
27:28descargar de la aplicación. O sea, que
27:30están tratando de desligarse automátic
27:32por completo de que la gente use la
27:33página web para comprar y empiecen a
27:35usar más el celular.
27:37Bien, pero esto no es una buena
27:38experiencia de usuario. En líneas
27:39generales, ¿qué sería una buena
27:41experiencia de usuario? que te siga
27:42permanentemente y ocupe poco espacio.
27:44Por ejemplo,
27:49en este en este sitio, que el premaco en
27:51este sitio es otro, es que es medio
27:52lento para cargar, que es algo que a mí
27:54me desagrada bastante. Noten que tenemos
27:57una barra de navegación que es
27:59transparente porque se funde con el
28:02fondo de eh del de la imagen de la
28:05sección home. Cuando bajan un poquito,
28:07automáticamente se marca de color, pero
28:08te sigue permanentemente durante todo el
28:10recorrido y no ocupa mucho espacio, como
28:12se darán cuenta. Sí. Y fíjense que
28:14también es un sitio de página única, se
28:15va moviendo entre secciones,
28:19¿o no? A ver,
28:22sí, creo que sí. Sí, pasa que este sitio
28:24es lentísimo y nunca le hicieron una le
28:27hicieron una reforma, pero deberían. A
28:30ver.
28:33Ah, no, no son páginas. Este es un sitio
28:34multipágina.
28:36Sí, pero fíjense que el menú de
28:37navegación te sigue permanentemente.
28:39Entonces, vos siempre estás a
28:40posibilidad de poder chusmear otras
28:42cosas. Sí. Y a mí me gusta más este
28:45modelo. Para mí, yo nunca cambiaría el
28:47modelo este de seguimiento porque es muy
28:49práctico. [resoplido] Ahora, la cuestión
28:50es que en HTML no tenemos para hacer que
28:52te siga, eso es algo de CSS. Bien, pero
28:56podemos intentar estrategias. Primero
28:58que nada, ¿cómo nos conectamos entre
28:59páginas? Bien. O ¿cómo hacemos para que
29:02sea algo parecido a esto? Que se mueva
29:04entre secciones, ¿no? Que también se ve
29:05bastante bueno. Vamos a ver primero el
29:08movimiento entre páginas y después vamos
29:10el movimiento entre secciones. Para
29:11movernos entre páginas, primero
29:13necesitamos más páginas y cada página se
29:15va a ver, ¿sí? Eh, representada por una
29:18hoja de HTML. Por lo tanto, si nosotros
29:21dijimos que la página de index,
29:24más bien que la página principal es
29:26index, sí, [resoplido]
29:29tenemos que crear un HTML para cada una
29:30de las otras opciones, ¿no? Para la de
29:32ofertas, para la de cupones, para el
29:34supermercado, para la de moda o en su
29:35defecto acá para la de la agencia, para
29:37la del enfoque, para el portafolio.
29:40Nosotros vamos a hacer dos. Vamos a
29:41hacer una de servicios y una de
29:42contacto. Entonces vamos a venir acá y
29:44le vamos a decir servicios
29:46punto html. y le vamos a decir acá
29:50servicios, perdón, contacto. HTML. Bien,
29:55se acuerdan que neces instalar una
29:56extensión llamada Milemet. Bueno, si la
29:59tienen instalada y vienen acá y ponen un
30:01signo de exclamación, fíjense que
30:03automáticamente les sale un cosito que
30:05dice abreviación emet. Si le dan enter,
30:08miren,
30:09pum, automáticamente tiene la estructura
30:11base del documento.
30:14Excelente. Bien. Y lo mismo van a hacer
30:16en el otro.
30:18Tuc. Bien, tiene un par de cositas más
30:20que las que yo les mostré esta metadata,
30:22después les explico bien para qué corno
30:24es cuando veamos toda la metadata
30:26completa, pero esa información, esta
30:28información está relacionada con el con
30:31el el formato de de caracteres que está
30:34usando el sitio o que entiende el
30:35navegador y cómo escala el contenido del
30:38sitio dependiendo de si se hacen si
30:42ustedes quieren que el contenido que
30:44coloquen eh se vea uno a uno con la
30:47pantalla o dos a uno con la pantalla,
30:49tres a uno con la pantalla o si se
30:50pueden agrandar o achicar de base. No es
30:53algo muy importante para ver ahora, pero
30:54más o menos para ese lado para estas dos
30:57metatiquetas. Después lo vamos a ver.
30:59Entonces, miren esto. Vamos a crear una
31:01barra de navegación inicialmente para
31:02poder trabajar. La barra de navegación
31:04usualmente se colocan en el body en la
31:06parte superior. Recuerden que el
31:08documento se estructura siempre, ¿okay?
31:11se estructura siempre desde arriba hacia
31:13abajo. Por lo tanto, si ustedes quieren
31:15que un elemento aparezca acá como en el
31:16sitio web, aparezca eh para que me perdí
31:19la página, aparezca acá arriba de todo,
31:23¿sí? Como en este caso
31:25que aparece en la parte superior, tiene
31:27que estar en la parte superior del body,
31:29¿no? Arriba de todo lo demás. Entonces,
31:31vamos a hacer eso. Vamos a colocar acá
31:33una etiqueta llamada header. Sí, header
31:36básicamente es un contenedor, es como un
31:38div, pero que representa una cabecera.
31:41Así como la section y el article tienen
31:43sus representaciones, este representa
31:44una cabecera. ¿Qué es la cabecera? Todo
31:47aquello que está en la parte superior
31:49del body. Sí. Y que se separa del
31:53contenido principal. El contenido
31:54principal, ¿cuál es? Desde acá, donde
31:57termina la cabecera hacia abajo y hasta
31:59que arranca el footer. Bien, entonces
32:04vamos a hacer una separación del
32:05documento. Vamos a crear una cabecera,
32:08vamos a crear un footer al final. al
32:10final de todo, bien, que también es un
32:13elemento HTML y todo lo demás, todo lo
32:16demás que está entre el footer y la
32:17cabecera va a ir dentro de un elemento
32:18especial
32:20que se llama mainu. ¿Por qué? Porque
32:23esto define el contenido principal del
32:25sitio. Entonces, vamos a agarrar todo
32:27eso. Sí,
32:30para que se me fue. Ahí está. Y lo vamos
32:32a meter ahí dentro. ¿Ven? Ahí queda
32:35dentro del main.
32:36Entonces, ¿cómo se definía esto? Bueno,
32:38volvemos de vuelta marcado libre. Vamos
32:40arriba todo. Sí,
32:44acá estamos. Sí, lo vamos a marcar para
32:47que se note. Para que perdió el lápiz,
32:50¿eh?
32:53Ahí está.
32:55Cabecera.
32:57Sí,
33:00el main sería lo que está debajo.
33:03Vamos a cambiar el color.
33:06Sí, esto es el main hasta abajo, hasta
33:09donde llega el footer. Bien, o sea, que
33:12yo sigo bajando y esto es main, main
33:17hasta que
33:20sí
33:24lleva el footer.
33:27Bien,
33:28cabecera, main y footer. ¿Qué es lo
33:31importante entre estos tres elementos?
33:33que la cabecera y el main, perdón, la
33:35cabecera y el footer usualmente se
33:37repiten en todas las páginas. O sea, yo
33:38estoy acá en la página principal, me voy
33:41a ofertas, miro el miro la cabecera,
33:45es idéntica. Miro el footer,
33:49es idéntico. Vuelvo de vuelta para
33:51arriba, me voy a supermercado, miro la
33:54cabecera,
33:56es idéntica, miro el footer,
33:59es idéntico, pero el main cambia de
34:02página en página. Se ve entonces el main
34:05es el contenido exclusivo de cada
34:06página. El futer y la cabecera suelen
34:10conservarse iguales. En líneas generales
34:12pueden haber excepciones, pero en líneas
34:13generales es una regla bastante com
34:17Ahora, la cabecera puede estar compuesta
34:18de varias cosas, entre ellas acá tenemos
34:20el logo de la empresa, tenemos, por
34:22ejemplo, el menú de navegación, que es
34:25este, tenemos una barra de búsqueda,
34:28tenemos el menú de el menú de usuario,
34:30etcétera, etcétera. Nosotros, ¿qué vamos
34:32a fabricar? Vamos a fabricar
34:33exclusivamente por el momento
34:37el menú de navegación, lo que nos
34:38permite movernos entre páginas. Por lo
34:40tanto, volvemos de vuelta y vamos a
34:42crear dentro del header
34:45únicamente un elemento llamado NAV. Este
34:48elemento NAV también es un div
34:49semántico, así como header, main,
34:52section, footer, article, son divs
34:54semánticos.
34:56Y acá dentro vamos a crear un elemento
34:58nuevo que se llaman las listas.
35:01Tenemos dos modelos de lista. Sí, una
35:03lista que se llama UL para Vamos a ver
35:05de qué trata. Sí, para que la escrib
35:08mal. Y tenemos otra lista
35:12que se llama OL. Ahora vamos a ver de
35:15qué es cada una y cuándo se usa cada
35:18una, ¿no?
35:21Cómo se nota que arrancó el mes porque
35:23me está molestando el copilot. Entonces,
35:25¿esto qué sería? Sería una lista. Sí,
35:30desordenada. Profe, existe algo que se
35:32llama hero.
35:34Eh, el hero sería, a ver, e
35:40no, a ver, no recuerdo si si se le da
35:43como denominación una section, pero sí
35:44se le da como denominación una imagen.
35:46Generalmente la imagen hero es la imagen
35:50de la sección home en general, ¿sí? Es
35:55decir, si vos te vas a un sitio como,
35:58vamos un ejemplo, ya está buena la
36:00pregunta.
36:01Si vos te vas, por ejemplo, a esta de
36:03acá, esta sería la heroage, ¿sí? Para
36:06decir de alguna manera, si te vas al
36:08estudio jurídico,
36:10esta de acá del fondo sería la hero
36:11image. ¿Ves? Esta que tiene el
36:13martillito. Bien. Entonces, podemos
36:15llamar a la sección que contiene la hero
36:17image como la sección hero. Sí, hay
36:22gente que le pone Hero de nombre. Yo le
36:23pongo home porque me parece mucho más
36:25razonable que sea la sección hogar, ¿no?
36:28Pero hay gente que en realidad
36:31inicio sería la página hogar, ¿no? Que
36:35en inglés acá diría home. Entonces, para
36:37no confundir los términos, mucha gente
36:39lo que hace es piensa que la página es
36:41el home y por lo tanto la sección
36:43principal es la hero section con la hero
36:46image. Bien, como en español nosotros no
36:49usamos, usamos más el término inicio,
36:51podemos decir que esta es la sección
36:53hogar, ¿si? Y esta sería la home image,
36:56pero si vos le querés poner hero como lo
36:58hacen los yanis, está perfecto. Eh, para
37:00mí es lo mismo. Honestamente no cambia
37:02mucho. Yo depende del proyecto. Si el
37:04proyecto fuese en inglés, yo le pondría
37:06hero. Si el proyecto fuera en español,
37:07yo le pondría home. Pero por una
37:09cuestión más que nada de eh de de que se
37:14puede y no se de que español se puede y
37:16no se
37:18no se no se e
37:21no se sobreponen los términos.
37:25Pero esa sería la hero section en
37:27teoría. Sí. Bien. Eh, pero sería parte
37:31del main. Sí, sería parte del main.
37:33Sería la sería eh la sección principal
37:37de la página principal. O sea, ¿ves?
37:40¿Ves? Acá estamos en la página principal
37:41en index. Es la sección principal de la
37:44página principal.
37:48Eh, así. Exactamente, Antonela.
37:50Exactamente. Ahora tiene Hero Image. Eh,
37:53las las otras sections,
37:56yo no sé si la llamaría Hero ahí, che,
37:58para mí es una sección convencional de
37:59la otra página.
38:01Yo no la llamaría Hero en la en otras en
38:03otras páginas, solo en la principal. Y
38:05es la primera sección, la primera de
38:07todas.
38:08Ya, aunque tenga una imagen presentación
38:10en la página de servicio, yo ya la
38:12llamaría Hop, la llamaría directamente
38:15eh
38:18main section dentro de servicios, ¿no?
38:20Es como que yo crear acá una especie de
38:21main, ¿sí?
38:23Y dentro de ese main a esta, por
38:25ejemplo, si tuviera que poner una
38:26especie de ID, le pondría, por ejemplo,
38:29algo así como
38:31eh main section, algo así por él, ¿no?
38:36Como para que te quede como la sección
38:38principal de de esta página en
38:40particular, ¿no? Sin embargo, a acá a la
38:45de index, sí, yo capaz le pondría esta
38:47como e
38:50hero. Mira, ya te lo recomienda la la
38:52guía directamente. ¿Vieron?
38:56Acá le pondrías hero y acá le podrías
38:58poner eh, como te decía, le podrías
39:00poner directamente eh em a ver, vamos a
39:05ver a ver qué a ver qué recomienda la
39:07guía. Acá tengo curiosidad.
39:12No, no recomienda nada. Mira,
39:15recomienda servicios nada más. Bueno, yo
39:16le pondría main.
39:18Sé que acá hay un main acá arriba, pero
39:20estas vos estás colocando una ID a otro
39:22tipo de elemento distinto, ¿no? Es una
39:23section, o sea, sería la main section
39:25del main content, porque esto sería algo
39:27así como main content, ¿no? Por decir
39:29una manera
39:31tenés el contenido principal de la
39:33página, entonces esto sería la sección
39:34principal dentro de ese contenido
39:36principal, ¿no? O sea, que igual se
39:37podría colocar una imagine, una especie
39:39de identificador, pero sí, yo la her
39:43sería esta, ¿no? Esta sería la hero
39:44section y es medio redundante ponerle
39:46section. hoy en día porque ya se llama
39:50section la eh la etiqueta, ¿no? Si esto
39:53fuese un div, ¿no? Como como hace muchos
39:56años atrás,
39:58sí tendría sentido llamar a hero section
40:00porque este div no dice que es una
40:02section, ¿no? Entonces ahí tendría
40:03sentido, pero como ya se llama section
40:05el elemento, pues esto es redundante,
40:07¿no? Que un poquito más chiche, pero ese
40:10sería más o menos el punto. Bien, bueno,
40:13volviendo lo nuestro acá en estamos por
40:16acá creando la nave. Bueno, tenemos por
40:18un lado la lista desordenada y la lista
40:20ordenada. Bien, de hecho de ahí viene el
40:24nombre del elemento que es en inglés,
40:26¿no? Un ordered
40:30list. Sí. Y order list.
40:36Bien, de ahí vendría. ¿Cuál es la
40:39diferencia entre estas dos listas? La
40:40lista es ordenada. Cuando vos haces
40:43ítems de lista, cada ítem de lista tiene
40:45como un puntito, ¿no?, al comienzo de
40:48cada elemento. Y en la lista ordenada
40:51tiene una numeración, 1 2 3 4 5. Vamos a
40:53ver un ejemplo. Sí, yo agarro y le digo
40:56por acá que creo estos elementos, no sé,
40:58eh, li es ítem de lista, ¿no? Y e
41:05y por ejemplo, che, la porquería del
41:07copilot.
41:09Bien, hay un L. Sí, que hago tres y le
41:13pongo lo mismo a los dos. Vamos a poner
41:15acá ítem uno,
41:17íem dos
41:19y acá íem tres. Y vamos a copiar estos
41:22de acá. Vamos a pegar en la lista, en la
41:24lista ordenada.
41:26Bien, fíjense la diferencia visualmente,
41:29¿cómo se ven?
41:31A ver, esto está en index de
41:34Ah, paren que estoy en index de la clase
41:36uno.
41:37Vamos a index de la clase dos.
41:42Ahí está. ¿Lo ven? Uno tiene pelotitas,
41:44el otro tiene puntitos. ¿Cuál es el
41:47ideal para una barra de navegación? Para
41:50mí el ideal es el de arriba, porque en
41:52teoría no tienen un orden específico,
41:54¿no? Si yo agarro y acá en agencia digo,
41:57bueno, pongo a la agencia acá y este acá
41:59o pongo este acá y este acá, no tiene
42:02mucho, no importa mucho el orden, ¿no?
42:05Dale, Tomás, no hay problema. Eh,
42:08entonces fíjense que si yo cambio el
42:09orden de los elementos, no altera el
42:11producto en sí. O sea, si el inicio lo
42:13pongo en el medio, sí, pero en líneas
42:14generales no es algo que yo ponga, por
42:16ejemplo, paso uno, paso dos, paso tres,
42:18como si la jerarquía, ¿no? O primer
42:20puesto, segundo puesto, tercer puesto.
42:22No tiene un sentido de orden. Entonces,
42:24desde el punto de vista estructural
42:26tiene más sentido usar la lista
42:27desordenada. Bien, entonces vamos a
42:29quedarnos con la lista desordenada.
42:32Y acá, ¿qué vamos a hacer? Como nosotros
42:34nos queremos mover entre páginas, vamos
42:36a necesitar enlaces. Así como usamos un
42:38enlace para ir hasta un determinado
42:40lugar, que en este caso usamos este de
42:42acá para ir a Google, vamos a cada uno
42:45de las de las direcciones de cada una de
42:47las páginas también va a ser un enlace,
42:49¿bien? Porque va a ha va a haber una
42:51ruta hasta ese archivo. Entonces, vamos
42:54a agarrar y dentro de esto vamos a poner
42:56un A. Bien, ahí estamos. Vamos a
42:59acomodar para que quede bonito.
43:02Ahí está. Bien. Y lo que vamos a hacer
43:04acá es que vamos a decir, bueno, vamos a
43:05ir a inicio, bien, y vamos a copiar
43:08esto. Lo vamos a pegar acá. Bueno, la
43:10guía ya me lo armó ahí. Ven, inicio,
43:12servicios, contacto. ¿Cómo queda? Queda
43:15así. Inicio, servicios, contacto.
43:17Hermoso. ¿Y ahora qué hacemos? Bueno,
43:19tendríamos que colocar acá la referencia
43:21de cada una de las páginas. Entonces,
43:23¿qué vamos a hacer? Vamos a hacer punto
43:25barra y miren como automáticamente
43:27entramos dentro de la carpeta pages
43:29porque es donde se encuentra el archivo
43:31en el que estamos trabajando.
43:33La de inicio, ¿dónde va? A index. Listo,
43:35adentro. Vamos a la siguiente y hacemos
43:37lo mismo. Le decimos por acá, ¿sí?
43:40Decimos acá punto barra, aparece ahí
43:43servicios servicios y vamos al último
43:46contacto. Ahora, fíjense, si yo me voy a
43:49servicios para que no le pusimos nada,
43:51no se va a ver nada ahí adentro. Vamos a
43:52poner un H1. temporal servicios y vamos
43:56a ponerle a contacto también un H1
43:58temporal para que se vea algo ahí
44:01con eh un
44:04está contacto. Muy bien, ahora sí,
44:07fíjense, vengo para acá, servicios y me
44:10fue servicios. Pero, ¿qué pasa? Ahora no
44:12puedo navegar, no tenemos ningún
44:14problema que teníamos con este de acá.
44:16Me quedé acá y quedé colgado. ¿Qué tengo
44:18que hacer? Volver para atrás. Ahora me
44:20voy a contacto, llegué, pero no tengo,
44:21no puedo navegar. volver para atrás.
44:24Entonces, desde el punto de vista de la
44:25experiencia de usuario, esto es una
44:26basura porque yo tengo que, o sea, el
44:28usuario tiene que tiene que asumir que
44:30tiene que ir al botón de acá atrás para
44:31volver para atrás. No tiene una
44:32navegación propia dentro del sitio que
44:34está que está recorriendo. Un asco.
44:37Entonces, volvemos para atrás. ¿Qué
44:38hacemos? Agarramos la navegación, ¿sí?
44:41Completita, nos vamos a servicios y la
44:44pegamos ahí arriba. Bien, la acomodamos.
44:49Ahora nos vamos acá. Contacto y hacemos
44:50lo mismo. Enter. Y uy y pegamos ahí y
44:55acomodamos. Bien, ahora que ya tenemos
44:57todo guardadito y todo bonito,
45:00servicios,
45:02contacto, servicios, inicio, servicios y
45:06vamos pasando de página en página. V y
45:08tenemos una navegación concreta. Ahora
45:12vamos a comentar un momento esto y vamos
45:14a ir por el otro modelo. Acuérdate ah me
45:20Bueno,
45:23nada.
45:27Bueno, entonces o está muy fría el agua.
45:29Lo que vamos a hacer ahora es la
45:30navegación interseccional, ¿ven? La que
45:33nos permite movernos entre secciones,
45:35así todo rechiche, ¿ven? Entonces, la
45:37cuestión acá, ¿cuál es? ¿Cómo me
45:39comunico con secciones en lugar de
45:41comunicarme con páginas? Porque yo acá
45:43tengo una, dos, tres secciones bien, ya
45:47armadas. Esta, esta de derecho laboral.
45:51Ah, no, son dos secciones, ¿no? Derecho
45:52laboral. Y vamos a agregar una más. Sí,
45:56vamos aar una más que se va a llamar
45:59section.
46:00Sí, ahí está.
46:03Perfecto. Le vamos a poner acá un H2.
46:09que va a decir Falopa y vamos a colocar
46:12acá un párrafo muy largo,
46:16un loren 200. Este loren 200 viene con
46:18Emet. Si ustedes ponen loren 200 te
46:20genera 200 palabras aeteras en latín.
46:23Puedes ponerle lorem 10, Loren 200,
46:25Loren 1000 y te genera n palabras según
46:28el número que pusiste. Esto para qué es
46:30para rellenar cuando no sabes qué poner
46:32y ver cuánto ver el espacio bien ocupado
46:35para calcular eh tamaños de de cajones y
46:39qué sé yo, ¿no? Acomodas todo. Fíjense
46:42que ahí metí como 200 palabras en latina
46:43aleatorias. Guardo. Se tendrían que ver
46:45ahí. Sí, la sección Falopa. Y ahora,
46:47¿qué vamos a hacer? Vamos a ver si nos
46:49lleva a las secciones un menú. Entonces,
46:51vamos a crear un segundo menú. Nava. Y
46:53ahora vamos a utilizar Emet para
46:55construir este menú porque se acuerdan
46:57que dije podemos escribir más rápido.
46:59ETET tiene atajos que después les voy a
47:01pasar un archivo llamado Emet cheit
47:03sheet que tiene todos los atajos de Emet
47:05para escribir HTML rápido. Pero miren
47:07qué chichazo esto. Quiero crear una nave
47:09que dentro contenga una lista
47:11desordenada, que dentro contenga un ítem
47:13de lista y quiero que sean tres ítems de
47:15lista porque hay tres secciones y que
47:17cada uno contenga un enlace. Bien. Y
47:20nada más. Enter. Tarán.
47:24Ven, lo hice de una. De vuelta. Vamos
47:26otra vez. Quiero tener una barra de
47:27nave, una nave que contenga una lista
47:29ordenada, que contenga un ítem de lista,
47:31que sean tres ítems de lista y que cada
47:34uno contenga dentro un enlace.
47:38¿Listo?
47:39Así de chiche. ¿Y ahora qué hacemos?
47:42Ponemos acá las secciones. ¿Cuáles son?
47:45sección de despidos.
47:48Eh, para no, eh, para esta es la sección
47:50principal, ¿no? Bueno, vamos a ponerla
47:53acá la sección de em la hero. Vamos a
47:57ponerle, vamos a poner inicio.
47:59Iniciamos. Después tenemos la de abajo.
48:01¿Cuál era la otra? La de
48:04esta derecho laboral.
48:07Derecho laboral. Y la última era la de
48:10Falopa.
48:11Ahí está.
48:13Che, las puse en cualquier lado, no me
48:15equivoqué.
48:17Vaya dentro del enlace.
48:20ahí está. Y Falopa. Bien.
48:23Y ahora, ¿qué quiero hacer? Quiero
48:26conectar este menú nuevito que armé, que
48:29es este de acá arriba. Se ve con cada
48:33sección. Para poder conectarlos por
48:35sección, cada sección tiene que estar
48:36identificada, tiene que tener una ID. Y
48:38a través de esa ID me voy a conectar.
48:40Entonces, la primera, ¿cómo se va a
48:41llamar? Supónganse ID, dicho Hop. La
48:45segunda, ¿cómo se va a llamar? ID,
48:48derecho laboral. Bien. Y la última vamos
48:51a llamar acá ID.
48:54Sí, está palopa. Listo, ahí estamos.
48:57Entonces, ¿qué hacemos ahora? Bueno,
48:59primero tenemos que indicar cuál es la
49:01página en la que se encuentra la sección
49:03y luego
49:05identificar ID. Entonces, punto barra
49:08la sección se encuentra en index, por lo
49:10tanto pongo index. Y para el ID voy a
49:11poner un numeral. El numeral el numeral
49:14indica que es un ID y le voy a decir el
49:16ID hero. Bien. Y lo mismo voy a hacer
49:18con los otros tres, no, perdón, los
49:21otros dos, derecho laboral y falopa.
49:23Miren que cuando ahora digo inicio, voy
49:26a esa. Cuando le digo derecho laboral,
49:29pam, me lleva hasta derecho laboral.
49:30Cuando le digo Falopa, pam, me llevo
49:32hasta Falopa. Se ve por qué Falopa no
49:34quedó ahí arriba como la como la de como
49:36la de derecho laboral.
49:39¿Ven? Esta quedó justito ahí arriba. Me
49:41llevó al a al pip. Iba a decir, "Yo
49:44estoy muy mal con el trading." A al
49:46Pixel me llevó.
49:51Este,
49:53entonces este, fíjense, quedó ahí al al
49:56pixel. Pasa que en el trading decimos al
49:58pip, eh, al pxel. ¿Por qué Falopa no
50:01quedó al pxel? porque no hay más nada
50:04abajo hasta lo que uno pueda recorrer.
50:07Entonces, yo no puedo llevar esto hasta
50:09arriba
50:11si no tengo nada más que mostrar y se
50:14corta. Ahora, si yo pusiera mucho más
50:16texto que ocupara más espacio, vamos a
50:19agregar un poquito más. Voy a meter acá
50:21otro
50:23lorem
50:25lorem 200.
50:29Ahí está. Lo acomodamos. Miren como
50:31ahora hay más espacio para recorrer, si
50:33yo ahora le doy a Falopa, pimba, quedó
50:35arriba. ¿Ven? ¿Por qué? Porque ahora
50:37tengo para hasta dónde bajar, pero antes
50:39no podía, ¿ven? Y me van llevando entre
50:41secciones. Ahora notarán que en esta
50:44moda, si no le pones la ruta de numeral,
50:46no, no funcionaría porque no reconocería
50:48el ID, ¿no? Es decir, este es el este
50:50símbolo significa ID y significa ID
50:52tanto en HTML como en CSS como en
50:54JavaScript.
50:56Si vos, por ejemplo, te querés comunicar
50:57con una sección en CSS por medio de ID,
51:02cuando abras para colocar CSS,
51:06si vos querés comunicarte con la sección
51:08Hero, vas a hacer esto
51:12y ahí le vas a dar, le vas a estar dando
51:14estilos a Hero. ¿Por qué? Porque te
51:15estás comunicando vía ID. Si le quito el
51:18numeral, piensa que es que es una
51:20etiqueta llamada heropen, como si yo
51:22estuviera poniendo nav y a nav le doy
51:25color, por ejemplo, fondo de color, no
51:27sé, rojo.
51:30Ven,
51:32ven. Y ahora, ¿ven? Es de color rojo,
51:36pero porque hay un elemento llamado si
51:38yo quiero darle a hero, si yo pongo
51:41section, ¿qué pasa? Todas las section se
51:42ponen rojas. Y yo no quiero que todas se
51:44pongan rojas. Yo quiero que solamente la
51:47la hero se ponga roja. Entonces, ¿qué
51:48hago? Me me conecto por ID porque el ID
51:51es único. Entonces, solamente la que
51:54tenga el ID Hero se va a poner roja.
51:56Entonces, solo esa se pone roja. Se ve
52:00el numeral es un es un rastreador
52:02automático de IDs.
52:04Sin eso no funciona ni acá ni en el
52:06enrutado, ¿no? De hecho, miren, si yo
52:09agarro y le quito el numeral
52:12y ahora intento ahora voy a derecho
52:13laboral, ¿ven? me lleva, pero voy a
52:16quiero ir a inicio y no se mueve. Ven,
52:18me dice ruta rota. Ven, cannot get. No
52:22puede obtener esta dirección porque no
52:24reconoce porque le falta el numeral.
52:26Igual ustedes aprovechen, rompan cosas
52:28para ver qué pasa, porque eso también
52:30hace que puedan entender bien por qué no
52:32funciona, ¿no? Y por qué es tan
52:34importante determinado determinado
52:36elemento. Sí, ustedes a mí ahí me lo ven
52:38me lo ven hacer funcionar de una este
52:41pero
52:44lo intentan ustedes y se les rompe y
52:46quieren saber por qué es bueno preguntar
52:48también o investigar y y ahí les va a
52:50quedar andando joya. Ahora notarán que
52:53habíamos hablado hace un rato del tema
52:55de che, pero cuando me lleva hasta
52:57Falopa no puedo volver y por tener que
52:59dejar consumir falopa. No, mentira. Eh,
53:01la cuestión es esta, no puedo volver
53:03porque me quedó el menú allá arriba. No,
53:04no es el mismo problema que tengo con
53:06esto. Agarro y me voy hasta
53:09testimonios y quedé clavado.
53:12No, ahora me enteré de que si hubiera
53:14hacia arriba aparece el menú, pero si no
53:15yo quedé clavado, no tengo como volver.
53:17Bueno, acá tienen dos formas de resolver
53:19esto. Yo normalmente pondría las dos
53:21juntas de ser posible. La número uno se
53:24puede hacer con HTML solo y la número
53:25dos tiene que usar CSS. ¿Cuál es la
53:28forma que para mí con HTML se puede
53:30resolver? Colocar al final de la página
53:33un botón para volver al inicio.
53:35Entonces, ¿qué hacemos? Venimos acá al
53:37fondo, ¿sí? En el footer. Al fondo del
53:39footer ponemos un botón. De hecho, puede
53:42ser un enlace, ¿no? Un enlace que
53:44contenga dentro un botón.
53:47Sí, ese buton puede decir volver al
53:51inicio o si les gusta más chetón pueden
53:54ponerle acá una arrow app Unicode,
53:58¿no? Una flechita hacia arriba. Unicode.
54:01Son bastante fuleras, por cierto, pero
54:04sería esta. [carraspeo]
54:08Sí, la robamos, la pegamos acá y más o
54:12menos como que se entiende que va
54:13arriba, ¿no? La porquería. Pero bueno,
54:16supongas eso. A mí me gusta más que
54:17Diego Volver al inicio. Bien, viejo
54:19estilo Wikipedia, pero pon ahí una
54:21flechita, no sería tan fea, ¿no? Sería
54:23una flecha que no parece un botón, que
54:26eh que se mueve un poquito y que da la
54:28sensación de que va hacia arriba, ¿no? Y
54:30cuál sería el chiste que si vos la la
54:32oprimís, eh,
54:35te hace una revolución. No, mentira. Si
54:37ustedes lo oprimen, ¿qué hace? debería
54:39hacer este movimiento
54:42y volver hasta arriba, ¿no?
54:43Lamentablemente ese efecto de que vuelva
54:46hacia arriba se hace con CSS, no con
54:48HTML. Entonces, lo más que podos hacer
54:50es que haga esto, que aparezca
54:51automáticamente arriba. ¿Cómo lo
54:53hacemos? Decirle que regrese al inicio
54:56de index, o sea, básicamente como si
54:58estuviéramos en el menú interpágina
55:00cliqueando el botón para volver a index.
55:03Entonces, ¿qué es lo único que tenemos
55:04que hacer? Ir al enlace y decirle que
55:06vaya a punto barra index. Entonces,
55:08cuando vos le des al clic, lo que va a
55:11hacer básicamente es recargar esta
55:12página y volver de vuelta al comienzo.
55:15Miren.
55:17Y estamos de vuelta al comienzo. Bien,
55:19esa es una de las posibilidades. Con CSS
55:21lo pueden hacer mejor, pueden poner un
55:23efecto de desplazamiento y queda super
55:25chicha. Hay un montón de sitios que lo
55:26tienen con la flechita para volver
55:27arriba. La otra opción necesitan CSS
55:30para hacerla. Se las voy a mostrar
55:31solamente para que vean cómo queda, pero
55:34básicamente sería algo así. Ustedes
55:36agarran, le ponen los estilos y le
55:38dicen, por ejemplo, yo quiero que
55:42la barra de navegación, que sería este
55:44nado, quede fijo. Por lo tanto, si yo me
55:46muevo, queda fijo acá arriba, en este
55:49lugar. Entonces, miren, le voy a decir
55:51now y le voy a agregar una propiedad
55:54llamada eh position.
55:58Sí, fijado. Bien, lo fijo y fíjense como
56:02que queda fijado, pero queda como por
56:04delante de esto. Esto es un concepto
56:06para ver más adelante que se llama eh
56:08desencaje, pero lo que hace básicamente
56:10es que este menú pasa un plano
56:12tridimensional, entonces se pone por
56:14delante de las cosas. Normalmente,
56:16fíjense, cada vez que yo agrego algo
56:17HTML se coloca debajo del anterior. ¿Por
56:19qué? Porque este espacio en un en un
56:22modelo bidimensional, que sería
56:24solamente el eje de la de la X y de la
56:28Y, no pueden ocupar el mismo lugar en un
56:30eje bidimensional, pero si tuviéramos un
56:33eje tridimensional
56:34podríamos colocar un elemento
56:37acá y otro detrás y otro detrás y otro
56:40detrás. Bueno, este se está colocando
56:42por delante de los elementos. ¿Lo ven?
56:45Ese desencaje hace que si yo voy
56:47bajando, miren cómo me sigue. Jiji.
56:50¿Ven? Entonces, si yo voy cambiando de
56:52opciones, lo tengo siempre a
56:54disposición. ¿Ven? Ese es el mismo
56:56chiste que utiliza en este caso la
56:59página de desanda.
57:01¿Ven? Está por delante
57:04y me va siguiendo y pasa por delante de
57:06las cosas, está desencajado
57:07tridimensionalmente,
57:08por eso es que pasa por delante, ¿no?
57:11Esa sería la misma mecánica que yo acabo
57:13de implementar acá. Sí. ¿Cómo hacemos
57:15para que esto no empuje lo demás? Bueno,
57:19tenemos que hacer que esto arranque más
57:21abajo.
57:22Entonces, podemos hacer esto. Miren,
57:24vamos a decirle que las que el main
57:27directamente
57:29arranque más abajo con un margen
57:33superior de, no sé, 100 píxeles,
57:37¿no? Para el main le puse
57:41cabecera.
57:42Vamos a ponerle la section hero.
57:47Eh, margin Hero.
57:52Eh,
57:54ah,
57:56¿por qué me corre la barra? Si no le
57:57dije me corre la barra.
58:08Ah, espera,
58:11eh. Yo quiero que me corra lo de acá
58:13arriba o que lo tenga un pading. No,
58:19ese también es bueno.
58:29Ay, me corre esto para arriba
58:31y si le pongo -1.
58:41R
58:47casi, casi, casi.
58:49Ahí está, ¿lo ven? Y ahí más o menos
58:51quedo. Bueno, igual me quedo por arriba,
58:53no tenía que ser un pading permanente,
58:55pero bueno, después les voy a mostrar
58:57cómo se hace cuando le pongamos se medio
58:59cachivache, así.
59:03Eh, ¿qué me pusieron por acá?
59:05Ah, no, solamente se fue vino Luis.
59:08Bien, así que bueno, ahí tenemos más o
59:10menos lo que sería un menú
59:12interseccional.
59:13Sí, en líneas generales, como se darán
59:16cuenta, es este bastante sencillo de de
59:19aplicar, ¿no? De agregar. Eh,
59:21originalmente los sitios webs tenían
59:22este modelo eh solo con HTML.
59:27Después, si por ejemplo quisieran, por
59:28ejemplo, hacer una versión horizontal,
59:30porque con HTML no lo podemos hacer
59:32horizontal, o sea, agarrar esta
59:34estructura y hacer que las opciones
59:36estén una al lado de la otra. Para eso
59:38necesitamos CS, pero si quisieran hacer
59:40algo parecido, podrían intentar hacer
59:42una navegación sin lista, ¿no? Algo así,
59:45donde solamente colocan la NAV, ¿sí?
59:49Solo colocan la NAV
59:51y ponen ponen los enlaces directamente
59:53sin sin internet de lista. Entonces,
59:55fíjense, si yo agarro el enlace y lo
59:56coloco acá y hago lo mismo con cada uno
59:59de los enlaces sin lista,
1:00:03que este es el modelo que más me gusta a
1:00:05mí, de hecho no me gusta mucho la lista
1:00:07desordenada, pasa que sea la más
1:00:08purista. Miren, fíjense que el menú
1:00:11queda horizontal.
1:00:14En líneas generales, esto es lo
1:00:16recomendado por por la organización de
1:00:19HTML, porque en teoría es como lo
1:00:21estructuralmente más prolijos o más como
1:00:25eh correcto. A mí personalmente no me
1:00:28gusta este modelo, me parece como
1:00:30extremadamente verboso, tiene demasiado
1:00:32código al pedo y me gusta mucho más este
1:00:34modelo que que es mucho más
1:00:35representativo, ¿no? Una navegación con
1:00:37enlaces. Punto. Lo de la lista es un
1:00:40agregado que ellos ponen como para que
1:00:42la estructura sea como más coherente,
1:00:44pero a mí me a mí lo que más me importa
1:00:47es que comunique bien y que cumpla su
1:00:48función. Es una navegación, ¿sí? ¿Tiene
1:00:51enlaces? Sí. ¿Se entiende cuando uno lo
1:00:53lee? Sí, listo. No, cumple su función y
1:00:56es comunicativo. Y encima es minimalista
1:00:57en comparación con el otro. Y si no
1:00:59tuvieran CSS, ya te quedaría horizontal
1:01:01por defecto.
1:01:03Pero necesitan CSS para hacerlo
1:01:05horizontal si quieren hacerlo horizontal
1:01:07con esta estructura.
1:01:09Bien. Eh, pero bueno, son eh como
1:01:14decisiones que cada uno toma y siempre y
1:01:16cuando sea comunicativamente correcto y
1:01:18estructuralmente correcto, eh, para mí
1:01:20es viable, ¿sí? porque tiene bastante
1:01:22subjetividad un poco HTML en cómo lo
1:01:24construís, pero bueno, más o menos esa
1:01:27es la idea. En cuanto a los que nos
1:01:29queda por ver, hoy se nos fue un poquito
1:01:31el tiempo, pero vamos a tratar de
1:01:33pasarlo levemente rápido, es eh el
1:01:36concepto de tablas y el concepto de
1:01:38formulario. Vamos a hacer el de tablitas
1:01:40un poquito rápido, ¿sí? Total es
1:01:42bastante fácil de de entender y no
1:01:44necesitan saberlo al al 100 porque las
1:01:46tablas las va a hacer la siempre. Y
1:01:48también con CC se le borran el puntito
1:01:50del comienzo a los enlaces. Sí, en
1:01:53realidad a los puntitos estos no son de
1:01:54los enlaces, estos serían de la lista,
1:01:56¿no? De los enlaces es el subrayado y el
1:01:58color violeta este que cuando vos no no
1:02:02visitaste el sitio es de color azul y
1:02:05cuando el sitio ya está visitado es de
1:02:06color violeta, como está ahora. ¿Ven?
1:02:09Miren, un clásico es es Wikipedia.
1:02:14Miren, en Wikipedia,
1:02:17si ustedes ven los enlaces que están por
1:02:19todos lados, porque Wikipedia es más
1:02:21HTML que otra cosa, están todos en color
1:02:23azul. Ahora yo quiero saber más sobre
1:02:25Thomas Jefferson. Cliqueo y me lleva a
1:02:29la página de Thomas Jefferson. Entonces
1:02:31leo sobre Thomas Jefferson. Ahora digo,
1:02:33"Quiero volver para atrás." Vuelvo para
1:02:34atrás y cuando miro el enlace ahora es
1:02:36de otro color. No sé si notan la
1:02:37diferencia. ¿Ven que este es violeta y
1:02:39los otros son azules? es porque este
1:02:41enlace fue visitado y los otros no
1:02:43fueron visitados.
1:02:44¿Sí? Ahora, ¿qué pasa si yo quiero
1:02:46borrarle los puntitos y quiero borrarles
1:02:49el subrayado o cambiarle el color a las
1:02:50cosas? Bueno, ahí tenés que ir con CSS,
1:02:52¿no? Tenés que decir style, por ejemplo,
1:02:55¿sí? Eh,
1:03:01y le tenés que decir, por ejemplo,
1:03:02quiero que la lista esa, que las listas,
1:03:04por ejemplo,
1:03:06no tengan estilos. Entonces, list style
1:03:11no quiero eh para no tex decoration. Ah,
1:03:14no para es el de lista. Le van a poner
1:03:18acá textoration.
1:03:21Nada
1:03:23para T decoration. No, este es para los
1:03:25subrayados,
1:03:26¿no? Está bien, está bien lo que estaba
1:03:28haciendo.
1:03:30List style.
1:03:34Está faltando la propiedad,
1:03:36¿eh?
1:03:37Está ahí
1:03:43decoration es para los enlaces.
1:03:45Excoration
1:03:48no ahí se irían las los suballados.
1:03:53Aplica. Ah, pues tiene servicio. Estoy
1:03:55mirando index. Perdón,
1:04:00perdón, estoy en la página incorrecta.
1:04:04Ahí está. ¿Ven? El de arriba, este quita
1:04:08las pelotitas y esta quita los
1:04:11subrayados. Y también puedes cambiarle
1:04:13el el color a los enlaces, ¿no? Podés
1:04:15decirle que sean de color rojo,
1:04:18¿ven? Y ahí son rojos. Pero para cambiar
1:04:21el tema de un color para visitado y un
1:04:24color para no visitado, tenés que
1:04:26agregar a lo extra. es una un concepto
1:04:29que se llama pseudoclase
1:04:32y le pones acá eh visited,
1:04:36¿no? Y hay otro que es el que es creo
1:04:38que es unvisited o algo así. Entonces le
1:04:42colocas un color y tiene un color para
1:04:43visitado y un color para no visitado.
1:04:46Sí,
1:04:47sí,
1:04:49creo que era así o era link.
1:04:53Bueno, no me acuerdo bien cuál era la
1:04:54cuál era la sudoclase, pero uno era para
1:04:56visitado y uno para no visitado y le
1:04:58cambiabas el color. Como gente no se le
1:04:59cambia el color de visitado porque es
1:05:01como que por hace 30 años que uno
1:05:04reconoce eso por los colores bases no se
1:05:06le suele cambiar, pero se le puede
1:05:08cambiar si vos quisieras para un sitio
1:05:09web porque tenés algún motivo para
1:05:11modificarlo. Podés. Con Hover, ¿no? Con
1:05:14Hover cambiaría cuando le pasásemos por
1:05:15arriba. Mira, si yo agarro y quiero que
1:05:18esto cuando le pasemos por arriba se
1:05:20vuelva, no sé. Eh, ah, no sé, eh, verde
1:05:23o verde clarito o o no sé, o aqua, le
1:05:27digo, cuando pasa el más por arriba,
1:05:30color aqua,
1:05:34¿ven?
1:05:35Y tiene ese ese estilo, está lindo, pero
1:05:40es es muy simpático ese. Está nada, está
1:05:42buenísimo, ya lo van a ver cuando
1:05:43lleguemos a CS. Bueno, en cuanto a las
1:05:45tablas, vamos a colocar acá una etiqueta
1:05:48llamada table. Sí, etiqueta table.
1:05:51Etiqueta table básicamente va a
1:05:53representar una tabla. Acá estaríamos
1:05:54yendo a eh a la página de servicios.
1:05:58Vamos a habilitar de vuelta el menú de
1:06:00servicios
1:06:01y vamos a sacar el otro para index.
1:06:06Eh,
1:06:07perdí la barra de navegación. No está.
1:06:12Ah, porque estoy en la de en la de la
1:06:14clase pasada.
1:06:17Ahí está. Vamos a habilitar la barra y
1:06:20vamos a deshabilitar la otra.
1:06:25Bien, listo. Ahora nos vamos a ir a
1:06:27servicios. Bien, entonces esto va a
1:06:30representar una tabla. Las tablas en
1:06:32general se van a definir por filas. Cada
1:06:35fila va a representar, por decir de una
1:06:37manera, eh elementos que pueden ser los
1:06:40títulos de cada columna o el contenido
1:06:42de cada columna. Por ejemplo, si yo
1:06:44quiero una fila con una que con un
1:06:46elemento llamado TR, que significa table
1:06:48row o fila de tabla, yo lo que voy a
1:06:50hacer es definir el contenido de la
1:06:52primera fila. Bien, para cada celda
1:06:57colocar un elemento específico. Si la
1:07:00celda es un título de columna, vamos a
1:07:02utilizar un elemento llamado th, ¿sí?
1:07:05Que significa table heading o encabezado
1:07:08de tabla. Ahora, si la fila va a
1:07:11contener una celda rasa, ¿sí? Como de
1:07:13datos rasos, en ese caso vamos a
1:07:15utilizar un elemento distinto
1:07:18que se llama TD, que significa table
1:07:22data o data de tabla. Bien,
1:07:27entonces, fíjense, yo acá voy a colocar
1:07:29tres títulos de columna que van a ser
1:07:31producto
1:07:33o más de nombre, de producto, nombre.
1:07:36Eh, vamos a ponerle otro que se va a
1:07:38llamar eh
1:07:42eh marca
1:07:46eh y otro que va se va a llamar precio.
1:07:50Bien, una vez que los tengo, fíjense
1:07:53cómo se forman los títulos de de cada
1:07:55columna en la primera fila de la tabla.
1:07:58Piensen en horizontal, como que este
1:08:00está acá, el otro está acá y el otro
1:08:01está acá. Bien, pero en HTML se ven
1:08:05verticales, pero visualmente se ven
1:08:07horizontales. Y ahora tenemos que decir,
1:08:09bueno, esta segunda fila, esta este otro
1:08:12TR va a representar la fila siguiente y
1:08:14cada uno de los TD va a ser una celda.
1:08:17Entonces, yo le voy a decir acá, por
1:08:18ejemplo, nombre este termo. Acá voy a
1:08:23poner otro termo
1:08:25y después le vamos a poner marca. Bien.
1:08:28Ah, no, perdón, este es el primer termo.
1:08:30Termo. Ahí está. Le vamos a poner una
1:08:32marca, le vamos a poner acá. Me gustaba
1:08:34lo que había sugerido la
1:08:36Ahí está Stanley.
1:08:38Y de precio, bueno, eso como que se
1:08:41quedó en el tiempo, ¿no? 150,000.
1:08:44150,000. Bueno, no sé cuánto está un
1:08:45termo Stanley, pero bueno, es 150,000.
1:08:47Bien, fíjense que se que cada uno
1:08:49coincide con el anterior, es decir, este
1:08:51coincide con este,
1:08:55este coincide con este y este coincide
1:08:57con este, ¿no? En el mismo orden. Primer
1:09:01sea,
1:09:02primero, segundo, tercero, primero,
1:09:05segundo, tercero, primero, segundo,
1:09:07tercero, primero, segundo, tercero.
1:09:09Bien. Y ahora vamos a hacer una fila
1:09:11más. Vamos a crear la versión comunista
1:09:13del termo y le vamos a poner acá el
1:09:15termo Stalin. Y este como es como es
1:09:18este cooperativo vale cero er pesos.
1:09:23Bien, entonces fíjense ahí tenemos el
1:09:25termoostalin y el termo Stanley. Okay.
1:09:29Muy bien. ¿Y ahora qué quiero hacer? Lo
1:09:30que quiero hacer es armar un total. Pero
1:09:33para armar un total, la parte del total
1:09:36no tendría la misma estructura que las
1:09:37filas anteriores, porque la estructura,
1:09:39¿cuál es? Nombre, marca, precio. Nombre,
1:09:42marca, precio. Este sería el cuerpo de
1:09:43la tabla. Esta sería la cabecera de la
1:09:46tabla y la parte del total sería como el
1:09:48pie de la tabla. Sería como una parte
1:09:50extra que no corresponde con la
1:09:51estructura de las anteriores. Entonces,
1:09:53lo que hicieron en HTML es poder dividir
1:09:56las filas en tres partes para que sean
1:09:58más fáciles de reconocer. La parte de
1:10:01arriba, que son los títulos, se colocan
1:10:03dentro de un elemento llamado table
1:10:05head, ¿no? Cabeza de tabla.
1:10:08Ahí iría la parte de las cabecitas.
1:10:12Ven,
1:10:14noten que la diferencia entre la celda
1:10:16de cabecera y la celda de data es que la
1:10:18de cabecera visualmente es negrita y las
1:10:20otras como que son en fuente
1:10:25eh eh de grosor intermedio. Bien, luego
1:10:28vamos a colocar acá el Tibody.
1:10:31Sí,
1:10:35ahí está el Tbody y estos elementos van
1:10:37a ir en el TBody. Bien. Y ahora la parte
1:10:40para la parte total vamos a crear un
1:10:42tifot.
1:10:44Bien. Y en el tifot irá el total y el
1:10:47precio total de la suma, ¿no? Entonces,
1:10:50fíjense que ahí tenemos el uy
1:10:54el tifut.
1:10:56Ahora noten que el precio se colocó
1:11:00exactamente en la tercera columna. ¿Por
1:11:02qué no se coloca como acá en la segunda
1:11:04si solo tiene dos celdas? Eso es porque
1:11:06se agregó un atributo llamado call span
1:11:10que lo que hace es generar espaciados
1:11:11entre la celda y la siguiente. ¿Cómo
1:11:13funciona eso? Si yo no le pongo ese
1:11:15atributo, miren lo que pasa.
1:11:17Se me vuelve el precio a la segunda
1:11:19columna. Pero la segunda columna no es
1:11:21la de precio, es la de marca. Yo lo
1:11:22quiero coherente con el precio.
1:11:25Entonces, ¿qué hago? Le digo, por
1:11:26ejemplo, call span.
1:11:28Sí. Y le digo acá uno, ¿qué haría? No
1:11:31funciona con ninguna celda. Cuando le
1:11:33digo dos, funciona con, se fusiona con
1:11:36sí misma y la de al lado, como en el
1:11:37Excel. Entonces, miren, automáticamente
1:11:40lo manda a la segunda y quedaría más
1:11:43coherente. Ahora, a mí personalmente no
1:11:45me gusta que esté en este lugar porque
1:11:48implicaría que esto tendría la misma
1:11:50estructura que las dos de arriba. solo
1:11:52que le está faltando la marca, entonces
1:11:54sería más razonable que esto fuera al
1:11:57antibody y no altifot. Entonces, ¿qué es
1:11:59lo que hago? Trato de que esté más o
1:12:00menos como en el medio. Para que esté
1:12:02más o menos en el medio, uno lo que
1:12:05podría llegar a hacer es meter alguna
1:12:09celda trucha. Déjenme pensar. Colspan
1:12:14total.
1:12:17A ver, déjeme pensar
1:12:19cómo podemos hacer para que nos quede en
1:12:20el medio.
1:12:22Yo quiero que quede acá en el medio.
1:12:25La que quiero que se fusione es esta, no
1:12:27esta. Entonces, el contenido quedaría
1:12:30exactamente en el medio, porque si no
1:12:32esta lo que hace es empujar a la otra.
1:12:34Vamos a ponerle el a esta
1:12:37a la del precio. Y vamos a poner dos.
1:12:42Sí.
1:12:44Sí.
1:12:49Entonces, le vamos a sacar un segundo el
1:12:51numerito.
1:12:53A ver, no se me no me quedo como
1:12:55esperado. A ver.
1:12:58Uy, ¿qué? Rompí todo.
1:13:02A ver, ahora, ¿dónde me quedó? Me quedó
1:13:04en en el primero, che.
1:13:09No, estaba bien. Entonces, para no
1:13:11quiero que vaya a la punta, yo quiero
1:13:12que quede en el medio.
1:13:15A ver.
1:13:31Yo quiero que el total quede acá como en
1:13:33el medio en realidad.
1:13:46Y si le pongo una en el medio acá
1:13:49pasiva
1:13:54no me lo manda la marca.
1:13:57Ah,
1:13:59no me gusta como queda así.
1:14:01Con HTML se tendría que poder hacer que
1:14:03quede en el medio fusionado y que no
1:14:05empuje sí o sí, que esta se mueva al
1:14:06centro,
1:14:08pero como tiene como está en Colspan 2,
1:14:11si le pongo tres,
1:14:13no, igual no. Bu, entonces lo voy a
1:14:16tener, hay que hacerlo con Csss. Yo sé
1:14:18que había una forma de hacer que el
1:14:19total viniera al medio entre las dos
1:14:22entre las dos columnas, pero no me
1:14:24acuerdo cómo era.
1:14:26Pero sé que había una manera.
1:14:30Ahora no me acuerdo,
1:14:33pero bueno, igual no queda mal. No está
1:14:34feo, profe. Y si y si lo pone más para
1:14:38la derecha, o sea, un espacio más que
1:14:40precio,
1:14:42cosa que queda fuera,
1:14:44es que te queda fuera. Yo mi idea en
1:14:46realidad es solamente que esto se corra
1:14:48a este lugar, ¿no? A este punto. Pero si
1:14:51vos le ponés un espacio extra a esto, te
1:14:53saca para fuera el precio, ¿ves?
1:14:58Y y si se lo y si vos le ponés otro uno
1:15:01vacío acá, pasa lo mismo. Mira, yo le
1:15:04pongo uno vacío, ¿no? Como para que haga
1:15:07haga lugar.
1:15:10Ah, para que no sé por qué se me hace.
1:15:13Le pongo uno vacío, le saco el colsman
1:15:15como para que haya uno que empuje y el
1:15:17total me pasa la otra columna, no me
1:15:18queda entre medio, ¿ves?
1:15:21O sea, que no logro el efecto que
1:15:23quería.
1:15:27Pero bueno, no importa, igual no queda
1:15:29feo, queda bastante bien. Después le
1:15:31pueden agregar un titulito. Si le
1:15:33podemos agregar un título acá arriba.
1:15:35Eso se hace con una con un elemento de
1:15:37de las tablas que se llama Legend.
1:15:42Sí. Y le agregan ahí arriba un un
1:15:45título. Ah, no, para Legend era de otra
1:15:47cosa. Caption, perdón.
1:15:50Ahí está. Ven. Y queda un título de
1:15:52tabla. Sí. Si lo quieren negrita del
1:15:55título, le pueden agregar, por ejemplo,
1:15:57algún elemento de formateo de código,
1:15:59como por ejemplo la la etiqueta negrita
1:16:02que es esta y automáticamente lo hacen
1:16:04negrita, ¿ven? Pero depende si lo
1:16:06quieren o no. Los elementos de formateo
1:16:09de código son elementos chiquititos que
1:16:10les permite hacer que los textos cambien
1:16:12de estilo. Por ejemplo, si yo le pongo
1:16:14este de negrita, ¿ven? Si le pongo la I
1:16:18es itálic.
1:16:21Si le pongo la u es subrayado porque es
1:16:23de underline.
1:16:26Ven. Y así hay un montón. Si le pongo
1:16:28marcado, lo hace de color amarillito.
1:16:32¿Ven? Hay un montón de estos. Eh, si
1:16:34quieren los pueden investigar en HTML
1:16:36Reference porque les permite como darle
1:16:38impronta a los elementos. La mayoría no
1:16:41se usan, excepto los que resaltan
1:16:43importancia. Por ejemplo, si yo quiero
1:16:45que este este título en el SEO resalten
1:16:47importancia, pueden utilizar, por
1:16:49ejemplo, esta strong. Strong, además de
1:16:53hacerlo negrita, lo lo resalta en
1:16:55importancia para strong
1:16:59strong
1:17:03strong. ¿Qué era,
1:17:05no, está bien, no strong era.
1:17:10Ahí está Strong. Esta lo que hace es no
1:17:13solo lo pone negrita, sino que indica
1:17:16que este elemento es de alta importancia
1:17:18y lo resalta para el CEO. Otra que hace
1:17:20lo mismo, es la versión itálica,
1:17:24que vos tenés una versión negrita
1:17:27fuerte, ¿no? Con resalto, con resalto
1:17:29deseo y también tenés una versión
1:17:31itálica con resalto deseo. Esa se
1:17:33llamaba
1:17:36eh em así.
1:17:39¿Por qué se llama EM? Porque viene de
1:17:44énfasis,
1:17:46¿sí? Le da énfasis a ese texto, le pone
1:17:49un estilo itálica y lo resalta para el
1:17:51SEO.
1:17:53El otro strong lo hace negrita y lo
1:17:55resalta para el CEO. Son truquitos que
1:17:57van a ir encontrando cuando quieran
1:17:58resaltar puntualmente ciertas palabras
1:18:00dentro de su sitio, aunque no estén
1:18:02dentro de un H1 o algo así. pueden darle
1:18:05un resaltado artificial a determinada
1:18:07palabra clave para que salte en las
1:18:09búsquedas, ¿no? Así que es algo que
1:18:11pueden incorporar también en los en la
1:18:14en lo que vayan desarrollando. Profe, si
1:18:17quiero cambiar algo de la tabla, pero
1:18:19sin tocar el HTML, eso sería un
1:18:20JavaScript. Eh, ¿qué es lo que querés
1:18:22cambiar? Pues si querés cambiar estilos
1:18:24es con CSS. Ahora, si vos en la tabla lo
1:18:27que me estás diciendo, por ejemplo, es
1:18:28insertar, por ejemplo, información nueva
1:18:30que provenga de otro lado, como por
1:18:33ejemplo yo lleno un formulario con datos
1:18:35y que vaya a parar a la tabla, ¿te
1:18:37referís a eso? Lleno un formulario, le
1:18:38doy a enviar y va a parar a la tabla.
1:18:43O por ejemplo, que yo ejecuto una acción
1:18:45para eliminar un dato de la tabla.
1:18:48¿A eso te referís? Interactuar. Sí, eso.
1:18:50JavaScript.
1:18:51Eso básicamente, ¿cómo es? Vos eh creas
1:18:54un algoritmo con instrucciones
1:18:55determinadas. Cuando vos le das, vos
1:18:58programás el formulario, le das a
1:19:00enviar, JavaScript captura los datos del
1:19:03formulario, los convierte obviamente en
1:19:05un formato que entiende JavaScript, como
1:19:07puede ser un objeto. Luego agarra esos
1:19:09datos, agarra la estructura de la tabla
1:19:12y como la tabla básicamente va a estar
1:19:14armada en JavaScript, para hacerte
1:19:15completamente honesto, le va a insertar
1:19:18un nuevo registro. Es decir, la tabla
1:19:20para JavaScript es esto,
1:19:26¿sí? Y todo lo de adentro lo programamos
1:19:29para que se inserte y se elimine vía
1:19:31JavaScript. Es decir, que cuando la
1:19:33tabla es interactiva,
1:19:35JavaScript se encarga de meter y poner
1:19:36los registros, o sea, meter un TR, sacar
1:19:38un TR, meter un TR y sacar un TR.
1:19:41Cuando la tabla es estática, como por
1:19:43ejemplo que aparezca en la página de un
1:19:45psicólogo, es puro HTMPL.
1:19:48Pero cuando la página es dinámica, es
1:19:50JavaScript la que va a insertar y sacar
1:19:53los TRs. Ya van a ver, hay que programar
1:19:55cómo se arma una tabla interactiva.
1:19:58Son dos formas diferentes de hacerlo.
1:20:00Que puse por ahí me fijé y dice que
1:20:02Colpan 2. Me imagino que o sea, un CFAN
1:20:042 elimina el TD adyacente a usa Rose
1:20:09Pan. Ah, esa no me la acordaba. O sea,
1:20:11que no me la acordaba la Rose Pan. Mira
1:20:14vos.
1:20:15Son cosas que se las van a olvidar de no
1:20:17usarlas nunca. Cuando las estudiaron se
1:20:19las van a acordar, si estuvieron
1:20:20practicando mucho después no se las van
1:20:22a volver a acordar nunca más. Lo
1:20:23importante es que se acuerden las que se
1:20:25usan, porque esta esta tampoco la uso
1:20:27solamente cuando doy clase. En la nunca
1:20:30metí un colspan, pero es para que vean
1:20:33nada más lo que se puede hacer con HTML,
1:20:34¿no? Así que bueno, en líneas generales
1:20:37lo que les mencionaba era que como
1:20:39centrar un div eh centrar un div en
1:20:41realidad es bastante más fácil de lo que
1:20:43parece. Pasa que eh, ¿por qué hay tanto
1:20:46hay tanto eh chiste con lo de central el
1:20:48di? Porque en realidad es un chiste que
1:20:51está orientado a los de backend, ¿no?
1:20:54Los de backend no tocan CSS. Entonces,
1:20:57¿qué pasa cuando en una empresa el se
1:21:00enferma el frontend, no? O se va de
1:21:02vacaciones, entonces hay que entregar
1:21:05algo para algo al cliente muy urgente y
1:21:07le dicen alaken que arregle,
1:21:10no sé, el cajón visual ese de la
1:21:12interfaz tal. Y el backend va y tiene
1:21:15que centrar el cajoncito y como
1:21:19no sé cómo se centra esto. Entonces y
1:21:21entonces el chiste siempre es esto. Es
1:21:23un chiste clásico. Si tengo por acá mano
1:21:26una.
1:21:28Imagínense que esto es una regla. Sí.
1:21:31Entonces, ¿qué es lo que hace el el
1:21:32chiste? es que el backend agarra la
1:21:34regla y como no sabe medir en píxeles,
1:21:36pone la regla contra el monitor y trata
1:21:38de medir cómo mover el cajón en
1:21:39centímetros, ¿no? Ese es el chiste,
1:21:43¿eh? Y de ahí sale la gracia de que
1:21:46dicen que el frontend no es backend
1:21:49porque le tiene miedo el backen y que el
1:21:51backen no es frontend porque le le da
1:21:53asco CSS, ¿no? O le tiene a versión a
1:21:55CSS. Entonces,
1:21:58eh aparece el meme este que es más viejo
1:22:01que la escarapela, pero este es uno, el
1:22:05del back and developer que que intenta
1:22:07usar CSS,
1:22:10¿no? Ahí con la regla contra el monitor
1:22:12tratando de hacer CSS. Y el otro chiste
1:22:14es el de el el backen cuando prueba CSS.
1:22:20No son son viejísimos estos estos memes,
1:22:23pero
1:22:25nunca para mí nunca pasan de moda, qué
1:22:27sé yo.
1:22:29Este,
1:22:37pero bueno, eh, el el los Fronden saben
1:22:40centrar un divico hasta con los ojos
1:22:42cerrados y con los pies, pero lo va que
1:22:43es medio como que
1:22:46Y bueno, este el clásico chiste es este.
1:22:52[risas]
1:22:53Igual yo creo que al principio puede ser
1:22:55que a ustedes les cueste un toque
1:22:56central el deep, pero porque el modelo
1:22:58con el que se centra se llama Flexbox y
1:23:01tiene varias propiedades, pero lo
1:23:03hicieron dos, tres veces y ya se lo
1:23:04memorizaron. Es refácil. Es más, les voy
1:23:06a enseñar cómo construir una clase
1:23:08prefabricada que con solo colocársela a
1:23:11un elemento HTML automáticamente se
1:23:12centra dentro de su contenedor y con eso
1:23:15tipo ya está, resolvieron el 95% de
1:23:18problemas.
1:23:21Bueno, capaz vos te a vos se te da bien
1:23:22CCS. Pero la mayoría de no saben ni ni
1:23:26cuáles son las propiedades, entonces
1:23:28como que y tampoco que les interese
1:23:29saberlo, ¿eh? Pero a ver, siempre que a
1:23:32vos te toca tocar un área que vos no
1:23:34conocés era un problema. Hoy ya no,
1:23:36porque hoy agarrass a la IA y el Ben
1:23:39agarra y le dices, entrame este cajón y
1:23:40te lo centra. El tema es que vos le
1:23:42tenés que saber dar una orden concreta
1:23:44para que te haga algo en CSS, porque CS
1:23:47CSS en realidad es más el conocimiento
1:23:49de diseño que tiene la persona que que
1:23:52lo que en realidad va a meter de código.
1:23:54Vos podés, si vos podés saber CSS
1:23:57recontra resarpado en términos de
1:23:58código, pero si es un gusto horrible
1:23:59para la estética, todo lo que ha va a
1:24:01ser horrible, independientemente de qué
1:24:02tan bueno esté el código. Entonces, la
1:24:05cuestión es que si el chavón de Backen
1:24:07este es es estética, o sea, tiene una un
1:24:10criterio de diseño espantoso,
1:24:13lo que le pida la guía va a salir
1:24:14horrible igual.
1:24:16Es más, eh, mi jefe, por ejemplo, quería
1:24:19que había había una idea entre los del
1:24:22equipo de crear un sitio web para que
1:24:25las cosas que estamos haciendo de
1:24:26freelancer los clientes nos puedan
1:24:29encontrar, porque me dio que los
1:24:30clientes que tenemos son o los
1:24:32enganchamos por medio de una página web
1:24:34de gente buscando freelancers eh para
1:24:37que les arreglen el frankenstein ese que
1:24:39hicieron con IA o eh gente de boca en
1:24:41boca, ¿no? empresas de boca en boca,
1:24:44pero no tenemos como un sitio web eh
1:24:47donde nos puedan encontrar. Entonces
1:24:48salió la idea de hacer un sitio web.
1:24:50Miro, como el como que el el líder del
1:24:51equipo se se emocionó y por algún motivo
1:24:55en lugar de decirnos que a nosotros que
1:24:56hagamos el sitio web, lo hizo él, pero
1:24:59el chavón es un arquitecto backend, o
1:25:00sea, no caso un fulls. Entonces agarró y
1:25:03le pidió a la guía que le armara el
1:25:04sitio. En 3 horas armó el sitio y de
1:25:06repente me pasan el enlace y me dicen,
1:25:08"Mira." Y digo, "¿Qué es eso?"
1:25:10el sitio el sitio de de de de la de la
1:25:13firma freelancing para que para que
1:25:15empecemos a buscar clientes por sitio.
1:25:18Toco el enlace, lo miro el sitio y digo,
1:25:22"¿Qué es esto?" Le digo, "Es horrible."
1:25:25Era un sitio con grises, negros y
1:25:28blancos y que los títulos eran así de
1:25:30grandes y los textos así de chiquitos.
1:25:32Parecía un periódico. Encima tenía
1:25:34fuente de texto de periódico. Parece un
1:25:36periódico de de 1970 de Estados Unidos.
1:25:39o mi 950.
1:25:41Entonces yo tipo me agarré la cara y mi
1:25:43compañera me dice, "Sí, tendríamos que
1:25:45hacer unos retoques, esto, ¿no? Yo le
1:25:47digo unos retoques." Le digo, "Tenemos
1:25:48que dar vuelta todas las todos los
1:25:50estilos. Es horrible esto." Y me dice,
1:25:52"Bueno, dale la buena. Se emocionó lo
1:25:55hizo con intención, ¿viste? Este, claro,
1:25:58es como cuando te regalan algo que tipo
1:26:00es horrible, pero la intención es lo que
1:26:02cuenta, quedó ahí." Pero sí, o sea, no
1:26:05hay no tiene como mucho criterio
1:26:07estético. Eh, ahora la parte de lógica
1:26:10se redefiende muy bien, o sea, es muy
1:26:12bueno el tipo, pero eh pero claro,
1:26:15todo siento que mi lado va a ser el
1:26:19Bueno, hay gente que en realidad tiene
1:26:20buen criterio estético por simplemente
1:26:22porque es obsesivo, no porque haya
1:26:24estudiado arte ni nada, es obsesivo y
1:26:26punto. y otra gente que sí tiene alguna
1:26:28especie de de buen criterio natural para
1:26:30el arte y pero hay gente que no no
1:26:33solamente no lo tiene, sino que no le
1:26:34interesa tampoco tenerlo nunca ni le va
1:26:36a interesar tenerlo. Entonces es como
1:26:38que alejarse de la parte estética o de
1:26:40diseño para las personas que no tienen
1:26:42buen criterio estético y no les interesa
1:26:43tampoco tenerlo, yo creo que es un una
1:26:46buena decisión. A ver, no digo que no
1:26:48puedas estudiar un poco y y lograrlo,
1:26:50pero si lo vas a hacer sin ganas porque
1:26:52realmente no te gusta, ¿qué sentido
1:26:54tiene? No es preferible hacer algo donde
1:26:57sabes que te vas a mantener motivado y
1:26:59que vas a poder mantener una buena
1:27:00disciplina estudiándolo porque te gusta
1:27:02o porque te resulta fácil y es
1:27:05llevadero,
1:27:07¿no? Eh, al fin y al cabo, la mayoría de
1:27:10ustedes imagino que que estarán
1:27:11intentando entrar a esta industria
1:27:13porque les parece como algo que podrían
1:27:16hacer todos los días. Si están
1:27:18pensándolo solamente por términos de
1:27:19dinero, cuando empiecen a ver las partes
1:27:21complicadas de esto más adelante, ni
1:27:23siquiera les digo en esta diplomatura,
1:27:25cuando enfrenten las cosas complicadas
1:27:26en en el aburo real, van a decir, "¿Por
1:27:29qué estudié esto?"
1:27:30No, y más cuando la hay muchos
1:27:33developers que entraron a este a esta
1:27:34industria por plata y ahora que salió la
1:27:35guía se como que eh sienten que se
1:27:38tienen que actualizar permanentemente
1:27:39porque todos los meses salen cosas
1:27:41nuevas y se están quedando atrás y como
1:27:43no les gusta estudiar y tampoco les
1:27:45gusta la industria, es como que se
1:27:47volvió recomplicado. Hace 15 años atrás
1:27:49sabías lo mínimo, empezas a laborar y
1:27:51las tecnologías no cambiaban en el
1:27:53tiempo casi. Entonces estabas 5 o 6 años
1:27:55laborando con las mismas herramientas.
1:27:57hoy en día que Cloud Code, que Cursor,
1:28:00que Chat GPT, que Lunchain, que qué sé
1:28:03yo. Y cuando te diste cuenta estás todos
1:28:05los meses aprendiendo una tecnología
1:28:07nueva. Y para el que no le gusta, eso es
1:28:09muy abrumador,
1:28:11¿no? Para el que le gusta estudiar,
1:28:13aunque no le guste mucho en sí la
1:28:14tecnología, pero le gusta estudiar, es
1:28:16como que se le va a ser natural el hecho
1:28:18de adquirir conocimientos nuevos.
1:28:21Pero pero hay otras personas que no, que
1:28:24aprenden solamente haciendo o
1:28:27directamente no les gusta adquirir
1:28:28nuevos conocimientos y les gusta como
1:28:29estar siempre lo mismo a lo largo del
1:28:31tiempo y se les complica. Es una
1:28:32industria extremadamente cambiante,
1:28:36no es como, qué sé yo, pensalo, haces la
1:28:39hiciste la carrera de física en 1970 y
1:28:43lo que cambió en la física de 1970 hasta
1:28:45hoy.
1:28:46cosas ínfimas, capaz que casi no
1:28:48necesita un retoque el plan de estudio
1:28:51de la universidad. Hizo un físico
1:28:53bastante parecido al de 1970.
1:28:56Acá no, acá antes cambiaban las cosas
1:28:58cada 5 años y hoy están peor, cambian
1:29:02cada meses. Entonces es como
1:29:06la mayoría de los programadores todavía
1:29:07no se adaptó a a la aparición de de una
1:29:10que te hace todo el laburo y saber qué
1:29:12para qué sirve, para qué no. A ver qué
1:29:14puso ahí Antonela. Eh, les recomiendo
1:29:17hacer un curso corto de UX UI, no tanto
1:29:20por lo visual, sino por las buenas
1:29:21prácticas, experiencia de usuario. A
1:29:23ver, nunca viene mal, eh, para mí si
1:29:24ustedes tienen la oportunidad de pegar
1:29:26un curso de UX, ya sea que le salga
1:29:28barato o que sea gratuito,
1:29:31está bueno. Si quieren yo
1:29:34les doy acceso a mi Discord personal,
1:29:36después se los pego en el
1:29:41después se los pego en el en el en el
1:29:44campus, pero yo ahí dejé un montón de
1:29:46cursos si ustedes quieran. Eh, hay de
1:29:50diseño y esas cosas también son o de
1:29:52YouTube o que son de algún curso que
1:29:55encontré pirata.
1:29:57Eh, no les dejé, si le dejé algún curso
1:29:59pago, pues se pueden se puede conseguir
1:30:01pirata. Eh, eh,
1:30:05yo siempre abogo, porque tratan de hacer
1:30:07las cosas de manera autodidacta.
1:30:09Eh,
1:30:12tomen, les paso mi Discord personal, que
1:30:14es donde están los alumnos que tuve a lo
1:30:16largo de estos 5 años. Hay como 1000
1:30:18personas acá dentro. Eh, no es que lo yo
1:30:21no lo actualizo muy seguido, la verdad,
1:30:22pu bastante vago, pero por lo menos dejé
1:30:25unas cuantas cosas. Ahí se los dejo.
1:30:26Después igual lo copio en únanse si
1:30:29quieren, lo copio después en el en el en
1:30:32el campus y en la parte acá abajo del
1:30:34Discord, ¿ven? Donde dice cursos. Acá
1:30:37tienen libros, audiolibros, cursos. En
1:30:39la parte de cursos hay de UXUI acá
1:30:41arriba, creo. A ver. Eh, hay de Figma,
1:30:45pero está tiene de Figma tiene
1:30:46incorporado un poco de UX. No sé si hay
1:30:48uno exclusivamente de UX, parece que no,
1:30:51pero este de Figma igual les va a venir
1:30:52bárbaro porque esto es para ser
1:30:54maquetados de las pantallas de de una
1:30:57aplicación mobile o de una un sitio web,
1:30:59¿no? Eh, también tiene introducción
1:31:01lógica, programación, eh WordPress,
1:31:04también hay un curso de WordPress. Por
1:31:05acá también hay de Git, por ejemplo.
1:31:07Este es el que hice yo para aprender Git
1:31:09en su momento, es de un gallego que se
1:31:10llama Dani. Acá hay algunos que son
1:31:12pagos, pero se pueden conseguir piratas.
1:31:14Yo todo, estos son tod todos estos
1:31:15cursos yo los hice a lo largo del tiempo
1:31:17y dejé los que más me gustaron. Bueno,
1:31:19algunos son míos, estos de acá me dice,
1:31:21"Es son míos, pero pero porque nada,
1:31:24antes yo había puesto el otro chavón y
1:31:26cuando yo hice los míos, puse los míos
1:31:27acá, pero hagan los míos que ustedes
1:31:29quieran. No soy un youtuber que labura
1:31:31de YouTube, así que de en su momento
1:31:33quise hacer un par de cursos y quedaron
1:31:36ahí y están encima no tienen no tienen
1:31:38edición, son recrudos, ¿eh? Así que acá
1:31:41tienen cosas y busquen acá tienen libros
1:31:43también si quieran. Fíjense que dejé
1:31:45libros de de libros de desarrollo, o
1:31:48sea, libros de programación y de
1:31:49desarrollo
1:31:51tienen un poco de todo. Hasta Python ahí
1:31:53acá abajo también acá abajo tienen de
1:31:55habilidades blandas, tienen integridad y
1:31:57relaciones personales, liderazgo,
1:31:59gestión de tiempo, hábitos, comunicación
1:32:02eficaz, superación de traumas por si
1:32:04alguno tiene
1:32:06ansiedad.
1:32:07Y de estos libros les dejé acá los
1:32:10audiolibros para que no le guste leer
1:32:12audiolibros de los que pude encontrar eh
1:32:15relatado por una persona, porque los que
1:32:16están relatados por son bastante feos de
1:32:18escuchar, eh, más si suenan como lo
1:32:21kendo. Así que acá les dejé los libros
1:32:22en audiolibros. Si quieren chusmear ahí
1:32:24también tienen algunas cosas,
1:32:27pero pero bueno, hace rato que no
1:32:29actualizo todo esto, así que tendría que
1:32:30actualizarlo para este mundo de la IA
1:32:31actual. Está medio viejazo todo esto en
1:32:33el sentido de que no hay nada de libros
1:32:35de IA o de o de audiolibros de IA y de
1:32:39cursos de IA. Yo tenía que agregar de
1:32:40eso y yo vi que muchos de ustedes
1:32:42estuvieron haciendo el de el de Moure,
1:32:44creo que de Mour era, ¿no? El que estaba
1:32:46haciendo estos días, que Mour saca dos o
1:32:49tres como clases gratuitas para tratar
1:32:52de enganchar gente para su curso pago.
1:32:55Está buena la introducción, pero habría
1:32:57que agregar libros. Yo yo ahora estoy
1:33:00leyendo un libro de ingeniería bastante
1:33:02denso, bastante denso.
1:33:05Eh, lo tengo por acá, no se lo
1:33:07recomiendo para ahora. Más adelante si
1:33:09ustedes quieren eh yo reforzaría lo que
1:33:11vayan viendo, pero
1:33:14este libro está muy fuerte, la verdad.
1:33:17Eh, no está en español. Les aviso de
1:33:20antemano, para que no sepa inglés le va
1:33:21a costar el triple leerlo, pero además
1:33:23es bastante denso. Eh, me quedé en la
1:33:25página 90. Eh, se llama AI Engineering.
1:33:30El autor, el autor es una mujer que se
1:33:32llama Chip Huyen, que es una vietnamita.
1:33:35Y esta mujer es una bestia. O sea, la
1:33:37mina está desde las épocas, en el 2012,
1:33:40cuando se empezaron a desarrollar los
1:33:42primeros modelos de IA que no se podían
1:33:44llevar a la práctica porque las
1:33:45computadoras no se los bancaban y tenían
1:33:48que esperar a que las computadoras
1:33:49mejoraran para que el modelo de guía
1:33:51corriera bien y pudiera llegar a usarse
1:33:53para usuarios o para empresas. Se
1:33:55imagínense de dónde está la mina. Pasó
1:33:57por todas las empresas, por envidia,
1:33:59pasó por Google, pasó por todos lados.
1:34:02Eh, la mina si quieren el sitio de la
1:34:04mina es este.
1:34:08Eh, la el sitio de Chipen es este. Esta
1:34:11es la vida damita que escribe el libro.
1:34:15Es es esta chica. es una ingeniera de la
1:34:18eh, pero es una eminencia la
1:34:20mina esta básicamente. Y bueno, el libro
1:34:22este que escribió es lo mejor de lo
1:34:24mejor que hay por hoy en ingeniera idea,
1:34:26pero es durísimo el libro de traca
1:34:29rebién, pero después cuando empieza a
1:34:31avanzar es como que cuesta seguirle el
1:34:32hilo porque son demasiado los conceptos
1:34:34que tiene de ingeniería y eso que yo ni
1:34:37siquiera llegué a las partes más las
1:34:38partes más pesadas. Yo por la página 90,
1:34:41que recién es casi el final de
1:34:44entendiendo los modelos fundacionales,
1:34:46pero después hay eh metodologías de
1:34:48evaluaciones, evaluación de sistemas,
1:34:50ingeniería de prompting. O sea, yo esto
1:34:53lo había estudiado
1:34:55en artículos de internet, ¿no? O
1:34:58pequeños cursitos que fui encontrando y
1:35:00ya había entendido la la en líneas
1:35:02generales los conceptos de IA. Cuando
1:35:04entré en el libro este me empecé a dar
1:35:05cuenta de que había leído o había
1:35:07estudiado un iceberg chiquitito así de
1:35:09información y la mina esta directamente
1:35:12todo te lo explica con el objetivo de
1:35:14hacerte hacer proyectos reales.
1:35:17Claro. Y yo vine este libro porque en
1:35:19los proyectos reales que yo estaba
1:35:20haciendo con con IA incorporada me
1:35:22estaban empezando a costar algunos
1:35:24conceptos y me estaba costando avanzar y
1:35:26cuando caí este libro empecé a ver que
1:35:28la mina lo explicaba todo, pero es duro
1:35:30de tragar, pero está bueno, la verdad
1:35:31que está muy bonito, ¿eh? Esta les
1:35:34recomiendo casi todos los libros que
1:35:35puedan leer de esta editorial, porque
1:35:37todos los libros de esta editorial están
1:35:39hechos por diferentes desarrolladores
1:35:41que son eminencias.
1:35:43Entonces, cada uno de los libros de esta
1:35:45editorial que van para cada área, no sé,
1:35:48backend, JavaScript, Python, eh no sé, e
1:35:54desarrollo de videojuegos, ingeniería
1:35:57machine learning, todos los libros de
1:35:59esta editorial son espectaculares,
1:36:01así que cualquiera que agarren de acá
1:36:03son todos muy muy buenos. En JavaScript
1:36:05hay un montón. Yo me leí como tres de
1:36:07esta editorial de JavaScript. Son muy
1:36:08buenos, pero la verdad que este libro
1:36:10está muy bueno. Pasa que es un poco
1:36:12duro. Sí, si yo antes de arrancar con
1:36:15este libro les recomendaría la ruta de
1:36:17estudio de ingeniería
1:36:19que la pueden sacar a esta página que se
1:36:22llama Roadmap SH. Yo después se les voy
1:36:24a explicar con más detalle más adelante,
1:36:26pero acá tienen en esta roadmap SH
1:36:28tienen una ruta de estudio de ingeniería
1:36:31NIA.
1:36:32Y en este y en esta ruta de estudio, yo
1:36:35lo que empezaría a hacer es empezaría a
1:36:38ir investigando cada uno de estas
1:36:39cositas en Google, ¿no? O con o abren
1:36:42Shemini y le empiezan a preguntar qué es
1:36:45un agi, qué es un, no sé, un fine
1:36:48tuning, qué es un prompt engineering,
1:36:50qué es un rag, qué es un token, qué es
1:36:52un context, qué es una una temperatura.
1:36:55Y entonces como que van empezando a
1:36:57entender conceptos relacionados a cómo
1:36:58se construyeron las IAS, cómo funcionan
1:37:01por dentro, cómo eh cómo encuentran la
1:37:04conexión con una palabra que vos le
1:37:05diste y te traen una palabra
1:37:06relacionada, porque cuando le escribís
1:37:09mucho a lo largo del tiempo empieza a
1:37:11delirar y empieza a alucinar. Entonces,
1:37:13empezar a entender cómo funcionan,
1:37:15porque al fin y al cabo, cuando ustedes
1:37:16terminan de estudiar la diplomatura en
1:37:19Full Stack, que es un prerequisito para
1:37:21poder laborar como ingeniero de IA, ¿no?
1:37:24Todo este conocimiento de código que
1:37:26aprendieron y de estructura para armar
1:37:28aplicaciones, lo van a usar para darle
1:37:30órdenes correctas a la IA para
1:37:32desarrollar cinco veces más rápido.
1:37:34Pero, ¿qué pasa si vos no entendés cómo
1:37:35funciona la IA por dentro? Por más que
1:37:37entiendas mucho de programación, vos vas
1:37:39a hacer, vas a gastar el triple de
1:37:40tokens de lo que tendrías que gastar.
1:37:43vas a hacer que de ahí alucine y te va a
1:37:44dar muy malas recomendaciones,
1:37:47eh, y vas a terminar haciendo un código
1:37:48espantoso porque a pesar de saber
1:37:51programación no sabes usar la
1:37:52herramienta. Entonces, bueno, a la larga
1:37:54hay que terminar entendiéndola de fondo.
1:37:57Entonces, yo me estudié toda esta rutita
1:37:59más o menos de punta a punta, pero muy
1:38:00superficial y ahora encaré el libro este
1:38:03que está bastante duro de roer, pero
1:38:06bueno, nada, son cosas que van
1:38:07agregando, ¿vieron? Pero lo importante
1:38:09es que sepan de qué trata todo, porque
1:38:11al fin y al cabo, cuando entiendan más o
1:38:13menos el contexto general, van a empezar
1:38:16a poder priorizar lo que tienen que
1:38:17aprender, ¿no? Entonces, una vez que más
1:38:20o menos recorrieron toda la ruta de full
1:38:21stack, van a decir, "Okay, ¿qué es lo
1:38:24que yo más tengo que saberme bien y qué
1:38:26es lo que puedo saber superficialmente?"
1:38:29No, entonces, Git lo puedo saber
1:38:31superficialmente, ¿no? Eh, JavaScript lo
1:38:34puedo saber superficialmente, no. HTML
1:38:36lo puedo saber superficialmente, sí. Y
1:38:39hasta ahí sí, CSS hoy en día si lo
1:38:42puedes saber superficialmente. Si más o
1:38:44menos conocer las propiedades y cómo
1:38:46funciona. CSS HTML sí. JavaScript no.
1:38:48React lo puedo saber superficialmente,
1:38:50¿no? Eh, no sé, Backend lo puedo saber
1:38:52superficialmente, depende. Si vas a
1:38:54trabajar como frontend, sí. Si vas a
1:38:57trabajar en una en una startup y vas a
1:39:00vas a hacer un poquito de todo, no. lo
1:39:01tenés que saber mejor porque tenés que
1:39:03poder entender los requerimientos y así
1:39:06vas a poder discernir qué podés tenés
1:39:08que saber muy a fondo y que no tanto. Y
1:39:11lo mismo va a pasar en esta ruta, va a
1:39:13ir vas a ir viendo los temas y vas a
1:39:14decir, "Okay, esto me lo tengo que saber
1:39:15resarpado, esto con saberme los
1:39:17conceptos me alcanza y así como que vas
1:39:19mechando." Pero quién sabe lo que no es
1:39:22como una carrera universitaria donde
1:39:23ustedes tienen que aprobar todas las
1:39:24materias con nueve o con o con ocho para
1:39:27que los recomienden en laburos. Acá uno
1:39:29va con criterio personal, seleccionando
1:39:32en qué profundiza y en qué no. Y se
1:39:35pueden guiar de qué es importante en que
1:39:36no con algún youtuber que sea experto en
1:39:39cada tema.
1:39:41Por ejemplo,
1:39:43si quieren saber de arquitectura,
1:39:46es como que es cómo estructurar un
1:39:47proyecto, las carpetas, los archivos,
1:39:49cómo subdividir contenido. Hay un hay un
1:39:53youtuber que se llama Alan, que tiene un
1:39:55canal que se llama Gentleman
1:39:56Programming. El loco es una bestia, es
1:39:58un crack. Encima tiene el título de de
1:40:01MVP de Google y el tipo tiene casi todos
1:40:05sus videos son de arquitectura,
1:40:07¿eh? y son de React o de Angular, pero
1:40:09es pura arquitectura. Y entonces, claro,
1:40:11si vos querés saber cómo darle órdenes a
1:40:15la IA para armar arquitectura, el canal
1:40:17de ese chambón es excelente. Si no es el
1:40:19mejor, pegan el palo, por lo menos de la
1:40:21hispana. Y así pueden encontrar expertos
1:40:23en diferentes temas que les puedan
1:40:25guiar, por ejemplo, de que es muy
1:40:26importante y que no tanto. Sí. Y van
1:40:29como de a poquito y y van tratando si el
1:40:33chavón menciona un concepto, ir
1:40:35investigarlo. ¿De qué trata? A ver, ¿y
1:40:36por qué es tan importante? y a poquito
1:40:38como que van avanzando, pero eh es un
1:40:43camino relativamente largo sentirte
1:40:46cómodo acá dentro, porque lo más común
1:40:49en la mayoría de los de los estudiantes
1:40:51y de los profesionales es sentir que
1:40:53saben mucho menos de lo que en realidad
1:40:54saben o que requieren de saber mucho más
1:40:56de lo que en realidad es necesario.
1:40:59Te dará sensación de que no terminas
1:41:01jamás
1:41:03el de Alto.
1:41:05Eh, pero preparado Dalto No, pero Dalto,
1:41:08Dalto no paga los cursos o sí todos los
1:41:11cursos de Dalto no son gratuitos.
1:41:15No, pero viste que en YouTube vos podés
1:41:18eh como unirte a la comunidad, como si
1:41:21vos te querés unir a la comunidad de él,
1:41:24está eso. El otro día me fijé,
1:41:27no sabías. salí rápido. [risas]
1:41:30No sabía que tenía un unirse y además
1:41:32que la mayoría de la gente que tiene un
1:41:34unirse suelen ser entre 1,000 pes y
1:41:3615,000 pes. Es rarísimo que alguien
1:41:38ponga un unirse por 700 lucas. ¿Qué
1:41:40tiene adentro en un curso de de qué sé
1:41:43yo? De de
1:41:44no sé.
1:41:48Es que no es que no puede ser que que
1:41:50alguien ponga un unirse de 700 lucas. Es
1:41:52imposible. Linux Torbal del chavón, el
1:41:55creador de Linux. ¿Quién ahí adentro?
1:41:59¿Qué es una un curso con certificado de
1:42:02hardware?
1:42:04Este, pero bueno, eh, el famoso síndrome
1:42:07dispostor, sí, es que en realidad es muy
1:42:10real porque como uno entra a la
1:42:12industria y ve 1000 tecnologías y 1000
1:42:14lenguajes y 1000 áreas y como que sé yo,
1:42:17da esa sensación de que uno no termina
1:42:18de aprender nunca todo. Yo lo padezco
1:42:21durísimamente, ser honesto, pero con el
1:42:24tiempo que vos vas avanzando, te vas
1:42:25dando cuenta de que se puede trabajar
1:42:27con mucho menos de lo que parece. El
1:42:29tema es que las las postulaciones de las
1:42:33empresas están recontrainfladas,
1:42:35no requieren un tipo que sepa todo lo
1:42:37que ponen, pero sin embargo ponen como
1:42:39que quieren que tenga todo eso.
1:42:40Entonces, a vos te da la sensación de
1:42:42que no llegas nunca. Y la realidad es
1:42:44que, bueno, uno va tirando donde puede,
1:42:46pero también va haciendo enlaces. Y
1:42:47cuando vos vas haciendo enlaces con
1:42:48gente, tarde o temprano, uno te dice,
1:42:49"Che, mi empresa, falta uno, querés
1:42:51dejar un currículum, yo te paso de
1:42:52referido." Y entraste y sabías mucho
1:42:54menos de lo que la empresa buscaba en la
1:42:57postulación. Pero, ¿por qué entraste?
1:42:59Porque eso es referido de y eso es más
1:43:01importante para la empresa porque
1:43:02alguien está validando que vos sabés y
1:43:04además te conoce y sabe que no vas a
1:43:06chorear por decir una manera no que no
1:43:08es una persona de desconfianza entonces
1:43:10con lo que sabías alcanzaba.
1:43:13Entonces, para mí la mejor forma es ah
1:43:15700 pesos me parecía. Este, entonces
1:43:19para mí eh vayan estudiando el con
1:43:25ritmo que se sientan cómodos y y nada y
1:43:30sienta vayan tratando de entender bien
1:43:32cada concepto que que van adquiriendo y
1:43:34practíquenlo como armen un proyectito
1:43:36que tenga esos conceptos nuevos.
1:43:38Entonces dice, "Bueno, aprendí estos
1:43:40conceptos, proyectito, aprendí estos
1:43:41conceptos nuevos, proyectito, aprendí
1:43:43este concepto nuevo, proyectito." Y de a
1:43:45poquito vas metiendo todos en acción.
1:43:48Y cuando y si lograste armar un proyecto
1:43:49con esos conceptos, podés darte por
1:43:51sentado que lo entendiste, no hace falta
1:43:53que te lo sepa de memoria, nadie te va a
1:43:54tomar un examen, pero como ir armando
1:43:57cositas.
1:43:58¿Para qué puso
1:44:00Alberto Fernando? curso de ay Dios mío.
1:44:03No, no miro eso. Me da gracia estación
1:44:05porque yo hice curso de marketing,
1:44:07diseño y ahora desarrollo. Tengo
1:44:09terrible mental, ¿no? De hecho, a ver,
1:44:12yo hice de todo. Mira, ustedes vieron el
1:44:14Discord que les mostré, ¿ustedes vi la
1:44:15cantidad de cursos que yo hice? ¿Ustedes
1:44:17se piensan que yo uso la mitad de todo
1:44:18eso que hice? O sea, miren esto.
1:44:22O sea,
1:44:26mira la cantidad de cursos que hice. Hay
1:44:28cursos que son de 40 y pico de horas.
1:44:31O sea, es es una locura. Este de
1:44:33JavaScript, el de Mircha, tiene 165
1:44:37videos de entre 25 y 40 minutos y le
1:44:40dice dos veces porque soy medio lelo.
1:44:43Entonces, la cuestión es
1:44:47cuando vos agarrás y te te la das de
1:44:48capo, decís, "No, yo lo miro así todo de
1:44:51corrido y ya aprendí." Y después vas a
1:44:52hacer un proyecto y no sabes por dónde
1:44:54arrancar.
1:44:55Mal. Estudialo bien, no sea, [risas] no
1:44:58sea no sea boludo, porque vas a tener
1:45:00que volver y te lo vas a tener que
1:45:01volver fumar de vuelta por no haberlo
1:45:02hecho bien la primera vez y 165 vidas no
1:45:05es poquita cosa. Entonces este uno hace
1:45:09un poco de todo también y
1:45:13eh y el muchas veces lo que pasa es que
1:45:15uno quiere aprenderse todas las
1:45:16tecnologías de una y hace curso, curso,
1:45:19curso, curso y nunca hace proyectos de
1:45:20cada cosa que aprendió, nunca puso
1:45:22práctica nada y después te olvidas las
1:45:23cosas.
1:45:25Se piensan que uno solamente con
1:45:26estudiarlo las cosas te van quedando.
1:45:29Entonces este hay que evitar eso. Hay
1:45:32que evitar la cuestión de de simplemente
1:45:34hacer mirar el curso y no y no
1:45:36practicar. Y lo de la práctica tiene que
1:45:38ser algo que se tiene que convertir en
1:45:40algo autodidacta, porque qué sé yo, yo
1:45:44les puedo dar tareas, les puedo poner un
1:45:46proyecto valatorio, pero eh en ese mismo
1:45:49tiempo ustedes de manera autodidiata
1:45:51podrían haber hecho el triple de cosas y
1:45:53podrían haber avanzado el triple rápido,
1:45:55pero hay gente que capaz dice, "Bueno,
1:45:57espero la tarea del profe o espero el el
1:45:59evaluatorio." Empiezan a construir cosas
1:46:00con lo que van aprendiendo sin miedo a
1:46:02nada. Es más, si me lo quieren mandar y
1:46:04me dicen, "Profe, mire, construye esto,
1:46:05¿qué le parece?"
1:46:06Lo miro, no tengo ningún problema. Pero
1:46:10pónganse porque no hay otra forma de
1:46:11aprender en esta industria. Hay que
1:46:13construir cositas. Y piensen que cuando
1:46:15se habla de no quiero un deber con
1:46:17experiencia, los proyectos que hagan son
1:46:20experiencia real. Ustedes me dirán, "No
1:46:22es experiencia en empresa, no, pero vos
1:46:23lo que estás mostrando es lo que sabés
1:46:25hacer." Entonces, cuando alguien entra a
1:46:27tu GitHub, vos sos un trainy o un junior
1:46:30y entren a tu GitHub y vean que hace 2
1:46:33años que estás haciendo proyectos todos
1:46:35los días y tenés todos estos proyectos y
1:46:37van a decir, "Che, este loco está
1:46:38metiendo código todos los días hace 2
1:46:40años, no es un alguien que no sabe
1:46:42nada." Entonces, todo eso es experiencia
1:46:44real. más si eso después lo convertís en
1:46:46un portafolio, ¿no? Pero todo eso
1:46:49demuestra que todo lo pusiste en
1:46:50práctica, todo eso lo sabes hacer y ese
1:46:53es el punto base.
1:46:55Vos no podés, un cirujano no puede
1:46:57agarrar y llegar a un puesto y decir,
1:46:59"No pasa que hace dos años que opera una
1:47:01naranja."
1:47:02No, flaco, no te sirve de experiencia la
1:47:04lo naranja, pero la naranja no se va a
1:47:05morir.
1:47:08Entonces, el cirujano no tiene como
1:47:09muchas posibilidades de de ganar
1:47:12experiencia, salvo las pasantías que
1:47:14haga en hospitales para ver cómo otro
1:47:16opera y que lo dejen tocar algo que no
1:47:19sea muy complicado y que y vos desde tu
1:47:22casa puedes empezar a ganar experiencia
1:47:24todos los días haciendo proyectitos. Esa
1:47:26es la gran ventaja de la industria.
1:47:29Entonces, no aprovecharla una picardía.
1:47:32No digo que sea divertido, siempre uno
1:47:34siempre tiene ganas, no siempre está
1:47:35motivado y ya hay un proyecto que lo
1:47:37arranqué y hace como dos semanas y lo
1:47:38tengo tirado y lo tengo que seguir, pero
1:47:41eventualmente lo hay que seguir
1:47:44practicando
1:47:47y y mientras más tecnologías nuevas
1:47:49salgan, más razones para hacer otro
1:47:51proyecto más. Vos decís, "Bueno, ya está
1:47:54ese proyecto, todas las tecnologías
1:47:55tenía que aprender, estoy rebién."
1:47:57Acto seguido, un mes después sale una
1:47:58tecnología nueva y el mercado la ve con
1:48:00buena vista. Y vos como, "¿Qué lo
1:48:02parió?" Y tenés que estudiar de la
1:48:04tecnología y hacer un proyecto con esa
1:48:05tecnología. Bien, la tengo y así no no
1:48:09te queda otra. Pero bueno, es lo que
1:48:11hay. Bueno, gente, no llegamos a ver el
1:48:13formulario al final, lo dejamos para la
1:48:14que viene, así que la tarea se las doy
1:48:16sin formulario.
1:48:17Si quieren desagrego el formulario de la
1:48:19tarea y lo investigan ustedes como
1:48:20prefieran, así lo hacen más completo.
1:48:23Eh, y si no, lo vemos la clase que viene
1:48:26eh con el resto de los temas. Sí. Eh,
1:48:29pero bueno, ya saben cómo hacer una
1:48:31navegación, ya saben cómo funciona esa
1:48:32mecánica. Así que la tarea va a llevar
1:48:34para armar una navegación, eh, y
1:48:37obviamente van a tener la libertad de
1:48:38elegir el tema de del sitio que del
1:48:41sitio que van a ir armando. Así que
1:48:43elijan usted, usted puede elegir el tema
1:48:45y así tiene un poco más de motivación
1:48:47para hacerlo. Así que si no sé si
1:48:49Antonela no salió tacu y quiere hacerlo
1:48:51de Naruto, puede. Sí. Así que bueno,
1:48:54gente bonita, por hoy estamos.
1:48:56Buena semanita a todos, buen fin de
1:48:57semana como siempre y que la fuerza les
1:49:00acompañe. Abrazos grandes.
1:49:04Chao, chao.
1:49:07Me fin there.

About this transcript

This page contains the full transcript of Global HTML 2 by Liricoteca, generated from the public captions YouTube serves with the video. The transcript has 18,080 words across 2,765 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.