Scribd
Cargar
35 vistas270 páginas

Programación

Cargado por

Geraldine Campos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
35 vistas270 páginas

Programación

Cargado por

Geraldine Campos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 270

Clase 1 Programación

Fase sincrónica
¿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 esta área
¿Qué es Full-Stack?

Es la rama que surge como


combinación del Front-End y
Back-End. Hoy en día la mayor
demanda de perfiles está
apuntada a desarrolladores Full-
Stack, ya que tienen la
capacidad para dominar ciertos
lenguajes de ambas áreas.
+
Front-End Back-End
Full-Stack
Pero antes de seguir con desarrollo web...

Internet
¿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,
funcionando como fuente para ser
utilizada por distintos usuarios.
¿Qué es TCP/IP?

Son dos protocolos de Internet que


determinan como realizar 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 destino (Servidor). A
su vez, proporcionan seguridad enviando la
información de forma fragmentada (paquetes de
datos) y unificándola en destino.
Direcciones IP pública

Cada dispositivo que se conecta a


Internet debe tener sí o sí una IP única
que lo identifica, esta es la IP pública.
Por ejemplo, los servidores que alojan
sitios webs o los router y modems que
dan a acceso a Internet tienen una IP
pública..
Direcciones 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 en cierto modo aisladas
de las públicas. Se reservan para ellas
determinados rangos de direcciones y
estas si 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
192.168.255.255 Internet)
¿Qué es 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.
Microsoft Edge

Es un navegador web y como tal


su función es interpretar código
HTML, CSS y Javascript. Existen
muchos navegadores más como
Chrome, Safari, Mozilla, Opera,
Brave, etc.
Descargar: https://www.microsoft.com/en-us/edge
Luego de aquí comenzará a instalarse
automaticamente.
¡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.
Vamos a volver a ver el ejemplo del
principio de la clase…
Metadatos (son datos del mismo archivo, como nombre de
autor, nombre del sitio, idioma, palabras claves, etc) Estos son
“invisibles”, no suelen verse reflejados en la pantalla pero para el
navegador son importantes.
Cabeza
<head> Recursos externos (a veces queremos que nuestro sitio
utilice tipografías más bonitas u otro tipo de recursos. Estos los
tenemos que indicar en esta parte de la cabecera del sitio)

Sitio Botón 1
Web
Botón 2
Menú
principal …
Cuerpo Artículo 1 Título del artículo
Sección de
<body> noticias Artículo 2 Imagen del artículo

Footer … Texto del artículo


- Comenzamos -

¿Cómo armamos una


estructura jerárquica en
HTML?
Etiquetas
<sección>
<titulo> Para construir una
Acá va el título escrito
estructura jerárquica HTML
</título>
utiliza <etiquetas>.
<párrafo>
Estas etiquetas se
Acá va el 1er párrafo del texto
</párrafo>
caracterizan por poder
contener subelementos
<párrafo> mediante la indicación de su
Acá va el 2do párrafo del texto <apertura> y su </cierre>.
</párrafo>
</sección > Importante, observar que la etiquetas de
cierre se escriben utilizando </>
<section>
Etiquetas
<h1>
Acá va el título escrito
Al escribir código es muy
</h1>
importante siempre usar la
<p> indentación. ¿Qué es esto?
Acá va el 1er párrafo del texto Es el uso de la tecla TAB
</p> para indicar un subnivel.
<p> Esto permite poder entender
Acá va el 2do párrafo del texto fácilmente la jerarquía de
</p>
nuestro código HTML.
</section>
- Seguimos con HTML -

Más sobre las <etiquetas>


Existen distintos tipos de etiquetas para indicar títulos, textos,
imágenes, botones, etc. A continuación iremos aprendiendo cuales
son. Al ser muchas hemos creado un “álbum de etiquetas” con las
principales para que puedas registrar de tu avance durante este
tutorial ;)
Álbum de <etiquetas> principales

Raíz Texto Contenedores Extras

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

<hr> <header> <!--Comentario-->

Metadatos <p> <nav>

<head> </br> <aside>

<meta> <a> <main>

<title> <section>

<style> Imágenes <article>

<link> <img> <footer>


Conocer más etiquetas en
<div>
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 donde 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
<head> metadatos.

</head>

<body>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

</head>
<body> aquí van a ir todos los elementos que el navegador va a mostrar en
<body> pantalla.

</body>

</html>
<head> aquí van los
elementos que proveen
información general sobre
<head> el archivo, o sea
metadatos.

<html>

<body> <body> aquí van a ir


todos los elementos que
el navegador va a mostrar
en pantalla.
Álbum de etiquetas desbloqueadas

Raíz Texto Secciones Extras

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

<hr> <header> <!--Comentario-->

Metadatos <p> <nav>

<head> </br> <aside>

<meta> <a> <main>

