Desarrollo Web Profesional

• La primera etapa es crear un sketch, en donde el web designer plasma en una hoja de papel con lápiz la idea de como quedará el diseño de la aplicación o el sistema web a desarrollar.
• La segunda etapa es diseñar un Wireframe, donde el web designer utiliza un software para dar una estructura utilizando grids, rows, cols para posicionar mejor los elementos de la aplicación o del sistema web, pero lo hace sin utilizar iconos ni colores.
• La tercera etapa es realizar un Mockup, donde el web designer basandose en el Wireframe y utilizando un software, da una mejor estructura y posicionamiento de los elementos de la aplicación o del sistema web, aplicando iconos, colores y tipografía.
• La cuarta etapa es elaborar un Prototype, en donde el web designer implementa lo realizado en el Mockup, quedando lo más real posible al diseño que tendrá la aplicación o el sistema web, aquí puede realizarse utilizando algún framework de CSS, JavaScript, preprocesadores e incluso en lenguajes como PHP o JSP.

Para elaborar los mockups de las aplicaciones y sitios web, se utilizan algunas herramientas para crear prototipiados, Figma es una de ellas. Da clic en la siguiente imagen para ir al sitio de descarga:

Indicaciones: Da clic en la imagen anterior para descargar los requisitos para un sitio web, después, utilizando la herramienta Figma, elabora su mockup correspondiente, identificando la estructura que debe tener el sitio web. Después, en un documento PDF incluye portada, el mapa de sitios de los frames y las capturas de pantalla del mockup.

Indicaciones: Elabora las páginas en HTML y CSS de los frames realizados en figma, en la actividad anterior. Después, súbelo a Moodle en un archivo ZIP o RAR.

Indicaciones: En equipos, elaboren un reporte PDF, donde utilizando CodeSandBox, implementes un código donde expliques los siguientes puntos:

1. Diferencias entre var, let y const
2. Funciones de flecha (arrow functions)
3. Template string
4. Construcción de objetos
5. Destructuring JavaScript Objects
6. Fetch API
7. Async Await
8. Map
9. Filter

Da clic en el siguiente recurso para conocer acerca de Azure DevOps Services:

Da clic en el siguiente recurso para iniciar con Azure DevOps Services:

Indicaciones: Elabora un documento PDF en donde incluyas una captura de pantalla de los siguientes pasos a realizar:

1. Crea una cuenta en Azure DevOps Services
2. Crea una organización
3. Crea un nuevo proyecto
4. Invita a dos colaboradores
5. Crea los siguientes sprints con sus respectivos items
   • Sprint1. Inicio
     • Contrato
     • Cronograma de actividades: actividades, recursos tecnologías, responsables y tiempo
     • Mockup del sistema web y aplicación móvil
     • Modelo relacional en Workbench MySQL
   • Sprint2. Contruyendo
     • Migraciones de la base de datos al proyecto
     • Implementación de api y peticiones: get, post, put, delete
     • Implementación de la autenticación de usuarios
     • Implmenentación de mvc: models, views and controllers
     • Implementación de los cruds
     • Diseño de la aplicación móvil
   • Sprint3. Probando
     • Validación y verificación del login y los cruds
     • Elaboración de manuales correspondientes
     • Presentación del proyecto
6. Marca como to do las actividades realizadas hasta el momento
7. Sube los archivos del prototipo a repos de Azure DevOps

Indicaciones: En equipos, elaboren un reporte PDF, en donde mediante caputuras de pantalla demuestren cómo validaron un formulario de registro para usuarios o componente para su proyecto.

Indicaciones: En equipos, suban un archivo ZIP que incluya los siguientes reportes:

1. Actividad 1 Tema 1
2. Actividad 2 Tema 1
3. Actividad 3 Tema 1
4. Actividad 4 Tema 1
5. Actividad 5 Tema 1
6. Actividad 6 Tema 1
7. Actividad 7 Tema 1
8. Actividad 1 Tema 2
9. Actividad 1 Tema 3

En el siguiente video se muestra cómo implementar el método asíncrono para obtener datos de una base de datos y mostrarlos en una tabla en Vue.js.

Indicaciones: En equipos implementen el método asíncrono para obtener datos de la base de datos (firebase) y muestrenlos en una tabla en Vue.js. La tabla debe ser de un crud de su proyecto. Elabora reporte en PDF en donde incluyan mínimo cinco capturas de pantalla con descripción en donde hayan realizado la actividad. No olvides incluir portada.

En el siguiente video se muestra cómo consumir una API desde una aplicación de Vue.js.

Indicaciones: En equipos, realicen el consumo de la API a su aplicación de Vue.js. Después, elaboren un reporte PDF en donde incluyan cinco capturas de pantalla con descripción en donde comprueben que la práctica la realizaron. También agreguen un manual paso a paso sobre cómo utilizar axios. No olviden incluir portada.

En el siguiente video se muestra cómo un CRUD en Vue.js.

Indicaciones: En equipos, implementen por lo menos dos cruds mas para su proyecto. Elaboren un reporte PDF en donde incluyan por lo menos cinco capturas de pantalla con descripción en donde comprueben que la práctica la realizaron correctamente. No olviden incluir portada.

En el siguiente video se muestra cómo crear componentes dinámicos en Vue.js.

En el siguiente video se muestra cómo crear componentes dinámicos en Vue.js.

Indicaciones: En equipos, elaboren la creación de componentes dinámicos para su proyecto (mínimo tres). Después, elaboren un reporte PDF en donde incluyan por lo menos cinco capturas de pantalla con descripción en donde comprueben que realizaron correctamente de la actividad. No olviden incluir portada.

En el siguiente video se muestra cómo implementar animaciones y transiciones en Vue.js.

Indicaciones: En equipos, elaboren la implementación de animaciones y transiciones a cinco componentes de su proyecto. Después, elaboren un reporte PDF en donde incluyan mínimo capturas de pantalla por cada componente con animación y transición. No olviden incluir portada.

En el siguiente video se muestra cómo crear un componente navbar con Tailwind CSS en Vue.js.

Indicaciones: En equipos, realicen la implementación de estilos de un framework de CSS a su proyecto y realicen la creación del navbar. Pueden utilizar Tailwind CSS. Después, elaboren un reporte PDF en donde incluyan mínimo cinco capturas de pantalla del navbar y de algunos componentes con los estilos del framework de CSS correspondiente. No olviden incluir portada.

Indicaciones: En equipos, suban un archivo ZIP que incluya los siguientes reportes:

1. Actividad 1 Tema 1
2. Actividad 2 Tema 1
3. Actividad 3 Tema 1
4. Actividad 1 Tema 2
5. Actividad 1 Tema 3
6. Actividad 2 Tema 3

En el siguiente video se muestra cómo implementar el método asíncrono para obtener datos de una base de datos y mostrarlos en una tabla en Vue.js.

En el siguiente video se muestra cómo implementar el método asíncrono para obtener datos de una base de datos y mostrarlos en una tabla en Vue.js.

Indicaciones: En equipos implementen la autenticación de usuarios con rutas protegidas para su proyecto. Elaboren un reporte PDF en donde incluyan capturas de pantalla (mínimo 5), en donde demuestren cómo crearon la autenticación de usuarios para su proyecto y cómo protegieron las rutas. No olvides incluir portada.

Indicaciones: En equipos, suban un archivo ZIP que incluya los siguientes reportes:

1. Actividad 1 Tema 1