Scribd
Cargar
3 vistas62 páginas

Comandos Básicos de Terminal y Git

El documento proporciona una guía sobre comandos básicos de terminal, extensiones de archivos, etiquetas HTML, propiedades CSS y el uso de Git y GitHub para la gestión de repositorios. Incluye instrucciones detalladas para crear y gestionar repositorios locales y en GitHub, así como la estructura y uso de etiquetas HTML para el desarrollo web. Además, se explican las etiquetas de formato y bloque, junto con ejemplos de su aplicación en la creación de contenido web.

Cargado por

mvicente
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 DOCX, PDF, TXT o lee en línea desde Scribd
3 vistas62 páginas

Comandos Básicos de Terminal y Git

El documento proporciona una guía sobre comandos básicos de terminal, extensiones de archivos, etiquetas HTML, propiedades CSS y el uso de Git y GitHub para la gestión de repositorios. Incluye instrucciones detalladas para crear y gestionar repositorios locales y en GitHub, así como la estructura y uso de etiquetas HTML para el desarrollo web. Además, se explican las etiquetas de formato y bloque, junto con ejemplos de su aplicación en la creación de contenido web.

Cargado por

mvicente
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 DOCX, PDF, TXT o lee en línea desde Scribd

COMANDOS:

pwd Print working directory / imprimir el directorio


ls List / listar
mkdir Make directory / crear carpeta
touch Crear archivo vacio
rm Remove / elimina el archivo seleccionado
rm -r Elimina una carpeta
help Lista de comandos básicos
[comando] --help Opciones / argumentos del comando
cd .. Para volver al directorio anterior

EXTENSIONES DE ARCHIVOS MAS CONOCIDOS

Texto .txt, .docx, .odt


Imagen .jpg, .png, .gif, .svg, .eps
Audio .mp3, .wav, .flac, .aac, .ogg, .wma
Video .mp4, .avi, .mkv, .flv, .mpg
Ejecutable .exe, .dll, .com
Comprimidos .zip, .rar, .7z
Archivos web .html, .css, .js, .php
Hojas de calculo .xls, .xlsx
Presentación .pps, .ppt, .gslide
Archivos de datos .csv, .ppt, .pdf
Imagen de disco ISO-9660 .iso
Archivo de arquitectura de java .jar
Archivo de audio MPEG-4 .m4a
Imagen .bmp, .tif
Edición de imagen .ai, .psd, .eps
Formulario .gform
Ejecución o del sistema .bat

ETIQUETAS DE ENCABEZADO

<h1> LA ETIQUETA DE ENCABEZADO PRINCIPAL DE UNA PAGINA


<h2>, <h3>, LAS ETIQUETAS DE SUBENCABEZADO DE LAS SECCIONES DEL
<h4>, <h5>, CONTENIDO DE UNA PAGINA
<h6>

ETIQUETAS DE TEXTO

<code> VISUALIZA UNA PARTE DEL CÓDIGO DE PROGRAMACIÓN


<ins> TEXTO INSERTADO
<del> TEXTO BORRADO DEL DOCUMENTO
<dfn> TÉRMINO DEFINIDO DENTRO DE UNA FRASE
<strong> o PONE EL TEXTO EN NEGRITA
<b>
<em> o <i> PONE EL TEXTO EN CURSIVA

ETIQUETAS PARA LA ESTRUCTURA BÁSICA DE UN DOCUMENTO

<head> ALMACENA LOS METADATOS DEL DOCUMENTO


<title> CONTIENE EL TÍTULO DEL DOCUMENTO
<body> ENGLOBA TODO EL CONTENIDO QUE VERÁS EN EL NAVEGADOR
<nav> LA SECCIÓN DE NAVEGACIÓN DE UNA WEB

PROPIEDADES PARA CSS

font-family DEFINE LA FAMILIA TIPOGRAFICA


font-size DEFINE EL TAMAÑO DE LA FUENTE
font-style ESTILO DE LA FUENTE
color DEFINE EL COLOR DE LA TIPOGRAFIA
width DEFINE EL ANCHO DE UN ELEMENTO
max-width DEFINE EL ANCHO MAXIMO DE UN ELEMENTO
min-width DEFINE EL ANCHO MINIMO DE UN ELEMENTO
height DEFINE EL ALTO DE UN ELEMENTO
max-height DEFINE EL ALTO MAXIMO DE UN ELEMENTO
min-height DEFINE EL ALTO MINIMO DE UN ELEMENTO
padding ES LA DISTANCIA DESDE EL BORDE DE UN ELEMENTO HASTA SU
CONTENIDO
padding top ARRIBA
padding right DERECHA
padding bottom ABAJO
padding left IZQUIERDA
margin ES LA DISTANCIA ENTRE UN ELEMENTO Y OTRO (DESDE EL
BORDE DE UN ELEMENTO HACIA AFUERA)
border DEFINE EL BORDE DE UN ELEMENTO, COLOR, ESTILO Y GROSOR
background DEFINE LOS FONDOS DE UN OBJETO
border-width GROSOR DE LA LINEA
border-style ESTILO DE LA LINEA
border-color COLOR DE LA LINEA
background- IMAGEN DE FONDO
image
background- REPETICION DE LA IMAGEN DE FONDO
repeat
background- DESPLAZAMIENTO DE LA IMAGEN DE FONDO
attachment
background- POSICION DE LA IMAGEN DE FONDO
position
background-size TAMAÑO DE LA IMAGEN DE FONDO
opacity TRANSPARENCIA DE UN ELEMENTO
text-decoration EFECTOS DE SUBRAYADO Y TACHADO
letter-spacing ESPACIO ENTRE CARACTERES
word-spacing ESPACIO ENTRE PALABRAS
text-align ALINEAMIENTO DEL TEXTO
line-height TAMAÑO DEL ESPACIO ENTRE LINEAS
vertical-align ALINEACION VERTICAL

LECCION 5

CREACION DE REPOSITORIO Y PRIMER COMMIT

Un commit no es más que una captura instantánea de los cambios preparados en ese
momento del proyecto. Las instantáneas confirmadas pueden considerarse como
versiones "seguras" de un proyecto.

PASOS PARA GUARDAR UN REPOSITORIO DE MANERA LOCAL

1. Abrir git bash en el escritorio


2. Crear una carpeta en el escritorio con el nombre del repositorio con el
comando mkdir “nombre del repositorio”
3. Abrir la carpeta creada con el comando cd “nombre del repositorio”
4. Crear en ella un archivo de texto con el nombre del repositorio con el siguiente
comando touch “nombre del [Link]”
5. Abrir el documento de txto y agregar texto en el y guardar
6. Abrir la carpeta con visual code studio
7. Abrir un nuevo terminal e ingresar el siguiente comando git status
8. Luego usar el siguiente comando para agregar el repositorio git add “nombre
del [Link]”
9. Luego agregamos el commit con el siguiente comando git commit -m “mensaje
para el repositorio”
10. A continuación, verificamos cuantos commits tenemos en el repositorio con el
comando git log

A continuación de compartimos los comandos más usados con git:

1. git init: comando para inicializar un repositorio local.


2. git add: comando para que nuestro repositorio sepa de la existencia de un
archivo o de sus últimos cambios, no almacena las actualizaciones de forma
definitiva, únicamente las guarda en algo que conocemos como “Staging Area”
(área de montaje o ensayo). Se puede armar como git add [Link]
(solo agrega ese archivo) o git add (agrega todos los archivos modificados de la
carpeta donde estas con el punto.
3. git commit -m "mensaje": comando para almacenar definitivamente todos los
cambios que por ahora viven en el staging área. En el mensaje ponemos el
mensaje que explica los cambios commiteados.
4. git push: comando para mandar nuestros commits a un servidor remoto.
5. git status: ofrece una descripción del estado de los archivos.
6. git pull: sirve para recibir cambios de repositorio remoto a local.

Recuerda que Git nunca cambiará las versiones seguras de tu proyecto, a no ser que se
lo pidas expresamente. De esta forma, estamos guardando el estado actual de nuestro
proyecto, para volver a visitarlo de ser necesario y por supuesto para mantenerlo a lo
largo del tiempo.
LECCION 6
CREANDO REPOSITORIO CON GITHUB

PASOS PARA GUARDAR UN REPOSITORIO EN GITHUB

CREANDO REPOSITORIO DESDE CERO

1. Ingresar a github e ir a your repositories


2. Darle click a nuevo y ponerle el nombre a nuevo repositorio y marcar la casilla
de README
3. Luego para poder modificarlo se puede clonar a la computadora haciendo click
en Code y copiando la ruta
4. En el escritorio abrir gitbash y ejecutar el comando de git clone y pegar ahí el
link
5. Automáticamente se creara el repositorio en una carpeta en el escritorio y
seguidamente ejecutamos el comando de cd “nombre de la carpeta” para
ingresar al repositorio
6. A continuación ejecutamos en comando code .
7. Esto abrirá el visual code studio y podremos modificar el repositorio desde allí y
guardamos los cambios
8. Subimos los cambios creando un commit con el comando git commit -m
“mensaje para el nuevo commit”
9. A continuación subimos los cambios con el comando git add “nombre del
repositorio”
10. Y finalmente pusheamos los cambios con el siguiente comando git push origin
main

SUBIENDO REPOSITORIO LOCAL A GITHUB


1. Crear un repositorio nuevo en github sin el archivo README
2. Abrir gitbash en el escritorio e ingresar a la carpeta donde tenemos el
repositorio local
3. Ejecutamos los tres comandos que nos presenta github en la segunda opción
uno por uno
4. Listo después solo Actualizamos la pagina de github y tenemos nuestro
repositorio en la nube de github

LECCION 2: ¿QUE ES HTML?

Definición
HyperText Markup Language (HTML) es un lenguaje de marcado (no de
programación) utilizado para crear páginas web. Este tipo de código te permitirá crear
una página web sencilla.

ESTRUCTURA DE UN ARCHIVO HTML

En la siguiente imagen veremos cómo es la estructura inicial de un archivo HTML.


Estas líneas de código irán creciendo a medida que construyamos nuestra página web.

¿QUE ES UN ELEMENTO?

Todos los archivos HTML están conformados por distintos elementos HTML. Estos
elementos son componentes individuales (conocidos como etiquetas) que nos
permiten darle una estructura al archivo. Por ejemplo...
LECCION 3: BOYLERPLATE HTML

DOCTYPE
Es una declaración que indica al navegador que este documento está escrito en
HTML5.
No es una etiqueta HTML, sino una instrucción para asegurar la compatibilidad y el
correcto renderizado.

<html>
Abre la etiqueta raíz del documento HTML, donde lang="en" especifica el idioma
principal del contenido como inglés.
Esto ayuda a los motores de búsqueda y herramientas de accesibilidad.

<head>
Inicia la sección "head" del documento. Aquí se incluyen metadatos, enlaces a hojas de
estilo externas, scripts y configuraciones del documento.

<meta ...>
Define la configuración de la ventana gráfica (viewport) para dispositivos móviles.
 width=device-width: Ajusta el ancho de la página al ancho de la pantalla del
dispositivo.
 initial-scale=1.0: Establece el nivel inicial de zoom al 100%, es decir, sin ampliar
ni reducir el contenido.

<meta>
Declara que el documento utiliza la codificación de caracteres UTF-8.
Esta codificación permite representar casi todos los caracteres y símbolos del
mundo, asegurando la correcta interpretación de caracteres especiales.

<title>
Define el título de la página web. Este texto aparece en la pestaña del
navegador y es importante para la accesibilidad y el SEO.

<body>
Abre la sección "body" del documento. Todo el contenido visible de la página
se colocará dentro de estas etiquetas.

<P>esto es un texto plano.</P>


todo lo que escribamos dentro de una etiqueta <p> se transformará en texto
plano dentro de nuestra página web.

LECCION 4: ETIQUETAS DE FORMATO

LAS ETIQUETAS

¿Para qué sirven las etiquetas?

Cuando trabajamos con VSC y utilizamos el comando ‘!’, podremos crear un template
de HTML de tipo DOCTYPE con las siguientes etiquetas. Veamos de qué se trata cada
una.
LISTA DE LAS ETIQUETAS MAS USADAS
ESTRUCTURA BASICA
<html> Raíz de un documento HTML, engloba todo el
contenido de la pagina
<head> Contiene metadatos/información para el
documento, como el titulo y enlaces a scripts y
hojas de estilo css.
<title> Define el titulo del documento, que se muestra en
la barra de titulo del navegador o en las pestañas.
<body> Representa el contenido principal de un
documento HTML, visible para el usuario.
ENCABEZADOS Y TEXTO
<h1>, <h2>, <h3>, <h4>, <h5>, Son utilizadas para definir
<h6> encabezados,
siendo <h1> el mas importante y
<h6> el menos.
<p> Párrafo de texto
<br> Inserta un salto de línea simple
<hr> Línea horizontal
<strong> Texto en negrita
<em> Texto en cursiva
<u> Texto subrayado
<mark> Texto resaltado
<small> Texto pequeño
<sub> Texto subíndice (Ejemplo: H₂O)
<sup> Texto superíndice (Ejemplo: X²)
<blockquote> Cita en bloque
LISTAS
<ul> Define una lista desordenada (con viñetas)
<ol> Define una lista ordenada (con numeros)
<li> Define un item de lista que debe estar dentro de
un <ul>, <ol> o <menu>
<dl> Lista de definiciones
<dt> Termino de la definición
<dd> Descripcion del termino
TABLAS
<table> Define una tabla
<tr> Define una fila en una tabla
<td> Define una celda en una tabla
<th> Define una celda de encabezado en una tabla
<thead> Encabezado de la tabla
<tbody> Cuerpo de la tabla
<tfoot> Pie de la tabla
FORMULARIOS Y IMPUTS
<form> Define un formulario HTML para la entrada del
usuario
<input> Define un campo de entrada dentro de un
formulario
<input Campo de texto
type="text">
<input Campo de contraseña
LECCION 5: ETIQUETAS DE BLOQUES

Las etiquetas de bloque son elementos que se utilizan para crear secciones de
contenido en una página web. Estas etiquetas tienen un comportamiento por defecto
que hace que ocupen todo el ancho disponible de su contenedor principal y se colocan
en una línea nueva, lo que crea un efecto de separación vertical en el diseño de la
página.

ETIQUETAS DE BLOQUES MAS USADAS

Estructura y Organización

 <div> → Contenedor genérico para agrupar elementos.


 <section> → Sección de contenido relacionado.
 <article> → Contenido independiente (ejemplo: noticias, blogs).
 <header> → Encabezado de una página o sección.
 <footer> → Pie de página.
 <nav> → Menú de navegación.
 <aside> → Contenido secundario (ejemplo: barras laterales).
 <main> → Contenido principal de la página.

📌 Texto y Encabezados

 <h1> a <h6> → Encabezados de nivel 1 a 6.


 <p> → Párrafo de texto.
 <blockquote> → Cita en bloque.
 <pre> → Texto preformateado (respeta espacios y saltos de línea).

📌 Listas

 <ul> → Lista desordenada.


 <ol> → Lista ordenada.
 <li> → Elemento dentro de <ul> o <ol>.
 <dl> → Lista de definiciones.
 <dt> → Término de la definición.
 <dd> → Descripción del término.
📌 Tablas

 <table> → Tabla de datos.


 <tr> → Fila de una tabla.
 <th> → Celda de encabezado en una tabla.
 <td> → Celda normal en una tabla.
 <thead> → Encabezado de la tabla.
 <tbody> → Cuerpo de la tabla.
 <tfoot> → Pie de tabla.

📌 Formularios e Inputs

 <form> → Contenedor de un formulario.


 <fieldset> → Agrupa campos de un formulario.
 <legend> → Título dentro de <fieldset>.
 <textarea> → Área de texto grande.

📌 Multimedia y Otros

 <figure> → Contenedor para imágenes, gráficos o contenido visual.


 <figcaption> → Pie de imagen dentro de <figure>.
 <hr> → Línea horizontal para separar contenido.

LECCION 5: ETIQUETAS DE CONTENIDO

Las etiquetas de contenido son aquellas que se utilizan para marcar contenido dentro
de un documento HTML. Estas etiquetas permiten definir diferentes tipos de
elementos, como texto, imágenes, enlaces, listas, tablas, párrafos y más, para que el
navegador web pueda interpretar y mostrar el contenido de manera adecuada.

ETIQUETAS DE CONTENIDO MAS USADAS

📌 1. Encabezados y Texto

 <h1> a <h6> → Encabezados de nivel 1 a 6.


 <p> → Párrafo de texto.
 <span> → Contenedor en línea para estilizar texto.
 <strong> → Texto en negrita.
 <em> → Texto en cursiva.
 <u> → Texto subrayado.
 <mark> → Texto resaltado.
 <small> → Texto pequeño.
 <sub> → Texto subíndice (Ejemplo: H₂O).
 <sup> → Texto superíndice (Ejemplo: X²).
 <blockquote> → Cita en bloque.
 <code> → Código fuente en texto plano.
 <pre> → Texto preformateado (respeta espacios y saltos de línea).

📌 2. Listas

 <ul> → Lista desordenada.


 <ol> → Lista ordenada.
 <li> → Elemento de una lista.
 <dl> → Lista de definiciones.
 <dt> → Término de la definición.
 <dd> → Descripción del término.

📌 3. Enlaces e Imágenes

 <a href="URL"> → Enlace a otra página o recurso.


 <img src="[Link]" alt="Descripción"> → Imagen.
 <figure> → Contenedor para imágenes u otros elementos visuales.
 <figcaption> → Pie de imagen dentro de <figure>.

📌 4. Multimedia

 <audio> → Audio.
 <video> → Video.
 <source> → Fuente para <audio> o <video>.
 <iframe> → Incrustar contenido externo (ejemplo: videos de YouTube, mapas).

📌 5. Tablas

 <table> → Tabla de datos.


 <tr> → Fila en una tabla.
 <th> → Celda de encabezado en una tabla.
 <td> → Celda normal en una tabla.
 <thead> → Encabezado de la tabla.
 <tbody> → Cuerpo de la tabla.
 <tfoot> → Pie de la tabla.
📌 6. Formularios e Inputs

 <form> → Contenedor de un formulario.


 <input type="text"> → Campo de texto.
 <input type="password"> → Campo de contraseña.
 <input type="email"> → Campo de correo electrónico.
 <input type="radio"> → Botón de opción única.
 <input type="checkbox"> → Casilla de verificación.
 <textarea> → Área de texto grande.
 <select> → Lista desplegable.
 <option> → Opción dentro de <select>.
 <label> → Etiqueta para un input.
 <button> → Botón de acción.

📌 7. Contenedores y Organización

 <div> → Contenedor genérico de bloque.


 <span> → Contenedor genérico en línea.
 <section> → Sección de contenido.
 <article> → Contenido independiente (ejemplo: post de blog).
 <header> → Encabezado de una página o sección.
 <footer> → Pie de página.
 <nav> → Menú de navegación.
 <aside> → Contenido secundario (como una barra lateral).
 <main> → Contenido principal de la página.

LECCION 6: ESQUEMA BASICO DEL MAQUETADO

Ahora que ya conoces sobre HTML, es importante hacer hincapié en las buenas
prácticas de maquetación que te permitirán gestionar una estructura adecuada para el
ordenamiento y jerarquización de las etiquetas, respetando de manera correcta la
semántica de HTML.
Continuemos analizando cómo se ve un diseño lógico y funcional en HTML:
Esta estructura brinda a la página distintas potencialidades. Algunas, iremos
descubriéndolas en las próximas clases pero, por el momento, podemos mencionar
tres puntos fundamentales:
 Las etiquetas están ubicadas en un orden jerárquico y esto propicia que cada
una de ellas cumpla un propósito específico.
 A la vez, el el sitio sea legible para los usuarios. Por supuesto, esto impacta
positivamente en la experiencia del usuario.
 Como veremos más adelante, respetar esta estructura permite lograr un sitio
responsivo que se adapte a dispositivos de diferentes tamaños.

***********************************************************************
📌 Proyectos que puedes hacer con Visual Studio Code (VS Code) 🚀
VS Code es un editor muy versátil que te permite trabajar en diferentes
lenguajes y tecnologías. Aquí te dejo una lista de proyectos que puedes
desarrollar según el área de interés:

1️⃣ Desarrollo Web 🌐


✅ Sitios Web Estáticos (HTML, CSS, JavaScript)
✅ Tiendas Virtuales (HTML, CSS, JavaScript + APIs de pago)
✅ Portafolios Personales
✅ Blogs con Markdown o Jekyll
✅ Webs Responsivas con Bootstrap o Tailwind CSS
✅ Aplicaciones Web con React, Vue o Angular
💡 Ejemplo: Crear una tienda en línea con carrito de compras usando JavaScript
y localStorage.

2️⃣ Desarrollo Backend 💻


✅ APIs con [Link] + Express
✅ Autenticación con JWT y [Link]
✅ Servidor con Flask (Python) o Django
✅ Chat en tiempo real con [Link]
✅ CRUD con MongoDB, MySQL o PostgreSQL
💡 Ejemplo: Crear una API RESTful para un sistema de reservas.

3️⃣ Desarrollo de Software de Escritorio


✅ Aplicaciones con Python y Tkinter
✅ Apps con [Link] (HTML + JS para escritorio)
✅ Software con C# y .NET
💡 Ejemplo: Un notas de tareas con [Link].

4️⃣ Desarrollo de Juegos 🎮


✅ Juegos en JavaScript (Canvas, [Link])
✅ Juegos con Python y Pygame
✅ Juegos con Unity (C#) y integración con VS Code
💡 Ejemplo: Un juego de plataformas en [Link].

5️⃣ Automatización y Scripts 🔄


✅ Bots de Telegram con Python o [Link]
✅ Scraping de páginas web con BeautifulSoup o Puppeteer
✅ Automatización con Selenium (Testing de sitios web)
💡 Ejemplo: Un bot que descarga imágenes automáticamente desde una web.

6️⃣ Inteligencia Artificial y Machine Learning 🤖


✅ Redes neuronales con TensorFlow/PyTorch
✅ Procesamiento de lenguaje natural con NLP
✅ Reconocimiento facial con OpenCV
💡 Ejemplo: Un modelo que predice precios de casas basado en datos.

7️⃣ Desarrollo Móvil 📱


✅ Aplicaciones con React Native
✅ Apps con Flutter (Dart)
✅ Apps con Ionic (HTML + JS)
💡 Ejemplo: Una app de notas con React Native sincronizada con Firebase.

***********************************************************************
***********************************************************************

En HTML puro (sin CSS externo o interno), puedes usar el atributo style dentro de las
etiquetas para aplicar estilos en línea. Aquí tienes una lista de opciones que puedes
usar dentro de style en HTML sin necesidad de un archivo CSS separado:

📌 1️⃣ Opciones de Texto 📝


🔹 Color del texto
<p style="color: red;">Texto en rojo</p>

🔹 Tamaño de fuente
<p style="font-size: 20px;">Texto grande</p>

🔹 Alineación del texto (left, center, right)


<p style="text-align: center;">Texto centrado</p>

🔹 Tipo de fuente
<p style="font-family: Arial, sans-serif;">Texto en Arial</p>

🔹 Negrita y cursiva
<p style="font-weight: bold;">Texto en negrita</p>
<p style="font-style: italic;">Texto en cursiva</p>

📌 2️⃣ Opciones de Fondos 🎨

🔹 Color de fondo
<div style="background-color: lightblue;">Fondo azul claro</div>

🔹 Imagen de fondo
<div style="background-image: url('[Link]');">Fondo con imagen</div>

🔹 Transparencia con opacity


<div style="opacity: 0.5;">Texto semitransparente</div>

📌 3️⃣ Opciones de Espaciado 📏

🔹 Margen exterior (margin)


<div style="margin: 20px;">Espacio exterior de 20px</div>

🔹 Espacio interno (padding)


<div style="padding: 10px;">Espacio interno de 10px</div>

🔹 Espaciado entre líneas (line-height)


<p style="line-height: 2;">Texto con más espacio entre líneas</p>
📌 4️⃣ Opciones de Bordes

🔹 Borde sólido
<div style="border: 2px solid black;">Borde negro</div>

🔹 Borde redondeado
<div style="border-radius: 10px;">Borde redondeado</div>

📌 5️⃣ Opciones de Tamaño y Posicionamiento 📌

🔹 Ancho y alto (width, height)


<div style="width: 200px; height: 100px;">Caja de 200x100</div>

🔹 Alineación de un div a la derecha o izquierda (float)


<div style="float: right;">A la derecha</div>
<div style="float: left;">A la izquierda</div>

🔹 Posicionamiento (absolute, relative, fixed)


<div style="position: absolute; top: 50px; left: 20px;">Posición absoluta</div>

🔹 Convertir en bloque (display: block)


<span style="display: block;">Este span se comporta como bloque</span>

***********************************************************************
LECCION 1: FSM0L4 | CSS

Definición
CSS significa Cascading Style Sheets (hojas de estilo en cascada). Este permite a los
desarrolladores web controlar el diseño y la apariencia de sus sitios web separando el
contenido (como el texto y las imágenes) de la presentación (como los colores, las
fuentes y el diseño).

ESTILOS IN-LINE
Todas las etiquetas de HTML que hemos visto anteriormente, como por ejemplo la
etiqueta <p> o la etiqueta <h1>, pueden recibir algo llamado atributo.

Los atributos son propiedades o "configuraciones" que nos permitirán modificar ese
elemento de alguna manera (por ejemplo, los estilos).
En el ejemplo de la imagen podemos ver como el atributo style seguido de una
propiedad y su valor, nos permite cambiar el color del fondo y de un texto.

📌 1️Usar el nombre de la etiqueta directamente


Si quieres aplicar estilos a todas las etiquetas de un tipo (por ejemplo, p, h1,
button): css

p{
color: blue; /* Cambia el color del texto */
font-size: 18px; /* Cambia el tamaño de la letra */
}
✅ Esto afectará a todos los párrafos (<p>) del sitio.

📌 2️Usar clases para estilos específicos


Si solo quieres modificar algunos elementos, usa clases (.): css

.destacado {
color: red;
font-weight: bold;
}
<p class="destacado">Este texto es especial.</p>
✅ Solo los elementos con class="destacado" tendrán este estilo.

📌 3️Usar IDs para elementos únicos


Si el estilo es para un solo elemento específico, usa # en CSS: css

#titulo-principal {
font-size: 24px;
text-align: center;
}
<h1 id="titulo-principal">Bienvenido a mi sitio</h1>
✅ El estilo solo se aplicará a este h1.

📌 4️Cómo enlazar el CSS al HTML


Asegúrate de conectar tu archivo CSS al HTML en la sección <head>:

<link rel="stylesheet" href="[Link]">


✅ Coloca esto dentro del <head> de tu [Link].

LECCION 2: ¿QUE ES CSS?


Archivo de CSS
Como has visto en la lección anterior, podemos integrar fácilmente estilos de CSS
dentro de las etiquetas de HTML a través del atributo style. Pero esta no es la única
manera. De hecho, es más recomendado tener un archivo específicamente de estilos
de CSS, ya que de esta forma el código estará mejor organizado.

<p style="color: black;">Este texto es especial.</p>


DONDE:
P : ETIQUETA HTML
STYLE: ATRIBUTO
COLOR: PROPIEDAD
BLACK: VALOR

¿COMO FUNCIONA?
En las siguientes lecciones veremos las distintas formas que tenemos de escribir código
CSS, pero a modo de introducción ahora veremos una de ellas. Utilizaremos
un selector llamado clase, que nos permitirá elegir a qué elemento HTML queremos
darle estilos.
El selector será una referencia que nos permitirá seleccionar un elemento HTML.
La propiedad dirá qué característica queremos cambiar de ese elemento. Por último,
el valor dirá cuál será el estilo que tendrá esa propiedad.

ATAJOS MAS USADOS EN VISUAL STUDIO CODE

Acción Windows

Abrir archivo Ctrl + O

Guardar archivo Ctrl + S

Guardar todo Ctrl + Shift + S

Cerrar archivo actual Ctrl + W

Cerrar VS Code Ctrl + Shift + W

Abrir una nueva ventana Ctrl + Shift + N

Alternar pantalla completa F11

🔍 Navegación y búsqueda

Acción Windows

Abrir el explorador de archivos Ctrl + Shift + E

Abrir barra de búsqueda Ctrl + F

Buscar en todos los archivos Ctrl + Shift + F

Reemplazar en archivo Ctrl + H

Ir a línea específica Ctrl + G

Ir a archivo específico Ctrl + P


Acción Windows

Ir a símbolo en archivo Ctrl + Shift + O

Abrir terminal Ctrl + J

✍️Edición de código

Acción Windows

Copiar Ctrl + C

Cortar Ctrl + X

Pegar Ctrl + V

Deshacer Ctrl + Z

Rehacer Ctrl + Shift + Z

Seleccionar todo Ctrl + A

Comentar línea Ctrl + /

Duplicar línea Shift + Alt + ↓ / ↑

Mover línea arriba/abajo Alt + ↑ / ↓

Borrar línea Ctrl + Shift + K

Autoformatear código Shift + Alt + F

📂 Manejo de archivos y pestañas

Acción Windows

Abrir nueva pestaña Ctrl + N

Cerrar pestaña actual Ctrl + W

Alternar entre pestañas Ctrl + Tab

Mover pestaña a la derecha Ctrl + PageDown

Mover pestaña a la izquierda Ctrl + PageUp

📜 Multicursor y selección avanzada


Acción Windows

Seleccionar la misma palabra en todo el archivo Ctrl + Shift + L

Añadir cursor en múltiples líneas Ctrl + Alt + ↑ / ↓

Seleccionar palabras similares Ctrl + D

Seleccionar en columnas Shift + Alt + Click

🖥 Atajos para la terminal integrada

Acción Windows

Abrir / cerrar terminal Ctrl + J

Nueva terminal Ctrl + Shift + ñ

Cerrar terminal Ctrl + Shift + W

Limpiar terminal Ctrl + L

🔄 Control de versiones (Git)

Acción Windows

Abrir panel de control Git Ctrl + Shift + G

Confirmar cambios (Commit) Ctrl + Enter

Clonar repositorio Ctrl + Shift + P → "Git: Clone"

Sincronizar cambios Ctrl + Shift + P → "Git: Sync"

🤩 Extra: Atajos de Inteligencia Artificial (Copilot / ChatGPT)

Acción Windows

Abrir Copilot Chat Ctrl + Shift + I

Sugerencias de código Tab (cuando se muestra una sugerencia)

ESTRUCTURA DE UN HTML
🔧 PASOS USANDO CORDOVA PARA CREAR APK
A PARTIR DE HTML, CSS Y JAVASCRIPT
1. Instalar [Link]

Descárgalo desde: [Link]

2. Instalar Cordova

Abre tu terminal (CMD, PowerShell o Terminal) y escribe:

npm install -g cordova


3. Crear tu proyecto Cordova
cordova create miApp [Link] MiApp

Esto creará una carpeta llamada miApp.

4. Mover tus archivos HTML/CSS/JS

Copia tus archivos [Link], [Link], [Link], etc., dentro de:

miApp/www/

Reemplaza el [Link] que viene por defecto.

5. Añadir plataforma Android


cd miApp
cordova platform add android

6. Compilar la APK
cordova build android

🔧 Esto generará tu APK en:

miApp/platforms/android/app/build/outputs/apk/debug/[Link]

LECCION 5: ESTILOS

PROPIEDAD CSS ¿QUE HACE? EJEMPLO


color Cambia el color del texto color: #1235;
background-color Cambia el color de fondo background-color: #f0f0f0;
font-size Cambia el tamaño del texto Font-size: 20px;
font-family Especifica la tipografía font-family: Arial, sans-serif;
font-weight Controla el grosor del texto font-weight: bold;
Alinea el texto
text-align text-align: center;
horizontalmente
Espacio exterior entre
margin margin: 10px;
elementos
Espacio interior del
padding padding: 15px;
contenido
border Agrega borde a un elemento border: 1px solid #000;
Define el ancho de un
width width: 300px;
elemento
Define la altura de un
height height: 200px;
elemento
display Cambia el tipo de caja del display: flex;
elemento
Dirección de los elementos
flex-direction flex-direction: row;
en un contenedor flex
Alinea los hijos
justify-content horizontalmente en un justify-content: center;
contenedor flex
Alinea verticalmente en un
align-items align-items: center;
contenedor flex
Define cómo se posiciona un
position position: absolute;
elemento
Posiciona elementos con
top, right, etc. top: 10px; right: 20px;
position: relative/absolute
Controla el orden de
z-index z-index: 10;
apilamiento de los elementos
Maneja el contenido que
overflow overflow: hidden;
desborda
Agrega sombra alrededor del box-shadow: 0 2px 4px
box-shadow
elemento rgba(0,0,0,0.2);
Aplica animaciones suaves al
transition transition: all 0.3s ease;
cambiar propiedades
Cambia el tipo de cursor al
cursor cursor: pointer;
pasar sobre el elemento
Define decoraciones como
text-decoration text-decoration: none;
subrayado o tachado

LECCION 6: FLEXBOX

Flexbox es un valor dentro de CSS destinado a la propiedad display. Permite


posicionar, alinear y direccionar los elementos HTML en la pantalla de una manera
muy sencilla...

FSMOL5 / JAVASCRIPT

LECCION 1 : OBJETIVO DE APRENDIZAJE

¿QUÉ APRENDERÁS EN ESTA CLASE?

Conocerás los fundamentos de programación de Javascript, iniciaremos por


comprender lo que es un lenguaje de programación en general, las cualidades de
Javascript y luego abordaremos una serie de conceptos básicos como variables, tipos
de datos, operadores y funciones para ejecutar nuestras primeras líneas de código.
INICIEMOS POR DEFINIR... ¿QUÉ ES UN LENGUAJE DE PROGRAMACIÓN?

Podemos denominarlo como un lenguaje formal (o artificial, es decir, un lenguaje con


reglas gramaticales bien definidas) que le proporciona a una persona, en este caso el
programador, la capacidad de escribir (o programar) una serie de instrucciones o
secuencias de órdenes en forma de algoritmos con el fin de controlar el
comportamiento físico o lógico de un sistema informático, de manera que se puedan
obtener diversas clases de datos o ejecutar determinadas tareas.

El popular portal devjobsscanner(opens in a new tab) recientemente ha publicado los


lenguajes de programación más demandados en el último año y los listamos a
continuación:

 JavaScript / TypeScript
 Python
 Java
 C#
 PHP
 C/C++
 Ruby
 GO

¿QUE ES JAVASCRIPT?

EL PILAR DEL FRONT Y EL BACK

JavaScript es un lenguaje de programación dinámico que tiene la capacidad de ser


utilizado en variados dispositivos, desde ordenadores hasta teléfonos inteligentes.

Basado en objetos, dinámico y amigable para principiantes, JavaScript es el pilar de


múltiples herramientas que sus fanáticos fueron ampliando con nuevas
funcionalidades a lo largo del tiempo.

Si bien era conocido como un lenguaje de programación solamente de front-end, en


los últimos años tomó una posición muy fuerte también en el lado del servidor, a
través de [Link]. Esto significa que alguien puede saber programar todo el stack, esto
es: tanto el front como el back-end, ¡aprendiendo un único lenguaje!

Además, es un lenguaje de tipado dinámico, lo que significa que no necesitamos


declarar y establecer un tipo –como número o cadena de caracteres– específico e
inflexible para las variables, lo cual da mucha libertad y sencillez, en especial al
aprender el lenguaje. Técnicamente, JavaScript es un lenguaje de programación
interpretado, por lo que no es necesario compilar los programas para ejecutarlos.
¿POR QUÉ APRENDERLO?

ANTES QUE NADA...

Debes saber que la programación es una de las profesiones del futuro (y del presente).
En la actualidad, el mundo evoluciona gracias a la tecnología y los avances a los que
asistimos como sociedad son tan significativos como prometedores. Todas las
industrias, en todas partes del globo, requieren desarrolladores capacitados en las
herramientas y lenguajes de programación más utilizados.

Por dar algunos números, en 2020 había 1 millón de puestos vacantes en tecnología y
solo 100,000 personas se graduaron de carreras afines a estos puestos. Además, se
estima que para 2025 van a haber más de 150 millones de puestos abiertos (puedes
leer más en este informe(opens in a new tab) de Microsoft).

Además, Latinoamérica se posiciona como uno de los mercados de talento más


interesantes para las compañías y empresas del universo tech. De acuerdo a este
informe (opens in a new tab)de Deel, de julio a diciembre de 2021, la tasa de
crecimiento de contratación hacia Latinoamérica aumentó un 156%, siendo el rol de
desarrollador el más buscado por las empresas a nivel global.

Junto con Python y Java, JavaScript es uno de los lenguajes de programación más
utilizados por las empresas en el desarrollo de sus proyectos en el mundo del software.

Sin ir más lejos, las compañías que están construyendo el futuro destacan, entre las
herramientas de su tech stack, a JavaScript como uno de los lenguajes de
programación preferidos para desarrollar sus productos.

Lo cierto es que la mayoría de las aplicaciones que vemos hoy en día usan JavaScript.
Los desarrolladores web de todo el mundo lo eligen por su facilidad de uso y porque su
curva de aprendizaje es una de las más sencillas.

Aprenderlo te permitirá crear cualquier aplicación para cualquier dispositivo o


plataforma. Además de ser el lenguaje de programación más popular, es el más
utilizado en el mundo según la última encuesta de Stack Overflow (puedes ver más
aquí, en este reporte(opens in a new tab))

CARACTERISTICAS:

1. VELOCIDAD: En esencia, JavaScript tiende a ser muy rápido. A menudo se


ejecuta inmediatamente en el navegador; en tanto no requiera recursos
externos, JavaScript no tiene permitido retrasarse por llamados del servidor
backend.
2. POPULARIDAD: JavaScript está en todos lados y se espera que su popularidad
siga en alza. Si navegas por recursos y plataformas tales como StackOverflow y
GitHub verás la cantidad de proyectos desarrollados en base a este lenguaje. Es
más, con la llegada de [Link], se ha incrementado su uso en el back-end y por
lo tanto incorporado cada vez con más frecuencia en los tech stack de todo tipo
de startups y compañías.
3. SERVER LOAD: JavaScript trabaja del lado del cliente lo que reduce la demanda
de servidores en general.
4. COMPATIBILIDAD: A diferencia de otros lenguajes scripting, JavaScript puede
ser usado en cualquier página web y en diferentes tipos de aplicaciones gracias
al soporte que ofrecen otros lenguajes como Pearl y PHP.
5. SIMPLICIDAD: La sintaxis de JavaScript está inspirada en Java, y en relación a
otros lenguajes de programación igualmente populares, es relativamente
sencillo de aprender.
6. VERSATILIDAD: Hay muchos métodos para usar JavaScript mediante servidores
[Link]. Si tú estás en bootstrap [Link] con Express, puedes usar un
documento database como MongoDB, y usar JavaScript en el frontend para
clientes. Una gran ventaja de JavaScript es que es el único lenguaje que te
permite trabajar en modo Full Stack.

VARIABLES Y TIPOS DE DATOS

Luego de conocer las características más importantes de Javascript es momento de


introducirnos en su sintaxis, es decir; en conocer el conjunto de reglas que debemos
seguir al escribir el código fuente para que el lenguaje de programación lo entienda
como correcto.
En la siguiente video clase abordaremos las variables en javascript y los principales
tipos de datos que existen.

MÉTODO LENGTH
Este es un método que solo se puede aplicar al tipo de dato string (más adelante
veremos que también lo podemos utilizar en arreglos). En este ejemplo podemos ver
que si lo intentamos aplicar en un número o en un booleano, nos devuelve error.

Operadores y precedencia
Ya conocimos las variables y tipos de datos, ahora abordaremos un tema más familiar:
suma, resta, multiplicación y división. ¿Te suenan? A estos símbolos los llamamos
operadores y se usan para calcular un valor de dos o más elementos. ¡Veamos la video
clase para saber más!
OPERADORES MATEMATICOS

PRECEDENCIA (ORDEN DE JERERARQUIA EN QUE SE LLEVAN


A CABO LAS OPERACIONES)

JUGAMOS CON LAS REGLAS DE PRECEDENCIA USANDO LOS


PARENTECIS PARA OBTENER EL RESULTADO DESEADO EN
JAVASCRIPT
**CONCATENAR = UNIR**

RECORDEMOS LA INFORMACIÓN CLAVE DE LA VIDEO CLASE...

La precedencia de operadores determina el orden en el cual los operadores son


evaluados uno respecto del otro. Los operadores con mayor precedencia se convierten
en los operandos de los operadores con menor precedencia.

CUADRO DE PRECEDENCIAS
Tabla 1

Preceden Asociativid Operadores


Tipo de operador
cia ad individuales
19 Agrupamiento n/a ( … )
a la
Acceso a propiedades (notación por punto) … . …
izquierda
Acceso a propiedades (notación por a la
… [ … ]
corchetes) izquierda
18 new (con lista de argumentos) n/a new … ( … )
a la
Llamada a función … ( … )
izquierda
a la
Encadenamiento opcional ?.
izquierda
17 new (sin lista de argumentos) a la derecha new …
Incremento sufijo … ++
16 n/a
Decremento sufijo … --
NOT lógico (!) ! …
NOT a nivel de bits (~) ~ …
Suma unaria (+) + …
Negación unaria (-) - …
15 Incremento prefijo a la derecha ++ …
Decremento prefijo -- …
typeof typeof …
void void …
delete delete …
await await …
14 Potenciación (**) a la derecha … ** …
13 Multiplicación (*) a la … * …
División (/) izquierda … / …
Resto (%) … % …
Adición (+) a la … + …
12
Sustracción (-) izquierda … - …
Desplazamiento de bits a la izquierda (<<) … << …
Desplazamiento de bits a la derecha (>>) a la … >> …
11
Desplazamiento de bits a la derecha sin izquierda
… >>> …
signo (>>>)
Menor a (<) … < …
Menor o igual a (<=) … <= …
Mayor a (>) a la … > …
10
Mayor o igual a (>=) izquierda … >= …
in … in …
instanceof … instanceof …
Igualdad (==) … == …
Desigualdad (!=) a la … != …
9
Igualdad estricta (===) izquierda … === …
Desigualdad estricta (!==) … !== …
a la
8 AND a nivel de bits (&) … & …
izquierda
a la
7 XOR a nivel de bits (^) … ^ …
izquierda
a la
6 OR a nivel de bits (|) … | …
izquierda
a la
5 AND lógico (&&) … && …
izquierda
a la
OR lógico (||) … || …
izquierda
4
a la
Operador de coalescencia nula (??) … ?? …
izquierda
3 Operador condicional (ternario) a la derecha … ? … : …
… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
Asignación a la derecha
… >>= …
2
… >>>= …
… &= …
… ^= …
… |= …
… &&= …
… ||= …
… ??= …
yield yield …
a la derecha
yield* yield* …
a la
1 Operador coma … , …
izquierda
OPERADORES DE COMPARACION

Anteriormente conocimos los operadores básicos y su precedencia, ahora nos


enfocaremos en los operadores de comparación: mayor que (>), menor que (<), mayor
o igual (>=), menor o igual (<=), igual == (se representa con doble igual) y distinto de (!
=).

FUNCIONES

En esta lección abordaremos las funciones, que son un concepto fundamental en la


resolución de problemas a través de la programación.
Observa con detalle la siguiente video clase para introducirte en las funciones de
Javascript.

TRES FORMAS PARA ESCRIBIR LA MISMA FUNCION


NOMENCLATURAS

NOMBRANDO FUNCIONES...

Habrás visto que en la anterior video clase comenzamos a ponerle nombres a nuestras
funciones, ¿verdad? Bueno, existen diferentes maneras de escribir nombres dentro del
mundo del código. Antes de continuar a la siguiente lección, queremos contartelas.

¿QUÉ ES UNA NOMENCLATURA?

Las nomenclaturas son formas de llamar a las cosas. En programación existen ciertas
reglas sobre las cuales llevamos uniformidad en el código y nos proporcionan un
estándar de trabajo especialmente dentro de equipos de desarrollo de software.

Existen 3 tipos de nomenclatura principal: camelCase, PascalCase, snake_case.

camelCase

Este modo de nombrar implica la unión de dos o más palabras sin espacios entre ellas,
pero diferenciadas por una letra mayúscula inicial a partir de la segunda palabra, por
ejemplo: holaMundo / funcionEdadAños.

PascalCase

Es similar a camelCase pero la primera letra de la frase también se inicia con


mayúscula, al igual que cada palabra. Se mantiene la práctica de no tener espacios
entre palabras y cada palabra siempre empieza con su primera letra mayúscula. Por
ejemplo: HolaMundo / FuncionEdadAños.

snake_case

La nomenclatura snake_case es definida de esta forma porque siempre la usamos


sobre el piso. Las letras siempre serán minúsculas y las palabras están separadas por
un guion bajo de esta forma: hola_mundo / funcion_edad_años.

CONTROL DE FLUJO (if/else)

En esta lección abordaremos la forma de direccionar nuestro código a través de


los condicionales (If/else) son estructuras fundamentales para la resolución de
problemas. En la siguiente video clase detallaremos su importante con ejemplos
prácticos.

OBJETO MATH

JavaScript tiene una serie de objetos globales integrados que nos son de utilidad. Por
ejemplo, ya hemos visto y trabajado con el objeto console y su método log para ver
información en nuestra consola. Otro de estos objetos es Math, que tiene varios
métodos propios.

[Link]
Este método nos permite potenciar un número. Por ejemplo, 2 elevado al cubo, sería
igual a multiplicar 2 x 2 x 2. Es decir, 8.

El primer número es la base, y el segundo será la potencia.

[Link] & [Link] & [Link]

A veces necesitamos redondear un número decimal, ya que muchas veces las


operaciones matemáticas pueden resultar en números con coma. Para esto, JavaScript
nos ofrece tres métodos

[Link] redondeará el número decimal al entero más próximo. Es decir que, si


tenemos 0.49, el resultado será 0. En cambio, si tenemos 0.50, el resultado será 1.

[Link] redondeará el número decimal al entero de menor valor. Por ejemplo, si


tenemos el número 5.93, el resultado será 5.

[Link] este método, al contrario que el anterior, redondeará un número al


siguiente entero. Por ejemplo, si tenemos 3.27 el resultado será 4.
[Link] & [Link]

Estos dos métodos nos permitirán conocer el valor máximo o mínimo de un conjunto
de números. Por ejemplo, si tenemos los números 1, 2, 3, 4 y 5, el máximo será el 5 y el
mínimo el número 1.

[Link]
Este último método nos permitirá generar un número aleatorio. Es importante tener
en cuenta que el número que se generará es decimal, y puede ser cualquiera entre el 0
y el 1.

FSM0L6 / BUCLES

¿QUÉ APRENDERÁS EN ESTA CLASE?

Conocerás los operadores lógicos en profundidad y aprenderás el uso de los bucles o


ciclos como estructuras de control determinantes en la iteración de tareas.

OPERADORES LOGICOS

En esta video clase vamos a aprender a representar comparaciones


avanzadas haciendo uso de los operadores lógicos. ¿Los conoces? ¡Dale play para
saber más!
RECORDEMOS LA INFORMACIÓN CLAVE DE LA VIDEO CLASE...

Existen tres tipos de operadores lógicos: la negación o NOT, la conjunción o AND, y la


disyunción u OR.

Operador Significado Ejemplo Resultado

&& and (5 < 2) && (5 > 3) false

|| or (5 < 2) || (5 >3) true

! not ! (5 < 2) true

PUNTOS IMPORTANTES A TENER EN CUENTA:

1. Las expresiones se evalúan en orden, y la computadora omitirá cualquier expresión


redundante. En una declaración &&, si la primera expresión es false, la segunda
expresión no se evaluará porque AMBAS expresiones deben ser true.
2. Lo mismo para la declaración ||. Si la primera expresión es verdadero, la segunda no
se evaluará porque solo debe haber una declaración verdadera para cumplir con los
requisitos del operador.
3. Utiliza paréntesis. Como vimos en el segundo ejemplo de la negación !, utilizamos
paréntesis para evaluar PRIMERO lo que estaba dentro de ellos, y luego aplicamos la
negación. Podemos ajustar cualquier expresión entre paréntesis y se evaluará antes
que toda la expresión en conjunto.

VERACIDAD

¿Alguna vez escuchaste el término veracidad? Como el nombre lo indica, refiere a la


verdad de algo. Es decir, si es verdadero o falso. Como ya sabemos, dentro de
JavaScript existe un tipo de dato booleano que toma estos dos valores. Y como
cualquier otro lenguaje, su forma de procesar lógica se basa en un sistema binario.
Unos y ceros. Verdaderos y falsos. Es por esto que absolutamente todos los datos
dentro de este lenguaje pueden ser resumidos a estos dos valores.
BUCLES FOR Y WHILE

En esta video clase vamos a introducirnos en el concepto de bucle o ciclo y conocer


algunos de los bucles más usados.
Recordemos la información clave de la video clase...

Bucle For

Por un lado, el Bucle For es utilizado cuando sabemos con antelación la cantidad
máxima exacta de pasos que queremos ejecutar. Esta cantidad máxima de pasos se
sitúa como segundo parámetro entre los paréntesis.

Bucle while

El Bucle While es usado cuando no tenemos la certeza de cuántos pasos vamos a


necesitar hasta finalizar la ejecución. Por ejemplo, podríamos pensar en una función
que siga agregando +1 hasta llegar a un número determinado.

RECURSOS ADICIONALES

Expresión Switch
La expresión Switch evalúa una condición. Compara su valor con una instancia case, y
ejecuta declaraciones asociadas a ese case, así como las declaraciones en los case que
siguen.

Bucle Do-While
El bucle Do-While (hacer mientras) ejecuta una sentencia especificada, hasta que la
condición de comprobación se evalúa como falsa. La condición se evalúa después de
ejecutar la sentencia, dando como resultado que la sentencia especificada se ejecute al
menos una vez.

Declaración Continue
La declaración continue se utiliza dentro de los Bucles For. Nos permite omitir alguna
de las iteraciones si se cumple una condición específica.
Break
La declaración break se utiliza dentro de los Bucles For. Nos permite "romper" o
finalizar el bucle con antelación si se cumple una condición específica.

FSMOL7: ARRAYS

¿Qué aprenderás en esta clase?

Aprenderás el concepto de arrays o matriz, su sintaxis, sus métodos incorporados y


cómo usar el bucle for para iterar sobre todos los elementos de un array.

INTRODUCCION A LOS ARRAYS

En esta primera video clase conoceremos uno de los tipos de datos más utilizados en el
mundo de la programación: los arrays (o también llamados "arreglos" en español).
Aprenderemos qué son, su estructura o sintaxis y algunas de sus particularidades.
Recordemos la información clave de la
video clase...
Los arreglos o arrays son lo que se conoce como objeto global
dentro de Javascript, y que nos permiten guardar y gestionar
información. Esto nos será de gran utilidad cuando queramos
almacenar datos.
Dentro de los arreglos existen dos conceptos que pueden
parecer similares, pero son muy diferentes.

1. Por un lado tenemos lo que se conoce como elemento. Los elementos son
aquellos datos que hayamos guardado.
2. Por otro lado, está el concepto de índice. Los índices no representan al dato en
sí mismo, sino la posición en la que se está guardando. Un detalle muy
importante que hay que destacar es que, en los arreglos, siempre se comienza
a contabilizar las posiciones desde el número cero, no el uno.

METODOS DE ARRAYS
Los arreglos, además de ser un tipo de dato, también son un objeto global dentro de
JavaScript. Esto significa que todos los arreglos están asociados a una serie
de métodos. En esta video clase veremos cuáles son los métodos más utilizados.

Recordemos la información clave de la video clase...

Métodos de inserción
1. El método push() añade uno o más elementos al final de un arreglo, y devuelve
la nueva longitud del array.
2. El método pop() elimina y devuelve el último elemento de un arreglo.
3. El método unshift() agrega uno o más elementos al inicio de un arreglo, y
devuelve la nueva longitud del array.
4. El método shift() elimina y devuelve el primer elemento de un arreglo.

Métodos split y join

Métodos varios

1. El método includes() determina si un arreglo incluye o contiene un elemento


específico. Devuelve true o false en cada caso.
2. El método every() determina si todos los elementos en un arreglo satisfacen
una misma condición.
3. El método split() convierte un string en un arreglo, donde cada elemento
contendrá un sub-string, dependiendo del parámetro divisor que indiquemos.
4. El método join() convierte un arreglo en un string, uniendo todos los elementos
de este en una misma cadena.

Métodos de recorrido
1. El método forEach() nos permite recorrer un arreglo, realizando alguna acción
en para cada elemento.
2. El método map() también nos permite recorrer un arreglo y realizar una acción
por cada elemento. La diferencia es que este método devuelve un nuevo
arreglo los elementos modificados.
OTROS METODOS

¿QUÉ OTROS MÉTODOS EXISTEN?


En la lección anterior descubrimos cuáles son algunos de los métodos más utilizados
de los arreglos en JavaScript. Estos
fueron: push, pop, shift, unshift, split, includes, every, join, forEach y map.
Pero, ¿sabías que existen aún más métodos? ¡Así es! Existen más de 40 métodos que
puedes utilizar para realizar operaciones complejas de una manera mucho más
sencilla. Te estarás preguntando cuáles son...
Existe una página web llamada Mozilla Developer en la que podremos encontrar toda
la documentación, información y ejemplos sobre JavaScript. En esta ocasión te
compartimos todos los métodos de arreglos en JavaScript(opens in a new tab). Podrás
encontrar el listado en la columna izquierda de la página.

BUCLES O CICLOS EN LOS ARRAYS

En la anterior video clase aprendimos algunos de los métodos de arreglos más


utilizados. En esta, aprenderemos distintos bucles, el Bucle For y el otro es el
Bucle While.

RECORDEMOS LA INFORMACIÓN CLAVE DE LA VIDEO CLASE...

Bucle For
Crea un bucle que consiste en tres expresiones opcionales, encerradas en paréntesis y
separadas por puntos y comas, seguidas de una sentencia ejecutada en un bucle.
Sintaxis: for ([expresion-inicial]; [condicion]; [expresion-final])sentencia

Bucle While
Crea un bucle que ejecuta una sentencia especificada mientras cierta condición se
evalúe como verdadera. Dicha condición es evaluada antes de ejecutar la sentencia.
Sintaxis: while (condicion)
sentencia

Bucle infinito
Esto no es un nuevo tipo de bucle, sino algo que se puede producir en los que ya
aprendimos. Un bucle infinito se produce cuando un bucle comienza a ejecutarse, pero
jamás termina. Esto se debe a que nunca se llega a la condición de quiebre.
Esto consume muchos recursos de la computadora, por lo que hay que intentar
evitarlos.
LECCION 8: OBJETOS

¿Qué aprenderás en esta clase?

Aprenderás el concepto de objeto, su sintaxis y los métodos de acceso a sus valores.


Además, le daremos una revisión a un nuevo concepto: callbacks.

INTRODUCCION A LOS OBJETOS:

En esta primera video clase conoceremos lo que son los objetos. Te damos un
adelanto, los objetos también son una estructura en la que se puede guardar todo tipo
de información, ¿te suena a algo que ya conocías? ¡Mira la video clase para aprenderlo
todo!
Recordemos la información clave de la video clase...

A diferencia de las matrices que tienen elementos valorados en índices,


los objetos usan un concepto llamado pares de clave:valor.

La clave (key) es el identificador y el valor (value) es el valor que queremos guardar en


esa clave. La sintaxis es "clave: valor". Los objetos pueden contener muchos pares de
clave-valor, deben estar separados por una coma (importante: sin punto y coma
dentro de un objeto).
LECCION 3 DE 8: TRABAJANDO CON OBJETOS

Ya hemos visto lo que son los objetos. En esta lección aprenderemos cómo
manipularlos y trabajar con ellos.
Recordemos la información clave de la video clase…

1. Para acceder a la propiedad de un objeto simplemente tenemos que


escribir el nombre del objeto seguido de un punto y el nombre de la
propiedad.
2. Para cambiar el valor de una propiedad simplemente tenemos que acceder
a ella e igualarla al nuevo valor.
3. Para eliminar propiedades utilizaremos una palabra reservada
llamada delete.

LECCION 4 DE 8: DOT-NOTATION Y BRACKET-NOTATION

En esta video clase hablaremos sobre las diferentes formas de sintaxis que existen para
trabajar con objetos, Dot-Notation y Bracket-Notation.

Recordemos la información clave de la video clase...

De la misma manera que utilizamos la Dot-Notation o notación por puntos para


acceder o asignar un valor, también podemos usar Bracket-Notation, o
notación por corchetes. Lo único que cambia es la forma en la que lo
escribimos.

Muchas veces nos puede suceder que necesitemos utilizar una variable
externa para guardarla como propiedad en un objeto. Es importante que en
esos casos recordemos utilizar Bracket-Notation sin comillas para que funcione
correctamente.
LECCION 5 DE 8: OBJETOS AVANZADOS

En esta video clase vamos a aprender a trabajar de forma más avanzada


con objetos. Aprenderemos más funciones predefinidas de este lenguaje, que
nos permitirán realizar tareas de manera mucho más rápida.

Recordemos la información clave de la video clase...


Métodos de objetos:
1. El método hasOwnProperty() nos permitirá especificar un nombre, y
verificar si este existe como una propiedad dentro de un objeto. En cada
caso devolverá true o false.
2. El método [Link]() devuelve todas las propiedades de un objeto
guardadas en orden dentro de un arreglo.

Recorridos en objetos
De la misma manera que podíamos recorrer los elementos de un arreglo, podemos
recorrer las propiedades de un objeto junto con sus valores.
El bucle For-In nos permite iterar sobre un objeto utilizando dos variables pivot. Una
representa el objeto que recorremos, y la otra la propiedad en la que se está
realizando la iteración. Utilizando ambos valores podremos acceder al valor de cada
propiedad del objeto.

Contextos en JavaScript
Dentro de este lenguaje de programación existe un objeto global llamado this. Este
nos permite manipular el contexto en el que las funciones y la información está siendo
ejecutada. De esta forma podremos tener un alcance más preciso dentro de nuestro
código.
LECCION 6 DE 8: CALLBACKS
Las funciones callback son un tipo de funciones que se pasan por parámetro a otras
funciones, en esta video clase aprenderemos que son y cómo usarlas a través de
algunos ejemplos.

Recordemos la información clave de la video clase...


Supongamos que tenemos una función 1 que recibe por parámetro a una función 2.
Cuando la función 1 ejecuta a la función 2 en su interior, se produce un proceso
llamado “callback”.
DAM0L1 | INTRODUCCIÓN A DATA ANALYTICS
Objetivo
Con este curso preparatorio podrás adquirir los conocimientos básicos sobre Data
Analytics y habilidades técnicas necesarias para iniciarte en la gestión de los datos.
Este curso es asincrónico, ¡es decir que lo puedes hacer a tu ritmo! Sin embargo, para
que tengas como referencia, dependiendo tu dedicación te puede llevar entre 1 a 2
semanas completarlo.

Temáticas
Este curso de Henry está estructurado en 8 lecciones, cada una está conformada por
un conjunto de lecciones que contienen información, videos, material extra y ejercicios
prácticos para que vayas adquiriendo los conocimientos necesarios progresivamente.

LECCION 3 DE 9: SOBRE EL PROYECTO INTEGRADOR


Somos Project Based!
Algo importante de Henry es que siempre nos basamos en proyectos, es decir, somos
Project-Based... Pero, ¿qué es esto?

Proyecto para el Prep Course


Ahora que sabes cómo es nuestra metodología, te contamos sobre el proyecto que
desarrollarás a lo largo de este Prep Course:

DESCUBRIENDO EL ÉXITO COMERCIAL


En este desafío, nos sumergiremos en el mundo de los datos de ventas de una
empresa de tiendas de retail. El desafío es modelar datos minoristas para tomar
decisiones basadas en un historial limitado, prediciendo qué departamentos se verán
afectados y en qué medida, teniendo en cuenta fechas especiales que impactan en los
resultados.
A lo largo de las tareas que te proponemos, emprenderás un viaje analítico que te
permitirá conocer y contar la historia de tus datos.
En cada clase encontrarás los avances para realizar el proyecto.
¿Qué lograrás?
 Desarrollar un proyecto de datos simplificado end-to-end
 Consolidar conocimientos básicos e intermedios de Spreadsheets
 Aplicar tareas de preprocesamiento y análisis exploratorio de datos
 Desarrollar el pensamiento analítico para definir métricas clave de negocio
(KPIs)

¡Revisa la propuesta de proyecto en profundidad!


Recuerda que al final de cada módulo tendrás detallado el avance a realizar, también
te encontrarás con un botón para acceder a esta consigna general nuevamente.

También podría gustarte