Entregables

Instrucciones:

1. Elige un producto: una app para celular o un sitio web. La única restricción para elegirlo es que lo utilices de manera más o menos constante.
2. Una vez que hayas definido el producto, procede a analizarlo con base en lo siguiente:
   • ¿El producto está pensado para resolver un problema específico o para el esparcimiento?, ¿ayuda a mejorar los niveles de productividad o de felicidad?
   • ¿Cuáles son los pasos que debe realizar el usuario para usar adecuadamente el producto? Enuméralos y descríbelos.
   • ¿Tuviste que tomar un tutorial para poder navegar en él?, ¿la navegación y la forma de usar el programa es intuitiva?
   • ¿La interacción con el producto es fluida o consideras que pasas más tiempo descifrándolo?
   • ¿Consideras que el producto fue diseñado pensando en las necesidades del usuario? ¿Por qué?
3. Posteriormente, genera una lista de al menos 10 observaciones al producto, las cuales deberán buscar mejorar la experiencia del usuario.
4. Con base en las observaciones, genera una persona para dicha aplicación. No olvides incluir cada uno de los nueve elementos vistos en el tema 3.
5. Incluye un ensayo personal de al menos 400 palabras. Recuerda que la intención es delimitar quién es el usuario.
6. Una vez que termines, piensa en algún proyecto interactivo que te gustaría desarrollar (puede ser página web, app, u otro producto). Realiza lo siguiente:
   • Determina qué tipo de producto desarrollarás.
   • Principales características y función del producto.
   • Investiga indicadores que te permitan conocer las características generales de los usuarios a quienes ofrecerías el producto.
   • Genera al menos una persona que englobe las características de tus usuarios (incluye los nueve elementos y un ensayo personal de 400 palabras).
   • Reflexiona en qué medida te serviría contar con una persona y cómo podrías utilizarla para la toma de decisiones.

Desarrolla la actividad en un solo documento.

Criterios de evaluación

Concepto	Ponderación
Analiza el productos elegido con base en las preguntas planteadas.	15
Determina si el producto fue diseñado pensando en el usuario.	15
Genera observaciones de mejora para el producto.	15
Desarrolla la persona para la aplicación previamente analizada, incluyendo un ensayo personal.	15
Investiga datos necesarios para entender a sus posibles usuarios.	10
Determina la información básica para el posible desarrollo de un producto.	15
Genera la persona que caracterice el público de ese producto.	15

 

Instrucciones:

Usando lo que has aprendido, crea una pantalla de “Programación de citas médicas”.

Básicamente, tu aplicación debe parecerse a la siguiente imagen:

 

Los requerimientos son los siguientes:

La forma debe tener dos “fieldset” uno para “Datos personales” y el otro para “Solicitud de cita”.

En “Datos personales” se debe validar lo siguiente:

• El nombre no se puede dejar en blanco.
• El teléfono no se puede dejar en blanco y debe seguir el siguiente patrón: [2-9][0-9]{2}-[0-9]{3}-[0-9]{4}
• El correo electrónico debe estar conformado de una dirección de correo válida.
• La fecha de nacimiento debe tener el formato “mm/dd/aaaa” o “dd/mm/aaaa”.

En “Solicitud de cita” se debe validar lo siguiente:

• En “¿Cuál es el motivo de su visita?” debe aparecer una lista de selección de la siguiente manera:
• Revisión física anual 
• Síntomas de resfriado o gripe
• Prueba de sangre             
• Postoperatorio               
• Otro caso                    

El usuario puede seleccionar una de las opciones anteriores o ingresar la suya propia.

• En “Nivel de dolor actual” debe aparecer un “input” tipo “range” con los siguientes límites:
• Mínimo = 0
• Máximo = 10
• Incrementos= .5
• Valor = 5
• Titulo = “0 no hay dolor, 10 es el peor dolor imaginable”
• Fecha preferida no se puede dejar en blanco y debe tener el formato “mm/dd/aaaa” o “dd/mm/aaaa”.
• Hora preferida no se puede dejar en blanco con un rango de valores de 8 a 18 horas en incrementos de una hora.

