@lexpinonline

Introducción

Curso de programación web

1. Introducción al curso

Felicidades por tomar la decisión de adentrarte al mundo del desarrollo web, es un

mundo realmente amplio.

En este curso aprenderás desde los conceptos más básicos hasta los más
avanzados. Este es un curso distinto, donde aprender será lo más importante. No
hay notas, pero sí proyectos. recuerda que entre más tiempo dediques mejor será
tu desenvolvimiento por este motivo es importante que inviertas tiempo en
practicar fuera del horario de clases.
1. Introducción al curso

Contarás con toda la ayuda y buena disposición de tu profesor para ayudarte con
cualquier duda.

También te dejo aquí el primer consejo para este curso:

“Aprenderás muchas cosas, y está bien no recordarlo todo, pero siempre quedate
con el por qué aprendes y para qué sirve lo que aprendes”.
2. La importancia de la web

Hoy en día nos conectamos a la web en todo momento, hemos desarrollado

conceptos como el “internet of things”, esto ha convertido a la programación web
uno de los sectores más demandados en la actualidad.

Nuevamente te felicito personalmente por elegir conocer más de esta área.

3. Programas a descargar

CMDER (Solo si tienes windows, version FULL):

[Link]

Microsoft Visual Studio Code:

[Link]

GitHub:
[Link]
3. Programas a descargar

NodeJs (Descargar versión LTS):

[Link]

XAMPP (descargar la última opción):

[Link]
 Módulo I

Conceptos manejados en la industria

1. Tecnología

La tecnología un término amplio que se refiere al conjunto de herramientas,

procesos y técnicas que se utilizan para hacer cosas de manera más eficiente y
con menos esfuerzo, esto puede tener un impacto significativo en la sociedad y la
cultura, y a medida que avanza, se desarrollan nuevas formas de hacer cosas de
manera más eficiente

Abaco - ENIAC - App

2. Hardware

El hardware es el conjunto de componentes físicos de un dispositivo electrónico,

como la placa madre, el procesador, la memoria, por mencionar algunos.

Es esencial para el funcionamiento de un dispositivo electrónico ya que le permite

recibir, procesar y almacenar información para realizar tareas.

R-C
3. Software

El software es un término que se refiere a los programas y sistemas informáticos

que controlan todo el funcionamiento de un ordenador y que permiten a los
usuarios realizar tareas específicas.

Es la parte lógica y no física de un sistema informático, en contraposición con el

hardware, que es la parte física del sistema.

ctrl
3. Información

La información es un conjunto de datos que tienen un significado o propósito

específico. Puede ser cualquier cosa, desde una simple cifra hasta una historia
compleja.

Ejemplos:
"El gobierno Israelí recibió información acerca de dos de sus siete soldados
desaparecidos"
"Programar es el proceso de diseñar y escribir instrucciones para que una
computadora realice tareas específicas."
4. Bit

Un bit es la unidad más pequeña de información digital que puede almacenarse o

transmitirse. Se utiliza para representar la contraposición entre dos valores
(apagado y encendido, falso y verdadero, 0 y 1, existe y no existe).

La palabra "bit" es un acrónimo de "binary digit", que significa dígito binario en

inglés. Por ejemplo, un estatus apagado se representa con el 0, mientras que su
contraparte encendido se representa con el 1 (Binario)
5. Byte

Es la unidad de medida de información estándar utilizada en la informática y

telecomunicaciones, equivale a un conjunto ordenado de 8 bits.

Existe por IBM desde la década de los 50 's como una forma de representar
caracteres y símbolos en una computadora.

1 byte equivale a 8 bits, y en 1 byte podemos representar cualquier carácter

Por ejemplo, la palabra “hola” ocupa 4 bytes y se representa de la

siguiente forma: 01101000 - 01101111 - 01101100 - 01100001
6. Red

Una red informática, es un conjunto de equipos interconectados por medio de

cables, señales, ondas o cualquier otro método de transporte de datos, estos
comparten información (archivos) y/o recursos (CD-ROM, impresoras, HDD/SSD,
etc.)
7. IP

La IP (Internet Protocol) es una dirección única que identifica a un dispositivo en

Internet o en una red local.
8. Puerto

Un puerto es una interfaz o conector ya sea interno o externo que se utiliza para
comunicar diferentes tipos de elementos de hardware o elementos de software que
nos permitan enviar y recibir datos de un equipo a otro.
9. O.S. (Operating System)

Un sistema operativo (Operating System) es el software que controla y coordina el

uso de los recursos de una computadora, como el hardware, el software y los
datos.

Es el "cerebro" de la computadora y se encarga de gestionar todas las tareas y

procesos que se ejecutan en ella.

Existen diferentes sistemas operativos

para computadoras: Windows, MacOS, Linux (y sus diversas distribuciones)
para equipos móviles: IOS, Android, Windows Phone
10. WWW

La World Wide Web, red mundial o simplemente WWW es un sistema lógico de

acceso y búsqueda de información cuyas unidades son las páginas web.

Es decir, todos los sitios a los que podemos acceder desde nuestros dispositivos a
través de un navegador web, como Google Chrome, Mozilla Firefox o Safari.
10. Sitio web

Un sitio web, ​portal​o cibersitio es una colección de páginas web relacionadas

entre sí y comunes a un dominio de internet el cual forma parte de la WWW dentro
de la red de redes (Internet).​​

Hola
11. Frontend

El frontend es la parte de una aplicación o sitio web que el usuario final ve y con la
cual interactúa de forma digital usando HTML, CSS y JavaScript.
12. Backend

El Back-End es la parte de una aplicación o sitio web que el usuario final no ve y

que se encarga de procesar y almacenar la información y los datos necesarios
para que la aplicación o el sitio web funcione correctamente.
13. Fullstack

Un Full Stack es la persona responsable de la creación y el mantenimiento de una

aplicación web. Por este motivo, es importante que el Full Stack tenga
conocimientos de desarrollo Front-End y Back-End.
13. DevOps

DevOps es un acrónimo inglés de development (Desarrollo/Dev) operations

(Operaciones/Ops), consiste en una filosofía y un conjunto de prácticas que
buscan mejorar la comunicación y la colaboración entre los equipos de desarrollo
de software y de operaciones de TI.

Su objetivo es hacer más rápido el ciclo de vida del desarrollo de software y

proporcionar una entrega continua de alta calidad.
14. Editor de texto

Editor de texto es un programa informático que permite crear y modificar archivos

digitales compuestos únicamente por textos sin formato, conocidos comúnmente
como archivos de texto o “texto plano”. El programa lee el archivo e interpreta los
bytes leídos según el código de caracteres que usa el editor.
15. Entorno de desarrollo

Es una aplicación informática que proporciona servicios integrales para facilitar al

desarrollador o programador el desarrollo de software.
16. SEO

El posicionamiento en buscadores, optimización en motores de búsqueda o SEO,

es un conjunto de acciones orientadas a mejorar el posicionamiento de un sitio
web en la lista de resultados de Google, Bing, u otros buscadores de internet

Tools - SEO
17. HTTP

HTTP (Hypertext Transfer Protocol), o Protocolo de transferencia de hipertexto,

es el protocolo de comunicación que permite las transferencias de información a
través de archivos en la World Wide Web.

En pocas palabras, HTTP define cómo las páginas web, imágenes, videos, audio y
otros contenidos son transferidos a través de Internet, desde servidores web hasta
navegadores web, mediante el uso de un conjunto de reglas y convenciones
(Petición y respuesta, Códigos de respuesta, Encabezados).
18. SSL

SSL (Secure Sockets Layer) es un protocolo de seguridad que se utiliza para

asegurar la privacidad y la integridad de la información que se transfiere a través
de Internet gracias a la encriptación de los datos que se transmiten entre
servidores web y navegadores web
19. UI

La interfaz de usuario es el medio con que el usuario puede comunicarse con una
máquina, equipo, computadora o dispositivo, y comprende todos los puntos de
contacto entre el usuario y el equipo.
20. UX

La experiencia de usuario es el conjunto de factores y elementos relativos a la

interacción del usuario con un entorno o dispositivo concretos, dando como
resultado una percepción positiva o negativa de dicho servicio, producto o
dispositivo.

(Heinz)
21. CDN

Un CDN (Content Delivery Network) es una red de distribución de contenido

conformada por servidores ubicados en diferentes partes del mundo, que
contienen copias de los mismos datos.

Se encarga de entregar estos archivos, como imágenes, videos, audio y código, a

los usuarios finales con el fin de maximizar el ancho de banda para el acceso a los
datos de clientes por la red.

(Fastly-21)
22. W3C

El World Wide Web Consortium (W3C) es una organización internacional que se

dedica a la estandarización de la tecnología y la estructura de la World Wide Web
(WWW)
23. Responsive

Cuando utilizamos el término “responsive” (adaptable), nos referimos

principalmente a “responsive design” (diseño web adaptable). Esto significa hacer
que un sitio web sea accesible y adaptable en todos los dispositivos: smartphones,
tablets, notebooks, etc.
24. Cliente

Es el demandante de un servicio

Ejemplo:
- Yo cuando voy al médico
- Yo cuando ingreso a [Link]
25. Servidor

Es el proveedor de recursos o servicios

Ejemplo:
- El médico realizando un chequeo
- El computador (servidor) donde está alojado Youtube enviando la informacion
que pedi
26. Buscador web

Los buscadores web, también conocidos como motores de búsqueda, son

sistemas informáticos que trabajan recopilando información en Internet con el
objetivo principal de mostrar la información previamente solicitada a los usuarios.
27. Seguridad informática

La seguridad informática es una disciplina que se encarga de proteger la integridad

y la privacidad de la información almacenada en un sistema informático.
Sin embargo no existe técnica alguna que permita asegurar la inviolabilidad total
de un sistema.

google
28. Código

El código es un conjunto de instrucciones escritas en un lenguaje de programación

con el fin de crear y controlar aplicaciones y sistemas informáticos. El código se
escribe utilizando un lenguaje de programación, como JavaScript, Python o C++
con esto nos referimos al lenguaje por el cual funcionan las computadoras.

Mapa de instrucciones
29. Hosting

Hosting es el uso y provecho que se hace de los servidores web y de los recursos
que disponen.
30. Dominio

Un dominio es un nombre único y exclusivo que se utiliza para enmascarar una

dirección IP e identificar a un sitio web en Internet. Facilita el acceso a los sitios
web y ayuda al usuario a recordar mejor como llegar a ellos.
31. URL

URL son las siglas en inglés de Uniform Resource Locator, que en español
significa Localizador Uniforme de Recursos.

Como tal, el URL es la dirección específica que se asigna a cada uno de los
recursos disponibles en la red con la finalidad de que estos puedan ser
identificados y localizados. Por esto existe un URL para cada uno de los recursos
(páginas, sitios, imágenes, documentos, carpetas) que hay en la World Wide Web.
32. API

La interfaz de programación de aplicaciones, en inglés, application programming

interface, conocida también por las siglas API, es un conjunto de subrutinas y
procedimientos que permite la comunicación y realización de procesos entre
softwares como una capa de abstracción.

Existen diferentes tipos de APIs, por ejemplo de logueo, geolocalización, servicios

de pago etc…

Las APIs ofrecen grandes beneficios como ahorro de dinero y tiempo en desarrollo
de software.
32. API
33. Plugin

Los plugins son pequeños programas complementarios que amplían las funciones
de aplicaciones web y programas de escritorio.
34. Framework

En programación un framework es un conjunto de herramientas que se utilizan

para facilitar el desarrollo de aplicaciones y sistemas informáticos. Proporciona una
estructura de trabajo para el desarrollo de software y permite a los programadores
enfocarse en la lógica de la aplicación en lugar de construir la estructura básica
desde cero.
34. Framework
35. CMS

Un CMS (Content Management System) o Sistema de Gestión de Contenidos es

una aplicación de software que permite a los usuarios colaborar en la creación,
edición y producción de contenido digital: páginas web, blogs, etc.

Un CMS funciona con un panel de administración. Se accede a través del

navegador y tiene una interfaz simplificada que permite crear contenidos de forma
sencilla.
35. CMS
 Módulo II

Puestos de trabajo en la industria

1. Desarrollador Front-end

El desarrollador Front-end se enfoca en crear la interfaz de un sistema para

permitir la interacción del usuario con la web. Su trabajo consiste en convertir los
documentos de diseño en código y diseñar la apariencia visual de la página web,
incluyendo la estructura, la tipografía y las imágenes.

Es fundamental que el Front-end tenga en cuenta la usabilidad y la legibilidad de la

página para asegurar una experiencia satisfactoria para el usuario.

Front-end
2. Desarrollador Back-end

El desarrollador Back-end es el encargado de implementar la interacción entre el

usuario y el sitio web. Utiliza lenguajes de programación para desarrollar módulos
de procesamiento que otorguen a los usuarios contenido dinámico basado en las
peticiones de entrada.

Back-end
3. Desarrollador full-stack

Un “Full-stack developer” es un programador con un perfil técnico muy completo

que conoce bien tanto lo referente a Back-end como lo referente a Front-end.
Se trata de un perfil cada vez más demandado y bien remunerado, se suelen
encontrar habitualmente en startups.

Full-Stack
4. DevOps

DevOps es un acrónimo inglés de development (desarrollo) y operaciones

(operaciones), consiste en un conjunto de prácticas que agrupan el desarrollo de
software y las operaciones de TI. Su objetivo es hacer más rápido el ciclo de vida
del desarrollo de software y proporcionar una entrega continua de alta calidad.

DevOps
Fuente: [Link]
5. Diseñador UI/UX

UX (User Experience) hace referencia a la forma en la que los usuarios interactúan

con un producto o servicio. Es decir, cómo y para qué el usuario utiliza un objeto o
interactúa con una web o app.

Por otro lado, el diseño UI o User Interface se centra en la parte visual. Es decir, si
UX se encarga de que un producto sea útil para los usuarios, UI lo hace atractivo y
visual.

UI/UX - airbnb
6. SEO specialist

Un SEO specialist es: un profesional con amplia experiencia en la optimización de

páginas web, cuya labor diaria se centra en el análisis, la revisión y la aplicación
de técnicas que favorezcan un mejor posicionamiento en los motores de
búsqueda.

SEO
 Módulo III

Herramientas utilizadas para desarrollos

1. Computadora y especificaciones

Procesador: La unidad central de procesamiento o procesador es el hardware

dentro de un computador, teléfonos inteligentes y otros dispositivos programables.
Su trabajo es interpretar las instrucciones de un programa informático mediante la
realización de las operaciones básicas aritméticas, lógicas y externas. (Min: intel
i3-3240T (3ra Gen) / AMD Athlon II X4 - Rec: Intel i5 7400 (7ma Gen)/ AMD FX-
4300)
1. Computadora y especificaciones

RAM: Memoria principal de la computadora, donde residen programas y datos,

sobre la que se pueden efectuar operaciones de lectura y escritura. (Min: 4Gb -
Rec: 8 Gb)

GPU: Es el acrónimo en inglés de “Unidad de Procesamiento de Gráficos”. En

términos generales, es un tipo de procesador que maneja y acelera la
representación de gráficos (la generación de las imágenes que verá en las
pantallas de las computadoras)
1. Computadora y especificaciones

HDD: disco duro o unidad de disco rígido es un dispositivo de almacenamiento de

datos mecánico que emplea un sistema de grabación magnética u óptica para
almacenar y recuperar archivos digitales.

SSD (Solid State Disk): un SSD es una nueva generación de dispositivos de

almacenamiento que se emplea en equipos. Los SSD reemplazan los discos duros
mecánicos tradicionales con una memoria basada en flash, significativamente más
rápida.(Rec: SSD 500 Gb)
1. Computadora y especificaciones

Fuente poder: Fuente de poder es un componente del computador que se encarga

de transformar una corriente eléctrica alterna en una corriente eléctrica continua
transmitiendo la corriente eléctrica imprescindible y necesaria a los ordenadores
para el buen funcionamiento y protección de estos. (500w certificada)

Teclado: En informática, un teclado es un dispositivo o periférico de entrada, en

parte inspirado en el teclado de las máquinas de escribir, que utiliza un sistema de
puntadas o márgenes, para que actúen como palancas mecánicas o interruptores
electrónicos que envían toda la información a la computadora o al teléfono móvil.
(Teclado mecanico)
1. Computadora y especificaciones

Mouse: Dispositivo de la computadora que se maneja con una sola mano y permite
dirigir el movimiento del puntero sobre la pantalla para transmitir órdenes diversas.

Tarjeta madre: La placa base, también conocida como tarjeta madre, placa madre
o placa principal, es una tarjeta de circuito impreso a la que se conectan los
componentes que constituyen la computadora. Es una parte fundamental para
montar cualquier computadora personal de escritorio o portátil o algún dispositivo.
2. Editores de texto

Sublime text
2. Editores de texto

NotePad++
3. Entornos de desarrollo

Microsoft visual studio code

3. Entornos de desarrollo

Eclipse
3. Entornos de desarrollo

NetBeans
3. Entornos de desarrollo

Theia
4. Extensiones de utilidad
5. Navegadores

- Firefox
- Opera
- Google chrome
- Brave
- Safari
6. API

- [Link]
- [Link]
- [Link]
- [Link]
7. Librerías

Son procedimientos que pueden ser utilizados por otro código para realizar tareas
específicas. Por lo general, las librerías se escriben en un lenguaje de
programación y se distribuyen en archivos que pueden ser enlazados a un
proyecto.

- [Link]
- AnimeJS
- [Link]
8. Frameworks

- Laravel
- Tailwind
- [Link]
- Angular
- [Link]
9. Controlador de versiones

Se llama control de versiones a la gestión de los diversos cambios que se realizan

sobre los elementos de algún producto o una configuración del mismo. Una
versión, revisión o edición de un producto, es el estado en el que se encuentra el
mismo en un momento dado de su desarrollo o modificación.

My App v 1.0.0
9.1 Git

Es una de las mejores herramientas de control de versiones disponible en el

mercado actual. Es un modelo de repositorio distribuido compatible con sistemas y
protocolos existentes como HTTP, FTP, SSH y es capaz de manejar eficientemente
proyectos pequeños a grandes.
9.2 Mercurial

Es una herramienta de control de versiones que está escrita en Python y destinada

a desarrolladores de software. Los sistemas operativos que admite son similares a
Unix, Windows y macOS. Tiene un alto rendimiento y escalabilidad con
capacidades avanzadas de ramificación y fusión y un desarrollo colaborativo
totalmente distribuido. Además, posee una interfaz web integrada.
Módulo IV

Lenguajes de programación
1. Lenguaje de programación

Es un lenguaje formal que, mediante una serie de instrucciones, le permite a un

programador escribir un conjunto de órdenes, acciones consecutivas, datos y
algoritmos para, de esa forma, crear programas que controlen el comportamiento
físico y lógico de una máquina.
2. Lenguaje de bajo nivel

Un lenguaje de programación de bajo nivel, es aquel en el que sus instrucciones

ejercen un control directo sobre el hardware y por lo tanto están condicionados por
la estructura física de las computadoras que lo soportan.

Ejemplos:
- Código binario
- Lenguaje Máquina
- Lenguajes ensambladores
3. Lenguajes de alto nivel

Cuando hablamos de un lenguaje de alto nivel nos referimos al tipo de lenguaje de

programación que no expresa los algoritmos teniendo en cuenta la capacidad que
tienen las máquinas para ejecutar órdenes, sino al que se utiliza teniendo en cuenta las
capacidades cognitivas de los seres humanos.

Ejemplos:
- Python
- Javascript
- PHP
- Java
- Ruby
4. Lenguajes compilados

Un lenguaje compilado es un lenguaje de programación cuyas implementaciones

son normalmente compiladores y no intérpretes. El término es un tanto vago. En
principio, cualquier lenguaje puede ser implementado con un compilador o un
intérprete.

Los lenguajes compilados tienen la particularidad que su código es leído en

totalidad, y luego se ejecuta todo completamente. De forma que, si existe algún
error. El programa no se ejecutará.
5. Lenguajes interpretados

Un lenguaje interpretado es un lenguaje de programación para el que la mayoría

de sus implementaciones ejecuta las instrucciones directamente, sin una previa
compilación del programa a instrucciones en lenguaje máquina.

Estos lenguajes tienen la particularidad que se ejecutan línea por línea, y en caso
de error. Puede haber un mal funcionamiento, pero el código se ejecutará línea por
línea.
Módulo V

Entorno web y su historia

1. Origen

El origen se remonta a los años 60 cuando el gobierno de Estados Unidos, el

britanico y una empresa privada buscaban una forma de comunicación informática
segura. En 1969 es cuando se creó el proyecto ARPANET el cual podía comunicar
una serie de ordenadores para enviar mensajes. Fue creada por el Dep. de
Defensa de los Estados Unidos como una red de investigación y desarrollo para
compartir información y recursos entre distintas instituciones y universidades.
2. La web 1.0

Web 1.0 se refiere a un estado de la World Wide Web. Es en general un término

usado para describir la Web antes del impacto de la fiebre punto com en 2001, que
es visto por muchos como el momento en que el internet dio un giro.

Algunos elementos de diseño típicos de un sitio Web 1.0 incluyen:

- Páginas estáticas en vez de dinámicas por el usuario que la visitan
- El uso de framesets o marcos.
- Extensiones propias del HTML como <blink> y <marquee>, etiquetas
introducidas durante la guerra de navegadores web.
2. La web 1.0

- Libros de visitas en línea o guestbooks

- Botones GIF, casi siempre a una resolución típica de 88x31 pixels
- Formularios HTML enviados vía correo electrónico. Un usuario llenaba un
formulario y después de hacer clic se enviaba a través de un cliente de correo
electrónico, con el problema que en el código se podía observar los detalles
del envío del correo electrónico. (Inseguro)
- Todas sus páginas se creaban de forma fija y muy pocas veces se
actualizaban.
3. La web 2.0

El término 'Web 2.0' o 'Web social'​es el término que describe la segunda generación de
sitios web, comprende aquellos sitios que facilitan compartir información, el diseño
centrado en el usuario y la colaboración en la World Wide Web. esta web permitió a los
usuarios interactuar y colaborar entre sí, como creadores de contenido.

En este salto la web pasa de ser un simple contenedor o fuente de información y se

convierte en una plataforma de trabajo colaborativo. Ejemplos de la Web 2.0 son las
comunidades web, los servicios web, las aplicaciones Web, los servicios de red social,
los servicios de alojamiento de videos, las wikis, blogs, mashups.
4. La web 3.0

La Web 3.0 o Web Semántica es un término que se ha utilizado para hacer

referencia a una versión de la World Wide Web que se caracterizaría por ser más
inteligente, personalizada y adaptativa. Aunque no existe un consenso sobre qué
características tendría exactamente la Web 3.0, algunas de las características que
se han mencionado como posibles incluyen:

● Uso de tecnologías de inteligencia artificial: La Web 3.0 podría utilizar

tecnologías de inteligencia artificial, como el aprendizaje automático, para
proporcionar una experiencia de usuario más personalizada y adaptativa.
● Mayor integración de la realidad aumentada y virtual: La Web 3.0 podría
utilizar la realidad aumentada y virtual para mejorar la experiencia de usuario
y hacer que sea más inmersiva y realista.
4. La web 3.0

● Mayor uso de la semántica y el etiquetado: La Web 3.0 podría utilizar

tecnologías de procesamiento del lenguaje natural y etiquetado para mejorar
la capacidad de la web para comprender el contenido y ofrecer una
experiencia de búsqueda más precisa y relevante.
● Mayor seguridad y privacidad: La Web 3.0 podría incluir mejoras en la
seguridad y la privacidad para proteger a los usuarios de los riesgos en línea,
como el phishing y el malware.

Esta expresión Web 3.0 apareció por primera vez en 2006

5. La web 4.0

La web 4.0 es como denominamos a la internet de las máquinas que entienden a

los humanos y que aprenden cuanto más se usan (machine learning). Es la
internet de los pequeños bots, de los agentes inteligentes que chatean con los
humanos, de las casas inteligentes, de las smart cities.

Nota: El machine learning es una rama de la inteligencia artificial que se centra en

algoritmos que permiten a las máquinas aprender de manera autónoma a partir de
la experiencia.
6. Resumen

- La web 1.0 sería la web de los catálogos online.

- La web 2.0 sería la web de las webs bidireccionales, las redes sociales y el
despliegue de la nube.
- La web 3.0 es la internet móvil, con todo lo que conlleva: geolocalización,
realidad aumentada, realidad virtual, la internet de las cosas (IOT), el big
data, etc.
- La web 4.0 es la de las máquinas inteligentes.
- La web 5.0 ¿La web de la realidad virtual?
Módulo VI

Terminal de Linux
1. Terminal de linux

La Terminal de Linux es una consola, similar a CMD o PowerShell(pero mucho

más avanzada que ambas), utilizada para permitir a los usuarios más avanzados y
técnicos controlar hasta el más mínimo detalle del sistema operativo.

Terminal linux para windows: [Link]

2. Terminal de linux, CMD y PowerShell

La terminal de Linux es una aplicación que permite a un usuario interactuar con el

sistema operativo a través de líneas de comandos.

El CMD (Command Prompt) es una aplicación de línea de comandos en Windows que

le permite a un usuario interactuar con el sistema operativo de la misma manera que
lo haría en la terminal de Linux (Pero utiliza comandos distintos).

PowerShell es una aplicación de línea de comandos y entorno de script de Windows y

ofrece una mayor funcionalidad que el CMD.

Nota: La terminal de linux es la herramienta más poderosa

3. cd (change directory)

Para navegar por los archivos y directorios de Linux, usa el comando cd. Te pedirá la
ruta completa o el nombre del directorio, dependiendo del directorio de trabajo actual en
el que te encuentres.

Supongamos que estás en /home/nombredeusuario/Documentos y deseas ir a Fotos,

un subdirectorio de Documentos. Para hacerlo, simplemente escribe el siguiente
comando: cd Fotos.

Otro escenario es si deseas ir a un directorio completamente nuevo, por ejemplo,

/home/nombredeusuario/Películas. En este caso, debes escribir cd seguido de la ruta
absoluta del directorio: cd /home/ nombredeusuario/Películas.
3. cd (change directory)

Hay algunos atajos para ayudarte a navegar rápidamente:

cd .. (con dos puntos) para ir un directorio hacia arriba/atrás

cd para ir directamente a la carpeta de inicio
cd- (con un guión) para ir al directorio anterior
4. ls (list)

El comando ls se usa para ver el contenido de un directorio. Por defecto, este comando
mostrará el contenido de tu directorio de trabajo actual.

Si deseas ver el contenido de otros directorios, escribe ls y luego la ruta del directorio. Por
ejemplo, ingresa ls/home/nombredeusuario/Documentos para ver el contenido de
Documentos.

Hay variaciones que puedes usar con el comando ls:

ls -R también listará todos los archivos en los subdirectorios (tip - movies)

ls -a mostrará los archivos ocultos
ls -al listará los archivos y directorios con información detallada como los permisos,
el tamaño, el propietario, etc.
5. cp (copy)

Usa el comando cp para copiar archivos del directorio actual a un directorio

diferente. Por ejemplo, el comando cp [Link]
/home/nombredeusuario/Imágenes crearía una copia de [Link] (desde tu
directorio actual) en el directorio de Imágenes.

Si quieres una carpeta completa tienes que usar el parámetro -r

ejemplo: cp -r /carpeta
6. mv (move)

El uso principal del comando mv es mover archivos, aunque también se puede usar para
cambiar el nombre de los archivos.

Los argumentos en mv son similares al comando cp. Debes escribir mv, el nombre del
archivo y el directorio destino.
Por ejemplo: mv [Link] /home/nombredeusuario/Documentos.

Para cambiar el nombre de los archivos, el comando de Linux es:

mv [Link] [Link]

También puedes usar la opción -f para sobrescribir cualquier archivo con el mismo nombre
que ya exista en la carpeta de destino:
mv -f [Link] nueva_carpeta
7. mkdir (Make Directory)

Usa el comando mkdir para crear un nuevo directorio: si escribes mkdir Música,
creará un directorio llamado Música.
8. rmdir (Remove Directory)

Si necesitas eliminar un directorio, usa el comando rmdir. Sin embargo,

Nota: rmdir solo te permite eliminar directorios vacíos.

9. rm (Remove)

El comando rm se usa para eliminar directorios y el contenido dentro de ellos. Si

solo deseas eliminar el directorio, como alternativa a rmdir, usa rm -r.

Nota: Ten mucho cuidado con este comando y verifica en qué directorio te
encuentras. Este comando elimina todo y no se puede deshacer.
10. touch (Tocar / Crear)

El comando touch te permite crear un nuevo archivo en blanco a través de la línea

de comando de Linux.
Por ejemplo, ingresa touch home/nombredeusuario/Documentos/[Link] para
crear un archivo HTML titulado Web en el directorio Documentos.
11. sudo

Abreviatura de «SuperUser Do» (SuperUsuario hace), este comando te permite

realizar tareas que requieren permisos administrativos o raíz. Sin embargo, no es
aconsejable usar este comando para el uso diario, ya que podría ser fácil que
ocurra un error si haces algo mal.

Nota: cmder no puede emular todos los comandos de linux en windows y sudo
usualmente es uno de ellos
12. df (Disk Free)

Usa el comando df para obtener un informe sobre el espacio libre en el disco del
sistema, que se muestra en porcentaje y KB. Si deseas ver el informe en
megabytes, escribe df -m.
también puedes usar df -h
13. du (Disk Use)

Si deseas verificar cuánto espacio ocupa un archivo o un directorio (Carpeta),

el comando du (Uso del disco, en inglés) es la respuesta. Sin embargo, el resumen
de uso del disco mostrará números de bloque de disco en lugar del formato de
tamaño habitual. Si deseas verlo en bytes, kilobytes y megabytes, agrega el
argumento -h a la línea de comando.
14. history

Cuando hayas estado utilizando Linux durante un cierto período de tiempo, notarás
rápidamente que puedes ejecutar cientos de comandos todos los días. Como tal,
ejecutar el comando history es particularmente útil si deseas revisar los comandos
que ingresaste anteriormente.
15. Ejercicios extras

- Crea una carpeta en tu escritorio llamada “Proyecto Terminal”, en esta crea

los siguiente archivos: “[Link]”, la carpeta “estilos”, dentro de la carpeta
estilos crea el archivo “[Link]”.
- Crea una copia de la carpeta realizada en el ejercicio anterior con todos sus
archivos en la carpeta “Mis documentos”
- Crea un archivo llamado “[Link]”, e ingresa manualmente un texto en este (A
tu preferencia). Investiga cómo poder ver el contenido de este archivo de
texto en la terminal
- Muestra el contenido de tu carpeta de “Mis documentos” en forma de árbol
(Investiga el comando “tree”
- Elimina la carpeta creada en el segundo ejercicio con todos sus archivos
Módulo VII

Github
1. Github

GitHub es una forja para alojar proyectos utilizando el sistema de control de

versiones Git. Se utiliza principalmente para la creación de código fuente de
programas de ordenador. El software que opera GitHub fue escrito en Ruby on
Rails. Desde enero de 2010, GitHub opera bajo el nombre de GitHub, Inc.
2. Git

Git es un software de control de versiones diseñado por Linus Torvalds, pensando

en la eficiencia, la confiabilidad y compatibilidad del mantenimiento de versiones
de aplicaciones cuando estas tienen un gran número de archivos de código fuente.

[Link]
3. GitHub Desktop

GitHub Desktop es una herramienta que ejecuta los comandos de GIT por ti de
forma fácil. Y te permite comunicar con la nube de GitHub
4. Repositorio

Un repositorio es un espacio centralizado donde se almacena, organiza, mantiene

y difunde información digital, habitualmente archivos informáticos, que pueden
contener trabajos científicos, conjuntos de datos o software.
5. git Init

git init es un comando que se utiliza una sola vez durante la configuración inicial de
un repositorio nuevo. Al ejecutar este comando, se creará un nuevo subdirectorio .
git en tu directorio de trabajo actual. También se creará una nueva rama principal.
6. git publish

Este comando publica tu repositorio en la página de GitHub

7. Git commit

El comando git commit guardará todos los cambios hechos en la zona de montaje
o área de preparación (staging area), junto con una breve descripción del usuario,
en un "commit" al repositorio local.
8. Git push

git push se suele usar para publicar y cargar cambios locales a un repositorio
central (en la nube) después de modificar el repositorio local, se ejecuta un
comando push para compartir las modificaciones con miembros remotos del
equipo.
9. Git pull

git pull es un comando de Git utilizado para actualizar la versión local de un

repositorio desde otro remoto.
10. Git clone

git clone se utiliza principalmente para apuntar a un repositorio existente y clonar o

copiar dicho repositorio en un nuevo directorio, en otra ubicación.
11. Crear una rama

La rama se crea directamente en el repositorio de github

12. Crear un pull request

El pull request puede ser generado desde github una vez creada una rama para
posteriormente ser denegada o hacer merge
13. Merge

La fusión es la forma que tiene Git de volver a unir un historial bifurcado. El

comando git merge permite tomar las líneas independientes de desarrollo creadas
por git branch e integrarlas en una sola rama.
14. Fork

Un fork (en español, "bifurcación") es una copia de un repositorio que se crea bajo
la cuenta de otro usuario. Es decir, una instancia de un repositorio original, pero sin
dejar de mantener un vínculo con éste.

Cuando haces un fork de un repositorio, obtienes una copia idéntica del repositorio
original en tu propia cuenta de GitHub, que puedes modificar y trabajar de manera
independiente.

Es especialmente útil cuando quieres contribuir al desarrollo de un proyecto pero

no tienes permiso para hacer cambios directamente en el repositorio original.
15. Git Ignore

El archivo especial .gitignore le indica a Git qué archivos o carpetas no deben ser
incluidos en un repositorio mediante patrones de nombres que Git debe ignorar al
realizar seguimiento de los cambios en un repositorio.

Notaras que cuando creas un repositorio, es común tener ciertos archivos o

carpetas que no se deben versionar, como archivos de configuración, archivos
temporales, registros y archivos binarios, entre otros, es aquí donde se utiliza un
archivo .gitignore.
16. Convenciones

Las convenciones son reglas o pautas que se suelen seguir en la plataforma para hacer que el trabajo en
proyectos de código sea más eficiente y [Link] de estas convenciones son:

- Usar una estructura de carpetas clara y lógica para organizar el código.

- Usar un archivo [Link] en la raíz del repositorio para proporcionar información general sobre el
proyecto y cómo utilizarlo.

- Usar etiquetas (tags) para marcar versiones estables del código y hacer referencia a ellas en el archivo
[Link].

- Usar ramas (branches) para separar el desarrollo en curso del código estable. Por ejemplo, se suele
usar una rama master para el código estable y ramas develop o feature para el desarrollo en curso.
- Usar solicitudes de pull (pull requests) para revisar y aprobar los cambios antes de que se integren al
código estable.
- Usar un archivo .gitignore para excluir archivos que no se deben incluir en el control de versiones (como
archivos binarios o archivos de configuración local).
- Usar un archivo LICENSE para especificar los términos de uso y distribución del código.
17. Ejercicios extras

- Crear un repositorio privado que contenga un [Link] y un [Link] e

invitar al profesor como colaborador.
- Investigar sobre el archivo .gitignore, crear un nuevo archivo llamado
[Link] e ignorar todos los archivos js para futuras actualizaciones.
- Crear una nueva rama prueba agregando un archivo [Link] y hacer un pull
request
- Aceptar el pull request anterior
- Investigar como crear un conflicto en tu propio proyecto y arreglar el conflicto
Módulo VIII

HTML
1. HTML

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de

Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es
decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje
de Formato de Documentos para Hipertexto.
2. Etiquetas

Las etiquetas HTML son pequeños bloques de código, que indican al navegador
cómo debe interpretar el contenido recogido entre dichas etiquetas. Por ejemplo, si
queremos «pintar» un párrafo de texto, hay una etiqueta específica para que el
navegador interprete ese texto como un párrafo.
3. Sintaxis de HTML

<p> Prueba </p>

<p>: Etiqueta de apertura, lo que se encuentra entre el signo de menor y mayor es

el nombre de la etiqueta

Prueba: Contenido de la etiqueta (En este caso es simplemente un texto que dice
Prueba), el contenido de una etiqueta siempre va entre su etiqueta de apertura y
etiqueta de cierre

</p>: Etiqueta de cierre, indica donde finaliza la etiqueta. Siempre lleva un / antes
del nombre

Nota: la etiqueta <p> </p> es la etiqueta utilizada para imprimir párrafos

4. Etiquetas auto-conclusivas

Ejemplo: <img />

Esta es una etiqueta auto conclusiva, debido a que como que puedes se conforma
de una sola etiqueta. Solo hay un par de etiquetas que son autoconclusivas. Y el
motivo de esto es porque son etiquetas que no contienen información.

En este ejemplo es una etiqueta de imagen. Una imagen no suele contener

información dentro. Solo sirve para mostrar una imagen.
5. Atributos o propiedades

Ejemplo: <img src=”[Link]” />

En este caso la etiqueta HTML tiene una propiedad o también llamado atributo.
Esta sirve para agregar una funcionalidad o brindar más información.

En este ejemplo estamos utilizando el atributo “src”, que en caso de la etiqueta

imagen sirve para hacer referencia a un recurso (Imagen en este caso)
6. Etiquetas HTML

Existe una gran variedad de etiquetas HTML, por lo cual puedes utilizar la
siguiente documentación para tener una referencia de todas las etiquetas HTML
disponibles.

[Link]
7. Estructura de una página web
7. Estructura de una página web

<!DOCTYPE html>
Esta etiqueta es única, y su función es decirle a los navegadores que este es un
documento HTML
<html lang="en">
Esta etiqueta contiene todo el HTML interior de la página, contiene una propiedad
lang para definir el lenguaje de la página.
<head>
La etiqueta head se utiliza para contener información no visible directamente en el
contenido de la página, como el título de la página.
<title>Document</title>
Esta etiqueta define el título de una página.
<body>
Contiene el contenido de la página web.
8. Etiquetas importantes

<p>, <img/>,<h1>, <h2>, <h3>, <button>,

<a>, <ol>, <li>, <ul>, <iframe>,
<br>, <input>, <span>, <div>

Etiquetas de HTML semántico:

<main>, <form>, <nav>, <footer>,
<aside>, <section>, <header>, <article>
9. Ejercicios extras

1) Realiza la estructura base de una página web coloca el título de la página como como
‘Prueba’ y con en h1 dentro del body escribe tu nombre.
2) Agrega una imagen de internet de 500px de ancho debajo del título que muestre
“Imagen no encontrada” al colocar mal la ruta.
3) Crear una carpeta llamada “Imagenes”, guardar una imagen de 300px de ancho y
añadirla a la página
4) Crea una lista organizada debajo de la imagen. Que contenga tres pasos:
1. Estudiar HTML, 2. Practicar HTML, 3. Repetir.
5) Agregar un párrafo con un Lorem Ipsum redirija a Youtube
6) Agregar 5 saltos de línea y luego coloca otro párrafo con un Lorem Ipsum
7) Añade un botón que diga “Presioname” que te lleve a Google en una nueva pestaña
8) Añade un input de texto que muestre el texto “Usuario” y otro de contraseña que
muestre el texto “Password”
9) Crea un formulario que solicite: Nombre de usuario, contraseña, email,fecha de
nacimiento, dirección, país.
Módulo IX

CSS
1. CSS

CSS es un mecanismo complementario del lenguaje HTML que permite indicarle al

navegador el estilo visual que debe darle a los distintos elementos al desplegar la
información de un sitio web.

CSS significa: Cascade Style Sheets, que se traduce al español como “Hojas de
Estilo en Cascada”.

Documentación: w3schools
2. Cómo aplicar CSS

1. El CSS puede ser agregado a una etiqueta HTML utilizando la propiedad

style.
Ejemplo: <p style=”color:red;”>Esta es una prueba</p>

2. El CSS puede ser agregado también dentro de la etiqueta style.

Ejemplo: <style> p{color:red;} </style>

3. El CSS también puede ser agregado dentro de un archivo CSS. Para esto
primeramente debemos crear un archivo con extensión CSS ejemplo:
[Link].
Una vez creado se debe llamar al archivo CSS dentro del archivo HTML a
través de la siguiente etiqueta: <link rel="stylesheet" href="[Link]">
3. Sintaxis de CSS

p {
color: red;
}
- “p”, este es el primer elemento en el ejemplo. Y este es un selector. Es decir,
estamos nombrando al elemento al cual le queremos agregar estilos. (Un
párrafo)

- { }, luego de colocar un selector tenemos que colocar la apertura y cierre de

llaves para dentro de estas indicar los estilos que queremos darle al selector

- color: red, color es una propiedad, esta modifica el color del texto. Una vez
colocada una propiedad debemos colocar dos puntos, para luego indicar un
valor, en este caso es rojo (red). Es importante destacar que una vez
terminemos de colocar un valor, se debe terminar con punto y coma.
4. Tipos de selectores en CSS

1. Etiquetas HTML: son las etiquetas disponibles en HTML, para seleccionarlas solo
tenemos que nombrarlas como en el ejemplo anteriormente mostrado.

2. Selector de ID: El ID es una propiedad que podemos agregar a un elemento HTML, para
hacerlo único y poder seleccionar únicamente a ese elemento. Para seleccionar un ID
se debe hacer con un numeral.
Ejemplo:
En HTML: <p id="prueba"> hola </p>
En CSS: #prueba

3. Selector de clases: la clase es una propiedad que podemos agregar un elemento HTML,
para asignarlo a un grupo de elementos. Para seleccionar una clase se debe hacer con
un punto.
Ejemplo:
En HTML: <p class="prueba"> hola </p>
En CSS: .prueba
5. Propiedades básicas

Existe una gran variedad de propiedades CSS, algunas son más utilizadas que
otras.
Por aquí dejo la lista de todas las propiedades CSS que existen.

[Link]
6. Algunas propiedades de CSS

A continuación se enlistan los puntos de CSS que veremos en este curso

- color (color de letra)

- background-color
- comentarios
- Cómo manejar colores (Hexadecimal, rgb, rgba, nombre)
- width (ancho)
- height (alto)
- background-image
- text-align
- font-size
- font-weight
- font-family
- font-style
6. Algunas propiedades de CSS
- overflow
- unidades de medidas
- pseudo clases
- margin
- pseudo elementos
- padding
- transiciones
- border (border-width, border-style, border-color)
- transformaciones
- variables
- animaciones
- display
- responsive
- flex (flex-direction)
- justify-content, align-items
- gap
- grid (grid-template-columns, grid-template-rows)
PROYECTO
8. Responsive

El término responsive hace alusión a un elemento adaptable

9. Ejercicios extras

- Crear 4 columnas en donde cada una contenga una imagen que ocupe el
100% del ancho de su respectiva columna.
- Volver responsive el paso anterior
- Crear 5 botones redondeados y azules en línea que cuando el mouse esté
sobre de alguno, el botón cambie su color de fondo a naranja.
- Crea una clase que haga los textos rojos, y un id que haga los textos bold y
aplicarlas sobre un H1
- Agregar el color de fondo beige de forma hexadecimal a la etiqueta body
Módulo X

Lógica de programación
1. Algoritmos

Un algoritmo es un conjunto de pasos que se siguen para resolver un problema o

para realizar una tarea en particular. Se trata de una especie de receta o
instrucciones que deben seguirse de forma precisa y en el orden indicado para
obtener un resultado esperado.
1. Algoritmos
2. Diagrama de flujo de datos (DFD)

Un diagrama de flujo es una representación gráfica de un algoritmo o proceso.

Se trata de una herramienta muy útil para explicar de manera clara y sencilla cómo

funciona algo o cómo deben seguirse ciertos pasos para llegar a un resultado
determinado.

Descarga: [Link]
o
[Link]
3. Lenguajes de programación

Es un lenguaje formal que, mediante una serie de instrucciones, le permite a un

programador escribir un conjunto de órdenes, acciones consecutivas, datos y
algoritmos para, de esa forma, crear programas que controlen el comportamiento
físico y lógico de una máquina.

[Link]

[Link]
[Link]
4. Pensamiento abstracto

El pensamiento abstracto o pensamiento formal consiste en la capacidad para

pensar de forma independiente a la realidad que se nos muestra de forma
concreta. Permite al ser humano pensar en diferentes escenarios y posibilidades
entre los que, por supuesto, también se encuentra la realidad concreta.
En pocas palabras pensar en más allá de lo que percibimos, esto significa, pensar
en lo que es, en lo que no es… y en lo que podría ser.

Ej: Al ver un gato negro podríamos ponernos a pensar sobre los distintos tipos de
gatos que hay, sobre felinos en general, o sobre por qué la gente es supersticiosa.

[Link]
5. Proceso de realización de un software
5. Proceso de realización de un software
Módulo XI

Pre-Procesadores
1. Pre-procesadores

Un preprocesador es una herramienta que se utiliza para modificar o "preprocesar"

el código fuente de un programa antes de que éste sea compilado. Los
preprocesadores suelen utilizarse para añadir funcionalidades a un lenguaje de
programación, para facilitar la escritura de código o para realizar tareas de
configuración y personalización.

Un ejemplo de preprocesador es el que se utiliza en el lenguaje CSS (SASS).

Este preprocesador permite a los desarrolladores trabajar de manera más rápida y
eficiente, y con menor esfuerzo.
2. SASS

Sass (Syntactically Awesome StyleSheets) es un preprocesador CSS.

Un preprocesador CSS es una herramienta que nos permite generar, de manera

automática, hojas de estilo, añadiendoles características que no tiene CSS, y que
son propias de los lenguajes de programación, como pueden ser variables,
funciones, selectores anidados, herencia, etcétera.

Los archivos tienen terminación .scss o .sass

3. Ventajas de SASS

- Reduce el tiempo para crear y mantener el CSS.

- Permite tener una organización modular de los estilos, lo cual es vital para
proyectos grandes.
- Proporciona estructuras avanzadas propias de los lenguajes de
programación, como variables, listas, funciones y estructuras de control.
- Permite generar distintos tipos de salida, comprimida, normal o minimizada,
trabajando tanto en desarrollo como en producción, además se hace una
forma muy fácil.
- Permite vigilar los ficheros, de tal manera que, si ha habido un cambio en la
hoja de estilos, se regenera automáticamente (modo watch).
- Existen muchas herramientas asociadas, muchas librerías hechas con Sass y
una comunidad muy importante de usuarios.
4. Documentación de SASS

Documentación oficial: [Link]

5. Instalar SASS

Debes ejecutar en la terminal el siguiente comando:

- npm install -g sass

Si tienes linux o macOS entonces ejecuta lo siguiente:

- sudo npm install -g sass

Nota: este comando puedes ejecutarlo desde cualquier carpeta.

npm: Node Package Manager (Gestor de paquetes de Node)

install: Instalar
-g: parámetro para indicar una instalación global
sass: nombre del paquete a instalar
5. Instalar SASS

Para verificar si está instalado SASS utiliza el siguiente comando:

sass --version

Deberías ver algo similar a este texto:

1.57.1 compiled with dart2js 2.18.6

6. Puntos importantes de SASS

- Sintaxis
- Como cambia SASS el código y porque es diferente a CSS
- $Variables
- Comentarios
- @mixin (con o sin parámetro)
- BEM (Block, Element, Modifier)
- @extend
- @each
- funciones
- @import (Modularización)
Módulo XII

Librerías
7. Qué son las librerías

Una librería es uno o varios archivos escritos en un lenguaje de programación

determinado, que proporcionan diversas funcionalidades.

Pero estas funcionalidades siempre cumplen con un solo objetivo, ej: realizar
operaciones matemáticas complejas, crear una interfaz, realizar animaciones,
estilizar.
8. Qué son los frameworks

Un framework es un esquema o marco de trabajo que ofrece una estructura base

para elaborar un proyecto con objetivos específicos, una especie de plantilla que
sirve como punto de partida para la organización y desarrollo de software.
8. Bootstrap

Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código

abierto para diseño de sitios web y aplicaciones web. Contiene plantillas de diseño
con tipografía, formularios, botones, cuadros, menús de navegación y otros
elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript
adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo
front-end.
8. Bootstrap

Documentación oficial:

[Link]
9. Tailwind

Tailwind CSS es un framework CSS que permite un desarrollo ágil, basado en

clases de utilidad que se pueden aplicar con facilidad en el código HTML y unos
flujos de desarrollo que permiten optimizar mucho el peso del código CSS.
9. Tailwind

Documentación oficial:
[Link]
10. Puntos importantes de Tailwind

- Cómo usar Tailwind con CDN

- Cómo utilizar Tailwind
Otras Librerías

AOS

[Link]

CSShake
9. Ejercicios extras

- Crea una copia de la página principal de Amazon

- Crea tu propia página web que represente tu portafolio
(Te recomiendo buscar referencias de portafolios que han hecho otras
personas)
- Crea una copia de Google
- Realiza un Blog
- Realiza una página empresarial que aplique efecto parallax y animaciones

(Todas estas páginas tienen que ser responsive)

Módulo XIII

JavaScript
1. ¿Qué es Javascript?

JavaScript (abreviado comúnmente JS) es un lenguaje de programación

interpretado, es un dialecto del estándar ECMAScript. Se define como orientado a
objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
2. JavaScript en palabras sencillas

JavaScript es un lenguaje de programación para el FrontEnd, los navegadores

entienden JavaScript cómo entienden en CSS y HTML, pero este sirve para
brindar una interacción más profunda con los elementos HTML.
3. Documentación de javascript

Javascript tiene un contenido bastante extenso. Utilizar documentación de

internet siempre resulta útil para aprender todo lo que ofrece un lenguaje de
programación o recordar cosas.

[Link]
4. ¿Cómo escribir JS?

Este se puede implementar de tres maneras.

La primera es a través de la etiqueta <script></script> dentro de ella podemos

escribir javascript. Intenta escribiendo dentro lo siguiente:
[Link]('prueba');
5. ¿Cómo escribir JS?

Otra forma de escribir javascript es a través de propiedades en las etiquetas de

HTML, sin embargo. Estas serán explicadas más a profundidad más adelante.
6. ¿Cómo escribir JS?

La última forma es escribir javascript dentro de un archivo con extensión .js,

ejemplo: [Link]

Una vez creamos el archivo tenemos que llamarlo en nuestro archivo HTML con la
siguiente etiqueta:

<script src="[Link]"></script>
7. Variables

Una variable no es más que un dato guardado en un espacio reservado en la

memoría RAM. Este dato puede ser un mensaje, un número, un proceso, una
función o literalmente cualquier cosa.

En javascript existen tres tipos de variables: variables locales, globales y

constantes.
8. Variables globales

Las variables globales se pueden utilizar en todo el archivo y su valor siempre

queda guardado en la memoria ram mientras el programa se esté ejecutando.

Para declarar una variable global solo tienes que utilizar la palabra “var” luego
darle un nombre a la variable como en el ejemplo: “variableGlobal” y luego
asignarle (con el signo de igualdad ) un valor.
9. Variables locales

Las variables locales solo se pueden utilizar al nivel de sección de código donde
se haya definido (scope). Y una vez que las variables terminan su propósito, esta
es borrada de la memoria RAM aligerando los recursos consumidos por el
programa.

Para declarar una variable local hay que utilizar la palabra “let”, seguido del
nombre de la variable y le asignamos un valor.
10. Constantes

Las constantes funcionan de la misma forma que una variable local, pero con la
particularidad de que una vez le asignamos un valor, este no puede ser
modificado.
Un valor constante en la vida real podría ser el número PI.
11. Imprimir un mensaje en consola

Puedes imprimir un mensaje, una variable o varias variables utilizando

[Link]()
A continuación un ejemplo:
12. Tipos de datos

string, array, numero (int, float), bool, objeto, undefined, null

 13. Puntos importantes de js
Sección 1 Sección 2
- Cómo escribir JS - Función sin parámetros
- Tipos de datos - Función con parámetros
- Variables - Recursividad
- Tipos de variables - Métodos de strings
- Comentarios - Arrays
- Operadores comparativos - Métodos de array
- Operadores aritméticos (Que es iterar, length, push, unshift, pop, shift, slice)
- Operadores de asignación - Objetos
- Operadores lógicos - Funciones Constructoras
- Condicionales - Loops (for, for in, for of, while)
- PRÁCTICA - PRÁCTICA
 13. Puntos importantes de js

Sección 3 Sección 4
- ES6 (.map, arrow functions) - Try-Catch
- DOM - Funciones asíncronas (setInterval, setTimeout)
- Selectores (id, className, tagName) - Asincronismo (Callbacks, Promesas, Async-Await)
- Eventos - JSON
- Clases - Fetch / Axios
- Regex (Expresiones regulares) - PROYECTO
- PRÁCTICA
14. Ejercicios extras

1) Crea un reloj digital que de la hora, minuto y segundo actual de tu pc.

2) Crea un juego de tres en raya.
3) Crea un personaje (imagen) que se mueva en la dirección que presiones en
las teclas direccionales.
4) Realiza una función que cada segundo imprima un mensaje en consola que
diga hola.
5) Realiza un botón que al presionarlo haga aparecer una ventana en la mitad
de la pantalla que diga hola y que tenga un botón para cerrarla.
6) Realiza una barra de navegación funcional de forma responsive.
Módulo XIV

Servidores locales
1. Servidores locales

Un servidor web local es aquel servidor instalado en un equipo determinado con el

fin de trabajar offline y online. Es una alternativa especialmente útil si lo que
buscamos es un entorno en el que desarrollar un sitio web o una aplicación y que
nos permita realizar todo tipo de pruebas sin correr riesgos.
2. Algunos servidores locales

- XAMPP:
[Link]
- MAMP:
[Link]
- WampServer:
[Link]
Módulo XV

WordPress
1. WordPress

WordPress es un sistema de gestión de contenidos web (CMS o content

management system), que en pocas palabras es un sistema para publicar
contenido en la web de forma sencilla. Tan común es ya, que es el líder absoluto a
nivel mundial para la creación de webs desde hace muchísimos años.
2. Ventajas de usar WordPress

