Proyecto Movial grupo SENA

Simposio TIC Cajica
22 Junio, 2017
Show all

Proyecto Movial grupo SENA

Pagina web responsive SENA - Movil Grupo tecnologos en multimedios

Para el desarrollo de este proyecto se cuenta con un tiempo de desarrollo muy corto debido a que el equipo del SENA estaba retrasado con las entregas de su proyecto inicial gracias a que en la revisión del pre-proyecto todos los materiales gráficos y tecnológicos fueron rechazados.

Imagenes del mockup inicialmente presentado

Las observaciones realizadas por los instructores SENA incluían:

  • Paleta de colores inadecuada
  • Desorganización del contenido
  • Dificil navegación para el usuario
  • No se evidencia el responsive
  • Incluye paginas en blanco

En este momento nuestro proyecta inicia desde donde nos dejaron las observaciones, es decir en la idea original la cual es desarrollar una pagina web que nos permita generar conciencia en el peatón para que mejore su comportamiento en la vía

Avance del proyecto - Movial

  • Avance del proyecto5%

Trabajando paso a paso

Gracias a la asesoría del personal experto en Jocaagura, los jóvenes reciben una nueva explicación desde el punto de vista profesional del trabajo realizado y se genera el siguiente plan de trabajo para que se pueda terminar el proyecto justo a tiempo para la entrega de la revisión oficial 10 días después..

Avance del proyecto - Movial

  • Avance del proyecto15%

Boceto y Wireframe

Parecen diluirse estos conceptos pero brevemente y en pocas palabras los definiremos.

el boceto nos permite llevar de forma gráfica el ordenamiento de los elementos que queremos en la pagina web, es muy importante ya que nos permite ordenar informalmente los elementos con trazos rápidos que dan una idea del posicionamiento en la pantalla de los fragmentos de información sin necesidad de gastar mucho tiempo en el brainstorming (Lluvia de ideas) de como queremos presentar el contenido en la pagina web.

El wireframe por otro lado es las organización en lineas rectas del boceto previamente realizado, es de resaltar que cada elemento de la pagina web se representa como una cajita y por convención, las imágenes están rellenas con dos lineas en diagonal que unen sus vértices internos.

Rapido trazo de lineas para proyectar una imagen mental sobre una superficie.ordenadas para ver la organizacion interna de una pagina web

Avance del proyecto - Movial

  • Avance del proyecto25%

Mockup

Una vez hemos organizado el wireframe y realizado la respectiva ingeniería de información procedemos a dividir el trabajo para la siguiente fase.

En el mockup el diseñador de interfaz de usuario (UX) pone algunos elementos visuales claves que al presentarse al grupo de trabajo permite dar una idea acercada a la realidad de como la página va a mostrar los contenidos definidos en le paso anterior y cada una de las pares puede iniciar el desarrollo de las piezas gráficas y multimedia, escritura del código necesario para el prototipo y creación de la multimedia necesaria para completar los espacios, toma de fotografías, grabación de vídeos y sonidos etc.

ordenadas para ver la organizacion interna de una pagina webMockup derivado de la previa realizacion del wireframe y la respectiva ingenieria de información

Avance del proyecto - Movial dia 5 al 10

  • Avance del proyecto40%

Prototipo

Esta evolución del mockup es la que presentamos al cliente final, en este caso, el grupo de instructores del SENA que revisará el proyecto.

En esta fase la página, si bien no tiene todos los elementos que contendrá en definitiva, si es una propuesta funcional de la misma y permite mostrar cual será la interacción del usuario con los elementos del sitio así como los elementos relacionados con los eventos que sean claves en la presentación al cliente de un aproximado de lo que se pretende lograr, esto con el fin de recibir observaciones previas al desarrollo de un trabajo más complejo en el área de programación y creación de contenidos evitando de esta forma posibles retrasos en el flujo de trabajo del equipo y permitiendo concentrar los esfuerzos en aquello que finalmente quedará y esta aprobado por el cliente sin tener decepciones y perdidas de tiempo en cosas que al cliente seguramente no aprobará.

En este momento todas las horas de trabajo se ven reflejadas en:

Es importante llevar una métrica del trabajo empleado para una evaluación de costos y beneficios del proyecto en general.

91

Lineas de codigo


Lineas de código escritas en nuestro proyecto.
62

Archivos generados


Directorios y archivos generados para nuestro proyecto incluyendo fotografías y vídeos.
4

Pantallazos usuario


Cantidad de pantallas generadas para nuestro proyecto que podrán ser visualizadas por el usuario final.
240

Horas de trabajo


Horas hombre invertidas hasta el momento por los integrantes del proyecto.

Responsive

Una vez terminada la fase de prototipado es importante optimizar la entrega de los contenidos de acuerdo a la programación realizada en HTML5 para que se muestre adecuadamente en los diferentes dispositivos que tengan los usuarios.De este modo se conciben reglas especiales los siguientes tamaños de pantallas:

Tamaño de escritorio que va hasta los 1920px.
Tamaño de escritorio normal desde los 1024px que va hasta los 1600px.
Tamaño de tablet y minis que va hasta los 600px.
Celulares hasta los 360px.
Recursos web
Pantallazo tamaño 1600 x 1200px
Optimizada para equipos de escritorio.
Recursos web
Pantallazo tamaño 1024 x 720px
Optimizada para equipos de escritorio pantalla cuadrada.
Formularios de contacto en la pagina web
Pantallazo tamaño 600x700px
Optimizada para tablets y phablets.
Formularios de contacto en la pagina web
Pantallazo tamaño 340px
Optimizada para smartphones y tablets.

El juego

Debido a la falta de tiempo, el juego se programa en HTML5, Javascript y Css como una secuencia de preguntas que le otorgan al usuario final una puntuación dependiendo de la precisión con la que responda las preguntas y se integra el uso de la etiqueta audio para los sonidos.

Para finalizar les dejamos una muestra de los videos realizados para el proyecto por parte del grupo de SENA de producción audiovisual.

Proyecto movial

Vive la experiencia del trabajo realizado por las futuras leyendas audiovisuales del SENA bajo el acompañamiento técnico del personal de Jocaagura.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *