2. COMPETENCIA El estudiante diseña interfaces que se ... · Planteamiento de problemáticas en el uso de TIC Componentes, estructura y utilidad de los diagramas de flujo ... etapa

Código:DEFM-06;Rev:1;Fecha:11/07/13

1. DATOS GENERALES DEL CURSO

Nombre del curso Diseño de interfaces de interacción humano – computadora

Eje al que pertenece Diseño

Ámbito Sistemas de aplicación

Programa al que pertenece Licenciatura en Tecnologías e Información

Créditos 8

Horas teoría 30

Horas práctica 55

Perfil deseable del profesor Experiencia en desarrollo de software, aplicaciones, gestión de proyectos, licenciado en diseño, sistemas o afín.

2. COMPETENCIA El estudiante diseña interfaces que se utilizarán para la interacción humano-computadora en aplicaciones computacionales, utilizando wireframes (representaciones esquemáticas de interfaz) como primer herramienta de validación de funcionalidad y usabilidad de las aplicaciones.

3. ATRIBUTOS DE LA COMPETENCIA Conocimientos

Concepto de interfaz Antecedentes de las interfaces humano-computadora Fases de desarrollo de sistemas Técnicas de desarrollo ágil


Planteamiento de problemáticas en el uso de TIC Componentes, estructura y utilidad de los diagramas de flujo Componentes y utilidad de los wireframes o representaciones esquemáticas Jerarquías de elementos de interfaz

Habilidades

Identificación de alcances en el diseño de proyectos Diagnóstico de problemáticas en el uso de las Tecnologías de la Información y la Comunicación Interpretación de las necesidades de diferentes perfiles de usuarios de tecnologías de información y comunicación Utilización de técnicas de desarrollo ágil Utilización de herramientas analógicas y digitales para la creación de Wireframes Utilización de aplicaciones para la creación de maquetas

Actitudes

Visión para tener al usuario como centro de toma de decisiones Apertura a realizar cambios a partir de las retroalimentaciones Iniciativa para proponer soluciones Disposición de trabajo colaborativo y participativo Creatividad al realizar propuestas de interfaz Mente abierta a las opiniones de los usuarios y otros integrantes del equipo de trabajo

Valores1

Orden en la realización del proceso de diseño Compromiso con la calidad del resultado final Perseverancia para concretar el proceso de diseño Honestidad y congruencia, con apego a las necesidades detectadas Puntualidad en la entrega de los productos solicitados

1Aludir no sólo a valores universales, sino de postura ante los problemas y alternativas de atención. 4. COMPETENCIA GENERAL DEL PERFIL DE EGRESO CON QUE SE VINCULA O A LA QUE APOYA


Diseñar, desarrollar, integrar, operar y evaluar soluciones tecnológicas

5. RECORTE DE CONTENIDO (unidades y contenidos).1 Unidad 1 Unidad 2 Unidad 3 Unidad 4 Título

Antecedentes de las interfaces de comunicación humano-computadora

Técnicas de desarrollo ágil para proceso de validación de una interfaz humano-computadora

Los wireframes o representaciones esquemáticas de interfaz

Maquetas de interfaces de aplicaciones

Objetivo

Describir los antecedentes históricos de las interfaces de comunicación humano máquina e identificar estos elementos en objetos no computacionales.

Describir técnicas de desarrollo ágil como herramientas eficaces para lograr aplicaciones con funcionalidades validadas e interfaces usables.

Crear wireframes como una forma eficiente para proponer una interfaz humano-computadora.

Generar maquetas como una forma eficaz de obtener retroalimentación de la interfaz en etapas tempranas del desarrollo.

Contenido

- Las primeras máquinas y sus interfaces

- Interfaces de

- Desarrollo ágil en comparación con el desarrollo convencional

- Las fases del desarrollo de

- Conceptos interfaz, wireframe, maqueta, prototipo, versión beta

- Porqué realizar

- Maquetas de baja resolución y de alta resolución


comunicación humano-máquina

- Forma y función - Ergonomía

una aplicación - Concepto de validación - Concepto de iteración

diagramas, wireframes y maquetas antes de diseñar una interfaz

- Diagrama de flujo de una aplicación

- Wireframe de una pantalla de aplicación

- Elementos de interfaz - Jerarquía de elementos

de interfaz - Herramientas para la

creación de Wireframes

- Uso de herramientas para la creación de maquetas

- Uso de herramientas para creación de maquetas

- Uso de bitácoras y lienzos para registro de iteraciones y validaciones

- Proceso de validaciones de funcionalidad y usabilidad

- Documentación de resultados

Producto de la unidad Entrada de blog que incluya ejemplos con material gráfico y escrito de interfaces de comunicación humano - maquina no

Documento que incluya la descripción de una aplicación web, móvil o de escritorio que resuelva una necesidad concreta.

Wireframes que esquematicen la propuesta de interfaz de las pantallas de una aplicación, en archivos de imágenes independientes, PDF o

Maqueta de una aplicación computacional, documentada para iniciar el proceso de


computacionales.

HTML. diseño, en formato HTML o PDF, entregado como un archivo, carpeta comprimida o dirección en línea.

Duración

2 semanas 4 semanas 4 semanas 6 semanas

1 Se pueden insertar o eliminar unidades (subcompetencias) dependiendo de las necesidades de cada curso

6. PRODUCTO INTEGRADOR Título Maqueta de aplicación Objetivo Presentar una maqueta de una aplicación y el historial de las validaciones realizadas Caracterizción Maqueta que utilice wireframes como resultado de validaciones de funcionalidades

propuestas y de usabilidad de la aplicación en una etapa temprana, acompañada de bitácora o lienzo que muestre el proceso realizado para llegar a ella.


7. PROPUESTA DE ACTIVIDADES DE APRENDIZAJE POR UNIDADES El número de actividades de aprendizaje de cada unidad puede variar, de acuerdo a la planeación del experto en la materia Unidad 1 Descripción2 Producto o

resultado Actividad de aprendizaje preliminar

Buscar 5 objetos no electrónicos de uso común que tengan algún tipo de interacción con las personas para realizar su función, tomar una fotografía e incluirla en un documento, incluir el nombre del objeto, describir su función y cómo se utiliza. Responder a la pregunta: ¿Qué características del objeto fueron diseñadas específicamente para poder ser utilizado por una persona?

Documento electrónico con 5 fotografías de interfaces no electrónicas, compartido en el foro de discusión, donde se coloquen como entrada la respuesta a la pregunta propuesta.

Actividad de aprendizaje 1

A partir de una investigación, seleccionar una herramienta por cada etapa tecnológica de la humanidad, describir su función y detectar qué características tenían para ser usadas por las personas:

● Edad de piedra ● Edad de los metales ● Edad del viento y el agua ● Revolución industrial ● Edad de la electricidad ● Edad de la electrónica ● Edad de la informática

Documento electrónico con imágenes y descripción de funciones y características

Actividad de aprendizaje 2 Realizar una reseña sobre el concepto ergonomía. Poner especial énfasis sobre los conceptos de forma y función.

Documento electrónico: reseña crítica sobre el concepto de ergonomía con énfasis en los conceptos forma y función.

Actividad de aprendizaje 3 Buscar 2 objetos que representen ejemplos de productos que no Documento electrónico


incluyeron los conceptos de ergonomía como parte de su proceso de creación y 2 que por el contrario si lo fueron. Describir las razones de la clasificación para cada producto.

con descripción y crítica de los objetos seleccionados.

Actividad integradora Entrada de blog que incluya 3 ejemplos con material gráfico y escrito de interfaces de comunicación humano-computadora, pudiendo ser páginas web, aplicaciones móviles o programas de computadoras de escritorio. Describir qué elementos o componentes de la interfaz identifican como analogías de elementos físicos

Entrada de blog sobre 3 ejemplos de interfaces de comunicación humano-computadora.

Unidad 2. Técnicas de desarrollo ágil para proceso de validación de una interfaz humano-computadora Objetivo: Describir técnicas desarrollo ágil como herramientas eficaces para lograr aplicaciones con funcionalidades validadas e interfaces usables. Descripción2 Producto o

resultado Actividad de aprendizaje 1

1.- Lee el capítulo 1 de la tesis García, R. (2013). Gestión de proyectos con metodologías ágiles. Pp. 5-21. UOC. Y el manifiesto de desarrollo ágil Kent, K. (2001). Principles behind the Agile Manifesto., que encontrarás en la sección de recursos. 2.- En el foro “Desarrollo ágil” comenta lo más sobresaliente de cada una de las técnicas revisadas en los textos y emite tu opinión, además discute con tus compañeros sus opiniones sobre las técnicas. Este foro estará abierto toda la semana, pero deberás participar en los primeros tres días con tu primera y segunda entradas para que puedas ir trabajando en el siguiente punto de la actividad. 3.- Genera un documento electrónico en donde incluyas tu opinión de cada uno de los principios del manifiesto de desarrollo ágil. 4.- Envía tu reseña al buzón y espera la retroalimentación de tu

Analizarás los conceptos básicos de las metodologías de desarrollo ágiles y cómo el diseño de interfaces gráficas, al ser una parte del proceso de desarrollo de una aplicación, se beneficia de ellas.


asesor. Actividad de aprendizaje 2

1. Busca en Internet recursos sobre los Productos Mínimos Viables, sobre todo imágenes, videos o infografías, puedes también consultar: Ries, E. (2009). Minimum Viable Product: a guide. Recuperado de: http://www.startuplessonslearned.com/2009/08/minimum-viable-product-guide.html Bank, C. (2014). 4 Reasons Minimum Viable Products Fail. Recuperado de:http://speckyboy.com/2014/10/07/4-reasons-minimum-viable-products-fail/ 2. Realiza una entrada en el blog, a través de blogger.com (que creaste en la unidad anterior) y responde a la pregunta: ¿Qué es un Producto Mínimo Viable? y agrega las imágenes que hayas encontrado para representarlo. Agrega además enlaces a los videos explicativos que tú hayas encontrado 3. Ahora, crea una imagen, fotografía o infografía, donde representes el concepto de Producto Mínimo Viable y publícala también en el blog, recuerda que debe ser creada y referenciada por ti y no un recurso descargado de Internet 4. Agrega en tu blog una conclusión o reflexión final acerca del producto mínimo viable y su importancia en los métodos ágiles de desarrollo 5. Ingresa al foro “MVP” y comparte tu entrada al blog a través

Analizarás el concepto del producto mínimo viable y su importancia en los métodos ágiles de desarrollo.


del foro, visita los blogs de tus compañeros y deja comentarios en los blogs de por lo menos dos de ellos.

Actividad integradora 1. Piensa en un problema que quieras resolver o en una actividad que quieras mejorar que pueda realizarse a través del uso de tecnologías de información. Trata de no pensar al inicio en qué lenguaje será desarrollado, tampoco pienses si será una aplicación móvil o de escritorio; concéntrate primero en la problemática en sí. 2. Inicia planteando el problema para posteriormente proponer la forma en que dicho problema será resuelto o cómo la actividad será mejorada 3. Conceptualiza tu producto mínimo viable. 4. Incluye los principios de desarrollo ágil que se aplicarán. 5. Realiza un resumen ejecutivo que incluya la descripción de la resolución de un problema aplicando las técnicas de desarrollo ágil y la conceptualización de tu producto mínimo viable y envíalo al buzón. El resumen ejecutivo deberá ser muy conciso y servirá para que alguna persona externa al proyecto entienda en pocas palabras de lo que se trata.

Conceptualizarás una aplicación, para la cual se diseñará una interfaz.

Unidad 3. Los Wireframes o representaciones esquemáticas de interfaz Objetivo: Crear wireframes como una forma eficiente para proponer una interfaz humano-computadora. Descripción2 Producto o

resultado Actividad de aprendizaje 1

1. Lee el artículo: Ronda León, Rodrigo (2007). La diagramación en la arquitectura de información. No usabilidad

Analizarás algunas de las herramientas


Vol. 6. Recuperado de: http://www.nosolousabilidad.com/articulos/diagramacion.htm 2. Pon especial atención en los dos tipos de diagramas que son utilizados para proponer cómo será el producto final: Blueprint (En español se puede encontrar como mapa de arquitectura, mapa del sitio, estructura u otros conceptos) y los Wireframes (representaciones esquemáticas) que posteriormente pueden integrarse en una maqueta. 3. Lee el artículo Bushe, Laura. (2014). The Skeptic’s Guide To Low-Fidelity Prototyping. Smashing Magazine. Recuperado de: http://www.smashingmagazine.com/2014/10/06/the-skeptics-guide-to-low-fidelity-prototyping/ 4. Pon especial atención en el por qué proponen que es mejor comenzar con prototipos de baja resolución o baja fidelidad. 5. Busca en Internet otros recursos relacionados con las primeras etapas de propuestas de diseño de interfaz, podrás encontrar incluso algunos que contradigan esta forma de trabajo. 6. Plantea tus propias conclusiones por escrito para que no pierdas ningún elemento o idea importante al respecto. 7. En este foro, comenta tus opiniones sobre: ¿Qué piensas sobre la utilidad de las herramientas de comunicación de diseño como los mapas y representaciones

