Actualicé las entradas del read me dentro del folder 101 del readme 0…

…1 al 08 y corregí errores de edición, añadí imágenes

101/read01.md

@@ -1,9 +1,11 @@
 
-## Cómo Funciona la Web
+<img src="https://neubox.com/blog/wp-content/uploads/2024/09/860x436-DESARROLLO-WEB-2-600x436.webp" alt="cómo funciona el internet">
+
+# Cómo Funciona la Web
 
 La web, o World Wide Web, es un sistema global de documentos e información interconectados que se accede a través de Internet. Funciona mediante un conjunto de protocolos y tecnologías que permiten a los usuarios acceder, compartir y publicar información en línea.
 
-### Partes Esenciales
+## Partes Esenciales
 
 1. **Protocolos:** Los protocolos son reglas que definen cómo las computadoras se comunican entre sí. El protocolo principal de la web es el **HTTP (HyperText Transfer Protocol)**, que permite a los navegadores web solicitar y recibir páginas web desde servidores.
 
@@ -19,6 +21,6 @@ La web, o World Wide Web, es un sistema global de documentos e información inte
 
 7. **JavaScript:** JavaScript es un lenguaje de programación que se utiliza para agregar interactividad a las páginas web. El código JavaScript puede controlar el comportamiento de los elementos HTML y realizar acciones en respuesta a eventos del usuario.
 
-### Resumen
+## Resumen
 
 En resumen, la web funciona mediante una interacción entre los protocolos, los servidores, los navegadores y los lenguajes de programación. Los usuarios utilizan navegadores para solicitar páginas web, que son almacenadas en servidores y enviadas al navegador a través del protocolo HTTP. El código HTML define el contenido de la página web, el CSS controla su apariencia y el JavaScript agrega interactividad.

101/read02.md

@@ -0,0 +1,15 @@
+<img src="https://codesrevolvewordpress.s3.us-west-2.amazonaws.com/revolveai/2023/07/14065857/ai-in-web-development.jpg" alt="image ai and web development" width =900>
+
+# El impacto de la IA en el desarrollo web: respuestas a tus preguntas
+
+## ¿Qué ejemplos específicos se mencionan en el artículo sobre cómo la inteligencia artificial está mejorando la experiencia del usuario en los sitios web?
+
+- **Chatbots:** Los chatbots, utilizando procesamiento de lenguaje natural, interactúan con los usuarios, respondiendo preguntas y ofreciendo respuestas rápidas y precisas. Esto mejora el servicio al cliente y la experiencia del usuario.
+- **Recomendaciones personalizadas:** La IA analiza el comportamiento del usuario para ofrecer recomendaciones personalizadas de productos, contenido o servicios relevantes a sus intereses. Esto aumenta el compromiso del usuario con el sitio web.
+- **Diseño web personalizado:** La IA analiza datos sobre las preferencias del usuario para crear diseños web adaptados a sus necesidades individuales, mejorando la experiencia de navegación y la estética del sitio.
+
+## 2. Transformación del desarrollo web con IA:
+La IA está transformando el proceso tradicional del desarrollo web de varias maneras:
+- **Automatización de tareas:** La IA puede automatizar tareas repetitivas como la generación de código HTML y CSS, la optimización del rendimiento del sitio web, la gestión de contenido y la generación de informes. Esto libera tiempo a los desarrolladores para tareas más complejas.
+- **Mejora de la calidad del código:** La IA puede analizar el código y detectar errores o vulnerabilidades de seguridad, mejorando la calidad del código y la seguridad del sitio web.
+- **Análisis de datos:** La IA puede analizar grandes cantidades de datos sobre el comportamiento del usuario y el rendimiento del sitio web para obtener información valiosa que permita optimizar la experiencia del usuario y el rendimiento del sitio. 

101/read03.md