<title> <section>

<style> Imágenes <article>

<link> <img> <footer>


Conocer más etiquetas en
<div>
w3school o Mozilla.
- ¡Manos a la obra! -

Vamos a armar nuestro primer sitio


web y a seguir conociendo más
sobre las <etiquetas> durante el
proceso.
- Nuestra meta -

Veamos la web que


vamos a crear
Hacer click aquí para ver el sitio web que vamos a crear siguiendo los paso a
paso que hay en esta presentación.
1er paso
1er paso (Empieza la tarea)

Creamos nuestra carpeta y


el primer archivo HTML
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe 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.
2. Abrimos el programa “Visual Studio Code” y
hacemos click en “Abrir carpeta” u “Open folder”.
3. Buscamos y seleccionamos la carpeta que
creamos en el primer paso, la carpeta “tutorial”.
4. Ya abierta la carpeta ahora vamos a crear
nuestro primer archivo.
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
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
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
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 escribimos
dentro del archivo
“html:5” y
presionamos 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í vamos a ir modificando y añadiendo código. Esta es
la base de un archivo HTML. ¡Vamos muy bien! :)
index.html

<!DOCTYPE html>
<html lang=“es”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<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 es leida por los motores de búsqueda como Bing
o Google para anticipar y filtrar el idioma del sitio.
2do paso
2do paso

Modificando metadatos
en el <head>
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe ir escribiendo todo directamente en el Visual Studio Code porque
algunos caracteres como las comillas dobles y simples fallan.
index.html

<!DOCTYPE html>
<html lang=“es”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>

<body>

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

</html> y Apellido”. Esta etiqueta <title> se utiliza dentro del <head> y lo que nos
permite es indicarle al navegador web que nombre queremos que muestre en la
pestaña cuando abramos este archivo html.
3er paso
3er paso

Añadiendo un título y un
párrafo en el <body>
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe ir escribiendo todo directamente en el Visual Studio Code porque
algunos caracteres como las comillas dobles y simples fallan.
<!DOCTYPE
index.html html>
<html lang=“es”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</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 diferentes <h1>, <h2>, <h3> y así hasta el <h6>. Esto está
pensado para poder disinguir títulos de subtítulos siendo <h1> el nivel más alto y <h6> el nivel
más bajo.
Ctrl+S para guardar

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
sitio web.
Vamos ahora a abrir nuestro archivo “index.html” haciendo doble click o
click derecho + abrir/open.
index.html
<body>

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


<p>Mi primer párrafo con información</p>

<p>
Mi segundo párrafo. Puedes 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 permite crear un hipervínculo. Esta
etiqueta tiene un atributo y es “href=”. En él indicamos la dirección a abrir al hacer click. Como verás, los
“atributos” se escriben en la etiqueta de <apertura> y son valores adicionales que soportan algunas de las
etiquetas. La etiqueta <a> soporta muchos más, aquí usamos “href” para indicar la URL del sitio web al
cúal queremos redireccionar al hacer click.
index.html <meta
name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>

<body>

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


<p>Mi primer párrafo con información</p>

<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
</p>

<hr>

</body> Las etiquetas <hr> se usan para insertar una línea horizontal divisora de texto…

</html> Particularmente, no hace falta 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 paciencia 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 como se
comporta. Este 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.
Vamos a ver que automáticamente el tamaño del texto va a 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. Es muy útil este sitio web para simular el
aspecto de los textos de nuestros sitios webs.
1. Abrimos una pestaña nueva en nuestro
navegador e ingreamos 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í estamos indicando que 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 le damos click a la opción “Copiar”.
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar
espacios.
index.html 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).


Podemos hacerlo con click derecho y pegar también.
espacios.
index.html 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.

</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 su
</html>
apertura (sí, son del grupo de las rebeldes estas también pero porque ellas no se van a
usar nunca para contener a otros elementos.)
<!DOCTYPE
index.html html>
<html lang=“es”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>

<body>

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>

<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
Por último, aquí añadimos a nuestro código un comentario interno. Como verán, es algo distinto en como se
</p>
escribre utilizando <!-- como apertura y --> como cierre. Los comentario se utilizan de modo interno para
<hr>
hacer anotaciones para la gente que trabaja con el código. No salen nunca impresos en pantalla al cargar el
sitio web. En<h2>Mi
códigossegundo
muy largos sonpero
título útiles para
algo másentender mejor el código HTML.
pequeño</h2>
<p>
Ctrl+S para guardar

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
sitio web.
Álbum de etiquetas desbloqueadas

Raíz Texto Secciones Extras

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

<hr> <header> <!--Comentario-->

Metadatos <p> <nav>

<head> </br> <aside>

<meta> <a> <main>

<title> <section>

<style> Imágenes <article>

<link> <img> <footer>


