Unidad 4 - Presentación para La Clase (Módulos 1 y 3) Ultimate+MCT

Módulo 1:
Fase sincrónica
Por favor, para que todos y todas podamos disfrutar
de la clase, les pedimos que apaguen sus cámaras y micrófonos.
¡La clase está siendo grabada!
Les pedimos por favor que tengan en cuenta las
siguientes reglas de cursada:
Buenas - Destinaremos los primeros minutos a revisar

e intentar solucionar aspectos técnicos y de
prácticas conexión.
-El chat solo podrá utilizarse cuando lo habilite
quien facilita la clase.
para la -Para participar de los momentos de interacción

habrá que pedir la palabra.
-Quien facilite la clase prestará atención al chat
cursada únicamente en momentos específicos y con el

objetivo de guiar las actividades.
- Las preguntas generales sobre la formación
pueden realizarse por mail o al final de la clase.
Si la conexión a internet es débil, pueden tener en
Buenas cuenta las siguientes recomendaciones:
- Estar cerca del modem/router.
prácticas - Evitar que en otras computadoras se estén

subiendo archivos o reproduciendo películas o
videos de Youtube.
para la - Salir y volver a entrar a la clase.

- Resetear el módem.
- Conectarse desde un teléfono inteligente (en caso
cursada de disponer de uno) para observar la clase.
Si todo esto falla, pueden escribirle a su docente

para que les envíe el material por email
Como solución temporal, a quienes
tengan problemas con el chat
Probando les recomendamos:
el chat
1. Conectarse a la videollamada a través
de su navegador ingresando de
forma anónima desde una pestaña de
En unos minutos comenzará la incógnito.
clase. Recuerden apagar cámara y
micrófono. 2. Otra alternativa es ingresar a
Microsoft Teams registrándose con
una cuenta personal Outlook o
Hotmail.
1.
2.
- Rompehielos -
Completar las
palabras faltantes.
A
_ r_g_e_n _t itn_a_ _
_N_o r_t_e e _S_ã _o P_ a_u_l_o _
Brasil
_A _m_é _r i_c _a _ Central _R_í o_ dde_ _j a_n_e _i r_o_ _
C
_h_ i_l e_ _
Sur
Antártida ___
P
_ e_r_ú_ L i_m_a_
L
_E _u r_o_p_a_
Mundo U
_ _r u_g_uuaay _
_Á_f rr i_c_a _
E
_ cc u_ a_d_o_r _ _C _a ll i_
Asia
C
_ o_ l_o_mm
b i_a_ _ B
_ _o g_ o_t _á _
_Occee _a n_ í_a_
B _M_e_d ee l_l í_n_ _
_ o_ l_i v_iva _ _
Más….
¿Por qué hicimos esto?
El tipo de lógica que aplicamos

para adivinar las palabras faltantes
es el mismo que se aplica para
escribir en lenguaje HTML.
Más adelante retomaremos este ejemplo para entender
mejor HTML.
Metadatos (son datos del mismo archivo: nombre de autor/a, nombre
del sitio, idioma, palabras claves, etc)
Cabeza
Recursos externos
Sitio Botón 1
Web
Menú Botón 2
principal …
Artículo 1 Título del artículo
Sección de
Cuerpo noticias Artículo 2 Imagen del artículo
… Texto del artículo

Footer
¡Bienvenidos y bienvenidas!
Habilidades para el
Futuro
Presentación personal
Mi nombre es
<nombre docente>
y mi primera experiencia con una computadora fue…
Primero lo primero
¿Qué es el
Desarrollo web?
Es una especialidad de la informática encargada de construir
y mantener sitios web ;)
¿Qué es Front-End?
Es la rama que se especializa en la

interfaz y será responsable del
aspecto visual que tenga nuestro
sitio web en
los distintos dispositivos
(tablets, notebooks, smartphone, etc) .
En la clase de hoy vamos a ver HTML y CSS, que

son los dos lenguajes esenciales para crear la
interfaz de un sitio web.
¿Qué es Back-End?
Es la rama que se especializa en la

parte lógica del sitio web. Se encarga
de programar los algoritmos, manipular
las bases de datos y hacer que la web
funcione de forma óptima y segura,
entre otras tantas tareas.
En esta unidad no abordaremos este área

¿Qué es Full-Stack?
Es la rama que surge como

combinación del Front-End y el Back-
End. Hoy en día la mayor demanda de
perfiles apunta a desarrolladores Full-
Stack, ya que tienen la capacidad de
dominar ciertos lenguajes de ambas
áreas.
+
Front-End Full-Stack Back-End
Pero antes de seguir con desarrollo web...
Internet
¿Verdadero (V) o Falso (F)?
Si le mando un email a
F alguien en Europa la señal de
Internet cruza el océano
por el aire.
¿Qué es Internet?
Internet es una red de redes, posee

conexiones materiales, fuentes de
información/almacenamiento y
diversos nodos con distintas jerarquías.
¿Qué es un servidor?
Es una computadora que presta

servicios e información a partir de un
determinado software y funciona como
fuente para ser utilizada por distintos
usuarios.
¿Qué es TCP/IP?
Son dos protocolos de Internet que

determinan cómo se realiza la
transmisión de datos.
Estos dos protocolos trabajan en conjunto y se encargan de

identificar y establecer la mejor ruta entre la dirección de
origen (Cliente) y el destino (Servidor). A su vez,
proporcionan seguridad porque envían la información de
forma fragmentada (paquetes de datos) y la unifican en
destino.
Dirección IP pública
Cada dispositivo que se conecta a Internet

debe tener sí o sí una IP única que lo
identifique; ésta es la IP pública.
Por ejemplo, los servidores que alojan sitios

webs o los router y modems que dan acceso
a Internet tienen una IP pública.
Dirección IP privada
Se utiliza para identificar equipos o

dispositivos dentro de una red doméstica o
privada. En general, en redes que no sean la
propia Internet. Las IP privadas están, de
algún modo, aisladas de las públicas. Se
reservan para ellas determinados rangos de
direcciones y éstas sí se pueden repetir entre
diferentes redes domésticas o empresariales.
IP privadas
IP pública IP pública
190.189.90.32
192.168.1.101 190.189.90.172
192.168.1.102 (El router permite conectar
192.168.1.103 una red privada con Internet)
192.168.255.255
¿Qué son los Servidores DNS?
DNS Estos servidores poseen una base de

datos de direcciones IP y nombres de
dominio de Internet.
Nos permiten que, al escribir en nuestro navegador

www.microsoft.com (nombre de dominio), podamos obtener
la dirección IP y pedir la información al servidor correcto.
Si mando un mensaje de
V Whatsapp a un amigo, este es
fragmentado en paquetes de
datos.
Nuestra computadora
V personal puede funcionar
como un servidor de
información.
V El chocolate amargo
es más rico que el dulce.
F La información en Internet no
ocupa espacio de
almacenamiento.
Hasta aquí de
Internet
Ahora empecemos a configurar todo lo necesario para armar
nuestro primer sitio web.
Comencemos por
Instalar las herramientas
En esta clase se utilizó el
navegador Microsoft Edge
A continuación, se detalla un paso a paso para su instalación.
Microsoft Edge
Es un navegador web y, como

tal, su función es interpretar
códigos HTML, CSS y Javascript.
Existen muchos navegadores
más, como Chrome, Safari, Mozilla,
Opera, Brave, etc.
Descargar: https://www.microsoft.com/en-us/edge
A partir de aquí comenzará a instalarse
automáticamente.
¡Perfecto!
Ya tenemos instalado el Microsoft Edge.
Visual Studio Code
Es un editor de código que nos va a

facilitar escribir HTML, CSS y
Javascript de una forma muy amigable.
Existen más editores, como Sublime
Text, Atom, Brackets, etc.
Descargar: https://code.visualstudio.com/
Recomendamos seleccionar todos los
casilleros
¡Perfecto!
Ya tenemos instalado el Visual Studio Code.
¡Ya tenemos todo instalado!
Empezamos con HTML
HTML
Es un lenguaje de marcado. Su
función es estructurar los elementos
que componen un sitio web (textos,
imágenes, botones, etc.) de una forma
jerárquica.
Volvamos a ver a ver el ejemplo del

principio de la clase…
Metadatos (son datos del mismo archivo: nombre de autor/a, nombre
del sitio, idioma, palabras claves, etc)
Cabeza Son “invisibles”, no suelen verse reflejados en la pantalla, pero para el
navegador son importantes.
<head>
Recursos externos (a veces queremos que nuestro sitio utilice
tipografías más bonitas u otro tipo de recursos. Debemos indicarlo en esta
parte de la cabecera del sitio)
Sitio Botón 1
Web
Menú Botón 2
principal …
Artículo 1 Título del artículo
Sección de
Cuerpo noticias Artículo 2 Imagen del artículo
<body>
… Texto del artículo
Footer
¿Cómo armar una estructura
jerárquica en HTML?
Etiquetas
<sección>
<titulo>
Para construir una
Acá va el título escrito
</título>
estructura jerárquica HTML
utilizamos <etiquetas>.
<párrafo>
Acá va el 1er párrafo del texto Las etiquetas pueden contener
</párrafo>
subelementos, mediante la
<párrafo>
indicación de su <apertura> y su
Acá va el 2do párrafo del texto
</cierre>.
</párrafo>
Importante: las etiquetas de cierre se
</sección >
escriben utilizando </>
<section> Etiquetas
<h1>
Acá va el título escrito Cuando escribimos código es
</h1>
muy importante usar siempre la
<p>
indentación. ¿Qué es esto? Es
Acá va el 1er párrafo del texto
el uso de la tecla TAB para
</p> indicar un subnivel.
<p> Esto permite que la jerarquía de