@@ -0,0 +1,91 @@
+<img src="https://wpcork.com/wp-content/uploads/2018/10/What-Is-CSS.jpg" alt="css image refference">
+
+# Read 03: Intro a CSS
+
+## Qué es CSS?
+CSS es un lenguaje por el cual podemos controlar la forma en que mostramos la información / contenido de una página web manipulando el color, tamaño. etc.
+Dicho de otro modo, vendría a ser un kit de herramientas para hacer que la web se vea del modo exacto en que lo teníamos en mente
+
+## ¿Qué analogía NO técnica usarías para explicar la responsabilidad de HTML vs. CSS?
+
+La responsabilidad del HTML vendría a ser algo así como la estructura de una cada sin ningun acabado. Tendríamos una casa con la estructura suficiente para ser
+funcional. Por otro lado, el CSS vendría a ser todo el acabado que se implementa como decoración, color de paredes, iluminación etc. Teniendo como resultado el uso de ambos elementos
+un lugar que podría ser habitable, y no sólo eso. Sino que, sería acogedor y reconfortante.
+
+## ¿Cuáles son las tres formas de insertar CSS en tu proyecto?
+- **External CSS:**
+Suele ser el más común e ideal para sitios grandes donde se crea el css de manera separada y se enlaza por medio de un `<link>` dentro del `<head>` del html. Fácil de implementar y su reutilización
+```
+   <!DOCTYPE html>
+   <html>
+   <head>
+     <title>Mi página web</title>
+     <link rel="stylesheet" href="styles.css"> 
+   </head>
+   <body>
+     <!-- Contenido de la página web -->
+   </body>
+   </html>
+```
+- **Internal CSS:**
+  Usualmente para proyectos pequeños o específicos. Suele ser menos organizado o no amigable a la vista, dificultando su lectura.
+Se aplica directamente en el HTML usando la etiqueta `<style>` dentro del `<head>`
+```
+  <!DOCTYPE html>
+   <html>
+   <head>
+     <title>Mi página web</title>
+     <style>
+       body {
+         background-color: #f0f0f0;
+       }
+       h1 {
+         color: blue;
+       }
+     </style>
+   </head>
+   <body>
+     <!-- Contenido de la página web -->
+   </body>
+   </html>
+  ```
+
+- **Inline CSS:**
+  Se aplica las reglas CSS a directamente a 'elementos' utilizando el atributo style.
+Suele ser el menos recomendado dificultando el mantenimiento y organización del mismo.
+```
+<!DOCTYPE html>
+   <html>
+   <head>
+     <title>Mi página web</title>
+   </head>
+   <body>
+     <h1 style="color: red;">Título de la página</h1>
+     <!-- Contenido de la página web -->
+   </body>
+   </html>
+```
+
+## Escribe un ejemplo de una regla CSS que daría texto rojo a todos los elementos <p>.
+```
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Demo</title>
+</head>
+<body>
+  <h1 style="color: red;">My CSS</h1>
+  <p style="color: orange">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sem justo, ornare vel rhoncus et, 
+    elementum eget massa. Aenean fringilla tempus erat, in consectetur orci mattis vel. Lorem ipsum dolor 
+    sit amet, consectetur adipiscing elit. Morbi efficitur finibus leo sed semper. Orci varius natoque 
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lorem nunc, faucibus vitae 
+    tempor quis, euismod sit amet lacus. Sed elementum odio ac rhoncus elementum. Curabitur vestibulum, 
+    ligula sed fermentum semper, justo velit mattis metus, sit amet volutpat mauris ipsum vel diam. Fusce 
+    neque sapien, accumsan in leo id, mollis iaculis urna. Vivamus finibus gravida turpis vitae elementum.
+  </p>
+  
+  <!-- Contenido de la página web -->
+</body>
+</html>
+```

101/read04.md

@@ -0,0 +1,30 @@
+<img src="https://hgs.cx/wp-content/uploads/2023/09/Generative-AI_Information-retrieval-banner.webp" alt="AI LLM graphics">
+
+# **Read 04:** IA Generativa
+
+## **¿Qué es el prompt engineering?**
+
+Promot engineering es la forma en que nosotros como usuarios de AI hacemos solicitudes a estos
+modelos utilizando un lenguaje preciso minimizando la ambiguedad y maximizando los resultados que 
+dichos modelos nos pueden brindar por medio del uso de prompts (instrucciones)
+
+## ¿Cuáles son las diferencias clave entre las técnicas de zero-shot prompting, one-shot prompting y few-shot prompting, y en qué situaciones es más efectivo cada uno?
+
+- **Zero-shot:** Ideal para tareas simples y rápidas.
+- **One-shot:** Mejor para tareas más específicas, con una referencia clara.
+- **Few-shot:** Más preciso para tareas de mayor complejidad, con múltiples ejemplos relevantes como referencia.
+
+## ¿Cómo puede la claridad y especificidad en la formulación de un prompt influir en la calidad de las respuestas generadas por un modelo de IA?
+
+Brindando prompts con buena claridad y especificidad influye en la calidad de las respuestas ya que el modelo no obtendrá preguntas ambiguas ya que sabrá con mayor 
+claridad qué es lo que quieres y cómo lo quieres. 
+Si se brinda prompts claros, el entendimiento sería preciso,menos ambiguo lo cual nos daría respuestas más relevantes.
+Así mismo, si brindamos prompts específicos obtendremos más detalles sobre la solicitud, respuestas más precisas lo cual como resultado nos daría un mayor control
+del resultado final. De modo que, el modelo se ajuste y entienda qué es lo que realmente queremos.
+
+## ¿Cuál es la importancia del prompting iterativo en el refinamiento de las respuestas generadas por un modelo de IA?
+
+La importancia de este tipo de prompting iría por el proceso interactivo y refinamiento según se le vaya ajustando  los parámetros de entrada, dando como resultado
+respuestas más precisas a lo que buscamos y en el proceso, el modelo entiende y aprende qué es lo que estamos buscando mientras nos da opciones extra que podrían ir 
+relacionados con el tema. Lo que en otra palabras vendría a ser un diálogo entre el usuario y el modelo, donde ambos se acercan cada vez más a la respuesta ideal
+a más interacción se tenga mutuamente. 

101/read05.md

@@ -0,0 +1,18 @@
+<img src="https://miro.medium.com/v2/resize:fit:1024/1*ohqiT8Y_Ven-e4l3dftnkg.jpeg" alt="illustration about markdown and web" width=650>
+
+# Read 05: Markdown y Web Publishing
+
+## ¿Qué es Markdown?
+Lenguaje de marcado sencillo, ligero y fácil de aprender con el cual se puede
+agregar formato a documentos de texto plano.
+
+## ¿Cómo se crea un vínculo con Markdown?
+Se crea mediante el uso de un texto a enlazar con el uso de corchetes
+y el link de enlace dentro del uso de paréntesis. No debe haber espacios dentro de los contenedores
+
+`Mercado Libre [Website](https://www.mercadolibre.com.pe/)`
+
+##  ¿Al poner el texto en negrita o cursiva para darle énfasis, ¿qué símbolo es la mejor práctica?
+
+- Asterisco `*_*` o `_texto_` para cursiva
+- Doble asterisco `**_**`  para negrita

101/read06.md

@@ -0,0 +1,33 @@
+
+# Read 06: Developer Tools
+
+<img src="https://assets.digitalocean.com/awesomeness/linux_terminal_wallpaper.png" alt="Linux wallpaper">
+
+## 1 ¿Qué hacen los siguientes comandos?
+
+- `pwd` = este comando te brinda la ruta del directorio donde se encuentra el usuario
+- `ls` = este comando nos muesta la lista de archivos y directorios en la ubicación actual (directorio)
+-  `cd` = este comando nos permite movernos entre directorios.
+-  `"cd "` = sin argumento, nos lleva a home.
+-  `"cd nombre_directorio"` = nos lleva a un directorio seleccionado
+-  `"cd .."` = nos lleva al padre del directorio actual
+-  `"cd /"` = nos lleva al root
+-  `mkdir` = este comando nos permite crear directorios (carpetas)
+-  `touch` = este comando nos permite crear archivos vacíos o para actualizar la fecha de modificación para propósito de respaldo
+
+
+## 2 ¿Puedes explicar qué sucede en el siguiente escenario si ingresas estos comandos y argumentos en la línea de comandos? (Los argumentos son instrucciones adicionales dadas a un comando).
+
+- `cd projects`: Nos lleva dentro del directorio projects.
+- `mkdir new-project`: Crea el directorio "new-project".
+- `touch new-project/newfile.md`: Crea un archivo md vacío dentro del directorio 'new-project'
+- `cd .. `: Nos mueve al directorio padre del directorio actual. Un paso atrás del directorio en uso.
+- `ls projects/new-project`: Esta línea de comando nos muestra el contenido del directorio `'new-project'` que está dentro del directorio `'projects'`
+
+
+## 3 ¿Qué comando usarías en la terminal para listar todos los archivos, incluidos los archivos ocultos, en un directorio de Linux o macOS? Explica qué significan los parámetros utilizados en el comando.
+
+- `ls -a`
+- `ls -a /path/directory`
+
+El comando `ls` nos dará la lista de elementos dentro de un directorio, pero si le añadimos `-a` (all) también incluirá los directorios `'.' '..'`

101/read07.md