- NO REQUIERE CONOCIMIENTO PREVIO en programación

- Código abierto
- Gratuito
- Fácil instalación
- Sencilla configuración inicial
- Fácil instalación de Temas
- Facilidad en su administración
- Mejora tu Posicionamiento SEO
- Migración de hosting fácil
- Compatible con SSL, lo que permite manejar el protocolo HTTPS
3. Desventajas de usar WordPress

- Demasiado consumo de recursos

- Baja velocidad
- Es el CMS más atacado
- Plugins inestables
- Avanza muy rápido
4. Puntos importantes de Wordpress
- Descarga
- Configuración inicial (Creación de base de datos y configuracion basica del sitio)
- Instalación
- Panel de administración
- Plugins
- Qué son los temas, y los tipos de temas que puede haber
- Qué son los plugins que tipos de plugins puede haber
- Instalar el tema Astra
- Utilizacion de elementor
- Configuración de un formulario
- Crear Menús
- Configuración de un sitio web e-commerce (Woocommerce)
- Editor de plugins
- Editor de temas
- Problemas de editar estos
5. Descarga de WordPress

- link: [Link]
6. Instalación de WordPress

- 1er paso: Instalar xampp

- 2do paso: ejecutar los servicios de apache y mysql en XAMPP
- 3er paso: crear una base de datos de [Link] (Una vez
ingreses, le das a new, colocas un nombre y le das a crear)
- 4to paso: ir a C://xampp/htdocs y borrar todo lo que se encuentre allí (esto
solo se realiza la primera vez).
- 5to paso: dejar la carpeta de tu proyecto wordpress en la carpeta htdocs
- 6to paso: entrar en el navegador y colocar “localhost/(nombre de tu carpeta)”
- 7mo paso: Cuando wordpress te pida los datos de tu base de datos, en el
usuario colocar “root” y la contrase;a dejarla vacía
- 8vo paso: Comenzar con el desarrollo
7. Secciones del panel de administración

- Escritorio: este es básicamente un dashboard con información resumida

- Entradas: En esta parte puedes manejar los blogs de tu sitio
- Medios: Banco de imágenes/videos del sitio
- Páginas: Te permite manejar todas las páginas de tu sitio web
- Comentarios: te permite regular todos los comentarios de tu sitio web
- Apariencia: permite gestionar los temas (visuales) del sitio
- Plugins: permite gestionar las funcionalidades de tu sitio (extensiones)
- Usuarios: Permite visualizar y gestionar todos los usuarios de tu sitio web
- Herramientas: herramientas básicas que ofrece wordpress
- Ajustes: configuraciones básicas de wordpress
8. Hosting gratuito para Wordpress

A continuación, se presentan dos opciones gratuitas para que puedas realizar

pruebas con una página web wordpress online:

[Link]
[Link]
9. Ejercicios extras

- Desarrolla un sitio multi-idioma

- Desarrolla un sitio web e-commerce multi-moneda
- Crea un tema para wordpress (sencillo)
- Crea una landing page que tenga una carga totalmente optimizada (Lazy
Load, Imágenes optimizadas, cache)
- Crea un plugin
- Crea el SEO de una página
- Protege los formularios de una página de contacto
Módulo XVI

Optimización web
1. La optimización web

La optimización web ha ido ganando terreno en los últimos años, tanto es así que
se ha creado una disciplina dentro del mundo online llamada WPO, ‘Web
Performance Optimization‘. Esta disciplina consiste en hacer llegar las webs al
usuario en el menor tiempo posible, dentro de un margen razonable.

La optimización web comprende todas aquellas técnicas y tecnologías que se

pueden emplear en cada una de las partes que intervienen en la web, con el
objetivo de optimizar dichos procesos y obtener la mejor velocidad posible de
carga.
2. Imágenes

JPG, PNG, GIF:

[Link]

WEBP:
[Link]

SVG:
[Link]

Optimización de imágenes:
[Link]
2. Imágenes

Herramienta para comprimir:

[Link]
3. Minificar archivos

En Ciencias de la Computación, la minificación es el proceso de eliminar

elementos innecesarios y reescribir el código para reducir el tamaño del archivo.
Se hace comúnmente para página web, recursos como HTML, CSS y JavaScript.
La reducción del tamaño de los recursos web permite que los archivos se
transfieran más rápidamente, haciendo que las páginas web se carguen más
rápido.

Herramientas para minificar:

[Link]

Herramienta para revertir minificado:

[Link]
4. CDN

Una red de distribución de contenido (CDN) es un grupo de servidores repartidos

en distintas zonas geográficas que aceleran la entrega del contenido web al
acercarlo a los usuarios. Los centros de datos de todo el mundo utilizan el
almacenamiento en caché, un proceso que almacena temporalmente copias de
archivos, de modo que pueda acceder al contenido de Internet con un dispositivo o
navegador web de forma más rápida a través de un servidor cercano. Las CDN
almacenan en caché contenido, como sitios web, imágenes y vídeos, en
servidores proxy cerca de su ubicación física. Esto le permite ver una película,
descargar software, revisar el saldo de su cuenta bancaria, publicar en redes
sociales o comprar artículos sin tener que esperar a que se cargue el contenido.
4. Algunos CDN

Cloudflare: es una empresa que ofrece servicios de seguridad y rendimiento en

línea para sitios web y aplicaciones. Su plataforma proporciona una variedad de
servicios, incluyendo la protección contra ataques DDoS, la optimización del
rendimiento del sitio web, el equilibrio de carga y administración de DNS.
[Link]

ImgBB: es un servicio gratuito de alojamiento y carga de imágenes en línea.

[Link]
5. Cache

En informática, la memoria caché, es un componente que guarda datos para que

las solicitudes futuras de esos datos se puedan atender con mayor rapidez; los
datos almacenados en una caché pueden ser el resultado de un cálculo anterior o
una copia de datos almacenados en otro lugar.
Existe con la finalidad de dar velocidad de acceso. Se produce un acierto de caché
cuando los datos solicitados existen en esta, mientras que un fallo de caché ocurre
cuando no están dichos datos. La lectura de la caché es más rápida que volver a
calcular un resultado o leer desde un almacén de datos más lento; por lo tanto,
cuantas más solicitudes se puedan atender desde la memoria caché, más rápido
funcionará el sistema.

[Link]
6. Optimización de código

La optimización de código se refiere a la práctica de mejorar el rendimiento y la

eficiencia de un sitio web o aplicación mediante la escritura de código más
eficiente y la optimización de los recursos utilizados.
7. Plugins para aplicar esto en Wordpress

Existen muchos plugins para optimizar el rendimiento de tu sitio WordPress

uno de ellos es:

- wp-optimize
7. Cómo aplicar esto en código

- Agregando loading=”lazy” a las imágenes y videos en el html

- Optimizando las imágenes (comprimir y trabajar con formatos modernos
como SVG o WEBP)
- Aplicando cache
- Utilizando CDNs
- Utilizar tamaño de imágenes adecuados para el espacio donde se mostrarán
7. Herramientas para medir el rendimiento

[Link]

[Link]
Módulo XVII

SEO
1. SEO

El SEO (siglas de Search Engine Optimization, que significa optimización de los

motores de búsqueda) son todas las técnicas o acciones destinadas a aumentar el
tráfico de una web gracias a mejorar su posicionamiento en los diferentes
buscadores.
2. Como crear SEO

Realmente el SEO no es más que metadatos recolectados por los buscadores, es

decir. Simplemente información. El seo se coloca en las etiquetas de HTML
3. Etiquetas importantes en el SEO

En si la etiqueta más relevante para hacer seo podría ser la etiqueta <meta/> que
es utilizada para contener metadatos como las descripciones del sitio web o si
debe ser indexado o no a los buscadores.

[Link]
mportantes-y-su-funcion/
4. HTML semántico

Sin embargo, los metadatos no es lo único que los buscadores evalúan. Hay
motivos por los cuales nuestro HTML, CSS y JS son públicos. Y es que estos son
analizados en los buscadores, para obtener mejores resultados en SEO es
importante utilizar HTML semántico.

Es decir, usar las etiquetas de forma correcta, etiquetas como <nav></nav>

<footer></footer> <aside></aside> <section></section> puede que sean poco
utilizadas, pero debemos utilizarla y utilizar cada etiqueta cuando corresponde.
existe una etiqueta para cada cosa en HTML, y debemos utilizar adecuadas.

Además es importante acotar que siempre es positivo tener en cuenta las prácticas
de usabilidad.
5. Marcado de esquemas

Schema Markup es un vocabulario semántico que se puede agregar al HTML de tu

sitio. Ayuda a los principales motores de búsqueda (Google, Yahoo, Bing) a
comprender y resaltar la información detallada del contenido de un sitio web.
Puede soportar eficazmente el rendimiento de los motores de búsqueda, ya que
tiene como objetivo ayudarnos a rastrear e indexar mejor los sitios web.

[Link]

[Link]
6. Plugins para aplicar esto en Wordpress

- Yoast SEO
6. Cómo aplicar esto al código

- Usar las etiqueta META

- Utilizar la etiqueta title
- Utilizar esquemas
- Utilizar la propiedad ALT en tus imágenes
6. Ejercicios extras

- Realiza una página web con una shema de recipe

- Realiza una página con un schema de review
- Realiza un SEO simple para una página web (Título, descripción,autor,
copyright que concuerden con el contenido de la página)
Módulo XVIII

Seguridad informática
1. ¿Qué es la seguridad informática?

Es cualquier medida que impida la ejecución de operaciones no autorizadas sobre

un sistema o red informática cuyos efectos puedan conllevar daños sobre la
información, equipo o software
2. ¿Por qué debemos proteger los sistemas?

Las razones son simples, las fallas en nuestros sistemas pueden causar:

- Caída de servicios
- Robo de datos
- Modificación malintencionada de información
- Estafas
3. ¿Cuáles son los elementos más inseguros?

En una página web o aplicación web los elementos más vulnerables son los
siguientes:

- Imágenes
- Cualquier lugar donde el usuario pueda enviar información a nuestro servidor
- Nuestros paneles de administración
- Los servidores en sí
- La propia interacción humana
4. ¿Cómo evitar las fallas de seguridad?

Ten en cuenta que los ciber delincuentes son como ladrones.

El mejor robo es aquel que nadie sabe qué ocurrió.

Puede llegar a ser difícil detectar las fallas en tus sistemas, pero solo uno es
suficiente para hacer mucho daño. Sin embargo, dependiendo del tamaño de tu
proyecto trata de tomar en cuenta lo siguiente:

- Siempre válida cualquier lugar donde el usuario pueda interactuar con tu

backend y cualquier dato.
- Cuidado con el hotlink
- Validación de roles y permisos
6. Plugins para aplicar esto en Wordpress

- WPS Hide Login (ocultar pagina de login)

- Advanced Google reCAPTCHA (Defensa contra los bots)
- All In One WP Security (Seguridad general de Wordpress)
4. ¿Cómo evitar las fallas de seguridad?

- Validar rutas de tu proyecto

- No acceder a paneles de administración o servidor desde una pc que utilices
para entrar en páginas inseguras
- Utiliza herramientas de seguridad (Si quieres ser súper cuidadoso), antivirus,
VPN, Proxy o navegadores como Tor.
Módulo XIX

Encontrando trabajo
1. Introducción

Probablemente buscas cambiar de trabajo, obtener más clientes, o quizás te

encuentres en búsqueda de tu primer trabajo. Sea cual sea la razón, en este curso
se tocarán puntos de como conseguir trabajo en una empresa, freelancer y una
base para el emprendimiento.

Por otra parte, entiende que los participantes pueden ser de distintas áreas de
trabajo, desde desarrolladores (programadores), diseñadores, mercadólogos,
abogados y hasta estudiantes. Toma de este curso lo que veas más útil para ti.
2. Trabajar en una empresa

Cuando pensamos en trabajo, muchas personas piensan en una empresa. Por eso
este es el primer punto del curso, y aunque es innegable que la industria de la
tecnología produce una gran cantidad de trabajos. Según tu área puede haber
ciertas ventajas y desventajas, también puede ser más o menos la facilidad para
encontrar trabajo.

Pero ten en cuenta lo siguiente: No te preocupes si no encuentras trabajo a la

primera, realmente es cosa de perseverancia y mostrar cuánto vales.

Nota: Tu trabajo, tu tiempo y tu conocimiento vale. Que las empresas no te escojan

a ti, tu escoge a la empresa y no tengas miedo al cambio.
2. Trabajo en startups (Empresas pequeñas)

Una startup es una organización humana con gran capacidad de cambio, que
desarrolla productos o servicios de gran innovación, altamente deseados o
requeridos por el mercado, donde su diseño y comercialización están orientados
completamente al cliente.
Esta estructura suele operar con costos mínimos, pero obtiene ganancias que
crecen exponencialmente, mantiene una comunicación continua y abierta con los
clientes, y se orienta a la masificación de las ventas.

Si escoges bien puedes ganar poco y a la vez mucho.

Como puedes suponer, estas empresas pagan poco debido a que son empresas
nuevas pero que pueden tener un retorno de inversión agresivo si las cosas se
hacen bien.
2. Trabajo en startups (Empresas pequeñas)

Sin embargo, pagar poco no quiere decir que debes regalar tu trabajo, ten eso en
claro. Usualmente aunque en estas empresas puedes ganar poco
monetariamente, son en las que más experiencia y roles puedes ganar.

Sé cuidadoso al elegir participar en una startup, entiende que no todas triunfan, y

que el componente humano lo es todo en una empresa.
3. Empresas grandes

Son empresas totalmente establecidas en su área, con reconocimiento y mejores

remuneraciones. Sin embargo, los requisitos pueden llegar a ser altos y muy
específicos. Y es que las empresas grandes no buscan gente que sepa mucho de
muchas cosas, sino que buscan la especialización, alguien que sepa mucho de
algo en especifico. Además, es muy común que los procesos de selección de
empresas grandes puedan ser mucho más largos, desde pruebas de selección,
entrevistas, además de experiencia comprobable.

Las empresas grandes pueden pagar mejor, pero aprenderás menos que en una
empresa pequeña, debido a que solo te centraras en una cosa en específico.
4. Medios de reclutamiento en una empresa

Las empresas pueden variar mucho sus formas de captación de personal.

Se aconseja investigar las empresas, buscandolas en redes sociales y haciendo
networking para saber cual de las siguientes maneras utilizan:

- Solo contratar por Networking (Debes ser recomendado para trabajar en la

empresa)
- A través de reclutadores
- Por medio de páginas web dedicadas al reclutamiento (LinkedIn)
- Por redes sociales (Instagram, Twitter)
- Contactando directamente a la empresa
5. CV (Curriculum Vitae)

Es un documento que resume la educación, experiencia laboral, habilidades y logros de

una persona con el fin de proporcionar al empleador una visión general de un candidato
para determinar si es adecuado para un trabajo en particular.

Tienes que ver el CV como una carta de presentación, y estás pueden ir en dos tipos, las
tipo “wow” y las tipo estándar, y ambos están bien puesto que hay empresas en donde
debes dejar tu CV con un formato específico, esto pasa especialmente en empresas
Europeas y Estadounidenses.

Trata de ser realmente relevante con esta carta de presentación. Coloca lo qué más
destaque de tus experiencias y es importante que sea relevante para el puesto al que
aplicas.
Por ejemplo, si aplicas para un trabajo sobre diseño gráfico o desarrollo de software, no
pongas tu experiencia en repostería, esto no es relevante para estos puestos.
Cabe destacar que aunque el CV es una herramienta estándar, hay algunas que generan
mucho más impacto, y las veremos a continuación…
6. Portafolio

Este es un elemento muy importante, independientemente si eres freelancer o

buscas trabajo en una empresa.

Un portafolio es básicamente una colección de las cosas que hayas hecho o

proyectos en los que has trabajado. Sí cuentas con un portafolio te podrás
posicionar muy fácilmente por encima de todas las personas que no tengan uno.

¿Dónde o cómo realizar un portafolio?, realmente es algo que puede variar

demasiado dependiendo de qué formas te quieras vender a ti mismo.
7. No todo es técnico

Hoy en día las empresas más modernas entienden que hay algo más importante
que las habilidades técnicas y son las habilidades blandas.

Las empresas prefieren contratar a personas que tengan una buena capacidad de
resolución de problemas, honestidad, imaginación, responsabilidad antes que a
una persona que conozca todo lo técnico.

Esto debido a que lo técnico es relativamente fácil de aprender, pero cosas como
las mencionadas anteriormente no se pueden aprender tan fácil en un curso.
8. Trabajo freelance

Freelance es un anglicismo usado comúnmente para designar un trabajo

independiente, autónomo o por cuenta propia.

El trabajo de freelancer presenta diversas ventajas y desventajas.

Al ser independiente puedes disfrutar de algunos beneficios, como poner tus
propios horarios, ser tu propio jefe, incluso llegar a ganar más que en una
empresa, pero esto por un lado, la otra cara de la moneda que también es una
realidad del trabajador freelancer es que tendrás que estar en la búsqueda
constante de trabajo, lo que significa inestabilidad, además serás quien esté a
cargo de todas las facturaciones y cobros sobre el proyecto realizado. Sin
embargo, los beneficios podrían llegar a ser mucho mayores que trabajando en
una empresa para muchas personas, todo depende de las preferencias y
prioridades de cada individuo.
9. ¿Cómo comenzar como freelancer?

La forma más natural para comenzar como freelancer es a través de familiares,

amigos o conocidos que requieren de nuestros servicios.

Sin embargo, una vez queremos profundizar y vivir de trabajos freelancer tenemos
que expandir nuestro alcance utilizando todo medio posible para atrapar trabajos.

A continuación veremos algunas páginas web para trabajar como freelancer y la

realidad de utilizarlas.
10. Páginas web para freelancers

Existen múltiples páginas web para obtener trabajo, sin embargo para su
utilización hay que tener ciertos puntos claros:

- Estas páginas retendrán el dinero que cobres por cada trabajo y solo lo
liberaran pasado un tiempo, si el cliente confirma el trabajo hecho o tras
acumular cierta cantidad.
- Se quedarán con un % del trabajo.
- En un inicio puede ser difícil conseguir los primeros trabajos.
- Puede haber una gran competencia, de hecho para cada trabajo tendrás que
competir con una gran cantidad de personas.
11. [Link]

[Link] o [Link] es la plataforma de freelancers más grande del

mundo, por lo cual hay una gran competencia pero también muchos trabajos.
Link: [Link]
12. Fiverr

Página israeli que también está muy bien posicionada a nivel internacional y
cuenta con una gran comunidad hispano y anglo parlantes, es un mercado de
subcontratación de servicios freelance en línea. La plataforma permite a los
empleadores conectarse con trabajadores independientes y de una amplia gama
de industrias en todo el mundo.

Link: [Link]
14. Nota

Es importante acotar que no sirve de mucho simplemente estar registrado en estas

páginas, es necesario ser proactivo y estar en constante búsqueda de trabajo.

Si quieres ver más páginas para freelance haz click aqui.

15. Redes sociales

Todos utilizamos redes sociales, pero si eres freelancer o simplemente quieres

darte a conocer, deberías empezar a utilizarlas como una herramienta de
promoción. Y no se trata de ser un nuevo “influencer”, simplemente de mostrarle al
mundo tu trabajo o lo que te apasiona.

Son una herramienta verdaderamente poderosa y promocionar tu trabajo puede

ser de gran ayuda y muy fácil de hacer.
16. ¿Qué red social utilizar?

Esto dependerá del tipo de trabajo que realizas. ¿Diseño gráfico? ¡Instagram y
dribble! son buenas opciones, pero la respuesta es un poco relativa. Piensa a qué
clase de gente quieres llamar la atención. Por ejemplo, la gente de Ecuador
probablemente utiliza más facebook que otras redes sociales, pero en España
probablemente sea WhatsApp la más utilizada.

Una vez que tengas claro a qué países y medios quieres llamar la atención, solo te
queda mostrarle al mundo lo que haces. Esto se dice fácil, pero la verdad requiere
de mucha constancia.
17. Herramientas para redes sociales

Esta sección está para ayudar un poco a las personas que de repente tienen poco
o nada de conocimientos sobre cómo crear contenido y facilitar al menos un poco
esta tarea.

Diseño:
Canva (Imagen), InShot (Video)

Organización:
Google slides
18. Campañas publicitarias

Esta es una herramienta que todos disponemos hoy en día pues todas las redes
sociales tienen servicios de promoción de fácil adquisición y manejo. Puedes
invertir desde pequeñas a grandes cantidades de dinero y obtener resultados muy
positivos según el área de interés y forma de promocionar.

Fuera de instagram, facebook, twitter, linkedin y otras redes sociales también hay
servicios de promoción en Google o Youtube, que según el público y método
configurado puede brindarnos resultados más acertados.
19. Networking

El networking es sin duda la herramienta más importante de todas debido a que

esta te puede traer muchos beneficios. Y te preguntarás ¿Qué es el networking?
pues en resumidas palabras es tu red de contactos, por eso siempre que tengas la
oportunidad de conocer personas, tomala. Nunca conoces las suficientes, y
siempre puedes conocer a alguien interesante con el cual compartir intereses.
20. Emprendimiento

Ser freelancer es ciertamente “emprender”, sin embargo llamamos emprendimiento

a formalizar un negocio legalmente y tener personas contratadas. Este es un punto
que puedes tener en cuenta para expandir tus fronteras una vez tengas un tiempo
acumulando experiencia. Y debo recalcar el punto de tiempo y la experiencia.

La gran mayoría de los emprendimientos fracasan. Se recomienda empezar

realizando algo personal como freelancer y una vez que tengas una cartera de
clientes, experiencia y una producción de recursos constante, entonces formaliza
un emprendimiento.
20. ¿Cuánto puedo cobrar por mi trabajo?

Al ser freelancer, probablemente esta es la pregunta que más te harás al conseguir

tu primera cotización. Y realmente no es una pregunta simple, pues depende de
muchos factores. Pero desde la experiencia puedo decirte que… ¡Todo es relativo!.
No importa cual sea el trabajo que tengas que hacer, siempre habrá personas que
por lo mismo que harás cobrarán más o menos.

Para determinar cuánto cobrar por un trabajo te recomiendo realizar los siguientes
pasos…
21. ¿Cuánto puedo cobrar por mi trabajo?

1. Evaluar costos de otras empresas o personas alrededor del mundo (para

tener una idea)
2. Tener en claro ¿Para quién estoy haciendo el trabajo?, No es lo mismo
realizar un trabajo para un vecino humilde que para una mega corporación.
Incluso aunque el trabajo pueda ser el mismo, hasta la exposición tiene un
precio.
3. Preguntarte ¿Cuánto vale tu tiempo?
4. Tener en mente tus costes operativos, es decir ¿Cuanto vale el
mantenimiento de tus herramientas de trabajo? y ¿Cuánto cuestan los
servicios asociados a tu trabajo?, etc.
5. Entrar en el contexto adecuado: No es lo mismo realizar un trabajo para
alguien de Venezuela que para alguien de Hong Kong (Las economías muy
son diferentes).
22. Nota

Una vez determines el precio para el trabajo por experiencia, muchas cosas
podrían ocurrir. Confía en lo que determinaste. Sí, habrá más gente que lo podrá
hacer más barato e incluso gente que cobrará más. Pero ten confianza en ti mismo
y estudia más cada día, volverte mejor en lo que haces te dará más posibilidades
de encontrar buenas ofertas o trabajos.
23. Consejo extra

Siempre antes de dar algún precio, asegúrate de que realmente estás evaluando
todo lo que el trabajo involucra.
 Módulo XX

Deploy de un proyecto a un servidor

1. Deploy

La palabra deploy proviene del inglés y significa desplegar o lanzar en español y

en términos de desarrollo de software se conoce como deploy a la actividad de
llevar tu código a producción .

Te preguntarás ¿Qué es producción?, y es poner la aplicación, sistema o servicio a

funcionar en un ambiente real, de cara a usuarios reales.

Es la fase final de cualquier proceso de desarrollo.

2. Puede ser distinto

Cabe destacar que aunque aquí aprenderás una base sobre como hacer deploy de
algunas aplicaciones, puede ocurrir que ciertas tecnologías requieren de pasos
extras o servicios especializados.
3. Dominio

Es algo que ya hemos definido anteriormente, pero supongamos que compras un

dominio ¿Y ahora qué? bueno, ese punto será solventado aquí.

Una vez adquirido el dominio necesitamos realizar una configuración de los DNS
(Domain name system), esto lo harás en el sitio donde compraste el dominio. Y lo
que haremos es que el dominio apunte a una IP (Y esta IP será la de nuestro
servidor). Aquí tienes un ejemplo:
3. Dominio

A continuación se define cada uno de los elementos que conforma la imagen:

El “tipo” este hace referencia al tipo de registro, estos sirven para agregar
información sobre el dominio, subdominio, servidor de correos y otras
configuración. Aquí puedes leer más sobre cada tipo de registro:
[Link]
3. Dominio

Nombre, en este caso, hablando de un registro tipo A, este se utiliza para

determinar el dominio o subdominio. En este ejemplo se utiliza “@” para apuntar al
dominio principal. Ejemplo: [Link]

Si se colocara “email” entonces este funcionaria

como un subdominio, Ejemplo: [Link]
3. Dominio

Datos, esta es la IP del servidor.

3 Dominio

El TTL o Tiempo de vida (Time to live) es un mecanismo que se usa para limitar la
duración de la información que circula por la red. Esto evita que la información se
mueva indefinidamente por Internet, favoreciendo la privacidad y el rendimiento.
4. Hosting

El alojamiento web es el servicio que provee a los usuarios de Internet un espacio

de almacenamiento en línea, también conocido como webspace, que permite
publicar todo el contenido relacionado con un sitio web.​

En resumidas palabras, es donde se guarda un sitio web.

5. Tipos de hosting

- Compartido: servicio que contiene múltiples sitios web alojados en un solo

servidor compartiendo recursos.
- VPS: Servidor virtualizado con recursos dedicados y aislados para mayor
flexibilidad y control.
- Completo: Servidor físico dedicado para una sola cuenta con control total y
recursos dedicados.
- En la nube: El alojamiento en la nube se refiere a la entrega de servicios de
alojamiento web en una red de servidores distribuidos y conectados a través
de Internet. En lugar de alojar su sitio web en un único servidor físico, el
alojamiento en la nube permite que los recursos de varios servidores se
combinen para proporcionar una mayor flexibilidad, confiabilidad y
escalabilidad (Capacidad de un sistema para manejar y adaptarse a un
aumento o disminución en la demanda o carga de trabajo).
6. Tipos de hosting con los que se consigue trabajo

- Azure (Microsoft)
- AWS (Amazon)

Azure y AWS son plataformas de servicios en la nube que ofrecen una amplia
gama de servicios de alojamiento, almacenamiento, computación y otros servicios
relacionados en la nube. Estas plataformas se enmarcan en la categoría de
proveedores de servicios de infraestructura en la nube.
7. Cómo acceder a un servidor

- SSH: Secure Shield (SSH) es un protocolo que garantiza que tanto el cliente
como el servidor remoto intercambien informaciones de manera segura y
dinámica. El proceso es capaz de encriptar los archivos enviados al directorio
del servidor, garantizando que las alteraciones y el envío de datos sean
realizados de la mejor forma.
- FTPS: En esencia, FTPS (FTP sobre SSL) es un protocolo seguro de
transferencia de archivos que le permite conectarse de forma segura con sus
socios de Negocio, clientes y usuarios.
- Panel de control: Interfaz instalado en el servidor para interactuar con el
servidor
7. Cómo acceder a un servidor

- SSH: Para acceder por este medio una terminal funciona.

- FTPS: Un software como Filezilla funciona para esto.

- Panel de control: Se accede a través del propio navegador (C-Panel)

8. Deploy de aplicaciones

- Cada destacar que todos los servidores suelen tener una carpeta en donde
se encuentran todos los archivos públicos de un cierto dominio, usualmente
esa carpeta suele ser llamada public_html, aunque que quizás puede que
tenga un nombre distinto
Módulo XXI

Manejo de facturación
1. Facturación

Es el proceso para realizar un cobro. Muchas personas sin experiencia tienen

problemas para realizar procesos de facturación, de hecho. No tienen en claro
cómo hacerlo.

Así que aquí se te dejará distintas recomendaciones

2. Cosas a tomar en cuenta

Si te pidieran una cotización para realizar una página web, debes tener en claro
todos los elementos por los cuales cobraras. Pues, no puedes simplemente decir
una cantidad de dinero por un trabajo que se define como “Realizar una página
web”. Algunos de estos elementos son:

- Compra del dominio y hosting

- Configuración del dominio
- Configuración del servidor
- Instalación de wordpress (En caso de que sea wordpress)
- Realización del front-end (visualización)
- Realización del SEO (Posicionamiento en buscadores)
2. Cosas a tomar en cuenta

- Realización de la seguridad del sistema

- Optimización de imágenes y recursos para mejorar el rendimiento
- Agregación de elementos específicos como: Chat, Formularios, Multi-idioma
- Configuración de correos empresariales
- Resumen de información (Mejora de redacción)
- Cantidad de páginas (Ejemplo: inicio, nosotros, productos, servicios, carrito)
- Creación de Google Business (Esto es un elemento opcional para locales
físicos)
- Agregación de certificado SSL (Página segura)
- Retoque fotográfico para las fotos de la página web
3. Preguntas

Para poder cotizar un proyecto, necesitas tener en claro todo lo que harás. Pero
además, entender que tú eres el profesional en el área, el cliente muchas veces
puede que no sepa lo que quiere o lo que necesite, y que cosas conllevan hacer
ese trabajo. Aquí te dejo algunas preguntas que es importante que realices para
poder brindar una mejor cotización

- ¿Qué tipo de página web quiere? Puede ser: empresarial (página web
estándar), e-commerce (tienda en línea), blog, etc
- ¿Cual es su objetivo principal con la página web?
- ¿Cuáles son sus objetivos secundarios?
- ¿Cuáles son las referencias para su sitio web?
3. Preguntas

- ¿Su página web tendrá login/register?

- ¿Cuales son los roles que tendra su sitio web? (Ejemplo: Administrador,
usuario, editor de blog, etc)

Y realizar tantas preguntas como sean necesarias

4. En caso de errores

En caso de que no realices las preguntas necesarias y envíes un presupuesto,

puede llegar a ocurrir que el cliente presupone que harás alguna cosa que nunca
se comunicó de forma explícita.

Esto solo puede llevar a la incomodidad de alguna de las dos partes. O comunicas
que lo que él expresa no se incluyó en el presupuesto y que realizar esa tarea
costaría más dinero o decides realizarlo sin cobrar por ello.
5. Cómo presentar una cotización

Muchas personas pueden llegar a ser algo liberales o informales sobre esto,
enviando por ejemplo: la cotización por whatsapp. Esto es una muy mala práctica,
debido a que la cotización es algo que especifica todo lo que harás y te respalda
en el caso de cualquier mal entendido, por ello. Aunque si puedes enviar la
cotización por esa vía, se recomienda siempre enviarla por correo también.

Recuerda que tu teléfono siempre se puede extraviar o dañar. Dando como

resultado la posible pérdida de esta información.

Además recuerda dar los detalles de TODO lo que harás, para de esa forma
justificar el precio de tu trabajo, pues algunas personas pueden pensar:
5. Cómo presentar una cotización

“Hacer ese trabajo es fácil y rápido” o pensar de forma muy simplificada sobre tu
trabajo.

También intenta presentar la cotización lo más formal que se pueda, a

continuación te dejo algunas imagenes de cotizaciones reales:
Módulo XXII

Mejoramiento de Perfil (GitHub)

¿Por qué mejorar el perfil de GitHub?

GitHub es la plataforma de repositorios más grande del mundo, múltiples

empresas internacionales de software alojan sus proyectos aquí, y sus
reclutadores periódicamente buscan nuevos talentos para sumar a sus equipos de
trabajo, debido a esto es importante mejorar tu perfil para incrementar la
posibilidad de encontrar una buena oferta.
¿Cómo mejorar el perfil?

Para mejorar el perfil de GitHub puedes agregar un archivo [Link] que

contendrá información detallada sobre ti, como tus conocimientos y habilidades,
herramientas manejadas, estudios realizados, proyectos elaborados, estadísticas
de lenguajes manejados entre otras cosas.
¿Cómo agregar un [Link] al perfil?

Para añadir un archivo [Link] puedes seguir los siguientes pasos:

● Enlazar un correo principal: Agrega un correo principal y colócalo público.

● Personalizar el perfil: Dirígete a settings (Ajustes) y modifica la información
básica, Agrega una buena foto personal, una breve biografía, información de
contacto, ubicación, y redes sociales.
● Crear un repositorio: Crea un nuevo repositorio (en GitHub Web) con el
mismo nombre de usuario, este repositorio debe inicializarse con un
[Link] y debe ser público.
Nota: Cuando hagas esto aparecerá un mensaje diciendo: “Descubriste un
secreto, el repositorio nombreDeUsuario es un repositorio especial”.
¿Cómo editar un archivo [Link]?

Para editar este archivo sigue estos pasos:

● Markup language o HTML: Puedes editar un archivo readme utilizando

“Markup language” o HTML. (si no estás familiarizado con Markup Lang.
puedes usar HTML)

● Utiliza Herramientas de edición de textos online: Puedes agregar textos

animados mediante el uso de diferentes herramientas, una de ella es:
Readme Typing SVG, puedes ver más información sobre esta herramienta en
su documentación.
¿Cómo editar un archivo [Link]?

Agrega Estadísticas: Puedes agregar estadísticas para mostrar los lenguajes

más usados, estas estadísticas son totalmente personalizables, haz clic en el
vínculo para ver la configuración de colores.
¿Cómo editar un archivo [Link]?

Agrega imágenes: Puedes agregar imágenes sobre tus proyectos y dar una
reseña sobre lo que es y los lenguajes y herramientas empleados para el
desarrollo del mismo.

Nota: Si deseas crear una cuadrícula con estos elementos puedes usar la etiqueta
<table> para definir la cuadrícula, <tr> para las filas y <td> para las columnas de la
cuadrícula en la fila insertada.
¿Cómo editar un archivo [Link]?

Añade botones personalizados: Para hacer más atractivo tu perfil utiliza imagen
personalizadas para tus botones, también puedes usar un generador de botones
personalizados como [Link]

NOTA: Al ser un documento .md las propiedades de CSS son nulas, es por eso
que se toman ciertos atajos para la organización y estilizado de este documento.
¿Cómo editar un archivo [Link]?

NOTA: Al ser un documento .md las propiedades de CSS son nulas, es por eso
que se toman ciertos atajos para la organización y estilizado de este documento.

● Agrupar elementos: Para agrupar elementos utiliza la etiqueta <p> en lugar

de <div>, ¿Por qué?, por la propiedad align que poseen los elementos de
cadenas de texto, esto te permitirá alinear (left, center, rigth) el contenido en
su interior como lo necesites (imágenes, texto).
● Anclas como botones: Utiliza anclas (<a>) para agregar las imágenes que
desees mostrar como botones, recuerda que al ser un documento .md no se
mostrará un botón como en un documento .html.
Destaca tus repositorios más preciados

Una práctica adicional, pero no menos importante para tener un buen perfil es
destacar los repositorios (proyectos) más elaborados fuera del archivo .md
Módulo XXIII

DevTools
¿Qué son las DevTools?

Las DevTools, o herramientas de desarrollador, son un conjunto de herramientas

integradas en la mayoría de los navegadores web modernos que permiten a los
desarrolladores web analizar y depurar sus aplicaciones web.
¿Cuáles son las DevTools?

Algunas de las DevTools que podemos encontrar en los navegadores son:

•Inspector de elementos: una herramienta que permite a los desarrolladores

inspeccionar/analizar y modificar el código HTML, CSS y JavaScript de una página
web.
¿Cuáles son las DevTools?

•Consola: una herramienta que permite a los desarrolladores ejecutar código

JavaScript en tiempo real y ver los resultados
en la consola, se utiliza comúnmente con la función [Link]() durante el
desarrollo de webs y apps, para ver información en consola.
¿Cuáles son las DevTools?

•Red/Network: Es una herramienta que permite a los desarrolladores ver y

analizar las solicitudes de red que se realizan al cargar una página web, y durante
el tiempo que permanezca abierta, Se puede observar desde el tiempo de carga
hasta los detalles de las solicitudes, se utiliza comúnmente para detectar fallos en
la carga de elementos o durante la optimización de tiempo de carga de una web.
¿Cuáles son las DevTools?

•Fuentes/Sources: Es una herramienta que permite a los desarrolladores ver los

archivos que componen un sitio o página, con la finalidad de depurarlos.
¿Cuáles son las DevTools?

•Rendimiento/Performance: una herramienta que permite a los desarrolladores

medir el rendimiento de su aplicación web y analizar la causa de cualquier retraso,
esta herramienta permite capturar el comportamiento de un sitio durante un tiempo
estimado en el que se realizarán las acciones a evaluar, para luego al finalizar la
captura, obtener un análisis detallado de todo lo ocurrido, de esta manera
podemos detectar el comportamiento de un sitio o aplicación web.
¿Cómo se accede a ellas?

Para abrir las herramientas de desarrollador, normalmente se puede hacer clic con
el botón derecho en cualquier parte de la página y seleccionar "Inspeccionar" o
presionando F12 en el teclado.

Cada herramienta de desarrollador tiene su propia interfaz y conjunto de opciones,

pero en general, la mayoría de las herramientas son fáciles de usar y con un poco
de práctica pueden ayudarte a mejorar significativamente tu flujo de trabajo y
eficiencia.
Módulo XXIV

React JS
1. ¿Qué es ReactJS?

React es una biblioteca Javascript de código abierto diseñada para crear interfaces
de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola
página. Es mantenido por Facebook y la comunidad de software libre.

[Link]
2. Crear una aplicación de react

Puedes crear una aplicación de React con los siguiente comando

npx create-react-app my-app

Este comando creará una aplicación en react por default, una vez creada puedes
acceder a ella y ejecutar de la siguiente manera (en este caso, nuestro proyecto se
llama my-app)

cd my-app
npm run start

Create React App es un ambiente cómodo para aprender React, y es la mejor

manera de comenzar a construir una nueva aplicación de página única usando
React.
3. JSX

Es una tecnología implementada en React, la sintaxis de JavaScript no reconoce

el HTML, pero el jsx nos facilita la escritura de HTML en javascript.
4. Qué son los componentes

Los componentes permiten separar la interfaz de usuario en piezas

independientes, reutilizables y pensar en cada pieza de forma aislada.

Pero dicho de forma más sencilla. Es simplemente una función de JavaScript con
la particularidad de que retorna HTML.
5. Creando un componente

Para crear un componente solo crea un nuevo archivo jsx, en este caso crearemos
un archivo llamado [Link]. Este contendrá una función que retornará un h1 con
un Hola Mundo. Y permitiremos la exportación de este.
5. Creando un componente

Una vez creado el componente, debemos llamarlo en alguna parte. En este caso
importamos el componente Test y lo renderizamos de la siguiente forma en el
archivo [Link]
6. React Router

Biblioteca que nos permitirá el manejo de rutas en nuestro proyectos.

[Link]
7. Hooks

Los Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo
de vida desde componentes de función.

Nota: Los hooks no funcionan dentro de las clases, pero puedes usar React sin
clases.
8. useState()

Nos permite mantener seguimiento del estado de una información en nuestra

función.
Para utilizarlo tenemos que importarlo, y utilizar la sintaxis mostrada. setColor es
una función que nos permitirá cambiar el valor, y color nos permite acceder al valor
guardado.
9. useEffect()

Nos permite realizar efectos secundarios en nuestros componentes.

[Link]
11. useRef()

Este hook permite persistir valores entre renderizaciones.

Puede ser utilizado para guardar un valor que cambiara y no causar una
renderización cuando sea actualizado.

[Link]
12. DOM

[Link]
13. Hooks personalizados

Los hooks en sí son funciones reutilizables. (como los componentes)

Cuando tienes una lógica que necesita ser utilizada varias veces en varios
componentes, podemos crear un hook personalizado.
14. Consumo de una API

Existen varios tipos de API, algunas son bastante sencillas, para utilizar algunas
API necesitas tener permisos para utilizarla ya sea a través de un código o utilizar
la API a través de una IP permitida.

Primero te enseñare como traer datos de una API simple

14. Consumo de una API
const [data, setData] = useState(null); //Creamos una variable

//Utilizamos un useEffect para consumir la API en segundo plano

useEffect(() => {
//Fetch es una función integrada a JS para traer datos de una URL
fetch("[Link] //Esta es una URL de prueba
.then((res) => [Link]()) //Una vez cargada la información, la cargamos como
JSON
.then((data) => setData(data)); //Guardamos la data en la variable DATA

}, []); //Sin dependencias para solo cargar la API una sola vez.

if(data){ [Link](data) } //El if es para ejecutar el código únicamente si la

API trae datos

//Imprimir la data en consola (Felicidades, ya has traido los datos de la API,

están en la variable data
15. Consumo de una API con KEY

Hay ciertas API que para interactuar con ellas necesita tener una KEY, esta es
básicamente una contraseña. A veces para obtener una KEY necesitas pagar o
simplemente registrarte en alguna página. A continuación se te mostrará un
ejemplo de cómo interactuar con una API con Key
15. Consumo de una API con KEY

/*Primeramente crearemos una constante con todas las opciones de conexión a

la API, por ejemplo el método ‘GET’ es para obtener datos. Y los headers
contienen información como el servidor de la api y la KEY, por motivos de
seguridad quite la KEY de la API.*/

const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': 'xxxxx',
'X-RapidAPI-Host': '[Link]'
}
};
15. Consumo de una API con KEY
const [data, setData] = useState(null);

useEffect(() => {
//Ingresamos el URL como primer parámetro y como segunda la constante de
opciones
fetch("link", options)
.then((res) => [Link]())
.then((data) => setData(data));

}, []);

//El if es para ejecutar el código únicamente si la API trae datos

if(data){ [Link](data) }
16. Ejercicios extras

- Realizar el juego de 3 en raya

- Realizar un buscador de tareas
- Realiza un carrito de compra funcional donde puedas agregar productos
- Realiza una calculadora
- Realiza un personaje que se mueva a través del navegador con las teclas de
navegación
- Realiza una pagina con informacion real consumiendo una API
Módulo XXV

Diseño web
1. ¿Qué es el diseño web?

El diseño web implica trabajo relacionado con el layout y diseño de páginas online,
así como la producción de contenido, aunque generalmente se aplica a la creación
de sitios web.
2. Wireframes

Un wireframe, también conocido como un esquema de página o plano de pantalla,

es una guía visual que representa la estructura esquelética de un sitio web. Los
wireframes se crean con el propósito de organizar los elementos para que estos
lleven a cabo mejor su propósito particular.
3. Mockups

Un mockup es un modelo o un prototipo que se utiliza para exhibir o probar un

diseño. El término, que no forma parte del diccionario de la Real Academia
Española (RAE) y procede del inglés mock-up, suele ser desarrollado para conocer
la opinión de usuarios o consumidores
4. Buenas prácticas de diseño

A continuación conseguirás un artículo que habla sobre distintas buenas prácticas

de diseño, que se recomiendan seguir para tener una interfaz de usuario que se
sienta y se vea más profesional.

Estos puntos es importante tenerlos en clase antes de ir a la práctica.

[Link]
5. Cómo funcionan estas herramientas

Estas herramientas suelen estar compuestas en tres etapas o secciones:

- Diseño: esta sección es para que puedas modificar todos los elementos,
formas, colores, tamaños, textos, etc. De cada una de las páginas de tu
diseño

- Prototipado: en esta sección puedes realizar cada una de las conexiones

entre páginas/elementos de tu diseño

- Prueba: Aquí podrás tener la experiencia más cercana a una aplicación, pues
podrás visualizar tu diseño como si fuera una página web/app
5. Cómo funcionan estas herramientas

Las herramientas de diseño UI/UX suelen ser bastante intuitivas y fáciles de usar,
debido a que realmente estas simulan bastante bien lo que podrías hacer en HTML
y CSS, si eres conocedor de estas tecnologías. Será bastante fácil entender todo
lo que puedes hacer en estas herramientas de diseño
6. Figma

Figma es una herramienta de prototipado web y editor de gráficos vectorial, que a

diferencia de las otras herramientas, se aloja en la web.

Además, una de las características que tiene Figma es que, al estar basada en el
navegador, puedes compartir el proyecto con tu equipo y hacer modificaciones en
la misma mesa de trabajo.

Link a figma:

[Link]
7. Ejercicios extras

- Investigar y diseñar alguna animación en figma

- Diseña una barra de navegación en su versión de desktop y mobile, esta

debe tener el logo de alguna empresa, párrafos con las opciones: inicio,
nosotros, contacto. Además de tener un botón de registro. Esta barra debe
contar con animaciones (animaciones al darle click a algún boton,
animaciones al abrir un menú hamburguesa)

- Crear un mock-up (diseño y prototipado) de un sitio web para McDonalds, en

donde se destaquen sus productos y estos puedan ser de fácil adquisición.
Este sitio debe contener las páginas: inicio, menú, carrito de compra,
checkout, página de contacto
Módulo XXVI

TypeScript
1. ¿Qué es TypeScript?

TypeScript es un lenguaje de programación libre y de código abierto desarrollado y

mantenido por Microsoft. Es un superconjunto de JavaScript, que esencialmente
añade tipos estáticos y objetos basados en clases.

Documentación:
[Link]
2. Opiniones sobre TypeScript

TypeScript es básicamente javascript con características agregadas, y similar a un

preprocesador.
3. Instalación de TypeScript

Ejecuta el siguiente comando en la terminal, ubicandote en la carpeta donde

trabajaras para inicializar un proyecto de NodeJs:

npm init -y

luego de ello instala todos los paquetes de Node Js con el siguiente comando:

npm i

luego ejecuta finalmente el siguiente comando para instalar TypeScript

npm i typescript --save-dev

4. Ejecución de TypeScript

Ejecuta el siguiente comando para crear el archivo de configuración de TypeScript:

npx tsc --init

Y finalmente, cuando quieras compilar los archivos TypeScript puedes hacerlo con
el comando:

npx tsc
Módulo XXVI

Python
1. Python

Python es un lenguaje de programación interpretado cuya filosofía hace hincapié

en la legibilidad de su código.​Se trata de un lenguaje de programación
multiparadigma, ya que soporta parcialmente la orientación a objetos,
programación imperativa y, en menor medida, programación funcional.
2. Instalación

Link de descarga: [Link]

3. Documentación de Python

link: [Link]
Puntos importantes

Sección 1 Sección 2
- Comentarios - Scope y Variables
- Tipos de datos - Función sin parámetros
- Operadores comparativos - Función con parámetros
- Operadores aritméticos - Métodos (Strings, Listas, Tuplas, Diccionarios)
- Operadores de asignación - Loops (for, while)
- Operadores lógicos - Clases
- Input y Print - Try-Except
- Concatenación y F-Strings - Manejo de Archivos
- Condicionales - PRÁCTICA
(if,elif,else,ternario,match-case)
- PRÁCTICA
4. Ejercicios extras

- Crea un programa que permita enviarle mensajes al profesor cada 10

segundos diciéndole “Hola, Esto es un mensaje enviado con Python” por
whatsapp
- Crea un programa que permita guardar la información principal de un artículo
de wikipedia en un archivo .txt
- Crea un programa que sirva como un asistente personal en python al cual
puedas darle órdenes desde la terminal
- Crea un formulario validado que pida nombre completo, correo, mensaje y
que esta información sea enviada a tu correo
- Crea un programa que sea capaz de reconocer rostros en python
Módulo XXVII

Base de datos SQL

1. ¿Qué es una base de datos?

Programa capaz de almacenar gran cantidad de datos, relacionados y

estructurados, que pueden ser consultados rápidamente de acuerdo con las
características selectivas que se deseen.
2. SQL

SQL es un lenguaje de computación para trabajar con conjuntos de datos y las

relaciones entre ellos. Los programas de bases de datos relacionales, como
Microsoft Office Access, usan SQL para trabajar con datos.
3. MySQL

MySQL es un sistema de gestión de bases de datos relacionales (RDBMS) de

código abierto respaldado por Oracle y basado en el lenguaje de consulta
estructurado (SQL). MySQL funciona prácticamente en todas las plataformas,
incluyendo Linux, UNIX y Windows. Aunque puede utilizarse en una amplia gama
de aplicaciones, MySQL se asocia más a menudo con las aplicaciones web y la
publicación en línea.
4. Documentación de SQL

link: [Link]
5. Ejercicios extras

1) Realizar un query que traiga datos de 3 tablas distintas al mismo tiempo.

2) Crea dos columnas llamada created_at y updated_at, en donde created_at
contenga el timestamp en el cual se crea un dato. Y updated_at que contenga
el timestamp de la última vez que se actualizo ese elemento.
3) Investiga qué son los triggers y crea uno que actualice una tabla una vez que
insertes un dato en una tabla distinta.
Módulo XXVIII

PHP
1. Qué es PHP

PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de

código abierto muy popular especialmente adecuado para el desarrollo web y que
puede ser incrustado en HTML.
2. Utilizar PHP

El navegador no entiende PHP, este se tiene que correr por parte del server. Para
ello necesitamos que el servidor local ejecute el código PHP
3. Documentación PHP

Link: [Link]
 4. Puntos importantes

Sección 1 Sección 2 Sección 3

- - Funciones sin parámetros - COOKIES

Comentarios
- - Funciones con parámetros - Regex
Variables
- - Loops (for, while, foreach) - Modularización
Tipos de datos
- - Métodos (strings, arrays,) - PROYECTO
Operadores comparativos
- Operadores aritméticos - Asoc. Arrays, Clases y Objetos
- Operadores de asignación - Try-Catch
- Operadores lógicos - Conexión a Base de Datos (MySQL)
- Echo y Concatenación - Crear Tabla
- Condicionales - Métodos HTTP
(if, elseif, else, ternario, switch-case) - Realizar consultas (CRUD)
- PRÁCTICA - Isset
- PRÁCTICA
5. Ejercicios de PHP

1) Realizar un formulario de registro con sus respectivas validaciones. El

formulario guardará:
- Nombre
- País (List con options)
- Correo
- ¿Eres empresa? (Radio button)
- ¿De donde escuchaste de nosotros? (Checkbox)
- Contraseña

Una vez el usuario se registre, debe aparecerte una pantalla en donde pueda
visualizar sus datos
6. Ejercicios de PHP

OPCIONAL:

- Enviar los datos por correo electrónico

- Guardar los datos en un archivo
- Guarda en una base de datos SQL
7. Ejercicios extras

- Crea un formulario que envie datos por correo

- Crea un formulario que guarde datos en la base de datos
- Crea un formulario para actualizar un elemento en la base de datos
- Crea un botón que elimine un elemento de la base de datos
- Crea una pagina que traiga todos los datos de una tabla de la base de datos
Módulo XXIX

Modelo MVC
1. Modelo MVC

Modelo Vista Controlador (MVC) es un estilo de arquitectura de software que

separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en
tres componentes distintos.

Se trata de un modelo muy maduro y que ha demostrado su validez a lo largo de

los años en todo tipo de aplicaciones, y sobre multitud de lenguajes y plataformas
de desarrollo.
1. Modelo MVC

El Modelo contiene una representación de los datos que maneja el sistema, su

lógica de negocio, y sus mecanismos de persistencia.

La vista, o interfaz de usuario, que compone la información que se envía al cliente

y los mecanismos de interacción con éste.

El Controlador, que actúa como intermediario entre el Modelo y la Vista, gestiona el

flujo de información entre ellos y las transformaciones para adaptar los datos a las
necesidades de cada uno.
1. Modelo MVC
Módulo XXX

Laravel
1. Laravel

Laravel es un framework de código abierto para desarrollar aplicaciones y servicios

web con PHP 5, PHP 7 y PHP 8. Su filosofía es desarrollar código PHP de forma
elegante y simple, evitando el "código espagueti". Fue creado en 2011 y tiene una
gran influencia de frameworks como Ruby on Rails, Sinatra y [Link] MVC.
2. Documentación de Laravel

[Link]
3. Cosas que necesitamos para instalar Laravel

Composer:
[Link]
4. Instalar instalador de laravel

Una vez instalado composer, tenemos acceso a instalar paquetes que formen
parte de este gestor de paquetes. Ingresa el siguiente comando para instalar un
instalador de laravel:

composer global require laravel/installer

Una vez instalado puedes hacer uso de este creando tu primer proyecto en Laravel
con el siguiente comando

laravel new (nombre de la aplicación) O laravel new --jet (login/register incluido) (nombre de la
aplicación)

Nota: esto instalará una versión de Laravel óptima para tu PC según la versión de
PHP que tengas instalado.
4. Instalar instalador de laravel

Luego de instalar JetStream, tenemos que instalar todos los paquetes de NODE
necesarios.
Con el comando:
- npm install
o en su versión corta
- npm i

para ejecutar un proyecto de Laravel, necesitamos ejecutar el siguiente comando:

- php artisan serve
5. Estructura de carpetas de laravel

Cabe destacar que cada versión de laravel puede tener una estructura de carpetas
un poco diferente. La destacada a continuación es la versión 9.

[Link]
5. Estructura de carpetas de laravel

- App: Tiene toda la lógica de nuestra aplicación

- Bootstrap: contiene bootstrap y archivos de caché, usualmente no se suele
tocar esta carpeta
- Config: contiene los archivos de configuración de la aplicación
- Database: contiene la estructura y funcionamiento de la base de datos así
como también la estructura de datos falsos
- Node_modules: contiene los paquetes de Node necesarios para que la
aplicación funcione.
- Public: contiene los archivos públicos como Javascript, Imágenes, CSS, y
también el archivo index el cual inicializa toda la aplicación.
- resources: contiene las vistas así como archivos no compilados de css o js en
caso de utilizar un pre-procesador
5. Estructura de carpetas de laravel

- routes: contiene todas las rutas de la aplicación