Acá va el 2do párrafo del texto
nuestro código HTML se
</p>
</section>
entienda fácilmente.
- Seguimos con HTML -
Más sobre las <etiquetas>

Existen distintos tipos de etiquetas; para indicar títulos, textos, imágenes,
botones, etc. Ya las iremos conociendo. Como son muchas, creamos un
álbum de etiquetas con las principales, para que puedan registrar sus avances
durante este tutorial ;)
Álbum de <etiquetas> principales
Raíz Texto Contenedores Extras
<html> <h1>, <h2>,...<h6> <body> <!DOCTYPE html>
<hr> <header> 
Metadatos <p> <nav>
<head> </br> <aside>
<meta> <a> <main>
<title> <section>
<style> Imágenes <article>
<link> <img> <footer>

Conozcan más etiquetas
<div>
en w3school o Mozilla.
Estructura y elementos
Las primeras etiquetas

<html>, <head> y <body>
<!DOCTYPE html> se utiliza al principio para indicarle al navegador que el archivo es de tipo HTML 5.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html> luego se utiliza este elemento raíz para indicar dónde se contendrán todos los elementos de nuestro sitio web.
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head> aquí van los elementos que proveen información general sobre el archivo, o sea los metadatos.
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body> aquí van todos los elementos que el navegador mostrará en pantalla.
<body>
</body>
</html>
<head> aquí van los
elementos que proveen
<head> información general
sobre el archivo, o sea
los metadatos.
<html>
<body> aquí van todos

los elementos que el
<body> navegador mostrará en
pantalla.
Álbum de etiquetas desbloqueadas
Raíz Texto Secciones Extras
Metadatos <p> <nav>
<meta> <a> <main>
<title> <section>

<div>
- ¡Manos a la obra! -
Vamos a armar nuestro primer sitio web

y a seguir aprendiendo sobre las
<etiquetas>.
- Nuestra meta -
Veamos la web que

vamos a crear
Hagan click aquí para ver el sitio web que vamos a crear siguiendo el paso a paso de
esta presentación.
1er paso
1er paso
(Empieza la tarea)
Crear la carpeta y el primer

archivo HTML
¡Importante! No copiar y pegar el código desde este PowerPoint.
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque algunos
caracteres (como las comillas dobles y simples) fallan.
1. Creamos en nuestro escritorio una carpeta y
le ponemos de nombre “tutorial”. Aquí
guardaremos todos nuestros archivos del sitio
web. Para crear la carpeta hacemos "click
derecho" > "Nueva carpeta"
2. Abrimos el programa “Visual Studio Code” y
hacemos click en “Abrir carpeta” u “Open
folder”.
3. Buscamos en el "Escritorio" y seleccionamos
la carpeta "tutorial" que creamos en el primer
paso.
Primero tildamos la casilla y luego hacemos clic
en el botón azul que dice "Yes, I trust the
authors" (Si, confío en los autores)
4. Ya abierta la carpeta ahora vamos a crear
nuestro primer archivo haciendo click en "New
file..." (Nuevo archivo)
5. Una vez creado nuestro archivo tenemos que guardarlo con el nombre de
“index.html”. Para guardarlo vamos a "File" (Archivo) > "Save" (Guardar). Este
archivo index.html es el archivo que siempre un navegador web va a intentar iniciar cuando
se lo envíe a una dirección, ya lo veremos...
5. Una vez creado nuestro
archivo tenemos que
guardarlo con el nombre de
“index.html”. Esto es muy
importante porque los
navegadores webs están
configurados para siempre
primero intentar buscar e
interpretar el archivo
index.html
6. Ahora vamos
a escribir dentro
del archivo
“html:5” y
a presionar la
tecla TAB del
teclado.
6. Ahora vamos
a escribir dentro
del archivo
“html:5” y
a presionar la
tecla TAB del
teclado.
6. Ahora vamos
a escribir dentro
del archivo
“html:5” y
a presionar la
tecla TAB del
teclado.
index.html
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
</body>
</html>
7. A partir de aquí, iremos modificando y añadiendo código.
Ésta es la base de un archivo HTML. ¡Vamos muy bien! :)
index.html
<!DOCTYPE html>
<html lang=“es”>
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
8. Actualizamos el “lang” a “es”. Esto indica que nuestro sitio web va a
contener textos en español. Esta etiqueta será leida por los motores de
búsqueda, como Bing o Google, para anticipar y filtrar el idioma del sitio.
2do paso
2do paso
Modificar metadatos
en el <head>
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque
algunos caracteres (como las comillas dobles y simples) fallan.
index.html
<!DOCTYPE html>
<head>
<title>Completar con Nombre y Apellido</title>
</head>
<body>
</body> 9. Actualizamos el contenido de la etiqueta <title> escribiendo nuestro

</html> Nombre y Apellido. La etiqueta <title> se utiliza dentro del <head> y nos
permite indicarle al navegador web qué nombre queremos que muestre en
la pestaña cuando se abra este archivo html.
3er paso
3er paso
Añadir un título y un párrafo

en el <body>
Hay que ir escribiendo todo directamente en el Visual Studio
Code, porque algunos caracteres (como las comillas dobles y simples) fallan.
<!DOCTYPE
index.html html>
<head>
</head>
<body>
<h1>Mi primer título</h1>

<p>Mi primer párrafo con información</p>
</body>
</html>
10. La etiqueta <h1> se usa para indicar títulos dentro del sitio y la etiqueta <p>, para
indicar párrafos. Estas etiquetas deben ir siempre dentro del <body>. A su vez, las
etiquetas <h1> existen en varios tamaños <h1>, <h2>, <h3> (hasta el <h6>). Esto está
pensado para poder diferenciar títulos de subtítulos, siendo <h1> el nivel más alto y <h6>
el nivel más bajo.
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hicieron en el
código para que se
vean reflejados en el
sitio web.
A continuación abriremos nuestro archivo “index.html” haciendo
doble clic. También puedes hacer clic derecho > Abrir o usar la
opción de Abrir con > Microsoft Edge.
index.html
<body>

<p>
Mi segundo párrafo. Pueden hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
</p>
</body>
</html>
11. Creamos un segundo párrafo y añadimos una etiqueta <a>, que nos permitirá crear un
hipervínculo. Esta etiqueta tiene un atributo y es “href=”. En él, ndicaremos cuál es la dirección
que queremos que se abra.
Los “atributos” se escriben en la etiqueta de <apertura> y son valores adicionales que algunas
etiquetas soportan. La etiqueta <a> soporta muchos más, aquí usamos “href” para indicar la URL del
sitio web al cual queremos redireccionar.
index.html
</head>
<body>

<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
</p>
<hr>
</body> Las etiquetas <hr> se usan para insertar una línea horizontal divisora de
</html> texto. No es necesario indicar el cierre de estas etiquetas </hr> porque
generalmente no se usan para contener ningún otro elemento... (sí, son una
excepción a la regla... Qué rebeldes, ¿no? Hay algunas más, pero no se
preocupen que son muy pocas las rebeldes)
<p>
index.html Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitor el sitio web de Microsoft.
</p>
<hr>
<h2>Mi segundo título pero algo más pequeño</h2>

<p>
Vamos a utilizar un sitio web que nos va a generar texto y nos va a permitir ver cómo se
comporta. El sitio web es
<a href="https://es.lipsum.com/">Lorem Ipsum</a>.
</p>
</body>
</html>
Aquí añadimos un título nuevo, pero utilizando la etiqueta <h2> ya que será un
subtítulo. Automáticamente el tamaño del texto será un poco más pequeño que el
<h1>. Por otro lado, añadimos un párrafo con <p> y una URL a un sitio que vamos
a utilizar para crear texto de relleno. Este sitio web es muy útil para simular el
aspecto de los textos de nuestros sitios webs.
1. Abrimos una pestaña nueva en nuestro
navegador e ingresamos al sitio web
“es.lipsum.com”.
2. Descendemos en la web y encontramos
estas opciones para generar texto.
3. Vamos a escribir en este casillero el número
“1”. Así estaremos indicando que se genere un
párrafo.
4. Ahora vamos a hacer click en el botón
“Generar Lorem Ipsum”.
5. ¡TAH DAM! Tenemos ahora un texto de un
párrafo generado.
6. Vamos primero a seleccionarlo. Luego
haremos click derecho y elegiremos la opción
“Copiar”.
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar
index.html espacios. Este sitio web es
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut
molestie eros bibendum eu. Aenean posuere aliquam nulla at pretium. Cras erat mauris,
accumsan vel laoreet sit amet, scelerisque in ipsum. Vivamus sed nulla id erat sollicitudin
tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus. Suspendisse et
congue sapien. Donec dictum eleifend nisi, sit amet euismod ex pellentesque eget. Sed
eget volutpat arcu. Mauris at risus fringilla lectus facilisis aliquet sed sed nisi. Nam tristique
egestas lectus eget euismod. Nulla fringilla massa ut blandit venenatis. Fusce eleifend
congue euismod. Ut volutpat ornare luctus.
</p>
</body>
</html>
7. Volvemos a nuestro código y pegamos

(ctrl+V). También podemos hacerlo con click
derecho y pegar.
index.html espacios. Este sitio web es
</p>
<p>
tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus.
</br>
Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex
pellentesque eget. Sed eget volutpat arcu. Mauris at risus fringilla lectus facilisis aliquet
sed sed nisi. Nam tristique egestas lectus eget euismod. Nulla fringilla massa ut blandit
venenatis. Fusce eleifend congue euismod. Ut volutpat ornare luctus.
</p>
</body>
Las etiquetas </br> se usan para insertar un salto de línea y no hace falta indicar
</html>
su apertura (sí, son del grupo de las rebeldes estas también) porque no se van a
usar nunca para contener otros elementos.
<!DOCTYPE
index.html html>
<head>
</head>
<body>


<p>
Por último,</p>
aquí añadimos a nuestro código un comentario interno. Como verán, se escribe de un modo
distinto, utilizando  como cierre. Los comentarios se utilizan internamente, para
<hr>
hacer anotaciones entre quienes trabajan con el código. No salen nunca impresos en pantalla al cargar el
sitio web. <h2>Mi segundo
En códigos título sirven
muy largos pero algo
paramás pequeño</h2>
entender mejor el código HTML.
<p>
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hicieron en el
código para que se
sitio web.
Metadatos <p> <nav>
<meta> <a> <main>
<title> <section>

<div>
¿Cómo aprendí
todo esto?
Pasamos lista
Escriban su
nombre y apellido
en el chat
80% de asistencia necesaria
CSS
Es un lenguaje de hojas de estilo que

permite modificar la apariencia de los
sitios webs. Es complementario a
HTML, le añade mejoras visuales.
4to paso
4to paso
Dar estilo con CSS en línea

<!DOCTYPE html>
index.html
<head>
</head>
<body style="background-color:powderblue;">

<p>
</p>
El atributo “style=” permite cambiar la apariencia de los elementos. En este caso, estamos cambiando
<hr>
el color de fondo de la etiqueta <body>. Para hacerlo dentro de “style=” debemos cargar la propiedad
de “background-color:
<p> powderblue”
</head>
index.html

<h1 style=”text-align:center;">Mi primer título</h1>
<p style=”text-align:center;">Mi primer párrafo con información</p>
<p style=”text-align:center;">
</p>
<hr>

<p>
espacios. Este sitio web es
Aquí también se utiliza el atributo “style”. Podemos cargar la propiedad “text-aling: center” para que
</p>
nuestros textos tengan alineación central y no izquierda, que es la que se activa por default en los
<p>
textos.
index.html
</head>

<p style=”text-align:center; color:red">

</p>
<hr>

<p>
El atributo “style=“ soporta la carga infinita de propiedades.
<a href="https://es.lipsum.com/"> Es necesario separar cada una de ellas
Lorem Ipsum</a>.
</p>
con un “;” (punto y coma). En este caso estamos alineado al centro un párrafo y poniéndole color rojo
con “color:
<p> red”. Presten mucha atención al copiar comillas, dos puntos, punto y coma, etc.
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hicieron en el
código para que se
sitio web.
5to paso
5to paso
Dar estilo con CSS de forma

interna
<head>
index.html <meta charset=“UTF-8”>
</head>

<p style=”text-align:center; color:red">

</p>
<hr>

<p> Vamos a aprender una mejor forma de ingresar las
Vamos a utilizar un sitio web que nospropiedades
va a generar mucho
CSS, paratexto y nos vacódigo
que nuestro a permitir rellenar
sea menos
extensoIpsum</a>.
<a href="https://es.lipsum.com/"> Lorem y más fácil de leer.
</p>
<head>
index.html <meta charset=“UTF-8”>
</head>
<body>

<p>
</p>
<hr>

<p> Volvamos un paso atrás y borremos todos los atributos “style=" que habíamos agregado.
Vamos a utilizar
Esto no quiere un sitio
decir web
que que
esté nossino
mal, va aque
generar
existemucho textoque
otra forma y nos va a permitir
también rellenar
puede ser útil
<ay href="https://es.lipsum.com/">
que podemos decidir cuál usar. Lorem Ipsum</a>.
</p>
index.html
<!DOCTYPE html>
<head>


<style>
</style>
</head>
<body>
Nos ubicamos dentro del <head>. Luego abrimos y cerramos la etiqueta
<style>. Dentro de ella, podremos escribir las propiedades CSS y asignarlas
desde aquí a las etiquetas que gustemos.
<p>
<head>
index.html

<style>
body {
background-color:powderblue;
}
</style>
</head>
<body>
Comenzamos a escribir
 “body” (en CSS no se usan
<h1>Mi
las “boquitas” primer
<> para título</h1>
referirse a etiquetas). Luego abrirmos una “{“ (llave). En el renglón de abajo
añadimos la propiedad “background-color:powderblue” y ponemos el ”;” (punto y coma) al final de la
<p>
propiedad. Por último, en el renglón de abajo, cerramos “}” (llave). ¡Copien esto con mucha atención!
index.html 
<style>
body {
}
.textoCentrado {
text-align:center;
}
.textoRojo {
color:red;
}
</style>
</head>
<body>
Ahora vamos a añadir ”clases”. Las clases se usan para asignar un mismo estilo a muchas etiquetas. Es
en CSS se indican con un “.”
”clases”
(punto) <p>Mi
al principio y luego
primer se les
párrafo conañade un nombre a criterio personal.
información</p>
index.html }
.textoCentrado {
text-align:center ;
}
.textoRojo { Para usar la Clase, vamos a una etiqueta dentro del <body>
color:red;
} y añadimos el atributo “class=“ más el nombre de la clase
que elijamos. Presten atención que en HTML la clase no se
</style>
escribe con un punto al principio como en CSS.
</head>
<body>

<h1 class=”textoCentrado">Mi primer título</h1>
<p class=”textoCentrado">Mi primer párrafo con información</p>
<p>
</p>
index.html .textoCentrado {
text-align:center ;
}
.textoRojo { A una misma etiqueta se le pueden asignar infinitas clases. Para
color:red;
} hacerlo, simplemente hay que separarlas con un “ “ (espacio).
Aquí estamos sumando la clase de “textoRojo”. Es importante
</style>
respetar minúsculas y mayúsculas, debe ser idéntico a como
</head> está escrita la clase en CSS para que HTML pueda encontrarla y
<body> cargar las propiedades.

<p class=”textoCentrado textoRojo">

</p>
<hr>
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hiceron en el
código para que se
sitio web.
Deberíamos seguir viendo el sitio igual que antes. La
diferencia es a nivel código.
- Momento de aprender un truco -
Inspeccionar el código
en el navegador
“Un gran poder requiere de una gran responsabilidad”
Tío Ben, familiar de Spiderman.
En nuestro navegador
web hacemos “click
derecho” y vamos a la
opción “Inspeccionar”.
Aquí podremos ver nuestro código y entender mejor cómo lo
está interpretando el navegador.
También podremos hacer cambios en tiempo real.
Por ejemplo, acá podemos ver nuestro
primer título con <h1> y que está leyendo
la propiedad que hay dentro de la clase
“textoCentrado”.
Aquí vemos la clase que creamos en CSS y la propiedad que contiene, que es “text-align:
center”. Desde aquí podemos modificar los valores o añadir nuevas propiedades para ver
como quedan.
6to paso
6to paso
Dar estilo con CSS de forma

externa
Hay que ir escribiendo todo directamente en el Visual
Studio Code, porque algunos caracteres (como las comillas dobles y simples) fallan.
index.html
<head>

<style>
body {
}
.textoCentrado {
text-align:center ;
}
.textoRojo {
color:red;
} Ahora vamos a mejorar el código todavía un
</style> poco más.

Borremos completamente la etiqueta <style>
</head>
<body>
index.html
<head>

<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<p class=”textoCentrado textoRojo">

Mi segundo
Vamos párrafo.
a utilizar Puedes<link>
la etiqueta hacer <a
parahref="https://www.microsoft.com">click aquí</a>
leer un archivo CSS externo. Esta etiqueta usa
</p>el atributo “rel=" para indicar el tipo de archivo (stylesheet significa “hoja de estilo”) y un
atributo ”href=" para indicar la ruta donde está el archivo externo que hay que leer.
<hr>

Creamos una carpeta y
nuestro primer
archivo .css
1. Hacemos click en el ícono para crear una
carpeta nueva.
2. Le ponemos de nombre “assets” y la
creamos apretando ENTER.
3. Vamos a dar click sobre la carpeta creada
para ubicarnos en su directorio.
4. Volvemos a tocar el ícono para crear una
nueva carpeta.
5. La nombramos “css” y damos ENTER para
crearla.
6. Vamos a dar click en la carpeta “css” para
ubicarnos dentro de ella.
7. Hacemos click en el ícono para crear
un archivo nuevo.
8. Nombramos al archivo “style.css” y damos
ENTER para crearlo.
9. Si hicimos todo bien, nos tiene que aparecer
el archivo creado dentro de la carpeta “css” y
tiene que abrirse automáticamente.
10. Esto indica que ya estamos trabajando
dentro del archivo “style.css”
11. Ahora vamos a poner todo el código CSS dentro de él. No es necesario colocar las
etiquetas <style></style> porque esto ya no es un archivo “.html”, sino que es “.css” ;)
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hicieron en el
código para que se
sitio web.
12. En la carpeta en la que creamos la web
deberíamos ver algo parecido a esto.
Ruta: “assets/css/style.css”
13. El sitio debe seguir viéndose igual, pero ahora el estilo
está siendo cargado desde el archivo “style.css”... Pueden
usar el “Inspector” para examinarlo mejor ;)
Metadatos <p> <nav>
<meta> <a> <main>
<title> <section>