Criterios de evaluación

Concepto	Ponderación
Diseño de la pantalla.	25
Ejecución correcta.	25
Creatividad en el diseño.	25
Uso de los elementos de formas para resolver los requerimientos.	25

Instrucciones

Tú eres un desarrollador Web que trabaja para una organización que crea sitios Web para administrar convenciones. Se te ha pedido que crees un sitio Web para ingenieros de software sobre una conferencia que muestra las últimas herramientas y técnicas para crear aplicaciones móviles.

1. Decides comenzar con el desarrollo de un sitio Web prototipo que consiste en una página de inicio que actúa como página Home para los asistentes a la conferencia, y una página Acerca de que describe el propósito de la conferencia.
2. Crea ambas páginas (Home y Acerca de) usando las estructuras y elementos adicionales aprendidos en el tema 9 de este módulo.

Criterios de evaluación

Concepto	Ponderación
Se incluyen las dos formas (Home y Acerca de).	20
Se accede a Acerca de a través de una liga en Home.	20
Se incluye el manejo de la nueva estructura HTML5.	20
Uso de al menos tres imágenes.	20
Uso de elementos adicionales para manejo de texto e imágenes.	20

Instrucciones

Define si tu proyecto se hará con un cliente o bien, será solamente para tu portafolio. 

1. Crea por lo menos tres bocetos de diseño que muestren cómo planeas resolver la interfaz de usuario.
   
2. Después de seleccionar cuál de tus opciones de diseño es la más viable, dibújala en Illustrator o Photoshop para que puedas definir y crear los efectos y acabados de cada elemento.
   
3. Identifica los elementos reusables (botones, indicadores, etc.) y defínelos en tu proyecto.
   
4. Diseña bocetos de la animación del intro, así como los elementos de geolocalización que incluirás.
   
5. Identifica las resoluciones y tamaños de pantalla más usados al momento y define la salida de tu aplicación. Tu proyecto debe ser responsivo al menos a dos tipos de dispositivos: laptop y smartphone, laptop y tableta, etcétera.
   
6. Revisa el tipo de tipografía y el tamaño que usarás.
   
7. Selecciona y prueba la paleta de color para verificar que no cause conflicto con la tipografía y que sea lo suficientemente contrastante.
   
8. Define y ubica los elementos de interfaz.
   
9. Definida la interfaz, crea botones reusables.
   
10. Cuida tu código y planéalo para que sea reusable y modular, de manera que minimices el retrabajo.
    
11. Desarrolla el código
    
12. Decide si tu aplicación tendrá música. Si es así, es momento de seleccionarla, así como los efectos de sonido que vayas a usar.
    
13. Prueba la aplicación en la mayor cantidad de computadoras que puedas para verificar que se ejecute correctamente. Así como también en los demás dispositivos que hayas seleccionado con antelación.
    
14. Revisa que todo el contenido se encuentre en su lugar. Haz nuevas pruebas, de preferencia con personas ajenas al proyecto para que detectes posibles errores o conflictos de interfaz.

Requerimientos de tu proyecto final:  

1. Tener imágenes, texto, audio (opcional), geolocalización y video.
   
2. Debe de presentar animaciones en partes específicas para enriquecer la experiencia del usuario.
   
3. Debe ser desarrollado con HTML5, CSS3 y JavaScript.
   
4. Debe estar documentado, de manera que se pueda comprobar el avance de principio a fin.
   
5. Coloca tu proyecto en algún sitio Web gratuito que se pueda acceder desde cualquier parte.

Entregables:

1. Documento en el que incluyas:  
   • Tres bocetos de diseño que muestran cómo se verá la interfaz de diseño (pueden ser fotos de tus dibujos a mano).
   • Diseño digital de la interfaz.
   • Definición de los elementos reusables de tu proyecto.
   • Diseño de bocetos de la animación de la pantalla intro.
   • Diseño de los bocetos de geolocalización en la pantalla intro.
   • Definición del tamaño de salida de tu aplicación para al menos dos dispositivos.
2. Liga al sitio web del proyecto.

Rúbrica

La rúbrica se encuentra aquí.