├── 01 - INTRO ├── README.md ├── images │ ├── atom.jpg │ ├── axe.png │ ├── bodyExample.jpeg │ ├── caniuse.png │ ├── confluence.png │ ├── espagueti.png │ ├── frameworks.png │ ├── hcj.png │ ├── lighthouse.png │ ├── mantenbilidad.jpg │ ├── mapa.jpg │ ├── mvc.png │ ├── notion.jpg │ ├── qefe1.gif │ ├── sdlc.jpg │ ├── sketchfigmaxd.png │ ├── steper.gif │ ├── structure.webp │ ├── sublime.jpg │ ├── uxui.jpg │ ├── vscode.jpeg │ └── wiki.png ├── practicas │ ├── 1.-Reqierimientos.doc │ ├── 1.-requerimientos.md │ ├── 2.-buyerPersona.md │ ├── 2.-persona.pdf │ ├── 3.-publicoObjetivo.md │ ├── 4.-wireframe.md │ ├── 5.-ui.md │ └── README.md └── temario │ ├── 1.-queEsFrontEnd.md │ ├── 2.-frontEndTecs.md │ ├── 3.-webDevSetup.md │ ├── 4.-estructuraWeb.md │ └── 5.-estructuraCodigo.md ├── 02 - HTML ├── README.md ├── images │ └── HTML.png ├── practicas │ └── README.md ├── programas │ ├── 1.-etiquetasBasicas.html │ ├── 2.-elementosCompuestos.html │ ├── 3.-layoutYRutas.html │ ├── Tacos El Jefe.png │ ├── atributosHTML.xlsx │ └── tacosElJefe.html └── temario │ ├── 1.-queEsHMTL.md │ ├── 2.-etiquetasBasicas.md │ ├── 3.-elementosCompuestos.md │ ├── 4.-acomodoNavegacion.md │ └── 5.-propiedades.md ├── 03 - CSS ├── README.md ├── images │ ├── fondo1.jpg │ └── fondo2.jpg ├── practica │ ├── README.md │ └── landingVacunación.png └── programas │ ├── 1.-selectores.html │ ├── 2.-colores.css │ ├── 2.-colores.html │ ├── 3.-fondos.css │ ├── 3.-fondos.html │ ├── 4.-textos.css │ ├── 4.-textos.html │ ├── flexbox.css │ ├── flexbox.html │ ├── mobile.css │ └── mobile.html ├── 04 - JS ├── README.md ├── images │ └── pokedex.jpg ├── practica │ └── README.md └── programas │ ├── 1.-intro.html │ ├── 1.-intro.js │ ├── 2.-funciones.html │ ├── 2.-funciones.js │ ├── 3.-navegador.html │ ├── 3.-navegador.js │ ├── 4.-pokedex.html │ └── 4.-pokedex.js ├── 05 - VUEJS ├── README.md ├── practica │ └── README.md └── programas │ ├── CDN │ ├── app.js │ ├── index.html │ └── style.css │ ├── CLI │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ └── main.js │ └── VUEX │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── Botones.vue │ ├── ColorCode.vue │ ├── ContadorCuadrado.vue │ └── Counter.vue │ ├── main.js │ ├── router │ └── index.js │ ├── store │ └── index.js │ └── views │ ├── AboutView.vue │ └── HomeView.vue ├── 06 - VUEX └── vuex.md ├── 07 - AZURE └── azure.md ├── README.md └── images └── frontend.gif /01 - INTRO/README.md: -------------------------------------------------------------------------------- 1 | # Introducción a la programación FrontEnd 2 | 3 | Bienvenido Explorer, estas entrando a tu misión en este camino para convertirte en un FullStack Developer; empezaremos con la parte del FrontEnd, en donde verás toda la magia de las interfaces, las interacciones y todo lo increíble que puedes construir con un teclado y unas cuantas líneas de código. 4 | 5 | En este módulo veremos las siguientes cosas. 6 | 7 | 1. **Programación FrontEnd** 8 | 9 | - [¿Qué es la programación FRONTEND?](./temario/1.-queEsFrontEnd.md) 10 | - [Tecnologías aplicadas](./temario/2.-frontEndTecs.md) 11 | - [SETUP de programación Web](./temario/3.-webDevSetup.md) 12 | - [Estructura de páginas web](./temario/4.-estructuraWeb.md) 13 | - [Estructura y limpieza de código](./temario/5.-estructuraCodigo.md) 14 | 15 | 2. **Prácticas de Introducción** 16 | 17 | - [Prácticas](./practicas//README.md) 18 | 19 | Para entrar a los contenidos solo tienes que dar click en el título y empezará la aventura. 20 | 21 | **_¡Vámonos hasta el espacio y más allá Explorers!_** 22 | -------------------------------------------------------------------------------- /01 - INTRO/images/atom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/atom.jpg -------------------------------------------------------------------------------- /01 - INTRO/images/axe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/axe.png -------------------------------------------------------------------------------- /01 - INTRO/images/bodyExample.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/bodyExample.jpeg -------------------------------------------------------------------------------- /01 - INTRO/images/caniuse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/caniuse.png -------------------------------------------------------------------------------- /01 - INTRO/images/confluence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/confluence.png -------------------------------------------------------------------------------- /01 - INTRO/images/espagueti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/espagueti.png -------------------------------------------------------------------------------- /01 - INTRO/images/frameworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/frameworks.png -------------------------------------------------------------------------------- /01 - INTRO/images/hcj.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/hcj.png -------------------------------------------------------------------------------- /01 - INTRO/images/lighthouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/lighthouse.png -------------------------------------------------------------------------------- /01 - INTRO/images/mantenbilidad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/mantenbilidad.jpg -------------------------------------------------------------------------------- /01 - INTRO/images/mapa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/mapa.jpg -------------------------------------------------------------------------------- /01 - INTRO/images/mvc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/mvc.png -------------------------------------------------------------------------------- /01 - INTRO/images/notion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/notion.jpg -------------------------------------------------------------------------------- /01 - INTRO/images/qefe1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/qefe1.gif -------------------------------------------------------------------------------- /01 - INTRO/images/sdlc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/sdlc.jpg -------------------------------------------------------------------------------- /01 - INTRO/images/sketchfigmaxd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/sketchfigmaxd.png -------------------------------------------------------------------------------- /01 - INTRO/images/steper.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/steper.gif -------------------------------------------------------------------------------- /01 - INTRO/images/structure.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/structure.webp -------------------------------------------------------------------------------- /01 - INTRO/images/sublime.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/sublime.jpg -------------------------------------------------------------------------------- /01 - INTRO/images/uxui.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/uxui.jpg -------------------------------------------------------------------------------- /01 - INTRO/images/vscode.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/vscode.jpeg -------------------------------------------------------------------------------- /01 - INTRO/images/wiki.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/images/wiki.png -------------------------------------------------------------------------------- /01 - INTRO/practicas/1.-Reqierimientos.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/practicas/1.-Reqierimientos.doc -------------------------------------------------------------------------------- /01 - INTRO/practicas/1.-requerimientos.md: -------------------------------------------------------------------------------- 1 | # Practica Requerimientos 2 | 3 | Para esta practica pueden usar la plantilla que les dejo en el siguiente link --> [PLANTILLA](./1.-Reqierimientos.doc) 4 | 5 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 6 | -------------------------------------------------------------------------------- /01 - INTRO/practicas/2.-buyerPersona.md: -------------------------------------------------------------------------------- 1 | # Practica Buyer Persona 2 | 3 | Para esta practica pueden usar la plantilla que les dejo en el siguiente link --> [PLANTILLA](./2.-persona.pdf) 4 | 5 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 6 | -------------------------------------------------------------------------------- /01 - INTRO/practicas/2.-persona.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/01 - INTRO/practicas/2.-persona.pdf -------------------------------------------------------------------------------- /01 - INTRO/practicas/3.-publicoObjetivo.md: -------------------------------------------------------------------------------- 1 | # Practica Pubico objjetivo 2 | 3 | Para esta practica pueden usar la plantilla que les dejo en el siguiente link --> https://miro.com/es/plantillas/publico-objetivo/ 4 | 5 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 6 | -------------------------------------------------------------------------------- /01 - INTRO/practicas/4.-wireframe.md: -------------------------------------------------------------------------------- 1 | # Practica Wireframe 2 | 3 | Recuerda que Para esta practica puedes usar las siguientes herramientas: 4 | 5 | - Miro (https://miro.com/es/) Esta herramienta te permitirá crear flujos de información y flujos de negocio. 6 | - Balsamic mockups (https://balsamiq.com/wireframes/) Nos da elementos para poder crear interfaces rápidas y que nos dejan representar la idea. 7 | - Dibujos a mano alzada --> a veces un wireframe también puede ser en una servilleta o en cualquier forma escrita. 8 | 9 | Y puedes revisar el live del jueves 17/02/22 --> https://web.microsoftstream.com/video/9bcebbbb-a07a-4ffe-a4b8-3e9ad0c6b5e8 10 | 11 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 12 | -------------------------------------------------------------------------------- /01 - INTRO/practicas/5.-ui.md: -------------------------------------------------------------------------------- 1 | # Practica Wireframe 2 | 3 | Recuerda que Para esta practica puedes usar las siguientes herramientas: 4 | 5 | - Sketch (https://www.sketch.com/) Esta herramienta solo aplica si tienes una computadora MacOS, pero cuenta con una amplia gama de características enfocadas a diseñadores, lo que hace que se puedan crear cosas muy grandes y escalables. 6 | 7 | - Figma (https://www.figma.com/) Esta herramienta es gratuita en muchas de sus características y permite colaboración entre usuarios, lo que es muy útil cuando se trabaja en equipo, tanto en equipos de diseño como en equipos de desarrollo. 8 | 9 | - Adobe XD (https://www.adobe.com/mx/products/xd.html) Existe su versión de prueba gratuita que te dejará ocupar la herramienta completa para crear todos tus diseños y el costo para tener un plan pro no es muy alto, tiene la ventaja de estar basado en las herramientas de Adobe, por lo que si ya tienes experiencia con alguna de estas herramientas, la curva de aprendizaje podría ser más corta. 10 | 11 | Y puedes revisar el live del jueves 17/02/22 --> https://web.microsoftstream.com/video/9bcebbbb-a07a-4ffe-a4b8-3e9ad0c6b5e8 12 | 13 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 14 | -------------------------------------------------------------------------------- /01 - INTRO/practicas/README.md: -------------------------------------------------------------------------------- 1 | # Practicas de Intro a Frontend 2 | 3 | Para las practicas de esta semana tendrán el siguiente caso y a raiz de eso sacar los puntos mencionados abajo. 4 | 5 | **Caso: Abogabot** 6 | Descripción: 7 | 8 | - Es un despacho de abogados que quiere automatizar las demandas de sus clientes, esto lo harán a traves de una página web llenando un formulario. 9 | - Al momento de llenar el formulario se manda al proceso de pago para finalizar la transacción. 10 | - Para dar seguimiento a su demanda, el cliente crea una cuenta en la plataforma y verá el seguimiento de cada una de las actualizaciones del proceso legal. 11 | - El administrador del sitio recbe la notificación de una nueva demanda y con los datos llenados del formulario se crea automaticamente el documento legal en formato word para empezar el proceso. 12 | - El administrador recibe el pago y debe de ser capaz de verlo en un dashboard para ver la cantidad de ingresos recibidos. 13 | - El administrador actualiza el proceso de la demanda y agrega comentarios en cada paso del proceso. 14 | - Al usuario le llegan correos de notificación para saber el avance de su proceso. 15 | - La página debe de ser responsive para poderla ver desde el celular. 16 | - La preferncia de colores del cliente es azul marino y blanco, pero acepta propuestas. 17 | 18 | - **Practicas** 19 | - [Toma de requerimientos](./1.-requerimientos.md) 20 | - [Crea tu buyer persona](./2.-buyerPersona.md) 21 | - [Publico objetivo](./3.-publicoObjetivo.md) 22 | - [Crea tu primer Wireframe UX](./4.-wireframe.md) 23 | - [Ahora el UI](./5.-ui.md) 24 | 25 | Para entrar a los contenidos solo tienes que dar click en el título y empezará la aventura. 26 | 27 | **_¡Vámonos hasta el espacio y más allá Explorers!_** 28 | -------------------------------------------------------------------------------- /01 - INTRO/temario/1.-queEsFrontEnd.md: -------------------------------------------------------------------------------- 1 | # ¿Qué es FrontEnd? 2 | 3 | Hola Explorers! 4 | 5 | Esta es la primera de todas las preguntas que veremos durante este curso y de hecho su respuesta es bastante amplia... 6 | 7 | ## ¿Qué significa Front? 8 | 9 | Cuando hablamos de Front nos referimos a la parte de "en frente" de las aplicaciones web, la cual es la capa en la que interactuan los usuarios. 10 | 11 | Esta es la parte que se visualiza en el navegador y es la que manda toda la información al Backend para ser procesada. 12 | 13 | FrontEnd 14 | 15 | Así como se muestra en la imágen, en el FrontEnd construimos todo el diseño del sitio; desde la estructura, el acomodo, la distribución de contenido, los estilos que se muestran y los flujos de interacción con nuestros usuarios. 16 | 17 | ## El usuario 18 | 19 | Cuando programamos en FrontEnd tenemos que estar conscientes de que todo lo que hacemos será lo que la persona al otro lado de la pantalla usará, y esta persona es en la que nos tenemos que enfocar. 20 | 21 | Para eso existe el UI/UX, el cual se refiere a User Interface (Interfaz de usuario) y User experience (Experiencia de usuario), estas son las partes más importantes del diseño de una web, y SIEMPRE se tienen que realizar antes de empezar a programar. 22 | 23 | UI/UX 24 | 25 | ## Patrones de arquitectura de desarrollo Web 26 | ### MVC (Model View Controller) 27 | 28 | Hablaremos de uno de los patrones de diseño web más utilizados y con el cual podremos tener muchísimo más claro el funcionamiento de todo el FrontEnd, la parte a la que nos referimos para el Front es la parte de la "Vista". 29 | 30 | MVC 31 | 32 | MVC se refiere a la separación de la interfaz de usuario (Vista) de la parte de datos y de negocio (Modelo), la cual está intermediada por un controlador (Controller); el controlador realiza las validaciones, sanitizaciones de datos, manejo de errores, entre varias otras cosas que permiten que los datos que se mandan desde la vista, lleguen de forma más ordenada y limpia a su procesamiento en el backend que es donde se encuentra el modelo. 33 | 34 | Así como este patrón de diseño arquitectónico existen algunos otros como **MVVM(Model View View Model), MVP (Model View Presenter), RMR (Resource Method Representation)** y se recomienda que utilices el que sea mejor para tu aplicación. 35 | 36 | ## SDLC (Software Development Life Cycle) 37 | 38 | El Ciclo de Vida del desarrollo de software es algo que debemos tomar en cuenta siempre que vayamos a hacer una aplicación, así sea un proyecto personal, un trabajo o cualquier momento en el que desarrollemos software. 39 | 40 | SDLC 41 | 42 | En el SDLC tenemos las diferentes fases que harán que nuestro desarrollo sea mucho más controlado y sobre todo escalable y mantenible. 43 | 44 | - Fase 1: Requerimientos --> Fase donde se presentan las necesidades de la aplicación. 45 | - Fase 2: Diseño --> En esta fase los requerimientos se convierten en un plan y en lo que debería de parecer la aplicación o producto final. 46 | - Fase 3: Desarrollo --> En esta fase se hace la programación de las aplicaciones, aquí es donde metemos el código con las mejores prácticas y con las reglas de las guías de desarrollo seguro. 47 | - Fase 4: Verificación --> En esta fase revisarás y confirmarás que las buenas prácticas se aplicaron en el código. En esta parte se integran las pruebas de CI/CD e integración de pruebas unitarias. 48 | - Fase 5: Mantenimiento y evaluación --> Los sistemas son un ente vivo y por lo tanto tiene que mantenerse en continuo movimiento. 49 | 50 | Eso es todo por esta lección, nos vemos en la [siguiente](./2.-frontEndTecs.md). 51 | 52 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 53 | -------------------------------------------------------------------------------- /01 - INTRO/temario/2.-frontEndTecs.md: -------------------------------------------------------------------------------- 1 | # ¿Qué tecnologías se usan en FrontEnd? 2 | 3 | El FrontEnd tiene muchísimos sabores y existen cientos de formas de hacer que tengas una página o aplicación web, y eso sin contar que también podríamos considerar como FrontEnd las aplicaciones móviles o de escritorio en toda su sección de interfaces. 4 | 5 | Para el caso específico del curso estaremos utilizando principalmente 3 tecnologías y sus variantes, estas son: HTML, CSS y JavaScript. 6 | 7 | html, css, js 8 | 9 | ## HTML 10 | 11 | Este lenguaje nos permite tener el esqueleto de nuestra aplicación, es lo que define la estructura del sitio y lo que nos da la pauta y el inicio de nuestra aplicación web. 12 | 13 | Esto es lo que veremos en el siguiente módulo del curso. 14 | 15 | ## CSS 16 | 17 | Este lenguaje nos da la posibilidad de estilizar y de insertarle toda la parte de visual y estética a tu sitio como si fuera la piel de nuestra aplicación. 18 | 19 | Se utilizan clases y selectores para poder definir las propiedades y características de cada uno de los elementos que nosotros definamos en la aplicación web. 20 | 21 | ## JavaScript 22 | 23 | Es el cerebro de nuestra plataforma, una vez que nosotros utilizamos JS en el sitio le damos la capacidad de escalar las funcionalidades de forma exponencial, ya que pasamos de las propiedades que tienen las etiquetas (Que también tienen algo de JS) a tener una cantidad virtualmente infinita de posibilidades. 24 | 25 | Podemos considerar a JS como el sistema nervioso que controla toda nuestra aplicación web y la que manejará todos los músculos y huesos de nuestro sitio. 26 | 27 | body web programing 28 | 29 | Esta imagen es una metáfora bastante acertada de cómo funcionan estas 3 tecnologías básicas de FrontEnd 30 | 31 | ## Frameworks 32 | 33 | Los Frameworks son variantes de JS que nos ayudan a que nuestra programación pueda llegar a ser mucho más rápida o con algunas funcionalidades adicionales a Vanilla JS, esto aplica tanto para FrontEnd como para Backend. 34 | 35 | El hecho de que un Framework te permita programar de forma más sencilla NO SIGNIFICA que puedes saltarte toda la parte fundamental de JS, esto es porque al ser la base de muchos de los Frameworks web, es bastante útil conocer como funciona desde el fondo. 36 | 37 | Existen muchos Frameworks y librerías muy famosos, pero por mencionar algunos de FrontEnd están React JS, Vue JS, Angular, Ember JS, Svelte, entre otros. 38 | 39 | JS Frameworks 40 | 41 | Adicional a estos también existen Frameworks para Backend, como por ejemplo NodeJS (Que de hecho es una de las opciones a seleccionar para tu siguiente misión) 42 | 43 | Eso es todo por esta lección, nos vemos en la [siguiente](./3.-webDevSetup.md). 44 | 45 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 46 | -------------------------------------------------------------------------------- /01 - INTRO/temario/3.-webDevSetup.md: -------------------------------------------------------------------------------- 1 | # Setup de un programador FrontEnd 2 | 3 | ¡Hola Explorers! 4 | En cualquiera de las profesiones a las que nos dediquemos necesitamos herramientas poderosas que nos ayuden a hacer realidad nuestros más grandes sueños. 5 | 6 | En el caso específico de programación web y específicamente FrontEnd lo que utilizaremos es lo siguiente: 7 | 8 | - Herramienta de diseño de aplicación 9 | - IDE de programación 10 | - Navegador web 11 | - Diferentes opciones de "Developer tools" 12 | - Herramienta de documentación 13 | 14 | Algunas de las herramientas podrían ser opcionales o en un ámbito profesional podrían ser utilizadas por otras áreas de la empresa, sin embargo, es importante que ustedes las conozcan para que en el flujo operativo de la empresa, su aporte sea mucho más valioso. 15 | 16 | ## Herramienta de diseño 17 | 18 | Esta herramienta es la que nos da la capacidad de tener un prototipo sin poner NI UNA línea de código. 19 | 20 | En el flujo de programación, basándonos en el SDLC (Software Development Life Cycle) siempre es necesario empezar con el diseño de la solución antes de irnos directo a programarla, esto se hace así porque en caso de haber un cambio o modificación es mucho más fácil y rápido cambiarla en el lado de diseño que volver a programar el módulo completo. 21 | 22 | El diseño tiene como objetivo poder aterrizar los requerimientos de quien nos esté pidiendo el software y para eso existen diferentes técnicas como por ejemplo: Desing Thinking, Visual Thinking, diagramas de flujo, o la que mejor se te acomode para poder entender lo más cercano posible a lo que tu cliente esté pidiendo. 23 | 24 | En cuanto a las opciones, existen muchas herramientas de diseño; desde Paint, Canva, Photoshop, Illustrator, Publisher o cualquier cuaderno que tengamos en casa, pero existen herramientas especializadas y enfocadas al diseño de wireframes e interfaces gráficas las cuales idealmente deberíamos usar para este caso. 25 | 26 | Antes de adentrarnos en las herramientas recordemos que primero necesitamos poder aterrizar la idea y los requerimientos, para esto existe toda una fase previa a la estética de nuestra aplicación, esta fase es fundamental, ya que si no la realizamos podríamos encontrarnos obstáculos en el camino después. Esta es la fase de diseño de flujo y de WireFrame, lo que haremos en esta fase es entender las necesidades y empezar a dibujar como funciona la aplicación sin darle diseño gráfico aún, esta es una fase completamente funcional para darnos cuenta de las interacciones, los botones necesarios, el número de clicks y los diferentes movimientos de la aplicación y nos dará muchísima información para que nuestra aplicación sea lo más fluida posible. 27 | 28 | Para esta fase de flujos y Wireframe existen diferentes herramientas como las siguientes: 29 | 30 | - Miro (https://miro.com/es/) Esta herramienta te permitirá crear flujos de información y flujos de negocio. 31 | - Balsamic mockups (https://balsamiq.com/wireframes/) Nos da elementos para poder crear interfaces rápidas y que nos dejan representar la idea. 32 | - Dibujos a mano alzada --> a veces un wireframe también puede ser en una servilleta o en cualquier forma escrita. 33 | 34 | Una vez realizado tu wireframe pasaremos a la parte de UI/UX, en este momento comenzaremos con toda la parte gráfica, de identidad y de uso de colores, formas e interacciones a lo largo de nuestra aplicación, para eso podemos usar cualquiera de las siguientes herramientas. 35 | 36 | UI/UX 37 | 38 | - Sketch (https://www.sketch.com/) Esta herramienta solo aplica si tienes una computadora MacOS, pero cuenta con una amplia gama de características enfocadas a diseñadores, lo que hace que se puedan crear cosas muy grandes y escalables. 39 | 40 | - Figma (https://www.figma.com/) Esta herramienta es gratuita en muchas de sus características y permite colaboración entre usuarios, lo que es muy útil cuando se trabaja en equipo, tanto en equipos de diseño como en equipos de desarrollo. 41 | 42 | - Adobe XD (https://www.adobe.com/mx/products/xd.html) Existe su versión de prueba gratuita que te dejará ocupar la herramienta completa para crear todos tus diseños y el costo para tener un plan pro no es muy alto, tiene la ventaja de estar basado en las herramientas de Adobe, por lo que si ya tienes experiencia con alguna de estas herramientas, la curva de aprendizaje podría ser más corta. 43 | 44 | Cualquiera de estas 3 últimas nos sirven también para la fase de wireframe y diseños de flujo, pero están más enfocadas hacia la parte de agregar diseño gráfico a los flujos realizados. 45 | 46 | 47 | ## IDE de programación 48 | 49 | Un IDE (Integrated Development Environment) es un software que nos ayuda a los desarrolladores a poder construir aplicaciones de forma más sencilla, esto es porque combina diferentes herramientas de desarrollo en una sola interfaz gráfica. 50 | 51 | - Editor de código: Un simple editor de texto que te ayuda a escribir software, tiene características útiles como: resaltar la sintaxis, encontrar algunos problemas dependiendo del lenguaje o autocompletando para que tu experiencia sea mejor. 52 | - Automatización: Algunos IDEs tienen la posibilidad de automatizar tareas repetitivas como el despliegue de tu programa, la compilación o incluso la actualización de versiones. 53 | - Depuración: Al tener toda la experiencia con lenguajes de programación, hay algunos IDEs que te ayudan a identificar errores o bugs antes de que se compile, e incluso hay algunos que te dan la solución o recomendaciones para que eso no pase. 54 | - Integración: Existen herramientas que nos permiten integrar nuestro IDE de forma directa con su aplicación como lo son las interfaces, versionamientos de código o herramientas de despliegue. 55 | 56 | Existen muchas y diferentes opciones, algunas enfocadas a un solo lenguaje y otras que son más abiertas y debes de utilizar el que se adapte mejor a la necesidad que se te presente. 57 | 58 | Te dejo algunos ejemplos de IDEs para que puedas escoger el que más te guste. 59 | 60 | A mi en lo personal me gusta mucho Visual Studio Code por todas las extensiones que tiene y las integraciones sencillas con diferentes tecnologías de Azure, Github, entre otras https://code.visualstudio.com/, además lo puedes usar en el navegador sin necesidad de instalarlo https://vscode.dev/ 61 | 62 | VSCode 63 | 64 | Adicional a este IDE también he utilizado Atom, el cual tiene una alta capacidad de personalización, así como también diferentes integraciones con herramientas de despliegue https://atom.io/ 65 | 66 | atom 67 | 68 | Igualmente si buscas una opción más simple, existe el editor de texto Sublime Text, es una herramienta que se utiliza mucho al inicio, pero que no cuenta con todas las integraciones y automatizaciones que te dan los primeros 2 https://www.sublimetext.com/ 69 | 70 | atom 71 | 72 | ## Navegador web 73 | 74 | Al ser programadores web todo lo que programemos se desplegará en un navegador web, aquí hay que tener mucho cuidado y revisar que la tecnología que estemos utilizando es compatible y se despliega de forma igual o similar en todos los navegadores. 75 | 76 | Recordemos que todo lo que hacemos es para nuestro usuario y si a nuestro usuario le gusta usar un navegador u otro, nuestra aplicación deberá de ser capaz de brindarle los servicios, independientemente del navegador en el que se encuentre. 77 | 78 | Tenemos Navegadores desde Internet Explorer, Chrome, Brave, Safari, Firefox, Edge, Opera y muchísimos más que hacen diferentes interpretaciones al código que nosotros programemos, es por eso que siempre es importante revisar la compatibilidad. 79 | 80 | Para eso existen plataformas como "Can I use" https://caniuse.com/, la cual nos dice en que navegadores podemos utilizar la tecnología de HTML, CSS y JS que queramos utilizar. 81 | 82 | caniuse 83 | 84 | Antes de decidir que tecnología vamos a implementar es importante saber a que usuarios vamos dirigidos y poder conocer los navegadores más utilizados por ellos, tanto en ambientes de escritorio como móviles. 85 | 86 | ## Developer tools 87 | 88 | Cuando hablamos de las Developer tools ya *no* nos referimos a todo lo que estamos viendo como parte del SetUp que necesitamos para programar y desarrollar nuestras aplicaciones. 89 | 90 | En este caso nos referimos a herramientas adicionales que nos dan información sobre nuestra aplicación y mejoras que podemos implementarle. 91 | 92 | Una de las más conocidas y usadas es Lighthouse de Google (https://developers.google.com/web/tools/lighthouse?hl=es) , la podemos encontrar directamente en el navegador y nos dará una auditoría del status de nuestro sitio en diferentes áreas como rendimiento, accesibilidad, buenas prácticas y SEO. 93 | 94 | lighthouse 95 | 96 | Si bien es de las más conocidas, no es la única y algo que debemos de tomar muy en cuenta es la parte de Accesibilidad en nuestros desarrollos, la democratización de la tecnología no solo significa que todos puedan tener acceso a ella, sino que también la puedas aprovechar independientemente de si tienes alguna condición física que no te permita interactuar con ella. 97 | 98 | Pensemos en las personas que tienen debilidad visual o que son completamente ciegas usando nuestra aplicación web o personas que tienen algun problema motriz y que no pueden tocar todos los botones de nuestro sitio. 99 | 100 | Estas personas también pueden ser nuestros usuarios y es nuestro deber como desarrolladores integrar las facilidades de accesibilidad a nuestras plataformas ayudando así a la democratización de la tecnología. 101 | 102 | Para esto existen herramientas específicas que nos darán todas las guías y usos adecuados de accesibilidad para los usuarios como axe DevTools (https://www.deque.com/axe/devtools/) que puedes instalar como una extensión en tu navegador y te dará mucha información sobre cuales son los problemas en tu desarrollo, pero lo más importante, información sobre como solucionarlos. 103 | 104 | axe devtools 105 | 106 | ## Documentación 107 | 108 | Una de las fallas más grandes que me ha tocado ver a lo largo de mi carrera es que no se documentan los desarrollos, esto es bastante grave, ya que en caso de que se cambie de desarrollador o de que sea un programa que tiene mucho tiempo que no mueves, necesitas conocer y entender como fue desarrollado. 109 | 110 | En el ámbito profesional tu proyecto no será considerado a menos que esté bien documentado y cuando eres parte de un equipo de desarrollo la documentación es la forma más sana de comunicarte con todo el equipo. 111 | 112 | La falta de documentación hace que la mantenibilidad del código sea mucho más complicada y que muchas veces se tenga que reprogramar los módulos ya que en promedio si no usas el código en aproximadamente 6 meses, dejarás de comprender su funcionalidad. 113 | 114 | Para esto existen librerías como API Doc (https://apidocjs.com/) o como rails Admin (https://github.com/railsadminteam/rails_admin) que nos dan facilidades para documentar mientras programamos. 115 | 116 | Lo que es importante considerar al momento de documentar tu código es lo siguiente: 117 | 118 | - Definir tu audiencia: A quien va a ir dirigida tu documentación, si es para otros desarrolladores, de que nivel o si es para alguien administrativo o si incluso es para ti mismo en un futuro. 119 | - Qué problemática soluciona tu código: Todo lo que programamos tiene una funcionalidad por módulo y necesitamos definir que parte de la aplicación afecta, en que forma y cuales son las opciones de entrada y salida de nuestras funciones. 120 | - Estructura de aplicación: Cuando documentamos todo un proyecto tendremos diferentes secciones, funcionalidades, páginas o incluso otros sitios que se conecten al nuestro, para esto es recomendable documentar desde lo más general a lo particular, un ejemplo muy bueno lo podemos encontrar en la documentación de Firebase (https://firebase.google.com/docs/build) 121 | 122 | Una herramienta muy útil para poder lograr esta estructura es Notion (https://www.notion.so/) 123 | 124 | Notion 125 | 126 | Otra herramienta que igualmente es adaptable y está enfocada hacia desarrolladores por la parte de seguimiento de sprints por parte de Atlassian es Confluence (https://www.atlassian.com/es/software/confluence) 127 | 128 | Confluence 129 | 130 | Estas son herramientas que te pueden servir a darle mucha más formalidad a tu proyecto y que hará que tengas más orden en todos tus proyectos y en lo profesional tu valor aumentará de forma muy relevante. 131 | 132 | Eso es todo por esta lección, nos vemos en la [siguiente](./4.-estructuraWeb.md) 133 | 134 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 135 | -------------------------------------------------------------------------------- /01 - INTRO/temario/4.-estructuraWeb.md: -------------------------------------------------------------------------------- 1 | # Estructura Web 2 | 3 | En este módulo veremos como están estructurados los sitios para que los usuarios puedan comprender mejor. 4 | 5 | La estructura de tu sitio o aplicación web es el cómo están ligadas las diferentes páginas, visto desde como interactuan con los links y llamados internos, así como su jerarquía. 6 | 7 | Esto es importante porque define la organización de la información, lo cual afecta tanto a tus usuarios, como a los navegadores para poder leer bien tu contenido y que eso le ayude a la navegación para las personas, pero también a darte una mejor calificación de SEO. 8 | 9 | ## Contenido Jerárquico 10 | 11 | Esta es una de las estructuras web más utilizadas y conocidas por los diseñadores y desarrolladores, ya que utiliza una categorización de contenido de lo general a lo particular. 12 | 13 | Web Structure 14 | 15 | Esto se refiere a que tenemos una raíz y de ahí se desprende todo el contenido informativo y de uso en el sitio. 16 | 17 | ### Homepage 18 | Esta es la página inicial y en donde mostrarás la información más importante, todas las páginas importantes de tu sitio deben de estar ligadas a esta para que la navegación sea mucho más sencilla e intuitiva para los usuarios. 19 | 20 | Esta navegación puede ser representada en forma de menú, botones o diferentes tipos de interacciones dentro de la página inicial, aquí podemos ver elementos como sliders, cards, enlaces, imágenes y más elementos que hagan alusión al movimiento y lo que tenemos que cuidar aquí es que para el usuario sea muy sencillo encontrar todas las demás páginas. 21 | 22 | ### Navegación / Menú 23 | Esta es la forma en como tu usuario identificará como está organizada toda tu información y así encontrar lo que esté buscando. 24 | 25 | Necesitamos asegurarnos de que la información más importante y las categorías principales estén representadas en el menú principal o como parte de la navegación del sitio considerando lo siguiente: 26 | 27 | - Usa frases cortas o en todo caso una sola palabra para cada elemento y poder moverte de un lado a otro. 28 | - Usa lenguaje simple para que seas claro con tus usuarios. 29 | - No revuelvas la información, busca el orden de prioridad y sigue ese orden en tu navegación. 30 | - Las URLs de tu aplicación deben de ser intuitivas y no confusas (iE. tusitio.com/contacto) 31 | - Muestra la jerarquía como parte de tu sitio con las subCategorías desplegadas con su categoría padre. 32 | - Secciones como los términos y condiciones, política de privacidad o secciones que no son muy utilizadas llevalas al footer para que no sea tanta información por procesar para el usuario. 33 | 34 | Este menú puede tener diferentes formas e incluso se puede modificar la forma de interacción incluso si cambias de tamaño de pantalla, pero los más comunes son NavBar que es la barra de navegación en la parte de arriba de las páginas o los SideBar que significa que el menú se encuentra a un costado de la página o aplicación. 35 | ### Categorías y subcategorías 36 | Las categorías sirven para poder agrupar los contenidos e información pensando en hacerlo fácil para que los usuarios accedan al contenido. 37 | 38 | Las categorías puedes considerarlas como tu menú principal y de ahí desplegar la información adicional como submenu, recuerda que las categorías principales deben de darle el "mapa" a tu usuario para poder navegar por todo tu sitio, mientras que las subcategorías le dan la información detallada de lo que está buscando. 39 | 40 | Web Structure 41 | 42 | Si lo vemos con el ejemplo de un blog, las categorías podrían ser los temas principales de tus publicaciones y esas categorías las puedes desglosar para hacerlas más detalladas. 43 | 44 | O con otro ejemplo sencillo, en una tienda en línea de ropa tenemos categorías de productos que pueden ser "zapatos", "chamarras", etc. y las subcategorías podrían ser "niños", "mujer", "hombre", "Tallas chicas", etc. La idea de la organización hace que el uso de tu aplicación sea más sencilla para el usuario. 45 | 46 | ### Páginas individuales / finales 47 | Estas son las páginas finales a donde puede llegar tu usuario, apartir de aquí ya no hay más jerarquía y es en donde descansa la mayor parte de la información valiosa de tu plataforma. 48 | 49 | Estas páginas deben de tener contenido significativo, por ejemplo; puede ser que compartan la publicación, que compren el producto o simplemente que hayan encontrado lo que buscan en tu plataforma. 50 | 51 | Alguna información adicional que puedes poner aquí puede ser con respecto a contenido similar como links a otras partes de tu sitio o en algunos casos de productos, y un formulario de contacto por si necesitan soporte. 52 | 53 | La finalidad de estas páginas es darle al usuario lo que necesita, así que debes de ser muy claro al darle las instrucciones necesarias para que llegue sin problemas a tus páginas finales. 54 | 55 | ## Otros tipos de estructuras de sitios 56 | 57 | ### Modelo Secuencial 58 | Este modelo es popular por dirigir al usuario por diferentes pasos secuenciales los cuales tienen un orden de finalización antes de poder pasar al siguiente. 59 | 60 | Este modelo se utiliza cuando necesitas que tu usuario vaya por un flujo de información sin salirse del carril. 61 | 62 | steper 63 | 64 | ### Modelo de matriz 65 | Este modelo te permite una navegación general por todo el sitio, en la que normalmente se tienen muchas opciones de información específica, la cual es compleja de agrupar en categorías, estos sitios por lo general utilizan links internos del mismo sitio para poder dirigirte a las secciones deseadas. 66 | 67 | Uno de los mejores ejemplos de este tipo de modelo es Wikipedia. 68 | 69 | steper 70 | 71 | Al final del día no hay un modelo que sea mejor a otro, cada sitio es único y se debe tratar como tal para lograr la mejor organización de la información pensando siempre en tu usuario. 72 | 73 | Eso es todo por esta lección, nos vemos en la [siguiente](./5.-estructuraCodigo.md). 74 | 75 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 76 | -------------------------------------------------------------------------------- /01 - INTRO/temario/5.-estructuraCodigo.md: -------------------------------------------------------------------------------- 1 | # Estructura Código 2 | 3 | En este módulo nos referimos a la estructura y limpieza de código. 4 | 5 | Esto es COMPLETAMENTE NECESARIO, ya que debemos de aprender las buenas prácticas de programación desde el inicio. 6 | 7 | ## ¿Para qué? 8 | 9 | La limpieza de código es una de las mejores cosas que puedes hacer mientras estés desarrollando tu proyecto y esto es porque ayuda muchísimo con la **mantenibilidad** y la **continuidad** del código. 10 | 11 | Es una forma intuitiva de hacer que tu programa sea legible, para ti mismo dentro de unos meses o para otros desarrolladores. 12 | 13 | mantenibilidad 14 | 15 | ## Estructura de proyecto 16 | 17 | No existe una forma "estándar" de manejar la estructura de tu proyecto, pero existen algunas formas de hacerlo que ayudarán a la organización y limpieza de tu programación. 18 | 19 | La estructura en los folders de tu proyecto ayuda mucho a ubicar los archivos y aquí tienes algunas opciones dependiendo del tamaño de tu proyecto y de lo que mejor convenga para el mismo, aquí te dejo algunos ejemplos de estructura. 20 | 21 | ### Por tipo de archivo 22 | 23 | Esta forma de estructurar tu proyecto divide los diferentes archivos por tipo y ayuda para cuando tienes proyectos pequeños para organizar y ubicar donde esté lo que necesitas. 24 | 25 | Ejemplo: 26 | 27 | - Root 28 | - assets 29 | - img 30 | - img1.png 31 | - img2.png 32 | - fonts 33 | - videos 34 | - styles 35 | - file1.css 36 | - file2.css 37 | - js 38 | - file1.js 39 | - file2.js 40 | - views - file1.html - file2.html 41 | index.html 42 | 43 | Esta organización te ayudará mucho para que puedas identificar de forma rápida si necesitas cualquier archivo, pero puede llegar a ser complicado en caso de que tu proyecto crezca y tenga un gran número de archivos porque se complica la búsqueda. 44 | 45 | ### Por funcionalidad 46 | 47 | Este tipo de organización funciona mucho con proyectos más grandes, los cuales tienen varias páginas como parte de su funcionalidad, en este tipo de proyectos ya se utilizan componentes, rutas, librerías externas, etc. 48 | 49 | Ejemplo 50 | 51 | - Root 52 | - assets 53 | - img 54 | - img1.png 55 | - img2.png 56 | - fonts 57 | - videos 58 | - styles 59 | - file1.css 60 | - file2.css 61 | - controllers 62 | - controller1.js 63 | - controller2.js 64 | - components 65 | - component1.js 66 | - component2.js 67 | - routes 68 | - route1.js 69 | - route2.js 70 | - views - view1.html - view2.html 71 | index.html 72 | 73 | Este tipo de estructuras funcionan cuando tu proyecto contiene una gran cantidad de archivos y la arquitectura de desarrollo está segmentada. 74 | 75 | ### Por ruta 76 | 77 | Este tipo de estructura sirve para cuando se programa en equipos que tienen desarrollos independientes, pero que son todos parte de un mismo proyecto, ya que separa los archivos de forma que cada carpeta tenga sus propios archivos. 78 | 79 | Ejemplo: 80 | 81 | - Root 82 | - assets 83 | - img 84 | - img1.png 85 | - img2.png 86 | - fonts 87 | - videos 88 | - perfil 89 | - perfil.css 90 | - perfil.js 91 | - perfil.html 92 | - perfil.test.js 93 | - feed 94 | - feed.css 95 | - feed.js 96 | - feed.html 97 | - feed.test.js 98 | - searchbar 99 | - searchbar.css 100 | - searchbar.js 101 | - searchbar.html 102 | - searchbar.test.js 103 | 104 | Esta estructura funciona para equipos que trabajan en archivos o secciones independientes. 105 | 106 | ## Buenas Prácticas de código. 107 | 108 | Ya vimos como estructurar nuestros proyectos, pero ahora siguen cuales son las recomendaciones al momento de escribir código y evitar cosas como el código espagueti, que así se le llama por estar enredado y nadie lo entienda. 109 | 110 | mantenibilidad 111 | 112 | Para eso aquí te dejo varias recomendaciones para que tu código tenga una buena legibilidad y por lo tanto sea mucho más fácil de comprender. 113 | 114 | - Enfócate en la legibilidad: Para ayudar al seguimiento y que sea fácil de leer ayudará mucho a optimizar tiempo. 115 | - Usa la menor cantidad de líneas posible. 116 | - Usa nombres adecuados para las variables. 117 | - Segmenta tu código por bloques de funcionalidad. 118 | - Usa de forma correcta la identación para controlas las estructuras de código. 119 | - Usa funciones atómicas que no contengan muchas funcionalidades en una sola función. 120 | - Aplica el principio DRY (Don't Repeat Yourself) en donde las tareas repetitivas hay que usarlas como funciones. 121 | - Evita la anidación profunda. 122 | - Estandariza la documentación en los comentarios: Usa los comentarios como encabezados de cada una de tus funciones para poder explicar que es lo que hace la función antes de empezar a leer el código, esto ayuda mucho en el futuro cuando quieras revisar el código. 123 | - Nombre del módulo. 124 | - Fecha de creación. 125 | - Autor. 126 | - Historial de modificaciones. 127 | - Resumen de funcionalidad. 128 | - Formaliza las Excepciones: Las Excepciones se refiere a todos los problemas, errores o eventos poco comunes que pueden hacer que tu código no funcione de forma correcta o que simplemente rompa tu aplicación, es necesario controlarlas para poder solucionar estos problemas. 129 | - Siempre usa bloques de Try-Catch. 130 | - Maneja un proceso de pruebas. 131 | - Usa registros de actividad que te den información suficiente de en dónde, quien y qué fue lo que pasó en la excepción. 132 | - Estandarizar la forma de escribir código: Cuando se coolabora con más personas en el mismo equipo de desarrollo es necesario tener una misma forma de escribir código, desde las variables hasta las llaves, para eso existen diferentes herramientas para poder controlar el entorno de programación. 133 | - prettier: Es una extensión de VSCode que acomoda automáticamente tu código (https://prettier.io/) 134 | - eslint: Herramienta que revisa el código escrito y los revisa con una lista de estándares para poder unificar la forma de programación (https://eslint.org/) 135 | 136 | Eso es todo por esta lección, Vámonos a las [prácticas](../practicas/README.md). 137 | 138 | **_¡Vámonos hasta el espacio y más allá Explorers!_** 139 | -------------------------------------------------------------------------------- /02 - HTML/README.md: -------------------------------------------------------------------------------- 1 | # HTML 2 | 3 | Bienvenido Explorer, llegamos al primer vuelo de tu misión de FrontEnd y empezamos a programar con HTML. 4 | 5 | HTML es el lenguaje que nos permite darle estructura a nuestras páginas web y que nos da la oportunidad de darle un esqueleto a nuestros sitios. 6 | 7 | En este módulo veremos las siguientes cosas. 8 | 9 | 2. **HTML** 10 | - [Qué es HTML y estructura de archivo](./temario/1.-queEsHMTL.md) 11 | - [Etiquetas básicas](./temario/2.-etiquetasBasicas.md) 12 | - [Elementos compuestos](./temario/3.-elementosCompuestos.md) 13 | - [Acomodo y navegación](./temario/4.-acomodoNavegacion.md) 14 | - [Propiedades de etiquetas](./temario/5.-propiedades.md) 15 | 16 | Para entrar a los contenidos solo tienes que dar click en el título y empezará la aventura. 17 | 18 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 19 | -------------------------------------------------------------------------------- /02 - HTML/images/HTML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/02 - HTML/images/HTML.png -------------------------------------------------------------------------------- /02 - HTML/practicas/README.md: -------------------------------------------------------------------------------- 1 | # Prácticas HTML 2 | 3 | Para la práctica de esta semana tendrán que maquetar en HTML el siguiente caso y generar su repositorio con el ejercicio. 4 |
5 | Recordemos que solamente se necesita maquetar como un prototipo, **no es necesario que tenga funcionalidad completa en la información** 6 | 7 | ## **Caso: Pastelería** 8 |
9 | 10 | Descripción:
11 | - El cliente de la pastelería necesita ver los diferentes sabores de pasteles, así como los precios de cada uno. 12 | - El cliente de la pastelería necesita ver los diferentes adornos con los que se puede decorar el pastel y los precios de cada uno. 13 | - El cliente de la pastelería tendrá la posibilidad de combinar sabores dependiendo de sus preferencias. 14 | - El cliente de la pastelería tendrá la posibilidad de combinar adornos dependiendo de sus preferencias. 15 | - El cliente de la pastelería necesita poner en un formulario su pedido. 16 | - El formulario debe de contener los datos de contacto del cliente que son Nombre, Teléfono, Correo Electrónico, Descripción general del pastel y la selección de sabores y adornos. 17 | - El pastelero necesita tener la información de la cantidad de sabores que le quedan para hacer los pasteles. 18 | - El pastelero necesita tener la información de la cantidad de adornos que le quedan para hacer los pasteles. 19 | - El pastelero necesita una tabla donde aparezcan los pedidos que se han realizado con los datos del formulario. 20 | - La página debe tener información de la pastelería que es Dirección, Teléfono y horarios de atención. 21 | 22 | ## Prácticas a Realizar 23 | **Tienen hasta el 4 de Marzo** 24 | 25 | Prácticas: 26 | - Crear marca de la pastelería como un logo y los mensajes que daremos desde la marca. 27 | - Maquetación de páginas de cliente de la pastelería. 28 | - Maquetación de páginas del pastelero. 29 | 30 | Bonus: 31 | En caso de que te quede corto el ejercicio siguele con esto! 32 | - Bonus de estilos (Intro a CSS) 33 | - Bonus de Rutas (Navegación en la página) 34 | - Bonus de despliegue (Montar la página en línea con dominio gratuito) 35 | 36 | ## El 4 de Marzo se subirá el Form para que entreguen las prácticas. 37 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 38 | -------------------------------------------------------------------------------- /02 - HTML/programas/1.-etiquetasBasicas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Práctica 1 LaunchX 8 | 9 | 10 | 11 |