Conocer más etiquetas en
<div>
w3school o Mozilla.
¿Cómo aprendí
todo esto?
CSS

Es un lenguaje de hojas de estilo


que permite modificar la apariencia
de los sitios webs. Es
complementario a HTML y se apoya
sobre este para añadirle mejoras
visuales.
4to paso
4to paso

Comenzamos a dar estilo


con CSS en línea
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe ir escribiendo todo directamente en el Visual Studio Code porque
algunos caracteres como las comillas dobles y simples fallan.
<!DOCTYPE html>
<html lang=“es”>
index.html

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>

<body style="background-color:powderblue;">

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>

<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
</p>
El atributo “style=” nos permite cambiar la apariencia de los elementos. En este caso estamos cambiando el
<hr>
color de fondo de la etiqueta <body>. Para hacer eso dentro de “style=” debemos cargar la propiedad de
<h2>Mi segundo
“background-color: título pero algo más pequeño</h2>
powderblue”
<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar
<title>Completar con Nombre y Apellido</title>
</head>
index.html

<body style="background-color:powderblue;">

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<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;">
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar 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 mucho texto y nos va a permitir rellenar
espacios. Este sitio web es
<a href="https://es.lipsum.com/">
Aquí, nuevamente Loremcargar
utilizando el atributo “style” podemos Ipsum</a>.
la propiedad de “text-aling: center” para
</p>
que nuestros textos tengan alineación central y no izquierda que es la que se activa por default en los
textos. <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut
<title>Completar con Nombre y Apellido</title>
index.html
</head>

<body style="background-color:powderblue;">

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<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; color:red">


Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar 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 mucho texto y nos va a permitir rellenar
espacios. Este sitio web es
El atributo “style=“ soporta cargar infinitas propiedades. Para ello es necesario separar cada una de ella con
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
un “;” (punto y coma). En este caso estamos alineado al centro un párrafo y poniéndole color rojo con
“color: red”. Prestar mucho atención al copiar comillas, dos puntos, punto y coma, etc.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut
Ctrl+S para guardar

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
sitio web.
5to paso
5to paso

Vamos a dar estilo con


CSS de forma interna
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe ir escribiendo todo directamente en el Visual Studio Code porque
algunos caracteres como las comillas dobles y simples fallan.
<head>
index.html <meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>

<body style="background-color:powderblue;">

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<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; color:red">


Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
</p>

<hr>

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


Ahora vamos a aprender una mejor forma de ingresar
<p>
Vamos a utilizar un sitio web que nos
estasvapropiedades
a generar mucho texto
CSS para y nos
que va a código
nuestro permitirsea
rellenar
más
espacios. Este sitio web es
fácil de leer y menos extenso.
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
<head>
index.html <meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>

<body>

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>

<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
</p>

<hr>

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


Volvemos un paso atrás y borramos todos los atributos “style=“ que agregamos
<p>
Vamos a utilizarEsto
anteriormente. un sitio web que
no quiere nos
decir vaestá
que a generar
mal, simucho
no quetexto y nos
existe va a otra
también permitir rellenar
forma que
espacios. Este sitio web es
puede ser útil y queda en cada uno decidir con criterio cuál usar.
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
index.html

<!DOCTYPE html>
<html lang=“es”>

<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>

<!-- Aquí vamos a escribir nuestro código CSS -->


<style>

</style>

</head>

<body>
Nos ubicamos dentro del <head>. Luego aquí abrimos y cerramos la etiqueta
<!-- Esto es un comentario interno. No se muestra en pantalla -->
<h1>Mi primer<style>. Dentro de ella podremos ahora escribir las propiedades CSS y
título</h1>
<p>Mi primer asignárselas
párrafo con información</p>
desde aquí a las etiquetas que gustemos.
<p>
<head>
index.html
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>

<!-- Aquí vamos a escribir nuestro código CSS -->


<style>

body {
background-color:powderblue;
}

</style>

</head>

<body>
Comenzamos a escribir nuestro código CSS. Primero escribimos la eiqueta “body” (en CSS no se usan las
<!-- Esto es un comentario interno. No se muestra en pantalla -->
“boquitas”<h1>Mi
< > para referirse
primer a etiquetas). Luego abrirmos una “{“ (llave). En el renglón de abajo añadimos
título</h1>
<p>Mi primer párrafo con información</p>
la propiedad “background-color:powderblue” y ponemos el ”;” (punto y coma) al final de la propiedad. Por
último, en<p>
el renglón de abajo cerramos “}” (llave). Mucha atención al copiar esto.
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
index.html <!--
Aquí vamos a escribir nuestro código CSS -->
<style>

body {
background-color:powderblue;
}