<div>
¡Muy bien! Ya tenemos una muy buena base de sitio web.
¡Felicitaciones!
Ahora vamos a continuar añadiendo una imagen
7mo paso
7mo paso
Insertar una imagen

con HTML
Ingresamos al sitio "www.unsplash.com” para
descargar una imagen que tenga buena
calidad.
Buscamos paisajes escribiendo en inglés
“landscape” en el buscador (pueden
elegir la imagen que más les guste)
Hacemos click en una imagen
Hacemos click en la flechita para
descargar la imagen.
Elegimos descargar en tamaño “Medium
(1920x1200)”.
Creamos la carpeta “images” y ponemos dentro de ella
la imagen que descargamos. Por último, cambiamos el
nombre de la imagen para que sea “paisaje.jpg”. Esto
es muy importante, será el nombre que usemos en
HTML para leer la imagen.
Recuerden que las minúsculas y mayúsculas importan.
Ruta: assets/images/paisaje.jpg
index.html <p class=”textoCentrado textoRojo">
</p>
<hr>
<img src="assets/images/paisaje.jpg" />

<p>
</p>
<p>
Arriba de nuestra etiqueta <h2> vamos a insertar una imagen utilizando la etiqueta <img>. Esta
etiqueta tiene un atributo
tincidunt queeu
sit amet es massa.
“src=“ para
Proinindicar
ultriceslaleo
ruta
neca donde el archivo
erat interdum HTML debe ir a
rhoncus.
buscar la imagen para leerla.
</br>
Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex
index.html <p class=”textoCentrado textoRojo">
</p>
<hr>
<img src="assets/images/paisaje.jpg" alt="Paisaje de colinas con árboles y pastos" />

<p>
</p>
A su vez, las <img> usan un atributo “alt=" para dar una descripción escrita sobre la imagen. Este
<p>
atributo sirve para que la gente que sufre de alguna discapacidad visual pueda pedirle al navegador
molestie
que lea lo que erosescrito
hayamos bibendum
en eleu. Aenean
atributo posuere
“alt=“ y asíaliquam nulla
saber, en esteatejemplo,
pretium. que
Crashay
eratuna
mauris,
imagen sobre un paisaje de colinas con árboles y pastos. Esto que escribimos en “alt=“ también
tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus.
aparecerá escrito en caso de que la lectura de la imagen falle por algún motivo.
</br>
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hicieron en el
código para que se
sitio web.
¡Vemos que la imagen aparece en el sitio! ¡Muy bien! Ahora
vamos a ajustarla, porque es muy grande y sobresale de la
pantalla. Aquí CSS nos ayudará a ajustar el estilo ;)
index.html style.css
/* Etiquetas */
body {
}
img {
width:100%;
}
/* Clases */
.textoCentrado {
text-align:center ;
}
.textoRojo {
color:red; En el ”style.css” asignamos la propiedad “width” (ancho) del 100%,
}
para que todas las etiquetas “img” se ajusten al ancho total del
“body”.
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hicieron en el
código para que se
sitio web.
Ahora vemos la imagen completa y no “cortada” o
“sobresalida” de la pantalla. Esto es porque se ajustó al
100% del <body>.
Raiz Texto Secciones Extras
Metadatos <p> <nav>

Para terminar de
<meta> <a> <main>
desbloquear todas las
<title> <section> etiquetas les
<style> Imágenes <article> proponemos

que sigan investigando
en los siguientes sitios
<div>
w3school o Mozilla.
Sopa de
<etiquetas>
B___
__M_
LINK
STYLE
HE__
__G
M E TA
_IT_E
BODY
HTML
LINK
STYLE
HEAD
IMG
M E TA
TITLE
8vo paso
8vo paso
Ajustar márgenes y bordes

del <body>
/* Etiquetas */
body {
margin: 50px;
padding: 50px 100px;
}
img {
width:100%;
}
/* Clases */
.textoCentrado { Por último, vamos a modificar el “body”. Utilizaremos
text-align:center ; la propiedad “margin” con valor “50px” (cincuenta
}
.textoRojo { píxeles) para añadir márgenes externos y la
color:red; propiedad “padding” con valor “50px 100px” para
}
asignar márgenes internos.
Cuando usamos margin o padding podemos

/* Etiquetas */
body { asignar un valor distinto para cada borde.
margin: 50px;
background-color:powderblue; 1. margin: 50px; (los cuatro márgenes con
}
el mismo valor)
img {
width:100%;
}
2. margin: 50px 25px; (los márgenes
superiors e inferiors de 50px y los
/* Clases */
márgenes laterals de 25px)
.textoCentrado {
text-align:center ;
}
.textoRojo {
3. margin: 20px 25px 40px 10px; (un valor
color:red; para cada margen. El orden sería: superior,
}
derecho, inferior e izquierdo)
/* Etiquetas */
body {
margin: 50px;
border: 1px solid black;
}
img {
width:100%;
}
/* Clases */ Finalizamos añadiendo la propiedad “border”, que

.textoCentrado { nos permite añadir estilo al borde de un elemento.
text-align:center ;
} El primer valor que asignamos es el grosor del borde
.textoRojo { (1px); el segundo valor es el tipo de línea (solid o
color:red;
} dashed) y, por último, el color del borde (black).
Ctrl+S para guardar
Recuerden siempre
guardar los cambios
que hicieron en el
código para que se
sitio web.
¡Lo logramoooooos! Felicitaciones :)
margin:
padding:
Aquí vemos que el ”margin” es el espacio externo del <body>. A su vez,

border:
vemos el borde negro del <body> con la propiedad “border”. Por último,
vemos que el “padding” es el espacio interno entre el borde y el
contenido del <body>
Esto es el espacio
que ocupa el contenido
padding:
padding: padding:
border:
margin:
margin: margin:
Fin de la parte práctica
Si están haciendo la versión del curso con docente, deben enviarle las actividades
que realizaron hasta aquí para recibir una devolución. A continuación les
presentamos un paso a paso para hacerlo.
1. Creamos una carpeta con nuestro Nombre
y Apellido
(Este paso solo aplica para las personas que
están haciendo la versión del curso con docente)
1. Creamos una carpeta con nuestro Nombre
y Apellido
(Este paso solo aplica para las personas que
están haciendo la versión del curso con docente)
2. Abrimos la carpeta que creamos.
(Sólo válido para las personas que están haciendo
la versión del curso con docente)
3. Cargamos nuestro sitio web aquí.
Presionamos primero en el botón “Cargar” y
luego en “Carpeta”.
4. Buscamos y seleccionamos nuestra
carpeta.
5. Hacemos click en “Upload”
¡Listo, sitio cargado y tarea entregada!
Felicitaciones :)
Si están haciendo la versión del curso con docente
Descarguen el PPT que

usarán para hacer la tarea
https://rebrand.ly/descargarEjercicioWeb --> (Docente actualizar enlace a Ejercicio
Asincrónico de la Unidad 4)
Álbum de <etiquetas> principales
Raiz Texto Secciones Extras
Metadatos <p> <nav>

Para terminar de
<meta> <a> <main>
desbloquear todas las
<title> <section> etiquetas les
<style> Imágenes <article> proponemos que

sigan investigando en
los siguientes sitios
<div>
w3school o Mozilla.
¿Quieren seguir aprendiendo?
Completen este
formulario
Hagan click aquí para ir al formulario.
Cuando lo completen, no importa si bien o mal,
les aparecerán links a cursos para seguir aprendiendo.
https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAMAAC42LX5UQUNUMUM3U
TA0VEozUFBCTVNYOUNBOVNQUC4u
Hoy en día, conocer los lenguajes HTML, CSS y
JavaScript permite:
Front-end - Trabajar de forma independiente (freelancer)

- Emprender un propio proyecto web
- Trabajar para una empresa local o extranjera de forma
en los remota.
Además, la rama de Front-End está totalmente
trabajos articulada con la experiencia de usuario (UX),

un aspecto más psicológico y relacionado con el diseño
de interfaces gráficas (UI).
Paso a paso para convertirse en Front-End
https://roadmap.sh/frontend
Agenda
Clase 1: 1 de julio
Entrega de la tarea: 5 de julio
Clase 2: 6 de julio
Recuperatorio: Al finalizar la formación

Tiempo de
pasillo
Módulo 3:
Fase sincrónica
Por favor, para que todos y todas podamos disfrutar
de la clase, les pedimos que apaguen sus cámaras y micrófonos.
¡La clase está siendo grabada!
Les pedimos por favor que tengan en cuenta las
siguientes reglas de cursada:
Buenas - Destinaremos los primeros minutos a revisar

e intentar solucionar aspectos técnicos y de
prácticas conexión.
-El chat solo podrá utilizarse cuando lo habilite
quien facilita la clase.
para la -Para participar de los momentos de interacción

habrá que pedir la palabra.
-Quien facilite la clase prestará atención al chat
cursada únicamente en momentos específicos y con el

objetivo de guiar las actividades.
- Las preguntas generales sobre la formación
pueden realizarse por mail o al final de la clase.
Si la conexión a internet es débil, pueden tener en
Buenas cuenta las siguientes recomendaciones:
- Estar cerca del modem/router.
prácticas - Evitar que en otras computadoras se estén

subiendo archivos o reproduciendo películas o
videos de Youtube.
para la - Salir y volver a entrar a la clase.

- Resetear el módem.
- Conectarse desde un teléfono inteligente (en caso
cursada de disponer de uno) para observar la clase.
Si todo esto falla, pueden escribirle a su docente

para que les envíe el material por email
Como solución temporal, a quienes
tengan problemas con el chat
Probando les recomendamos:
el chat
1. Conectarse a la videollamada a través
de su navegador ingresando de
forma anónima desde una pestaña de
En unos minutos comenzará la incógnito.
clase. Recuerden apagar cámara y
micrófono. 2. Otra alternativa es ingresar a
Microsoft Teams registrándose con
una cuenta personal Outlook o
Hotmail.
1.
2.
ROMPEHIELOS 1
(opcional para trabajar patrones)
- Con un satélite
Entro al - Con una máquina

- Hablando por teléfono
castillo...
- Con un satélite
Entro al
- Con una máquina
castillo... - Con números

- Usando la lógica
- Haciendo el ridículo
- Con un satélite
- Con una máquina
Entro al - Con números

- Usando la lógica
castillo... - Haciendo el ridículo
- En círculos
- Envuelto en plástico
- Con una cerámica
¿Qué sucedió en el desafío?
Lo que acabamos de hacer fue
“Reconocer patrones”.
Este proceso forma parte de una metodología para resolver problemas

que se llama Pensamiento Computacional.
FIN ROMPEHIELOS 1
(opcional para trabajar patrones)
ROMPEHIELOS 2
(opcional, para trabajar descomposición en subproblemas)
Rompehielos
¿Qué está sucediendo?

“La semana pasada una escuela primaria fue visitada por
el inspector de turno, con el fin de cerciorarse de que alumnos y
alumnas alcanzaran los objetivos previstos. Una de las profesoras
lo dejó impresionado. Cada vez que realizaba una pregunta,
todos/as los niños y niñas en la clase levantaban un brazo de forma
entusiasta. Además, cada vez que la docente seleccionaba un niño
o una niña diferente para responder a la pregunta, las respuestas
eran siempre correctas. ¿Cómo puede ser?¿Qué estaba pasando?"
Importante, para adivinar qué estaba sucediendo solo pueden hacer preguntas en
el chat que el/la facilitador/a pueda responder con un “Sí” o con un “No”.
¡Respuesta!
El secreto de la profesora era el siguiente. Le propuso a todos/as

sus estudiantes que levantaran la mano derecha si conocían la
respuesta correcta y la mano izquierda si no la conocían.
De esta forma, la profesora podía identificar fácilmente a quienes
seleccionar para que respondan correctamente a las preguntas ;)
¿Qué sucedió en el desafío?
Lo que acabamos de hacer fue
“Descomponer el problema general en varios Subproblemas”.
Este proceso forma parte de una metodología para resolver problemas

que se llama Pensamiento Computacional.
FIN ROMPEHIELOS 2
(opcional, para trabajar descomposición en subproblemas)
¡Bienvenidos y bienvenidas!
Habilidades para el
Futuro
Presentación personal
Mi nombre es
<nombre del docente>
y mi receta favorita de cocina es…
“..…procesos de pensamiento
involucrados en formular problemas
y encontrar sus soluciones de
manera que las soluciones estén
Pensamiento representadas de forma tal que
puedan ser llevadas a cabo
computacional efectivamente por un agente que
procesa información”
Jeannete Wing, 2011 (vicepresidenta del

departamento de investigación de Microsoft)
“El Pensamiento Computacional es
una metodología de resolución de
problemas que amplía el campo de
la computación a todas las
Pensamiento disciplinas, proporcionando un
medio distinto de analizar y
computacional desarrollar soluciones a problemas
que pueden ser resueltos
computacionalmente.”
Computer Science Teachers Association (CSTA),

2016.
Es un proceso por el cual se
fragmentan los datos, procesos o
problemas en partes pequeñas y
1. manejables. Cada pieza debe
Descomposición entenderse, solucionarse,
desarrollarse y evaluarse por
en subproblemas separado. Esto hace que sea más
fácil resolver problemas complejos y
diseñar sistemas grandes.
¡Atención!
Se viene otro
desafío ;)
¿Cuál es la
opción
correcta?
Características
detectadas
- Conjuntos de elementos
(cuadrados, cruces y líneas)
- Cantidad (3, 4 y 5)
- Forma y orientación (uno

curvo, uno recto y uno inclinado a
45°)
Los patrones son regularidades,
elementos constantes dentro de un
2. conjunto de datos que son variables.
Reconocimiento Su reconocimiento permite encontrar
elementos comunes con problemas
de patrones que ya fueron resueltos
anteriormente.
Las abstracciones son
generalizaciones o síntesis que
realizamos en las que identificamos
3. los aspectos centrales de un conjunto
Construcción de y descartamos los factores que son
irrelevantes. Es al mismo tiempo un
abstracciones proceso y un producto. Por ejemplo,
un patrón es un producto del proceso
de hacer una abstracción.
¡Ayuda!
Ojos vendados
El objetivo es que el/la facilitador/a logre
escribir un mensaje con la menor cantidad de
errores y de instrucciones posible, pero con los
ojos vendados. No vale indicarle que borre lo
que ya escribió.
Guiando a Si comete un error, hay que seguir ;)
mi profe 1. Un/a voluntario/a lo/la guiará para que logre

completar el mensaje. Puede prender el
micrófono.
2. Otro/a voluntario/a llevará la cuenta de la

cantidad de errores e instrucciones.
El/la profe va a escribir acá…
Posición inicial:
teclas “F” y
“J”.
Un algoritmo es un conjunto ordenado de
operaciones, un paso a paso taxativo que
indica cómo resolver un problema. Cuando
4. pensamos el diseño del algoritmo partimos
de un estado inicial y proyectamos un
Creación de estado final.
algoritmos En un algoritmo, encontramos patrones

cuando repetimos acciones. A su vez, el
algoritmo es una abstracción subjetiva de
los paso a paso necesarios.
Una herramienta visual para
mejorar nuestro aprendizaje
Diagrama de
flujos
Aprender a
aprender
Sintetizar la información en
diagramas visuales nos permite
afianzar y relacionar mejor nuestros
aprendizajes.
Pasamos lista
Escriban su
nombre y apellido
en el chat
80% de asistencia necesaria
¡Felicitaciones! Han hecho un gran trabajo. ¡Aquí termina la parte práctica!
Profundizar
conceptos
A continuación, presentamos algunos conceptos que les permitirán conocer cuestiones
básicas de programación y del lenguaje JavaScript.
¿Qué es
programar?
Dar instrucciones necesarias a una máquina o aparato para
que realice su función de manera automática. Cuando programamos, aplicamos muchos
procesos de pensamiento que componen, justamente, al Pensamiento Computacional.
Javascript
Es un lenguaje de programación que está

diseñado para manipular de forma dinámica
el código HTML de nuestra web.
Por ejemplo, JavaScript permite leer y validar los datos

que un usuario ingresa en un formulario corroborando si
su contraseña es segura o si respeta la cantidad mínima de
caracteres requeridos. Además, permite que, al tocar
botones, sucedan cosas como cambiar el color o tamaño de
un texto o mostrar una alerta en pantalla, entre otras tantas
cosas.
Entonces
Capa de
operación Podemos imaginar que HTML es el
lógica lenguaje base sobre el cual van a operar
Capa de los lenguajes CSS y JavaScript.
estilo
CSS va a operar introduciendo cambios
de estilo directos, o sea, solo visuales:
colores, tipografías, márgenes, bordes,
etc.
JavaScript va a trabajar de forma

dinámica leyendo el HTML e
Capa introduciendo cambios en vivo sobre él.
base JavaScript es muy poderoso, puede
modificar TODO lo que vemos en el
sitio y también hacer operaciones
lógicas para validar datos.
- Conceptos básicos para programar -
Variables
Variable
En programación, una variable es un espacio

reservado de memoria donde podemos almacenar
un valor. Las variables nos van a permitir almacenar
y operar con datos de forma temporal. Podemos
crear todas las que necesitemos.
Las variables tienen siempre un nombre único por

el cuál las identificamos.
Podemos pensarlo como cuando durante una mudanza se utilizan cajas
escritas, con nombres identificatorios, para poder guardar
temporalmente los objetos y ubicarlos luego fácilmente.
Variable
var En JavaScript, para crear

nuestras variables, podemos
hacerlo a través de una palabra
reservada, var
Pero ¿cómo hacemos esto? 

Primero vamos a ver un ejemplo paso a paso para entender
cómo se crea una variable utilizando el lenguaje JavaScript.
Luego utilizaremos la plataforma “CodePen” para mostrar
otros ejemplos.
Antes de ver como se escribe una variable, queremos indicar que en este ejemplo
la primera línea de código es un comentario interno de JavaScript, es decir que no
tiene efecto sobre el código, es solo para poder hacer anotaciones propias.
Los comentarios que ocupan más de una línea en JavaScript se escriben entre
/* Comentario */. A los comentarios que solo ocupan una línea se les coloca al
principio // (doble barra) y así se conveirten en comentario automáticamente.
Bien, empecemos… “var” es la palabra reservada que se usa para decirle a
JavaScript que queremos crear una variable. Debemos utilizarla al principio de
nuestra línea de código así JavaScript ya entiende qué es lo que queremos hacer.
Luego de escribir “var” presionamos la “Barra espaciadora” y JavaScript
nos va a pedir que le pongamos un nombre único por el cuál
luego llamaremos e identificaremos a esta variable.
Es importante saber que hay ciertas restricciones a la hora de elegir

