commit 6bf018a9e3ec244056794dd3e8bb7c9da4f3bbd1
Author: devfzn <dev_fzn@proton.me>
Date:   Sat Apr 8 20:29:17 2023 -0400

    init repo Alura Oracle ONE
    
    Control de versiones al comienzo de <Formación en programación -
    Primeros Pasos - 04> "Crea tus primeras páginas web"

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a136337
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*.pdf
diff --git a/001_desarrollo_personal/README.md b/001_desarrollo_personal/README.md
new file mode 100644
index 0000000..798a568
--- /dev/null
+++ b/001_desarrollo_personal/README.md
@@ -0,0 +1,352 @@
+# Desarrollo Personal
+
+## Habilidades Blandas
+
+Durante los cursos vas a conocer herramientas para promover tu foco, aprender
+conceptos como el loop del hábito, el método S.M.A.R.T, GTD (Getting Things Done)
+y aplicarlos para mejorar tu organización y desarrollar nuevos hábitos y mejorar
+tu desarrollo personal.
+
+El desarrollo personal ayuda a establecer un mindset de alta performance, desarrollar
+la oratoria, mejorar las relaciones interpersonales y a entender como ofrecer y
+recibir feedbacks de la mejor forma.
+
+Al concluir estar Formación habrás desarrollado habilidades que son claves para
+los nuevos desafíos del mercado de trabajo.
+
+Esta formación forma parte del Programa ONE, una alianza entre Alura Latam y Oracle.
+
+1. Uso del foro
+2. Soft Skills
+   - Aprender a apender
+   - Linkedin
+   - Planificación
+   - Habitos y productividad
+   - Tec. Pomodoro
+   - Com. asertiva
+   - Soft Skills
+3. Diagnostico
+
+
+### Aprender a aprender
+
+Resumen: [pdf online](https://caelum-online-public.s3.amazonaws.com/ESP-1962-Aprender+a+aprender/Aprender+a+Aprender.pdf) -
+[pdf solo local](./aprender_a_aprender.pdf).
+
+1. Estudiar un poco todos los dias.
+2. Programar el estudio, calendarizar y organizar.
+3. Tomar cursos. Apoyarse de estos para aprender materias nuevas o dificiles.
+4. Estudiar con amigos, mediante foros, discord, github, rrss.
+
+Actualizarse, mantenerse al tanto de tecnologias, aprendizaje constante.
+
+#### Tu Ikigai
+
+##### Lo que amas
+
+1. Solucionar problematicas practicas con software, y automatización.
+2. Aprender y profundizar en lenguajes de programación y utilizarlo en soluciones/proyectos.
+3. Estar al tanto de los avances en software y hardware. Sistemas operativos y Aplicaciones.
+
+##### Lo que haces bien
+
+1. Aprendizaje constantemente.
+2. Desarrollo de proyectos personales integrando distintas tecnologías.
+3. Comunicación en persona.
+
+##### Lo que puede ser pago por hacer
+
+1. Soluciones de software.
+2. Comunicar ideas.
+3. 
+
+##### Lo que el mundo necesita
+
+1. Mas automatización de tareas.
+2. Mas conocimiento y adopción de tecnologias seguras.
+3.
+
+#### Perfiles de recepcion de información
+
+| Perfíl | Descripción |
+| - | - |
+| Acomodador | Escucha lo que la otra persona tiene que decir.</br>Pero aprende haciendo. |
+| Divergente | Vivencia la experiencia pero aprende discutiendo</br>, pensando, reflexionando. |
+| Convergente | Aprende resolviendo problemas |
+| Asimilador | Aprende analisando y observando |
+
+![img](./dimensiones_aprendizaje_Kolb.png)
+
+[Estilos de aprendizaje de Kolb](https://www.actualidadenpsicologia.com/la-teoria-de-los-estilos-de-aprendizaje-de-kolb/)
+
+#### Zona de confort
+
+Entusiasmo -> Estrés -> Aprendizaje
+
+[Teoría de Flujo Mihaly](teoria-de-flujo-mihaly-csikszentmihalyi-toolshero.jpg)
+
+
+#### Disciplina
+
+Constancia, dedicación, compromiso.
+
+- Disposición: Momento en que empieza la acción.
+- Rutina: Acción que se repite.
+- Recompensa: Resultado positivo al final que motiva a seguir.
+
+[Curso Extra](https://app.aluracursos.com/course/feedback-arte-orientar-orientado-sentido)
+
+#### Sumario
+
+- **Lifelong Learning**
+- **Autoconocimiento y propósito**
+- **Estilo individual de aprendizaje**
+- **Zona de Aprendizaje y Disiplina**
+
+#### Eliminar barreras
+
+- Distracción
+- Falta de tiempo/prorización
+- Enfoque
+- Organización previa.
+- Evitar creer que no puedes crecer, miedo al cambio.
+- Ansiedad.
+- Recompesa/Celebración.
+
+Soliticar feedbacks sobre que consideran que debo: `Seguir desarrollando`,
+`Dejar de hacer`, `Comenzar a hacer`.
+
+[Curso extra](https://app.aluracursos.com/course/habitos-productivo-metas-personales)
+
+> Cada uno tiene sus barreras más y menos críticas. ¿Cuáles son las dos barreras
+que más te incomodan? ¿Cómo y cuándo ocurren?
+
+> Ahora, para cada una, define un plan de acción para poner en práctica y evitar
+que te incomoden en tu rutina.
+
+
+#### Develeando el cerebro
+
+Mindset Fijo
+
+- La inteligencia es algo limitado.
+- Somos buenos solo en algunas cosas.
+- Desisto facil cuando se pone muy dificil.
+- Feedback es una crítica.
+- Prefiero hacer lo que ya sé.
+
+Mindset de Crecimiento
+
+- La inteligencia es ilimitada.
+- Puedo ser bueno en lo que quiera.
+- Voy a hacer que resulte.
+- El feedback es una ayuda para crecer.
+- Me gusta aprender y hacer cosas nuevas.
+
+> Elige dos posibilidades y piensa cómo ponerlas en práctica en tu día a día.
+> Busca inspiración en mentores, autoconfianza, aprovechar las oportunidades.
+
+
+| Modo enfocado | Modo dífuso |
+| - | - |
+| Concentración | Visíon Ampliada |
+| Repetir patrones | Conexiones inconcientes |
+| Planificado | Aleatorio |
+| Problemas conocidos | Nuevas soluciones |
+
+Puedes: Estudiar más de un tema por vez, Leer dos libros por vez.
+Tener un empleo y un proyecto voluntario. Tener momentos de ocio.
+
+Es importante tomar pausas, caminar, descanzar. dormir.
+
+¿Como aprenden los niños según la piramide de
+[Gasser](https://blog.ecagrupoeducativo.mx/eca/como-aprenden-los-ninos-de-acuerdo-a-piramide-de-glasser)
+?
+
+- Un 10% de lo que leen.
+- Un 20% a partir de lo que escuchan.
+- El 30% de lo que ven.
+- El 50% de lo que ven y escuchan.
+- El 70% de lo que discuten con otros.
+- El 80% de lo que hacen.
+- El 95% de lo que enseñan a otros.
+
+#### Formatos de aprendizaje
+
+| Formato | Características |
+| Auditivo | - Podcats</br>- Audio books</br>- Ecuchar grabaciones de clases|
+| Visual | - Infográficos</br>- PowerPoints</br>- Teds</br>- Videoclases</br>- Mapa mental |
+| Lectura/Escritura | - Libros</br>Páginas Web</br>- Blogs</br>- Artículos</br>- Resúmenes |
+| Cenestésica | - Ir a eventos</br>- Participar de proyectos</br>- Pair Programming</br>- Platicar con otras personas |
+
+[Vark Test](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fvark-learn.com%2Fvrk-learning-preference%2F&src=sdkpreparse)
+
+| - | Score |
+|:- | - |
+|Visual | 10 |
+|Aural | 5 |
+|Read/Write | 12 |
+|Kinesthetic | 12 |
+
+[Curva del olvido de Ebbinghaus](https://www.mosalingua.com/es/curva-del-olvido/).
+*Repasar para no olvidar*
+
+![img](./normal-memory-retention.jpg)
+
+Cramming: Aprender un gran volumen de contenido en poco tiempo.
+Practica Distribuida: Distribuir los estudios para que la curva de aprendizaje
+se mantenga regular.
+
+#### Memoria a largo plazo
+
+El aprendizaje es el proceso de adquirir información para la memoria de largo
+plazo. Juntar diferentes bloques de conocimiento y saber como aplicarlo.
+
+Divide una habilidad en subhabilidades. Pequeñas partes para aprender.
+
+Chunks = Bloque:
+- Pequeños grupos de información
+- Facil de recordar
+- Macro idea
+
+¿Como formar un bloque?
+
+```txt
+         -> Sustantivos
+Palabras -> Verbos
+         -> Preposiciones
+
+         -> Afirmaciones
+Frases   -> Preguntas
+         -> Comentarios
+
+         -> Historiás
+Párrafos -> Reflexiones
+         -> Explicaciones
+```
+
+> Piensa en el próximo desafío de aprendizaje que tienes.
+¿Cómo puedes, con base en los ejemplos del curso, romperlos en pequeños
+bloques y organizar tu proceso de aprendizaje?
+
+#### Definiendo una meta
+
+> ..."Lo que puede ser medido puede ser mejorado"... *Peter Drucker*
+
+- ¿Por qué lo quiero aprender?
+- ¿Dónde lo voy a usar?
+- ¿Cuando quiero estar listo?
+
+#### Metodo SMART
+
+| - | SMART |
+| - | - |
+| S | eSpecífico |
+| M | Medible |
+| A | Alcanzable |
+| R | Relevante |
+| T | Temporal |
+
+[Método SMART](https://trabajarporelmundo.org/metodo-smart/)
+
+#### Niveles de medicón
+
+- ¿Satisfación con el proceso de aprendizaje?
+- ¿Recuerdas lo aprendido?
+- ¿Puedo aplicar lo que aprendo?
+- ¿Puedo o podré generar resultados?
+
+![img](./piramide_resultados.png)
+
+[Modelo Kirkpatrik](https://www.escueladidactica.com/que-es-el-modelo-kirkpatrick/)
+
+Utilizando la piramide de niveles de aprendizaje, piensa sobre algo que estudiaste
+y aprendiste recientemente y haz una reflexión sobre tu aprovechamiento en cada nivel:
+
+| - | De 0 a 100 califica la etapa en tu proceso de aprendizaje |
+| :- | - |
+| **Resultado**</br> ¿Cuánto estoy generando de resultado? |  |
+| **Aplicación**</br> ¿Cuánto de lo aprendido puedo aplicar? |  |
+| **Conocimiento**</br> ¿Cuánto puedo recordar de lo aprendido? |  |
+| **Satisfacción**</br> ¿Cuánta satisfacción tengo de proceso de aprendizaje? |  |
+| **Dedicación**</br> ¿Cuánto me dediqué al proceso de aprendizaje? |  |
+
+Midiendo la evolución
+
+#### Rutina de aprendizaje
+
+- Organiza tu agenda de la semana.
+- Define (y respeta) el tiempo por día.
+- Busca los mejores horários y lugares.
+
+Pasos de la procastrinación
+
+1. Falsa seguridad: Aún tengo tiempo para hacerlo
+2. Flojera: Creo que voy a empezarlo...
+3. Excusas: Ahora estoy muy ocupada.
+4. Negación: No tengo tiempo.
+
+
+La construcción de hábitos y la estructuración de rutinas es una manera muy 
+eficiente de ganar productividad en el proceso de desarrollo contínuo para
+mantenerse y aprender la forma más eficiente y recurrente.
+
+Para empezar a beneficiarse de estas técnicas, planifica tu rutina de la
+próxima semana considerando:
+
+- METAS CLARAS: ¿cuál es tu meta de aprendizaje? ¿Y cuáles conocimientos y
+actitudes necesitas aprender y/o aplicar para alcanzarlas?.
+- PROCESO DE APRENDIZAJE: ¿Cuál será tu rutina semanal con horarios de
+entrenamiento y de pausa para desarrollar estos conocimientos y actitudes?.
+- HÁBITOS: ¿cuál hábito puedes crear para alcanzar tus metas? Cuáles son la
+disposición, rutina y recompensa para alcanzarlas?.
+- PUNTOS DE ATENCIÓN: ¿cuáles cuidados debes de tener para eliminar los
+puntos de atención para este plan de acción?.
+- EJERCITA ADEMÁS DEL CEREBRO: ¿cuáles actividades físicas mantendrás y/o
+incluirás en tu rutina para fomentar este desarrollo?.
+
+
+¿Cuántas horas vas a dedicar en la semana?
+
+¿Cómo serán divididas por día y local?
+
+¿Qué formatos y estilos, considerando tu perfil personal, vas a elegir para
+incluir en esta agenda?
+
+#### Ejercita cuerpo y mente
+
+Hacer actividad física (aunque sea por poco tiempo) auxilia las conexiones entre
+neuronas del hipocampo, región cerebral asociada al aprendizaje y a la memoria.
+
+Dormir crea nuevos caminosy mejora el modo difuso.
+
+#### Herramientas
+
+- Google Alerts
+- Linkedin:
+    - Consume y crea contenido de calidad.
+    - Aumenta tu red de contactos para grar. networking.
+    - Publica con frecuencia, quien no es visto no es recordado.
+- Podcasts
+- Pinterest
+- Artículos
+
+[Extra - Curso linkedin](https://app.aluracursos.com/course/linkedin-hacer-perfil-trabaje-por-ti)
+
+#### Repaso
+
+- Autoconocimiento
+- Estilos y caminos del aprendizaje
+- Lifelong Learning
+- Neurociencia y el poder del cerebro
+- Técnicas para aprender de verdad
+- Definir y acompañar metas de aprendizaje
+- Rutinas de aprendizaje productivas
+- Herramientas para aprender mejor
+
+### Cursos
+
+- Curso [enfoque](./enfoque.md)
+- Curso [habitos](./habitos.md)
+- Curso [linkedin](./linkedin.md)
+
diff --git a/001_desarrollo_personal/dimensiones_aprendizaje_Kolb.png b/001_desarrollo_personal/dimensiones_aprendizaje_Kolb.png
new file mode 100644
index 0000000..d78efeb
Binary files /dev/null and b/001_desarrollo_personal/dimensiones_aprendizaje_Kolb.png differ
diff --git a/001_desarrollo_personal/enfoque.md b/001_desarrollo_personal/enfoque.md
new file mode 100644
index 0000000..566979b
--- /dev/null
+++ b/001_desarrollo_personal/enfoque.md
@@ -0,0 +1,97 @@
+## Enfocarse
+
+Crear listas cortas, listas de exito. Las cosas que deben hacer
+
+Principio de Pareto: El 80% de los efectos provienen del 20% de las causas.
+
+Escribir entradas en tu blog.
+
+> "Hacer demasiado al mismo tiempo es simplemente la oportunidad de estropear
+más de una cosa al mismo tiempo". *Steve Uzzell*
+
+Distracciones y disturbios, evitan enfocarse en una tarea. Se pierde el 28% de
+nuestro tiempo en un día normal de trabajo debido a la ineficiencia de ser
+multitarea.
+
+La distraccion es natural, la distarcción perjudica tus ingresos.
+
+..."**DISCIPLINA!!!** No tenel disciplina!!!!"... Junichi Takiyama
+
+**Fueza de voluntad**
+
+Quiero mucho! Pero no puedo. ¿Realmente quiero hacerlo? ¿Es este el camino correcto?
+
+La fuerza de voluntad no es un aspecto inalterado del ser humano, sino una
+relación compleja de mente y cuerpo que puede verse comprometida por:
+
+- Noches de insomnio.
+- Estrés
+- Comida inadecuada
+
+**La practica hace al maestro!**
+
+La fuerza de voluntad es como un músculo, se entrena. Comienza gradualmente y
+aumenta el desafío.
+
+La fuerza de voluntad es menor cuando nos cansamos. Concéntrate en los objetivos
+cuando estés más dispuesto; No retome malos habicos como fumar, la comida rápida,
+o comida congelada.
+
+Luchar contra el estrés. Todos los trabajos producen estrés. Estrés y Fuerza de
+voluntad no van juntos.
+
+
+- La falta de fe en uno mismo es un paso hacia el fracaso, ya que esta falta de
+fe puede iniciar un proceso interno de auto-sabotaje.
+- El miedo al fracaso aumenta debido a la certeza de que fallaremos; la idea del
+fracaso se vuelve más cercana y genera ansiedad; la ansiedad perjudica el
+rendimiento.
+- Esperar demasiado una "inspiración" puede ser, en el fondo, solo una forma de
+postergar (es decir, posponer la acción).
+- La fuerza de voluntad generalmente se debilita durante el día, a medida que
+nos cansamos.
+- El estrés generalmente nos anima a prestar atención a los objetivos a corto
+plazo; el autocontrol, por otro lado, mantiene el enfoque más amplio.
+
+Bienestar y equilibrio
+
+- Establecer metas anuales para el desarrollo profesional y personal.
+- Programar tus vacaciones.
+- Elaborar un plan y comenzar a trabajar duro para lograrlo y hacer los ajustes necesarios.
+- La cuestión no es cambiar de opinión todo el tiempo, sino ser honesto contigo mismo.
+- Siempre que sea posible, olvídate del trabajo los fines de semana.
+- Llena tu tiempo libre con actos significativos.
+- No descuides tu salud.
+- Manténte alejado de personas demasiado negativas y pesimistas.
+- Disfruta de tu propia compañía.
+- Tómate un tiempo para cultivar tus relaciones.
+- Estimula tu capacidad de aprendizaje.
+
+- Vida espiritual: no me refiero a la religión, pero ¿qué puedo hacer para
+ayudar a los demás?
+- Salud física: ¿cuál es la acción principal que puedo tomar para cumplir
+con mi rutina de ejercicios?
+- Vida personal: ¿cuál es la acción principal que puedo tomar para mejorar
+mi capacidad de comunicarme con las personas?, o ¿qué es lo que puedo hacer
+para tener más tiempo para mí misma?
+- Relaciones principales: ¿cuál es la acción principal que puedo tomar para
+mejorar mi relación con mi esposo(a), novio(a)? ¿Qué es lo principal que
+puedo hacer para demostrar que valoro a mis padres?
+- Trabajo: ¿cuál es la acción principal que puedo hacer para ser reconocida?
+- Negocios: ¿cuál es la acción principal que puedo tomar para mejorar mis cursos,
+mi proyecto de negocio, mi trabajo, mi emprendimiento?
+- Vida financiera: ¿cuál es la acción principal que puedo tomar para aumentar
+mi patrimonio neto?
+
+- No queremos pasar por la vida como simples espectadores, queremos ser los
+protagonistas.
+- El secreto es hacer la pregunta más importante de nuestras vidas: vida
+espiritual, salud física, vida personal, relaciones principales, trabajo,
+negocios y vida financiera.
+- ¿Cuál es la acción principal que puedes tomar para cumplir con tu rutina
+de ejercicios?
+- ¿Cuál es la acción principal que puedes realizar para fortalecer a tu familia?
+- ¿Qué es lo principal que puedes hacer para demostrar que valoras a tus padres?
+- Tu enfoque determinará tu realidad.
+- Encuentra una manera de mejorar tu día.
+
diff --git a/001_desarrollo_personal/habitos.md b/001_desarrollo_personal/habitos.md
new file mode 100644
index 0000000..6dc5b15
--- /dev/null
+++ b/001_desarrollo_personal/habitos.md
@@ -0,0 +1,173 @@
+# Habitos
+
+Ser productivo para cumplir sus metas personales
+Crear Nuevos hábitos
+
+## Reconociendo tus hábitos
+
+Ahora es tu turno de usar la Meta SMART. Después de establecer una meta,
+piensa en los 5 elementos que hacen una meta SMART y cómo puedes ajustarlos
+para que se cumpla.
+
+Solo para recordar, una meta SMART debe ser: específica, medible, alcanzable,
+relevante y tener una fecha límite.
+
+ej.
+
+```txt
+Mi objetivo es aprender más sobre cómo hacer anuncios en Facebook.
+
+Especificidad: aprender a hacer anuncios en Facebook.
+Medible: hacer anuncios con la menor inversión y tener el mejor alcance.
+Alcanzable: hacer 10 anuncios por mes.
+Relevante: es relevante porque es un servicio que buscan mis clientes.
+Fecha límite: aprender esto en 2 meses.
+```
+
+#### Sumario 01
+
+Que hay una diferencia entre objetivos y metas.
+
+El objetivo es la descripción de lo que quieres lograr.
+
+La meta es la definición en términos cuantitativos y con un término fijo.
+
+El ciclo del hábito siempre comienza con una señal, un disparador que
+transfiere tu cerebro a un modo que determina automáticamente qué hábito usar.
+
+Cuando te pones objetivos, es esencial que te motiven: significa asegurarte de
+que son importantes para ti y de que hay valor en alcanzarlos.
+
+#### Sumario 02
+
+Que los hábitos clave son capaces de desencadenar una serie de reacciones en
+la forma en que las personas organizan sus propias vidas.
+
+Con base en los malos hábitos, evaluar qué acciones nos conducen a ellos.
+Algunos postergadores, por ejemplo, retrasan el inicio de sus actividades
+porque piensan que son aburridas o que son imposibles de ejecutar.
+
+Es posible, por ejemplo, dedicar las primeras horas de trabajo a la organización
+del día, es decir, establecer todo lo que deberá hacerse y la hora para cada tarea.
+
+Crear un hábito, es un camino, a veces habrá progreso, estancamiento o incluso
+retroceso. Por esta razón, no se recomienda generarnos altas expectativas o
+exigirnos altos rendimientos desde el principio.
+
+Es posible establecer hábitos para cada una de las actitudes que son perjudiciales
+para la productividad y la atención de un profesional. En el transcurso, podrán
+cometerse errores y se podrá comenzar nuevamente, tantas veces como sea necesario,
+pero siempre revisando el progreso
+
+
+##### Dilación, viejos Habitos
+
+Vimos que detallar las tareas que deben realizarse es una buena manera de organizarse.
+Durante esta clase vimos el ejemplo de actividades que Luisa tuvo que hacer.
+Pensando en ello, ¿cómo organizas tu lista de tareas?
+
+Recuerda que puedes usar Evernote, Todoist, calendario en papel o cualquier otro
+recurso que te resulte útil.
+
+Ten en cuenta que, además de colocar las tareas en detalle, incluye la lista de
+verificación y los plazos para tener una referencia sobre las fechas de entrega.
+
+#### Sumario 03
+
+Que es posible combatir la dilación.
+
+Enumerar las tareas diarias.
+
+Dividir el trabajo en tareas más pequeñas y tomar descansos.
+
+Crear un ambiente de trabajo favorable.
+
+Establecer recompensas para mantenerse motivado.
+
+
+##### Organizacion
+
+Apps: Todoist, Evernote, Trello
+
+Ahora tómate el tiempo para reflexionar sobre las siguientes preguntas:
+
+- ¿Estás satisfecho con tu estilo de vida?
+- ¿Qué te gustaría mejorar?
+- ¿Cómo piensas lograrlo?
+
+Y en tu opinión:
+
+- ¿Qué es ser una persona exitosa?
+- ¿Qué piensas hacer para lograr o mantener este objetivo?
+
+En mi opinión, ser una persona exitosa significa tener independencia y estabilidad
+financiera, ser libre de elegir con quién, dónde y cómo trabajar. Lo que pretendo
+hacer para mantener este objetivo es continuar estudiando, aprendiendo y buscando
+crear conexiones entre mis áreas de conocimiento con las demandas del mercado.
+
+#### Sumario 04
+
+- La importancia de desarrollar la autodisciplina.
+- La importancia de no perder el enfoque de lo que se tiene que hacer.
+- Mantener tu organización al día.
+- Que la autodisciplina es una habilidad que abre puertas para que se desarrollen
+otras habilidades importantes para la carrera profesional.
+
+### Productividad
+
+Método Pomodoro
+
+Esta idea de Francesco Cirillo es que vamos a crear tres bloques de 25 minutos.
+La idea no es hacer solamente esto, porque quizá para una persona lleva más
+tiempo para mejorar su concentración, entonces este es un punto de partida.
+Si te parece buena la idea, entonces haz un test. "Voy a empezar con tres
+bloques de 25 minutos".
+
+Y al final cuando termina el bloque de 25 minutos, vas a tener 5 minutos antes
+de empezar el otro. O sea, tienes el tiempo de ir al baño, tomar un café, hacer
+otra cosa, una llamada, entonces esta es una manera de mejorar nuestra
+concentración y de administrar mejor nuestro tiempo. ¿Cómo se usa?
+
+El primer paso ya lo sabes, crear una lista, entonces en este ejemplo mira:
+hay aquí responder correos, revisar el código, actualizar dispositivos,
+los códigos, arreglar bugs y hay una Daily con el time.
+
+
+1. Lista de tareas
+2. Haga el proceso
+3. Organizacion
+4. Revisión
+5. El último paso es la ejecución
+
+#### Sumario 05
+
+- Que utilizando el método Pomodoro es posible conocer no solo la cantidad de
+actividades que se realizan, sino también la calidad.
+- Además, es posible medir aquello que dificulta el cumplimiento de las tareas.
+- El método también es útil para personas ansiosas, porque se les dificulta
+organizar sus actividades.
+- Para usar este método necesitarás: un temporizador o reloj despertador
+(puede ser el del teléfono celular). Papel o bloc de notas en la computadora o
+teléfono celular para anotar las actividades a realizar.
+- El método Pomodoro es simple y dura dos horas.
+- Primero, realiza una actividad durante 25 minutos. Cuando se acabe el tiempo,
+descansa 5 minutos.
+- Continúa así hasta que las dos horas se hayan completado. Como recompensa,
+descansa otros 30 minutos.
+- Durante el tiempo de descanso, es mejor no hacer algo que requiera mucho
+esfuerzo mental.
+
+
+##### 5 pasos del GTD
+
+- **Capture** todo lo uqe llama la atención.
+- **Decide** exactamente que significa eso.
+- **Revise** siempre para tener todo en...
+- **Haz** todo lo que necesita y quiere.
+
+### Final
+
+- Técnica [Pomodoro](https://www.aluracursos.com/blog/tecnica-pomodoro-gestiona-tu-tiempo-con-sencillez).
+- Cinco pasos para una [comunicación mas asertiva](https://www.aluracursos.com/blog/5-pasos-para-una-comunicacion-mas-asertiva).
+- [Habilidades Blandas - SoftSkills](https://www.youtube.com/watch?v=vhwspfvI52k) youtube.
+
diff --git a/001_desarrollo_personal/hello_one.md b/001_desarrollo_personal/hello_one.md
new file mode 100644
index 0000000..100d552
--- /dev/null
+++ b/001_desarrollo_personal/hello_one.md
@@ -0,0 +1,76 @@
+# Hello ONE
+
+## GRUPO 5
+
+### Oracale next education
+
+***Amanda Gelumbauskas*** | ONE  
+***Christian Velasco*** | Alura Latam  
+***Raquel Coimbra*** | ONE  
+***Cristian Álvarez*** | ORACLE  
+
+#### Beneficios
+
+- Networking
+- Webinars y Eventos
+- Certificados
+- E-mails y Discord
+- ORACLE ONE
+- Emplea ONE
+- Alumni ONE
+- Plataforma Alura
+
+Hoy se da apoyo con:
+
+- Autogestión del tiempo
+- Autorregulación del aprendizaje
+- Organiza el estudio entre las 4 horas de dedicación indicadas, por día.
+
+**Finaliza la ruta de Desarrollo Personal**, cumple con el horario de estudio
+y utiliza la comunidad en Discord.
+
+#### Visión general
+
+| 1 al 27 Marzo | 28 Marzo a 4 de Abril | 4 Abril | 5 Abril |
+| - | - | - | - |
+| Inscripcion en ONE | Login e informacion</br>de etapa de seleccion | Hello ONE | Formación Principiante</br>en Programación |
+
+- Principiante en Programación (Proceso de selección) del `22 de Abril` al `23 de Mayo`.
+
+**Front** o **Back end** + **soft skills** `23 de Junio` - `23 de Julio` -
+`23 Agosto`-`23 de Septiembre`.
+
+Comunidad Alumni (Solamente para estudiantes que concluyen las **6** formaciones).
+
+## Proceso de selección - Fase 2
+
+**Desarrollo Personal** + **Principiante en Programación** + **Challenge: Lógica de
+Programación** (Encriptador).
+
+> Challenges: desafíos para poner en práctica los contenidos teóricos y
+alimentar su portafolio para una posible entrevista de trabajo.
+
+***IMPORTANTE***
+
+¿Como paso a la ***etapa 3*** y me convierto en ***estudiante ONE***?
+
+- Finalizar los cursos Lógica de programción: Primeros pasos + Lógica de
+Programación: Conceptios primordiales. **LIMITE 18/04/2023**.
+- Finalizar los **8 cursos** de la primera formación: Principiante en
+Programación + los **4 cursos** de la formación Desarrollo Personal.
+**LIMITE 30/05/2023**.
+
+#### Junio a Septiembre 2023 (inclusive)
+
+Formación Front-End + Formación Soft Skills, o  
+Formación Back-End + Formación Soft Skills
+
+> En ambas opciones el alumno tendrá acceso a 3 challenges
+
+Discord [#hello-one]()
+
+<img align="center" width="35%" src="./qr_helloONE.png">
+
+correo: contacto-one@aluracursos.com
+
+
diff --git a/001_desarrollo_personal/idea_partida_resumen_profesional_.png b/001_desarrollo_personal/idea_partida_resumen_profesional_.png
new file mode 100644
index 0000000..9c00781
Binary files /dev/null and b/001_desarrollo_personal/idea_partida_resumen_profesional_.png differ
diff --git a/001_desarrollo_personal/infografia_estilos_aprendizaje_Kolb.png b/001_desarrollo_personal/infografia_estilos_aprendizaje_Kolb.png
new file mode 100644
index 0000000..ccc326b
Binary files /dev/null and b/001_desarrollo_personal/infografia_estilos_aprendizaje_Kolb.png differ
diff --git a/001_desarrollo_personal/linkedin.md b/001_desarrollo_personal/linkedin.md
new file mode 100644
index 0000000..719cc7b
--- /dev/null
+++ b/001_desarrollo_personal/linkedin.md
@@ -0,0 +1,151 @@
+# Linkedin
+
+### Haz que tu perfil trabaje por ti
+
+##### ¿Para qué quieres utilizar Linkedin?
+
+Puede ser porque estás buscando nuevo empleo, puede ser porque quieres fortalecer
+tu presencia en la red, o puede ser porque necesitas nuevas conexiones laborales,
+quieres aumentar tu networking, o también porque quieres ver las vacantes de
+trabajo, los empleos, como está el mercado laboral. También puede ser porque
+quieres posicionarte en la red, en la plataforma o aumentar tu visibilidad o
+mejorar tu posicionamiento.
+
+También porque quieres ver las compañías que te gustan, dónde desearías trabajar,
+quieres ver qué están publicando esas compañías, sus eventos, que está pasando.
+¿Por qué utilizar el LinkedIn? Porque me lo recomendaron, porque todos lo están
+utilizando, porque quiero saber qué está pasando en la plataforma.
+
+**Completar perfil básico**. Información adicional
+
+**Perfil Intermedio**
+
+Foto:
+
+- Viendo a la camara
+- Sonriendo, con expresión abierta
+- Con fondo neutro
+- Evitar fotos recortadas o con otras personas, ambientes no profesionales.
+
+Banner, buscar imagenes en:
+- [pixabay](https://pixabay.com)
+- [freeimages](https://www.freeimages.com/es)
+- [freepik](https://www.freepik.es/)
+- [morguefile](https://morguefile.com/)
+
+Idea de comienzo de resumen linkedin
+
+![img](./idea_partida_resumen_profesional_.png)
+
+Perfil en multpiples idiomas
+
+Linkedin toolkit [pdf online](https://caelum-online-public.s3.amazonaws.com/1826-zbrush-osteologia-femur/02/Toolkit+Linkedin.pdf) -
+[pdf solo local](./linkedin_toolkit.pdf).
+
+[Solicitar/Escribir Recomendaciones](https://blog.hubspot.es/sales/escribir-recomendaciones-linkedin)
+
+
+Ser selectivo en la selección de **contactos**. Hasta 3.000 contactos gratis.
+
+**Grupos**, escucha luego hablar. No intentar vender.
+
+Ojo con las publicaciones, no spamear, focalizar.
+
+Recuérda, cada vez que entres a un grupo nuevo observe si:
+
+- ¿Las personas interactúan?
+- ¿Las personas suben sus dudas?
+- ¿Las publicaciones de este grupo son relevantes para tí?
+
+### Articulos
+
+Ventajas de usar el Pulse:
+
+- Llega notificación a tus contactos
+- Ayuda a posicionarse en Google
+- Genera mayor visibilidad
+- Mayor influencia
+- Posiciona como experto en linkedin
+
+¿ Si tienes un blog, puedes publicar el mismo contenido de este en Pulse?.
+Publica primero en el blog y pasado una semana vuelve a publicarlo en Pulse.
+
+Definir estrategia:
+
+- Lograr visibilidad profesionales
+- Fortalece tu autoridad en el área
+- Comarte tus aprendizajes
+
+Calendario editorial:
+
+- Fechas de publicación.
+- Plazos para producción de contenido.
+- Agendas y temas del contenido.
+- Palabras claves (#hastags).
+- Divulgación en RRSS.
+
+[5 formas de ayudarte a crear habitos](https://www.aluracursos.com/blog/5-formas-de-ayudarte-a-crear-mejores-habitos).
+
+[tecnica pomodoro gestion de tiempo](https://www.aluracursos.com/blog/tecnica-pomodoro-gestiona-tu-tiempo-con-sencillez).
+
+### Relevancia del perfíl
+
+SSI: Indice que funciona como indicador de tus esfuerzos en la metodologia de
+Social Selling Linkedin.
+
+[https://linkedin.com/sales/ssi](https://linkedin.com/sales/ssi)
+
+1. Establece tu marca profesional
+    - Ten un perfil 100% completo.
+    - Publica contenido relevante que te posicione como lider.
+    - Aumenta tu visibilidad con publicaciones e interactúa con el contenido.
+    - Obtén recomendacionesd de colegas y clientes.
+2. Encuentra a las personas adecuadas
+    - Hacer uso de la herramienta de búsqueda para econtrar contactos valiosos.
+    - Aprovecha las presentaciones de contactos comunes para expandir tu red.
+    - Accede al perfil de clientes/empresas potenciales.
+3. Comprometerser con las ideas
+    - Comparte contenido relevante.
+    - Platica con tus contactos de primer nivel.
+    - Utiliza información relevante al enviar una invtación de conexión.
+4. Establecer relaciones
+    - Conecta o sigue a otros profesionales.
+    - Centrarse en los tomadores de deciciones.
+    - Nutrir la relación continuamente para ser recordado.
+
+![img](./linkedin_ssi.png)
+
+> Realiza estos 4 pasos:
+>  
+> Piensa en el mensaje general que quieres transmitir; Haz un esquema de tu 
+artículo; Piensa en un título e imagen de capa; Formatea tu artículo para que
+sea más agradable de leer (párrafos, saltos de línea).
+
+
+### Contenido de calidad
+
+Llamar la atención -> Generar Curiosidad -> Destacar.
+
+Pubicaciones con links poseen un alcance menor a las textuales, es buena idea
+publicar links en los comentarios.
+
+Las primeras 3 lineas son muy importantes para generar Curiosidad.
+
+- Haz preguntas interesantes.
+- Utiliza llamadas de acción (Call To Action).
+- Contenido relevante que se relacione con las tendencias.
+- Comarte consejos.
+- Reconoce/mencina compañeros de universidad/trabajo.
+
+***Frecuencia*** en publicaciones, ***Calidad*** del contenido.
+
+La importancia de [Linkedin](https://www.aluracursos.com/blog/la-importancia-de-linkedIn-para-tu-carrera-profesional)
+para tu carrera profesional.
+
+> Elige un tema pertinente a tu segmento y publica un pequeño artículo.  
+>  
+> Busca explorar los tips de:  
+> - Haz preguntas interesantes;  
+> - Utiliza llamadas de acción (Call to Action);  
+> - Contenido relevante que se relacione con las tendencias;  
+> - Reconoce / menciona tus compañeros de universidad/trabajo.
diff --git a/001_desarrollo_personal/linkedin_ssi.png b/001_desarrollo_personal/linkedin_ssi.png
new file mode 100644
index 0000000..64ab198
Binary files /dev/null and b/001_desarrollo_personal/linkedin_ssi.png differ
diff --git a/001_desarrollo_personal/normal-memory-retention.jpg b/001_desarrollo_personal/normal-memory-retention.jpg
new file mode 100644
index 0000000..b9bd7f4
Binary files /dev/null and b/001_desarrollo_personal/normal-memory-retention.jpg differ
diff --git a/001_desarrollo_personal/piramide_resultados.png b/001_desarrollo_personal/piramide_resultados.png
new file mode 100644
index 0000000..c954902
Binary files /dev/null and b/001_desarrollo_personal/piramide_resultados.png differ
diff --git a/001_desarrollo_personal/qr_helloONE.png b/001_desarrollo_personal/qr_helloONE.png
new file mode 100644
index 0000000..ec65db3
Binary files /dev/null and b/001_desarrollo_personal/qr_helloONE.png differ
diff --git a/001_desarrollo_personal/teoria-de-flujo-mihaly-csikszentmihalyi-toolshero.jpg b/001_desarrollo_personal/teoria-de-flujo-mihaly-csikszentmihalyi-toolshero.jpg
new file mode 100644
index 0000000..bb9dce4
Binary files /dev/null and b/001_desarrollo_personal/teoria-de-flujo-mihaly-csikszentmihalyi-toolshero.jpg differ
diff --git a/002-003_logica_de_programacion/README.md b/002-003_logica_de_programacion/README.md
new file mode 100644
index 0000000..2a82697
--- /dev/null
+++ b/002-003_logica_de_programacion/README.md
@@ -0,0 +1,107 @@
+# Lógica de programación
+
+## Primeros pasos
+
+### Logica de programación - Javascript y HTML
+
+Programa de estudio en [Trello](https://trello.com/b/Z9BHb0fn/g5-formaci%C3%B3n-principiante-en-programaci%C3%B3n).
+
+El [IDE](https://www.aluracursos.com/blog/aprenda-todo-sobre-el-ide-entorno-de-desarrollo-integrado)
+(**E**ntorno de **D**esarrollo **I**ntegrado).
+
+Primer [archivo](./logica_de_programacion_1-2/primer_test.html) html.
+Uso de consola en navegador:
+- `F12`
+- `CTRL`+`SHIFT`+`I`
+
+Primeras [lineas](./logica_de_programacion_1-2/programa.html) con JavaScript.
+[Reto](./logica_de_programacion_1-2/calculo_consumo.html) ¿Alcohol o Gasolina?.
+
+#### Mantenimiento, mejora del código, uso de variables y funciones.
+
+Códigos html:
+
+- [edades](./logica_de_programacion_1-2/calculo_diff_edades.html)
+- [edades 2](./logica_de_programacion_1-2/imprimir_edades2.html)
+
+Ejericicio [conducir](./logica_de_programacion_1-2/conducir.html).
+
+### Cálculo IMC
+
+```txt
+IMC = Peso/Altura²
+```
+
+Se vieron funciones, variables, entradas de usuario en actividad
+[imc](./logica_de_programacion_1-2/indice_masa_corporal.html).
+
+----
+
+## Conceptos Primordiales
+
+### Logica de programación 2 - Javascript y HTML
+
+- Condicionales.
+- Iteraciones (ciclos While y For).
+- Interacción con el usuario.
+    - Conectando HTML con JavaScript.
+    - Botones y Cajas de texto.
+- Array o Listas.
+- Chrome como compilador.
+- Sublime como editor.
+
+Ejemplo puntos de un equipo de [futbol](./logica_de_programacion_1-2/futbol.html).
+
+Mejorando el [IMC](./logica_de_programacion_1-2/imc2.html).
+> Nota: `imc[1] >= 25.0` no es lo mismo que `25.0 <= imc[1]`.
+
+[Juego](./logica_de_programacion_1-2/juego_adivinacion.html) de Adivinación.
+
+Años de los [mundiales](./logica_de_programacion_1-2/ano_mundial_fifa.html) de la fifa.
+
+Repitiendo impresión de asteriscos - [estrellas](./logica_de_programacion_1-2/estrellas.html).
+
+Media edad [familiar](./logica_de_programacion_1-2/media_edad_familiar.html).
+
+Simulación inicio de [sesion](./logica_de_programacion_1-2/simulacion_inicio_sesion.html).
+
+Juego de [Adivinación 2](./logica_de_programacion_1-2/juego_adivinacion_2.html).
+
+Lista de [ingredientes](./logica_de_programacion_1-2/recetas_armando.html) sin repetidos.
+
+### let var const
+
+- `var` = añade variable al scope global.
+- `let` = añade variable al scope local.
+- `const` = constante (ambito?)
+
+----
+
+## Practicando con juegos y animaciones
+
+### Logica de programación 3 - Javascript y HTML
+
+#### Contenido
+
+- Conocer Canvas HTML
+- Crear funciones e iteraciones
+- Interacción con el usuario (eventos)
+- Animaciones
+- Juego de Acertar al Blanco
+
+Apuntes y actividades:
+
+- Nuevo programa [bandera](./logica_de_programacion_3/programa.html).
+- La cara del [creeper](./logica_de_programacion_3/creeper.html).
+- Funciones para imprimir [rectangulos](./logica_de_programacion_3/programa3.html).
+- Dibujar [circulos](./logica_de_programacion_3/dibujar_circulo.html).
+- Grafico de [barras](./logica_de_programacion_3/grafico_barras.html).
+- Actividad asociando [eventos](./logica_de_programacion_3/act_asociar_eventos_y_funcs.html)
+con funciones.
+- Circulos con un [click](./logica_de_programacion_3/programa4.html) izquierdo,
+cambiar color click derecho.
+- Animación [propia](./logica_de_programacion_3/programa5.html),
+[original](./logica_de_programacion_3/programa5_instructor.html).
+- Disparando en el [blanco](./logica_de_programacion_3/programa6.html).
+- Actividad dibujando con el [mouse](./logica_de_programacion_3/dibujando_mouse.html).
+
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/ano_mundial_fifa.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/ano_mundial_fifa.html
new file mode 100644
index 0000000..b8092d1
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/ano_mundial_fifa.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Años de Mundiales FIFA</title>
+    </head>
+    <body>
+        <h2>Año Mundiales FIFA</h2>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            var año_mundial = 1930;
+            var limite = parseInt(prompt("Hasta que año quieres calcular los mundiales?"));
+            while (año_mundial <= limite){
+                imprimir("Hubo mundia FIFA el año "+ año_mundial);
+                año_mundial += 4;
+            }
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/calculo_consumo.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/calculo_consumo.html
new file mode 100644
index 0000000..c36415e
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/calculo_consumo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Cálculo de consumo</title>
+    </head>
+    <body>
+        <h3>¿Alcohol o gasolina?</h3>
+        <script>
+
+            var capacidad = 40;
+            var recorrido = 480;
+            var rendimiento = Math.round(recorrido/capacidad);
+
+            document.write("<h4>Cálculo de rendimiento para vehículo a gasolina</h4>");
+            document.write("Para un estanque de "+capacidad+" lts. que recorre "+recorrido+" kms. ");
+            document.write("El rendimiento es de "+rendimiento+" kms/lt.</br></br>")
+
+            recorrido = 300;
+            rendimiento = Math.round(recorrido/capacidad);
+            document.write("<h4>Cálculo de rendimiento para vehículo a alcohol</h4>");
+            document.write("Para un estanque de "+capacidad+" lts. que recorre "+recorrido+" kms. ");
+            document.write("El rendimiento es de "+rendimiento+" kms/lt.</br></br>")
+
+        </script>
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/calculo_diff_edades.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/calculo_diff_edades.html
new file mode 100644
index 0000000..390a775
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/calculo_diff_edades.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Cálculo Diferencia de Edades</title>
+    </head>
+    <body>
+        <h3>Diferencia de edades</h3>
+        </br>
+        <script>
+
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            var edad1 = 35;
+            var edad2 = 26;
+            var diferencia = edad1-edad2;
+            imprimir("La edad de Pepe es "+ edad1 +" años.");
+            imprimir("La edad de Juan es "+ edad2 +" años.");
+            imprimir("La diferencia en las edades de Pepe y Juan es de  "+diferencia+" años.");
+
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/conducir.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/conducir.html
new file mode 100644
index 0000000..1214390
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/conducir.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Juego de Adivinación</title>
+    </head>
+    <body>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+            var edad = parseInt(prompt("¿Cual es tu edad?"));
+            if (edad >= 18){
+                var tiene_licencia = prompt("¿Tiene liciencia?, Responde S o N");
+                if (tiene_licencia == "S"){
+                    imprimir("Puedes conducir.");
+                } else if (tiene_licencia == "N"){
+                    imprimir("No puedes conducir.");
+                } else {
+                    imprimir("Debes responder 'S' o 'N'");
+                }
+            } else if (edad < 18 || tiene_licencia == "N") {
+                imprimir("No puedes conducir.");
+            }
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/estrellas.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/estrellas.html
new file mode 100644
index 0000000..974cfc6
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/estrellas.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Juego de Adivinación</title>
+    </head>
+    <body>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            function estrellas(lineas=1, columnas=10){
+                for(var repetir=0; repetir <= lineas; repetir++){
+                    imprimir("*".repeat(columnas));
+                }
+            }
+
+            estrellas();
+            saltar_linea(2);
+            estrellas(5,50);
+            saltar_linea(2);
+            estrellas(10,100);
+            saltar_linea(2);
+            separador();
+
+            // Lo visto en: cap02-vid05
+            for (var lineas = 1; lineas <= 3; lineas++){
+                for (var columnas = 1; columnas <= 10; columnas++){
+                    document.write("*");
+                }
+                saltar_linea();
+            }
+            saltar_linea();
+            
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/futbol.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/futbol.html
new file mode 100644
index 0000000..c4eac9a
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/futbol.html
@@ -0,0 +1,50 @@
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Futbol</title>
+    </head>
+    <body>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            var nombre = parseInt(prompt("parseInt(str) -> Not-a-Number -> NaN\n\nIngresa tu nombre:"));
+            //var nombre = prompt("(Ingresa tu nombre");
+            imprimir(nombre);
+
+            var victorias = parseInt(prompt("Ingresar cantidad de victorias:"));
+            var empates = parseInt(prompt("Ingresar cantidad de empates:"));
+
+            var puntos_total = (victorias * 3) + empates;
+
+            imprimir("El equipo tiene "+ puntos_total +" puntos.");
+
+            if (puntos_total > 28){
+                imprimir("El equipo esta mejor que el año pasado"); 
+            } else if (puntos_total < 28){
+                imprimir("El equipo esta peor el año pasado"); 
+            } else if (puntos_total == 28){
+                imprimir("El equipo esta igual que el año pasado"); 
+            } else {
+                imprimir("Como llegué aquí?, quizas ingresaste letras en vez de numeros?");
+            }
+
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/imc2.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/imc2.html
new file mode 100644
index 0000000..7d1a1ce
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/imc2.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title></title>
+    </head>
+    <body>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            function calcular_imc(nombre, peso, altura){
+                if (peso%(altura*altura) > 0 ){
+                    imc = (peso/(altura*altura)).toFixed(3);
+                } else {
+                    imc = (peso/(altura*altura));
+                }
+                return [nombre, imc];
+            }
+
+            function imprimir_imc(nombre, peso, altura){
+                imc = calcular_imc(nombre, peso, altura);
+                imprimir("El IMC de "+ nombre +" es :"+ imc[1]);
+                // Categorías imc
+                // Insuficiencia ponderal < 18.5
+                // Intervalo normal       18.5 - 24.9
+                // Sobrepeso              >= 25.0
+                // Preobesidad            25.0 - 29.9
+                // Obesidad               >= 30.0
+                if (imc[1] < 18.5){
+                    imprimir("IMC - Bajo la norma");
+                } else if (imc[1] >= 18.5 &&  imc[1] <= 24.9) {
+                    imprimir("IMC - Intervalo normal");
+                } else if (imc[1] >= 25.0 && imc[1] <= 29.9) {
+                    imprimir("IMC - Sobrepeso");
+                } else if (imc[1] >= 30.0) {
+                    imprimir("IMC - Obesidad");
+                } else {
+                    imprimir("Error con imc : "+imc[1]);
+                }
+                saltar_linea();
+            }
+
+            imprimir_imc("Pepe", 75, 1.72);
+            saltar_linea();
+
+            imprimir_imc("Jacinta", 75, 1,45);
+            saltar_linea();
+
+            function promImc(persona1, persona2){
+                var prom_imc = (persona1[1]+persona2[1])/2;
+                imprimir("El promedio del IMC de "+persona1[0]+" y "+persona2[0]+" es :"+prom_imc);
+                saltar_linea();
+            }
+
+            personaA = calcular_imc("Pepe", 75, 1.72);
+            personaB = calcular_imc("Jacinta", 75, 1,45);
+            promImc(personaA, personaB);
+
+            
+            function imc_interactivo() {
+                entrada_nombre = prompt("Ingresa tu nombre:");
+                entrada_peso = prompt("Ingresa tu peso:");
+                entrada_altura = prompt("Ingresa tu altura:");
+                imprimir_imc(entrada_nombre, entrada_peso, entrada_altura);
+            }
+
+            imc_interactivo();
+
+
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/imprimir_edades2.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/imprimir_edades2.html
new file mode 100644
index 0000000..03ef8d6
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/imprimir_edades2.html
@@ -0,0 +1,23 @@
+<meta charset="UTF-8">
+<script>
+
+// saltarLinea() { ----> Uncaught SyntaxError: Unexpected token '{' (at imprimir_edades2.html:5:17)
+// function saltarLinea { ----> Uncaught SyntaxError: Unexpected token '{' (at imprimir_edades2.html:6:22)
+function saltarLinea() {
+    document.write("</br>".repeat(3));
+    document.write("</hr>");
+    document.write("</br>".repeat(2));
+}
+
+function imprimir(frase) {
+    document.write("<big>"+frase+"</big>");
+    saltarLinea();
+}
+var anho = 2025;
+    imprimir("hola amigos");
+    // este código calcula las edades de Juan, Pedro y Carlos
+    imprimir("Juan tiene: " + (anho-2000) + " años");
+    imprimir("Pedro tiene: " + (anho-1995) + " años");
+    anho = 2030
+    imprimir("Carlos tiene: " + (anho-2005) + " años");
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/indice_masa_corporal.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/indice_masa_corporal.html
new file mode 100644
index 0000000..0d21eae
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/indice_masa_corporal.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title></title>
+    </head>
+    <body>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            function calcular_imc(nombre, peso, altura){
+                if (peso%(altura*altura) > 0 ){
+                    imc = (peso/(altura*altura)).toFixed(3);
+                } else {
+                    imc = (peso/(altura*altura));
+                }
+                return [nombre, imc];
+            }
+
+            function imprimir_imc(nombre, peso, altura){
+                imc = calcular_imc(nombre, peso, altura);
+                imprimir("El IMC de "+ nombre +" es :"+ imc[1]);
+            }
+
+            imprimir_imc("Pepe", 75, 1.72);
+            saltar_linea();
+
+            imprimir_imc("Jacinta", 75, 1,45);
+            saltar_linea();
+
+            function promImc(persona1, persona2){
+                var prom_imc = (persona1[1]+persona2[1])/2;
+                imprimir("El promedio del IMC de "+persona1[0]+" y "+persona2[0]+" es :"+prom_imc);
+                saltar_linea();
+            }
+
+            personaA = calcular_imc("Pepe", 75, 1.72);
+            personaB = calcular_imc("Jacinta", 75, 1,45);
+            promImc(personaA, personaB);
+
+            
+            function imc_interactivo() {
+                entrada_nombre = prompt("Ingresa tu nombre:");
+                entrada_peso = prompt("Ingresa tu peso:");
+                entrada_altura = prompt("Ingresa tu altura:");
+                imprimir_imc(entrada_nombre, entrada_peso, entrada_altura);
+            }
+
+            imc_interactivo();
+
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_adivinacion.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_adivinacion.html
new file mode 100644
index 0000000..c590d1f
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_adivinacion.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Juego de Adivinación</title>
+    </head>
+    <body>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+            var numero_pensado = Math.round(Math.random()*10);
+            imprimir("Numero: "+ numero_pensado);
+            var numero_lanzado = parseInt(prompt("Ingesa un ńumero entre 0-10"));
+            if (numero_pensado == numero_lanzado){
+                imprimir("Ganaste!!!");
+            } else if (numero_lanzado > numero_pensado){
+                imprimir("Muy alto!");
+            } else if (numero_lanzado < numero_pensado){
+                imprimir("Muy bajo!");
+            }
+
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_adivinacion_2.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_adivinacion_2.html
new file mode 100644
index 0000000..0408e12
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_adivinacion_2.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Juego de Adivinación</title>
+    </head>
+    <body>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+            var numero_pensado = Math.round(Math.random()*10);
+            var intentos = 3;
+            var contador = 1;
+            alert("Numero: "+ numero_pensado);
+
+            while (contador <= intentos){
+                var numero_lanzado = parseInt(prompt("Ingesa un ńumero entre 0-10"));
+                if (numero_pensado == numero_lanzado){
+                    alert("Ganaste!!!");
+                    imprimir("<h1>GANASTE!!!</h1>")
+                    imprimir("Solo te tomo "+contador+" intento(s).");
+                    brake;
+                } else if (numero_lanzado > numero_pensado){
+                    alert("(intento "+contador+" de "+intentos+") - Muy alto!");
+                } else if (numero_lanzado < numero_pensado){
+                    alert("(intento "+contador+" de "+intentos+") - Muy bajo!");
+                }
+                contador++;
+            }
+            alert("Perdiste!!!");
+            imprimir("<h1>PERDISTE!!!</h1>")
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_secreto.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_secreto.html
new file mode 100644
index 0000000..1655226
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_secreto.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Juego de Adivinación</title>
+    </head>
+    <body>
+        <input/>
+        <button>Verficar acierto</button>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            alert("\nAdivina el Número Secreto\n\nIngresa un ńumero del 0 al 10");
+            var secreto = Math.round(Math.random()*10);
+            imprimir(secreto);
+            var input = document.querySelector("input");
+            var button = document.querySelector("button");
+            input.focus();
+            var intentos = 3;
+            var contador = 1;
+            function verificar(){
+                alert("Cont: "+contador);
+                if (contador <= intentos){
+                    var entrada = parseInt(input.value);
+                    if (entrada == secreto) {
+                        alert("\nADIVINASTE el numero secreto!!!\n\nSolo te tomo "+contador+" intento(s).");
+                        location.reload();
+                    } else if (entrada > secreto){
+                        alert("\n(intento "+contador+" de "+intentos+") - Muy alto!");
+                    } else if (entrada < secreto){
+                        alert("\n(intento "+contador+" de "+intentos+") - Muy bajo!");
+                    }
+                    contador++;
+                }
+                if (contador > intentos) {
+                    alert("\nPERDISTE\n\nel número secreto era : " + secreto);
+                    location.reload();
+                }
+                //contador++;
+                alert("Cont: "+contador);
+                input.value = "";
+                input.focus();
+            }
+            button.onclick = verificar;
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_secreto2.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_secreto2.html
new file mode 100644
index 0000000..3c6b163
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/juego_secreto2.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Juego de Adivinación 2</title>
+    </head>
+    <body>
+        <input/>
+        <button>Verficar acierto</button>
+        <script>
+            function aleatorio(){
+                return Math.round(Math.random()*10);
+            }
+            
+            function sortearNumeros(cantidad){
+                var secretos = [];
+                var contador = 1;
+                while(contador<=cantidad){
+                    numero_aleatorio = aleatorio();
+                    console.log(numero_aleatorio);
+                    if (!secretos.includes(numero_aleatorio) && (numero_aleatorio != 0)) {
+                        secretos.push(numero_aleatorio);
+                        contador++;
+                    }
+                }
+                return secretos
+            }
+
+            var secretos = sortearNumeros(4);
+            console.log(secretos);
+
+            var input = document.querySelector("input");
+            input.focus();
+
+            function verificar(){
+                var encontrado = false;
+                for (var posicion = 0; posicion < secretos.length; posicion++){
+                    if (parseInt(input.value) == secretos[posicion]){
+                        encontrado = true;
+                        break;
+                    }
+                }       
+                if (encontrado){
+                    alert("Acertaste");
+                    //location.reload();
+                } else {
+                    alert("Error");
+                    //location.reload();
+                }
+                input.value = "";
+                input.focus();
+            }
+            var button = document.querySelector("button");
+            button.onclick = verificar;
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/media_edad_familiar.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/media_edad_familiar.html
new file mode 100644
index 0000000..e98ae4b
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/media_edad_familiar.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Media Familiar</title>
+    </head>
+    <body>
+        <h2>Media edades familia</h2>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            var nro_miembros = parseInt(prompt("Cuantos miembros componen la familia?"));
+            var contador = 1;
+            var total_edades = 0;
+            while (contador <= nro_miembros){
+                var edad = parseInt(prompt("Ingresa la edad del familiar "+contador+" de "+nro_miembros));
+                total_edades += edad;
+                contador++;
+            }
+            var media = (total_edades/nro_miembros);
+            imprimir("La media de las edades es "+media);
+        </script>
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/primer_test.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/primer_test.html
new file mode 100644
index 0000000..bd6a731
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/primer_test.html
@@ -0,0 +1,15 @@
+<meta charset="UTF-8">
+
+<h1>mi primer archivo HTML</h1>
+</br></br></br></br>
+
+Será esto realmente un "programa"? Descubralo <a href="https://es.wikipedia.org/wiki/HTML" target="_blank">aquí</a>
+
+</br>
+ingresa <a href="https://es.wikipedia.org/wiki/JavaScript" target="_blank">aquí</a> para ver un verdadero lenguaje de programación
+</br>
+
+<script>
+    alert("Esto es JavaScript: alert()");
+</script>
+
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/programa.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/programa.html
new file mode 100644
index 0000000..a5c15e2
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/programa.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title></title>
+    </head>
+    <body>
+        <!-- comentario html
+        <h3>HTML</h3>
+        Definiendo la edad de Juanito</br>
+        La edad de Juanito es ...</br>?
+        -->
+        </br>
+        <script>
+            // COMMENT
+            document.write("<!--");
+            //alert("La edad de Juanito es ...");
+            //alert("?");
+            document.write("<h3>JavaScript</h3>");
+            document.write("La edad de Juanito es ...</br>");
+            document.write("25 str");
+            document.write("</br>");
+            document.write(100/4);
+            document.write("</br>");
+            document.write("20" + 5);
+            document.write("</br>");
+            
+            document.write("</br></hr></br>");
+
+            document.write("El año de nacimiento es Louis es...</br>");
+            document.write(2023-38);
+
+            document.write("</br></hr></br>");
+
+            document.write("El promedio de edad de Juan, Pedro, Carlos es...");
+            document.write("<br>");
+            document.write((20+25+13)/3);
+            document.write("<br>");
+            document.write("la suma no funciona sin parentensis 20+25+15 = "+20+25+13);
+            document.write("<br>");
+            document.write("El promedio de edad de Juan, Pedro, Carlos es..."+(20+25+13)/3);
+            document.write("<br>");
+            
+            document.write("</br></hr></br>");
+
+            document.write("Juan nacio en el año...");
+            document.write("</br>");
+            document.write(2023 - 20);
+            document.write("</br></br>");
+
+            document.write("Pedro nacio en el año...");
+            document.write("</br>");
+            document.write(2023 - 25);
+            document.write("</br></br>");
+
+            document.write("Carlos nacio en el año...");
+            document.write("</br>");
+            document.write(2023 - 13);
+            document.write("</br></br>");
+
+            document.write("</br></hr></br>");
+            document.write("-->");
+            // END-COMMENT
+
+
+            
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            document.write("<h2>Logica de programación, primeros pasos 03 Variables</h2>");
+            saltar_linea();
+            
+            ano = 2030;
+            document.write("Año "+ano+" | Juan tiene: "+ (ano-2000) +" años.");
+            saltar_linea(2);
+            document.write("Año "+ano+" | Pedro tiene: "+ (ano-1995) +" años.");
+            saltar_linea(2);
+            document.write("Año "+ano+" | Carlos tiene: "+ (ano-2005) +" años.");
+            saltar_linea(2);
+            
+            var ano = 2023;
+            document.write("Año "+ano+" | Juan tiene: "+ (ano-2000) +" años.");
+            saltar_linea(2);
+            document.write("Año "+ano+" | Pedro tiene: "+ (ano-1995) +" años.");
+            saltar_linea(2);
+            document.write("Año "+ano+" | Carlos tiene: "+ (ano-2005) +" años.");
+            saltar_linea(2);
+
+            var edad_juan = ano-2000;
+            var edad_pedro = ano-1995;
+            var edad_carlos = ano-2005;
+
+            var nombre1 = "Juan";
+            var nombre2 = "Pedro";
+            var nombre3 = "Carlos";
+
+            var promedio = (edad_juan + edad_pedro + edad_carlos)/3
+            promedio = Math.round(promedio)
+            saltar_linea();
+            document.write("El promedio de edad de "+nombre1+", "+nombre2+" y "+nombre3+" es: "+ promedio+" años.");
+            saltar_linea();
+
+            separador();
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            imprimir("Imprimiendo con mi función imprimir()");
+            imprimir("Mi función tiene salto de linea por defecto");
+
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/recetas_armando.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/recetas_armando.html
new file mode 100644
index 0000000..47f196e
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/recetas_armando.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ingredientes repetidos no!</title>
+    </head>
+    <body>
+        <h1>Recetas de Armando</h1>
+        <script>
+            var ingredientes = [];
+            var cantidad = parseInt(prompt("¿Cuántos ingredientes vas a añadir?"));
+            var contador = 1;
+
+            document.write("<ul>");
+            while( contador <= cantidad) {
+                var ingrediente = prompt("Informe el ingrediente " + contador);
+                if (!ingredientes.includes(ingrediente)){
+                    ingredientes.push(ingrediente);
+                    contador++;
+                    document.write("<li>"+ingrediente+"</li>");
+                } else {
+                    alert("Ingrediente Repetido");
+                }
+            }
+            document.write("</ul>");
+            console.log(ingredientes);
+        </script>
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/simulacion_inicio_sesion.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/simulacion_inicio_sesion.html
new file mode 100644
index 0000000..a0aa0f2
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/simulacion_inicio_sesion.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Ejercicio Inicio de Sesión</title>
+    </head>
+    <body>
+        <h2>Inicio de sesión</h2>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            var usuario_registrado = "alura";
+            var password_registrado = "alura321";
+            var intentos = 3;
+            var contador = 0;
+
+            while (contador < intentos){
+                var usuario_entrada = prompt("Ingresa tu nombre de usuario");
+                var passwd_entrada = prompt("Ingresa tu contraseña");
+                if (usuario_entrada == usuario_registrado && passwd_entrada == password_registrado){
+                    alert("Bienvenido al sistema " + usuario_entrada);
+                    imprimir("Sesion Iniciada: "+ usuario_entrada);
+                    brake;
+                }
+                contador++;
+                if (contador < intentos){
+                    alert("("+contador+") Datos incorrectos, favor intentar nuevamente");
+                } else {
+                    alert("("+contador+") Datos incorrectos, volver a intentar en 5 minutos");
+                    imprimir("Login bloqueado durante 5 minutos");
+                }
+            }
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/tablas_multiplicar.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/tablas_multiplicar.html
new file mode 100644
index 0000000..0b40ea4
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/tablas_multiplicar.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>While y For</title>
+    </head>
+    <body>
+        <h2>Ciclos while y for</h2>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function separador(){
+                saltar_linea();
+                document.write("</hr>");
+                saltar_linea();
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            var año_mundial = 1930;
+            var numero = parseInt(prompt("Ingresa un número para mostrar su tabla de multiplicar"));
+            var contador = 1;
+            imprimir("Ciclo while");
+            while (contador <= 10){
+                imprimir(numero+" x "+contador+" = "+(numero*contador));
+                contador ++;
+            }
+
+            saltar_linea();
+            imprimir("Ciclo for");
+            for (var multiplicador = 1; multiplicador <= 10; multiplicador++){
+                imprimir(numero+" x "+multiplicador+" = "+(numero*multiplicador));
+            }
+        </script>
+        
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_1-2/test_while.html b/002-003_logica_de_programacion/logica_de_programacion_1-2/test_while.html
new file mode 100644
index 0000000..4822294
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_1-2/test_while.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Pares de 1 al 100</title>
+    </head>
+    <body>
+        <h2>Imprimir números pares del 1 al 100</h2>
+        <script>
+            function saltar_linea(cantidad=1){
+                document.write("</br>".repeat(cantidad));
+            }
+
+            function imprimir(cadena){
+                document.write(cadena);
+                saltar_linea();
+            }
+
+            var limite = 100;
+            var contador = 1;
+            while (contador <= limite){
+                if (contador % 2 == 0){
+                    imprimir(contador);
+                }
+                contador++;
+            }
+            imprimir("FIN");
+        </script>
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/act_asociar_eventos_y_funcs.html b/002-003_logica_de_programacion/logica_de_programacion_3/act_asociar_eventos_y_funcs.html
new file mode 100644
index 0000000..d256b39
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/act_asociar_eventos_y_funcs.html
@@ -0,0 +1,26 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");    
+    pincel.fillStyle = "grey";
+    pincel.fillRect(0,0,600,400); 
+
+    function mostrarMensaje(evento){
+        var x = evento.pageX - pantalla.offsetLeft; //pos x
+        var y = evento.pageY - pantalla.offsetTop; //pos y
+        var d = new Date(); //crea una variable de tipo date
+        var hora = checkTime(d.getHours()) + ":" + checkTime(d.getMinutes()) + ":" + checkTime(d.getSeconds());
+        //Verifica si el número de las horas, minutos o segundos, tiene un solo dígito, 
+        //caso positivo le adiciona el cero en la frente para obtener el formato deseado 00:00:00
+        function checkTime(i){
+            if (i<10){
+                i="0" + i;
+            }
+            return i;
+        }
+        alert("La hora es: " + hora + " y las coordenadas son: x=" + x + ", y=" + y);
+    }
+    // Aquí viene la llamada a la función con el evento onclick
+    pantalla.onclick = mostrarMensaje;
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/creeper.html b/002-003_logica_de_programacion/logica_de_programacion_3/creeper.html
new file mode 100644
index 0000000..f40d359
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/creeper.html
@@ -0,0 +1,39 @@
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>La Cara del Creeper</title>
+    </head>
+    <body>
+        <canvas width="600" height="400"> </canvas>
+        <script>
+            var pantalla = document.querySelector("canvas");
+            var pincel = pantalla.getContext("2d");
+            // propio
+            pincel.fillStyle = "white";
+            pincel.fillRect(0,0,600,400);
+            pincel.fillStyle = "darkgreen";
+            pincel.fillRect(125,50,350,300);
+            pincel.fillStyle = "black";
+            pincel.fillRect(175,100,90,90);
+            pincel.fillRect(335,100,90,90);
+            pincel.fillRect(265,190,70,110);
+            pincel.fillRect(225,240,40,110);
+            pincel.fillRect(335,240,40,110);
+            
+            // instructor
+            //pincel.fillStyle = "white";
+            //pincel.fillRect(0,0,600,400);
+            //pincel.fillStyle = "darkgreen";
+            //pincel.fillRect(200,50,350,300);
+            //pincel.fillStyle = "black";
+            //pincel.fillRect(250,110,90,90);
+            //pincel.fillRect(410,110,90,90);
+            //pincel.fillRect(340,200,70,100);
+            //pincel.fillRect(300,240,40,110);
+            //pincel.fillRect(410,240,40,110);
+        </script>
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/dibujando_mouse.html b/002-003_logica_de_programacion/logica_de_programacion_3/dibujando_mouse.html
new file mode 100644
index 0000000..eb81708
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/dibujando_mouse.html
@@ -0,0 +1,63 @@
+<canvas width="600" height="400"></canvas>
+<script>
+    var pantalla = document.querySelector('canvas');
+    var pincel = pantalla.getContext('2d');
+    var color='yellow';
+
+    pincel.fillStyle = 'magenta';
+    pincel.fillRect(0, 0, 600, 400);
+
+    function dibujar_cuadrado(pos_x,pos_y, color, borde){
+        pincel.fillStyle = color;
+        pincel.strokeStyle = borde;
+        pincel.fillRect(pos_x,pos_y,30,30);
+        pincel.strokeRect(pos_x,pos_y,30,30);
+    }
+
+    dibujar_cuadrado(20, 20, "yellow", "black");
+    dibujar_cuadrado(50, 20, "cyan", "black");
+    dibujar_cuadrado(80, 20, "brown", "black");
+
+    function cambiar_color(evento){
+        var pos_x = evento.pageX - pantalla.offsetLeft;
+        var pos_y = evento.pageY - pantalla.offsetTop;
+        if ((pos_y >= 20) && (pos_y <= 50)) {
+            if ((pos_x >= 20 && pos_x <=50)) {
+                color = "yellow";
+            } else if ((pos_x >= 50) && (pos_x <=80)) {
+                color = "cyan";
+            } else if ((pos_x >= 80) && (pos_x <=120)) {
+                color = "brown";
+            }
+        }
+    }
+
+    pantalla.onclick = cambiar_color;
+    
+    var puedoDibujar = false;
+
+    function dibujarCirculo(evento) {
+        if(puedoDibujar) {
+            var x = evento.pageX - pantalla.offsetLeft;
+            var y = evento.pageY - pantalla.offsetTop;
+            pincel.fillStyle = color;
+            pincel.beginPath();
+            pincel.arc(x, y, 5, 0, 2 * 3.14);
+            pincel.fill();
+        }
+    }
+
+    pantalla.onmousemove = dibujarCirculo;
+
+    function habilitarDibujar() {
+        puedoDibujar = true;
+    }
+
+    function deshabilitarDibujar(){
+        puedoDibujar = false;
+    }
+
+    pantalla.onmousedown = habilitarDibujar;
+    pantalla.onmouseup = deshabilitarDibujar;
+
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/dibujar_circulo.html b/002-003_logica_de_programacion/logica_de_programacion_3/dibujar_circulo.html
new file mode 100644
index 0000000..a23d018
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/dibujar_circulo.html
@@ -0,0 +1,26 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+    pincel.fillStyle = "lightblue"; // propiedad
+    pincel.fillRect(0,0,600,400); // función
+
+    function dibujar_circulo(pos_x,pos_y, radio, color){
+        pincel.fillStyle = color;
+        pincel.strokeStyle = "brown";
+        pincel.beginPath();
+        pincel.arc(pos_x,pos_y, radio, 0, 2*3.14);
+        pincel.fill();
+    }
+    
+    function dibujar_flor(pos_x, pos_y){
+        dibujar_circulo( pos_x, pos_y+40, 20, "red");
+        dibujar_circulo( pos_x, pos_y, 20, "black");
+        dibujar_circulo( pos_x, pos_y-40, 20, "green");
+        dibujar_circulo( pos_x-40, pos_y, 20, "yellow");
+        dibujar_circulo( pos_x+40, pos_y, 20, "blue");
+    }
+
+    dibujar_flor(300,200);
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/escuadra.html b/002-003_logica_de_programacion/logica_de_programacion_3/escuadra.html
new file mode 100644
index 0000000..3c64f13
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/escuadra.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Escuadra</title>
+    </head>
+    <body>
+        <canvas width="600" height="400"> </canvas>
+        <script>
+            var pantalla = document.querySelector("canvas");
+            var pincel = pantalla.getContext("2d");
+
+            pincel.fillStyle = "black";
+            pincel.fillRect(0,0,600,400);
+
+            pincel.fillStyle = "magenta";
+            pincel.beginPath();
+            pincel.moveTo(50, 50);
+            pincel.lineTo(50,400);
+            pincel.lineTo(400,400);
+            pincel.fill();
+            
+            pincel.fillStyle = "black";
+            pincel.beginPath();
+            pincel.moveTo(100, 175);
+            pincel.lineTo(100,350);
+            pincel.lineTo(275,350);
+            pincel.fill();
+
+
+            //pincel.fillStyle = "white";
+            //pincel.fillRect(0,0,600,400);
+            //pincel.fillStyle = "darkgreen";
+            //pincel.fillRect(125,50,350,300);
+            //pincel.fillStyle = "black";
+            //pincel.fillRect(175,100,90,90);
+            //pincel.fillRect(335,100,90,90);
+            //pincel.fillRect(265,190,70,110);
+            //pincel.fillRect(225,240,40,110);
+            //pincel.fillRect(335,240,40,110);
+        </script>
+    </body>
+</html>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/grafico_barras.html b/002-003_logica_de_programacion/logica_de_programacion_3/grafico_barras.html
new file mode 100644
index 0000000..d734cb0
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/grafico_barras.html
@@ -0,0 +1,45 @@
+<canvas width="600" height="400"></canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+
+    pincel.fillStyle="white";
+    pincel.fillRect(0,0,600,400);
+
+
+    function dibujarRectangulo(pos_x, pos_y, base, altura, color) {
+        var pantalla = document.querySelector("canvas");
+        var pincel = pantalla.getContext("2d");
+
+        pincel.fillStyle=color;
+        pincel.fillRect(pos_x,pos_y, base, altura);
+        pincel.strokeStyle="black";
+        pincel.strokeRect(pos_x,pos_y, base, altura);
+    }
+
+    function escribirTexto(pos_x, pos_y, texto) {
+        var pantalla = document.querySelector("canvas");
+        var pincel = pantalla.getContext("2d");
+
+        pincel.font="15px Georgia";
+        pincel.fillStyle="black";
+        pincel.fillText(texto, pos_x, pos_y);    
+    }
+
+    var serie2009 = [6, 47, 41, 3, 3];
+    var serie2019 = [81, 9, 3, 3, 4];
+    var colores = ["blue","green","yellow", "red","gray"];
+    
+    function dibujar_barra(pos_x, pos_y, serie, colores, texto){
+        escribirTexto(pos_x+8, pos_y-10, texto)
+        for (indice = 0; indice < serie.length; indice++){
+            dibujarRectangulo(pos_x, pos_y, 50, serie[indice], colores[indice])
+            pos_y += serie[indice];
+        }
+
+    }
+   dibujar_barra(50, 50, serie2009, colores, "2009")
+   dibujar_barra(150, 50, serie2019, colores, "2019")
+
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/programa.html b/002-003_logica_de_programacion/logica_de_programacion_3/programa.html
new file mode 100644
index 0000000..23a6e8f
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/programa.html
@@ -0,0 +1,16 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+    // Fondo
+    pincel.fillStyle = "magenta"; // propiedad
+    pincel.fillRect(0,0,600,400); // función
+
+    // Primer Tercio
+    pincel.fillStyle = "yellow"; // propiedad
+    pincel.fillRect(0,0,200,400); // función
+    // Tercer Tercio
+    pincel.fillStyle = "cyan"; // propiedad
+    pincel.fillRect(400,0,600,400); // función
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/programa2.html b/002-003_logica_de_programacion/logica_de_programacion_3/programa2.html
new file mode 100644
index 0000000..55efbfa
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/programa2.html
@@ -0,0 +1,26 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+    // Fondo
+    pincel.fillStyle = "magenta"; // propiedad
+    pincel.fillRect(0,0,600,400); // función
+
+    // Primer Tercio
+    pincel.fillStyle = "yellow"; // propiedad
+    pincel.fillRect(0,0,200,400); // función
+    // Tercer Tercio
+    pincel.fillStyle = "cyan"; // propiedad
+    pincel.fillRect(400,0,600,400); // función
+
+    pincel.fillStyle = "black";
+    pincel.beginPath();
+    pincel.moveTo(300,200);
+    pincel.lineTo(200,400);
+    pincel.lineTo(400,400);
+    pincel.moveTo(300,200);
+    pincel.lineTo(200,0);
+    pincel.lineTo(400,0);
+    pincel.fill();
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/programa3.html b/002-003_logica_de_programacion/logica_de_programacion_3/programa3.html
new file mode 100644
index 0000000..b108513
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/programa3.html
@@ -0,0 +1,36 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+    pincel.fillStyle = "magenta"; // propiedad
+    pincel.fillRect(0,0,600,400); // función
+
+    function dibujar_cuadrado(pos_x,pos_y, color, borde){
+        pincel.fillStyle = color;
+        pincel.strokeStyle = borde;
+        pincel.fillRect(pos_x,pos_y,50,50);
+        pincel.strokeRect(pos_x,pos_y,50,50);
+    }
+
+    // Semaforo
+    //dibujar_cuadrado(0,0,"red","black");
+    //dibujar_cuadrado(0,50,"yellow","black");
+    //dibujar_cuadrado(0,100,"green","black");
+
+    var x = 0;
+    while (x <= 600){
+        dibujar_cuadrado(x,200,"yellow","black");
+        dibujar_cuadrado(x,250,"green","black");
+        dibujar_cuadrado(x,300,"red","black");
+        dibujar_cuadrado(x,350,"yellow","black");
+        x += 50;
+    }
+
+    for (let x=0; x<=600; x+=50){
+        dibujar_cuadrado(x,0,"red","black");
+        dibujar_cuadrado(x,50,"yellow","black");
+        dibujar_cuadrado(x,100,"green","black");
+        dibujar_cuadrado(x,150,"red","black");
+    }
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/programa4.html b/002-003_logica_de_programacion/logica_de_programacion_3/programa4.html
new file mode 100644
index 0000000..410a240
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/programa4.html
@@ -0,0 +1,37 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+    pincel.fillStyle = "magenta"; // propiedad
+    pincel.fillRect(0,0,600,400); // función
+    
+    var colores = [ "orange", "cyan", "green" ];
+    var color = colores[0];
+
+    function alterarColor() {
+        if (colores.indexOf(color) == (colores.length-1) ) {
+            color = colores[0];
+        } else {
+            color = colores[colores.indexOf(color)+1];
+        }
+        return false;
+    }
+
+    function alerta(evento){
+        var pos_x = evento.pageX - pantalla.offsetLeft;
+        var pos_y = evento.pageY - pantalla.offsetTop;
+
+        pincel.fillStyle = color;
+        pincel.beginPath();
+        pincel.arc(pos_x, pos_y, 10, 0, 2*3.14);
+        pincel.fill();
+        console.log(pos_x + "," + pos_y);
+        //alert("Click!!! "+evento); // diferente segúng navegador ffox o chrome
+        //alert("\nClick en: "+pos_x+", "+ pos_y);
+    }
+
+    pantalla.onclick = alerta;
+    pantalla.oncontextmenu = alterarColor;
+
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/programa5.html b/002-003_logica_de_programacion/logica_de_programacion_3/programa5.html
new file mode 100644
index 0000000..87cc681
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/programa5.html
@@ -0,0 +1,46 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+    pincel.fillStyle = "magenta";
+    pincel.fillRect(0,0,600,400);
+
+    function crear_circunferencia(pos_x, pos_y, radio){
+        pincel.fillStyle = "magenta";
+        pincel.beginPath();
+        pincel.arc(pos_x, pos_y, radio, 0, 2*Math.PI);
+        pincel.fill();
+    }
+    
+    function limpiar_pantalla(){
+        pincel.clearRect(0, 0, 600, 400);
+    }
+
+    var sentido = true;
+    var sentido2 = true;
+    var pos_x = 1;
+    var pos_y = 20;
+    function actualizar_pantalla(){
+        limpiar_pantalla();
+        crear_circunferencia(pos_x, pos_y, 10);
+        if ((pos_x == 590) || (pos_x == 0)){
+            sentido = !sentido;
+            if ((pos_y >= 370) || (pos_y == 20)) {
+                sentido2 = !sentido2;
+            }
+            if (sentido2){
+                pos_y -= 20;
+            } else {
+                pos_y += 20;
+            }
+        }
+        if (sentido){
+            pos_x++;
+        } else {
+            pos_x--;
+        }
+    }
+
+    setInterval(actualizar_pantalla, 1);
+</script>
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/programa5_instructor.html b/002-003_logica_de_programacion/logica_de_programacion_3/programa5_instructor.html
new file mode 100644
index 0000000..4d46d46
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/programa5_instructor.html
@@ -0,0 +1,40 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");        
+    pincel.fillStyle = "lightgrey";
+    pincel.fillRect(0,0,600,400); 
+
+    function disenharCircunferencia(x,y,radio){
+        pincel.fillStyle = "blue";
+        pincel.beginPath();
+        pincel.arc(x,y,radio,0,2*Math.PI);
+        pincel.fill();
+    }    
+
+    function limpiarPantalla(){
+
+        pincel.clearRect(0,0,600,400);
+
+    }
+
+    var x = 0
+    var sentido = 1;
+
+    function actualizarPantalla(){
+
+        limpiarPantalla();
+        if(x > 600){
+            sentido = -1;
+        }else if(x < 0){
+            sentido = 1;
+        }
+
+        disenharCircunferencia(x,20,10);
+        x = x + sentido;
+    }
+
+    setInterval(actualizarPantalla,1);
+
+</script> 
diff --git a/002-003_logica_de_programacion/logica_de_programacion_3/programa6.html b/002-003_logica_de_programacion/logica_de_programacion_3/programa6.html
new file mode 100644
index 0000000..d2f0ff0
--- /dev/null
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/programa6.html
@@ -0,0 +1,68 @@
+<canvas width="600" height="400"> </canvas>
+
+<script>
+    var pantalla = document.querySelector("canvas");
+    var pincel = pantalla.getContext("2d");
+    var max_x = 600;
+    var max_y = 400;
+    var aleatorio_x;
+    var aleatorio_y;
+    pincel.fillStyle = "magenta";
+    pincel.fillRect(0,0,600,400);
+
+    var radio = 10;
+    var minimo = radio*3;
+
+    function crear_circunferencia(pos_x, pos_y, radio, color="black"){
+        pincel.fillStyle = color;
+        pincel.beginPath();
+        pincel.arc(pos_x, pos_y, radio, 0, 2*Math.PI);
+        pincel.fill();
+    }
+    
+    function limpiar_pantalla(){
+        pincel.clearRect(0, 0, 600, 400);
+    }
+
+    function crear_diana(pos_x, pos_y){
+        crear_circunferencia(pos_x,pos_y, radio*3+1, "black");
+        crear_circunferencia(pos_x,pos_y, radio*3, "red");
+        crear_circunferencia(pos_x,pos_y, radio*2, "white");
+        crear_circunferencia(pos_x,pos_y, radio, "red");
+    }
+
+    function posic_aleatoria(maximo){
+        let aleatorio = minimo+(Math.floor(Math.random()*(maximo-minimo*2)));
+        return aleatorio;
+        //@deprecated Validador
+        //if (aleatorio < minimo || aleatorio > (maximo-minimo)){
+        //    alert("me salí del canvas:\nMax="+maximo+"\nAleatorio: "+aleatorio+"\nradio="+radio);
+        //    posic_aleatoria(maximo);
+        //} else {
+        //    return aleatorio;
+        //}
+    }
+    
+    function actualizar_pantalla(){
+        limpiar_pantalla();
+        aleatorio_x = posic_aleatoria(max_x);
+        aleatorio_y = posic_aleatoria(max_y);
+        crear_diana(aleatorio_x, aleatorio_y);
+    }
+
+    setInterval(actualizar_pantalla, 800);
+
+    function disparar(evento){
+        var pos_x = evento.pageX - pantalla.offsetLeft;
+        var pos_y = evento.pageY - pantalla.offsetTop;
+        if ((pos_x < (aleatorio_x + radio)) &&
+            (pos_x > (aleatorio_x - radio)) &&
+            (pos_y < (aleatorio_y + radio)) &&
+            (pos_y > (aleatorio_y - radio))){
+            alert("Acertaste!!!");
+        }
+    }
+
+    pantalla.onclick = disparar;
+
+</script>
diff --git a/004_primeras_paginas/README.md b/004_primeras_paginas/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1aca1d5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,18 @@
+# Ruta Oracle One
+
+### Cursos Alura Latam
+
+Guia de cursos realizados en [alura](https://app.aluracursos.com/dashboard)
+para certificación ORACLE. Notas, apuntes, resumenes y actividades.
+
+[G5 ONE | Formación desarrollo personal](https://app.aluracursos.com/formacion-desarrollo-personal-grupo5-one).
+
+[G5 ONE | Formación programación - Primeros pasos](https://app.aluracursos.com/formacion-programacion-primeros-pasos-grupo5-one).
+
+### Guias de estudio
+
+- Introducción [Hello ONE](./hello_one.md).
+- [Desarrollo](./001_desarrollo_personal/README.md) Personal.
+- [Principiante](./002-003_logica_de_programacion/README.md) y conceptos
+primoridiales en programación.
+- Crea tus primeras [páginas Web](./004_primeras_paginas/README.md).