.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 una
forma de reutilizar
<!-- Estoyes
reducir código a la
un comentario hora de
interno. Noescribir. Las ”clases”
se muestra en CSS
en pantalla --> se indican con un “.” (punto)
<h1>Mi primer título</h1>
al principio y luego se les añade un nombre a criterio personal.
<p>Mi primer párrafo con información</p>
background-color:powderblue;
index.html }

.textoCentrado {
text-align:center ;
}
.textoRojo { Para usar la clase vamos a una etiqueta dentro del <body> y
color:red;
añadimos el atributo “class=“ más el nombre de la clase que
}
elegimos. Presentar atención que en HTML la clase no se escribe
</style>
con un punto al principio como en CSS.
</head>

<body>

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<h1 class=”textoCentrado">Mi primer título</h1>
<p class=”textoCentrado">Mi primer párrafo con información</p>

<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
</p>
index.html .textoCentrado {
text-align:center ;
}
.textoRojo { A una misma etiqueta se le puede asignar infinitas clases. Para
color:red;
hacerlo hay que simplemente separarlas con un “ “ (espacio) entre
}
cada clase. Aquí estamos sumando la clase de “textoRojo”. Es
</style>
importante respetar minúsculas y mayúsculas, debe ser idéntico a
</head> como está escrita la clase en CSS para que HTML pueda encontrarla y
cargar las propiedades.
<body>

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<h1 class=”textoCentrado">Mi primer título</h1>
<p class=”textoCentrado">Mi primer párrafo con información</p>

<p class=”textoCentrado textoRojo">


Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitar el sitio web de Microsoft.
</p>

<hr>
Ctrl+S para guardar

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
sitio web.
Deberíamos seguir viendo el sitio igual que antes solo que
hay una diferencia a nivel código...
- Momento de aprender un truco -

Inspeccionando 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í podemos ver nuestro código y poder entender mejor como el
navegador lo está interpretando, a su vez podremos hacer cambios
en tiempo real.
Por ejemplo, acá vemos 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”. Si gustamos, vamos a poder desde aquí modificar los valores o añadir nuevas
propiedades para ver como quedan.
6to paso
6to paso

Vamos a dar estilo con


CSS de forma externa
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe ir escribiendo todo directamente en el Visual Studio Code porque
algunos caracteres como las comillas dobles y simples fallan.
index.html
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>

<!-- Aquí vamos a escribir nuestro código CSS -->


<style>

body {
background-color:powderblue;
}

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

<body>
index.html
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>

<!-- Aquí vamos a LLAMAR nuestro código CSS de fomra externa -->
<link rel="stylesheet" href="assets/css/style.css">

</head>

<body>

<!-- Esto es un comentario interno. No se muestra en pantalla -->


<h1 class=”textoCentrado">Mi primer título</h1>
<p class=”textoCentrado">Mi primer párrafo con información</p>

<p class=”textoCentrado textoRojo">


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

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


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. Creada la carpeta ahora le vamos a dar click
sobre ella para ubicarnos en su directorio.
4. Volvemos a tocar en el ícono para crear una
nueva carpeta.
5. La nombramos como “css” y le damos ENTER
para crearla.
6. Ya creada, le damos click a la carpeta “css” para
ubicarnos dentro de ella.
7. Hacemos click en el ícono de crear un archivo
nuevo.
8. Nombramos al archivo como “style.css” y damos
ENTER para crearlo.
9. Si hicimos todo bien, nos tiene que aparecer el
archivo creado dentro de las carpeta “css” y se nos
tiene que abrir automaticamente.
10. Acá 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 “.css” ;)
Ctrl+S para guardar

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
sitio web.
12. En la carpeta donde creamos la web
deberíamos ver algo parecido a esto.

Ruta: “assets/css/style.css”
13. Tu sitio debe seguir viéndose igual solo que ahora el estilo
está siendo cargado desde el archivo “style.css”... Podés usar el
“Inspector” para examinarlo mejor ;)
Álbum de etiquetas desbloqueadas

Raíz Texto Secciones Extras

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

<hr> <header> <!--Comentario-->

Metadatos <p> <nav>

<head> </br> <aside>

<meta> <a> <main>

<title> <section>

<style> Imágenes <article>

<link> <img> <footer>


Conocer más etiquetas en
<div>
w3school o Mozilla.
¡Muy bien! Ya tenemos una muy buena base de un sitio web.

¡Felicitaciones!
Ahora vamos a continuar añadiendo una imagen
7mo paso
7mo paso

Insertando una imagen


con HTML
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe ir escribiendo todo directamente en el Visual Studio Code porque
algunos caracteres como las comillas dobles y simples fallan.
Ingresamos al sitio
“www.unsplash.com” para descargar una imagen
que tenga buena calidad.
Buscamos paisajes escribiendo en ingles
“landscape” en el buscador. (pueden buscar
la imagen que más les guste a ustedes)
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 la imagen que nos
descargamos dentro de ella. Por último le cambiamos el
nombre a la imagen para que sea “paisaje.jpg”. Esto es
muy importante, será el nombre que usaremos en HTML
para leer la imagen. Recordar que las minúsculas y
mayúsculas importan.