utilizadas para la comunicación de las propuestas de diseño de interfaces.


esquemáticas o blueprints y wireframes?, ¿cuál es la diferencia y similitud entre cada uno de ellos?, ¿cuáles son sus características y lo más relevante de cada uno? Comparte con tus compañeros otros recursos que hayas encontrado que te parezcan relevantes y puedan agregar valor y comenta sobre ellos. Realiza una aportación final con tus conclusiones con respecto a las herramientas de comunicación de diseño. 8. Espera el cierre del foro por parte de tu asesor.

Actividad de aprendizaje 2

1. Retoma el artículo: Ronda León, Rodrigo (2007). La diagramación en la arquitectura de información. No solo usabilidad Vol. 6. Recuperado de: http://www.nosolousabilidad.com/articulos/diagramacion.htm Especialmente el apartado “Propuesta de diagramas” 2. Toma como referencia, los elementos de los diagramas de funcionamiento o flujo descritos en otros recursos como: Corbí, A. (2001). Fundamentos de programación. Biblioteca digital, bases de datos, libros electrónicos, EBSCO, Capítulo 3.5.2. Diagramas de flujo. Recuperado de: http://web.b.ebscohost.com/ehost/ebookviewer/ebook/ZTAwMHh3d19fMzE4MDU3X19BTg2?sid=d2b5cfd7-2a58-4257-ae16-efc7c77f575d@sessionmgr113&vid=1&format=EB&rid=1 4. Idea una aplicación Web sencilla, de aproximadamente 7 pantallas, que implique una acción muy concreta que puedan

Utilizarás diagramas para comunicar la organización y funcionalidad de una aplicación.


realizar los usuarios visitantes. 5. Utilizando lápiz y papel genera: Un diagrama de organización que muestre la jerarquía de las pantallas. Un diagrama de funcionamiento que muestre los flujos de los procesos. 6. Escanea o toma una foto de tus diagramas. 7. En un documento electrónico, incluye las imágenes de tus diagramas y explica en no más de una hoja los diagramas y su interrelación. 8. Entrega en el buzón tu documento para ser evaluado por tu asesor.


Actividad integradora 1. Lee los siguientes artículos: a.- Matt Griffin (2012): Responsive Comping: Obtaining Signoff without Mockups. Recuperado de : http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups (Aun cuando el tema principal es sobre el uso de HTML como herramienta para creación de wireframes y maquetas, contiene una sección interesante sobre el proceso de diagramado Let’s talk process y sobre todo sobre el uso de jerarquías) b.-Wireframing en usability.gov: http://www.usability.gov/how-to-and-tools/methods/wireframing.html c.- Presenting Information Architecture en WebStyleGuide: http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html Y busca otros recursos sobre diagramas de presentación o wireframes 2. Participa libremente en el foro “Diagramas de presentación” para comentar sobre lo que leíste, aportar nuevos recursos y comenta tu opinión. Lee y retroalimenta las aportaciones de los compañeros, este foro estará abierto durante toda la actividad 3. Manos a la obra, retoma la idea de aplicación para la cual realizaste un diagrama de organización y funcionamiento. Realiza los wireframes de cada una de las pantallas que

Utilizarás diagramas para comunicar la propuesta de presentación de una aplicación.


consideraste para la aplicación. Ponte en los zapatos de un usuario que no conoce el sistema y analiza tus propuestas. Haz las modificaciones que creas pertinentes. Recuerda que iterar es parte del proceso de diseño, sobre todo en estas etapas tempranas, desecha en este momento lo que consideras que no funcionará y vuelve a hacer propuestas hasta que quedes satisfecho 4. Entrega tus diagramas de presentación en el buzón de tareas, en un documento electrónico, incluyendo introducción, descripciones de los diagramas, comentando qué cambios realizaste desde las primeras versiones hasta la que estás entregando y conclusión. Espera retroalimentación de tu asesor.

