Clase 2.pptxasasdasdasdasdasdasdsadasdasdasd

habikidaes

1. Clase 2

2. Organizado por

3. Te damos la BIENVENIDA

4. Por favor, apagar micrófonos y cámaras al ingresar

5. Esta clase está Siendo grabada

6. Código LATAM ¡Hola! Esto es

7. Acuerdos A continuación, repasaremos algunas normas de convivencia que nos van a ayudar a que la experiencia de cursada sea mucho más agradable. 01

8. Cámaras apagadas Mantendremos siempre los micrófonos apagados y quien facilite indicará en momentos específicos la posibilidad de habilitarlos. Para evitar distracciones o mejorar también el ancho de banda pedimos mantener apagadas nuestras cámaras. Quien facilite indicará si es necesario encenderlas para alguna actividad. Interactuaremos en mayor medida por el chat. Quien facilite lo irá viendo en momentos específicos para poder avanzar con la clase y sostener un ritmo. Si hay preguntas invitamos a que las anoten y las realicen al finalizar la clase en el tiempo de pasillo. Micrófonos apagados Uso del chat

9. P robar de reiniciar el modem/router y estar lo más cerca posible del mismo. Evitemos que en otras computadoras se estén descargando o subiendo archivos pesados. Probar salir y volver a entrar a la clase. En caso de que las conexiones a internet sean débiles,  tengamos en cuenta las siguientes recomendaciones para  intentar mejorar la conectividad: Probar conectarnos desde un teléfono inteligente (si lo tuviéramos) para observar la clase. ¡Que no cunda el pánico! Si todo falla, recuerden que la clase quedará grabada y que el material estará disponible para consulta.

10. Preguntar  En Eidos apuntamos a un aprendizaje activo, esta formación es una invitación a encontrarse con el disfrute al aprender. ¡Ustedes son protagonistas! La curiosidad es motor de aprendizaje, bienvenidas las preguntas cuando algo no se entienda o les interese saber más sobre los temas presentados. ¡Aprendemos en equipo!  Este espacio es un espacio seguro, apelamos a la confianza y al respeto para un aprendizaje colectivo. Participar Armar comunidad ¡Sin ustedes no funciona!

11. Rompehielo 02 A continuación, compartiremos una actividad para entrar en calor e introducir uno de los temas de la clase de hoy. ¿Todo listo para jugar?

12. A .html < body >     < h1 > Clase de HTML </ h1 >     < h2 > Estoy aprendiendo </ h2 >     < p > ¡Es genial! </ p > </ body > B .html < body >   < h1 > Clase de HTML </ h1 >   < img > Estoy aprendiendo </ img >   < a > ¡Es genial! </ a > </ body >

13. A .html < body > < nav > ¡Rayos! </ nav > < i > Rompí la ventana 😣 </ i > </ body > B .html < body > < p > ¡Rayos! < br / >        Rompí la ventana 😣 </ p > </ body >

14. A .html < body > < h3 > El blog de Jus </ h3 > < title > Aquí publicaré mis cosas ✨ </ title > < footer > ¡Les damos la bienvenida! </ footer > </ body > B .html < body > < h1 > El blog de Jus </ h1 > < h3 > Aquí publicaré mis cosas ✨ </ h3 > < p > ¡Les damos la bienvenida! </ p > </ body >

15. A .html < body > < h1 > Mis comidas favoritas: </ h1 >     < ul >         < li > Pizza </ li >         < li > Hamburguesa </ li >         < li > Pasta </ li >     </ ul >     < p > ¡Que hambre! </ p > </ body > B .html < body > < h1 > Mis comidas favoritas: </ h1 >     < p > Pizza </ p >     < p > Hamburguesa </ p >     < p > Pasta </ p > < div > ¡Que hambre! </ div > </ body >

16. Resolución de la tarea de la Clase 1

17. Rutina de presentación 03

18. Mi habitación soñada Por un momento imaginemos que tenemos la posibilidad  de crear una habitación donde podemos hacer algo que  nos gusta mucho. ¿Qué haríamos en esa habitación y que elementos debería tener? Mientras ustedes piensan y comparten por el chat les cuento  sobre mi habitación soñada. Si gustan pueden también compartirme ideas para sumar a mi habitación 🥰

19. Mi habitación soñada Por ejemplo, en mi caso crearía una habitación para  viajar  en el tiempo  y me imagino que dentro tendría  una pared decorada con un mapamundi gigante, un proyector,  fotos antiguas de diferentes ciudades, una colección de autos antiguos, muchos libros y aroma a café.

20. Mi habitación soñada En la clase de hoy vamos a conocer más sobre HTML y qué es un "lenguaje de marcado". Cómo adelanto,  un "lenguaje de marcado" sirve para indicar qué elementos debe contener nuestro sitio web . Recién compartimos qué cosas nos gustaría que tenga nuestra habitación soñada,  éste mismo proceso deberemos hacer cada vez que comenzamos a maquetar un sitio.

21. ¡Les damos la bienvenida a Código LATAM! Les presentamos el recorrido que realizaremos durante las clases sincrónicas y la modalidad de cursada.

22. Armado Primer Proyecto Next Steps : herramientas para el camino Clase 1 Clases 2, 3, 4 y 5 Clases 7, 8, 9 y 10 Clase 6 Clase 11 Introducción Desarrollo Web HTML y CSS Tutoría Primer Proyecto Clase 12 Camino compartido Tutoría Segundo Proyecto JavaScript

23. Para que la cursada sea disfrutable, combinamos espacios de trabajo en vivo con ejercitación autónoma, momentos expositivos y momentos de interacción.  ¡Uds son protagonistas! Clases sincrónicas 10 clases teórico prácticas 2 clases de tutoría Cada encuentro (clase o tutoría) tiene la duración de 2.30hs en las cuales trabajaremos sobre lenguajes de programación, habilidades y la escritura de código en vivo, con un tiempo al final destinado a saldar dudas. Ejercitación asincrónica Ejercicios de repaso Proyectos integradores Ejercitación con los contenidos de cada clase a ser resueltos en la clase siguiente. Dos trabajos entregables para aprobar la cursada. Dinámica de la cursada

24. El curso se acredita con un 75% de asistencia y la aprobación de un trabajo final integrador. Espacio de encuentro y resolución de dudas entre pares. Campus virtual Plataforma web en la cual centralizamos el material las clases, bibliografía ampliatoria, la ejercitación y las grabaciones de las clases. Dinámica de la cursada Comunidad en Discord

25. Mail : cartelera con información de la cursada y links recurrentes. Discord :  foros, consultas, comunidad. https://rebrand.ly/discordCOD Campus virtual: contenido de las clases, material ampliatorio, recursos. https://rebrand.ly/eidosglobal/campus Entorno de trabajo

26. Contenidos de la clase 04

27. ¿Para qué sirve HTML? ¿Cómo es su sintaxis? Son las herramientas más importantes, los ladrillos que arman la estructura. Cada etiqueta tiene sus propios atributos, conoceremos cuáles son y cómo utilizarlos. ¿Qué es HTML? Etiquetas y elementos Atributos

28. ¿Qué es HTML? Es un lenguaje de marcado o "etiquetas". Su función es indicarle al navegador los elementos que componen una página web (textos, imágenes, enlaces, botones, etc.) y organizarlos de una forma jerárquica.​  HTML es como el "esqueleto" de una página web. Lo podemos pensar análogamente como el plano de una casa que indica dónde y cuántas ventanas, puertas, paredes, techos hay en el diseño… Si no está el plano, no existe la casa o es imposible construirla. Esto mismo pasa si no está el HTML: el navegador web no va a poder mostrar en pantalla el sitio web. v

29. ¿Qué son las <etiquetas>? Son conjuntos de caracteres que se usan para señalar el contenido, indicándole al navegador web de qué se trata cada cosa: no es lo mismo un título que un párrafo, una lista o un video.  Hay etiquetas específicas para cada contenido, por ejemplo: <p> para párrafos, < section > para dividir secciones de contenido, < ul > para listas. v

30. ¿Etiqueta es igual a elemento HTML? Un elemento HTML incluye las etiquetas de apertura y cierre, el contenido que encierran y ciertos datos que puede incluir la etiqueta llamados "atributos". Entonces, una etiqueta HTML es parte de un elemento HTML y define de qué elemento se trata. v