Bienvenidos Explorers

12 |

Bienvenidos Explorers

13 | 14 | 15 |

Este es un parrafo para los explorers Este es un parrafo para los explorersEste es un parrafo para los explorers Este es 16 | un parrafo para los explorers
Este es un parrafo para los explorersEste es un parrafo para los explorers

17 | 18 |

Parrafo 2 Parrafo 2 Parrafo 2 Parrafo 2 Parrafo 2 Parrafo 2 Parrafo 2

19 | 20 | 21 | Link a LaunchX 22 |
23 | 24 | 25 | Perritos lindos 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
CompañíaContactoPaís
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
45 | 46 | 47 | 53 | 54 |
    55 |
  1. Alumno1
    2. 56 |
  2. Alumno2
    3. 57 |
  3. Alumno3
    4. 58 |
59 | 60 |
61 |
Enchiladas
62 |
- Tortilla frita con salsa, rellena de pollo
63 |
Molletes
64 |
- Bolillo con frijoles y queso
65 | 66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /02 - HTML/programas/2.-elementosCompuestos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elementos compuestos 8 | 9 | 10 | 11 |

Explicación de elementos compuestos LaunchX

12 | 13 | 14 | 15 |
16 | 17 | 18 |

19 | 20 |
21 | 22 |

Input De Texto

23 |
24 |

25 | 26 |
27 |

28 | 29 |
30 |

31 | 32 |
33 |

34 | 35 |
36 |

37 | 38 |
39 | 40 |

Input de selección multiple


41 | 42 |
43 | 44 |
45 | 46 |

47 | 48 |

Input de selección única


49 | 50 |
51 | 52 |
53 | 54 |

55 | 56 |

Select

57 | 58 | 64 | 65 |

Select con Input

66 |
67 | 68 | 69 | 75 |

76 | 77 |
78 | 79 |

Input de Fecha


80 |
81 |
82 |
83 |
84 |

85 | 86 |
87 | 88 |

Input de Fecha


89 |
90 |
91 |
92 |
93 |

94 | 95 |
96 | 97 |

Input de archivo


98 |

99 | 100 |

Input de Color


101 |

102 | 103 |

Input de Rango

104 |
105 |
106 | 107 |
108 | 109 |

Input de botón

110 |
111 |
112 |

113 | 114 |
115 | 116 |

Ejemplo de Formulario

117 |
118 | 119 |

120 | 121 | 122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /02 - HTML/programas/3.-layoutYRutas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Layout y Rutas 8 | 71 | 72 | 73 | 74 | 75 |
76 |

Ciudades

77 |
78 | 79 |
80 | 88 | 89 |
90 |

