- Introducción
- Terminal de Comandos
- Git/GitHub
- HTML
- VSC
- CSS
- Markdown
- Bootstrap
- JavaScript
- TypeScript
- SASS
- APIs
- AJAX
- JSON
- jQuery
- POO
- PHP
- Node
- React
- React Native
- Express
- SQL
- Testing Básico
- Deploy Básico
- Scrum Básico
- AWS Básico
- Soft Skills Básicas
Nuestra intención es ponerte el inicio de tu camino como dev mucho más sencillo.
Simple, con dedicarle 3 días a la semana a estudiarlo, es decir, lees y lo pones en practica, tal vez por una o dos horas al día que lo estudies, irás bien. El aprendizaje real se dará solo si comienzas a crear proyectos con este conocimiento.
Te animo a consultar la fecha de las próximas clases en la seeción de Avisos o en cualquiera de nuestras redes sociales. ¡Gracias por estar aquí! 🙂
Un BootCamp es un programa de formación intensiva en el que se enseñan las habilidades técnicas que demanda el mercado laboral.
Un Full Stack es un profesional capaz de desarrollar aplicaciones web tanto en el Frontend como en el Backend.
El Frontend es la parte de la aplicación web que interactúa con los usuarios.
El Backend es la parte de la aplicación web que interactúa con el servidor.
Un Stack es un conjunto de tecnologías que se utilizan para desarrollar una aplicación web.
Porque la programación es el presente y el futuro.
Porque JavaScript es el lenguaje de programación más popular del mundo.
JavaScript es un lenguaje de programación que se utiliza para desarrollar aplicaciones web.
Una aplicación web es un programa que se ejecuta en un servidor y que se utiliza a través de un navegador web.
Un servidor es un ordenador que se utiliza para almacenar y ejecutar programas.
Un navegador web es un programa que se utiliza para acceder a aplicaciones web.
Un programa es un conjunto de instrucciones que se ejecutan en un ordenador.
Un ordenador es una máquina que se utiliza para procesar información.
Un lenguaje de programación es un conjunto de reglas que se utilizan para escribir programas.
En el sistema operativo Windows, recomendamos usar la terminal que tiene Git, al instalarlo en tu equipo en ocaciones te pregunta si quieres instalar Git Bash, esa es la terminal que recomendamos. Git Bash es la terminal que más estandariza los comandos de los diferentes sistemas operativos.
| Comando | Descripción |
|---|---|
pwd |
directorio actual |
ls |
muestra los archivos del directorio actual |
cd X |
cambia al directorio X directorio |
touch |
crea un archivo |
mkdir |
crea un nuevo directorio |
rm |
elimina un archivo |
rmdir |
elimina un directorio vacío |
code |
abre VSC |
code . |
abre esta carpeta en VSC |
vim |
abre Vim |
clear |
limpiar la terminal |
| Comando | Descripción |
|---|---|
. |
directorio actual |
.. |
directorio padre / directorio superior |
~ |
directorio home: c/Users/usuario |
Se suele pensar que son lo mismo, tal vez se deba al hecho de que solemos escribirlos pegados con una barra diagonal.
Es por mucho el software de control de versiones más ocupado del mundo. Las versiones se guardan de manera local, en tu equipo de computo.
Es el control de versiones remoto más ocupado del mundo. Las versiones se guardan de manera remota, en su página web.
//En Construcción...
Lenguaje de marcas de hipertexto.
Sin HTML no hay web.
Es el lenguaje más básico de la web.
¡Ojo! HTML sí es un lenguaje, pero no de programación.
Pensemos que para ser un lenguaje de programación se requiere que dicho lenguaje tenga funciones.
Ok, su función principal es: ser el encargado de la estructura de una página web.
| Etiqueta | Descripción |
|---|---|
header |
parte superior |
nav |
barra de navegación |
main |
contenido principal |
section |
una sección |
article |
entrada de blog |
aside |
barra lateral |
footer |
parte inferior |
div |
contenedor genérico |
| Etiqueta | Información de uso | Etiqueta padre |
|---|---|---|
h1 |
título principal, solo usar una vez por documento HTML. | header, también podría ser main o section (o div) |
h2 |
título secundario, de nivel 2 | main o section (o div) |
h3 |
título de nivel 3 | section (o div) |
h4 |
título de nivel 4, casi no se usa | section (o div) |
h5 |
título de nivel 5, rara vez se usa uso | section (o div) |
h6 |
título de nivel 6, es muy raro que se utilice | section (o div) |
p |
párrafo, la etique más usada | cualquier etiqueta de estructura |
title |
nombre de la pestaña actual de la página | cualquier etiqueta de estructura |
a |
anchor/ancla, enlace | head |
title |
nombre de la pestaña actual de la página | head |
title |
nombre de la pestaña actual de la página | head |
title |
nombre de la pestaña actual de la página | head |
title |
nombre de la pestaña actual de la página | head |
title |
nombre de la pestaña actual de la página | head |
La etiqueta <a> se utiliza para crear enlaces o hipervínculos en una página web, permitiendo a los usuarios navegar entre diferentes páginas o recursos en la web con solo hacer clic en el enlace.
El atributo principal de la etiqueta <a> es el atributo href, que especifica la dirección URL de destino del enlace.
Aquí está la sintaxis básica de la etiqueta <a>:
<a href="URL_del_destino"> Texto del enlace </a>
href: Este atributo es obligatorio y define la dirección URL de destino del enlace. Puede apuntar a una página web, un archivo, una dirección de correo electrónico o cualquier otro recurso accesible mediante una URL. Al hacer clic en el enlace, el navegador redirige al usuario a la URL especificada en el atributo href.
target: Este atributo opcional define cómo se abrirá el enlace cuando se hace clic. Los valores más comunes son _blank, que abre el enlace en una nueva ventana o pestaña del navegador, y _self, que abre el enlace en la misma ventana o pestaña del navegador en la que se encuentra el enlace (esta es la opción predeterminada si no se especifica nada).
Ejemplo para abrir el enlace en una nueva pestaña:
Algunos ejemplos sencillos de diferentes valores para el atributo href en la etiqueta <a>:
<a href="https://www.ejemplo.com" target="_blank">Abrir enlace en nueva pestaña</a>
download: Este atributo opcional se usa cuando el enlace apunta a un archivo descargable. Si se agrega el atributo download, el navegador sugerirá al usuario que descargue el archivo en lugar de abrirlo directamente.
rel: Otro atributo opcional que especifica la relación del enlace con la página actual. Un uso común es rel="nofollow", que indica a los motores de búsqueda que no sigan el enlace y, por lo tanto, no influya en el ranking del enlace para SEO.
title: Atributo opcional que proporciona un texto descriptivo o una información adicional sobre el enlace cuando el usuario pasa el cursor sobre él (hace un "hover").
Dos formas de crear un botón
<a href="">Clic</a>
<button type="button">Clic</button>
//En Construcción...
Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows, Linux, macOS y Web.
Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código.
Básicamente es el mejor editor de código de la actualidad, usado principalmente para Desarrollo Web. Su preferencia se debe al gran número de extensiones que admite.
//En Construcción...
Es el código que usas para dar estilo a tu página web.
Las principales cosas en la que encarga CSS son:
- colores
- tamaños
- espacios
- fuentes
- animaciones
- adaptación a dispositivos
Es un lenguaje pero no de programación, tampoco es un lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML.
CSS es fácil, solo que tiene muchos detalles que es importante conocer. Empezar con este lenguaje es muy sencillo, como todo es cuestión de ir avanzando de manera constante, hacer proyectos propios e investigar qué hace falta para que funcione el código en determiado apartado.
p {
color: red;
}La p hace referencia a la etiqueta <p> de HTML.
Dentro de las {} colocamos las acciones que le haremos a la etiqueta/selector p.
Las acciones las representamos con sets (conjuntos) de clave: valor (o llave: valoro propiedad: valor)
Se dice que CSS es en cascada por lo siguiente:
p {
color: blue;
}p {
color: yellow;
}Si tenemos la misma propiedad aplicandose al mismo selector, va a tomar la última.
Hay 3 formas, en línea, en bloque o en un archivo separado. Casi siempre lo mejor opción es crear un archivo externo, la instrucción es la siguiente:
<link rel="stylesheet" href="style.css" />Código y Descripción
Se desarrollo un truco para poder trabajar con rem sin complicaciones.
html {
font-size: 62.5%;
}
body {
font-size: 16px;
}.boton {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}.boton {
background-color: #e74c3c;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.boton:hover {
background-color: #c0392b;
}//En Construcción...
//En Construcción...
//En Construcción...
Creación
Fue desarrollado el 1995 por Brendan Eich. Este lenguaje también se representa por sus siglas JS,
Nota
Aquí verás lo más importante de JS y de hecho, verás lo necesario para poder estudiar React 😉
También conocido como ES, es un estándar de lenguaje de programación que especifica cómo deben funcionar los scripts en un entorno de programación. Fue creado para estandarizar el lenguaje JavaScript, que se utiliza ampliamente en la programación web.
ECMAScript define la sintaxis, estructuras de datos, tipos y funcionalidades del lenguaje JavaScript. Está diseñado para ser implementado en diferentes entornos, como navegadores web y servidores, y permite a los desarrolladores escribir código JavaScript compatible que funcione de manera consistente en diferentes plataformas.
Cada versión de ECMAScript introduce nuevas características y mejoras al lenguaje JavaScript. Las versiones más conocidas de ECMAScript son ECMAScript 5 (lanzado en 2009), ECMAScript 6 (también conocido como ES6 o ES2015, lanzado en 2015) y ECMAScript 2015 (ES2015).
ECMAScript ha tenido un impacto significativo en el desarrollo web, ya que ha permitido a los desarrolladores crear aplicaciones web más interactivas y dinámicas. Además, ha impulsado la adopción de tecnologías como Node.js, que permite ejecutar código JavaScript en el servidor.
El isomorfismo, de manera simple, es una relación entre dos cosas que tienen la misma forma pero pueden ser diferentes en otros aspectos.
JS puede ejecutarse tanto en el Frontend como en el Backend.
Y no solo puedes trabajar en la Web, sino también en:
- Diseño y Desarrollo Web
- Videojuegos
- Experiencia 3D
- Realidad Aumentada
- Realidad Virtual
- Controlar Hardware
- Aplicaciones Híbridas y Móviles
- Machine Learning
- ...
- Lenguaje de alto nivel
- Interpretado
- Dinámico
- Tipado Débil
- Multiparadigma
- El punto y coma al final de la línea es opcional
- Case Sensitive: sensible a Mayúsculas y minúsculas
- Es costumbre usar CamelCase para escribir los nombres de las variables
- string
- number
- boolean
- null
- undefined
- NaN
- object = {}
- array = []
- function () { }
- Class {}
- ...
//En Construcción...
React es una biblioteca de JavaScript de código abierto para construir interfaces de usuario. Está basada en la componetización de la UI: la interfaz se divide en componentes independientes, que contienen su propio estado. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz.
Esto hace que React sea una herramienta muy útil para construir interfaces complejas, ya que permite dividir la interfaz en piezas más pequeñas y reutilizables.
Fue creada en 2011 por Jordan Walke, un ingeniero de software que trabajaba en Facebook y que quería simplificar la forma de crear interfaces de usuario complejas.
Es una biblioteca muy popular y es usada por muchas empresas como Facebook, Netflix, Airbnb, Twitter, Instagram, etc.
La documentación es una parte de nuestro trabajo como desarrolladores, que nos puede guiar en las distintas fases de desarrollo.
La documentación de los programas es un aspecto sumamente importante, tanto en el desarrollo de la aplicación como en el mantenimiento de la misma. Mucha gente no dedica tiempo a esta parte del desarrollo y no se da cuenta de que pierde la capacidad de un mantenimiento sencillo y parte de su potencial de organización del código, de una manera más flexible y escalable. Incluso la documentación puede ayudarnos a reutilizar partes de la aplicación y sobre todo de los esquemas de diseño.
La documentación, como su propio nombre indica, es todo tipo de información que ayuda a dirigir los esfuerzos del equipo de desarrollo y que además ayude a entender la arquitectura y diseño de la aplicación a lo largo del tiempo. De cara al cliente puede ser toda aquella información que le guíe a la hora usar la aplicación una vez entregada.
La documentación de un programa empieza a la vez que la construcción del mismo. De hecho, lo más normal es comenzar haciendo esquemas de las piezas del programa, funcionalidad, interfaces, etc. para que, en el momento que nos pongamos a programar, tengamos muy claro qué es lo que se va a desarrollar y cómo lo vamos a hacer.
La realización de la documentación no termina con la entrega de la aplicación, pues durante el mantenimiento es necesario actualizarla para reflejar los cambios que se hayan tenido que realizar para crear nuevas funcionalidades.
Documentación oficial en español
//En Construcción...
SQL significa Structured Query Language, es decir, Lenguaje Estructurado de Consultas.
Es el lenguaje más común para realizar consultas en una base de datos. Creado en 1974.
Se llega a generar un confusión entre SQL y MySQL, incluso también hasta con Workbench.
SQL es el lenguaje de consultas.
MySQL es un sistema de gestión de bases de datos relacional.
Workbench es una herramienta visual de diseño de bases de datos.
WB que integra desarrollo de software, administración de bases de datos, diseño de bases de datos, gestión y mantenimiento para el sistema de base de datos MySQL.