Unidad 4. Maquetas de interfaces de aplicaciones Objetivo: Generar maquetas como una forma eficaz de obtener retroalimentación de la interfaz en etapas tempranas del desarrollo. Descripción2 Producto o

resultado Actividad de aprendizaje preliminar

. Toma los diagramas de presentación o wireframes que realizaste en unidades anteriores con lápiz y papel. 2. Ponlos frente a ti en una mesa o pegados sobre una pared de forma que los puedas ver todos al mismo tiempo.

Definirás el concepto de maqueta, tipos de maquetas y establecerás su diferencia con un prototipo.


3. Simula que estás usando la aplicación que estás proponiendo, haciendo “click” o simulando un touch sobre el papel y navegando a la pantalla que resultaría al realizar dicha acción. 4. Reflexiona si habrá mejores formas de realizar lo que propusiste y en su caso haz cambios a los wireframes según creas conveniente. 5. Muestra tu maqueta a otra persona que no conozca tu proyecto y solicita que te apoye con la simulación. Intenta no guiar a la persona sino más bien observa como esta persona interactúa con tu maqueta. Es muy probable que detectes procesos o partes de los diagramas que no se entiendan muy bien. 6. Reflexiona nuevamente sobre posibles mejoras y haz cambios según consideres. 7. Toma fotografías del espacio donde ubicaste tu maqueta y de ser posible de la persona que invitaste utilizándola. 8. En un documento, enlista tu experiencia realizando esta actividad, incluyendo un listado de las modificaciones que realizaste y la razón. Incluye las fotografías que tomaste de la actividad. 9. Entrega tu documento en el buzón de tareas para ser evaluado por tu asesor.

Actividad de aprendizaje 1 1. Visita las páginas de por lo menos siete soluciones de Utilizarás


software para la realización de maquetas, que pueden ser las que se listan a continuación u otras que tu encuentres: InVision http://www.invisionapp.com/ UXPin http://www.uxpin.com/ Pop https://popapp.in/ MockFlow http://mockflow.com/ Proto.io https://proto.io/ Balsamiq http://balsamiq.com/ HotGloo http://www.hotgloo.com/

herramientas digitales para acelerar y facilitar la creación de diagramas de presentación o wireframes.


Mockup Builder http://mockupbuilder.com/ Moqups https://moqups.com/ 2. Selecciona por lo menos tres soluciones que quieras probar, para los fines de este curso, te recomendamos que escojas las que cumplan con estas condiciones: - Que tengan una versión gratuita aun cuando esté limitada y que no te pida alguna forma de pago - Que esta versión gratuita lo sea por siempre, ya que la oferta de algunos paquetes gratuitos será por tiempo limitado, por ejemplo 30 días - Que te permita mostrar tu maqueta en línea 3. Crea cuentas en esas tres soluciones que seleccionaste y pruébalas, siguiendo los tutoriales que incluyan. 4. Selecciona una de ellas, la que hayas sentido mejor a tu consideración. 5. En este foro enlista y explica brevemente las siete soluciones que visitaste, las tres que probaste y la que al final te agradó


más y las razones. 6. Revisa las entradas de tus compañeros y si así lo crees conveniente, prueba las soluciones que algún otro compañero seleccionó y que sus razones te parecieron interesantes. 7. Si realizaste algún cambio de selección después de revisar la reseña de otro compañero, hazlo saber en el foro.

Actividad de aprendizaje integradora

Retoma la idea de aplicación o web que usaste en actividades anteriores o si lo prefieres, idea una nueva aplicación. 2. Utiliza tu cuenta gratuita en el sistema de maquetado en línea que hayas elegido. 3. Genera los wireframes de las pantallas que implique tu aplicación. 4. Implementa la interactividad básica necesaria para que un usuario pruebe tu aplicación, por ejemplo navegación de menús, botones que simulan acciones y te llevan a otras pantallas (puede ser un compañero de grupo o alguna otra persona externa) 5. Con las herramientas que te ofrezca la solución en línea que estás utilizando, publica la maqueta de tu aplicación de forma abierta. Si la solución que estás utilizando solo te permite publicar de forma cerrada, crea los accesos necesarios para que otros usuarios la prueben. 6. Publica en este foro una entrada con lo siguiente:

Utilizarás una herramienta en línea para crear una maqueta y probarla con otros usuarios.


8. BIBLIOGRAFÍA

El título de tu aplicación Breve descripción Enlace a la maqueta y de ser necesario las instrucciones acceso Este proceso deberá realizarse durante los primeros siete días de la actividad. 7. Busca las entradas de tus compañeros. 8. Selecciona por lo menos cinco maquetas de tus compañeros, las que tengan menos retroalimentaciones para que todos obtengan respuestas; visítalas, úsalas, analízalas y retroaliméntalo. Si la herramienta que está utilizando permite retroalimentación en el mismo lugar, hazlo ahí, pero también deja la retroalimentación en el foro para que se lleve registro de las retroalimentaciones que ha recibido. 9. Cuando recibas las retroalimentaciones de tus compañeros, realiza modificaciones que consideres necesarias a tu maqueta. 10. Documenta dichas modificaciones aquí en el foro, en la misma línea de tiempo de tu entrada para que los demás puedan conocerlas. 11. Finalmente esperen el cierre del foro por parte del asesor.


Básica En línea 1. Wikipedia

http://en.wikipedia.org/wiki/Human_factors_and_ergonomics 2. The Skeptic’s Guide To Low-Fidelity Prototyping

http://www.smashingmagazine.com/2014/10/06/the-skeptics-guide-to-low-fidelity-prototyping/

Complementaria 1. A List Apart, tópico Experiencia de Usuario http://alistapart.com/topics/user-experience

2. Smashing Magazine, tópico Diseño de Experiencias de Usuario http://www.smashingmagazine.com/category/uxdesign/

3. Design Modo, categoría diseño http://designmodo.com/design/

Revisión:0;Fecha:09/04/2013

UNIVERSIDAD DE GUADALAJARA

Sistema de Universidad Virtual

Rúbrica de evaluación

para el producto final del

curso Actualizado:[dd/mm/aaaa]1.DATOSGENERALESDELCURSONombredelcurso Diseñodeinterfaceshumano-computadoraProgramaalquepertenece LTIEjedeformación1 Sistemasdeaplicación2.COMPETENCIAElestudiantediseñainterfacesqueseutilizaránparalainteracciónhumano-computadoraenaplicacionescomputacionales,utilizandowireframes(representacionesesquemáticasdeinterfaz)comoprimerherramientadevalidacióndefuncionalidadyusabilidaddelasaplicaciones.3.DESCRIPCIÓNDELPRODUCTOElproductointegradorsecomponedeMaquetadeunainterfazgráficaparaunsitioweb.Conbaseenelcasodescritoocualquierotrocasoqueincluyalosmismoselementossolicitados.Encasodeseleccionaruncasodistintoalexpuestodebeagregarseenunaseccióndelproductolosantecedentesrespondiendolasinterrogantesennegrita.Caso:LaadministradoradeunacasahogarllamadaTuCasaAsociaciónCivil,seacercaati,puestieneunrequerimientoparaunsitioweb.Delaentrevistaquerealizasparaconocermáselproyecto,tomaslassiguientesnotas:¿Quéactividadesrealizalacasahogar?Lacasahogaralberganiñosyniñasquehanperdidoasuspadresohansidomaltratadosensusfamilias.Losniñosqueactualmentevivenconnosotros,tienendesdepocosmeseshasta16años.Dentrodelacasa,realizantodaslasactividadescomunesdeunhogarysalenasusescuelasentresemana.¿Porquérequierenunsitioweb?QueremosqueseconozcaloquehacemosademásdeversipodemoscontactarabienhechoresSituvieranquemencionartresobjetivosquequisieranlograrconlapágina¿Cuálesserían?enordendeprioridad.Primero,necesitamosencontrarmáspersonasquepuedanayudarnosyaseaeconómicamentecomoenespecie,principalmentedonacionesrecurrentesparaelmantenimiento,perotambiénparaalgúnproyectoenespecial.Segundo,queremosquelaspersonasdelacomunidad,sepanquéaccionesrealizamosycómoseviveeldíaadíaenlacasahogar,lascosasqueestánpasando,quésenecesitayquéseplaneahacer,estotambiénconelfindequelosdonadorestenganmásconfianzadehacersusaportaciones.Porúltimo,requerimosunlugardondepoderpublicartodalainformaciónqueporleydebemostenerdisponiblecomo