Londres

91 |

Londres es la capital de Inglaterra y es la ciudad más popular del Reino Unido, es la ciudad mas poblada con 13 millones de habitantes en su área metropolitana

92 | london 93 |
94 |
95 | 96 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /02 - HTML/programas/Tacos El Jefe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/02 - HTML/programas/Tacos El Jefe.png -------------------------------------------------------------------------------- /02 - HTML/programas/atributosHTML.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/02 - HTML/programas/atributosHTML.xlsx -------------------------------------------------------------------------------- /02 - HTML/programas/tacosElJefe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tacos el Jefe 8 | 9 | 10 |
11 |

Tacos el Jefe, desde 2022

12 |
13 | 14 |
15 | Logo tacos el jefe 16 | 17 |

Menú

18 |

Tacos grandes

19 |

Todos incluyen nopales y cebollas

20 | 27 | 28 |

Tacos pequeños

29 |

Con cilantro y cebolla

30 | 37 | 38 |

Especiales

39 |

Haz tu combo con refresco por $10 más

40 |
41 |
Labrador .................... $40
42 |
- Tortilla de maiz con pollo asado
43 |
Pastor Aleman .................... $40
44 |
- Tortilla de harina con carne de res y queso
45 |
Pug .................... $40
46 |
- Tortilla de maiz con chuleta
47 |
Adoptado .................... $40
48 |
- Tortilla de maiz con Pastor
49 |
50 |
51 | 52 |
53 | 54 |
55 |

Ubicación

56 |

Sucursales

57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
NombreUbicaciónHorarios
CentroAntonio Solis 166, ObreraL - D 24H
SurCuauhtémoc E, Ignacio Allende 134L - D 5pm - 3am
NorteSara 4537, Guadalupe TepeyacM - D 5pm - 3am
79 |
80 | 81 |
82 | 83 |
84 |

Pedidos

85 |

Haz tu pedido aquí

86 | 87 |
88 |

¿De qué taquería quieres?

89 | 94 | 95 |

¿De qué tacos quieres?

96 | 97 | 98 | 99 |
100 | 101 | 102 | 103 |
104 | 105 | 106 | 107 |
108 | 109 | 110 | 111 |
112 | 113 | 114 |
115 | 116 |

117 | 118 |
119 | 120 | 121 |

122 | 123 |
124 | 125 | 126 |

127 |
128 | 129 | 130 | 131 |