31. <h1> Hola mundo </h1> Etiqueta apertura Etiqueta cierre Contenido Elemento HTML Sintaxis  Existen muchas etiquetas y ya las iremos conociendo. Pero primero, debemos saber cómo escribirlas.  Cada etiqueta tiene un nombre específico, el cual se escribe siempre en minúsculas y entre paréntesis angulares <nombre> Además, las etiquetas generalmente "envuelven" a otras etiquetas o contenido en forma de texto, por lo cual llevan una etiqueta de <apertura> y otra de </cierre>

32. ¡Atrapamos <etiquetas>! Cuando digamos ya tendrán 40 segundos para enviar por el chat todas las etiquetas de HTML que encuentren en internet. ¿Todo listo? … ¡ya!

33. Lo que encontramos... ...

34. Estructura Jerárquica

35. _ _ l _ _ _ _ _ _ _ _ _ _ e _ _ _ _ _ _ _   _ _ _ _ _ _ _ _  d _  _ _ _ _ _ _ _ _ _ _ _ _ t _ _ _ Brasil _ _ _ _ _ _ _ _ _ _ _ _ _ u a _ _ c _ _ _ _ _ _ _ _ _ m _ _ _ _ _ _ _ v _ _ Más…. Mundo _ _ _ _ _ _ _ Antártida _ _ _ _ _ _ _ _ r _ _ _ Asia _ c e _ _ _ _ _ _ _ _ e Central _ _ _ L _ _ _ América Europa África Oceanía Norte Sur Argentina Chile Perú Uruguay Ecuador Colombia Bolivia Lima São Paulo Río de janeiro Cali Bogotá Medellín

36. Estructura  HTML nos permite también agrupar contenido y ordenarlo jerárquicamente. Al escribir código HTML tenemos que tomar las siguientes decisiones: 1- ¿Qué etiqueta usamos para cada porción de contenido? 2 - ¿Cómo agrupamos los elementos?  Esto último significa que algunos elementos HTML van a "contener" a otros elementos.

37. Elementos dentro de elementos La agrupación y la estructura jerárquica en HTML se ven reflejados en elementos que "envuelven" a otros elementos. Por lo cual es muy importante respetar las etiquetas de   <apertura> y  </cierre> de cada elemento. La única diferencia entre ambas es la barra diagonal después del primer paréntesis angular < / cierre> i ndex.html < mundo >     < continente >         < país >                 < ciudad >         < / país >         < país >                 < ciudad >         < / país >     < / continente > < / mundo >

38. Por ejemplo Aquí podemos mostrar cómo se organizaría un artículo que contiene un título y un par de párrafos, que podría ser, por ejemplo, parte de un posteo en un foro. i ndex.html < artículo >     < título > Hola mundo! < / título >      < párrafo >             Este es un párrafo.      < / párrafo >      < párrafo >             Este es otro párrafo.      </ párrafo >      < / artículo >

39. i ndex.html < article >     < h2 > Hola mundo! < / h2 >      < p >            Este es un párrafo.      < / p >      < p >            Este es otro párrafo.      </ p >      < / article > Ahora sí, HTML Aquí vemos el mismo ejemplo, pero con etiquetas reales.

40. Indentación , una muy buena práctica Algo que nos ayuda visualmente a diferenciar los niveles de "anidamiento" de elementos dentro de otros es el espaciado desde el margen izquierdo. Esto se llama indentación ,   y lo hacemos con la tecla  tecla TAB . i ndex.html < article >     < h1 > Hola mundo! < / h1 >      < p >           Este es un párrafo.      < / p >         < p >           Este es otro párrafo.      </ p >           < / article >

41. Estructura básica d e un documento HTML

42. Estructura básica de un documento Cuando creamos un documento . html , lo primero que hacemos es crear la estructura básica del documento. Esta se compone de ciertos elementos que nos aseguran que el navegador interpretará correctamente nuestro documento HTML.

43. Creando la estructura básica Por suerte, no es necesario escribirla "a mano", sino que en  VSCode podemos usar dos sencillos atajos:  html:5 + Enter ​  !  +  Enter