1 Solicitar información a la Coordinación de Diseño Educativo o la coordinación del programa.






curso instituciónquerecibeaportaciones.Ademásdelasrespuestasanteriores,pregúntate:¿Quéotrasnecesidadesquepudieranserútilesdecubrirensusitiowebpodríatenerelclienteademásdeloquecomentó?Ymuyimportante:Quéseccionessonnecesariasenunsitiowebquenodebenfaltaraúncuandoelclientenolassoliciteespecíficamente,comopodríaserunaformadecontactoyunavisodeprivacidad.DocumentoelectrónicoenWord,PDF,googledrive,etcqueincluya1. HojadepresentacióncondatospersonalesyreferenciadelaUniversidad2. Explicacióngeneraldelsitiowebamaneradepresentaciónejecutiva,queincluyalosobjetivosdelmismo3. Productomínimovíableyconceptosdedesarrolloágilqueseaplicarán4. Listadodeseccionesparaelsitioweb5. Diagramadeorganización(Jerarquización)6. Descripcióndeseccionesdeacuerdoaldiagramadeorganización7. Diagramadepresentaciónowireframesparacadaunadelasseccionespropuestas,incluyendounadescripciónmásdetallada8. Maquetadepresentaciónquepuedaserutilizadaenlínea9. Fuentesdeconsulta4.CRITERIOSDEEVALUACIÓNDEFONDO ObservacionesDEMOSTRACIÓNDECOMPETENCIAS-PROCESOS2 PORCENTAJE E MB B R NA

Procesoparadesarrollarlacompetencia

Puntaje Descripcióndecriterios

4.1Describirtécnicasdedesarrolloágilcomoherramientaseficacesparalograraplicacionesconfuncionalidadesvalidadaseinterfacesusables.

10 Explicacióngeneraldelsitiowebqueincluyeobjetivodelmismo

Productomínimovíableyconceptosdedesarrolloágilqueseaplicarán

v2 Los criterios de forma descritos en este espacio son sugerencias, se pueden modificar según las características del producto.






curso 4.2Crearwireframescomounaformaeficienteparaproponerunainterfazhumano-computadora.

25 Listadodeseccionesparaelsitioweb Diagramadeorganización(Jerarquización)quemuestretodaslasseccionesylajerarquizaciónadecuada

Descripcióncompletaycoherentedecadaseccióndeacuerdoaldiagramadeorganización

DiagramadepresentaciónoWireframesparacadasecciónpropuesta,conteniendotodosloselementosnecesariosyreflejandolosconceptosdeusabilidadyergonomíaenlainterfaz.

DescripcióndetalladadecadaunodelosWireframesexplicandocadaunodeloselementospropuestos

4.3Generarmaquetascomounaformaeficazdeobtenerretroalimentacióndelainterfazenetapastempranasdeldesarrollo.

40 Maquetadepresentacióndelaaplicacióncompletaquepuedaserutilizadaenlínea

4.4Presentarunamaquetadeunaaplicación.

10

Presentaciónyexplicaciónamaneradereporteejecutivoparaelcliente

5.CRITERIOSDEEVALUACIÓNDEFORMA Observaciones PORCENTAJE E MB B R NA

Formatodelproducto Puntaje Descripcióndecriterios 5.1Datosdepresentación Laportadapresentadatosdelainstitución,elprograma,

elcurso,datosdelestudianteyfechas.

5.2Cuerpodetrabajo Laredacciónylaortografía,facilitalacomprensióndelainformación.

Lainformaciónsepresentademaneralógica. 5.3Fuentesdeinformación Las referencias y fuentes de consulta están

correctamentecitadasdeacuerdoalsistemaAPA.

Las fuentes consultadas son confiables. Pertenecen aorganismos educativos, gubernamentales oespecializados en el área de conocimiento. Estánfirmados tanto por una institución de renombre, como






curso por un autor reconocido por sus conocimientos en lamateria.La informacióncitada tienecongruenciaconel contextodel documento, ayuda a fundamentar. La informaciónpresentadaesverdadera.

6.Observacionesdelasesor–COMENTARIOSSOBRELACUALIDADDELPRODUCTO

Documents

2. COMPETENCIA El estudiante diseña interfaces que se ... · Planteamiento de problemáticas en el uso de TIC Componentes, estructura y utilidad de los diagramas de flujo ... etapa