132 |
133 |
134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /02 - HTML/temario/1.-queEsHMTL.md: -------------------------------------------------------------------------------- 1 | # ¿Qué es y cómo funciona HTML? 2 | 3 | El HTML es el HyperText Markup Language y es el lenguaje estándar que se utiliza para estructurar las páginas web, ya que nos permite darle un esqueleto a nuestros sitios y organizar nuestra información de la manera adecuada. 4 | 5 | ## ![Frontend Image](../images/HTML.png) 6 | 7 | --- 8 | 9 | Empezaremos con algunos elementos base para poder trabajar en HTML, comenzando por los headings, los párrafos, los links, las imágenes, las tablas y las listas, estos 6 elementos nos ayudaran a estructurar un archivo de HTML, para después mostrarlo en una página. Pero antes de comenzar con lo bueno de programación, definamos como funciona, para que es y de donde surge el HTML con un poco de historia, para entender para que necesitásemos aprender HTML si queremos ser desarrolladores Frontend. 10 | 11 | HTML significa “HyperText Markup Language”, es un lenguaje de hipertexto para poder hacer estructuras de páginas y es el lenguaje estándar que utilizan todos los navegadores para interpretar la estructura de tu página, permitiéndole leer y saber los elementos que contiene, su posición, e incluso tu posicionamiento dentro de los buscadores, lo cuál esta estrictamente relacionado con la optimización de motores de búsqueda (SEO) para que la información de tu sitio este bien posicionada dentro de internet, y las personas la encuentren con mayor facilidad, puesto que nos permite darle un esqueleto a nuestros sitios y organizar nuestra información de la manera adecuada, conforme vayamos avanzando en la misión puntualizaremos más en ello. 12 | 13 | HTML existe desde hace un poco más de 20 años, el mismo tiempo de funcionamiento de los navegadores, conforme pasan los años este lenguaje ha ido evolucionando y actualmente nos encontramos en la versión HTML 5, que justamente será con la que trabajaremos a continuación. Esta versión es soportada por la gran mayoría de los navegadores, a excepción a veces de Internet Explorer que le cuesta interpretar el lenguaje, sin embargo, Chrome, Safari, Firefox, Opera, Brave, etc, logran interpretar de manera correcta HTML. No olviden que en la primera semana les deje una herramienta que les permite revisar si la tecnología que están usando se visualiza de forma correcta en los navegadores existentes. 14 | 15 | ## Estructura HTML 16 | 17 | De forma general podemos ver que todas las palabras tienen dos corchetes <>, uno al inicio y otro al final, uno que abre y otro que cierra con una diagonal antes de la palabra, lo cual es parte de la sintaxis, a esto se le conoce como “etiquetas”, las cuáles se encargan de delimitar cada cuando se está poniendo un inicio y un final de cierto elemento en HTML, la posición de cada elemento en html se rige por estas etiquetas. 18 | 19 | Se refiere al tipo de documento, se encarga de que el navegador pueda interpretar y leer que el contenido es un archivo de HTML. Nos define nuestra estructura raíz que indica que dentro de ese html tenemos el contenido, todo lo que este fuera de ello no será interpretado por nuestro navegador. Lang se refiere al languaje, que significa lenguaje y se refiere al idioma en el que va a estar nuestra página. Por lo general, se mantiene en inglés, porque para html usaremos distintos caracteres en inglés, sin embargo, puede cambiarse a cualquier otro idioma. 20 | 21 | Por ejemplo, para trabajar en español se utiliza el cual también tiene sus variaciones ya sea español de España, Latinoamericano, etc, pero también aplica para cualquier otro idioma Frances, portugués, Japonés etc. Cambiar el idioma va a influir directamente en el SEO “Search Engine Optimization” (Optimización de motores de búsqueda), puesto que si nosotros estamos buscando las cosas en español, probablemente nos aparezca que el esta en español, el saber esto es de suma importancia por si quisiéramos llegar a un usuario objetivo. 22 | 23 | Es lo primero que lee el navegador, e incluye metadatos, los cuáles son muy valiosos en cuanto a cookies, scripts, tracking de usuarios, entre otras opciones. Se encarga de los metadatos (datos de los datos) nos sirven para poder configurar nuestro archivo de html, y en específico aquí para indicar que set de caracteres usaremos en la página dependiendo del teclado que se use, el UTF-8 funciona con inglés y español pero si estuviéramos programando en una página en otro idioma que tuviera ciertos caracteres especiales y diferentes, tendríamos que cambiar el UTF-8 por el correspondiente. 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | Indica el contenido tiene que ser equivalente de Internet Explorer. 30 | 31 | ```html 32 | 38 | ``` 39 | 40 | Se refiera a la vista general de nuestro sitio, como va a estar desplegado por defecto, el cual contiene un ancho de la muestra del sitio igual que el ancho de nuestro dispositivo, con un “inicial-scale=1.0 que sirve para el zoom o zoom out, dependiendo de cómo es que nosotros queramos nuestra página. 41 | 42 | ```html 43 | Titulo 44 | ``` 45 | 46 | Es el título de nuestro sitio en el head. 47 | 48 | ```html 49 | 50 | ``` 51 | 52 | Son etiquetas de estilos nos permite importar archivos de otro tipo como por ejemplo de Javascript, CSS, etc. 53 | Al ingresar a una página el navegador descarga la página de internet y se lo muestra al cliente. Se descargan los estilos, funcionalidades, etc. Este orden es importante para que la página se visualice de forma ordenada. 54 | 55 | Finalmente tenemos lo siguiente: 56 | 57 | Es el cuerpo de nuestra página, donde podemos poner las diferentes etiquetas y elementos de HTML que nosotros queramos utilizar para que la página esté funcionando de forma correcta. 58 | En la siguiente lección veremos el contenido dentro del como lo son los headings los párrafos, los links, las imágenes, etc. ¡Vámonos de aquí hasta el espacio Explorer! Te veo en la siguiente lección. 59 | 60 | - **_¡Vámonos hasta el espacio y más allá Explorers!_** 61 | -------------------------------------------------------------------------------- /02 - HTML/temario/2.-etiquetasBasicas.md: -------------------------------------------------------------------------------- 1 | # Etiquetas básicas 2 | 3 | En este módulo veremos algunas de las etiquetas fundamentales de elementos de HTML que utilizaremos para mostrar la información que nosotros necesitemos. 4 | 5 | En el siguiente video les explico un poco más
6 | ⬇️⬇️⬇️⬇️⬇️⬇️ VIDEO ⬇️⬇️⬇️⬇️⬇️⬇️
7 | [LINK DE VIDEO](https://web.microsoftstream.com/video/c73b37ee-1522-4773-85ef-a20ae99b7012) 8 | 9 | El código de ejemplo está en el siguiente link
10 | ⬇️⬇️⬇️⬇️⬇️⬇️ CÓDIGO ⬇️⬇️⬇️⬇️⬇️⬇️
11 | [LINK DE CÓDIGO](../programas/1.-etiquetasBasicas.html) 12 | 13 | **Recuerda que para ver el video tienes que iniciar tu sesión de innovaccion** 14 | 15 | ¡Hola Explorers! En esta lección veremos la segunda parte de la estructura de HTML, esteremos conociendo los diferentes elementos que podemos colocar dentro del 16 | 17 | ## Headings 18 | 19 | Estos títulos que nos van a permitir resaltar información en tamaño y visibilidad, además de cuestiones de SEO. 20 | 21 | Generar una etiqueta heading 22 | 23 | ```html 24 |

Bienvenidos Explores

25 |

Bienvenidos Explores

26 |

Bienvenidos Explores

27 | ``` 28 | 29 | El valor que corresponde a la letra “h” puede ir del 1 al 6, permite ordenar estos títulos del más importante al menos importante, por ejemplo, un h2 puede utilizarse en títulos y subtítulos. 30 | 31 | El valor de estas “h” están estrictamente relacionados con la jerarquía de las búsquedas en internet, si dos páginas tuvieran un mismo heading pero uno tuviera h1 y otro h6, el navegador le daría prioridad al h1, por lo que aparecería entre las primeras búsquedas en el navegador, debido a que lo considera como información importante y valiosa. 32 | 33 | Nota: **No te olvides que para desplegar tu proyecto y poder visualizarlo debes crear una carpeta con tu archivo html y abrirlo en tu navegador** 34 | 35 | ## Párrafos 36 | 37 | Te permiten ingresar información, y su etiqueta se muestra de la siguiente manera: 38 | 39 | ```html 40 |

contenido

41 | ``` 42 | 43 | Donde tenemos el contenido podemos poner la información que queremos que se visualice en nuestro navegador, pero recuerda aún sin estilos, porque eso lo veremos en otra lección. 44 | 45 | Podemos agregar un párrafo adicional con salto de línea por defecto, pero si queremos poner párrafos separados dentro del mismo, sin el salto de línea podemos ajustarlo con la siguiente etiqueta: 46 | 47 | ```html 48 |
49 | ``` 50 | 51 | Y conoce como break line. 52 | 53 | ## Enlaces (links) 54 | 55 | Te permite colocar un link como si fuera un hipervínculo, por medio de una palabra o varias podrás dirigirte al link que le indiques al usuario, utilizando la siguiente etiqueta 56 | 57 | ```html 58 | Link a LaunchX 59 |
60 | ``` 61 | 62 | La letra “a” hace referencia al atributo que indica hacia donde te va a dirigir. 63 | Dentro de la misma etiqueta podemos agregar otro atributo, por ejemplo, un target= blank lo que nos permite abrir en una pestaña nueva la página del link que indicamos. 64 | 65 | Es muy útil cuando queremos llevar al usuario a ciertas páginas estratégicas, por ejemplo, a nuestras redes sociales, la compra de algún producto, etc. 66 | 67 | ## Imágenes 68 | 69 | ```html 70 | Perritos lindos 76 | ``` 77 | 78 | Contiene dos atributos, **source** o bien "src" que se refiere a la fuente de donde vamos a usar la imagen, la cuál puede ser de forma local o una imagen de internet y "alt" que significa texto alternativo, este texto alternativo le va a dar la descripción a la imagen. 79 | También podemos usar otros atributos como "width" y "height" donde vamos a poner una cantidad en pixeles que son el alto y el ancho de la imagen. 80 | 81 | ## Tablas 82 | 83 | Este elemento nos sirve para organizar información, imágenes, links, etc. 84 | 85 | ```html 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
CompañíaContactoPaís
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
103 | ``` 104 | 105 | ## Lista 106 | 107 | Para agregar un elemento a la lista usamos la siguiente etiqueta: 108 | 109 | ```html 110 |
  • café
    • 111 | ``` 112 | 113 | ```html 114 | 120 | ``` 121 | 122 | **ul** significa "unordered list" es decir una lista que no tiene orden. 123 | 124 | ```html 125 |
      126 |
    1. Alumno1
      2. 127 |
    2. Alumno2
      3. 128 |
    3. Alumno3
      4. 129 |
    130 | ``` 131 | 132 | **ol** significa "ordered list" y te mostrara una lista en orden jerárquico. 133 | 134 | ```html 135 |
    136 |
    Enchiladas
    137 |
    - Tortilla frita con salsa, rellena de pollo
    138 |
    Molletes
    139 |
    - Bolillo con frijoles y queso
    140 |
    141 | ``` 142 | 143 | - **_¡Vámonos hasta el espacio y más allá Explorers!_** 144 | -------------------------------------------------------------------------------- /02 - HTML/temario/3.-elementosCompuestos.md: -------------------------------------------------------------------------------- 1 | # Elementos Compuestos 2 | 3 | Que onda Explorers, vamos a empezar con las entradas en páginas web, estas entradas son muy útiles para tener nuestra interfaz con los usuarios. 4 | 5 | En el siguiente video les explico un poco más
    6 | ⬇️⬇️⬇️⬇️⬇️⬇️ VIDEO ⬇️⬇️⬇️⬇️⬇️⬇️
    7 | [LINK DE VIDEO](https://web.microsoftstream.com/video/fedb8772-5239-4706-9ee4-a347eba21a29) 8 | 9 | El código de ejemplo está en el siguiente link
    10 | ⬇️⬇️⬇️⬇️⬇️⬇️ CÓDIGO ⬇️⬇️⬇️⬇️⬇️⬇️
    11 | [LINK DE CÓDIGO](../programas/2.-elementosCompuestos.html) 12 | 13 | 14 | **Recuerda que para ver el video tienes que iniciar tu sesión de innovaccion** 15 | 16 | File: 3.-elementosCompuestos1.wav 17 | -------------------------------------------------------------------------------- 18 | ¡Hola Explorers! Bienvenidos a otra sesión de HTML. 19 | 20 | El día de hoy hablaremos de los elementos compuestos, específicamente de los formularios. 21 | Los formularios son pieza clave de muchas páginas y aplicaciones web, un ejemplo sencillo de estos, son los formularios de contacto, de inicio de sesión, de selección, entre muchos otros, su principal característica es que tienen entradas que recaban información de nuestro usuario y de igual forma tiene botones que capturan o enviar esta información. 22 | 23 | Pregúntate en que páginas o aplicaciones has visto estos formularios, revísalas, seguro llenaste algunos campos como por ejemplo tu correo o número de teléfono para que te contactaran. Incluso, WhatsApp tiene un campo de texto en donde tu escribes y envías información, un tweet, una foto en Instagram, piensa en cosas simples que usas en el día a día. 24 | Como podrás notar, nuestros teléfonos y computadoras tienen formularios en todos lados, únicamente varía el estilo y la forma de interacción. 25 | 26 | ## Crear un formulario. 27 | 28 | Tipos de entradas (inputs) 29 | 30 | Entrada de tipo texto 31 | ~~~html 32 | 33 | ~~~ 34 | 35 | Los atributos id y nombre nos van a permitir identificarlos, y es de suma importancia para saber a qué campo nos estamos refiriendo, para cuando tengamos más de un input, y tengamos que utilizar su información en el backend o para procesarlos después. 36 | Estos atributos también pueden colocarse en cualquier otro elemento. 37 | 38 | Etiquetas (labels) Permite etiquetar un elemento 39 | Las etiquetas usualmente se colocan antes del elemento que deseas etiquetar. Y puedes colocarlo en la posición que tú quieras, al frente de tu input, arriba, abajo, etc., pero no te olvides de pensar siempre en el usuario en la legibilidad de lectura. 40 | 41 | ~~~html 42 | 43 | ~~~ 44 | 45 | De esta forma estas indicando que el input de texto identificado como "Input1" tendrá una etiqueta llamada "Ejemplo de input de texto". 46 | 47 | El código en orden queda de la siguiente manera: 48 | 49 | ~~~html 50 | 51 | 52 | ~~~ 53 | 54 | Aquí más ejemplos de inputs de tipo de texto 55 | 56 | Input de correo 57 | ~~~html 58 |

    Input De Texto

    59 |
    60 |

    61 | ~~~ 62 | El input de correo va a validar que la información dentro del input tenga un formato de correo, es decir que contenga elementos vitales como una arroba, un punto, etc. De lo contrario le indicara al usuario que es un correo inválido, esta última funcionalidad se usa con Javascript y estilos. 63 | 64 | Input de número 65 | ~~~html 66 |
    67 |

    68 | ~~~ 69 | Valida que solo puedas ingresar datos de tipo número y no letras. 70 | 71 | Input de password 72 | ~~~html 73 |
    74 |

    75 | ~~~ 76 | El input de tipo password oculta la información para que no se muestre. 77 | 78 | Input de teléfono 79 | ~~~html 80 |
    81 |

    82 | ~~~ 83 | El input de teléfono valida que únicamente puedas ingresar 10 dígitos, por medio del maxlength="10". 84 | 85 | Input de URL 86 | ~~~html 87 |
    88 |

    89 | ~~~ 90 | Valida que la URL tenga ciertas características, identifica que sea una URL válida. 91 | 92 | La importancia de usar de forma correcta estas validaciones dentro de cada tipo de formulario nos va a permitir protegernos de la información que llega a nuestra base de datos y evitar tener información "sucia" o incluso ataques por medio de la información ingresada. 93 | 94 | Recuerda, únicamente se valida si cumple con el formato que estableciste en el código, más no si el número existe o la URL. 95 | 96 | 97 | 98 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 99 | 100 | -------------------------------------------------------------------------------- /02 - HTML/temario/4.-acomodoNavegacion.md: -------------------------------------------------------------------------------- 1 | # Acomodo y Navegación 2 | 3 | El código de ejemplo está en el siguiente link
    4 | ⬇️⬇️⬇️⬇️⬇️⬇️ CÓDIGO ⬇️⬇️⬇️⬇️⬇️⬇️
    5 | [LINK DE CÓDIGO](../programas/3.-layoutYRutas.html) 6 | -------------------------------------------------------------------------------- /02 - HTML/temario/5.-propiedades.md: -------------------------------------------------------------------------------- 1 | # Propiedades 2 | 3 | Les hice una recopilación en Excel con todas las propiedades y las etiquetas que se le pueden poner.
    4 | ⬇️⬇️⬇️⬇️⬇️⬇️ EXCEL ⬇️⬇️⬇️⬇️⬇️⬇️
    5 | [LINK DE EXCEL](../programas/atributosHTML.xlsx) 6 | -------------------------------------------------------------------------------- /03 - CSS/README.md: -------------------------------------------------------------------------------- 1 | # CSS 2 | 3 | ## Aquí le ponemos estilo a todas nuestras páginas 4 | 5 | Les dejé unos programas con los ejemplos que estuvimos viendo en los diferentes lives. 6 | 7 | - [Selectores](./programas/1.-selectores.html) 8 | - [Colores](./programas/2.-colores.css) 9 | - [Fondos](./programas/3.-fondos.css) 10 | - [Textos](./programas/4.-textos.css) 11 | 12 | ## Práctica 13 | 14 | [Este es el link de la práctica](./practica/README.md) 15 | -------------------------------------------------------------------------------- /03 - CSS/images/fondo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/03 - CSS/images/fondo1.jpg -------------------------------------------------------------------------------- /03 - CSS/images/fondo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/03 - CSS/images/fondo2.jpg -------------------------------------------------------------------------------- /03 - CSS/practica/README.md: -------------------------------------------------------------------------------- 1 | # Práctica CSS 2 | 3 | Que onda explorers! 4 | 5 | En esta semana vimos como meterle estilos a nuestras páginas y hacer que tomen personalidad completa. 6 | 7 | Para esta práctica necesito que clonen la página que está en el siguiente enlace [Link del diseño](./landingVacunaci%C3%B3n.png) by [Adhiari Subekti](https://dribbble.com/Adhiari_is) 8 | 9 | Como pueden ver es una página de vacunación y en estos momentos que se está poniendo la tercer dosis en varios estados de la república y que en algunos otros se está poniendo la segunda o incluso la primera sigue siendo muy importante recordar toda esta información. 10 | 11 | La práctica consiste en lo siguiente: 12 | 13 | - Planeación de campaña de vacunación (Un poco de mercadotecnia para llegar al sitio) 14 | - Maquetación del sitio con HTML 15 | - Estilos con CSS (Lo más acercado posible, pueden ser otras imágenes, íconos o colores, pero tiene que ser lo más cercano que puedas) 16 | 17 | Bonus: 18 | - Bonus de diseños o páginas adicionales (Totalmente a tu creatividad) 19 | - Bonus de despliegue de la página 20 | 21 | ## El 11 de Marzo se subirá el Form para que entreguen las prácticas y tienen hasta el 13 de Marzo a las 12:00 de la noche para entregarlas. 22 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 23 | 24 | -------------------------------------------------------------------------------- /03 - CSS/practica/landingVacunación.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/03 - CSS/practica/landingVacunación.png -------------------------------------------------------------------------------- /03 - CSS/programas/1.-selectores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Selectores 8 | 53 | 54 | 55 |

    Header simple

    56 |

    Header con id Titulo

    57 |

    Parrafo simple

    58 | 59 |

    Prueba clase Header 3

    60 |

    Prueba clase parrafo

    61 |

    Prueba multiples clases parrafo

    62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /03 - CSS/programas/2.-colores.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | p{ 6 | font-size: 20px; 7 | } 8 | 9 | .colorRojo{ 10 | color: red; 11 | } 12 | 13 | .colorRGB{ 14 | color: rgb(93, 113, 218); 15 | } 16 | 17 | .colorRGBA{ 18 | color: rgba(93, 217, 93, 0.5); 19 | } 20 | 21 | .colorHEX{ 22 | color: #EE43E3; 23 | } 24 | 25 | .colorHSL{ 26 | color: hsl(30, 68%, 31%); 27 | } 28 | -------------------------------------------------------------------------------- /03 - CSS/programas/2.-colores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Colores CSS 8 | 9 | 10 | 11 |

    Código de colores CSS

    12 | 13 |

    Prueba color rojo

    14 |

    Prueba color RGB

    15 |

    Prueba color RGBA

    16 |

    Prueba color HEX

    17 |

    Prueba color HSL

    18 | 19 |

    H1 en rojo

    20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /03 - CSS/programas/3.-fondos.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | section{ 6 | height: 400px; 7 | } 8 | 9 | div{ 10 | height: 400px; 11 | } 12 | 13 | .fondoColor{ 14 | background-color: #0f6666; 15 | } 16 | 17 | .fondoOpacidad{ 18 | background-color: #5d0c0c; 19 | opacity: 0.4; 20 | } 21 | 22 | .fondoImagen{ 23 | background-image: url("../images/fondo1.jpg"); 24 | } 25 | 26 | .fondoRepetidoX{ 27 | background-image: url("../images/fondo2.jpg"); 28 | background-repeat: repeat-x; 29 | } 30 | 31 | .fondoRepetidoY{ 32 | background-image: url("../images/fondo1.jpg"); 33 | background-repeat: repeat-y; 34 | } 35 | 36 | .fondoNoRepetido{ 37 | background-image: url("../images/fondo2.jpg"); 38 | background-repeat: no-repeat; 39 | } 40 | 41 | .fondoPosicion{ 42 | background-image: url("../images/fondo1.jpg"); 43 | background-repeat: no-repeat; 44 | background-position: bottom right; 45 | } 46 | 47 | .fondoCompleto{ 48 | background-image: url("../images/fondo2.jpg"); 49 | background-position: center; 50 | background-size: cover; 51 | } 52 | -------------------------------------------------------------------------------- /03 - CSS/programas/3.-fondos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fondos 8 | 9 | 10 | 11 |
    12 | 13 |
    14 | 15 |
    16 | 17 |
    18 | 19 |
    20 | 21 |
    22 | 23 |
    24 | 25 |
    26 | 27 | 28 | -------------------------------------------------------------------------------- /03 - CSS/programas/4.-textos.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .izquierda{ 6 | text-align: left; 7 | } 8 | 9 | .derecha{ 10 | text-align: right; 11 | } 12 | 13 | .centrado{ 14 | text-align: center; 15 | } 16 | 17 | .justificado{ 18 | text-align: justify; 19 | } 20 | 21 | .alReves{ 22 | direction: rtl; 23 | unicode-bidi: bidi-override; 24 | } 25 | 26 | .decoradoOverline{ 27 | text-decoration-line: overline; 28 | } 29 | 30 | .decoradoLineThrough{ 31 | text-decoration-line: line-through; 32 | } 33 | 34 | .decoradoUnderline{ 35 | text-decoration-line: underline; 36 | } 37 | 38 | .decoradoCombinado{ 39 | text-decoration-line: underline; 40 | text-decoration-color: red; 41 | text-decoration-style: dotted; 42 | text-decoration-thickness: 5px; 43 | } 44 | 45 | .negritas{ 46 | font-weight: 700; 47 | } 48 | 49 | .ligeras{ 50 | font-weight: 100; 51 | } 52 | 53 | .link{ 54 | text-decoration: none; 55 | color: black; 56 | } 57 | -------------------------------------------------------------------------------- /03 - CSS/programas/4.-textos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Textos CSS 8 | 9 | 10 | 11 |

    Parrafo izquierda

    12 |

    Parrafo derecha

    13 |

    Parrafo Centrado

    14 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum molestiae, adipisci voluptatem ex quod tenetur quia praesentium necessitatibus doloribus qui repudiandae nihil exercitationem dolorem hic cum commodi beatae earum assumenda.

    15 |

    Parrafo al reves

    16 |

    Parrafo Overline

    17 |

    Parrafo Line Through

    18 |

    Parrafo Underline

    19 |

    Parrafo decorado completo

    20 |

    Parrafo Negritas

    21 |

    Parrafo ligeras

    22 | 23 | Link a tal lugar 24 | 25 | 26 | -------------------------------------------------------------------------------- /03 - CSS/programas/flexbox.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .contenedor{ 6 | min-height: 400px; 7 | background-color: #697070; 8 | display: flex; 9 | justify-content: space-around; 10 | align-items: center; 11 | flex-wrap: wrap; 12 | } 13 | 14 | .elemento{ 15 | height: 200px; 16 | width: 200px; 17 | background-color: #911a3c; 18 | border-color: #fff; 19 | border-width: 5px; 20 | border-style: solid; 21 | padding: 10px; 22 | } -------------------------------------------------------------------------------- /03 - CSS/programas/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flexbox 8 | 9 | 10 | 11 |
    12 |
    13 |

    Hola explorers 1

    14 |
    15 |
    16 |
    17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /03 - CSS/programas/mobile.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .container{ 6 | background-color: blue; 7 | height: 400px; 8 | } 9 | 10 | .container-div{ 11 | background-color: red; 12 | width: 200px; 13 | height: 200px; 14 | } 15 | 16 | .parrafo{ 17 | font-size: 15; 18 | font-weight: bold; 19 | } 20 | 21 | @media (max-width: 600px) { 22 | .container{ 23 | background-color: green; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | } 28 | 29 | .container-div{ 30 | height: 250; 31 | background-color: orange; 32 | } 33 | 34 | .parrafo{ 35 | text-align: center; 36 | } 37 | } 38 | 39 | @media (max-width: 900px) and (min-width:600px) { 40 | .container{ 41 | background-color: pink; 42 | } 43 | 44 | .parrafo{ 45 | font-size: 20; 46 | font-weight: 200; 47 | } 48 | } -------------------------------------------------------------------------------- /03 - CSS/programas/mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | pantallas móviles 8 | 9 | 10 | 11 |
    12 |
    13 |

    Hola explorers, ¿cómo están?

    14 |
    15 |
    16 | 17 | 18 | -------------------------------------------------------------------------------- /04 - JS/README.md: -------------------------------------------------------------------------------- 1 | # JS 2 | 3 | ## Aquí haremos que nuestras páginas tengan funcionalidad 4 | 5 | Les dejé unos programas con los ejemplos que estuvimos viendo en los diferentes lives. 6 | 7 | - [Introducción a Programación con JS](./programas/1.-intro.js) 8 | - [Funciones y Excepciones](./programas/2.-funciones.js) 9 | - [JS en el navegador (DOM)](./programas/3.-navegador.js) 10 | - [Pokedex](./programas/4.-pokedex.js) 11 | 12 | Recuerden que para correrlos necesitan también los programas de HTML que están en el siguiente link [Carpeta de programas](./programas/) 13 | ## Práctica 14 | 15 | [Este es el link de la práctica](./practica/README.md) 16 | -------------------------------------------------------------------------------- /04 - JS/images/pokedex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/04 - JS/images/pokedex.jpg -------------------------------------------------------------------------------- /04 - JS/practica/README.md: -------------------------------------------------------------------------------- 1 | # Práctica JS 2 | 3 | Que onda explorers! 4 | 5 | En esta semana vimos como usar JavaScript para hacer que nuestras aplicaciones web tomen vida. 6 | 7 | Para esta práctica tuvieron que haber visto el live del viernes ¡Donde hicimos el pokedex! [Link de live](https://web.microsoftstream.com/video/71be733f-2b72-4c9f-8712-83fc981a8b84) 8 | ustedes seguirán con ese proyecto para tener cada quien el suyo con las siguientes características. 9 | 10 | - Maquetación del sitio con HTML 11 | - Diseño con CSS para que parezca un pokedex la página, aquí les dejo una imágen de uno, pero pueden volar su creatividad a como gusten. SDLC 12 | - Tener un input de entrada, donde se meta el nombre del pokemón a buscar. 13 | - Tomar ese input e ir a consultar el API de [pokeapi](https://pokeapi.co/) 14 | - mostrar en pantalla los siguientes datos del pokemón ingresado: 15 | - Nombre 16 | - Imágen 17 | - Tipo de pokemón 18 | - Estadísticas 19 | - Movimientos 20 | 21 | Bonus: 22 | - Bonus si tu página es responsive y se puede ver en celulares 23 | - Bonus de despliegue de tu pokedex 24 | - Bonus de uso de otras rutas como búsqueda por número de pokemón o mostrar un rango de pokemóns 25 | 26 | Pueden usar los conocimientos vistos o usar diferentes herramientas que conozcan o que investiguen como las librerías de diseño o librerías de JS sin problemas. 27 | 28 | Aquí les dejo el código de pokedex que estuvimos haciendo el día del live [Link de código](../programas/4.-pokedex.js) 29 | 30 | ## El 18 de Marzo se subirá el Form para que entreguen las prácticas y tienen hasta el 20 de Marzo a las 12:00 de la noche para entregarlas. 31 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 32 | -------------------------------------------------------------------------------- /04 - JS/programas/1.-intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Intro JS 8 | 9 | 10 | 11 |

    Bienvenidos Explorers a JS

    12 | 13 | 14 | -------------------------------------------------------------------------------- /04 - JS/programas/1.-intro.js: -------------------------------------------------------------------------------- 1 | /*Las variables se pueden declarar con la palabra reservada "var", estas variables se pueden considerar como globales 2 | También se pueden declarar con la palabra reservada "let" y estas serán usadas dentro de un bloque de código 3 | Igualmente está la declaración con la palabra reservada "const" y se usarán cuando el valor no cambie */ 4 | console.log("\n************* Variables **************\n"); 5 | var numero1 = 4; 6 | var numero2 = 6; 7 | console.log("Número 1: " + numero1 + " Numero 2: " + numero2); 8 | 9 | /*Las cadenas (Strings) son caracteres que pueden ser una frase o palabra y estas pueden darse con comillas dobles "", simples '' o invertidas `` 10 | la diferencia es que con las invertidas podemos agregar variables dentro de la cadena con la sintaxis ${}*/ 11 | console.log("\n************* Cadenas **************\n"); 12 | var frase1 = "Ejemplo comillas dobles"; 13 | var frase2 = 'Ejemplo comillas simples'; 14 | var frase3 = `Ejemplo comillas ${frase1} invertidas`; 15 | 16 | console.log(frase1 + "\n" + frase2 + "\n" + frase3); 17 | 18 | /* Las condicionales se pueden usar valores como > < = == === != y cada una tiene una funcionalidad de comparación entre elementos */ 19 | console.log("\n************* Condicionales **************\n"); 20 | 21 | console.log(numero1 != numero2); 22 | 23 | /*Los operadores lógicos se utilizan cuando se necesita comparar más de una condicional 24 | El operador && (AND) necesita que todos sus valores sean true para que la salida sea true 25 | El operador || (OR) necesita que solo uno de sus valores sea true para que la salida sea true*/ 26 | console.log("\n************* Operador lógico AND **************\n"); 27 | console.log(true && true); 28 | 29 | console.log("\n************* Operador lógico OR **************\n"); 30 | console.log(false || false); 31 | 32 | 33 | /* Los arreglos son estructuras de datos que nos permiten agrupar datos de un mismo tipo */ 34 | console.log("\n************* Arreglos **************\n"); 35 | let listaDeNumeros = [2, 3, 5, 7, 11, 234]; 36 | 37 | console.log(listaDeNumeros[5]); 38 | 39 | listaDeNumeros.push(16); 40 | listaDeNumeros.push(939); 41 | 42 | console.log(listaDeNumeros); 43 | console.log(listaDeNumeros.length); 44 | 45 | 46 | let listaDePalabras = ["Explorer", "MisionComander", "LaunchX", "Innovaccion"]; 47 | console.log(listaDePalabras); 48 | console.log(listaDePalabras.length); 49 | 50 | /* Las cadenas (strings) pueden ser tratadas como arreglos */ 51 | let palabra = "Explorer"; 52 | console.log(palabra[2]); 53 | console.log(palabra.length); 54 | 55 | 56 | /* Los objetos son estructuras de datos que nos permiten agrupar datos de un diferentes tipos */ 57 | console.log("\n************* Objetos **************\n"); 58 | 59 | let explorer = { 60 | nombre: "Nombre del Explorer", 61 | email: "email@innovaccion.mx", 62 | numReg: 12345, 63 | mision: "FrontEnd", 64 | proyectos: ["Abogabot", "Taquería", "Pastelería", "Vacunación"], 65 | proPer: { 66 | escolar: "Tareas", 67 | profesional: "Trabajo", 68 | personal: "Negocio" 69 | } 70 | }; 71 | 72 | console.log(explorer); 73 | 74 | console.log(explorer.proPer.escolar); 75 | 76 | 77 | /* Flujo condicional */ 78 | let number1 = 2; 79 | let number2 = 6; 80 | console.log("\n************* if / else **************\n"); 81 | if (number1 > number2 && number2 > 5) { 82 | console.log("El número 1 es mayor que número 2"); 83 | } 84 | else if( number1 == number2 || number1 < 3){ 85 | console.log("Los números son iguales"); 86 | } 87 | else { 88 | console.log("El número 2 es mayor que número 1"); 89 | } 90 | 91 | /* Ciclo condicional */ 92 | console.log("\n************* While **************\n"); 93 | let numberWhile = 5; 94 | while (numberWhile <= 12) { 95 | console.log(numberWhile); 96 | numberWhile = numberWhile + 2; 97 | } 98 | console.log("Aquí ya salió del while " + numberWhile); 99 | 100 | /* Ciclo condicional de una iteración mínimo */ 101 | console.log("\n************* Do While **************\n"); 102 | let numeroDoWhile = 22; 103 | do { 104 | numeroDoWhile = numeroDoWhile + 2; 105 | console.log(numeroDoWhile); 106 | } while (numeroDoWhile < 20); 107 | console.log("Aquí sale del Do While " + numeroDoWhile); 108 | 109 | 110 | /* Ciclo for con iteración controlada */ 111 | console.log("\n************* For **************\n"); 112 | let numeroFor = 0 113 | for (numeroFor ; numeroFor <= 12; numeroFor = numeroFor + 1) { 114 | console.log(numeroFor); 115 | } 116 | console.log("Aquí salimos del for " + numeroFor); 117 | 118 | /* 119 | /* Opciones para evitar anidar condicionales */ 120 | console.log("\n************* Switch **************\n"); 121 | switch (prompt("¿Cómo está el clima?")) { 122 | case "lluvioso": 123 | console.log("No te vayas a mojar"); 124 | break; 125 | case "soleado": 126 | console.log("Ponte bloqueador"); 127 | break; 128 | case "nublado": 129 | console.log("Tapate bien"); 130 | break; 131 | default: 132 | console.log("No se como está el clima"); 133 | break; 134 | } 135 | console.log("Aquí salimos del Switch"); 136 | 137 | -------------------------------------------------------------------------------- /04 - JS/programas/2.-funciones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Parte 2 JS 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04 - JS/programas/2.-funciones.js: -------------------------------------------------------------------------------- 1 | const cuadrado = function(x) { 2 | return x * x; 3 | } 4 | let numero = 4; 5 | console.log(cuadrado(numero)); 6 | 7 | 8 | const ruido = function () { 9 | console.log("kataplum!"); 10 | } 11 | 12 | ruido(); 13 | 14 | 15 | const exponencial = function (base, exponente) { 16 | let resultado = 1; 17 | for (let i = 0; i < exponente; i++){ 18 | resultado *= base; 19 | } 20 | return resultado; 21 | } 22 | 23 | console.log(exponencial(4,3)) 24 | 25 | 26 | console.log(sumar(5,65)); 27 | function sumar(x, y) { 28 | return x + y; 29 | } 30 | 31 | 32 | const restar = (a, b) => { 33 | return a - b; 34 | } 35 | console.log(restar(40, 8)); 36 | 37 | 38 | function saludar(quien) { 39 | console.log("Hola " + quien); 40 | return; 41 | } 42 | saludar("Explorer"); 43 | console.log("Bye"); 44 | 45 | 46 | 47 | //Excepciones 48 | function preguntaDireccion(pregunta) { 49 | let result = prompt(pregunta); 50 | if (result.toLowerCase() == "izquierda") return "I"; 51 | if (result.toLowerCase() == "derecha") return "D"; 52 | throw new Error("Dirección inválida: " + result); 53 | } 54 | 55 | function mirar() { 56 | if (preguntaDireccion("A que lado?") == "I") { 57 | return "una casa"; 58 | } else { 59 | return "2 osos hambrientos"; 60 | } 61 | } 62 | 63 | try { 64 | console.log("Mira a ", mirar()); 65 | } catch (error) { 66 | console.log("Hubo un error: " + error); 67 | } 68 | 69 | 70 | 71 | //Asincrono 72 | setTimeout(() => console.log("Tick"), 500); 73 | 74 | let fifteen = Promise.resolve(15); 75 | fifteen.then(value => console.log(`Got ${value}`)); 76 | 77 | const promesa = () => 78 | new Promise((resolve, reject) => 79 | setTimeout( 80 | () => (resolve(console.log('Todo cool')), reject(new Error('oops'))), 81 | 2000 82 | ) 83 | ) 84 | 85 | async function main() { 86 | // promesa() 87 | // .then(() => { 88 | // promesa() 89 | // .then(() => console.log('hola')) 90 | // .catch((err) => console.error(err)) 91 | // }) 92 | // .catch((err) => console.error(err)) 93 | 94 | await promesa(); 95 | console.log('Aquí termina la primer promesa'); 96 | await promesa(); 97 | console.log('Aquí termina la segunda promesa'); 98 | } 99 | 100 | main(); 101 | 102 | -------------------------------------------------------------------------------- /04 - JS/programas/3.-navegador.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS en el navegador 8 | 15 | 16 | 17 |

    Así se usa JS en el navegador

    18 |

    Este es un parrafo

    19 | Este es otro parrafo 20 | 21 |

    22 | 23 |

    Da click aquí

    24 | 25 |
    26 |

    Mouse over me

    27 |
    28 | 29 |
    30 |

    Click me

    31 |
    32 | 33 | 34 | 35 | 38 | 39 | -------------------------------------------------------------------------------- /04 - JS/programas/3.-navegador.js: -------------------------------------------------------------------------------- 1 | //Encontrar elementos de HTML 2 | 3 | const titulo = document.getElementById("titulo"); 4 | const parrafo = document.getElementsByTagName("p"); 5 | const links = document.getElementsByClassName("links"); 6 | 7 | 8 | //Cambiar valores de HTML 9 | titulo.innerHTML = "Titulo cambiado"; 10 | 11 | document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + parrafo[0].innerHTML; 12 | 13 | links[0].href = "google.com"; 14 | 15 | //Cambiar estilos 16 | 17 | titulo.style.color = "red" 18 | 19 | //Eventos 20 | 21 | function cambiarTexto(obj) { 22 | obj.innerHTML = "Texto clickeado" 23 | } 24 | 25 | function mOver(obj) { 26 | obj.innerHTML = "Mouse over now" 27 | } 28 | 29 | function mOut(obj) { 30 | obj.innerHTML = "Mouse out" 31 | } 32 | 33 | function mDown(obj) { 34 | obj.style.backgroundColor = "#1ec5e5"; 35 | obj.innerHTML = "sueltame"; 36 | } 37 | 38 | function mUp(obj) { 39 | obj.style.backgroundColor="#D94A38"; 40 | obj.innerHTML="gracias"; 41 | } 42 | 43 | //addEventListener 44 | 45 | const boton = document.getElementById("boton"); 46 | boton.addEventListener("click", alerta) 47 | 48 | function alerta() { 49 | alert("alerta"); 50 | } 51 | -------------------------------------------------------------------------------- /04 - JS/programas/4.-pokedex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pokedex LaunchX 8 | 9 | 10 | 11 | 12 |

    Pokedex LaunchX

    13 | 14 | Pokemon 15 | 16 | 17 | 20 | 21 | -------------------------------------------------------------------------------- /04 - JS/programas/4.-pokedex.js: -------------------------------------------------------------------------------- 1 | const fetchPokemon = () => { 2 | const pokeNameInput = document.getElementById("pokeName"); 3 | let pokeName = pokeNameInput.value; 4 | pokeName = pokeName.toLowerCase(); 5 | const url = `https://pokeapi.co/api/v2/pokemon/${pokeName}`; 6 | fetch(url).then((res) => { 7 | if (res.status != "200") { 8 | console.log(res); 9 | pokeImage("./pokemon-sad.gif") 10 | } 11 | else { 12 | return res.json(); 13 | } 14 | }).then((data) => { 15 | if (data) { 16 | console.log(data); 17 | let pokeImg = data.sprites.front_default; 18 | pokeImage(pokeImg); 19 | console.log(pokeImg); 20 | } 21 | }); 22 | } 23 | 24 | const pokeImage = (url) => { 25 | const pokePhoto = document.getElementById("pokeImg"); 26 | pokePhoto.src = url; 27 | } 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /05 - VUEJS/README.md: -------------------------------------------------------------------------------- 1 | # Vue JS 2 | 3 | Vue es uno de los frameworks top 3 que nos permiten hacer que nuestras plataformas y aplicaciones cobren vida y tengamos las posibilidades de crear, desarrollar y lanzar al mundo cosas increibles. 4 | 5 | ## Programas 6 | 7 | - [Vue desde CDN](./programas/CDN/app.js) 8 | - [Vue con CLI](./programas/CLI/App.vue) 9 | - [VUEX](./programas/VUEX/App.vue) 10 | 11 | Estos son los programas con los ejemplos que estuvimos viendo en los diferentes lives. 12 | 13 | ## Práctica 14 | 15 | [Este es el link de la práctica](./practica/README.md) 16 | -------------------------------------------------------------------------------- /05 - VUEJS/practica/README.md: -------------------------------------------------------------------------------- 1 | # Práctica VUE 2 | 3 | Que onda explorers! 4 | 5 | En esta semana vimos como usar VueJS para hacer que nuestras aplicaciones web tomen vida a partir de un framework que nos da muchísimas posibilidades. 6 | 7 | Para esta práctica vamos a recordar la primera práctica que tuvimos en donde maquetamos una pastelería, pero ahora lo haremos con Vue. 8 | 9 | Si no recuerdan esa práctica se las dejo [aquí](../../02%20-%20HTML/practicas/README.md) 10 | 11 | y con Vuex vamos a estar captando las entradas de los formularios y guardandolos en el estado para mostrarlo del lado del pastelero, lo que necesitaremos para esta práctica será lo siguiente. 12 | 13 | - Página de cliente de pastelería POR COMPONENTES 14 | - Componente con información de la pastelería Dirección, Teléfono y horarios de atención 15 | - Componente para ver los diferentes sabores de pasteles, así como los precios de cada uno 16 | - Componente para ver los diferentes adornos con los que se puede decorar el pastel y los precios de cada uno 17 | - Componente para combinar sabores dependiendo de sus preferencias 18 | - Componente para combinar adornos dependiendo de sus preferencias 19 | - Componente de formulario debe de contener los datos de contacto del cliente que son Nombre, Teléfono, Correo Electrónico, Descripción general del pastel y la selección de sabores y adornos 20 | - Página de pastelero POR COMPONENTES 21 | - Componente de información de la cantidad de sabores que le quedan para hacer los pasteles 22 | - Componente de información de la cantidad de adornos que le quedan para hacer los pasteles 23 | - Componente donde aparezcan los pedidos que se han realizado con los datos del formulario 24 | - Uso de rutas para poder acceder a la página de cliente y de pastelero (router de Vue) 25 | - La información de sabores, adornos, cantidades y precio debe de estar en el estado con Vuex o Vite y se debe modificar ahí para mostrarse en los componentes. 26 | 27 | Bonus: 28 | - Bonus si tu página es responsive y se puede ver en celulares 29 | - Bonus de despliegue de la pastelería 30 | 31 | Pueden usar los conocimientos vistos o usar diferentes herramientas que conozcan o que investiguen como las librerías de diseño o librerías de JS sin problemas. 32 | 33 | Aquí les dejo un código para ver como usar inputs en Vue [Link de código](../programas/VUEX/components/ColorCode.vue) 34 | 35 | ## El 25 de Marzo se subirá el Form para que entreguen las prácticas y tienen hasta el 27 de Marzo a las 12:00 de la noche para entregarlas. 36 | ***¡Vámonos hasta el espacio y más allá Explorers!*** 37 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/CDN/app.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | firstName: 'John', 5 | lastName: 'Doe', 6 | email: 'john@email.com', 7 | gender: 'male', 8 | picture: 'https://randomuser.me/api/portraits/men/10.jpg' 9 | } 10 | }, 11 | methods: { 12 | async getUser() { 13 | const res = await fetch('https://randomuser.me/api'); 14 | const { results } = await res.json(); 15 | 16 | this.firstName = results[0].name.first 17 | this.lastName = results[0].name.last 18 | this.email = results[0].email 19 | this.gender = results[0].gender 20 | this.picture = results[0].picture.large 21 | }, 22 | } 23 | }) 24 | 25 | app.mount('#app'); 26 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/CDN/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Random user generator 9 | 10 | 11 |
    12 | profile 13 |

    {{firstName}} {{lastName}}

    14 |

    Email: {{email}}

    15 | 16 |
    17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/CDN/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | html, 8 | body { 9 | font-family: Arial, Helvetica, sans-serif; 10 | } 11 | 12 | #app { 13 | width: 400px; 14 | height: 100vh; 15 | margin: auto; 16 | text-align: center; 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | h1, 24 | h3 { 25 | margin-bottom: 1rem; 26 | font-weight: normal; 27 | } 28 | 29 | img { 30 | border-radius: 50%; 31 | border: 5px #333 solid; 32 | margin-bottom: 1rem; 33 | } 34 | 35 | .male { 36 | border-color: steelblue; 37 | background-color: steelblue; 38 | } 39 | 40 | .female { 41 | border-color: pink; 42 | background-color: pink; 43 | color: #333; 44 | } 45 | 46 | button { 47 | cursor: pointer; 48 | display: inline-block; 49 | background: #333; 50 | color: white; 51 | font-size: 18px; 52 | border: 0; 53 | padding: 1rem 1.5rem; 54 | } 55 | 56 | button:focus { 57 | outline: none; 58 | } 59 | 60 | button:hover { 61 | transform: scale(0.98); 62 | } 63 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/CLI/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/CLI/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/05 - VUEJS/programas/CLI/assets/logo.png -------------------------------------------------------------------------------- /05 - VUEJS/programas/CLI/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 97 | 98 | 99 | 115 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/CLI/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | createApp(App).mount("#app"); 5 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 31 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/05 - VUEJS/programas/VUEX/assets/logo.png -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/components/Botones.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/components/ColorCode.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/components/ContadorCuadrado.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/components/Counter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | 6 | createApp(App).use(store).use(router).mount('#app') 7 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from 'vue-router' 2 | import HomeView from '../views/HomeView.vue' 3 | 4 | const routes = [ 5 | { 6 | path: '/', 7 | name: 'home', 8 | component: HomeView 9 | }, 10 | { 11 | path: '/about', 12 | name: 'about', 13 | // route level code-splitting 14 | // this generates a separate chunk (about.[hash].js) for this route 15 | // which is lazy-loaded when the route is visited. 16 | component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') 17 | } 18 | ] 19 | 20 | const router = createRouter({ 21 | history: createWebHashHistory(), 22 | routes 23 | }) 24 | 25 | export default router 26 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'vuex' 2 | 3 | export default createStore({ 4 | state: { 5 | counter: 0, 6 | color: "blue" 7 | }, 8 | getters: { 9 | contadorCuadrado(state) { 10 | return state.counter * state.counter; 11 | } 12 | }, 13 | mutations: { 14 | subirContador(state, random){ 15 | state.counter += random; 16 | }, 17 | bajarContador(state, random){ 18 | state.counter -= random; 19 | }, 20 | colorChange(state, color) { 21 | state.color = color; 22 | } 23 | }, 24 | actions: { 25 | async subirContador() { 26 | const res = await fetch('https://www.random.org/integers/?num=1&min=1&max=8&col=1&base=10&format=plain&rnd=new'); 27 | const results = await res.json(); 28 | console.log(results) 29 | this.commit("subirContador", results); 30 | }, 31 | async bajarContador() { 32 | const res = await fetch('https://www.random.org/integers/?num=1&min=1&max=8&col=1&base=10&format=plain&rnd=new'); 33 | const results = await res.json(); 34 | console.log(results) 35 | this.commit("bajarContador", results); 36 | }, 37 | colorChange({commit}, color) { 38 | commit("colorChange", color); 39 | } 40 | }, 41 | modules: { 42 | } 43 | }) 44 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/views/AboutView.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /05 - VUEJS/programas/VUEX/views/HomeView.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 29 | 30 | 45 | -------------------------------------------------------------------------------- /06 - VUEX/vuex.md: -------------------------------------------------------------------------------- 1 | # Vuex 2 | 3 | ## Coming Soon 16/03/22 4 | -------------------------------------------------------------------------------- /07 - AZURE/azure.md: -------------------------------------------------------------------------------- 1 | # Azure 2 | 3 | ## Coming Soon 21/03/22 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FrontEnd-Mision 2 | 3 | ## Bienvenidos Explorers! 4 | 5 | Estas entrando en tu misión de FrontEnd! 6 | 7 | En esta misión veremos la mágia de cómo funcionan las aplicaciones y es tu introducción a la programación Web en su camino a convertirse en programadores FullStack. 8 | 9 | ![Frontend Image](./images/frontend.gif) 10 | 11 | --- 12 | 13 | ## Organización de MISIÓN FRONTEND 14 | 15 | El curso tiene 8 módulos que tienen dentro varios subtemas que iremos viendo conforme avance el curso 16 | 17 | 1. [Programación FrontEnd](./01%20-%20INTRO/README.md) 18 | 19 | - ¿Qué es la programación FRONTEND? 20 | - ¿Para que sirve la programación FRONTEND? 21 | - En qué consiste la programación FRONTEND 22 | - Tecnologías aplicadas 23 | - SETUP de programación Web 24 | - Estructura de páginas web 25 | - Estructura y limpieza de código 26 | 27 | 2. [HTML](./02%20-%20HTML/README.md) 28 | 29 | - ¿Qué es HTML? 30 | - Estructura de archivo HTML 31 | - Sintaxis de etiquetas 32 | - Titulos / Headings 33 | - Parrafos / Paragraphs 34 | - Imágenes / Images 35 | - Enlaces / Links 36 | - Tablas / Tables 37 | - Listas / Listas 38 | - Entradas / Input 39 | - Botón / Button 40 | - Formularios / Forms 41 | - Rutas / Routes 42 | - Acomodo / Layout 43 | - Barra de navegación / NavBar - SideBar 44 | - Pie de página / Footer 45 | - Filas y columnas / Rows & Columns 46 | - Propiedades de etiquetas / Properties 47 | - Práctica de HTML 48 | 49 | 3. [CSS](./03%20-%20CSS/README.md) 50 | 51 | - ¿Qué es CSS? 52 | - Selectores / Selector 53 | - Colores 54 | - Fondos / Background 55 | - Textos y fuentes 56 | - Enlaces y botones / Links 57 | - Acomodo / Box model 58 | - Responsive 59 | - Media Queries 60 | - Grid 61 | - Flexbox 62 | - Librerías de CSS 63 | - Práctica de CSS 64 | 65 | 4. [JavaScript](./04%20-%20JS/README.md) 66 | 67 | - ¿Qué es JS? 68 | - Variables, tipos y operadores 69 | - Estructura de programación 70 | - Funciones 71 | - Estructuras de datos 72 | - Objetos 73 | - Excepciones 74 | - Programación Asincrona 75 | - JS en el navegador 76 | - DOM (Document Object Model 77 | - Eventos 78 | - Consumo de APIs 79 | - Librerías y paquetes de JS 80 | - Práctica de JS 81 | 82 | 5. [Vue JS](./05%20-%20VUEJS/README.md) 83 | 84 | - ¿Qué es VueJS? 85 | - Setup de VueJS 86 | - Estructura de archivos y proyecto 87 | - Estilos globales 88 | - Componentes 89 | - Eventos 90 | - Métodos 91 | - Rutas 92 | - JSON Server 93 | - Práctica de Vue 94 | 95 | 6. [VUEX](./06%20-%20VUEX/vuex.md) 96 | 97 | - ¿Qué es VUEX? 98 | - Patrón de manejo de estado 99 | - Setup 100 | - Estado / State 101 | - Getters 102 | - Mutaciones 103 | - Acciones 104 | - Módulos 105 | - Práctica VUEX 106 | 107 | 7. [Azure](./08%20-%20AZURE/azure.md) 108 | - Azure Static Web App 109 | - Setup 110 | - Github Actions 111 | - Mantenimiento de tu aplicación 112 | 113 | **Las diferentes ligas se irán desbloqueando durante el curso conforme pasen las semanas para que no se me adelanten** 114 | 115 | **_Vámonos hasta el espacio y más allá Explorers!_** 116 | "# cursoFrontEnd" 117 | -------------------------------------------------------------------------------- /images/frontend.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romarpla/cursoFrontEnd/10846bab2e324c4e1f96706d1ae174a1e2f56115/images/frontend.gif --------------------------------------------------------------------------------