Ruta: assets/images/paisaje.jpg
index.html <p class=”textoCentrado textoRojo">
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitor el sitio web de Microsoft.
</p>

<hr>

<img src="assets/images/paisaje.jpg" />

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


<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar
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
Arriba deeros bibendum
nuestra eu.<h2>
etiqueta Aenean posuere
vamos aliquam
a insertar unanulla at pretium.
imagen Cras
utilizando erat mauris,
la etiqueta accumsan
<img>. Esta vel
laoreet sit amet, scelerisque in ipsum. Vivamus sed nulla id erat sollicitudin tincidunt sit amet eu massa.
etiqueta tieneleo
Proin ultrices un nec
atributo
erat que es “src=“
interdum para indicar la ruta a donde el archivo HTML debe ir a buscar la
rhoncus.
imagen para leerla.
</br>

Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex
index.html <p class=”textoCentrado textoRojo">
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a>
para visitor el sitio web de Microsoft.
</p>

<hr>

<img src="assets/images/paisaje.jpg" alt="Paisaje de colinas con árboles y pastos" />

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


<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar
espacios. Este sitio web es
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</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 que
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut
lea lo queeros
molestie hayamos escrito
bibendum eu.en el atributo
Aenean “alt=“
posuere y así saber,
aliquam nulla atenpretium.
este ejemplo, quemauris,
Cras erat hay una imagen sobre
accumsan vel
laoreet sit amet,
un paisaje scelerisque
de colinas in ipsum.
con árboles Vivamus
y pastos. Estosed
quenulla id erat en
escribimos sollicitudin tincidunt
“alt=“ también sit amet escrito
aparecerá eu massa.
en
Proin ultrices leo nec erat interdum rhoncus.
caso de que la lectura de la imagen falle por algún motivo.
</br>
Ctrl+S para guardar

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
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 ese estilo ;)
index.html style.css

/* Etiquetas */
body {
background-color:powderblue;
}

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

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
sitio web.
Ahora vemos la imagen completa y no “cortada” o
“sobresalida” de la pantalla como antes. Esto es porque se
ajustó al 100% del <body>, o sea del cuerpo.
Álbum de etiquetas desbloqueadas

Raiz Texto Secciones Extras

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

<hr> <header> <!--Comentario-->

Metadatos <p> <nav>

<head> </br> <aside>


Para terminar de
<meta> <a> <main>
desbloquear todas las
<title> <section>
etiquetas te invitamos a
<style> Imágenes <article> sigas investigando en los
<link> <img> <footer> siguientes sitios w3school o
Mozilla.
<div>
8vo paso

Ajustando márgenes y
bordes del <body>
¡Importante! No copiar y pegar el código desde este PowerPoint.
Se debe ir escribiendo todo directamente en el Visual Studio Code porque
algunos caracteres como las comillas dobles y simples fallan.
index.html style.css

/* Etiquetas */
body {
margin: 50px;
padding: 50px 100px;
background-color:powderblue;
}

img {
width:100%;
}

/* Clases */
Por último, vamos a modificar el “body”. Utilizaremos la
.textoCentrado {
text-align:center ; propiedad “margin” con valor “50px” (cincuenta píxeles)
}
.textoRojo { para añadir margenes externos. A su vez, la propiedad
color:red; “padding” con valor “50px 100px” para asignar márgenes
}
internos.
index.html style.css

Cuando usamos margin o padding Podemos


/* Etiquetas */
body { asignar un valor distinto para cada borde.
margin: 50px;
padding: 50px 100px;
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 mientras que los márgenes
/* Clases */
laterals de 25px)
.textoCentrado {
text-align:center ;
} 3. margin: 20px 25px 40px 10px; (un valor para
.textoRojo {
color:red; cada margen. El orden sería superior, derecho,
} inferior e izquierdo)
index.html style.css

/* Etiquetas */
body {
margin: 50px;
padding: 50px 100px;
border: 1px solid black;
background-color:powderblue;
}

img {
width:100%;
}
Finalizamos añadiendo la propiedad “border” que nos
/* Clases */
.textoCentrado { permite añadir estilo al borde de un elemento. El primer
text-align:center ; valor que asignamos es el grosor del borde (1px). El
}
.textoRojo { segundo valor es el tipo de línea (solid o dashed). Por
color:red; último el color del borde (black).
}
Ctrl+S para guardar

Recuerda siempre
guardar los cambios
que hiciste en el
código para que se
vean reflejados en el
sitio web.
¡Lo logramoooooos! Felicitaciones :)
margin:

padding:

Aquí vemos como 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
el “padding” que 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:
Último paso para entregar la tarea