nombres para nuestras variables, les contamos más en la siguiente
diapositiva.
Los nombres de las variables pueden ser de un solo caracter o de muchos. Lo importante es
que el primero debe ser siempre una letra mayúscula, minúscula (A, z), un guion bajo
“_” o un símbolo de dinero “$”. Los siguientes sí pueden ser caracteres numéricos y
combinarse con los ya mencionados (A, z, “_” y “$”). Los caracteres de uso matemático, como
el +, -, % o * no se pueden utilizar en los nombres de las variables. Algunos ejemplos:
Correctos: color1, _color, $color, Color_1, a1, A1, $dato1, $Dato1

Incorrectos: %color, 1color, #color, color-1, 33dato, .nombre
- ¿Son correctas las siguientes opciones? -
Revisemos nombres
de variables
¿Este nombre de variable es válido?
variables.js
var $color_principal1
variables.js
OK var $color_principal1
Perfecto, porque los nombres de las variables sí pueden

comenzar con el símbolo $ (dolar)
variables.js
var _UsuarioNombre
variables.js
OK var _UsuarioNombre

comenzar con el símbolo _ (guion bajo)
variables.js
var 5toValor
variables.js
Error! var 5toValor
¡Auch, no! Los nombres de las variables no pueden

comenzar con un número.
variables.js
var sumaFinal
variables.js
OK var sumaFinal

comenzar con una letra minúscula.
variables.js
var /estatura_usuario
variables.js
Error! var /estatura_usuario

comenzar con una barra inclinada derecha porque ésta se
utiliza como un operador para hacer divisiones
matemáticas…
variables.js
var color-1
variables.js
Error! var color-1

contener operadores matemáticos. En este caso el “guion
medio” se utiliza en JavaScript para realizar
restas/sustracciones matemáticas. Tampoco se podrían
usar el + (suma) o el * (multiplicación)
Muy bien, continuemos. Luego de asignar correctamente un nombre a la variable
debemos presionar la “Barra espaciadora” e introducir el símbolo igual (=). Este
símbolo le da a entender a JavaScript que a continuación vamos a darle el valor que
queremos almacenar. A este proceso se lo conoce como “asignar un valor a la
variable”. En este ejemplo, la variable llamada "nombreVariable" está almacenando la
cadena de caracteres "Hola mundo".
A continuación del (=) colocamos el valor que queremos
almacenar. Si son caracteres deben ir entre comillas
(“Bienvenido super agente 86”) y si son numéricos, sin
comillas (276)
Por último, para indicar el final de la declaración es necesario SIEMPRE colocar
un punto y coma (;). Funciona igual que un punto “.” cuando terminamos de
escribir una oración en español. El punto indica el final de la oración, el “;”
indica en JavaScript el final de una declaración.
2 tipos de datos
principales
numérico
Tipos de datos
Un valor es un dato. Puede ser

numérico o alfanumérico.
"alfanumérico" o
"cadena de Dependiendo del tipo de dato que
caracteres" queramos almacenar, vamos a
tener que escribirlo entre
“comillas” o no.
variables.js
var natural = 3;
numérico var entero = -7;
var racional = 3.14;
En estas variables estamos almacenando solamente

valores numéricos. Estos valores serán interpretados por
JavaScript como “números” y con ellos podrá realizar
operaciones matemáticas.
variables.js
var caracter = “e”;

var palabra = “Hola”;
"alfanumérico" o var oracion = “¡Hola mundo!”;
"cadena de var alfanumerico = “¡Hola
caracteres" mundo, mi número de la suerte
es el 777”;
Aquí estamos almacenando cadena de caracteres, o

sea textos. Observen que van encerrados entre comillas
dobles (pueden ir entre ‘comillas siemples’ también). De
esta forma, JavaScript entiende que NO son números y
que con estos datos debe operar distinto.
Si quieren hacer algunas
pruebas modificando los valores
que se guardan en las
variables, pueden jugar en el
siguiente link.
https://codepen.io/docentehde/p
en/ZEQvPNm
- Operando con variables en JavaScript -
¿Qué valor se está

almacenando en la
variable total?
var total = 5 + 3;
?
var total = 5 + 3;
Al crear una variable y elegir qué valor almacenar en
ella, podemos también guardar el resultado de una operación
8
matemática, ya sea una suma (+), sustracción (-), división (/)
multiplicación (*) u otras tantas operaciones.
?
var num1 = 7;
var total = num1 * 2;

var num1 = 7;
var total = num1 * 2;

Una vez que creamos una variable, va a representar el valor
que almacena. De esta forma, podemos utilizar la variable a su
14
valor simplemente escribiendo su nombre y operando con ella.
En este caso estamos operando con la variable “num1”, que
vale 7, y la estamos multiplicando por 2. El resultado, a su vez,
lo estamos almacenando en la variable “total”.
var num1 = 7;
var num2 = 3;
var total = num1 – num2;

?
var num1 = 7;
var num2 = 3;
var total = num1 – num2;

4
Aquí estamos restando/sustrayendo dos variables cuyos valores
son iguales a 7 y 3.
var a = “ho”;
?
var b = “la”;
var c = 3;
var total = a + b + c;
var a = “ho”;
var b = “la”;
var c = 3;
hola3
var total = a + b + c;
Atención aquí, cuando le pedimos a JavaScript que sume (+)
valores y AL MENOS UNO de ellos es de tipo de dato
“alfanumérico”, lo que va a hacer es concatenar la cadena de
caracteres. Es una decisión en la lógica del lenguaje para evitar
un error y porque claramente es imposible sumar textos como
si fuesen números.
var a = “70”;
var b = “40”;
var total = b + a;
?
var a = “70”;
var b = “40”;
var total = b + a; 4070

Aquí se están almacenando los números como “textos” porque están
entre comillas. Cuando JavaScript intenta SUMAR textos lo que hace es
concatenarlos/unirlos, por eso el valor es “4070” y no la suma de ellos, o
sea 110.
var a = “holaaaaa”;
?
a = 4;
a = a + 2;
var total = a;
var a = “holaaaaa”;
a = 4;
a = a + 2;
var total = a;
¡Jaaa! A ver qué pasó aquí. Es importante saber que las
variables pueden guardar un solo valor y que este se puede ir
sobrescribiendo a medida que lo necesitemos. En este caso
6
creamos la variable “a” y le guardamos el valor “holaaaaa”. En
un segundo paso, a esa misma variable la sobrescribimos y le
asignamos el valor 4, “holaaaaa” ya no existe más dentro de
ella. Por eso en el paso siguiente, cuando volvimos a definir
“a”, el resultado fue 4 + 2. Por último, le dijimos a total que
almacene el mismo valor que hay en “a”, es decir, 6.
Crear mis propias funciones

Función
Una función es un bloque de código que

puede invocarse/llamarse infinitas veces
para resolver un problema.
Esto permite escribir una sola vez y
reutilizar las mismas líneas de código para
resolver un problema recurrente.
Cada vez que tenemos que solucionar un mismo problema,

vamos a buscar la misma herramienta con la cual ya hemos
tenido éxito.
Función
Una función, al igual que una variable,

function tiene una palabra reservada para indicar su
creación. La palabra es function.
También necesita un nombre, como las

variables, para poder ser llamada y
utilizada. Los criterios para elegir su
nombre son los mismo que se utilizan para
las variables.
Función
Ahora bien, las funciones necesitan dos

function cosas más para ser creadas: un espacio
para indicar parámetros propios de la
función y llaves { } para indicar el
bloque de código que se ejecutará cada
vez que se la utilice.
Primero, vamos a ver un ejemplo paso a paso para entender
cómo se crea y se usa una función utilizando el lenguaje
JavaScript. Luego utilizaremos la plataforma “CodePen” para
mostrar más ejemplos.
"function" es la palabra reservada para indicar que vamos a crear
una función. Como toda palabra reservada, se utiliza al principio de
la declaración.
Acá le asignamos un nombre a nuestra función. Es algo similar a lo
que hacíamos cuando nombrábamos variables; las restricciones
son las mismas.
Luego de escribir el nombre, la función nos ofrece la posibilidad de designar un espacio
para crear variables que solo van a existir cuando la función se ejecute. Estas variables,
propias de la función, se llaman parámetros y permiten que, cuando usemos una
función, por ejemplo, para detectar si dos palabras son iguales, podamos cargarle los dos
valores con los cuales queremos que opere y nos diga si las palabras son iguales o no. Los
parámetros van siempre escritos entre ( ) y, si hay más de uno, se separan con una coma.
Paciencia, este concepto de parámetro lo van a ir entendiendo a medida que avancemos y

