Módulo 2 / Semana 8

Actividad 2.


Descripción

Desarrollar un proyecto interactivo que ayude a presentar y/o describir un proyecto por medio de imágenes, textos, audio, video y geolocalización.

Objetivo

Desarrollar productos interactivos de alto impacto visual y de fácil distribución para solucionar necesidades de negocios.

Desarrollarás un proyecto interactivo que ayude a presentar y/o describir un proyecto por medio de imágenes, textos, audio, video y geolocalización.

Un aspecto para considerar desde el inicio de tu proyecto es que debes documentar todo el proceso de este. Esta documentación puede incluir tu código con comentarios, tus bocetos, tu desarrollo de interfaz en Illustrator, Photoshop o cualquier herramienta de diseño gráfico, además de retroalimentación de tu facilitador.

Instrucciones:

  1. Define si tu proyecto se hará con un cliente o bien, será solamente para tu portafolio.
  2. Una vez que definas lo que será tu proyecto, empieza a reunir información general del proyecto (logotipo, a qué se dedica o de que se trata el producto de tu cliente).
  3. Crea un boceto de diseño que muestre cómo planeas resolver la interfaz de usuario. En las etapas de inicio lo recomendable es dibujar a mano alzada la interfaz, marcando o indicando las animaciones o interacciones que pueden existir.
  4. Después, dibújala en Illustrator o Photoshop para que puedas definir y crear los efectos y acabados de cada elemento.
  5. Diseña bocetos de la animación del intro, así como los elementos de geolocalización que incluirás.
  6. 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.
  7. Cuida tu código y planéalo para que sea reusable y modular, de manera que minimices el retrabajo.
  8. Mejora tus animaciones y elementos de geolocalización si es posible. Revísalos y evalúa si vale la pena aplicar cambios en ellos, recuerda que estamos trabajando para que la experiencia del usuario sea excelente, vale la pena invertir tiempo en los detalles.
  9. Avanza en el diseño del contenido y completa la información de todas las pantallas, de manera que tengas oportunidad de evaluar el diseño e interactividad de cada una de ellas. Prueba tus pantallas en los tipos de dispositivos que definiste.
  10. 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.
  11. 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.
  12. Requerimientos de tu proyecto final:
     a. Tener imágenes, texto, audio (opcional), geolocalización y video.
    b. Debe de presentar animaciones en partes específicas para enriquecer la experiencia del usuario.
    c. Debe ser desarrollado con HTML5, CSS3 y JavaScript.
    d. Debe estar documentado, de manera que se pueda comprobar el avance de principio a fin.
    e. Coloca tu proyecto en algún hosting gratuito para que puedas acceder desde cualquier parte.
  1. Diseña y planea el proyecto.
    A. Define la interfaz y la diseña digitalmente a través de programas de edición de imágenes para al menos dos tipos de dispositivos. 7 %
    B. Define cuáles son los elementos para reutilizar en el proyecto. 7 %
    C. Presenta bocetos de las animaciones de la pantalla de introducción al proyecto 7 %
    D. Presenta bocetos de los elementos de geolocalización. 7 %
    E. Define cualidades técnicas de la salida del producto. El proyecto debe ser responsivo al menos a dos tipos de dispositivos. 8%

  2. Desarrolla el código del proyecto y ubica elementos de interfaz.
    F. Define el tipo, tamaño y color adecuado de la tipografía de manera que no causa conflicto con el resto de la interfaz. 8 %
    G. Desarrolla el código de manera modular. 8 %
    H. Define y ubica los elementos de interfaz, y programa elementos reusables. 8 %

  3. Da últimos detalles de programación y diseño al proyecto y lo distribuye.
    I. Programa correctamente el código de modo que no presente errores al ejecutarse. 8 %
    J. Diseña una UI agradable y acorde a las especificaciones del cliente. 8 %
    K. Utiliza texto, imágenes, audio (opcional), video, animaciones y geolocalización en el proyecto. 8 %
    L. Presenta documentación completa del desarrollo del proyecto desde su principio hasta su fin. 8 %
    M. Coloca su proyecto en algún hosting gratuito. 8%
  • Tener imágenes, texto, audio (opcional), geolocalización y video.
  • Debe de presentar animaciones en partes específicas para enriquecer la experiencia del usuario.
  • Debe ser desarrollado con HTML5, CSS3 y JavaScript.
  • Debe estar documentado, de manera que se pueda comprobar el avance de principio a fin.
  • Colocar el proyecto en algún hosting gratuito.