Subir al OneDrive
nuestro sitio web
Hacemos click aquí para ir a la carpeta a donde hay que subirlo
https://1drv.ms/u/s!AkeBCVDANTctgSL9Rjd8QsWvvDfT?e=onFFmI
1. Creamos una carpeta con nuestro “Nombre y
Apellido”
1. Creamos una carpeta con nuestro “Nombre y
Apellido”
2. Abrimos la carpeta que creamos.
3. Vamos a cargar ahora 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 :)
Momento de que todos y todas

Descargamos el PPT que


vamos a usar para
hacer la tarea
https://rebrand.ly/descargarEjercicioWeb
Álbum de <etiquetas> principales

Raiz Texto Secciones Extras

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

<hr> <header> <!--Comentario-->

Metadatos <p> <nav>

<head> </br> <aside>


Para terminar de
<meta> <a> <main>
desbloquear todas las
<title> <section>
etiquetas te invitamos a
<style> Imágenes <article> sigas investigando en los
<link> <img> <footer> siguientes sitios w3school o
Mozilla.
<div>
¿Queres seguir aprendiendo?

Completá este
formulario
Hacemos click aquí para ir al formulario.
Al completarlo, no importa si bien o mal, te
aparecerán links a cursos para seguir aprendiendo.
https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAMAAC42LX5UQUNUMU
M3UTA0VEozUFBCTVNYOUNBOVNQUC4u
Hoy en día conocer los lenguajes HTML, CSS y
JavaScript permiten:

Front-end - Trabajar de forma independiente (freelancer)


- Emprender un propio proyecto web.
- Trabajar para una empresa local o extranjera de

en los forma remota.

Además, la rama de Front-End está totalmente

trabajos
articulada con la experiencia de usuario (UX),
aspecto más psicológico y también relacionado
con el diseño de interfaces gráficas (UI).

Paso a paso para convertirte en todo un Front-


End: https://roadmap.sh/frontend
Agenda
Clase 1 Programación - 01/06
Clase 2 Programación – 03/06
El día viernes 04/05 de debe hacer el examen en la
plataforma.
Tiempo de
pasillo
Clase 2 Programación
Fase sincrónica
“..…procesos de pensamiento
involucrados en formular
problemas y encontrar sus
soluciones de manera que las
Pensamiento soluciones estén representadas
de forma tal, que puedan ser
computacional llevadas a cabo efectivamente
por un agente que procesa
información”
Jeannete Wing, 2011 (vicepresidenta del
departamente 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
computacional medio distinto de analizar y
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,
en subproblemas desarrollarse y evaluarse por
separado. Esto hace 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, otro recto y una
inclinado a 45°)
Los patrones son regularidades,
elementos constantes dentro de
2. un conjunto de datos que son
Reconocimiento variables. Su reconocimiento
de patrones permite encontrar elementos
comunes con problemas que ya
fueron resueltos con anterioridad.
Las abstracciones son
generalizaciones o síntesis que
realizamos en las que
identificamos los aspectos
3. centrales de un conjunto y
Construcción de descartamos los factores que son
abstracciones irrelevantes. Es al mismo tiempo
un proceso y un producto. Por
ejemplo, un patrón es un
producto del proceso de hacer
una abstracción.
Un algoritmo es un conjunto ordenado
de operaciones, un paso a paso
taxativo que indica cómo resolver un
problema. Cuando pensamos el diseño
4. del algoritmo partimos de un estado
inicial y necesitamos llegar a un estado
Creación de final.

algoritmos En un algoritmo encontramos patrones


cuando "repetimos" acciones. A su vez,
el algoritmo también es una
abstracción subjetiva de los paso a
paso necesarios.
Una herramienta visual para
mejorar nuestro aprendizaje
Diagrama de
flujos y aprender a
aprender
Sintetizar la información en
diagrama visuales nos permite
afianzar y relacionar mejor
nuestros aprendizajes.
Pasamos lista

Escribí tu
nombre y apellido
en el “chat”
70% de asistencia necesaria
Hasta 3 (tres) inasistencias
¿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. A su
vez permite también 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 A modo pedagógico podemos
operación imaginar que HTML es el lenguaje
lógica base sobre la cual van a operar los
Capa de lenguajes CSS y JavaScript.
estilo
CSS va a operar introduciendo
cambios de estilo directos, o sea solo
visuales, como 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
base este. JavaScript es muy poderoso,
puede modificar TODO lo que vemos
en el sitio como 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.
A su vez, las variables tienen siempre un
nombre único por el cuál se podrán llamar e
identificar.

“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 más ejemplos.
Antes de ver como se escribe una variable queremos indicar que en este ejemplo la
primer línea de código es un comentario interno de JavaScript, o sea no tiene efecto
sobre el código es solo para poder hacer anotaciones propias en el código.

Los comentarios que ocupan más de una línea en JavaScript se escriben entre
/* Comentario */. Los comentarios que solo ocupan una línea se les coloca al principio
// (doble barra) y conveirte automáticamente a esa línea en comentario.
Bien empecemos… Aquí “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 que es lo que queremos hacer.
Luego de escribir “var” presionamos la “Barra espaciadora” y lo que JavaScript
nos va a pedir ahora es que a nuestra variable le pongamos un nombre único
por el cuál la podremos llamar e identificar.

Es importante saber que hay ciertas restricciones a la hora de elegir nombres


para nuestras variables, en la siguiente diapositiva te contamos.
Los nombres de las variables pueden ser de un solo carácter o de muchos más. Lo importante a
saber es que el primer carácter debe ser siempre una letra mayúscula, minúscula (A, z), un
guion bajo “_” o un símbolo de dinero “$”. Los caracteres restante ya pueden incluir
caracteres numéricos y combinarse con los mencionados anteriormente (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 correctos los siguientes nombres? -

Revisando nombres
de variables
¿Este nombre de variable es válido?
variables.js

var $color_principal1
¿Este nombre de variable es válido?
variables.js

var $color_principal1
OK
Perfecto, porque los nombres de las variables sí pueden
comenzar con el símbolo $ (dolar)
¿Este nombre de variable es válido?
variables.js

var _UsuarioNombre

Perfecto, porque los nombres de las variables sí pueden


comenzar con el símbolo $ (dolar)
¿Este nombre de variable es válido?
variables.js

var _UsuarioNombre
OK
Perfecto, porque los nombres de las variables sí pueden
comenzar con el símbolo _ (guion bajo)
¿Este nombre de variable es válido?
variables.js

var 5toValor
¿Este nombre de variable es válido?
variables.js

Error! var 5toValor

¡Auch, no! Los nombres de las variables no pueden


comenzar con un número.
¿Este nombre de variable es válido?
variables.js

var sumaFinal
¿Este nombre de variable es válido?
variables.js

var sumaFinal
OK
Perfecto, porque los nombres de las variables sí pueden
comenzar con una letra minúscula.
¿Este nombre de variable es válido?
variables.js

var /estatura_usuario

¡Auch, no! Los nombres de las variables no pueden


comenzar con una barra inclinada derecha porque este se
utiliza como un operador para hacer divisiones
matemáticas…
¿Este nombre de variable es válido?
variables.js

Error! var /estatura_usuario

¡Auch, no! Los nombres de las variables no pueden


comenzar con una barra inclinada derecha porque este se
utiliza como un operador para hacer divisiones
matemáticas…
¿Este nombre de variable es válido?
variables.js

var color-1
¿Este nombre de variable es válido?
variables.js

Error! var color-1

¡Auch, no! Los nombres de las variables no pueden


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 el nombre correctamente a la variable debemos
presionar la “Barra espaciadora” y luego 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. 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 (=) vamos a colocar 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 (;). Esto funciona igual que un punto “.” cuando terminamos de
escribir una oración en español. El punto indica el final de la oración al igual que el
“;” indica en JavaScript el final de una declaración.
- Conceptos básicos para programar -

2 tipos de datos
principales
numérico
Tipos de datos

Un valor es un dato y este


puede ser numérico o
alfanumérico.
"alfanumérico" o
"cadena de Dependiendo el tipo de dato
caracteres" que queremos almacenar
vamos a tener que escribirlo
entre “comillas” o no.
variables.js

var natural = 3;
numérico var entero = -7;
var racional = 3.14;

Aquí estamos almacenando en cada una de las variables


valores solamente numéricos. Estos valores serán
interpretado 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. Observar como ellos 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 va a operar distinto ya que son textos.
Si te gustaría hacer algunas pruebas
modificando los valores que se
guardan en las variables puedes
jugar en este siguiente link.

https://codepen.io/docentehde/pen/Z
EQvPNm
- 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 que 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
(/) o multipliación (*), entre otras tantas operaciones.
?
var num1 = 7;
var total = num1 * 2;
var num1 = 7;
var total = num1 * 2;
Una vez que creamos una variable, ella va a representar
el valor que almacena. De esta forma podemos utilizar a
14
la variable a su valor simplemente luego 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 de esto 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í, particularmente JavaScript cuando le
pedimos 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… esto 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;
Atención, aquí se están almacenando los números como “textos”
porque están entre comillas. JavaScript, cuando intenta SUMAR
textos lo que hace es concatenarlos/unirlos, por eso el valor es “4070”
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 que pasó aquí. Es importante saber que las
variables pueden guardar solo un valor y que este se
puede ir sobrescribiendo a medida que lo necesitemos.
6
En este caso la variable “a” la creamos y le guardamos el
valor “holaaaaa”. En un segundo paso, a esa misma
variable la sobrescribimos y le asignamos el valor 4, ya
“holaaaaa” no existe más dentro de ella. Por eso en el
paso siguiente, cuando volvemos a definir “a”, el resultado
va a ser 4 + 2. Por último le decimos a total que almacene
el mismo valor que hay en “a”, y este es 6.
- Conceptos básicos para programar -

Creando 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 vez sola y
reutilizar las mismas líneas de código
para resolver un problema recurrente.
“Podemos entender a la función como una herramienta que
cada vez que tenemos que solucionar un mismo problema
vamos a buscar la misma herramienta con la cuál hemos
tenido éxito.”
Función

Una función, al igual que una variable,


function tiene una palabra reservada para
indicar su creación, esta es function.
A su vez 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


function de dos cosas más para ser
creadas. Por un lado un espacio
para indicar parámetros propios
de la función y por otro, el uso de
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. Esto es similar a cuando
poníamos nombre a nuestras variables ya que 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 van a permitir 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 sin son más de uno se separan con una coma.

Paciencia, este concepto de parámetro lo vas a ir entendiendo a medida que avancemos y


practicamos.
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 es 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 retorna un valor. En este caso la función
está devolviendo el valor almacenado en la variable "total”… por ejemplo, si está 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 vas a poder 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 creando 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.
Observar, 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 sean más fáciles de
modificar y comprender.

https://codepen.io/docentehde/p
en/pogpYaa
Desafío JavaScript

Operando 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 haciendo es cargando los parámetros con esos dos
9
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;
Al llamar a la función retornarNum(); vemos que esta función no
tiene espacios para admitir parámetros por ende se la llama y no se le
carga nada entre los paréntesis. Esta función lo que va a hacer
4
SIEMPRE que la llamemos va a ser retornar el valor de 3 numérico,
es por esto que 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 multiplicar al número por mismo. Cómo vemos, la función solo
25
admite un parámetro y lo que hace es multiplicarlo por sí mismo.

Importante, sl 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”);
La función añadir(); lo que hace es recibir un valor y hace mismo
mundo!
añadirle al final un signo de exclamación. Es por esto que 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, como notarás la instrucción está en dos renglones escrita.
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) { La función
return a - 1; restaruno() no
} existe... hay que
respetar
var total = restaruno(4); minúsculas y
mayus.
- Usando JavaScript en mi HTML -

