Repository: romarpla/FrontEnd-Mision Branch: main Commit: 035e1ea2b421 Files: 65 Total size: 96.0 KB Directory structure: gitextract_570ape97/ ├── 01 - INTRO/ │ ├── README.md │ ├── practicas/ │ │ ├── 1.-Reqierimientos.doc │ │ ├── 1.-requerimientos.md │ │ ├── 2.-buyerPersona.md │ │ ├── 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 │ ├── practicas/ │ │ └── README.md │ ├── programas/ │ │ ├── 1.-etiquetasBasicas.html │ │ ├── 2.-elementosCompuestos.html │ │ ├── 3.-layoutYRutas.html │ │ └── atributosHTML.xlsx │ └── temario/ │ ├── 1.-queEsHMTL.md │ ├── 2.-etiquetasBasicas.md │ ├── 3.-elementosCompuestos.md │ ├── 4.-acomodoNavegacion.md │ └── 5.-propiedades.md ├── 03 - CSS/ │ ├── README.md │ ├── practica/ │ │ └── README.md │ └── programas/ │ ├── 1.-selectores.html │ ├── 2.-colores.css │ ├── 2.-colores.html │ ├── 3.-fondos.css │ ├── 3.-fondos.html │ ├── 4.-textos.css │ └── 4.-textos.html ├── 04 - JS/ │ ├── README.md │ ├── 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 │ │ ├── components/ │ │ │ └── HelloWorld.vue │ │ └── main.js │ └── VUEX/ │ ├── App.vue │ ├── 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 - ANGULAR/ │ └── angular.md ├── 08 - AZURE/ │ └── azure.md └── README.md ================================================ FILE CONTENTS ================================================ ================================================ FILE: 01 - INTRO/README.md ================================================ # Introducción a la programación FrontEnd 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. En este módulo veremos las siguientes cosas. 1. **Programación FrontEnd** - [¿Qué es la programación FRONTEND?](./temario/1.-queEsFrontEnd.md) - [Tecnologías aplicadas](./temario/2.-frontEndTecs.md) - [SETUP de programación Web](./temario/3.-webDevSetup.md) - [Estructura de páginas web](./temario/4.-estructuraWeb.md) - [Estructura y limpieza de código](./temario/5.-estructuraCodigo.md) Para entrar a los contenidos solo tienes que dar click en el título y empezará la aventura. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/practicas/1.-requerimientos.md ================================================ # Practica Requerimientos Para esta practica pueden usar la plantilla que les dejo en el siguiente link --> [PLANTILLA](./1.-Reqierimientos.doc) ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/practicas/2.-buyerPersona.md ================================================ # Practica Buyer Persona Para esta practica pueden usar la plantilla que les dejo en el siguiente link --> [PLANTILLA](./2.-persona.pdf) ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/practicas/3.-publicoObjetivo.md ================================================ # Practica Pubico objjetivo Para esta practica pueden usar la plantilla que les dejo en el siguiente link --> https://miro.com/es/plantillas/publico-objetivo/ ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/practicas/4.-wireframe.md ================================================ # Practica Wireframe Recuerda que Para esta practica puedes usar las siguientes herramientas: - Miro (https://miro.com/es/) Esta herramienta te permitirá crear flujos de información y flujos de negocio. - Balsamic mockups (https://balsamiq.com/wireframes/) Nos da elementos para poder crear interfaces rápidas y que nos dejan representar la idea. - Dibujos a mano alzada --> a veces un wireframe también puede ser en una servilleta o en cualquier forma escrita. Y puedes revisar el live del jueves 17/02/22 --> https://web.microsoftstream.com/video/9bcebbbb-a07a-4ffe-a4b8-3e9ad0c6b5e8 ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/practicas/5.-ui.md ================================================ # Practica Wireframe Recuerda que Para esta practica puedes usar las siguientes herramientas: - 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. - 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. - 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. Y puedes revisar el live del jueves 17/02/22 --> https://web.microsoftstream.com/video/9bcebbbb-a07a-4ffe-a4b8-3e9ad0c6b5e8 ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/practicas/README.md ================================================ # Practicas de Intro a Frontend Para las practicas de esta semana tendrán el siguiente caso y a raiz de eso sacar los puntos mencionados abajo. **Caso: Abogabot** Descripción: - 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. - Al momento de llenar el formulario se manda al proceso de pago para finalizar la transacción. - 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. - 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. - El administrador recibe el pago y debe de ser capaz de verlo en un dashboard para ver la cantidad de ingresos recibidos. - El administrador actualiza el proceso de la demanda y agrega comentarios en cada paso del proceso. - Al usuario le llegan correos de notificación para saber el avance de su proceso. - La página debe de ser responsive para poderla ver desde el celular. - La preferncia de colores del cliente es azul marino y blanco, pero acepta propuestas. - **Practicas** - [Toma de requerimientos](./1.-requerimientos.md) - [Crea tu buyer persona](./2.-buyerPersona.md) - [Publico objetivo](./3.-publicoObjetivo.md) - [Crea tu primer Wireframe UX](./4.-wireframe.md) - [Ahora el UI](./5.-ui.md) Para entrar a los contenidos solo tienes que dar click en el título y empezará la aventura. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/temario/1.-queEsFrontEnd.md ================================================ # ¿Qué es FrontEnd? Hola Explorers! Esta es la primera de todas las preguntas que veremos durante este curso y de hecho su respuesta es bastante amplia... ## ¿Qué significa Front? 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. Esta es la parte que se visualiza en el navegador y es la que manda toda la información al Backend para ser procesada. FrontEnd 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. ## El usuario 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. 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. UI/UX ## Patrones de arquitectura de desarrollo Web ### MVC (Model View Controller) 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". MVC 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. 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. ## SDLC (Software Development Life Cycle) 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. SDLC En el SDLC tenemos las diferentes fases que harán que nuestro desarrollo sea mucho más controlado y sobre todo escalable y mantenible. - Fase 1: Requerimientos --> Fase donde se presentan las necesidades de la aplicación. - 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. - 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. - 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. - Fase 5: Mantenimiento y evaluación --> Los sistemas son un ente vivo y por lo tanto tiene que mantenerse en continuo movimiento. Eso es todo por esta lección, nos vemos en la [siguiente](./2.-frontEndTecs.md). ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/temario/2.-frontEndTecs.md ================================================ # ¿Qué tecnologías se usan en FrontEnd? 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. Para el caso específico del curso estaremos utilizando principalmente 3 tecnologías y sus variantes, estas son: HTML, CSS y JavaScript. html, css, js ## HTML 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. Esto es lo que veremos en el siguiente módulo del curso. ## CSS 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. 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. ## JavaScript 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. 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. body web programing Esta imagen es una metáfora bastante acertada de cómo funcionan estas 3 tecnologías básicas de FrontEnd ## Frameworks 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. 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. 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. JS Frameworks 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) Eso es todo por esta lección, nos vemos en la [siguiente](./3.-webDevSetup.md). ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/temario/3.-webDevSetup.md ================================================ # Setup de un programador FrontEnd ¡Hola Explorers! 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. En el caso específico de programación web y específicamente FrontEnd lo que utilizaremos es lo siguiente: - Herramienta de diseño de aplicación - IDE de programación - Navegador web - Diferentes opciones de "Developer tools" - Herramienta de documentación 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. ## Herramienta de diseño Esta herramienta es la que nos da la capacidad de tener un prototipo sin poner NI UNA línea de código. 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. 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. 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. 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. Para esta fase de flujos y Wireframe existen diferentes herramientas como las siguientes: - Miro (https://miro.com/es/) Esta herramienta te permitirá crear flujos de información y flujos de negocio. - Balsamic mockups (https://balsamiq.com/wireframes/) Nos da elementos para poder crear interfaces rápidas y que nos dejan representar la idea. - Dibujos a mano alzada --> a veces un wireframe también puede ser en una servilleta o en cualquier forma escrita. 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. UI/UX - 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. - 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. - 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. 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. ## IDE de programación 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. - 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. - 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. - 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. - 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. 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. Te dejo algunos ejemplos de IDEs para que puedas escoger el que más te guste. 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/ VSCode 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/ atom 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/ atom ## Navegador web 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. 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. 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. 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. caniuse 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. ## Developer tools 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. En este caso nos referimos a herramientas adicionales que nos dan información sobre nuestra aplicación y mejoras que podemos implementarle. 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. lighthouse 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. 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. 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. 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. axe devtools ## Documentación 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. 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. 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. 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. Lo que es importante considerar al momento de documentar tu código es lo siguiente: - 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. - 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. - 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) Una herramienta muy útil para poder lograr esta estructura es Notion (https://www.notion.so/) Notion 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) Confluence 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. Eso es todo por esta lección, nos vemos en la [siguiente](./4.-estructuraWeb.md) ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/temario/4.-estructuraWeb.md ================================================ # Estructura Web En este módulo veremos como están estructurados los sitios para que los usuarios puedan comprender mejor. 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. 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. ## Contenido Jerárquico 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. Web Structure Esto se refiere a que tenemos una raíz y de ahí se desprende todo el contenido informativo y de uso en el sitio. ### Homepage 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. 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. ### Navegación / Menú Esta es la forma en como tu usuario identificará como está organizada toda tu información y así encontrar lo que esté buscando. 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: - Usa frases cortas o en todo caso una sola palabra para cada elemento y poder moverte de un lado a otro. - Usa lenguaje simple para que seas claro con tus usuarios. - No revuelvas la información, busca el orden de prioridad y sigue ese orden en tu navegación. - Las URLs de tu aplicación deben de ser intuitivas y no confusas (iE. tusitio.com/contacto) - Muestra la jerarquía como parte de tu sitio con las subCategorías desplegadas con su categoría padre. - 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. 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. ### Categorías y subcategorías Las categorías sirven para poder agrupar los contenidos e información pensando en hacerlo fácil para que los usuarios accedan al contenido. 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. Web Structure 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. 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. ### Páginas individuales / finales 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. 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. 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. 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. ## Otros tipos de estructuras de sitios ### Modelo Secuencial 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. Este modelo se utiliza cuando necesitas que tu usuario vaya por un flujo de información sin salirse del carril. steper ### Modelo de matriz 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. Uno de los mejores ejemplos de este tipo de modelo es Wikipedia. steper 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. Eso es todo por esta lección, nos vemos en la [siguiente](./5.-estructuraCodigo.md). ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 01 - INTRO/temario/5.-estructuraCodigo.md ================================================ # Estructura Código En este módulo nos referimos a la estructura y limpieza de código. Esto es COMPLETAMENTE NECESARIO, ya que debemos de aprender las buenas prácticas de programación desde el inicio. ## ¿Para qué? 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. Es una forma intuitiva de hacer que tu programa sea legible, para ti mismo dentro de unos meses o para otros desarrolladores. mantenibilidad ## Estructura de proyecto 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. 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. ### Por tipo de archivo 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. Ejemplo: - Root - assets - img - img1.png - img2.png - fonts - videos - styles - file1.css - file2.css - js - file1.js - file2.js - views - file1.html - file2.html index.html 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. ### Por funcionalidad 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. Ejemplo - Root - assets - img - img1.png - img2.png - fonts - videos - styles - file1.css - file2.css - controllers - controller1.js - controller2.js - components - component1.js - component2.js - routes - route1.js - route2.js - views - view1.html - view2.html index.html Este tipo de estructuras funcionan cuando tu proyecto contiene una gran cantidad de archivos y la arquitectura de desarrollo está segmentada. ### Por ruta 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. Ejemplo: - Root - assets - img - img1.png - img2.png - fonts - videos - perfil - perfil.css - perfil.js - perfil.html - perfil.test.js - feed - feed.css - feed.js - feed.html - feed.test.js - searchbar - searchbar.css - searchbar.js - searchbar.html - searchbar.test.js Esta estructura funciona para equipos que trabajan en archivos o secciones independientes. ## Buenas Prácticas de código. 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. mantenibilidad 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. - Enfócate en la legibilidad: Para ayudar al seguimiento y que sea fácil de leer ayudará mucho a optimizar tiempo. - Usa la menor cantidad de líneas posible. - Usa nombres adecuados para las variables. - Segmenta tu código por bloques de funcionalidad. - Usa de forma correcta la identación para controlas las estructuras de código. - Usa funciones atómicas que no contengan muchas funcionalidades en una sola función. - Aplica el principio DRY (Don't Repeat Yourself) en donde las tareas repetitivas hay que usarlas como funciones. - Evita la anidación profunda. - 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. - Nombre del módulo. - Fecha de creación. - Autor. - Historial de modificaciones. - Resumen de funcionalidad. - 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. - Siempre usa bloques de Try-Catch. - Maneja un proceso de pruebas. - 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. - 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. - prettier: Es una extensión de VSCode que acomoda automáticamente tu código (https://prettier.io/) - 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/) Eso es todo por esta lección, Vámonos a las [prácticas](). ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 02 - HTML/README.md ================================================ # HTML Bienvenido Explorer, llegamos al primer vuelo de tu misión de FrontEnd y empezamos a programar con HTML. 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. En este módulo veremos las siguientes cosas. 2. **HTML** - [Qué es HTML y estructura de archivo](./temario/1.-queEsHMTL.md) - [Etiquetas básicas](./temario/2.-etiquetasBasicas.md) - [Elementos compuestos](./temario/3.-elementosCompuestos.md) - [Acomodo y navegación](./temario/4.-acomodoNavegacion.md) - [Propiedades de etiquetas](./temario/5.-propiedades.md) Para entrar a los contenidos solo tienes que dar click en el título y empezará la aventura. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 02 - HTML/practicas/README.md ================================================ # Prácticas HTML Para la práctica de esta semana tendrán que maquetar en HTML el siguiente caso y generar su repositorio con el ejercicio.
Recordemos que solamente se necesita maquetar como un prototipo, **no es necesario que tenga funcionalidad completa en la información** ## **Caso: Pastelería**
Descripción:
- El cliente de la pastelería necesita ver los diferentes sabores de pasteles, así como los precios de cada uno. - 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. - El cliente de la pastelería tendrá la posibilidad de combinar sabores dependiendo de sus preferencias. - El cliente de la pastelería tendrá la posibilidad de combinar adornos dependiendo de sus preferencias. - El cliente de la pastelería necesita poner en un formulario su pedido. - 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. - El pastelero necesita tener la información de la cantidad de sabores que le quedan para hacer los pasteles. - El pastelero necesita tener la información de la cantidad de adornos que le quedan para hacer los pasteles. - El pastelero necesita una tabla donde aparezcan los pedidos que se han realizado con los datos del formulario. - La página debe tener información de la pastelería que es Dirección, Teléfono y horarios de atención. ## Prácticas a Realizar **Tienen hasta el 4 de Marzo** Prácticas: - Crear marca de la pastelería como un logo y los mensajes que daremos desde la marca. - Maquetación de páginas de cliente de la pastelería. - Maquetación de páginas del pastelero. Bonus: En caso de que te quede corto el ejercicio siguele con esto! - Bonus de estilos (Intro a CSS) - Bonus de Rutas (Navegación en la página) - Bonus de despliegue (Montar la página en línea con dominio gratuito) ## El 4 de Marzo se subirá el Form para que entreguen las prácticas. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 02 - HTML/programas/1.-etiquetasBasicas.html ================================================ Práctica 1 LaunchX