practiquemos.
Luego de escribir los parámetros, que van siempre entre paréntesis (),
debemos indicar el bloque de código que se va a ejecutar cada vez que se
llame a la función. Esto se indica abriendo y cerrando llaves { }. Todo lo que
esté encerrado entre ellas será el código que se va a ejecutar cada vez que
invoquemos/llamemos a la función.
“return” es una palabra reservada de las funciones y se utiliza para devolver un resultado.
Además, indica el final de la ejecución de la función. Es importante saber que no siempre todas
las funciones deben tener un “return”, solo se usa cuando queremos retornar un valor. En este
caso la función está devolviendo el valor almacenado en la variable "total”… por ejemplo, si
esta función recibió en sus parámetros los valores (5, 7), la variable total va a almacenar 12 y
la función va a devolver/retornar justamente ese valor, 12.
Paciencia, esto lo van a comprender mejor con más ejemplos.

Por último, aquí ya estamos FUERA de la función porque las llaves { } ya cerraron.
Lo que estamos haciendo acá es crear la variable “suma” y asignándole el valor que nos
devuelva/retorne la función "nombreFuncion(2, 2)". Si observamos, entre paréntesis y
separados por una coma, estamos cargando dos valores numéricos (2, 2) que van a ser
recibidos por los “parametro1” y “parametro2” de la función.
Observen: acá estamos asignando los valores del “parámetro1” y
“parámetro2”. En este caso, ambos van a valer 2 (dos)… si cargáramos en la
función "nombreFuncion(3, 5)" el valor que va a retornan la función va a ser 8
y ese valor va a ser almacenado en la variable "suma".
Vamos a ver estos ejemplos
en la plataforma CodePen
para que sea más fácil
modificarlos y
comprenderlos.
https://codepen.io/docentehde
/pen/pogpYaa
Desafío JavaScript
Operar con
variables y funciones
¿Cuánto vale la variable total?
function suma(a, b) {
?
return a + b;
}
var total = suma(5, 4);

function suma(a, b) {
return a + b;
}
var total = suma(5, 4);

Al llamar a la función suma(); con los valores 5 y 4, lo que estamos
9
haciendo es cargar los parámetros con esos dos números. De esa forma
el parámetro “a”, va a ser igual a 5 y “b” a 4. Por último, la función
suma(); nos va a retornar el resultado de la suma de 5 + 4, o sea de a + b.
function retornarNum() {
?
return 3;
}
var total = retornarNum() + 1;

function retornarNum() {
return 3;
}
var total = retornarNum() + 1;

Vemos que la función retornarNum(); no tiene espacios para admitir
parámetros. Por ende, se la llama y no se le carga nada entre los
4
paréntesis. Lo que esta función va a hacer SIEMPRE que la llamemos es
retornar el valor de 3 numérico. Por eso, al llamarla y sumarle 1, el valor
que se almacena en la variable total es 4.
function multi(a) {
?
return a * a;
}
var total = multi(5);

function multi(a) {
return a * a;
}
var total = multi(5);

Cuando llamamos a la función multi(); con el valor 5, lo que hace es
25
multiplicar al número por mismo. Cómo vemos, la función solo admite
un parámetro y lo que hace es multiplicarlo por sí mismo.
Importante: el símbolo * (asterisco) se utiliza para multiplicar.

function añadir(a) {
return a + “!”;
}
var total = “mun”

?
+ añadir(“do”);
function añadir(a) {
return a + “!”;
}
var total = “mun”

+ añadir(“do”); mundo!
La función añadir(); lo que está haciendo es recibir un valor y añadirle al
final un signo de exclamación. Por eso, al concatenar “mun” con
añadir(“do”); el resultado es “mundo!”. La función nos está devolviendo
“do!” con el signo de exclamación añadido.
Por otro lado, verán que la instrucción está escrita en dos renglones. Esto no
afecta a la funcionalidad ya que el ; (punto y coma) indica el final de la
sentencia, o sea de la instrucción.
function restarUno(a) {
?
return a - 1;
}
var total = restaruno(4);

Error!
function restarUno(a) {
return a - 1;
La función
}
restaruno() no
existe... hay
var total = restaruno(4);
que respetar
minúsculas y
mayúsculas.
¡Felicitaciones!
Llegaron al final del tutorial
(Para quienes estén realizando la versión autoguiada del curso:
las diapositivas de aquí en adelante son opcionales.
¡No son obligatorias y no serán evaluadas en el cuestionario!).
- Usar JavaScript en mi HTML -
¿Cómo utilizar JavaScript

en mi HTML?
Si usamos las etiquetas <script> podemos escribir
dentro de ellas todo el contenido JavaScript. Las
etiquetas <script> pueden ir tanto dentro del <head>
como del <body>, pero se recomienda SIEMPRE
ubicarlas al final del <body>, antes de cerrar el
</body>.
La otra forma, más recomendada, es crear un archivo JavaScript externo. Los archivos JavaScript
terminan en ".js". En este caso, creamos un archivo "app.js" y copiamos el mismo contenido
de antes. En HTML usamos la etiqueta <script> y el atributo "src=" para indicar la ruta a donde
nuestro HTML debe ir a buscar el archivo "app.js" para cargarlo efectivamente.
- Mostrar textos a través JavaScript en el documento o en la consola -
Métodos de JavaScript
Métodos
Podemos definir al método como una

función; la única diferencia es que no
la creamos, sino que ya viene establecida
en el propio JavaScript.
Hay problemas tan recurrentes y básicos, como imprimir valores

en pantalla o en consola, que el mismo lenguaje ya cuenta con
sus propias “funciones” para resolverlos… Podemos entender los
métodos como funciones esenciales que ya vienen de fábrica con
el lenguaje.
Métodos
document.write();
Este método de JavaScript permite insertar nuevas líneas de

código HTML dentro de un archivo HTML. Se suele usar en
etapas de prueba para conocer algunos valores que tiene un sitio
al cargarse.
Si este método se ejecuta después de que todo el sitio web haya

sido cargado, va a sobrescribir todo el archivo y va a dejar solo
lo que le pedimos que escriba entre los paréntesis.
Vamos a ver un ejemplo en
la plataforma CodePen para
que sea más fácil.
https://codepen.io/arielpont/
pen/vYKGvBG
Métodos
window.alert();
Este método de JavaScript permite mostrar una ventana de

diálogo con un mensaje. Se utiliza para advertirle al usuario
sobre un error o información importante.
A veces, cuando estamos programando y probando nuestro

código, nos puede resultar útil también para imprimir ciertos
valores de variables rápidamente y corroborar que todo esté
funcionando como lo esperamos.
pen/GRqZPyM
Métodos
console.log();
Este método de JavaScript permite mostrar valores por la

consola del navegador. Puede ser muy útil cuando hacemos
pruebas para ir imprimiendo en pantalla valores o mensajes y así
asegurarnos de que nuestro código esté haciendo lo
que esperamos.
pen/WNxwLgY
Métodos
Bien, ahora vamos a ver cómo insertar código HTML sin tener
que eliminar TODO el contenido de nuestro sitio web, como nos
pasaba con document.write();
Para eso, necesitamos antes comprender algunas cosas más de
cómo funciona JavaScript.
JavaScript entiende a cada etiqueta de HTML como un elemento.

A su vez, para cada elemento JavaScript va a ofrecer métodos
específicos que permiten hacer distintas cosas, como modificar
el contenido que hay dentro de una etiqueta o incluso las
propiedades CSS de la misma.
Métodos
Cuando en JavaScript escribimos “document” o “window” lo

que hacemos es referenciar al elemento raíz <html> de nuestro
sitio web. Este elemento raíz JavaScript ofrecerá varios métodos
para resolver distintos problemas.
Para comprender mejor esto del “document” es importante

entender la lógica con la cual se organiza JavaScript. A
continuación, les dejamos una propuesta para comprender ésto,
que tiene el nombre de DOM y significa en ingles Document
Object Model.
Ingresen aquí para
comprender mejor qué es
DOM.
https://www.w3schools.com/j
s/js_htmldom.asp
Métodos
document.getElementById();
Para poder modificar el contenido de un solo elemento de nuestro código
HTML usando JavaScript, primero debemos acceder al documento y
luego utilizar una función que nos permita, a través del ID de la
etiqueta/elemento, encontrarla y almacenarla en una variable.
Para hacer esto vamos a escribir document y luego añadiremos un .

(punto). El punto, luego de un elemento, indica que vamos a acceder a
algún método que JavaScript nos ofrece. En este caso, vamos a acceder
al método getElementById(); Este método nos va a retornar/devolver el
elemento que tenga el ID que le pedimos y así podremos almacenarlo en
una variable para luego operar, ahora sí, con el elemento que queremos
modificar.
Vamos a seguir la
explicación con un ejemplo
en la plataforma CodePen
para que sea más fácil.
pen/XWKdOrX
Todos estos ejemplos de los
métodos también los hemos
creado con el Visual Studio
Code, para que
puedan descargarlos y
abrirlos en sus
computadoras. Pueden
encontrarlos a través del link
que les compartimos para
acceder a este tutorial.
rebrand.ly/
descargarMaterialPreparate
Desafío de algoritmos y llamado de funciones
Momento de
apostar por algoritmos
Deberán apostar, escribiendo en el chat, si el siguiente algoritmo
“FUNCIONA” o “NO FUNCIONA”
Ejemplo
El objetivo es que nuestra
mascota virtual llegue a su destino .
instrucciones.js
arriba();
derecha();
abajo();
izquierda();
abajo();
¿Podrá llegar hasta la bandera a cuadros si sigue las