¿Cómo utilizar JavaScript


en mi HTML?
Usando 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 <body>, o sea
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 indicarle la ruta a donde debe ir a
buscar nuestro HTML el archivo "app.js" para cargarlo efectivamente.
- Mostrando 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, solo que la única diferencia es
que nosotros no lo creamos sino que
ya viene establecida en el propio
JavaScript.
Hay problemas muy recurrentes y básicos como imprimir
valores en pantalla o en consola que el propio lenguaje ya
cuenta con sus propias “funciones” para resolverlos…
podemos entender a 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. Este método
se suele usar en etapas de pruebas donde queremos
conocer algunos valores que tiene nuestro sitio al cargarse.

Particularmente, si este método se ejecuta después de que


todo el sitio web fue 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 una información importante.

También, a veces cuando estamos programando y


probando nuestro código, nos puede resultar útil para
imprimir ciertos valores de variables rápidamente y
corroborar que todo esté funcionando como lo esperamos.
Vamos a ver un ejemplo en la
plataforma CodePen para que
sea más fácil.

https://codepen.io/arielpont/pen/
GRqZPyM
Métodos

console.log();
Este método de JavaScript permite mostrar por la consola
del navegador valores. Este método nos puede ser muy útil
para cuando hacemos pruebas ir imprimiendo en pantalla
valores o mensajes que nos son útiles para asegurarnos
que nuestro código está haciendo lo esperado.
Vamos a ver un ejemplo en la
plataforma CodePen para que
sea más fácil.

https://codepen.io/arielpont/pen/
WNxwLgY
Métodos

Bien, ahora vamos a ver como insertar código HTML sin


tener que eliminar TODO el contenido de nuestro sitio web
como nos pasaba con document.write();
Para eso, deberemos antes comprender algunas cosas
nuevas de como 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 nos van a permitir hacer
varias cosas como modificar el contenido que hay dentro
de una etiqueta o hasta las propiedades CSS de la misma.
Métodos

Cuando en JavaScript escribimos “document” o “window” lo


que estamos haciendo es referencia al elemento raíz
<html> de nuestro sitio web. Este elemento raíz JavaScript
le ofrecerá varios métodos que nos van a facilitar resolver
varios problemas.

Para comprender mejor esto del “document” es importante


entender la lógica con la cual se organiza JavaScript. A
continuación te dejamos un lugar para comprender esto
que tiene el nombre de DOM y significa en ingles
Document Object Model.

También podría gustarte