Bienvenidos Explorers

Bienvenidos Explorers

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

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

Link a LaunchX
Perritos lindos
Compañía Contacto País
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
  1. Alumno1
  2. Alumno2
  3. Alumno3
Enchiladas
- Tortilla frita con salsa, rellena de pollo
Molletes
- Bolillo con frijoles y queso
================================================ FILE: 02 - HTML/programas/2.-elementosCompuestos.html ================================================ Elementos compuestos

Explicación de elementos compuestos LaunchX




Input De Texto
















Input de selección multiple






Input de selección única






Select

Select con Input




Input de Fecha








Input de Fecha








Input de archivo




Input de Color




Input de Rango



Input de botón





Ejemplo de Formulario



================================================ FILE: 02 - HTML/programas/3.-layoutYRutas.html ================================================ Layout y Rutas

Ciudades

Londres

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

================================================ FILE: 02 - HTML/temario/1.-queEsHMTL.md ================================================ # ¿Qué es y cómo funciona HTML? 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. En el siguiente video les explico un poco más
⬇️⬇️⬇️⬇️⬇️⬇️ VIDEO ⬇️⬇️⬇️⬇️⬇️⬇️
[LINK DE VIDEO](https://web.microsoftstream.com/video/29f4962d-86bd-48f4-8a2c-8c2e24c7ab0e) **Recuerda que para ver el video tienes que iniciar tu sesión de innovaccion** 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. 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. 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. ## Estructura HTML 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. 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. 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. 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. ~~~html ~~~ Indica el contenido tiene que ser equivalente de Internet Explorer. ~~~html ~~~ 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. ~~~html Titulo ~~~ Es el título de nuestro sitio en el head. ~~~html ~~~ Son etiquetas de estilos nos permite importar archivos de otro tipo como por ejemplo de Javascript, CSS, etc. 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. Finalmente tenemos lo siguiente: 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. 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. - ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 02 - HTML/temario/2.-etiquetasBasicas.md ================================================ # Etiquetas básicas En este módulo veremos algunas de las etiquetas fundamentales de elementos de HTML que utilizaremos para mostrar la información que nosotros necesitemos. En el siguiente video les explico un poco más
⬇️⬇️⬇️⬇️⬇️⬇️ VIDEO ⬇️⬇️⬇️⬇️⬇️⬇️
[LINK DE VIDEO](https://web.microsoftstream.com/video/c73b37ee-1522-4773-85ef-a20ae99b7012) El código de ejemplo está en el siguiente link
⬇️⬇️⬇️⬇️⬇️⬇️ CÓDIGO ⬇️⬇️⬇️⬇️⬇️⬇️
[LINK DE CÓDIGO](../programas/1.-etiquetasBasicas.html) **Recuerda que para ver el video tienes que iniciar tu sesión de innovaccion** ¡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 ## Headings Estos títulos que nos van a permitir resaltar información en tamaño y visibilidad, además de cuestiones de SEO. Generar una etiqueta heading ~~~html

Bienvenidos Explores

Bienvenidos Explores

Bienvenidos Explores

~~~ 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. 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. 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** ## Párrafos Te permiten ingresar información, y su etiqueta se muestra de la siguiente manera: ~~~html

contenido

~~~ 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. 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: ~~~html
~~~ Y conoce como break line. ## Enlaces (links) 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 ~~~html Link a LaunchX
~~~ La letra “a” hace referencia al atributo que indica hacia donde te va a dirigir. 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. 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. ## Imágenes ~~~html Perritos lindos ~~~ 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. 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. ## Tablas Este elemento nos sirve para organizar información, imágenes, links, etc. ~~~html
Compañía Contacto País
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
~~~ ## Lista Para agregar un elemento a la lista usamos la siguiente etiqueta: ~~~html
  • café
    • ~~~ ~~~html ~~~ **ul** significa "unordered list" es decir una lista que no tiene orden. ~~~html
    1. Alumno1
    2. Alumno2
    3. Alumno3
    ~~~ **ol** significa "ordered list" y te mostrara una lista en orden jerárquico. ~~~html
    Enchiladas
    - Tortilla frita con salsa, rellena de pollo
    Molletes
    - Bolillo con frijoles y queso
    ~~~ - ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 02 - HTML/temario/3.-elementosCompuestos.md ================================================ # Elementos Compuestos 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. En el siguiente video les explico un poco más
    ⬇️⬇️⬇️⬇️⬇️⬇️ VIDEO ⬇️⬇️⬇️⬇️⬇️⬇️
    [LINK DE VIDEO](https://web.microsoftstream.com/video/fedb8772-5239-4706-9ee4-a347eba21a29) El código de ejemplo está en el siguiente link
    ⬇️⬇️⬇️⬇️⬇️⬇️ CÓDIGO ⬇️⬇️⬇️⬇️⬇️⬇️
    [LINK DE CÓDIGO](../programas/2.-elementosCompuestos.html) **Recuerda que para ver el video tienes que iniciar tu sesión de innovaccion** File: 3.-elementosCompuestos1.wav -------------------------------------------------------------------------------- ¡Hola Explorers! Bienvenidos a otra sesión de HTML. El día de hoy hablaremos de los elementos compuestos, específicamente de los formularios. 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. 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. 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. ## Crear un formulario. Tipos de entradas (inputs) Entrada de tipo texto ~~~html ~~~ 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. Estos atributos también pueden colocarse en cualquier otro elemento. Etiquetas (labels) Permite etiquetar un elemento 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. ~~~html ~~~ De esta forma estas indicando que el input de texto identificado como "Input1" tendrá una etiqueta llamada "Ejemplo de input de texto". El código en orden queda de la siguiente manera: ~~~html ~~~ Aquí más ejemplos de inputs de tipo de texto Input de correo ~~~html

    Input De Texto




    ~~~ 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. Input de número ~~~html


    ~~~ Valida que solo puedas ingresar datos de tipo número y no letras. Input de password ~~~html


    ~~~ El input de tipo password oculta la información para que no se muestre. Input de teléfono ~~~html


    ~~~ El input de teléfono valida que únicamente puedas ingresar 10 dígitos, por medio del maxlength="10". Input de URL ~~~html


    ~~~ Valida que la URL tenga ciertas características, identifica que sea una URL válida. 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. 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. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 02 - HTML/temario/4.-acomodoNavegacion.md ================================================ # Acomodo y Navegación El código de ejemplo está en el siguiente link
    ⬇️⬇️⬇️⬇️⬇️⬇️ CÓDIGO ⬇️⬇️⬇️⬇️⬇️⬇️
    [LINK DE CÓDIGO](../programas/3.-layoutYRutas.html) ================================================ FILE: 02 - HTML/temario/5.-propiedades.md ================================================ # Propiedades Les hice una recopilación en Excel con todas las propiedades y las etiquetas que se le pueden poner.
    ⬇️⬇️⬇️⬇️⬇️⬇️ EXCEL ⬇️⬇️⬇️⬇️⬇️⬇️
    [LINK DE EXCEL](../programas/atributosHTML.xlsx) ================================================ FILE: 03 - CSS/README.md ================================================ # CSS ## Aquí le ponemos estilo a todas nuestras páginas Les dejé unos programas con los ejemplos que estuvimos viendo en los diferentes lives. - [Selectores](./programas/1.-selectores.html) - [Colores](./programas/2.-colores.css) - [Fondos](./programas/3.-fondos.css) - [Textos](./programas/4.-textos.css) ## Práctica [Este es el link de la práctica](./practica/README.md) ================================================ FILE: 03 - CSS/practica/README.md ================================================ # Práctica CSS Que onda explorers! En esta semana vimos como meterle estilos a nuestras páginas y hacer que tomen personalidad completa. 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) 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. La práctica consiste en lo siguiente: - Planeación de campaña de vacunación (Un poco de mercadotecnia para llegar al sitio) - Maquetación del sitio con HTML - 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) Bonus: - Bonus de diseños o páginas adicionales (Totalmente a tu creatividad) - Bonus de despliegue de la página ## 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. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 03 - CSS/programas/1.-selectores.html ================================================ Selectores

    Header simple

    Header con id Titulo

    Parrafo simple

    Prueba clase Header 3

    Prueba clase parrafo

    Prueba multiples clases parrafo

    ================================================ FILE: 03 - CSS/programas/2.-colores.css ================================================ *{ font-family: Arial, Helvetica, sans-serif; } p{ font-size: 20px; } .colorRojo{ color: red; } .colorRGB{ color: rgb(93, 113, 218); } .colorRGBA{ color: rgba(93, 217, 94, 0.6); } .colorHEX{ color: #EE43E3; } .colorHSL{ color: hsl(30, 68%, 31%); } ================================================ FILE: 03 - CSS/programas/2.-colores.html ================================================ Colores CSS

    Código de colores CSS

    Prueba color rojo

    Prueba color RGB

    Prueba color RGBA

    Prueba color HEX

    Prueba color HSL

    ================================================ FILE: 03 - CSS/programas/3.-fondos.css ================================================ *{ font-family: Arial, Helvetica, sans-serif; } section{ height: 400px; } div{ height: 400px; } .fondoColor{ background-color: #0f6666; } .fondoOpacidad{ background-color: #5d0c0c; opacity: 0.6; } .fondoImagen{ background-image: url("../images/fondo1.jpg"); } .fondoRepetidoX{ background-image: url("../images/fondo2.jpg"); background-repeat: repeat-x; } .fondoRepetidoY{ background-image: url("../images/fondo1.jpg"); background-repeat: repeat-y; } .fondoNoRepetido{ background-image: url("../images/fondo2.jpg"); background-repeat: no-repeat; } .fondoPosicion{ background-image: url("../images/fondo1.jpg"); background-repeat: no-repeat; background-position: bottom right; } .fondoCompleto{ background-image: url("../images/fondo2.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } ================================================ FILE: 03 - CSS/programas/3.-fondos.html ================================================ Fondos
    ================================================ FILE: 03 - CSS/programas/4.-textos.css ================================================ *{ font-family: Arial, Helvetica, sans-serif; } .izquierda{ text-align: left; } .derecha{ text-align: right; } .centrado{ text-align: center; } .justificado{ text-align: justify; } .alReves{ direction: rtl; unicode-bidi: bidi-override; } .decoradoOverline{ text-decoration-line: overline; } .decoradoLineThrough{ text-decoration-line: line-through; } .decoradoUnderline{ text-decoration-line: underline; } .decoradoCombinado{ text-decoration-line: underline; text-decoration-color: red; text-decoration-style: dotted; text-decoration-thickness: 5px; } .negritas{ font-weight: 700; } .ligeras{ font-weight: 100; } .link{ text-decoration: none; color: black; } ================================================ FILE: 03 - CSS/programas/4.-textos.html ================================================ Textos CSS

    Parrafo izquierda

    Parrafo derecha

    Parrafo Centrado

    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.

    Parrafo al reves

    Parrafo Overline

    Parrafo Line Through

    Parrafo Underline

    Parrafo decorado completo

    Parrafo Negritas

    Parrafo ligeras

    Link a tal lugar ================================================ FILE: 04 - JS/README.md ================================================ # JS ## Aquí haremos que nuestras páginas tengan funcionalidad Les dejé unos programas con los ejemplos que estuvimos viendo en los diferentes lives. - [Introducción a Programación con JS](./programas/1.-intro.js) - [Funciones y Excepciones](./programas/2.-funciones.js) - [JS en el navegador (DOM)](./programas/3.-navegador.js) - [Pokedex](./programas/4.-pokedex.js) Recuerden que para correrlos necesitan también los programas de HTML que están en el siguiente link [Carpeta de programas](./programas/) ## Práctica [Este es el link de la práctica](./practica/README.md) ================================================ FILE: 04 - JS/practica/README.md ================================================ # Práctica JS Que onda explorers! En esta semana vimos como usar JavaScript para hacer que nuestras aplicaciones web tomen vida. 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) ustedes seguirán con ese proyecto para tener cada quien el suyo con las siguientes características. - Maquetación del sitio con HTML - 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 - Tener un input de entrada, donde se meta el nombre del pokemón a buscar. - Tomar ese input e ir a consultar el API de [pokeapi](https://pokeapi.co/) - mostrar en pantalla los siguientes datos del pokemón ingresado: - Nombre - Imágen - Tipo de pokemón - Estadísticas - Movimientos Bonus: - Bonus si tu página es responsive y se puede ver en celulares - Bonus de despliegue de tu pokedex - Bonus de uso de otras rutas como búsqueda por número de pokemón o mostrar un rango de pokemóns 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. Aquí les dejo el código de pokedex que estuvimos haciendo el día del live [Link de código](../programas/4.-pokedex.js) ## 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. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 04 - JS/programas/1.-intro.html ================================================ Intro JS

    Bienvenidos Explorers a JS

    ================================================ FILE: 04 - JS/programas/1.-intro.js ================================================ /*Las variables se pueden declarar con la palabra reservada "var", estas variables se pueden considerar como globales También se pueden declarar con la palabra reservada "let" y estas serán usadas dentro de un bloque de código Igualmente está la declaración con la palabra reservada "const" y se usarán cuando el valor no cambie */ console.log("\n************* Variables **************\n"); var numero1 = 4; var numero2 = 6; console.log("Número 1: " + numero1 + " Numero 2: " + numero2); /*Las cadenas (Strings) son caracteres que pueden ser una frase o palabra y estas pueden darse con comillas dobles "", simples '' o invertidas `` la diferencia es que con las invertidas podemos agregar variables dentro de la cadena con la sintaxis ${}*/ console.log("\n************* Cadenas **************\n"); var frase1 = "Ejemplo comillas dobles"; var frase2 = 'Ejemplo comillas simples'; var frase3 = `Ejemplo comillas ${frase1} invertidas`; console.log(frase1 + "\n" + frase2 + "\n" + frase3); /* Las condicionales se pueden usar valores como > < = == === != y cada una tiene una funcionalidad de comparación entre elementos */ console.log("\n************* Condicionales **************\n"); console.log(numero1 != numero2); /*Los operadores lógicos se utilizan cuando se necesita comparar más de una condicional El operador && (AND) necesita que todos sus valores sean true para que la salida sea true El operador || (OR) necesita que solo uno de sus valores sea true para que la salida sea true*/ console.log("\n************* Operador lógico AND **************\n"); console.log(true && true); console.log("\n************* Operador lógico OR **************\n"); console.log(false || false); /* Los arreglos son estructuras de datos que nos permiten agrupar datos de un mismo tipo */ console.log("\n************* Arreglos **************\n"); let listaDeNumeros = [2, 3, 5, 7, 11, 234]; console.log(listaDeNumeros[5]); listaDeNumeros.push(16); listaDeNumeros.push(939); console.log(listaDeNumeros); console.log(listaDeNumeros.length); let listaDePalabras = ["Explorer", "MisionComander", "LaunchX", "Innovaccion"]; console.log(listaDePalabras); console.log(listaDePalabras.length); /* Las cadenas (strings) pueden ser tratadas como arreglos */ let palabra = "Explorer"; console.log(palabra[2]); console.log(palabra.length); /* Los objetos son estructuras de datos que nos permiten agrupar datos de un diferentes tipos */ console.log("\n************* Objetos **************\n"); let explorer = { nombre: "Nombre del Explorer", email: "email@innovaccion.mx", numReg: 12345, mision: "FrontEnd", proyectos: ["Abogabot", "Taquería", "Pastelería", "Vacunación"], proPer: { escolar: "Tareas", profesional: "Trabajo", personal: "Negocio" } }; console.log(explorer); console.log(explorer.proPer.escolar); /* Flujo condicional */ let number1 = 2; let number2 = 6; console.log("\n************* if / else **************\n"); if (number1 > number2 && number2 > 5) { console.log("El número 1 es mayor que número 2"); } else if( number1 == number2 || number1 < 3){ console.log("Los números son iguales"); } else { console.log("El número 2 es mayor que número 1"); } /* Ciclo condicional */ console.log("\n************* While **************\n"); let numberWhile = 5; while (numberWhile <= 12) { console.log(numberWhile); numberWhile = numberWhile + 2; } console.log("Aquí ya salió del while " + numberWhile); /* Ciclo condicional de una iteración mínimo */ console.log("\n************* Do While **************\n"); let numeroDoWhile = 22; do { numeroDoWhile = numeroDoWhile + 2; console.log(numeroDoWhile); } while (numeroDoWhile < 20); console.log("Aquí sale del Do While " + numeroDoWhile); /* Ciclo for con iteración controlada */ console.log("\n************* For **************\n"); let numeroFor = 0 for (numeroFor ; numeroFor <= 12; numeroFor = numeroFor + 1) { console.log(numeroFor); } console.log("Aquí salimos del for " + numeroFor); /* /* Opciones para evitar anidar condicionales */ console.log("\n************* Switch **************\n"); switch (prompt("¿Cómo está el clima?")) { case "lluvioso": console.log("No te vayas a mojar"); break; case "soleado": console.log("Ponte bloqueador"); break; case "nublado": console.log("Tapate bien"); break; default: console.log("No se como está el clima"); break; } console.log("Aquí salimos del Switch"); ================================================ FILE: 04 - JS/programas/2.-funciones.html ================================================ Parte 2 JS ================================================ FILE: 04 - JS/programas/2.-funciones.js ================================================ const cuadrado = function(x) { return x * x; } let numero = 4; console.log(cuadrado(numero)); const ruido = function () { console.log("kataplum!"); } ruido(); const exponencial = function (base, exponente) { let resultado = 1; for (let i = 0; i < exponente; i++){ resultado *= base; } return resultado; } console.log(exponencial(4,3)) console.log(sumar(5,65)); function sumar(x, y) { return x + y; } const restar = (a, b) => { return a - b; } console.log(restar(40, 8)); function saludar(quien) { console.log("Hola " + quien); return; } saludar("Explorer"); console.log("Bye"); //Excepciones function preguntaDireccion(pregunta) { let result = prompt(pregunta); if (result.toLowerCase() == "izquierda") return "I"; if (result.toLowerCase() == "derecha") return "D"; throw new Error("Dirección inválida: " + result); } function mirar() { if (preguntaDireccion("A que lado?") == "I") { return "una casa"; } else { return "2 osos hambrientos"; } } try { console.log("Mira a ", mirar()); } catch (error) { console.log("Hubo un error: " + error); } //Asincrono setTimeout(() => console.log("Tick"), 500); let fifteen = Promise.resolve(15); fifteen.then(value => console.log(`Got ${value}`)); const promesa = () => new Promise((resolve, reject) => setTimeout( () => (resolve(console.log('Todo cool')), reject(new Error('oops'))), 2000 ) ) async function main() { // promesa() // .then(() => { // promesa() // .then(() => console.log('hola')) // .catch((err) => console.error(err)) // }) // .catch((err) => console.error(err)) await promesa(); console.log('Aquí termina la primer promesa'); await promesa(); console.log('Aquí termina la segunda promesa'); } main(); ================================================ FILE: 04 - JS/programas/3.-navegador.html ================================================ JS en el navegador

    Así se usa JS en el navegador

    Este es un parrafo

    Este es otro parrafo

    Da click aquí

    Mouse over me

    Click me

    ================================================ FILE: 04 - JS/programas/3.-navegador.js ================================================ //Encontrar elementos de HTML const titulo = document.getElementById("titulo"); const parrafo = document.getElementsByTagName("p"); const links = document.getElementsByClassName("links"); //Cambiar valores de HTML titulo.innerHTML = "Titulo cambiado"; document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + parrafo[0].innerHTML; links[0].href = "google.com"; //Cambiar estilos titulo.style.color = "red" //Eventos function cambiarTexto(obj) { obj.innerHTML = "Texto clickeado" } function mOver(obj) { obj.innerHTML = "Mouse over now" } function mOut(obj) { obj.innerHTML = "Mouse out" } function mDown(obj) { obj.style.backgroundColor = "#1ec5e5"; obj.innerHTML = "sueltame"; } function mUp(obj) { obj.style.backgroundColor="#D94A38"; obj.innerHTML="gracias"; } //addEventListener const boton = document.getElementById("boton"); boton.addEventListener("click", alerta) function alerta() { alert("alerta"); } ================================================ FILE: 04 - JS/programas/4.-pokedex.html ================================================ Pokedex LaunchX

    Pokedex LaunchX

    Pokemon ================================================ FILE: 04 - JS/programas/4.-pokedex.js ================================================ const fetchPokemon = () => { const pokeNameInput = document.getElementById("pokeName"); let pokeName = pokeNameInput.value; pokeName = pokeName.toLowerCase(); const url = `https://pokeapi.co/api/v2/pokemon/${pokeName}`; fetch(url).then((res) => { if (res.status != "200") { console.log(res); pokeImage("./pokemon-sad.gif") } else { return res.json(); } }).then((data) => { if (data) { console.log(data); let pokeImg = data.sprites.front_default; pokeImage(pokeImg); console.log(pokeImg); } }); } const pokeImage = (url) => { const pokePhoto = document.getElementById("pokeImg"); pokePhoto.src = url; } ================================================ FILE: 05 - VUEJS/README.md ================================================ # Vue JS 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. ## Programas - [Vue desde CDN](./programas/CDN/app.js) - [Vue con CLI](./programas/CLI/App.vue) - [VUEX](./programas/VUEX/App.vue) Estos son los programas con los ejemplos que estuvimos viendo en los diferentes lives. ## Práctica [Este es el link de la práctica](./practica/README.md) ================================================ FILE: 05 - VUEJS/practica/README.md ================================================ # Práctica VUE Que onda explorers! 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. 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. Si no recuerdan esa práctica se las dejo [aquí](../../02%20-%20HTML/practicas/README.md) 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. - Página de cliente de pastelería POR COMPONENTES - Componente con información de la pastelería Dirección, Teléfono y horarios de atención - Componente para ver los diferentes sabores de pasteles, así como los precios de cada uno - Componente para ver los diferentes adornos con los que se puede decorar el pastel y los precios de cada uno - Componente para combinar sabores dependiendo de sus preferencias - Componente para combinar adornos dependiendo de sus preferencias - 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 - Página de pastelero POR COMPONENTES - Componente de información de la cantidad de sabores que le quedan para hacer los pasteles - Componente de información de la cantidad de adornos que le quedan para hacer los pasteles - Componente donde aparezcan los pedidos que se han realizado con los datos del formulario - Uso de rutas para poder acceder a la página de cliente y de pastelero (router de Vue) - 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. Bonus: - Bonus si tu página es responsive y se puede ver en celulares - Bonus de despliegue de la pastelería 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. Aquí les dejo un código para ver como usar inputs en Vue [Link de código](../programas/VUEX/components/ColorCode.vue) ## 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. ***¡Vámonos hasta el espacio y más allá Explorers!*** ================================================ FILE: 05 - VUEJS/programas/CDN/app.js ================================================ const app = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe', email: 'john@email.com', gender: 'male', picture: 'https://randomuser.me/api/portraits/men/10.jpg' } }, methods: { async getUser() { const res = await fetch('https://randomuser.me/api'); const { results } = await res.json(); this.firstName = results[0].name.first this.lastName = results[0].name.last this.email = results[0].email this.gender = results[0].gender this.picture = results[0].picture.large }, } }) app.mount('#app'); ================================================ FILE: 05 - VUEJS/programas/CDN/index.html ================================================ Random user generator
    profile

    {{firstName}} {{lastName}}

    Email: {{email}}

    ================================================ FILE: 05 - VUEJS/programas/CDN/style.css ================================================ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: Arial, Helvetica, sans-serif; } #app { width: 400px; height: 100vh; margin: auto; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } h1, h3 { margin-bottom: 1rem; font-weight: normal; } img { border-radius: 50%; border: 5px #333 solid; margin-bottom: 1rem; } .male { border-color: steelblue; background-color: steelblue; } .female { border-color: pink; background-color: pink; color: #333; } button { cursor: pointer; display: inline-block; background: #333; color: white; font-size: 18px; border: 0; padding: 1rem 1.5rem; } button:focus { outline: none; } button:hover { transform: scale(0.98); } ================================================ FILE: 05 - VUEJS/programas/CLI/App.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/CLI/components/HelloWorld.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/CLI/main.js ================================================ import { createApp } from "vue"; import App from "./App.vue"; createApp(App).mount("#app"); ================================================ FILE: 05 - VUEJS/programas/VUEX/App.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/VUEX/components/Botones.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/VUEX/components/ColorCode.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/VUEX/components/ContadorCuadrado.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/VUEX/components/Counter.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/VUEX/main.js ================================================ import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(store).use(router).mount('#app') ================================================ FILE: 05 - VUEJS/programas/VUEX/router/index.js ================================================ import { createRouter, createWebHashHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router ================================================ FILE: 05 - VUEJS/programas/VUEX/store/index.js ================================================ import { createStore } from 'vuex' export default createStore({ state: { counter: 0, color: "blue" }, getters: { contadorCuadrado(state) { return state.counter * state.counter; } }, mutations: { subirContador(state, random){ state.counter += random; }, bajarContador(state, random){ state.counter -= random; }, colorChange(state, color) { state.color = color; } }, actions: { async subirContador() { const res = await fetch('https://www.random.org/integers/?num=1&min=1&max=8&col=1&base=10&format=plain&rnd=new'); const results = await res.json(); console.log(results) this.commit("subirContador", results); }, async bajarContador() { const res = await fetch('https://www.random.org/integers/?num=1&min=1&max=8&col=1&base=10&format=plain&rnd=new'); const results = await res.json(); console.log(results) this.commit("bajarContador", results); }, colorChange({commit}, color) { commit("colorChange", color); } }, modules: { } }) ================================================ FILE: 05 - VUEJS/programas/VUEX/views/AboutView.vue ================================================ ================================================ FILE: 05 - VUEJS/programas/VUEX/views/HomeView.vue ================================================ ================================================ FILE: 06 - VUEX/vuex.md ================================================ # Vuex ## Coming Soon 16/03/22 ================================================ FILE: 07 - ANGULAR/angular.md ================================================ # Angular ## Coming Soon 17/03/22 ================================================ FILE: 08 - AZURE/azure.md ================================================ # Azure ## Coming Soon 21/03/22 ================================================ FILE: README.md ================================================ # FrontEnd-Mision ## Bienvenidos Explorers! Estas entrando en tu misión de FrontEnd! 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. ![Frontend Image](./images/frontend.gif) --- ## Organización de MISIÓN FRONTEND El curso tiene 8 módulos que tienen dentro varios subtemas que iremos viendo conforme avance el curso 1. [Programación FrontEnd](https://github.com/romarpla/FrontEnd-Mision/tree/main/01%20-%20INTRO) - ¿Qué es la programación FRONTEND? - ¿Para que sirve la programación FRONTEND? - En qué consiste la programación FRONTEND - Tecnologías aplicadas - SETUP de programación Web - Estructura de páginas web - Estructura y limpieza de código 2. [HTML](https://github.com/romarpla/FrontEnd-Mision/tree/main/02%20-%20HTML) - ¿Qué es HTML? - Estructura de archivo HTML - Sintaxis de etiquetas - Titulos / Headings - Parrafos / Paragraphs - Imágenes / Images - Enlaces / Links - Tablas / Tables - Listas / Listas - Entradas / Input - Botón / Button - Formularios / Forms - Rutas / Routes - Acomodo / Layout - Barra de navegación / NavBar - SideBar - Pie de página / Footer - Filas y columnas / Rows & Columns - Propiedades de etiquetas / Properties - Práctica de HTML 3. [CSS](https://github.com/romarpla/FrontEnd-Mision/tree/main/03%20-%20CSS) - ¿Qué es CSS? - Selectores / Selector - Colores - Fondos / Background - Textos y fuentes - Enlaces y botones / Links - Acomodo / Box model - Responsive - Media Queries - Grid - Flexbox - Librerías de CSS - Práctica de CSS 4. [JavaScript](https://github.com/romarpla/FrontEnd-Mision/tree/main/04%20-%20JS) - ¿Qué es JS? - Variables, tipos y operadores - Estructura de programación - Funciones - Estructuras de datos - Objetos - Excepciones - Programación Asincrona - JS en el navegador - DOM (Document Object Model - Eventos - Consumo de APIs - Librerías y paquetes de JS - Práctica de JS 5. [Vue JS](https://github.com/romarpla/FrontEnd-Mision/tree/main/05%20-%20VUEJS) - ¿Qué es VueJS? - Setup de VueJS - Estructura de archivos y proyecto - Estilos globales - Componentes - Eventos - Métodos - Rutas - JSON Server - Práctica de Vue 6. [VUEX](https://github.com/romarpla/FrontEnd-Mision/tree/main/06%20-%20VUEX) - ¿Qué es VUEX? - Patrón de manejo de estado - Setup - Estado / State - Getters - Mutaciones - Acciones - Módulos - Práctica VUEX 7. [Angular](https://github.com/romarpla/FrontEnd-Mision/tree/main/07%20-%20ANGULAR) - ¿Qué es Angular? - Prerequisitos y setup - Componentes - Plantillas - Inyección de dependencias - Angular CLI - Aplicación de ejemplo - Práctica de Angular - Despliegue de aplicación 8. [Azure](https://github.com/romarpla/FrontEnd-Mision/tree/main/08%20-%20AZURE) - Azure Static Web App - Setup - Github Actions - Mantenimiento de tu aplicación **Las diferentes ligas se irán desbloqueando durante el curso conforme pasen las semanas para que no se me adelanten** ***Vámonos hasta el espacio y más allá Explorers!***