@@ -0,0 +1,27 @@
+# READ 07: Control de Versiones
+
+![Git](https://ositcom.com/static/images/images/git-blog-header_1.png)
+
+## 1 ¿Qué es el control de versiones?
+  Es un sistema por el cual podemos raestrear y administrar cambios realizados en el código fuente
+	de un proyecto. Así mismo, nos permite trabajar de manera ordenada colaborando en equipo. De ocurrir 
+	problema alguno, se puede regresar a una versión previa.
+
+## 2 ¿Qué es “clone” en Git?
+
+  Usamos el clone para crear una copia completa de un repositorio GIT de manera local. En otras palabras,
+	descargamos el repositorio localmente para su manipulación sin que esto afecte el repositorio original
+
+## 3 ¿Cuál es el comando para agregar los archivos modificados a la zona de preparación?
+
+
+- `git add <nombre de archivo>` para un archivo
+- `git add . `para añadir todos los archivos. El ' . ' hace referencia al directorio actual
+
+
+
+## 4 ¿Cuál es el comando para enviar la captura de los archivos modificados a Github?
+
+  El comando usado para enviar la caputra de los archivos modificados es 	`git push` pero necesitamos un commit previamente  `git commit -m "descripción de cambios"` por último el `git push` para que sea publicado
+
+s

101/read08.md

@@ -0,0 +1,26 @@
+<img src="https://cink.es/wp-content/uploads/2024/02/Que-es-wireframe.webp.webp" alt="image wireframe">
+
+## 1. ¿Qué es un wireframe y cuál es su función principal en el proceso de diseño de un sitio web?
+- EL wireframe vendría a ser el esqueleto o estructura de una web. Así mismo, es una forma de representar de manera 
+sencilla cómo se organizará las diferentes secciones de website. 
+Por lo tanto, su función sería la de permitirnos ver el sitio web antes de empezar el proceso de diseño para que se hagan los cambios respectivos de ser necesario y ahorrarnos trabajar ciegamente. 
+
+## 2. ¿Cuáles son las diferencias entre los wireframes de baja fidelidad y los de alta fidelidad, y en qué situaciones se recomienda usar cada uno?
+- **Wireframes de baja fidelidad:** Suelen ser bocetos sencillos a mano alzada, rápidos hechos a lápiz y papel o con un programa sencillo de maquetación. Carecen de detalles, colores. Sólo formas que nos ayuden a ver una estructura como tal y en el proceso ver qué funciona y qué no sin tener que lidiar con colores, logos, imágenes. etc.
+
+- **Wireframes de alta fidelidad:** Suelen, por lo general ser bocetos o dibujos más detallados, con mayor información y colores. Suele ser usado cuando ya se tiene una idea más clara de lo que se busca, habiéndo pasado primero por un wireframe de baja calidad como base. Dependiendo del tipo, suelen funcionar como prototipos en algunos casos. 
+
+
+## 3. ¿Por qué es importante realizar una investigación de usuario antes de crear un wireframe, y qué aspectos se deben considerar durante esta investigación?
+
+Por medio de una investigación de usuario podríamos crear un wireframe que se ajuste a lo que los usuarios clave buscan, sabiéndo qué les gusta, cómo y dónde. De modo que conociendo quiénes son es que tendrremos un wireframe más aterrizado con el fin de tener una web funcional y armónica.  
+
+## 4. ¿Qué elementos clave deben incluirse en un wireframe para asegurar que se comunique efectivamente la estructura y funcionalidad del sitio?
+
+- Elementos de navegación: Menús, botones, enlaces, etc. Estos elementos permiten a los usuarios moverse por el sitio web de manera fácil e intuitiva.
+- Contenedor de contenido: Secciones para texto, imágenes, videos, etc. Estos contenedores organizan el contenido del sitio web de forma lógica y atractiva.
+- Elementos de interacción: Formularios, botones de acción, etc. Estos elementos permiten a los usuarios interactuar con el sitio web, como realizar una compra, enviar un formulario o suscribirse a un boletín.
+
+## 5. ¿Cómo contribuye CSS a lograr que  el wireframe elaborado pueda ser desarrollado en una página web?
+
+CSS es como el "maquillaje" del sitio web. Te permite cambiar el aspecto de los elementos del wireframe, como los colores, las fuentes y el tamaño de las letras. Con CSS, puedes convertir un wireframe simple en un sitio web bonito y atractivo. Es como darle vida al wireframe y convertirlo en una página web real.

Blog/class07.md

@@ -1,4 +1,4 @@
-<img src="./sino.png" alt="Descripción de la imagen" alt ="destiny image">
+<img src="./assets/sino.png" alt="Descripción de la imagen" alt ="destiny image">
 
 # Clase #7 Git - Github
 

README.md

@@ -43,14 +43,14 @@ I'm always exploring new worlds! From diving into programming and discovering ne
 
 - **101**
 
-  - [Read01](./101/read01.md)
-  - [Read02](./101/read02.md)
-  - [Read03](./101/read03.md)
-  - [Read04](./101/read04.md)
-  - [Read05](./101/read05.md)
-  - [Read06](./101/read06.md)
-  - [Read07](./101/read07.md)
-  - [Read08](./101/read08.md)
+  - [Read 01: Cómo funciona la web](./101/read01.md)
+  - [Read 02: AI in web development](./101/read02.md)
+  - [Read 03: Intro a CSS](./101/read03.md)
+  - [Read 04: IA Generativa](./101/read04.md)
+  - [Read 05: Markdown y Web Publishing](./101/read05.md)
+  - [Read 06: Developer Tools](./101/read06.md)
+  - [Read 07: Control de Versiones](./101/read07.md)
+  - [Read 08: Wireframing](./101/read08.md)
   - [Read09](./101/read09.md)
   - [Read10](./101/read10.md)
   - [Read11](./101/read11.md)