Diseño de Interfaces
INP-ES
El alumno implementará principios de interacción humano computadora, comunicación visual y usabilidad para la elaboración de prototipos de interfaces de usuario.
Octavo
75
6
The Essentials of Interaction Design Alan Cooper, Robert Reimann, David Cronin 2007 Ed. Wiley may-07 ISBN: 978-0-470-08411-3
Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests Jeffrey Rubin, Dana Chisnell and Jared Spool 2008 Ed. Wiley 12-may-08 ISBN-10: 0470185481
Microsoft® .NET: Architecting Applications for the Enterprise. Dino Esposito, Andrea Saltarello 2008 Microsoft Press, Octubre 2008, ISBN: 978-0-7356-2609-6
Designing the User Interface: Strategies for Effective Human-computer Interaction, 4/E - Ben Shneiderman, University of Maryland, - Catherine Plaisant, University of Maryland 2005 Ed. Addison-Wesley ISBN:-10: 0321197860
Professional WPF Programming: .NET Development with the Windows Presentation Foundation Chris Andrade, Shawn Livermore, Mike Meyers, Scott Van Vliet Ed. Wiley may-07 ISBN: 978-0-470-04180-2
Interaction Design: beyond human - computer interaction Yvonne Rogers, Helen Sharp and Jenny Preece Ed. Wiley 15-jun-11 ISBN-10: 0470665769
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:
U1 Tema 1 Actividad 1 (Individual)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.
Video sobre fundamentos de JavaScript U1 T2 Actividad 2
Indicaciones: En equipos, elaboren un reporte PDF, donde utilizando CodeSandBox, implementes un código donde expliques los siguientes puntos:
Da clic en el siguiente recurso para conocer acerca de Azure DevOps Services:
Azure DevOpsDa clic en el siguiente recurso para iniciar con Azure DevOps Services:
U1 T3 Actividad 1 - Uso de Azure DevOps
Indicaciones: Elabora un documento PDF en donde incluyas una captura de pantalla de los siguientes pasos a realizar:
Indicaciones: En equipos, suban un archivo ZIP que incluya los siguientes reportes:
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.
Actividad 1 Tema 1
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.
Video sobre cómo consumir una API en Vue.jsEn el siguiente video se muestra cómo consumir una API desde una aplicación de Vue.js.
Actividad 2 Tema 1
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.
Video sobre cómo implementar un CRUD en Vue.jsEn el siguiente video se muestra cómo un CRUD en Vue.js.
Actividad 3 Tema 1
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.
Video sobre creación de componentes dinámicos en Vue.js ejemplo 2En el siguiente video se muestra cómo crear componentes dinámicos en Vue.js.
Actividad 2 Tema 1
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.
Actividad 1 Tema 3
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.
Video sobre creación de un componente navbar con Tailwind CSS en Vue.jsEn el siguiente video se muestra cómo crear un componente navbar con Tailwind CSS en Vue.js.
Actividad 2 Tema 3
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:
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.
Video sobre cómo crear una autenticación de usuarios con rutas protegidas en Vue.js (Ejemplo 2)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.
Actividad 1 Tema 1
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: