@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

NodeJs (Descargar versión LTS):

https://nodejs.org/es/download/

XAMPP (descargar la última opción):

https://www.apachefriends.org/es/download.html
 Módulo I
Conceptos manejados en la industria
1. Tecnología

La tecnología es 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 el trabajo.
16. SEO

(Search Engine Optimization). 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.
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)
21. CDN
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 youtube.com
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, PHP 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.

(Analogía)
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: nubity.com
4. Data Scientist

https://www.talent.com/es/salary?job=remote+data+scientist
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
- Edge
- Opera
- Brave
- Google chrome
- Safari
6. API
- https://rickandmortyapi.com
- https://rickandmortyapi.com/api/
- https://rickandmortyapi.com/api/character
- https://rickandmortyapi.com/api/episode
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.

- D3.js
- AnimeJS
- Hammer.js
8. Frameworks
- Laravel
- Tailwind
- Express.js
- Angular
- Vue.js
- Flask
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
- 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: https://cmder.app

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 escenario.jpg
/home/nombredeusuario/Imágenes crearía una copia de escenario.jpg (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 archivo.txt /home/nombredeusuario/Documentos.

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

mv nombreviejo.ext nombrenuevo.ext

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 archivo.txt 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/Web.html para
crear un archivo HTML titulado Web en el directorio Documentos.
11. sudo

Abreviatura de «Super User Do» (Super Usuario 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: “index.html”, la carpeta “estilos”, dentro de la carpeta
estilos crea el archivo “estilos.css”.
- Crea una copia de la carpeta realizada en el ejercicio anterior con todos sus
archivos en la carpeta “Mis documentos”
- Crea un archivo llamado “hola.txt”, 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. 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.

https://git-scm.com
2. 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.
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.

● Crear cuenta: https://github.com/join

● Descargar: https://desktop.github.com/
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. Fork

Un "fork" (en español, "bifurcación") se refiere a la acción exclusiva de GitHub

Desktop de copiar un repositorio de código de otra persona o de una organización
a tu propia cuenta de GitHub. Esto se hace con el propósito de contribuir al
proyecto original o trabajar en una versión modificada del proyecto sin afectar
directamente al repositorio original.

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

no tienes permiso para hacer cambios directamente en el repositorio original.
13. Pull Request

Un "pull request" (solicitud de extracción) es una función que permite proponer

cambios a un repositorio y solicitar que el propietario del repositorio original decida
si desea integrar los cambios o no mediante un “Merge” (Fusión).
14. 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 y las integra en una sola rama.
15. Git Ignore

¿Que es .gitignore?
Es un archivo especial .gitignore que 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 sencillo.Algunas de estas convenciones son:

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

- Usar un archivo README.md 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
CHANGELOG.md.

- 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. Puntos importantes
- Qué es Git - Git Ignore
- Qué es Github - Interfaz de GitHub (Web)
- Instalación - GitHub Pages
- Que es un repositorio
- Git Init
- Git Publish
- Git Commit
- Git Push
- Git Pull
- Git Clone
- Fork
- Pull Request
- Merge
18. Ejercicios extras
- Crear un repositorio privado que contenga un archivo.html y un archivo.css e
invitar al profesor como colaborador.
- Investigar sobre el archivo .gitignore, crear un nuevo archivo llamado
prueba.js e ignorar todos los archivos js para futuras actualizaciones.
- Crear una nueva rama prueba agregando un archivo hola.html 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=”imagen.png” />

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.

https://www.w3schools.com/tags/default.asp
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>Mi Titulo</title>
Esta etiqueta define el título de una página.
<body>
Contiene el contenido de la página web.
 8. Etiquetas importantes
Etiquetas más usadas:
<p>, </img>, <h1>, <h2>, <h3>, <button>,
<a>, <ol>, <li>, <ul>, <br>, <input>, <label>,
<span>,<div>,<iframe>, <video>, <select>,
<option>

Etiquetas de HTML semántico:

<main>, <form>, <nav>, <footer>, <aside>,
<section>, <header>, <article>
9. Puntos importantes
- ¿Qué es HTML?
- Sintaxis de HTML
- Etiquetas auto conclusivas
- Atributos o propiedades
- Estructura de una página web
- Etiquetas importantes de HTML
- HTML semantico
- Formularios
10. 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:
archivo.css

Una vez creado se debe llamar al archivo CSS dentro del archivo HTML a
través de la siguiente etiqueta: <link rel="stylesheet" href="archivo.css">
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.

https://www.w3schools.com/cssref/default.asp
6. Algunas propiedades de CSS

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

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

9. Puntos importantes
- ¿Qué es CSS?
- ¿Cómo aplicar CSS?
- Sintaxis de CSS
- Selectores
- Propiedades de CSS
- Elementos Flex
- Elementos Grid
- Transiciones
- Transformaciones
- Animaciones
- Responsive
10. 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.
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: https://dfd.waxoo.com/descargar
o
https://pseint.sourceforge.net/index.php?page=descargas.php
2. Diagrama de flujo de datos (DFD)
2. Diagrama de flujo de datos (DFD)
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.

https://www.redusers.com/noticias/wp-content/uploads/2022/05/leng.jpg

https://www.talent-republic.tv/wp-content/uploads/2020/07/lenguajes-desarrolladore
s.png
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.

https://www.lifeder.com/pensamiento-abstracto/
5. Proceso de realización de un software
5. Proceso de realización de un software
Módulo XI
Pre-Procesadores (SASS)
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 trabajar de manera más rápida, 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, estructuras de control, condicionales, Loops,
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: https://sass-lang.com/documentation

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.70.0 compiled with dart2js 3.2.5
6. Puntos importantes de SASS
- Sintaxis - Condicionales
- Como SASS difiere de CSS - Listas
- Comentarios - Loops (each, for)
- $Variables - Funciones
- Anidamiento / Nesting - @import (Modularización)
- @mixin (sin y con parámetros) - PROYECTO
- BEM (Block, Element, Modifier)
- @extend
- PRÁCTICA
 Módulo XII
Librerías y Frameworks de CSS
1. 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.
2. 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.
3. 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.
4. Bootstrap

Documentación oficial:

https://getbootstrap.com/docs/5.2/getting-started/introduction/
5. 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.
5. Tailwind

Documentación oficial:
https://tailwindcss.com/docs/installation
6. Otras Librerías

AOS
Animate.css
CSShake
7. Puntos importantes
- ¿Qué es Tailwind?
- Como instalar Tailwind (CDN e Instalación)
- Cómo utilizar Tailwind
- Clases variables en Tailwind
- Responsive en Tailwind
- Otras librerias
- PROYECTO
8. 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.

https://www.w3schools.com/js/js_syntax.asp
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:
console.log('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: prueba.js

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

<script src="prueba.js"></script>
7. Variables

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

memoria 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

console.log()
A continuación un ejemplo:
12. Tipos de datos

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

13. Puntos importantes de JS (Fundamentos)
Sección 2
Sección 1
- Función sin parámetros
- Cómo escribir JS
- Función con parámetros
- Comentarios
- Hoisting
- Tipos de datos
- Scope
- Variables
- Recursividad
- Tipos de variables - Métodos de strings
- Operadores comparativos - Arrays y Métodos de arrays
- Operadores aritméticos (Que es iterar, length, push, unshift, pop, shift, slice)
- Operadores de asignación - Objetos y Métodos
- Operadores lógicos - Loops (for, for in, for of, while, do while)
- Condicionales - Funciones Constructoras
- PRÁCTICA - Consola
- PRÁCTICA
 13. Puntos importantes de JS (Avanzado)
Sección 4
Sección 3
- Try-Catch
- ES6 (map, arrow functions, spread)
- Funciones asíncronas (setInterval, setTimeout)
- Desestructuración
- Asincronismo (Callbacks, Promesas, Async-Await)
- DOM
- Peticiones HTTP, Metodos y Estados de respuesta
- Selectores (id, class, tag, name)w
- Que es una API
- Eventos (propiedad, función,
- JSON
escucha)
- Fetch
- Clases (Creación, instanciación)
- localStorage y sessionStorage
- Regex / Expresiones Regulares
- Cookies
- Import/Export
- PROYECTO
- PRÁCTICA
- Web APIs
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
Redes y Telecomunicaciones
1. ¿Que son redes y telecomunicaciones?

Las redes y telecomunicaciones son un conjunto de conceptos y tecnologías que

permiten la comunicación y el intercambio de información entre dispositivos.
2. Importancia
La programación web se basa en el envío y recepción de datos a través de una red. Por
lo tanto, es importante que como desarrolladores web tengamos conocimiento básico
de los conceptos de redes y telecomunicaciones que se manejan en esta industria.

En este módulo veremos que debemos conocer como desarrolladores web y cómo lo
aplicaremos en nuestro dia a dia.
3. Conceptos manejados
Conceptos relacionados con la programación web son los siguientes:

Redes de computadoras: Una red de computadoras es un conjunto de dispositivos conectados entre sí

para compartir información y recursos. Las redes de computadoras pueden ser locales (LAN),
metropolitanas (MAN) o globales (WAN).

● Redes LAN (Local Área Network): Una red LAN se encuentra en un área geográfica pequeña,
como un edificio, una oficina o un campus universitario. Suelen utilizar cables para conectar los
dispositivos, pero también pueden utilizar tecnologías inalámbricas.
● Redes MAN (Metropolitan Área Network): Una red MAN es una red de computadoras que cubre
un área geográfica más grande que una LAN, pero más pequeña que una WAN. Suelen utilizar
cables para conectar los dispositivos, pero también pueden utilizar tecnologías inalámbricas.
● Redes WAN (Wide Área Network): Una red WAN es una red de computadoras que cubre un área
geográfica muy grande, como un país o un continente. Suelen utilizar tecnologías inalámbricas o
satelitales para conectar los dispositivos.
 3. Conceptos manejados
Dirección IP: Es un número único que identifica a un dispositivo en una red y se utilizan para enviar y recibir datos. Una
dirección IP consta de cuatro números separados por puntos. Cada número puede estar entre 0 y 255. Por ejemplo, la
dirección IP 192.168.1.1 es una dirección IP válida, comúnmente la vemos como dirección de IP local establecida por defecto.

Protocolos de comunicación: Son un conjunto de reglas que definen cómo se comunican dos dispositivos en una red. Los
protocolos de comunicación definen cómo se empaquetan, envían y reciben los datos.

● HTTP (Hypertext Transfer Protocol): es un protocolo de comunicación que se utiliza para transferir páginas web entre
un servidor web y un navegador web. HTTP es un protocolo de transferencia sin estado, lo que significa que no
mantiene información sobre las solicitudes anteriores.
● HTTPS (Hypertext Transfer Protocol Secure): es una versión segura de HTTP que utiliza el protocolo de seguridad
de la capa de transporte (TLS) para cifrar los datos que se transmiten entre un servidor web y un navegador web.
● TCP/IP (Transmission Control Protocol/Internet Protocol): es un conjunto de protocolos que se utilizan para
conectar dispositivos en una red. TCP/IP es el protocolo de comunicación subyacente que se utiliza para HTTP y
HTTPS.
● FTP (File Transfer Protocol): es un protocolo de red que permite la transferencia de archivos entre sistemas
conectados a una red TCP/IP (Transmission Control Protocol/Internet Protocol), basado en la arquitectura cliente-
servidor. Se utiliza comúnmente para transferir archivos entre servidores web y computadoras locales. También se
utiliza para transferir archivos entre servidores en diferentes redes.
3. Conceptos manejados
Puertos: Un puerto es un punto de acceso a un servicio en un dispositivo. Se utilizan para
identificar el servicio al que se está accediendo a través de una red, debido a esto se
clasifican en 2 familias:

● Puertos Fisicos
● Puertos Virtuales
3. Conceptos manejados
Puertos Físicos: Estos se encuentran en un dispositivo físico, como una computadora, una
impresora o un router. Se utilizan para conectar dispositivos a una red o a otros dispositivos.
Ejemplo: un puerto USB, HDMI, Thunderbolt, Audio, Red (RJ-45) etc.
3. Conceptos manejados
Puertos Virtuales: Son puertos que se encuentran en un dispositivo virtual, como un servidor
web o un programa de software. Se utilizan para conectar aplicaciones a servicios.

Por ejemplo, en un OS podemos encontrar:

1. Puertos reservados: Son puertos que se utilizan para servicios estándar, como HTTP,
HTTPS y FTP, van desde el 0 al 1023.
Algunos ejemplos de puertos reservados son:
● HTTP: Puerto 80
● HTTPS: Puerto 443
● FTP: Puerto 21
1. Puertos registrados: Se utilizan para servicios específicos, como correo electrónico,
juegos y mensajería instantánea. van desde el 1024 al 49151.
2. Puertos dinámicos: Se utilizan para servicios temporales, como la transferencia de
archivos. van desde el 49152 al 65535.
3. Conceptos manejados
Enrutamiento: Es el proceso de determinar la ruta más eficiente para enviar datos de un origen a
un destino. Se realiza mediante enrutadores, que son dispositivos de red que conectan dos o más
redes. Los enrutadores utilizan tablas de enrutamiento para almacenar información sobre las rutas
disponibles entre las redes. Cuando un enrutador recibe un paquete de datos, utiliza su tabla de
enrutamiento para determinar la ruta más eficiente para enviar el paquete al destino.

Servidor web: Es un programa informático que almacena y sirve páginas web a los usuarios.
Están conectados a Internet y utilizan el protocolo HTTP (Hypertext Transfer Protocol) para
comunicarse con los usuarios. Cuando un usuario abre un navegador web y escribe una dirección
URL (comúnmente conocido como Link), el navegador envía una solicitud al servidor web, Este
responde a la solicitud enviando la página web al navegador web.

Cliente web: Es un programa informático que solicita y recibe páginas web de un servidor web.
Son utilizados por los usuarios para navegar por Internet. Los clientes web más comunes son los
navegadores web, como Chrome, Firefox y Edge, Brave, Opera, por mencionar algunos. Los
navegadores web utilizan los protocolo HTTP y HTTPS para comunicarse con los servidores web.
Módulo XV
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:
https://www.apachefriends.org/es/index.html

- MAMP:
https://www.mamp.info

- WampServer:
https://www.wampserver.com/
Módulo XVI
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
- Utilización de elementor
- Configuración de un formulario
- Crear Menús (Navbar, Footer)
- Configuración de un sitio web E-Commerce (WooCommerce)
- Editor de plugins
- Editor de temas
- Problemas de editar estos
5. Descarga de WordPress
- link: https://ve.wordpress.org/download/
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 http://localhost/phpmyadmin/ (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:

https://www.000webhost.com (Mayor velocidad, limitado a 1 proyecto)

https://infinityfree.net (Multiples proyectos, menor velocidad)
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 XVII
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:

https://blogthinbkig.com/diferencia-entre-png-jpg-y-gif

WEBP:
https://www.adslzone.net/reportajes/foto-video/webp-formato-ventajas/

SVG o "Scalable Vector Graphics" (Gráficos Vectoriales Escalables):

https://es.wikipedia.org/wiki/Gráficos_vectoriales_escalables

Optimización de imágenes:
https://kinsta.com/es/blog/optimizar-imagenes-para-la-web/
2. Imágenes

Herramienta para comprimir:

https://tinypng.com
3. Minificar archivos

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:

https://carontestudio.com/blog/minificar-css-js-html-acelera-tu-pagina-web/

Herramienta para revertir minificado:

https://herramientas-online.com/unminify-javascript-beautifier.html
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 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.
https://www.cloudflare.com/es-es/

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

https://es.imgbb.com
5. Caché

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.

https://aws.amazon.com/es/caching/
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 (paradigmas de programación y/o patrones de diseño) 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 caché
- Utilizando CDNs
- Utilizar tamaño de imágenes adecuados para el espacio donde se mostrarán
7. Herramientas para medir el rendimiento

https://gtmetrix.com

https://pagespeed.web.dev
Módulo XVIII
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.

https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/los-meta-tags-mas-i
mportantes-y-su-funcion/

https://fullseo.es/blog/meta-tags/
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> <main> </main>
<article> </article> 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.

https://www.hostinger.es/tutoriales/que-es-schema-markup

https://technicalseo.com/tools/schema-markup-generator/
6. Plugins para aplicar esto en Wordpress

- All in One SEO

- 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 schema de tu preferencia con JavaScript
- 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 XIX
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 (Backend)
- 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 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)

- All In One WP Security (Seguridad general de Wordpress)
- Advanced Google reCAPTCHA (Defensa contra los bots)
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 XX
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 módulo, 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 (X), Facebook)
- 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. Oratoria

¿Que es la Oratoria?
Es el arte de hablar en público de forma clara, concisa y persuasiva. Es una
habilidad de gran utilidad que se puede aprender y mejorar con la práctica y la
experiencia.

¿Cual es su importancia al buscar empleo?

● Transmitir información de forma efectiva
● Persuadir al oyente
● Inspirar
● Construir relaciones
● Generar confianza
● Solucionar problemas
8. Oratoria

Técnicas para mejorar la Oratoria

● Práctica: La práctica es la clave para mejorar la oratoria.
● Se tu propio juez: Evalúa cómo comunicas, bien sea observandote en un
video o hablando al frente al espejo.
● Toma nota: Determina cuales son tus fallas, toma nota y constantemente
busca mejorarlas.
9. 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.
10. ¿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.
11. 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.
12. freelancer.es

Freelancer.es o freelancer.com es la plataforma de freelancers más grande del

mundo, por lo cual hay una gran competencia pero también muchos trabajos.
Link: https://www.freelancer.es
13. 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: https://es.fiverr.com
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.
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), CapCut (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 (X), 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 recién inicia un proyecto, 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 Suiza (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 XXI
Briefing
 1. Briefing
Un briefing es una reunión o documento utilizado en el ámbito empresarial o creativo para
proporcionar información esencial y relevante sobre un proyecto, tarea o situación específica.
También se conoce como "sesión informativa" o "informe preliminar". El objetivo principal de
un briefing es comunicar de manera clara y concisa los detalles importantes y los objetivos del
proyecto a todas las partes involucradas, como el equipo de trabajo, los empleados, los
proveedores o los clientes.
2. Temas tratados
En esta reunión se suelen tratar temas como:

● Propósito del proyecto: El propósito del proyecto es la declaración general que define el motivo o la
razón detrás de su ejecución. Describe la meta general que se pretende lograr con el proyecto.

● Objetivos específicos a alcanzar: Los objetivos específicos son las metas detalladas y concretas que
se deben alcanzar para cumplir con el propósito del proyecto. Estos objetivos son medibles y
proporcionan una guía clara para evaluar el progreso y el éxito del proyecto.

● Plazos y fechas importantes: Los plazos y fechas importantes son los períodos de tiempo específicos
en los que se deben completar ciertas etapas o hitos clave del proyecto. Estas fechas son cruciales
para garantizar un progreso adecuado y cumplir con los plazos establecidos.

● Recursos disponibles: Los recursos disponibles son los activos, tanto humanos como materiales, que
están a disposición del proyecto. Esto puede incluir personal, presupuesto, equipo, tecnología u otras
herramientas necesarias para llevar a cabo el proyecto.
2. Temas tratados
● Limitaciones y restricciones: Las limitaciones y restricciones son los factores que pueden afectar o
restringir la ejecución del proyecto. Estos pueden incluir restricciones de tiempo, presupuesto, recursos
limitados, regulaciones legales, limitaciones tecnológicas o cualquier otro factor que pueda limitar el
alcance o el éxito del proyecto.

● Roles y responsabilidades de cada persona o equipo: Los roles y responsabilidades definen las
tareas y responsabilidades asignadas a cada persona o equipo involucrado en el proyecto. Establecen
claramente quién es responsable de qué y cómo se divide el trabajo para lograr los objetivos del proyecto
de manera eficiente.

● Expectativas y requisitos: Estas son las expectativas y demandas específicas que se establecen para
el proyecto. Pueden incluir requisitos del cliente, estándares de calidad, expectativas de rendimiento,
requisitos legales o cualquier otro criterio que deba cumplirse para que el proyecto sea considerado
exitoso.
3. Preguntas
Veamos algunas preguntas agrupadas por categoría que puedes considerar al realizar un briefing:

Objetivos y Audiencia:
● ¿Cuáles son los principales objetivos que desea lograr con este proyecto?
● ¿A quién está dirigido el producto/servicio?
● ¿Cuál es el perfil de la audiencia objetivo?
● ¿Cuáles son las necesidades y deseos clave de la audiencia objetivo?
● ¿Qué mensaje o propuesta de valor desea transmitir a la audiencia objetivo?

Producto/Servicio:
● ¿Cuál es el producto/servicio que se va a desarrollar/promocionar?
● ¿Cuáles son las características y funcionalidades clave del producto/servicio?
● ¿Existen requisitos o limitaciones técnicas específicas a tener en cuenta?
● ¿Hay aspectos legales o normativos que deban considerarse para el desarrollo o promoción del
producto/servicio?
3. Preguntas
Competencia y Mercado:
● ¿Quiénes son los principales competidores en el mercado?
● ¿Qué ventajas competitivas ofrece el producto/servicio en comparación con la competencia?
● ¿Cuáles son las tendencias actuales en el mercado que podrían influir en el proyecto?

Diseño y Estilo:
● ¿Tiene alguna preferencia en cuanto al estilo visual del proyecto? (corporativo, moderno, minimalista,
etc.)
● ¿Existen colores, logotipos o elementos de marca específicos que deban incluirse?
● ¿Hay algún sitio web, diseño o referencia visual que le guste en términos de diseño y experiencia de
usuario?

Contenido y Mensajes:
● ¿Quién se encargará de proporcionar el contenido (texto, imágenes, videos, etc.)?
● ¿Existe algún mensaje clave que se deba transmitir a través del contenido?
● ¿Necesita servicios de redacción o traducción para el contenido?
3. Preguntas
Presupuesto y Plazos:
● ¿Cuál es el presupuesto asignado para el proyecto?
● ¿Existen plazos o fechas límite específicas que deban tenerse en cuenta?
● ¿Hay alguna restricción o limitación financiera que deba considerarse?
Fuente
Fuente
4. Cuando realizar un Briefing
El briefing es necesario en diferentes situaciones, como:

● Inicio de un proyecto: Antes de comenzar un proyecto, ya sea un desarrollo web, un evento, una campaña de
marketing, etc., es importante realizar un briefing para establecer los objetivos, las expectativas y los requisitos
del proyecto.

● Colaboración con proveedores o contratistas: Si se trabaja con proveedores externos o se contratan

servicios de terceros, el briefing es útil para transmitir los detalles del proyecto y asegurar que todas las partes
tengan una comprensión clara de lo que se espera.

● Comunicación interna: En entornos empresariales, el briefing se utiliza para comunicar y alinear a los equipos
internos sobre nuevos proyectos, cambios estratégicos o iniciativas importantes.

● Reuniones creativas: En el ámbito creativo, como en agencias de publicidad o diseño, el briefing se utiliza para
proporcionar información y guía sobre proyectos específicos a los equipos creativos.

● Lanzamiento de productos: Antes del lanzamiento de un nuevo producto o servicio, se puede realizar un
briefing para asegurarse de que todos los aspectos relacionados con el lanzamiento se hayan considerado y se
estén comunicando correctamente.
Módulo XXII
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.

Por esa razón veremos algunos tips para ello…

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.

Esto lo podemos lograr en una reunión previa con el cliente llamada Briefing.
3. Preguntas
Aquí te dejo algunas preguntas que es importante que realices durante el briefing 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?
● ¿Su página web tendrá login/register?
● ¿Cuáles son los roles que tendrá su sitio web? (Ejemplo: Administrador, usuario, editor,
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 suponga que harás alguna cosa que nunca se
comunicó de forma explícita o que realices algo que el cliente no necesita.

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”

- “Eso no toma tanto tiempo”
- “Tengo un primo lo hace más barato”
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 veremos algunas imágenes de cotizaciones reales:
 Módulo XXIII
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).

Ejemplo:
3. Dominio
Tipo (Type): Se refiere al tipo de registro DNS que estás configurando. Los registros DNS son
utilizados para mapear nombres de dominio a direcciones IP.

Tipos existentes:

● A: Mapea un nombre de dominio a una dirección IPV4.

● AAAA: Mapea un nombre de dominio a una dirección IPV6.
● CNAME: Establece un alias de un nombre de dominio a otro nombre de dominio.
● MX: Especifica los servidores de correo electrónico para un dominio.
● TXT: Permite agregar texto arbitrario asociado con un dominio, como registros SPF o de
verificación de propiedad.
3. Dominio
Nombre (Name): Es el nombre del registro DNS que estás configurando. Puede ser un subdominio o
el nombre de dominio principal. Por ejemplo, en este caso (hablando de un registro tipo A), el nombre
se utiliza para determinar el dominio o subdominio.

El uso del símbolo "@" es una forma abreviada de referirse al nombre de dominio principal, puedes
utilizar el símbolo "@" para referirse a este de manera más concisa.
3. Dominio

Datos: Son los datos asociados con el registro DNS en cuestión. El formato de los
datos varía según el tipo de registro. Por ejemplo, para un registro A, los datos
serían la dirección IP a la que se mapea el nombre de dominio. Para un registro
MX, los datos serían los servidores de correo electrónico asociados.
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.
Es decir, el tiempo en segundos que indica durante cuánto tiempo los servidores DNS y otros dispositivos
deben almacenar en caché la información del registro antes de buscar una actualización. Un valor típico para
TTL es 3600 segundos (1 hora), pero puede ajustarse según las necesidades.

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.

● Dedicado: 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.

La razón por la que se mencionan Azure y AWS como experiencia relevante al buscar trabajo,
se debe a que son dos de los proveedores líderes en el mercado de servicios en la nube.
Muchas empresas, tanto grandes como pequeñas, utilizan Azure y AWS para alojar sus
aplicaciones y servicios, lo que crea una demanda de profesionales con experiencia en estas
plataformas.
7. Cómo acceder a un servidor
SSH, FTPS y Panel de control son diferentes métodos de acceso utilizados para administrar y
gestionar un servidor o hosting.

● 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 permite conectarse de forma segura con socios de Negocio, clientes y usuarios.

● Panel de control: Es una interfaz de control de hosting popular que proporciona una plataforma
gráfica para administrar y controlar un servidor web. Permite realizar tareas de gestión de
dominios, configurar cuentas de correo electrónico, gestionar bases de datos, instalar
aplicaciones web y realizar otras configuraciones relacionadas con el hosting.
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 proyectos

Cabe destacar que todos los servidores suelen tener una carpeta 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, por ejemplo si es un hosting PHP la carpeta setia HTDOCS
Módulo XXIV
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 agregar un readme.md al perfil?

Para añadir un archivo readme.md 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
readme.md 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 mejorar el perfil?
Para mejorar el perfil de GitHub puedes agregar un archivo readme.md 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 editar un archivo readme.md?

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 readme.md?

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 readme.md?
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 readme.md?
Añade botones personalizados: Para hacer más atractivo tu perfil utiliza imagen
personalizadas para tus botones, también puedes usar estas plantillas:
https://dev.to/envoy_/150-badges-for-github-pnk

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 readme.md?

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 XXV
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 analizar
y depurar 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 ejecutar código JavaScript en tiempo real y ver
los resultados, se utiliza comúnmente con la función console.log() durante el desarrollo
de webs y apps, para ver información.
¿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 XXVI
Herramientas de Inteligencia Artificial
 1. Introducción a las IA
Actualmente vivimos el auge de las IA´s, por lo que se considera que es el inicio de una nueva era en la
tecnología, pero… ¿En qué consiste esto?.

La nueva era de las IA´s se caracteriza por el auge de los modelos de lenguaje grandes (LLM / Large
Language Models) y el aprendizaje profundo (Deep learning). Los LLM se entrenan en grandes conjuntos de
datos, texto y código, y pueden generar texto, traducir idiomas, escribir diferentes tipos de contenido creativo y
responder preguntas de manera informativa. El aprendizaje profundo es un tipo de aprendizaje automático
que permite a los sistemas aprender de los datos sin ser programados explícitamente. Los sistemas de
aprendizaje profundo se entrenan en grandes conjuntos de datos, y luego pueden utilizar esos datos para
hacer predicciones o tomar decisiones.
 1. Introducción a las IA
La nueva era de la IA aún está en sus primeras etapas, pero tiene el potencial de revolucionar muchas
industrias. Por ejemplo, los LLM se pueden utilizar para generar contenido de marketing personalizado,
traducir documentos a varios idiomas y escribir diferentes tipos de contenido creativo. El aprendizaje profundo
se puede utilizar para desarrollar automóviles sin conductor, mejorar los diagnósticos de salud y crear nuevos
productos financieros.

La nueva era de la IA es un momento de gran oportunidad y gran desafío. A medida que la tecnología de IA
continúe desarrollándose, debemos ser conscientes de los posibles riesgos, como el desplazamiento laboral y
el uso indebido de la IA para fines maliciosos. Sin embargo, si usamos la IA de manera responsable, tiene el
potencial de hacer un mundo mejor.
2. Características
● Inteligencia artificial (IA): Es una rama de la informática que se ocupa de la creación de
agentes inteligentes, que son sistemas que pueden razonar, aprender y actuar de forma
autónoma.

● Aprendizaje automático: Es un tipo de IA que permite a los sistemas aprender sin ser
programados explícitamente. Los sistemas de aprendizaje automático se entrenan con datos, y
luego pueden usar esos datos para hacer predicciones o tomar decisiones cada vez más
precisas.

● El aprendizaje profundo (Deep Learning): Es un tipo de aprendizaje automático que utiliza

redes neuronales artificiales para aprender de los datos. Las redes neuronales están inspiradas
en el cerebro humano y pueden aprender patrones complejos de grandes conjuntos de datos. El
aprendizaje profundo se ha utilizado para lograr resultados de vanguardia en una amplia
variedad de tareas, como la clasificación de imágenes, el procesamiento del lenguaje natural y
el reconocimiento de voz.
2. Características
● Clasificación de imágenes: La clasificación de imágenes es una tarea de aprendizaje automático que
se centra en asignar etiquetas a las imágenes. Por ejemplo, una imagen de una casa podría
etiquetarse como "casa". La clasificación de imágenes se utiliza en una variedad de aplicaciones, como
la detección de objetos, la clasificación de contenido y la búsqueda de imágenes.

● Comprensión del lenguaje natural: La comprensión del lenguaje natural se centra en comprender el
significado del texto. Por ejemplo, un modelo de comprensión del lenguaje natural podría ser capaz de
comprender la pregunta "¿Cuál es la capital de Francia?" y responder con la respuesta correcta,
"París". La comprensión del lenguaje natural se utiliza en una variedad de aplicaciones, como los
chatbots, la traducción automática y los sistemas de recomendación.

● Reconocimiento de voz: El reconocimiento de voz es una tarea de aprendizaje automático que se

centra en convertir el habla humana en texto. Por ejemplo, un sistema de reconocimiento de voz podría
ser capaz de transcribir una conversación telefónica. El reconocimiento de voz se utiliza en una
variedad de aplicaciones, como los sistemas de comando de voz, los subtítulos en vivo y las
aplicaciones de dictado.
2. Características
● Herramientas de finalización de código: Son herramientas impulsadas por IA que pueden ayudar a
escribir código más rápido y con mayor precisión. Estas herramientas utilizan el aprendizaje automático
para aprender del estilo de código y las preferencias de un desarrollador, para luego sugerir fragmentos
de código relevantes a medida que el desarrollador escribe.
3. Herramientas
Chat GPT, Codeium, Blackbox y GitHub Copilot son 4 herramientas que utilizan el aprendizaje automático.

● Chat GPT: Chat GPT es un chatbot con un modelo de lenguaje de gran tamaño desarrollado por
OpenAI. Se entrena en un conjunto de datos masivo de texto y código, y puede generar texto, traducir
idiomas, escribir diferentes tipos de contenido creativo y responder a tus preguntas de manera
informativa.

● Codeium: Es una extensión de autocompletado y una plataforma online que proporciona un entorno de
aprendizaje interactivo. Utiliza el aprendizaje automático para sugerir código, completar código y
detectar errores.

● Blackbox: Es una extensión de código que utiliza el aprendizaje automático para generar código a
partir de una descripción natural del problema. Puede generar código para una variedad de lenguajes
de programación, incluidos Python, Java, C++ y JavaScript.

● GitHub Copilot: Es una extensión de código que utiliza el aprendizaje automático para sugerir código.
Está disponible para los usuarios de GitHub que tienen una suscripción a GitHub Pro o GitHub Team.
 3. Herramientas
Comparativa de herramientas:

Característica Chat GPT

Tipo de herramienta Generador de texto Plataforma de aprendizaje Extensión / Herramienta de Extensión / Herramienta de
conversacional (Chatbot) interactivo / Extensión de código / autocompletado de código autocompletado de código
Generador de texto
conversacional (Chatbot)

Lenguajes de programación Python, Java, C++, JavaScript, Python, Java, C++, JavaScript, Python, Java, C++, JavaScript, Go, Python, Java, C++, JavaScript, Go,
soportados Go, Ruby, C#, PHP, CSS, y 51 HTML, CSS y 64 más Ruby, C#, PHP y 42 más Ruby, C#, PHP y 24 más
más

Disponibilidad Beta pública Beta pública Beta privada Beta privada

Precio Gratis Gratis Gratis hasta 1000 peticiones 10$/mes - 19$/mes

2.99$/mes - 7.99$/mes
4. Ventajas
● Productividad aumentada: Las herramientas de finalización de código pueden ayudar a
escribir código más rápido sugiriendo fragmentos de código relevantes a medida que se
escriben. Esto puede ahorrar una cantidad significativa de tiempo, especialmente cuando se
trabaja en proyectos grandes o complejos.

● Precisión mejorada: Las herramientas de finalización de código pueden ayudar a escribir

código más preciso sugiriendo fragmentos de código que son consistentes con el estilo de
codificación y las preferencias del desarrollador. Esto puede ayudar a reducir la cantidad de
errores en el código, lo que puede ahorrar tiempo y dinero a largo plazo.

● Frustración reducida: Las herramientas de finalización de código pueden ayudar a reducir la

frustración de la codificación al proporcionar la ayuda que necesitan para escribir código rápido
y preciso. Esto puede ser especialmente útil para los nuevos desarrolladores que aún están
aprendiendo los conceptos básicos.
4. Desventajas
● Dependencia de las herramientas: Las herramientas de finalización de código pueden
ser de gran ayuda, pero también pueden ser una muleta. Si los desarrolladores se
vuelven demasiado dependientes de las herramientas de finalización de código,
es posible que no aprendan a escribir código de manera efectiva por sí mismos.

● Potencial de errores: Las herramientas de finalización de código no son perfectas. A

veces pueden sugerir fragmentos de código incorrectos o incompletos. Esto puede
provocar errores en el código, lo que puede ser costoso de solucionar.

● Costo: Las herramientas de finalización de código pueden ser costosas, especialmente

para equipos grandes.
Módulo XXVII
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 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, delégalo.

- 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 XXVIII
Planteamiento teórico del software
1. ¿Por qué debemos planificar el software?
Para poder llevar a cabo un software con un equipo de desarrolladores y cumplir
con lapsos de tiempo es importante tener múltiples puntos claros que mejoraran la
realización del software
- Alcance
- Roles
- Estructura de datos
- Páginas
- Mapa de relaciones
- Estándares de código
- Estándares de diseño
- Diagramas de flujo
- Tareas
- Estructura de carpetas
2. Herramientas para el planteamiento

Hay distintas herramientas que te pueden servir con una pizarra para compartir
todas tus ideas como:

- https://excalidraw.com
- https://app.milanote.com
- https://notion.so
3. Alcance
Consta de definir hasta dónde planeas llegar con el software, todo lo que se
propone y se debe realizar.

Ejemplo: Aplicación de gestión de pedidos

Objetivo: Crear una aplicación web para que los clientes de una empresa puedan
realizar pedidos de productos online.
3. Alcance
Funciones:

- Catálogo de productos: La aplicación debe mostrar un catálogo con los

productos que la empresa ofrece, incluyendo imágenes, descripciones,
precios y disponibilidad.
- Carrito de compras: Los clientes deben poder agregar productos al carrito de
compras, modificar las cantidades y eliminar productos.
- Formulario de pedido: El formulario debe solicitar al cliente la información
necesaria para procesar el pedido, como nombre, dirección, método de pago
y datos de envío.
- Procesamiento de pagos: La aplicación debe integrar un sistema de pago
seguro para que los clientes puedan pagar sus pedidos con tarjeta de crédito
o débito.
3. Alcance
- Confirmación de pedido: La aplicación debe enviar un correo electrónico al
cliente con la confirmación del pedido, incluyendo los detalles del mismo y el
número de seguimiento.

Entregables:
- Diseño y desarrollo de la aplicación web.
- Integración con un sistema de gestión de contenidos (CMS) para que la
empresa pueda actualizar el catálogo de productos.
- Integración con un sistema de pago seguro.
- Manual de usuario para la aplicación.
3. Alcance
Exclusiones:
- La aplicación no incluirá un sistema de gestión de inventario.
- La aplicación no incluirá un sistema de gestión de envíos.
- La empresa se encargará de la promoción y marketing de la aplicación.
3. Alcance
Restricciones:
- La aplicación debe ser compatible con los navegadores web más comunes
(Chrome, Firefox, Safari, Edge).
- La aplicación debe ser segura y proteger la información personal de los
clientes.
- La aplicación debe estar disponible 24/7.

Cronograma:
El desarrollo de la aplicación se completará en 3 meses.
La aplicación se lanzará al público en 4 meses.

Presupuesto:
El presupuesto total del proyecto es de $10.000.
4. Roles
Si tu aplicación tendrá roles como cliente, administrador, editor, etc. Debes definir
qué cosas podrá realizar cada uno de estos roles y que cosas no podrá hacer.

Ejemplo:
5. Estructura de datos
Debes definir cuáles son los datos que tu sistema almacenará y como están
estructurados, ejemplo:
5. Estructura de datos
6. Páginas
Tienes que tener en claro todas las páginas que tu sitio web tendrá, como por
ejemplo:
7. Mapa de relaciones
Debes definir cómo se relacionan los datos, esto cobra más utilidad especialmente
cuando tienes un software con una cierta complejidad de datos. Por ejemplo:
8. Estándares de código
Cuando trabajas en equipo, debe haber unos estándares en al momento de crear
código para que todo pueda tener una misma lógica al momento de nombrar los
archivos, variables, funciones, crear comentarios, etc.
9. Estándares de diseño
Se deben definir los colores, tipografías, tamaños que serán utilizados y que
tendrán propósitos específicos y situaciones para usar cada uno de estos
elementos
10. Diagramas de flujo
Los diagramas de flujo te ayudarán a entender cuales son los pasos a realizar para
que un usuario pueda realizar una cierta acción y esto aclarara aún mejor como
debe ser el diseño y funcionalidad del software
10. Diagramas de flujo
11. Tareas
Debes crear una lista con todas las tareas del proyecto, de forma que se
identifique cada una de las cosas que se deben de realizar
12. Estructura de carpetas
Debes definir cómo estará estructurado tu proyecto y además de ello, indicar cual
es la utilidad de cada una de las carpetas
Módulo XXIX
React JS
1. ¿Qué es React.js?

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 Meta y la comunidad de software libre.

https://es.reactjs.org
2. ¿Qué es Vite?

Vite es una herramienta de compilación y desarrollo extremadamente rápida, que

se integra bien con React y otras bibliotecas. Vite se centra en la velocidad de
desarrollo y utiliza la importación de módulos nativos de JavaScript para ofrecer
una experiencia de desarrollo rapida.

https://vitejs.dev/
3. WebPack y Rollup

Webpack es una herramienta de empaquetado de módulos para aplicaciones web.

Su función principal es agrupar los diferentes archivos de un proyecto (Como
JavaScript, CSS, imágenes, etc.) En términos de velocidad, Webpack puede ser
más lento que Rollup en proyectos grandes debido a su enfoque más general.

Rollup es una herramienta de empaquetado de módulos especialmente diseñada

para crear paquetes optimizados y eficientes, principalmente para bibliotecas y
modelos de JavaScript. Rollup tiende a ser más rápido que Webpack,
especialmente en proyectos grandes, debido a su enfoque más especializado.
4. Server-Side Rendering (SSR)
SSR es una técnica de renderizado en la cual la generación de la interfaz de
usuario de una aplicación web se realiza en el servidor antes de enviarla al
navegador del cliente. Esto significa que cuando un usuario solicita una página, el
servidor procesa la solicitud, ejecuta el código de la aplicación y genera el HTML.
5. Client-Side Rendering (CSR)
CSR es una técnica de renderizado en la cual la generación de la interfaz de
usuario se realiza en el navegador del cliente utilizando JavaScript. Cuando un
usuario solicita una página, el servidor envía un HTML básico junto con los
archivos de JavaScript para generar y renderizar dinámicamente la interfaz de
usuario.
6. Crear una aplicación de Vite + React

Puedes crear una aplicación de Vite + React con el siguiente comando

npm create vite@latest my-app

Luego de ejecutarlo nos saldra este menu en la terminal.

Aquí vamos a seleccionar el framework, en este caso nos movemos hacia abajo con las
flechitas y seleccionamos React y damos enter.
6.1 Crear una aplicación de Vite + React

Luego nos preguntará qué lenguaje deseamos usar, en este caso seleccionamos
JavaScript.

Al seleccionarlo creará una aplicación de react, una vez creada puedes acceder a ella y
ejecutarla de la siguiente manera (en este caso, nuestro proyecto se llama my-app).

cd my-app
npm install o también npm i
npm run dev
7. 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.
8. 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.
9. Creando un componente

Para crear un componente solo crea un nuevo archivo jsx, en este caso crearemos
un archivo llamado Test.jsx. Este contendrá una función que retornará un h1 con
un Hola Mundo. Y permitiremos la exportación de este.
10. 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 index.js
11. React Router

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

https://www.w3schools.com/REACT/react_router.asp
12. 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.
13. 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.
14. useEffect()

Nos permite realizar efectos secundarios en nuestros componentes.

https://www.w3schools.com/REACT/react_useeffect.asp
15. 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.

https://www.w3schools.com/REACT/react_useref.asp
16. DOM

https://lenguajejs.com/javascript/dom/que-es/
17. 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.
18. Consumo de una API

Existen varios tipos de API, algunas son bastante sencillas, para utilizar algunas
API necesitas tener permisos 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

19. 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("https://jsonplaceholder.typicode.com/todos") //Esta es una URL de prueba
.then((res) => res.json()) //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){ console.log(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
20. 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
21. Consumo de una API con KEY
/*Inicialmente 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': 'airbnb13.p.rapidapi.com'
}
};
22. 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) => res.json())
.then((data) => setData(data));

}, []);

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

if(data){ console.log(data) }
23. 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 XXX
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. Puede verse como una maqueta o vista previa de un diseño final de cada
al público final.
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 son importantes entenderlos en clase antes de ir a la práctica.

https://kinsta.com/es/blog/mejores-practicas-diseno-web/
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:

https://www.figma.com
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 XXXI
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:
https://www.w3schools.com/typescript/
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
5. Puntos importantes
● Introducción
● ¿Que es un Superset?
● Tipado de datos Estático vs Dinámico
● Tipos de datos
● Compilación
● Funciones de tipo
● Manejo del DOM
● Interfaces
Módulo XXXII
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: https://www.python.org/downloads/

3. Documentación de Python

link 1: https://www.w3schools.com/python/
link 2: https://docs.python.org/es/3/tutorial/index.html
Puntos importantes

Sección 1 Sección 2
● Comentarios ● Función sin parámetros
● Variables ● Función con parámetros
● Tipos de datos ● Métodos (Strings, Listas, Tuplas, Diccionarios)
● Operadores de asignación ● Loops (for, while)
● Operadores aritméticos ● Funciones de tiempo
● Operadores comparativos ● Clases
● Operadores lógicos ● Try-Except
● Input y Print ● Manejo de Archivos
● Concatenación y F-Strings ● Regex
● Condicionales ● Envío de Email / WhatsApp
(if, elif, else, ternario, match-case) ● PROYECTO
● 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 XXXIII
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 por sus siglas en inglés significa Lenguaje de Consulta Estructurada

(Structured Query Language), 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

Documentación oficial: https://dev.mysql.com/doc/

link: https://www.w3schools.com/mysql/default.asp
5. Puntos Importantes

● Comentarios ● Editar filas

● Crear base de datos ● Eliminar datos, tablas y BD
● Seleccionar base de datos ● Claves primarias y foráneas
● Tipos de datos ● Relaciones
(INT, BIGINT, FLOAT, DOUBLE, CHAR, ● Uniones de tablas
VARCHAR, DATE, TIMESTAMP, NULL)
● Crear tabla
● Describir tabla
● Insertar una y varias filas
● Obtener datos
● Operadores comparativos
● Operadores lógicos
6. 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 XXXIV
Flask
1. ¿Que es Flask?

Flask es un microframework de Python utilizado para el desarrollo de aplicaciones

web del lado del servidor. Es muy ligero y requiere herramientas o bibliotecas
específicas.

No tiene una capa de abstracción de base de datos, validación de formularios ni

ningún otro componente por lo que debe usarse en conjunto con librerías y/o
bibliotecas adicionales.
2. Ventajas y Desventajas
Al ser tan ligero y minimalista Flask ofrece una serie de ventajas:

● Simplicidad: Flask es muy fácil de aprender y utilizar, siendo ideal para proyectos
pequeños y medianos.
● Flexibilidad: No impone una estructura de proyecto rígida, permitiendo elegir entre tus
herramientas y bibliotecas favoritas.
● Amplia Gama de Extensiones: Existen numerosas extensiones que facilitan mucho el
desarrollo de características adicionales como conexión a bases de datos y más.
2. Ventajas y Desventajas
Sin embargo, también cuenta con ciertas desventajas:

● Menos Estructura: Para proyectos grandes, puede requerir una mayor planificación y
estructura personalizada.
● No es una Opción Full-Stack: Si necesitas un marco que aborde tanto el frontend
como el backend, Flask solo se enfoca en el backend.
3. Instalación
Para instalar Flask en Python, sigue los siguientes pasos:

● Abre una terminal o línea de comandos.

● Asegúrate de tener Python instalado en tu sistema
(Puedes verificar la versión de Python escribiendo python –versión)
● Instala Flask: pip install Flask
● Instala la librería para usar MySQL: pip install Flask-MySQLdb

Notas:
● Pip es el gestor de paquetes de Python y se encargará de descargar e instalar Flask y
todas las dependencias (Librerias) necesarias.
● Para actualizar pip debes ejecutar la consola con permisos de administrador y ejecutar
python.exe -m pip install --upgrade pip
4. Ejecución
Para ejecutar Flask pulsa clic derecho en cualquier área del documento y selecciona "Ejecutar
archivo Python en la terminal" o "Run Python file in terminal"
5. Conceptos importantes
Puntero: Un puntero es una variable especial en programación que almacena la dirección de memoria
de otra variable. En otras palabras, un puntero "apunta" a una ubicación específica en la memoria
donde se encuentra almacenado un valor.

Cursor: Un cursor es una herramienta que permite a las aplicaciones interactuar con bases de datos
mediante consultas SQL. Funciona como un puntero que apunta a los datos en la base de datos y se
utiliza para ejecutar consultas, recuperar resultados y realizar operaciones de lectura y escritura.

Cabeceras: Son datos adicionales que acompañan a las solicitudes y respuestas en la comunicación
entre clientes y servidores web. Proporcionan detalles importantes, como el tipo de contenido, la
autenticación, las cookies y la codificación de caracteres.

Traza de pila: La "traza de pila" (stack trace en inglés) es una herramienta para rastrear y depurar
errores o excepciones que ocurren durante la ejecución de un programa. Brinda información detallada
sobre la secuencia de llamadas a funciones o métodos que llevaron al error, ayudando a identificar la
causa del problema y solucionarlo.
6. Primeros pasos
# Importar Flask
from flask import Flask

# Ejecutar Flask
# NOTA: El argumento __name__ es un parámetro que se utiliza para determinar la ubicación de la aplicación.
# Flask utiliza __name__ que es una variable especial en Python, la cual se refiere al nombre del módulo(archivo)
# en el que se está ejecutando el código.
app = Flask(__name__)

#Definir ruta de prueba raiz/root (por default: GET)

@app.route('/')
# Esta es la función de vista que manejará las solicitudes HTTP entrantes en la ruta definida.
# En este caso, la función simplemente devuelve un mensaje.
def index():
return '¡Hola mundo, desde Flask!'

# Inicio de la aplicación en modo de depuración, en el puerto 7500

if __name__ == '__main__':
app.run(debug=True, port=7500)

# NOTA: El modo de depuración (debug=True) proporciona información útil

# como la traza de pila en caso de errores, además de reiniciar el servidor
# tras guardar cada cambio generado
7. Puntos importantes
● Instalación
● Iniciar proyecto
● Definir ruta básica
● Escuchar y levantar servidor
● Conectar a base de datos
● Elaborar API
○ Definir rutas GET
○ Definir rutas POST
○ Definir rutas DELETE
○ Definir rutas PUT
○ Definir rutas PATCH
8. Ejercicios extra
● Elabora una API que maneje rutas GET para leer usuarios de una base de datos
● Añade una ruta POST para actualizar usuarios
● Añade una ruta DELETE para eliminar todos los usuarios menores de edad
Módulo XXXV
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 interpreta PHP, por eso para utilizarlo, se necesita un servidor

web que sea compatible con PHP, como Apache. Además, también se necesita un
editor de código para escribir y editar el código.

Una vez que se tienen estos elementos, se puede empezar a escribir código PHP.

Puedes usar XAMPP:

https://www.apachefriends.org/es/download.html
3. Documentación PHP

El sitio web de W3Schools, en su sección de PHP, proporciona una documentación

completa y detallada sobre el lenguaje de programación PHP.

Esta documentación es un recurso ampliamente utilizado y confiable para

aprender y consultar información sobre el lenguaje.

Link: https://www.w3schools.com/php/
4. Sintaxis
La sintaxis básica de PHP se basa en gran medida en la sintaxis de C, JavaScript y otros
lenguajes de programación similares.

visión general de la sintaxis básica de PHP:

Etiqueta de apertura y cierre:

4. Sintaxis
Comentarios: Imprimir texto:

Variables:
 5. Puntos importantes

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

- Comentarios - Funciones sin parámetros - HASH
- Variables - Funciones con parámetros - Isset, empty
- Tipos de datos - Recursividad - COOKIES
- Echo y Concatenación - Loops (for, while, do-while, foreach) - Variables súper globales
- Operadores comparativos - Métodos (strings, arrays) - Regex
- Operadores aritméticos - Asoc. Arrays, Clases y Objetos - SQLi / Protección
- Operadores de asignación - Try-Catch - PROYECTO
- Operadores lógicos - Conexión a Base de Datos (MySQL)
- Condicionales - Modularización
(if, elseif, else, ternario, switch-case) - Métodos HTTP
- PRÁCTICA - Realizar consultas (CRUD)
- PRÁCTICA
6. Ejercicio de PHP
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 aparecer una pantalla en donde pueda visualizar sus datos.

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 página que traiga todos los datos de una tabla de la base de datos
Módulo XXXVI
Paradigmas de Programación
1. ¿Que es un Paradigma?

Un paradigma es un conjunto de creencias, principios, valores y modelos que influyen

en la forma en la cual se aborda y estudia una determinada área de conocimiento,
disciplina o campo de estudio.
2. ¿Que es un Paradigma de Programación?

Un paradigma de programación es un conjunto de principios y enfoques que guían la

manera en la cual nosotros como programadores, resolvemos problemas y desarrollamos
programas. Cada paradigma presenta un conjunto único de conceptos, reglas y técnicas
que influyen en cómo se estructura y escribe el código de un software.
 3. Tipos de Paradigmas de Programación
Existen varios paradigmas o enfoques que guían la forma de resolver problemas y crear software. Cada uno presenta un
conjunto único de conceptos, estructuras y técnicas que influyen en la organización y escritura del código.

Entre los más destacadas podemos observar:

● Programación Imperativa
● Programación Funcional
● Programación Declarativa
● Programación Procedural
● Programación Estructurada
● Programación Lógica
● Programación Concurrente
● Programación Reactiva
● Programación Reactiva Funcional (FRP)
● Programación Basada en Actores
● Programación Orientada a Objetos (Object-Oriented Programming, o POO)
● Programación Basada en Aspectos (Aspect-oriented programming, o POA)

Veamos solo algunos, sin embargo encontrarás la descripción de cada uno de ellos en la documentación de este módulo
que te será suministrada.
 3. Tipos de Paradigmas de Programación
Existen varios paradigmas o enfoques que guían la forma de resolver problemas y crear software. Cada uno presenta un
conjunto único de conceptos, estructuras y técnicas que influyen en la organización y escritura del código.

Entre los más destacadas podemos observar:

● Programación Imperativa
● Programación Funcional
● Programación Declarativa
● Programación Procedural
● Programación Estructurada
● Programación Lógica
● Programación Concurrente
● Programación Reactiva
● Programación Reactiva Funcional (FRP)
● Programación Basada en Actores
● Programación Orientada a Objetos (Object-Oriented Programming, o POO)
● Programación Basada en Aspectos (Aspect-oriented programming, o POA)

Veamos solo algunos, sin embargo encontrarás la descripción de cada uno de ellos en la documentación de este módulo
que te será suministrada.
3.1. Programación imperativa

La programación imperativa es un paradigma de programación que se centra en

describir cómo se deben llevar a cabo las operaciones y tareas en un programa de
una manera secuencial y detallada. En la programación imperativa, los programas
se construyen utilizando una serie de instrucciones o comandos que indican al
ordenador qué hacer paso a paso.
3.1. Programación imperativa

Programación Imperativa
3.2 . Programación orientada a objetos

La programación orientada a objetos (POO) es un paradigma de programación que

se basa en la idea de modelar un programa como un conjunto de objetos que
interactúan entre sí. Cada objeto es una instancia de una clase, y las clases
definen la estructura y el comportamiento de los objetos. La POO se centra en la
organización de datos y funciones en unidades llamadas objetos, lo que facilita la
representación de conceptos del mundo real en el software.
3.2. Programación orientada a objetos

Programación Orientada a Objetos - JavaScript

3.3. Programación Funcional

La programación funcional es un paradigma de programación que se centra en el

uso de funciones para resolver problemas de programación.

A diferencia de la programación imperativa, que se centra en describir los pasos

que debe seguir un programa, la programación funcional se basa en aplicar
funciones a los datos de entrada para producir resultados, sin cambiar el estado de
las variables ni utilizar estructuras de control como bucles o condicionales en la
medida en que se hace en la programación imperativa.
3.3. Programación Funcional

Programación Funcional
3.4. Programación Declarativa

La programación declarativa es un paradigma de programación que se centra en

"qué" debe hacerse en lugar de "cómo" debe hacerse.

En lugar de especificar una secuencia de comandos detallados para realizar una

tarea, en la programación declarativa, defines declaraciones o expresiones que
describen el resultado deseado sin preocuparte por los detalles de la
implementación.

El lenguaje de programación se encarga de determinar la mejor manera de lograr

ese resultado.
3.4. Programación Declarativa

Programación Declarativa - JavaScript

3.5. Programación Procedural

La programación procedural es un paradigma de programación en el que un

programa se estructura en torno a procedimientos o funciones que contienen un
conjunto de instrucciones que se ejecutan en secuencia.

Estas funciones suelen recibir datos de entrada, procesarlos y devolver resultados.

La programación procedural se centra en dividir el programa en partes más
pequeñas y manejables para facilitar su desarrollo y mantenimiento.
3.5. Programación Procedural

Programación Procedural
3.6. Programación reactiva

La programación reactiva es un paradigma de programación que se enfoca en la

creación de sistemas que responden de manera eficiente a eventos y cambios en
tiempo real.

Se basa en el principio de que los sistemas deben ser reactivos, es decir, capaces
de adaptarse dinámicamente a las condiciones cambiantes del entorno.

La programación reactiva se utiliza ampliamente en aplicaciones que requieren

una alta capacidad de respuesta, como aplicaciones web interactivas, sistemas de
transmisión de datos en tiempo real y sistemas de control de procesos.
3.6. Programación reactiva

Programación Reactiva - React

3.7. Programación reactiva funcional

la programación reactiva y la programación funcional. Combina los principios de

ambas para construir sistemas altamente reactivos que responden eficientemente
a eventos y cambios en tiempo real, utilizando las características de la
programación funcional para manejar y transformar los datos de manera elegante.
3.7. Programación reactiva funcional

Programación Funcional Reactiva - React

Módulo XXXVII
Diagramas UML
1. ¿Que es un Diagrama UML?

Los diagramas UML (Unified Modeling Language) son un conjunto de símbolos que se
utilizan para representar los diferentes aspectos de un sistema de software.
1. ¿Que es un Diagrama UML?

Los diagramas UML son un conjunto de representaciones gráficas que se emplean para
visualizar y expresar distintos elementos y características de un sistema de software.

UML es una notación estandarizada utilizada para facilitar la comunicación y el

entendimiento mutuo entre los diversos integrantes de un equipo de desarrollo de
software.

Arquitecto de Software
2. Tipos de Diagramas UML
Hay distintos tipos de representaciones gráficas en UML, siendo los más frecuentes:

● Diagramas de clases: Ilustra la organización estática del sistema, exhibiendo las

clases, sus atributos, métodos y las relaciones que existen entre ellas.
● Diagramas de objetos: Presenta las instancias específicas de las clases y cómo
se interrelacionan en un instante concreto del sistema.
● Diagramas de secuencia: Describe la interacción temporal entre los objetos del
sistema, mostrando la secuencia de mensajes y respuestas entre ellos.
3. ¿Cómo se representan?
● Clase: Se representan con una caja dividida en tres secciones. La parte superior
muestra el nombre de la clase, el medio presenta sus atributos (nombre y tipo), y
la parte inferior muestra sus métodos (nombre, parámetros y tipo de retorno).
● Visibilidad: La visibilidad indica el alcance de acceso de atributos o métodos.
Siempre se muestra antes del nombre de cada propiedad, principalmente con
símbolos como "+" para público, "-" para privado, y "#" para protegido.
3. ¿Cómo se representan?
 3. ¿Cómo se representan?
● Relaciones: Se representan con líneas que conectan las clases.
○ Asociación: Es la relación estructural entre dos clases, se muestra con una línea sólida y,
opcionalmente, con multiplicidades (se detallan más adelante) indicadas cerca de las
conexiones.
○ Herencia: Representada con una línea sólida que tiene una flecha, y va desde la subclase
hacia la superclase o clase madre.
○ Agregación: Relación donde una clase es parte de otra. Representado con una línea y un
rombo (diamante) hueco en el extremo que se conecta con la clase que se agrega.
○ Composición: Relación de dependencia fuerte donde una clase contiene a otra. Se
representa como la agregación, pero con un rombo (diamante) sólido en el extremo que
conecta la clase de la cual se depende.
○ Dependencia: Indica que una clase depende en menor medida de otra. Se muestra como
una línea punteada con una flecha.
3. ¿Cómo se representan?
3. ¿Cómo se representan?
● Multiplicidad: Indica cuántas instancias de una clase están relacionadas con una
instancia de la otra clase. Se muestra cerca de la línea de asociación utilizando
números o rangos
○ n: indica un número fijo de instancias
○ *: indica muchas instancias
○ 0..5: indica cero o cinco instancias
○ 1..: indica una o más instancias
3. ¿Cómo se representan?
En el siguiente ejemplo observaremos un Diagrama UML que indica dos relaciones de
composición, entre una clase “Automovil” y las subclases “Conductor” y “Pasajero”.

Adicionalmente observaremos las propiedades y métodos cada uno con el símbolo de

visibilidad asignado, y por último la multiplicidad (cantidad de instancias de una clase).

Nota: Al ser una relación de composición, si la clase “Automovil” deja de existir, las
otras clases también dejarán de hacerlo ya que su composición depende de la
existencia de la clase “Automovil”.
3. ¿Cómo se representan?
Módulo XXXVIII
Patrones de Diseño de Software
1. ¿Que son Patrones de Diseño?

Los patrones de diseño son enfoques y soluciones que han sido ampliamente probados
y aceptados para resolver problemas que surgen repetidamente en el diseño de
software.
 2. Conceptos Básicos
Antes de saber más, es esencial familiarizarnos con algunos conceptos fundamentales que nos
ayudarán a entenderlos mejor:

● Clase: Molde para crear objetos con propiedades y comportamientos comunes.

● Instancia: Objeto específico creado a partir de una clase.
● Objeto: Instancia concreta de una clase con atributos y comportamientos únicos.
● Herencia: Mecanismo que permite a una clase heredar propiedades y comportamientos de
otra.
● Constructor: Método especial que se invoca automáticamente al crear una nueva instancia
de una clase para inicializar sus atributos y realizar tareas necesarias.
● Interfaz: Especificación de métodos que una clase debe implementar sin dar detalles de su
implementación.
● Prototipos: Instancias de objetos utilizadas como modelos para crear nuevos objetos
mediante clonación.
3. Tipos de Patrones de Diseño
Existen varios tipos de patrones de diseño, entre ellos los más conocidos y usados son
los Patrones creacionales, Patrones de comportamiento, Patrones Arquitectónicos.
4. Patrones de diseño creacionales
Se enfocan en la creación eficiente y flexible de objetos. Abordan cómo los objetos son
creados y encapsulan los procesos de creación, brindando flexibilidad y reusabilidad en
la instanciación de objetos.
4.1. Singleton

Asegura la existencia de una única instancia de una clase, permitiendo acceder a

ella de manera global.

Imagen
4.2. Factory Method

Permite crear objetos sin especificar su clase exacta, delegando la decisión de qué
clase concreta instanciar a las subclases.

Imagen
4.3. Builder

Permite construir objetos complejos paso a paso, separando la construcción de su

representación.

Imagen
4.4. Prototype

Permite crear nuevos objetos mediante la clonación de prototipos existentes,

evitando depender directamente de clases concretas.

Imagen
5. Patrones de diseño de comportamiento

Se ocupan de la interacción y el comportamiento de objetos y clases, definiendo cómo

se comunican y colaboran para lograr un comportamiento específico, permitiendo
modularidad y flexibilidad en el diseño de sistemas.
5.1. Observer
Establece una dependencia uno a muchos entre objetos, de modo que cuando uno
cambia, los demás son notificados y actualizados automáticamente.

Imagen
5.2. State
Permite que un objeto cambie su comportamiento en función de su estado interno,
creando diferentes objetos de estado para cada estado posible.

Imagen
 6. Patrones de diseño arquitectónicos
Se utilizan para estructurar y organizar la arquitectura de un sistema de software a gran escala,
abordando aspectos como la distribución de responsabilidades, la comunicación entre
componentes, la escalabilidad y mantenibilidad del sistema.
 6.1. Model-View-Controller (MVC)
Divide una aplicación en tres componentes principales: el modelo de datos, la vista de la interfaz
de usuario y el controlador que maneja la interacción entre ambos.
 6.2. Model-View-View-Model (MVVM)
Similar al MVC, pero con una separación más clara entre la lógica de presentación y la lógica de
negocio.
 6.3. Front-Controller
Centraliza y gestiona el manejo de las solicitudes de entrada de una aplicación web, utilizando un
componente central llamado "Front Controller" como punto de entrada único.
 6.4. Middleware
Intercepta solicitudes y respuestas HTTP, permitiendo ejecutar acciones antes y después
del procesamiento, facilitando la adición de funcionalidades en capas intermedias de una
aplicación.
6.5. Representación Gráfica
Para poder interpretar los patrones de diseño de manera gráfica se usan diagramas
UML.

Veamos algunos ejemplos…

7. Representación
7. Representación
7. Representación
7. Representación
7. Representación
7. Representación
Módulo XXXIX
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 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: https://www.mongodb.com/try/download/community

Descarga de gestor de base de datos (Studio3T): https://studio3t.com/es/download/

3. Documentación / Ejercicios
link: https://www.mongodb.com/docs/
Ejercicios https://www.w3resource.com/mongodb-exercises/
 4. Conceptos básicos
¿Que es una consulta?:
Una consulta es una solicitud o instrucción que se envía a la base de datos para recuperar, manipular o
analizar datos almacenados en ella. Las consultas se utilizan para realizar operaciones de búsqueda,
actualización, eliminación y agregación en los datos de la base de datos.

¿Que son documentos?:

Los documentos son la unidad básica de almacenamiento y recuperación de datos. A diferencia de las
bases de datos relacionales (SQL), donde los datos se almacenan en tablas y filas, en MongoDB, los
datos se almacenan en documentos en formato JSON (JavaScript Object Notation).

¿Que son colecciones?:

Las colecciones son estructuras de almacenamiento de datos que agrupan conjuntos de documentos
relacionados (Similares a las tablas en SQL). Son utilizadas en bases de datos NoSQL, como
MongoDB, donde los datos se almacenan en formato de documentos.
5. 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:”Diego Rodriguez”,
edad: 27},{nombre: “Elimelech Attale”}])

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”}]})
5. 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})
5. 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)
5. 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'}}}])
db.createCollection('test');
db.getCollection(colección).drop();
db.empresa.aggregate([{
$lookup: {
from: "users",
localField: "nombre",
foreignField: "nombre_empresa",
as: "empleados de empresa"
}}]);
6. Ejercicios extras
- Crea una colección de ventas la cual contenga un array llamado factura con 3
elementos vendidos
- Elimina solo un elemento del array anterior

Algunos ejercicios:
https://gist.github.com/AlejoJamC/eb91b093d98b82a2a05ac330e20ead28
Módulo XL
Node.js
 1. ¿Qué es NodeJs?
Node.js, es un entorno en tiempo de ejecución multiplataforma para la capa del servidor (en el
lado del servidor) basado en JavaScript.

Node.js es un entorno controlado por eventos diseñado para crear aplicaciones escalables,
permitiendo 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.

https://www.w3schools.com/nodejs/default.asp
2. ¿Quienes utilizan NodeJs?
- Netflix
- PayPal
- Uber
- Linkedin
- Ebay
3. ¿Que necesito para utilizar NodeJs?

- Instalar NodeJs: https://nodejs.org/es/download/

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 index.js e ir al archivo package.json y

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

"nodemon index.js"
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. Express.js

Express.js, o simplemente Express, es un marco de aplicación web de back-end

para Node.js, 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 Node.js.
6. API REST: Representational State Transfer

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

Métodos:

● Get: Obtener
● Post: Crear
● Put: Modificar/Actualizar (Todo un elemento)
● Patch: Modificar/Actualizar (Parcialmente un elemento)
● 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 index.js, 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
app.get('/', (req,res) => {
res.send('Hola Mundo');
});
//escucho al puerto que cree
app.listen(port, () => {
console.log('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
}

}
module.exports = 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: https://insomnia.rest/download

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 @faker-js/faker

https://www.npmjs.com/package/@faker-js/faker
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
Módulo XLI
Pruebas unitarias con JEST
1. ¿Qué es un test?

Cómo developers tenemos que garantizar que el código 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.

JEST
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:
https://jestjs.io/docs/getting-started

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 index.js 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 packgage.json, mas especificamente la propiedad
test y colocarle el valor “jest”
6- Crear un archivo global.test.js
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 XLII
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
6) Unity
7) Unreal Engine
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.

CNC
8. Tecnologías utilizadas

1) CNC
2) C
3) C++
4) C#
5) Python
6) Ensamblador
7) Software CAM
Módulo XLIII
Machine Learning
1. ¿Qué es la inteligencia artificial?
La inteligencia artificial (IA) es la capacidad de una computadora o sistema para realizar
tareas que habitualmente requieren inteligencia humana.

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.

Documentacion:
https://www.w3schools.com/python/python_ml_getting_started.asp
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 completas.

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, lo cual veremos luego de conocer algunas librerías
necesarias.
4. Librerías

Existen algunas librerías de python utilizadas para el machine learning, veamos a

continuación cuales son y cómo se utilizan realizando varios ejercicios…
5. 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.
6. 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.
7. 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.
8. Promedio o Media (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.769
7. Promedio o Media (Mean)

En python se veria asi:

import numpy

speed = [99,86,87,88,111,86,103,87,94,78,77,85,86]

x = numpy.mean(speed)

print(x)
8. 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
8. Mediana (Median)

El python se veria asi:

import numpy

speed = [99,86,87,88,111,86,103,87,94,78,77,85,86]

x = numpy.median(speed)

print(x)
9. 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]
9. 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 = stats.mode(speed)

print(x)
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í.
10. 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

11. Programación regular

Usualmente cuando realizamos un software, tenemos unos inputs, creamos un

conjunto de reglas y pasos lógicos que al final retornan un resultado.

def saludar(nombre):
print(f”Hola, {nombre}!”)

saludar(”Diego”)

# Salida: Hola, Diego!

12. Ejemplo de programación regular

Transforma 4.6 kilómetros a metros.

Para realizar este ejercicio necesitamos multiplicar 4.6 * 1000

4.6 x 1000 = 4600 metros

def convertir(km):
metros = km * 1000
return metros

print(f”Total: {convertir(4.6)}”)
13. Machine learning VS Programación regular

A diferencia de la programación regular, donde se deben dar instrucciones para que un

algoritmo realice una operación, cuando hablamos de un software de Machine learning
(Aprendizaje Automático) nos referimos a un software que tiene unos inputs (entradas),
y este, a través de un proceso que desconocemos retornará un resultado.

Es decir, determinará por sí mismo cuál es la forma de llegar a un resultado en base al

aprendizaje que adquiere durante un proceso conocido como entrenamiento.
14. Ejemplo de aprendizaje automático

Convertir 327.5 metros a centímetros

Para realizar este ejercicio primero necesitamos suministrar distintas conversiones

para que el software aprenda la relación entre metros y centímetros y de esa forma
pueda deducir una fórmula para realizar el ejercicio.

Ejemplo: 1 metro = 100 centímetros

1.5 metros = 150 centímetros
2.3 metros = 230 centímetros
327.5 metros = 32750 centímetros
15. 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 un sistema de computadora que puede aprender y

hacer cosas complejas. Es como un cerebro artificial.
16. 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.
17. 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.
18. 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.
18. 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.
19. 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.
20. 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: https://www.tensorflow.org/learn
- Keras: https://keras.io/getting_started/
- scikit learn: https://scikit-learn.org/stable/user_guide.html
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

https://colab.research.google.com/drive/1ehETBOVtCqe7G6HOvm84hfXba8Gd9IL
W?usp=sharing
Módulo XLIV
Big Data
1. Conceptos importantes

Antes de adentrarnos a conocer que es la Big Data, es necesario conocer algunos

conceptos que ayudaran a la comprensión del tema, estos son:

● Data Warehouse
● On premise Data System
● Cloud computing

Veamos más sobre cada uno a continuación…

1. Conceptos importantes
Data Warehouse: Un data warehouse o almacén de datos, es un sistema de gestión de bases de datos
diseñado específicamente para recopilar, almacenar y administrar grandes volúmenes de datos de diversas
fuentes en un formato estructurado y optimizado para el análisis.

Su principal objetivo es permitir a las organizaciones tomar decisiones basadas en la información contenida
en los datos históricos y actuales.

Representación Ilustrada
1. Conceptos importantes
On Premise Data System: Un sistema de datos on-premise, “sistema local” o “en sitio”, es la infraestructura
informática y de almacenamiento de datos que se encuentra físicamente dentro de las instalaciones de una
organización o empresa.

En otras palabras, todos los componentes del sistema, como servidores, almacenamiento, redes y otros
equipos, que se mantienen y gestionan internamente en la organización.
1. Conceptos importantes
Cloud Computing: El cloud computing o computación en la nube, es un modelo de entrega de servicios
informáticos a través de internet.

En lugar de tener que adquirir y mantener hardware y software localmente, las organizaciones pueden
acceder a recursos informáticos como servidores, almacenamiento, bases de datos, redes, software y más a
través de proveedores de servicios en la nube como por ejemplo AWS (Amazon Web Services) y más.

Representación Ilustrada
2. ¿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.
2. ¿Qué es big data?

También incluye
La Big data
La Big data incluye datos menos
siempre ha existido
datos de la banca, conocido como
pero no ha habido
casas de acciones, cadenas de
una manera de
email y post en suministro, Código
reunir y analizar
redes sociales de barra o torres
los grandes datos
de telefonía
3. Ciclo de vida de los datos
El ciclo de vida de los datos es un marco conceptual que describe las diversas etapas por las
que pasan los datos:
● Extracción o Recopilación
● Almacenamiento
● Procesamiento y Análisis
● Visualización
 4. Las siete V’s del big data

Las 7 V's del big data son un marco que se utiliza para describir las características clave de los datos
masivos.

01
. Volumen: El tamaño de los datos (terabytes de datos de la banca).
02
. Velocidad: Cuán rápido los datos entran (El GPS y los sensores en autos envían datos cada segundo).
03
. Variedad: Diferentes fuentes y formatos de datos (post, fotos y estados en apps y redes sociales).
04
. Veracidad: La credibilidad de los datos (Los datos de redes sociales pueden ser inexactos o engañosos).
05
. Viabilidad: Dificultad de almacenar y analizar los datos (requerimientos de infraestructura, costos, etc.).
06
. Visualización: Presentación de los datos de manera comprensible (gráficos, mapas, etc.).
07
. Valor: Beneficios al aprovechar los datos (mejora la toma de decisiones, innovación, el serv. al cliente, etc.).
 5. Herramientas empleadas
IBM Cognos, SAP Business Objects, MicroStrategy, ZoomData, Qlik, PowerBI, Tableau

Visualización
y Analítica

Hadoop MapReduce, HIVE, TEZ, Apache Drill, Apache Storm, Google BigQuery, Flink, Spark
Streaming, Kafka
Computación

IBM GPFS, Hadoop, MAPR Tables, Apache HBASE, KUDU, MEMSQL

Depósito

Pivotal, Oracle EXADATA, TERADATA, GreenPlum, MAPR, NETEZZA, HortonWorks, Cloudera, Azure
Distribución y HDInsight,
Almacén de
Amazon EMR
datos
6. Desafíos del big data

Al manejar 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 gran potencia de cómputo para

procesar cantidades masivas de datos

4 Necesita copias de seguridad por si ocurre

una falla de hardware
7. 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: https://www.anaconda.com/products/distribution

8. Jupyter

Los Jupyter Notebooks es 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

9. 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: https://pandas.pydata.org/docs/
10. Google Colab
Google Colab, también conocido como Colaboratory, es un servicio de Google Research que permite a cualquier
persona escribir y ejecutar código Python en el navegador. Es ideal para proyectos de aprendizaje automático, análisis
de datos y educación.

En términos técnicos, Colab es un servicio de notebooks de Jupyter alojados que no requiere instalación para usarlo y
brinda acceso sin costo a recursos computacionales, incluidas GPU.

Colab tiene las siguientes características principales:

● No requiere configuración: Puedes comenzar a usar Colab inmediatamente, sin necesidad de instalar ningún
software adicional.
● Acceso a GPUs sin costo adicional: Colab ofrece acceso a GPUs gratuitas para que puedas acelerar tus
tareas de aprendizaje automático.
● Permite compartir contenido fácilmente: Puedes compartir tus notebooks de Colab con otros usuarios, lo que
los hace ideales para la colaboración y la enseñanza.

Es una herramienta poderosa que puede ser utilizada por personas de todos los niveles de experiencia, Siendo una
excelente manera de comenzar a aprender sobre aprendizaje automático, análisis de datos o programación en Python.

Documentación: https://colab.research.google.com/
11. Estructuras de datos

Serie: Una serie es una estructura de datos unidimensional que puede contener
datos de un solo tipo (por ejemplo, números, cadenas, fechas, etc.). Es decir, una
forma de llamar a los arrays o listas.

Dataframe: Es una estructura de datos bidimensional similar a una tabla en una

base de datos o una hoja de cálculo. Los dataframes están compuestos por series
y se utilizan para representar y manipular datos tabulares (información en filas y
columnas).
12. 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
13. 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.
14. Gráfico de regresión lineal
15. Libro y Páginas recomendadas
• Libro: Python Natural Language Processing Techniques (
https://www.amazon.com/Python-Natural-Language-Processing-techniques/dp/1787121429)
• Natural Language Toolkit (https://www.nltk.org/)
• NLP for Big Data: What Everyone Should Know (http://www.expertsystem.com/nlp-big-data-everyone-know
• What Is Natural Language Processing? (https://machinelearningmastery.com/natural-language-processing/)
• 7 Applications of Deep Learning for Natural Language Processing (
https://machinelearningmastery.com/applications-of-deep-learning-for-natural-language-processing/)
• The Art of Tokenization (https://www.ibm.com/developerworks/community/blogs/nlp/entry/tokenization?lang=en)
• What does tf-idf mean? (http://www.tfidf.com/)
• TD-IDF Explained (https://www.elephate.com/blog/what-is-tf-idf/)
• TD-IDF in Apache Spark (https://mingchen0919.github.io/learning-apache-spark/tf-idf.html)
• 6 Easy Steps to Learn Naive Bayes Algorithm (with codes in Python and R) (
https://www.analyticsvidhya.com/blog/2017/09/naive-bayes-explained/)
• Feature Extraction and Transformation in Adobe Spark – Documentation (
https://spark.apache.org/docs/2.2.0/mllib-feature-extraction.html#tf-idf)