instrucciones paso a paso? ¿Sí o No?
instrucciones.js
arriba();
derecha();
abajo();
izquierda();
abajo();
instrucciones.js
arriba();
derecha();
abajo();
izquierda();
abajo();
instrucciones.js
arriba();
derecha();
abajo();
izquierda();
abajo();
instrucciones.js
arriba();
derecha();
abajo();
izquierda();
abajo();
instrucciones.js
arriba();
derecha();
abajo();
izquierda();
abajo();
Desafío 1
El objetivo es observar la consigna y tratar de calcular si nuestra
mascota virtual llegará a su destino .
arriba();
repetir (3) {
derecha();
}
arriba();
arriba();
arriba();
arriba();
repetir (3) {
derecha();
}
arriba();
arriba();
arriba();
arriba();
repetir (2) {
derecha();
}
arriba();
arriba();
arriba();
arriba();
repetir (1) {
derecha();
}
arriba();
arriba();
arriba();
arriba();
repetir (0) {
derecha();
}
arriba();
arriba();
arriba();
arriba();
repetir (3) {
derecha();
}
arriba();
arriba();
arriba();
arriba();
repetir (3) {
derecha();
}
arriba();
arriba();
arriba();
arriba();
repetir (3) {
derecha();
}
arriba();
arriba();
arriba();
¡Importante!
¡Importante! Los límites
teletransportan al extremo
opuesto.
Por ejemplo, si el personaje

llega al límite derecho y se
mueve una vez más a la
derecha(), aparecerá en el
extremo opuesto, o sea, en
el izquierdo.
¡Importante! Los límites
teletransportan al extremo
opuesto.
Por ejemplo, si el personaje

llega al límite derecho y se
mueve una vez más a la
derecha(), aparecerá en el
extremo opuesto, o sea, en
el izquierdo.
Desafío 2
abajo();
repetir (6) {
derecha();
}
arriba();
abajo();
repetir (6) {
derecha();
}
arriba();
abajo();
repetir (5) {
derecha();
}
arriba();
abajo();
repetir (4) {
derecha();
}
arriba();
abajo();
repetir (3) {
derecha();
}
arriba();
abajo();
repetir (2) {
derecha();
}
arriba();
abajo();
repetir (1) {
derecha();
}
arriba();
abajo();
repetir (0) {
derecha();
}
arriba();
abajo();
repetir (0) {
derecha();
}
arriba();
Desafío 3
izquierda();
repetir (2) {
abajo();
izquierda();
}
abajo();
izquierda();
repetir (2) {
abajo();
izquierda();
}
abajo();
izquierda();
repetir (1) {
abajo();
izquierda();
}
abajo();
izquierda();
repetir (1) {
abajo();
izquierda();
}
abajo();
izquierda();
repetir (0) {
abajo();
izquierda();
}
abajo();
izquierda();
repetir (0) {
abajo();
izquierda();
}
abajo();
izquierda();
repetir (0) {
abajo();
izquierda();
}
abajo();
Desafío 4
repetir (2) {
derecha();
abajo();
repetir(2) {
izquierda();
}
}
abajo();
repetir (1) {
derecha();
abajo();
repetir(2) {
izquierda();
}
}
abajo();
repetir (1) {
derecha();
abajo();
repetir(2) {
izquierda();
}
}
abajo();
repetir (1) {
derecha();
abajo();
repetir(1) {
izquierda();
}
}
abajo();
repetir (1) {
derecha();
abajo();
repetir(0) {
izquierda();
}
}
abajo();
repetir (0) {
derecha();
abajo();
repetir(2) {
izquierda();
}
}
abajo();
repetir (0) {
derecha();
abajo();
repetir(2) {
izquierda();
}
}
abajo();
repetir (0) {
derecha();
abajo();
repetir(1) {
izquierda();
}
}
abajo();
repetir (0) {
derecha();
abajo();
repetir(0) {
izquierda();
}
}
abajo();
repetir (0) {
derecha();
abajo();
repetir(0) {
izquierda();
}
}
abajo();
Desafío 5
arriba();
izquierda();
si (color_casillero es ){
izquierda();
}
sino {
derecha();
}
repetir (4) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (4) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (4) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (4) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (3) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (3) {
abajo();
repetir(1) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (3) {
abajo();
repetir(0) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (2) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (2) {
abajo();
repetir(1) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (2) {
abajo();
repetir(0) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (1) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (1) {
abajo();
repetir(1) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (1) {
abajo();
repetir(0) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (0) {
abajo();
repetir(2) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (0) {
abajo();
repetir(1) {
izquierda();
}
}
arriba();
izquierda();
izquierda();
}
sino {
derecha();
}
repetir (0) {
abajo();
repetir(0) {
izquierda();
}
}
Desafío final
instrucciones.js
repetir 3 veces {
abajo();
}
si el casillero es de color {
derecha();
} sino {
arriba();
}
derecha();
arriba();
¿Podrá el ave llegar hasta la bandera a cuadros si sigue

las instrucciones paso a paso? ¿Sí o No?
instrucciones.js
repetir 2 veces {
abajo();
}
derecha();
} sino {
arriba();
}
derecha();
arriba();
instrucciones.js
repetir 1 vez {
abajo();
}
derecha();
} sino {
arriba();
}
derecha();
arriba();
instrucciones.js
repetir 0 veces {
abajo();
}
derecha();
} sino {
arriba();
}
derecha();
arriba();
instrucciones.js
repetir 0 veces {
abajo();
}
derecha();
} sino {
arriba();
}
derecha();
arriba();
instrucciones.js
repetir 0 veces {
abajo();
}
derecha();
} sino {
arriba();
}
derecha();
arriba();
instrucciones.js
repetir 0 veces {
abajo();
}
derecha();
} sino {
arriba();
}
derecha();
arriba();
Muy bien, si llegaron hasta aquí es porque son
muy valientes, resilientes y tienen una
curiosidad increíble :)
Les recomendamos que continúen su

aprendizaje en este sitio.
https://www.w3schools.com/js/default.asp
Está en inglés, pero pueden usar un traductor

para pasarlo a Español sin problemas.
En este sitio podrán repasar y aprender mucho

más sobre JavaScript. Mucha suerte y
nuevamente felicitaciones, dieron ya un
GRAN paso en el mundo del desarrollo web :)
- Rutina de cierre -
Reflexionar sobre el aprendizaje

Les proponemos que, una vez finalizada la clase, reflexionen sobre las
siguientes preguntas.
1. ¿Qué cosas nuevas aprendí hoy?

2. ¿Cómo aprendí estas cosas nuevas? ¿Qué cosas hice para aprender?
3. ¿Para qué me sirvió lo que aprendí?
4. ¿Puedo usar lo que aprendí en otras cosas que hago?
Tiempo de
pasillo

Unidad 4 - Presentación para La Clase (Módulos 1 y 3) Ultimate+MCT

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad 4 - Presentación para La Clase (Módulos 1 y 3) Ultimate+MCT

Cargado por

Copyright:

Formatos disponibles

Módulo 1:

Buenas - Destinaremos los primeros minutos a revisar

para la -Para participar de los momentos de interacción

cursada únicamente en momentos específicos y con el

Buenas cuenta las siguientes recomendaciones:

- Estar cerca del modem/router.

prácticas - Evitar que en otras computadoras se estén

para la - Salir y volver a entrar a la clase.

cursada de disponer de uno) para observar la clase.

Si todo esto falla, pueden escribirle a su docente

Probando les recomendamos:

El tipo de lógica que aplicamos

… Texto del artículo

Es la rama que se especializa en la

En la clase de hoy vamos a ver HTML y CSS, que

Es la rama que se especializa en la

En esta unidad no abordaremos este área

Es la rama que surge como

Internet es una red de redes, posee

Es una computadora que presta

Son dos protocolos de Internet que

Estos dos protocolos trabajan en conjunto y se encargan de

Cada dispositivo que se conecta a Internet

Por ejemplo, los servidores que alojan sitios

Se utiliza para identificar equipos o

DNS Estos servidores poseen una base de

Nos permiten que, al escribir en nuestro navegador

Es un navegador web y, como

Es un editor de código que nos va a

Volvamos a ver a ver el ejemplo del

<p> Esto permite que la jerarquía de

Más sobre las <etiquetas>

Raíz Texto Contenedores Extras

<html> <h1>, <h2>,...<h6> <body> <!DOCTYPE html>

<hr> <header>

Metadatos <p> <nav>

<head> </br> <aside>

<meta> <a> <main>

<style> Imágenes <article>

<link> <img> <footer>

Las primeras etiquetas

<body> aquí van todos

Raíz Texto Secciones Extras

<html> <h1>, <h2>,...<h6> <body> <!DOCTYPE html>

<hr> <header>

Metadatos <p> <nav>

<head> </br> <aside>

<meta> <a> <main>

<style> Imágenes <article>

<link> <img> <footer>

Vamos a armar nuestro primer sitio web

Veamos la web que

Crear la carpeta y el primer

</body> 9. Actualizamos el contenido de la etiqueta <title> escribiendo nuestro

Añadir un título y un párrafo

<h1>Mi primer título</h1>

<h1>Mi primer título</h1>

<h1>Mi primer título</h1>

<h2>Mi segundo título pero algo más pequeño</h2>

7. Volvemos a nuestro código y pegamos

Raíz Texto Secciones Extras

<html> <h1>, <h2>,...<h6> <body> <!DOCTYPE html>