- storage: contiene archivos de registros de la aplicación así como archivos
blade compilados
- tests: carpeta para realizar unit testing en laravel
- vendor: carpeta que contiene los paquetes de composer para que la
aplicación funcione.
7. archivo .env

El archivo .env es el archivo que contiene las variables de entorno, esto significa
que tiene variables que son de importancia para la aplicación y que quizás
necesitan ser resguardadas en un archivo privado que no se suba a GitHub.

Aquí puedes encontrar por ejemplo, credenciales de la conexión de la base de

datos.
8. controlador de rutas

Laravel tiene un sistema de rutas implementados, estas retornan directamente una

vista a través de una función

Ejemplo de retornar vista

Route::get('/', function () { return view('welcome'); });

9. Migrations

En Laravel nunca tocamos la base de datos directamente, sino que lo hacemos a través
de laravel. De esta forma todos los desarrolladores pueden tener la misma estructura
de base de datos en cualquier momento. Un migration representa a una tabla de la
base de datos (SQL) que es código y puede ser ejecutado para crear la estructura de
base de datos en cualquier pc. Aquí puedes conseguir más documentación al respecto:
[Link]

Para ejecutar las migrations una vez realizadas:

php artisan migrate

Para ejecutar las migrations con los factory:

php artisan migrate –seed

Puedes encontrar las migrations en la carpeta database/migrations

9. Migrations

Aquí puedes encontrar un ejemplo de una migración (tabla) de usuarios:

10. Factory

Un factory es la estructura de datos que creamos con FAKER una librería para
crear datos falsos, una vez creada la estructura podemos ejecutar el archivo
seeder para ejecutar estos.

Puedes conseguir mas informacion aqui:

[Link]

Los factory están ubicados en la carpeta database/factories

10. Factory

Aquí puedes ver un ejemplo de un Factory que funciona para la tabla usuarios,
crea nombres, emails, verificaciones, contraseñas y tokens aleatorios
11. Archivos blade

Blade es un gestor de plantillas que nos permite utilizar HTML con funcionalidades
de un lenguaje de programación con condicionales, switches, loops y más.

Puedes conseguir gran información sobre esta tecnología en la documentación

oficial:
[Link]

Los archivos que utilizan blade siempre tienen la extensión .[Link], estos se
encuentran dentro de la carpeta resources/views
12. Componentes de blade

Un componente es un archivo o bloque de código reutilizable en tu proyecto

La utilización de componentes nos permite tener un código más modular en donde

no repitamos un trabajo que ya realizamos anteriormente.

Blade nos permite crear componentes con el siguiente comando:

php artisan make:component (Nombre)

Estos estarán en la carpeta components dentro resources, para llamar un

componente lo puedes hacer de la siguiente manera:

<x-(nombre) />
13. livewire

Livewire es un framework para Laravel que te permite crear interfaces dinámicas de

forma simple, sin dejar de lado la comodidad de Blade.
Livewire nos permitirá crear componentes, pero a diferencia de los componentes de
blade, los componentes de livewire tendrán una parte lógica en la carpeta app y una
parte visual en la carpeta resources/views

Para crear un componente livewire:

php artisan make:livewire (nombre)
los componentes de Livewire pueden ser llamados de la siguientes forma
<livewire:(nombre)>
Documentacion de livewire: [Link]
13. livewire
13. livewire

Lo que acabas de visualizar es un controlador de un componente livewire el cual

retorno una vista con un conjunto de datos que se traen del modelo de cursos, esto
trae los últimos 9 cursos con la información de cada usuario que los creó
13. livewire
13. livewire

Lo que acabas de visualizar es un componente Livewire que utiliza los datos

enviados por el controlador y que imprime un componente Blade con esos datos
14. Modelos

Los modelos son la base de la interacción entre la base de datos y la aplicación,

así que cada elemento de la base de datos necesita su propio modelo para poder
llamar a los datos.

para crear un modelo puedes utilizar el siguiente comando:

php artisan make:model Video(singular)

Para crear un modelo con un factory y una migration puedes utilizar el siguiente
comando
php artisan make:model Video(singular) -mcf

[Link]
14. Modelos
14. Modelos

Lo que acabas de ver es un modelo el cual contiene funciones para realizar

asociaciones entre tablas y además crea campos virtuales (datos extras
construidos directamente en la aplicación, estos no se encuentran en la base de
datos, sino que suelen ser construidos a partir de estos)
15. Controlador

Los controladores son archivos que mantienen un orden lógico de nuestra

aplicación, estos pueden ser archivos que están entre el medio de la vista y el
modelo, y pueden ser funciones para manejar lógica de la app.
16. Ejercicios extras

- Realiza una aplicación de blogs (donde puedas ver todos los blogsy un blog),
crear 100 blogs falsos
- Crear un formulario donde puedas crear datos.
- Crear un formulario donde puedas actualizar un blog.
- Crea un botón para eliminar un blog.
- Crea un sistema para manejar un inventario de comida
Módulo XXXI

Base de datos NOSQL

1. Base de datos NoSQL

NoSQL se refiere a una base de datos no relacional o no SQL. Una base de datos
relacional es un formato de bases de datos muy estructurado basado en una tabla,
como MySQL u Oracle. Las bases de datos NoSQL están orientadas a los
documentos y le permiten almacenar y recuperar datos en formatos que no sean
tablas. Algunas de las plataformas NoSQL más conocidas son MongoDB,
Elasticsearch® y Redis®.
2. ¿Qué es MongoDB?

MongoDB es una base de datos de documentos que ofrece una gran escalabilidad
y flexibilidad, y un modelo de consultas e indexación avanzado.

Link de descarga: [Link]

Descarga de gestor de base de datos (ROBO3T): [Link]

3. Documentación/ejercicios de MongoDB

link: [Link]
4. Algunos comando a utilizar

db.(colección).find()
db.(colección).insert({nombre:”Juan Rodriguez”, edad: 24})
db.(colección).insertOne({nombre:”Juan Rodriguez”, edad: 24})
db.(colección).insert(variable)
db.(colección).insertMany([{nombre:”Juan Rodriguez”, edad: 24},{nombre:”Juan
Rodriguez”, edad: 24}])

db.(colección).remove({})
db.(colección).remove({‘_id’:ObjectId(“****”)})
db.(colección).remove({‘$or’:[{“nombre”:”juan”},{“nombre”:”carlos”}]})
db.(colección).deleteOne({‘$or’:[{“nombre”:”juan”},{“nombre”:”carlos”}]})
db.(colección).deleteMany({‘$or’:[{“nombre”:”juan”},{“nombre”:”carlos”}]})
db.(colección).deleteMany({‘$and’:[{“nombre”:”juan”},{“ciudad”:”Maracaibo”}]})
4. Algunos comando a utilizar

$lt menor qué

$lte menor igual qué
$gt mayor qué
$gte mayor igual qué
$ne no igual qué
db.(colección).deleteMany({‘$and’:[{“nombre”:”juan”},{“edad”:{$gte:30}}]})

db.(colección).update({‘_id’:ObjectId(“****”)}, {$set:{nombre:”hola”}})
db.(colección).update({‘_id’:ObjectId(“****”)}, {$set:
{fechaDeNacimiento:ISODate(‘1998-05-26’)}})
db.(colección).update({‘_id’:ObjectId(“****”)}, {$unset:{edad:1}})
db.(colección).update({“edad”:{$gte:30}}, {$set:{edad:30}})
db.(colección).update({“edad”:{$gte:30}}, {$set:{edad:30}, {multi:true})
4. Algunos comando a utilizar

db.(colección).update({“sexo”:”f”}, {$set:{bono:30}, {multi:true})

db.(colección).update({$and: [{edad:{$gte:30, $lte:40}}]}, {$set: {extra:5000}},
{multi:true})
db.(colección).find({}).sort({nombre:-1,edad:1})
db.(colección).find({edad:30}, {nombre:-1,edad:1,sexo:1})
db.(colección).find({edad:{$gte:30}},{nombre:-1,edad:1,sexo:1}.sort({edad:1})
db.(colección).find({edad:{$gte:30, $lte:50}})

db.(colección).find({nombre:/^J/i})
db.(colección).find({nombre:/^J$/i})
db.(colección).countDocuments({nombre:/a/i})
db.(colección).find({edad: {$gte:40}}).count()
db.(colección).find({area:{$in:['compras','ventas']},sexo:'F'}).sort({edad:-1}).limit(1)
4. Algunos comando a utilizar

db.(colección).update({‘_id’:ObjectId(“****”)}, {$push:{telefono:'04146012659'}})
db.(colección).update({‘_id’:ObjectId(“****”)},{$push:{deportes:
{'pelota':'futbol','acuaticos':'natacion'}}})
db.(colección).aggregate([{$match:{genero:'F',edad:{$gte:20}}},{$group:
{_id:'$area',total:{$sum:'$salario'}}}])
[Link]('test');
[Link](colección).drop()
[Link]([{
$lookup: {
from: "users",
localField: "edad",
foreignField: "edad",
as: "edades"
}}]);
5. Ejercicios extras

- Crea una colección de de ventas la cual contenga un array llamado factura

con 3 elementos vendidos
- Elimina solo un elemento del array anterior

Algunos ejercicios:
[Link]
Módulo XXXII

NodeJs
1. ¿Qué es NodeJs?

[Link], es un entorno en tiempo de ejecución multiplataforma para la capa del

servidor (en el lado del servidor) basado en JavaScript.

[Link] es un entorno controlado por eventos diseñado para crear aplicaciones

escalables, permitiéndote establecer y gestionar múltiples conexiones al mismo
tiempo. Gracias a esta característica, no tienes que preocuparte con el bloqueo de
procesos, pues no hay bloqueos.

[Link]
2. ¿Quienes utilizan NodeJs?

- Netflix
- PayPal
- Uber
- Linkedin
- Ebay
3. ¿Que necesito para utilizar NodeJs?

- Instalar NodeJs: [Link]

3. ¿Qué es API?

Una API o interfaz de programación de aplicaciones es un conjunto de definiciones

y protocolos que se usan para diseñar e integrar el software de las aplicaciones.
4. Utilización de NodeJs

Para utilizar o iniciar un proyecto en NodeJs primero crea una carpeta y en esta
ejecuta el comando:

npm init -y

una vez realizado esto, crea un archivo [Link] e ir al archivo [Link] y

cambiar “test” por ‘“dev” y ponerle el siguiente valor:

"nodemon [Link]"
4. Utilización de NodeJs

Luego instalar nodemon para poder ejecutar un entorno de desarrollo con el

siguiente comando:

npm i nodemon -D

Instalar express también

npm i express
5. ExpressJs

[Link], o simplemente Express, es un marco de aplicación web de back-end

para [Link], lanzado como software gratuito y de código abierto bajo la licencia
MIT. Está diseñado para crear aplicaciones web y API. Se le ha llamado el marco
de servidor estándar de facto para [Link].
6. API REST: Representational State Transfer

Es una convención que se refiere a servicios web por protocolo HTTP

Métodos:

Get: Obtener
Put: Modificar/Actualizar (Todo un elemento)
Patch: Modificar/Actualizar (Parcialmente un elemento)
Post: Crear
Delete: Eliminar
6. API REST: Representational State Transfer
7. ENDPOINTS

Los endpoints son las URLs de un API o un backend que responden a una
petición. Los mismos entrypoints tienen que calzar con un endpoint para existir.
Algo debe responder para que se renderice un sitio con sentido para el visitante.
8. Iniciar un proyecto de NodeJs

una vez realizado los pasos anteriores crear un archivo [Link], en donde puedes agregar lo
siguiente:

const express = require('express'); //requerir express

const app = express(); //ejecutar express
const port = 3000; //crear un puerto
//mi primera ruta
[Link]('/', (req,res) => {
[Link]('Hola Mundo');
});
//escucho al puerto que cree
[Link](port, () => {
[Link]('Mi port ' + port);
});
8. Iniciar un proyecto de NodeJs

Una vez realizado esto, puedes ejecutar el comando

npm run dev

Una vez tengas creadas algunas rutas para tu proyecto, debemos recordar que
cada archivo debe tener su propia y única funcionalidad. Por ello, crea una carpeta
de “routes” donde trabajes todas las rutas de tus proyectos

La carpeta de rutas solo se debe ocupar de las rutas de tus proyectos, mas no de
su funcionalidad.
8. Iniciar un proyecto de NodeJs

Para la funcionalidad de cada ruta del proyecto debes crear la carpeta “services” y alli
trabajar los servicios de API (La funcionalidades de todas tus rutas y el proyecto).

Formato para iniciar un servicio:

class ProductsService {
constructor(){
///Variables goblales o metodos que deben inicializar al inicio
}

}
[Link] = ProductsService;
8. Iniciar un proyecto de NodeJs

en los servicios es en donde agregamos funcionalidades a cada una de las rutas

como: agregar un elemento, actualizar un elemento, eliminar un elemento,
9. INSOMNIA

Es una aplicación que nos permite realizar pruebas API. Es un cliente HTTP que
nos da la posibilidad de testear 'HTTP requests' a través de una interfaz gráfica de
usuario, por medio de la cual obtendremos diferentes tipos de respuesta que
posteriormente deberán ser validados.

Link de descarga: [Link]

12. CORS

Paquete que sirve para poder manejar una lista de conexiones a nuestra API

instalación:

- npm i cors
13. FAKER

Crear datos falsos

comando para instalar faker: npm i [email protected]

[Link]
14. Ejercicios extras

- Realizar una API CRUD con una ruta que funcione como un buscador
- Realiza una ruta que cree 100 datos falsos
- Crea una ruta que borre toda una colección
- Crea una ruta que traiga datos relacionales de dos colecciones
Módulo XXXIII

Pruebas unitarias con JEST

1. ¿Qué es un test?

Como developers tenemos que garantizar que el codigo escrito cumpla con ciertos
requisitos/expectativas. Esto lo hacemos por medio de una prueba (test).

Esto nos asegura:

● Que nuestro código cumple con los estándares.

● Enviamos a producción sin errores.
2. ¿Qué es el unit testing?

Este consta de probar pequeñas partes de nuestro código asegurándonos así que
cumplen con lo que se desea. (En una página web las pruebas se traducen a
probar cada sección de la página y todas las interacciones en ellas).
3. ¿Qué es JEST?

Framework de JavaScript para realizar unit testing en JavaScript

Documentación:
[Link]

Instalación:
npm install --save-dev jest
4. Utilización de JEST

1 - Crea un proyecto de NodeJs creando una carpeta y ejecutando en esta el

comando “npm init -y”
2 - Instalar JEST como dependencia de desarrollo con el comando “npm i --save-
dev jest”
3 - Crear una carpeta src y un archivo [Link] dentro en donde en esta
oportunidad trabajaremos
4 - Crear una carpeta llamada “__test__” dentro de src, esta carpeta contendra
los archivos de testing de nuestra app
5 - Modificar el archivo [Link], mas especificamente la propiedad test y
colocarle el valor “jest”
5 - Crear un archivo [Link]
5. Haciendo mi primer test

En esta oportunidad tenemos una constante llamada text. Luego ejecutamos la

función test, esta tiene dos parámetros:
1) Un texto indicativo del test
2) Una función anónima en donde evaluaremos una variable.
En este caso evaluamos que el string contenga la palabra ‘Mundo’
6. NOTA

Jest es sumamente fácil de aprender, sin embargo tiene importancia pues las
empresas más grandes exigen que tu código este testeado antes de ser
implementado.
Módulo XXXIV

Gestión de un proyecto de software

1. Gestión

Acción o trámite que, junto con otros, se lleva a cabo para conseguir o resolver
una cosa.
2. Metodología de trabajo

La metodología es una de las etapas específicas de un trabajo o proyecto que

parte de una posición teórica y conduce una selección de técnicas concretas (o
métodos) acerca del procedimiento destinado a la realización de tareas vinculadas
a la investigación, el trabajo o el proyecto.
2. Metodología ágil de trabajo

Estas metodologías ayudan en el desarrollo de proyectos que necesitan mayor

enfoque para adecuarse a las necesidades del cliente.

Es decir, una metodología ágil es una innovadora forma de trabajar y organizar

flujos, que divide los proyectos en partes, permite adaptarse sobre la marcha,
complementa y resuelve etapas en poco tiempo.

Con las metodologías ágiles, no se planifica ni se diseña el proyecto por

adelantado, es decir, a medida que ellas se van desarrollando se va definiendo el
proyecto. Siendo así, los involucrados trabajan por períodos específicos, mientras
que cada miembro del equipo debe ejecutar una serie de tareas.
3. Algunas metodologías de trabajo

- Programación extrema (XP)

- SCRUM
- Kanban
3. Algunas metodologías de trabajo
4. SCRUM

Scrum es un marco que permite el trabajo colaborativo entre equipos. Al igual que
un equipo de rugby (de donde proviene su nombre) cuando entrena para un gran
partido, scrum anima a los equipos a aprender a través de las experiencias, a
auto-organizarse mientras aborda un problema y a reflexionar sobre sus victorias
y derrotas para mejorar continuamente.
5. Roles en SCRUM

- Product owner: Dueño de la idea o proyecto

- SCRUM Master: Conoce la metodología y se encarga de que se cumpla la
metodología
- Equipo: El equipo que ejecuta el proyecto
6. Product owner

Tiene la responsabilidad de decidir qué trabajo necesita hacerse y maximizar el

valor del producto o proyecto que esté llevando a cabo.
7. SCRUM Master

actúa como un líder servicial, ayudando al equipo y a la organización a usar lo

mejor posible la Metodología Scrum, se focaliza en la parte de negocio y es
responsable del ROI del proyecto. Traslada la visión del proyecto al equipo,
formaliza las prestaciones en historias a incorporar en el Product Backlog y las
prioriza de forma regular.
8. Equipo

Grupo de profesionales con los conocimientos técnicos necesarios y que

desarrollan el proyecto de manera conjunta llevando a cabo las historias a las que
se comprometen al inicio de cada sprint. Sprint es una serie de periodos de
tiempos pequeños, cuya duración es de 1 a 4 semanas, con preferencia por los
intervalos más cortos. En cada Sprint, el equipo construye y entrega un incremento
del producto. Cada incremento es un subconjunto del producto, reconocible y
visualmente mejorado, que cumple con el criterio de aceptación y está construido
con un nivel de calidad llamado definición de terminado.
9. Software para ayudarnos a gestionar

Existen una gran variedad de software para distintos fines que nos pueden ayudar
a gestionar mejor las cosas. Los que recomiendo son:

- JIRA
- Trello (Si necesitas algo mucho más simple)
- Slack (Para la comunicación)
- Discord (Para la comunicación)
- Google slides
- Google Drive
10. Consejos importantes para gestionar

Algunos consejos para realizar una mejor gestión:

- Si un proceso no es dependiente de ti, delegalo.

- Conoce a tu equipo.
- Comunicación constante.
- Deja los procesos y reglas tan claros y transparentes a la mano de todos, que
todos puedan seguirlos de forma simple.
- El tiempo es lo más importante, si algo se puede automatizar, hazlo.
- Se un líder, no un jefe.
Módulo XXXV

Desarrollo en otras áreas

1. Desarrollo mobile

El desarrollo de aplicaciones móviles es el conjunto de procesos y procedimientos

involucrados en la escritura de software para dispositivos informáticos pequeños e
inalámbricos, como teléfonos inteligentes y otros dispositivos portátiles.
2. Tecnologías utilizadas

1) Dart
2) Java
3) Kotlin
4) Python
5) Javascript
6) Swift
7) Flutter
3. Desarrollo Desktop

Una app de desktop (también llamada de Escritorio) es aquella que está instalada
en el ordenador del Usuario, que es ejecutada directamente por el sistema
operativo, ya sea Microsoft Windows, Mac OS X, Linux o Solaris, y cuyo
rendimiento depende de diversas configuraciones de hardware como memoria
RAM, disco duro, memoria de video, etc.
4. Tecnologías utilizadas

1) C
2) C++
3) C#
4) Java
5) Swift
5. Desarrollo de videojuegos

El desarrollo de videojuegos es el proceso de creación de un videojuego, desde el

concepto inicial hasta el videojuego en su versión final. Es una actividad
multidisciplinaria, que involucra profesionales de la programación, diseño gráfico,
animación, sonido, música, actuación, etc.
6. Tecnologías utilizadas

1) C++
2) C#
3) Java
4) Javascript
5) Python
7. Desarrollo de sistemas de control

Dentro de la ingeniería de sistemas, un sistema de control es un conjunto de

dispositivos encargados de administrar, ordenar, dirigir o regular el comportamiento
de otro sistema, con el fin de reducir las probabilidades de fallo y obtener los
resultados deseados.
8. Tecnologías utilizadas

Realmente puede ser cualquiera

Módulo XXXVI

Machine Learning
1. ¿Qué es la inteligencia artificial?
La inteligencia artificial (IA) es la capacidad de una computadora o un sistema para
realizar tareas que normalmente requieren inteligencia humana, como aprender,
razonar y entender el lenguaje. En pocas palabras, Inteligencia Artificial es la
capacidad de una máquina para simular la inteligencia humana.
2. ¿Qué es el machine learning?

Machine learning es una técnica de inteligencia artificial que permite a las

computadoras aprender y mejorar automáticamente a partir de datos, sin ser
programadas explícitamente. En resumen Machine Learning es una técnica que
permite a las computadoras aprender automáticamente y mejorar su rendimiento
sin ser programadas de forma específica.

Documentacion:
[Link]
3. En resumen

El machine learning es una técnica de aprendizaje para la computadora basada en

datos y estadísticas.

Estos datos pueden venir en cualquier forma desde arrays o una base de datos
completa

Ejemplo: [99,86,87,88,111,86,103,87,94,78,77,85,86]

De este array podrás sacar cual es el valor más alto, el más pequeño y el
promedio, entre otros datos
4. Promedio (Mean)

El promedio es el valor que se obtiene al sumar todos los números de un conjunto

y dividirlos entre la cantidad de elementos

Dado el siguiente array:

[99,86,87,88,111,86,103,87,94,78,77,85,86]

Calcular promedio:

Para calcular el promedio en estos datos necesitamos sumar todos los datos y
dividirlos por la cantidad de datos

1167/13 = 89.77
4. Promedio, Mediana, Moda

En python se veria asi:

import numpy

speed = [99,86,87,88,111,86,103,87,94,78,77,85,86]

x = [Link](speed)

print(x)
5. Mediana (Median)

La mediana es el valor que se encuentra en la mitad de un conjunto de números

una vez organizados. En caso de que el conjunto de los elementos sea un número
par, los dos números en el medio se suman y se dividen entre dos

Dado el siguiente array:

[99,86,87,88,111,86,103,87,94,78,77,85,86]

Al organizarlo se veria asi:

[77, 78, 85, 86, 86, 86, 87, 87, 88, 94, 99, 103, 111]

La mediana es 87
5. Mediana (Median)

El python se veria asi:

import numpy

speed = [99,86,87,88,111,86,103,87,94,78,77,85,86]

x = [Link](speed)

print(x)
6. La moda (Mode)

La moda es el numero que mas se presenta en un conjunto de números

Utilizaremos el siguiente array para un ejemplo:

[99,86,87,88,111,86,103,87,94,78,77,85,86]

Verificamos la cantidad de números repetidos y notamos lo siguiente:

[99,86,87,88,111,86,103,87,94,78,77,85,86]
6. La moda (Mode)

En python se veria asi:

from scipy import stats

speed = [99,86,87,88,111,86,103,87,94,78,77,85,86]

x = [Link](speed)

print(x)
7. Librerías

Quizás hayas notado que para los ejemplos anteriores en python se utilizaron
librerías, a continuación encontrarás láminas que hablen un poco sobre estas:
8. Numpy

NumPy es una librería de Python que proporciona un objeto de matriz de alto

rendimiento y herramientas para trabajar con ellas. Sirve para realizar operaciones
matemáticas en arreglos multidimensionales de manera eficiente, como por
ejemplo, álgebra lineal, transformaciones de Fourier y generación de números
aleatorios.

También es utilizado como base para otras librerías de cálculo científico en Python,
como SciPy y scikit-learn.
9. SciPy

SciPy es una librería de Python que se basa en NumPy y proporciona una amplia
variedad de algoritmos y herramientas científicas avanzadas. Sirve para hacer
tareas específicas como optimización, integración, interpolación, procesamiento de
señales e imágenes, entre otras.

En resumen, SciPy extiende a NumPy, brindando una amplia variedad de

herramientas y algoritmos para la resolución de problemas científicos y técnicos de
manera eficiente.
10. Desviación estándar

La desviación estándar es un número que nos dice cuánto varían los números en
un conjunto de datos.

Es como una medida de "dispersión" de los números. Si los números son muy
parecidos entre sí, la desviación estándar será pequeña. Si los números son muy
diferentes entre sí, la desviación estándar será grande.

Es una forma de medir cuán "alejados" están los números de un conjunto de datos
entre sí.
11. Desviación estándar

Un ejemplo de esto dado el siguiente array:

[86,87,88,86,87,85,86]

La desviación estándar es: 0.9

Dado el siguiente array: [32,111,138,28,59,77,97]

la desviación estándar es: 37.85

A mayor diferencia entre los números, mayor es la desviación estándar

12. Programación estándar

Usualmente cuando realizamos un software, tenemos unos inputs, creamos una

lógica y eso retorna una salida
13. Ejemplo de programación estándar

Transforma 5 centímetros a pulgadas.

Para realizar este ejercicio necesitamos dividir 5 entre 2.54

5/2.54= 1.96 pulgadas

14. Aprendizaje automático

Cuando hablamos de un software de aprendizaje automático tenemos un software

que tiene unos inputs, y el software, a través de un proceso que desconocemos
retornara output.
15. Ejemplo de aprendizaje automático

Convierte 5 centímetros a pulgadas

Para realizar este ejercicio primero necesitamos suministrar distintas conversiones

para que el software aprenda la relación entre centímetros y pulgadas y de esa
forma pueda deducir una fórmula para realizar el ejercicio.
16. Que es una red neuronal

Una red neuronal es un sistema de computación inspirado en el cerebro

humano. Consta de capas de "neuronas" conectadas entre sí, las cuales
reciben entradas, realizan cálculos matemáticos y producen salidas.

Estas redes son capaces de aprender a partir de ejemplos y realizar tareas

complejas, como el reconocimiento de imágenes o el procesamiento de
lenguaje natural.

Resumen: Una red neuronal es como un sistema de computadora que puede

aprender y hacer cosas complejas. Es como un cerebro artificial.
17. Neurona

Una neurona es una unidad básica de procesamiento en una red neuronal. Cada
neurona recibe entradas de otras neuronas o de los datos de entrada, realiza un
cálculo matemático simple en esas entradas, y luego envía una salida a otras
neuronas o a la capa de salida.
18. Capas de una red neuronal

Una capa es un conjunto de neuronas que están conectadas entre sí y procesan

los datos de entrada. En una red neuronal con múltiples capas, las capas se
encuentran jerárquicamente una sobre la otra. La primera capa se conoce como la
capa de entrada, la última capa se conoce como la capa de salida, y las capas
intermedias se conocen como capas ocultas.
19. Más capas o neuronas

Ambas son importantes en una red neuronal. La cantidad de capas en una red
neuronal se refiere a la profundidad de la red, es decir, cuántas veces los datos se
procesan a través de las capas ocultas antes de llegar a la capa de salida. Una red
neuronal con más capas ocultas puede aprender patrones más complejos en los
datos, pero también puede ser más propensa a sobreajuste.

La cantidad de neuronas en una capa se refiere al número de unidades de

procesamiento en esa capa. Una capa con más neuronas tiene mayor capacidad
para aprender patrones complejos, pero también requiere más datos de
entrenamiento para evitar el sobreajuste.
19. Más capas o neuronas

En general, se recomienda una buena cantidad de capas y neuronas para lograr

un buen rendimiento en una red neuronal. Sin embargo, la elección óptima
dependerá del problema específico que se esté tratando de resolver. La mejor
manera de determinar el número óptimo de capas y neuronas es a través del
experimento y la validación.
20. Peso entre conexiones neuronales

En una red neuronal, el peso de las conexiones se refiere a los valores numéricos
asociados a las conexiones entre las neuronas en la red. Estos valores indican la
importancia o el impacto de cada conexión en la propagación de la información a
través de la red.

Los pesos de las conexiones son uno de los aspectos más importantes de una red
neuronal, ya que tienen un gran impacto en su rendimiento y capacidad para
aprender y generalizar patrones. Los pesos se ajustan durante el proceso de
entrenamiento de la red mediante algoritmos de optimización, como el gradiente
descendente, para minimizar el error entre los resultados esperados y los
resultados reales.
21. Cosas que involucra el peso

Algunas de las cosas que involucran los pesos de las conexiones son:

- La cantidad de información que se transmite a través de una conexión es

proporcional al peso de la conexión.
- Los pesos pueden ser positivos o negativos, lo que significa que pueden
aumentar o disminuir el impacto de una conexión en la propagación de la
información.
- Un peso cero indica que una conexión no tiene ningún impacto en la
propagación de la información.
21. Cosas que involucra el peso

- Los pesos son los parámetros que se ajustan durante el entrenamiento de

una red neuronal para mejorar su rendimiento.
- Los pesos iniciales son esenciales para el proceso de aprendizaje, ya que
pueden afectar significativamente el rendimiento de la red.
22. Librerías para machine learning

Existen varias librerías populares para machine learning en Python, algunas de las
más comunes son:

- scikit-learn: Es una librería de aprendizaje automático de código abierto para

Python que proporciona una amplia variedad de herramientas de aprendizaje
automático, incluyendo clasificación, regresión y clustering.
22. Librerías para machine learning

- TensorFlow: Es una librería de código abierto desarrollada por Google que se

utiliza para la implementación de redes neuronales y deep learning. Es
ampliamente utilizado en investigación y producción.

- Keras: Es una librería de alto nivel para la construcción de redes neuronales

en Python. Es fácil de usar y es compatible con TensorFlow, Microsoft
Cognitive Toolkit (CNTK) y Theano.
23. Documentación

- Tensorflow: [Link]
- Keras: [Link]
- scikit learn: [Link]
24. Google Colab

Colaboratory, o "Colab" para abreviar, es un producto de Google Research.

Permite a cualquier usuario escribir y ejecutar código arbitrario de Python en el
navegador. Es especialmente adecuado para tareas de aprendizaje automático,
análisis de datos y educación.

Esto nos ahorra tener que instalar tantas librerías y herramientas en nuestra PC,
además de que nos ahorra usar los recursos.
25. TensorFlow

Esta es una librería para manejar el tipo de dato llamado Tensor

En programación, un array es una estructura de datos lineal que contiene

elementos del mismo tipo de datos y se almacena en la memoria. Por otro lado, un
tensor es una estructura de datos multi-dimensional que generaliza la idea de un
array a cualquier número de dimensiones.
26. Keras

Keras es una librería que funciona con TensorFlow

Esta proporciona una amplia variedad de modelos de redes neuronales

predefinidos, incluyendo modelos para clasificación de imágenes, procesamiento
de lenguaje natural, modelos generativos y más. Además, permite la creación de
modelos personalizados a través de una API de alto nivel, lo que permite a los
usuarios crear modelos complejos con relativamente poco código.

De forma resumida, esta librería sirve para la construcción y entrenamiento de

redes neuronales
27. Scikit-learn

Scikit-learn está diseñada para una amplia variedad de problemas de aprendizaje

automático, incluyendo clasificación, regresión, agrupamiento, selección de
características y reducción de dimensionalidad.
28. Ejemplo

El siguiente codigo aprende a transformar de

[Link]
W?usp=sharing
Módulo XXXVII

Big Data
1. ¿Qué es la big data?
Los macrodatos, ​también llamados datos masivos, inteligencia de datos,
datos a gran escala o big data es un término que hace referencia a conjuntos
de datos tan grandes y complejos que precisan de aplicaciones informáticas
no tradicionales de procesamiento de datos para tratarlos adecuadamente.
1. ¿Qué es big data?

Big data También

Big data siempre
Big data incluye incluye datos
ha existido pero no
datos de la banca, menos conocido
ha habido una
casas de acciones, como cadenas de
manera de reunir y
email y post en suministro, Código
analizar los
redes sociales de barra o torres
grandes datos
de telefonía
 2. Las cuatros Ves de big data

Volumen: El tamaño de los datos (terabytes de datos de la banca).

01.

02. Velocidad: cuán rápido los datos entran (sensores de carros que
envían información cada segundo).

03. Variedad: diferentes formas de datos (post de social media, fotos,

comentarios).
Veracidad: incertidumbre de los datos (datos de social media puede
04. ser no precisa, vienes de bots, etc ).
 3. Descripción general de Big Data
IBM Cognos
SAP Business Objects
Visualización MicroStrategy
y Analítica ZoomData
Qlik
PowerBI
Hadoop MapReduce
Tableau
HIVE
TEZ
Computación Apache Drill
Apache Storm
Google BigQuery
FlinkGPFS
IBM
Spark
HadoopStreaming
Depósito Kafka Tables
MAPR
Apache HBASE
KUDU
MEMSQL

Distribución y Pivotal
Almacen de Oracle EXADATA
datos TERADATA
GreenPlum
MAPR
NETEZZA
HortonWorks
Cloudera
Azure HDInsight
Amazon EMR
4. Problemas del big data

Conjuntos de datos extremadamente grandes

1 Necesita un lugar para almacenar

cantidades masivas de datos

2 Necesita una forma de acceder a los

datos rápidamente

3 Necesita un lugar para almacenar

cantidades masivas de datos

4 Necesita copias de seguridad por falla de

hardware
5. Anaconda

Anaconda es una distribución de los lenguajes de programación Python y R para

computación científica (ciencia de datos, aplicaciones de Machine Learning,
procesamiento de datos a gran escala, análisis predictivo, etc.).

Tiene como ventaja simplificar la gestión e implementación de paquetes. La

distribución incluye paquetes de “data science” adecuados para Windows, Linux y
macOS.

Link de descarga: [Link]

6. Jupyter

Los Jupyter Notebooks son una aplicación web, también de código abierto que nos
va a permitir crear y compartir documentos con código en vivo, ecuaciones,
visualizaciones y texto explicativo. Estos documentos registran todo el proceso de
desarrollo y, lo más interesante, pueden ser compartidos fácilmente con otras
personas a través de correo electrónico, Dropbox, sistemas de control de
versiones como git/GitHub y nbviewer.

Este viene incluido con Anaconda

7. Pandas

Pandas es una muy popular librería de código abierto dentro de los desarrolladores
de Python, y sobre todo dentro del ámbito de Data Science y Machine Learning, ya
que ofrece unas estructuras muy poderosas y flexibles que facilitan la
manipulación y tratamiento de datos.

Pandas surgió como necesidad de aunar en una única librería todo lo necesario
para que un analista de datos pudiese tener en una misma herramienta todas las
funcionalidades que necesitaba en su día a día, como son: cargar datos, modelar,
analizar, manipular y prepararlos.

Documentación: [Link]
8. Series

Una forma de llamar a los arrays o listas

9. DataFrames

Array bidimensionales u objetos

10. Regresión lineal (Machine learning)

Este es un algoritmo usado para modelar la relación entre dos variables o más.

Y = B0 + B1x1 + B2x2 + B3x3…

La Y es variable dependiente

La X es variable independiente
11. Para qué sirve la regresión lineal

Nos sirve para hacer predicciones simples tales como las notas de un examen
basado en la cantidad de horas estudiadas o el salario de una persona basado en
la cantidad de años de trabajo, etc.
12. Gráfico de regresión lineal
13. Libro y Páginas recomendadas
• Libro: Python Natural Language Processing Techniques (
[Link]
• Natural Language Toolkit ([Link]
• NLP for Big Data: What Everyone Should Know ([Link]
• What Is Natural Language Processing?]([Link]
• [7 Applications of Deep Learning for Natural Language Processing](
[Link]
• The Art of Tokenization ([Link]
• What does tf-idf mean? ([Link]
• TD-IDF Explained ([Link]
• TD-IDF in Apache Spark ([Link]
• 6 Easy Steps to Learn Naive Bayes Algorithm (with codes in Python and R) (
[Link]
• Feature Extraction and Transformation in Adobe Spark – Documentation (
[Link]