44. Estructura básica Ambos atajos dan este resultado. Este es el punto de partida de un documento HTML. La etiqueta < html > es la que "envuelve" todo el documento, luego las etiquetas <head> y < body > delimitan dos secciones. Veamos qué funciones cumplen cada una de estas etiquetas. i ndex.html <!DOCTYPE html> <html lang=" en "> <head>     <meta charset="UTF-8">     <meta http- equiv ="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>             <!-- acá va   nuestro contenido  --> </body> </html>

45. < html > delimita el inicio y final del documento. <head> es la "cabeza" del documento, su contenido no es visible en el navegador. Contiene información sobre el documento. Aquí también se vinculan archivos externos de css , js , librerías, entre otras cosas.  <meta> etiquetas que contienen información sobre el documento. < title > título del documento, su contenido se verá en la pestaña del navegador. < body > cuerpo del documento, aquí vamos a escribir el HTML para maquetar nuestro contenido. <!DOCTYPE html >  le indica al navegador que se trata de un archivo de HTML5. i ndex.html <!DOCTYPE html> <html lang=" en "> <head>     <meta charset="UTF-8">     <meta http- equiv ="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title> Document </title> </head> <body>             <!-- acá va   nuestro contenido  --> </body> </html>

46. LiveCoding   😎 Etiquetas de texto y agrupación

47. En esta sesión veremos... <h1> para títulos y <h2>…<h6> para subtítulos. <p> para escribir párrafos. < div >  para agrupar contenido. < strong >  para destacar partes de un texto. < ol >, < ul > y  < li > para armar listados. < br > para insertar un salto de línea. < hr > para insertar una línea divisoria.

48. Momentos  LiveCoding En estos espacios prácticos pondremos "manos en el código" todas las clases. A tener en cuenta: - Codear en el momento de la clase es opcional, pueden volver luego a la grabación y escribir el código de forma más cómoda, pausando el video. - Al principio estos  LiveCoding  serán más sencillos ,  luego se irán complejizando, por lo cual recomendaremos verlos primero y luego escribir el código. 

49. Pasamos asistencia

50. Recordatorio📚 Es muy importante que descarguen el material del campus ya que hay contenido ampliatorio.

51. ¿Como aprendí HTML?

52. Etiquetas vacías

53. voidtags .html < br > < img src ="Ruta a la imagen" > < input > < hr > Etiquetas vacías Este tipo de etiquetas en HTML5 se llaman etiquetas vacías (" void tags" en inglés) y están pensadas para que no tengan etiqueta de cierre, como es el caso de < br >, < img >, <input> o < hr > entre otras. Estas etiquetas no "envuelven" a otras etiquetas, es por eso que no tienen etiqueta de cierre.

54. voidtags .html < br  / > < img src ="Ruta a la imagen" / > < input / > < hr  / > Etiquetas vacías La barra al final de la <etiqueta /> de inicio está permitida, pero no tiene ningún efecto . Es solo un añadido sintáctico que se puede usar para resaltar visualmente una etiqueta vacía.

55. LiveCoding   😎 Insertando imágenes y enlaces

56. Atributos

57. Atributos Ya vimos cómo funcionan en la práctica en el LiveCoding , para entender un poco más: Los atributos  son palabras especiales utilizadas dentro de la etiqueta de apertura de un elemento, y cumplen diversas funciones.   Conoceremos algunos de ellos. v

58. Atributos requeridos Es obligatorio escribirlos en ciertos elementos para que funcionen correctamente. Por ejemplo, src en las etiquetas < img > para indicar dónde está la imagen que queremos insertar o href en las etiquetas <a> cuyo valor es el enlace. atributos .html < img src =" img /mi-imagen.png" > < a href =" https://www.eidosglobal.org " > Eidos </ a > Los atributos se escriben siguiendo esta sintaxis: nombre="valor" 1

59. Atributos opcionales Utilizados para modificar la funcionalidad por defecto de un elemento. Por ejemplo,  target en las etiquetas  <a> o alt en las etiquetas < img > , este último si bien es "opcional", siempre hay que utilizarlo porque es el texto que se muestra si la imagen no carga y además es muy importante para los lectores de pantalla . atributos .html < img src =" img /mi-imagen.png" alt ="Foto de Mai" > < a href =" https://www.eidosglobal.org " target="_ blank " >       Eidos </ a > El atributo target con el valor "_ blank " hace que el enlace se abra en una nueva pestaña del navegador. 2

60. Atributos globales Los atributos que vimos antes solo se utilizan en elementos específicos, sin embargo, estos atributos globales se pueden utilizar en todos. Hoy les presentamos a  id y  class . ¡La clase que viene, cuando veamos CSS estos atributos serán muy importantes! atributos .html < section id="noticias" >        < h2  class ="titulo- seccion " > Noticias < /h2 > < / section > < section  id="contacto" >         < h2  class ="titulo- seccion " > Contacto < /h2 > < / section > id sirve para ponerle un nombre específico a un solo elemento y  class lo usamos para ponerle un mismo nombre a varios elementos. 3

61. Comentarios

62. v Comentarios en HTML Los comentarios son anotaciones que podemos hacer en el código para facilitar su comprensión.  Los comentarios son siempre ignorados por el navegador web a la hora de interpretar el documento , por eso también los podemos usar para "hacer pruebas" (en lugar de borrar fragmentos de código podemos dejarlos "comentados" y el navegador los ignora).

63. Sintaxis de comentario Los comentarios deben indicar su apertura con los símbolos “<!--” y luego su cierre “-->” . Se pueden añadir comentarios en cualquier parte del código mientras se abran y se cierren correctamente. Además, pueden ocupar más de una línea. En VSCode , podemos hacer comentarios con el atajo Alt+shift+A . comentarios.html < body >       <!-- Este es un comentario en HTML -->       <!-- el siguiente elemento esta comentado y no será interpretado por el navegador -->     <!-- <h1> Lorem Ipsum  </h1> --> </ body >

64. Repaso de etiquetas  🤔

65. La etiqueta < img > se usa para insertar imágenes.

66. La etiqueta < img > se usa para insertar imágenes. ¡Verdadero!  Usando esta etiqueta podemos insertar imágenes en nuestro sitio web. ¡No olviden incluir el atributo  src  con la ruta a la imagen!

67. El atributo href se usa para indicar un texto alternativo en una imágen

68. El atributo href se usa para indicar un texto alternativo en una imágen ¡Falso!  Usamos el atributo " href " dentro de la etiqueta " <a> " para agregar enlaces, es decir, una referencia que nos permite acceder a otro recurso. Puede llevarnos a otro punto en el mismo documento, a otra web, etc.

69. La etiqueta < body >  contiene el contenido visible de nuestra web

70. La etiqueta < body >  contiene el contenido visible de nuestra web ¡Verdadero!  Un documento HTML está dividido en  <head>  y  < body > . Dentro de la etiqueta <head> irá información sobre el documento y dentro de < body > el contenido de la página.    

71. La etiqueta < h6 >  se usa para el encabezado más importante

72. La etiqueta < h6 >  se usa para el encabezado más importante ¡Falso!  La etiqueta <h1> se usa para el encabezado más importante. Las demás etiquetas <h2...6> se usan para encabezados de menor importancia . 

73. La etiqueta < nav >  se usa para contenido de audio

74. La etiqueta < nav >  se usa para contenido de audio ¡Falso!  La etiqueta < nav > se usa para definir un menú de navegación, es decir, las listas de enlaces que usualmente encontramos en la parte superior de los sitios web y que nos permiten navegar por las distintas partes que lo componen.

75. Tarea para la próxima clase

76. Para la próxima clase... Para la clase que viene hay dos ejercicios a resolver.  El  1ero  consiste en  encontrar 5 errores  en un documento  de HTML. El  2do  consiste en aplicar las etiquetas aprendidas (imagen, títulos, texto, listas, enlaces, etc.) para  crear  una biografía personal. Los documentos para realizar la tarea están disponibles  en el Campus.

77. Rutina de cierre 05 A continuación, compartiremos una actividad para cerrar la clase de hoy.

78. ¿Qué etiqueta te llevas de la clase de hoy y por qué? Vamos preparando nuestro mensaje y a la cuenta de tres presionamos el botón de “enviar” a la vez.

79. Tiempo de pasillo 06 Tiempo de diálogo y de resolver dudas que hayan quedado durante la clase.

80. ¡Muchas gracias!