Tarea 1: Revisión del Diseño UX.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Tarea 1: Revisión del Diseño UX."

José Ramón Castellanos Camacho
hace 7 años
Vistas:

1 Descripción del programa El programa se compone del siguiente módulo que se describe a continuación: Workshop: Crea tu primera Web App Utilizando como escenario de trabajo la necesidad imperiosa del gerente de una liga de futbol infantil, vamos a construir una web sencilla para resolver su problema de comunicación: hacer posible que los padres se informen de los siguientes partidos de futbol a través de sus móviles o tablets. Los alumnos aprenderán a desarrollar un proyecto utilizando HTML5 y CSS3. Descripción detallada de las tareas. Tarea 1: Revisión del Diseño UX. En esta tarea se les pide a los alumnos que, en base al diseño del equipo de desarrollo ya aprobado por el cliente, comiencen sus diagramas de páginas HTMLs y recaben los contenidos solicitados que luego colocarán al crear sus páginas web: Entregables: Los alumnos deben entregar un archivo de texto respondiendo a unas preguntas en base a la documentación de diseño aprobada: user stories, wireframes, mock-ups y UI Flow. Build Your Own Website The Right Way Using HTML & CSS de Ian Lloyd Capítulo 1: menciona las herramientas básicas que necesitaremos. Learn to Code HTML & CSS: Develop & Style Websites de Shay Howe Lección 1: introducción básica de HTML y CSS, editores de texto y la estructura de una página web simple, incluyendo el uso de CSS para darle un estilo.

2 Evaluación: Cada alumno documenta sus respuestas y el mentor realiza una revisión de ello y dará un feedback correspondiente detallando puntos a tener en cuenta, errores comunes de interpretación de un diseño web y puntos a mejorar.

3 Tarea 2: Creación de los archivos HTML inicial. Entregables: Los alumnos deben entregar sus primeras páginas HTML, deben realizar una página por cada botón del menú: - Campos de Juego - Equipos - Contacto Una vez completada la estructura inicial, deberán generar los HTMLs adicionales con el detalle de cada equipo y campo de juego. Build Your Own Website The Right Way Using HTML & CSS de Ian Lloyd Capítulo 3: introduce los conceptos básicos de CSS. Capítulo 4: describe cómo posicionar elementos CSS, clave para posicionar imágenes en el sitio correcto. Learn to Code HTML & CSS: Develop & Style Websites by Shay Howe Lección 3: introducción básica a CSS. Lección 4 y 5: ayudarán al correcto posicionamiento de los elementos. W3Schools HTML: brinda la librería completa standard de todas las etiquetas HTML que existen, los navegadores que soportan a cada una de ellas y ejemplos de utilización. Evaluación: Cada alumno programa sus propios estilos y el mentor realiza una evaluación personal de cada uno, de modo que los alumnos que no han alcanzado el nivel de desempeño esperado deberán dedicar mas tiempo a una segunda o tercera iteración hasta que terminen la tarea con el nivel de desempeño aceptable.

4 Tarea 3: Aplicar estilos con CSS. Entregables: Los alumnos deben entregar una hoja de estilo y los archivos HTML actualizados con sus correspondientes links a las hojas de estilo (CSS) acorde a las especificaciones y requisitos técnicos indicados por el cliente. Build Your Own Website The Right Way Using HTML & CSS de Ian Lloyd Capítulo 3: introduce los conceptos básicos de CSS. Capítulo 4: describe cómo posicionar elementos CSS, clave para posicionar imágenes en el sitio correcto. Learn to Code HTML & CSS: Develop & Style Websites de Shay Howe Lección 3: introducción básica a CSS. Lección 4 y 5: ayudarán al correcto posicionamiento de los elementos. Evaluación: Cada alumno programa su hoja de estilos y luego el mentor realiza una evaluación personal de cada uno, de modo que los alumnos que no han alcanzado el nivel de desempeño esperado deberán dedicar mas tiempo a una segunda o tercera iteración hasta que terminen la tarea con el nivel de desempeño aceptable.

5 Tarea 4: Realizar el menú de manera Responsive con Bootstrap. Entregables: Los alumnos deben entregar sus páginas web actualizadas de manera que estas incluyan el diseño adaptable a tabletas y dispositivos móviles bootstrap. Responsive Design: Guidelines for Responsive Web Design Twitter Bootstrap: Building responsive designs with Twitter Bootstrap Evaluación: Cada alumno programa sus archivos HTML y CSS, las valida según los estándares W3C y luego el mentor realiza una evaluación personal de cada uno, de modo que los alumnos que no han alcanzado el nivel de desempeño esperado deberán dedicar mas tiempo a una segunda o tercera iteración hasta que terminen la tarea con el nivel de desempeño aceptable.

6 Tarea 5: Crear página de contacto y Mapas. Entregables: Los alumnos deben entregar la página web de contacto y un archivo HTML por cada uno de los mapas incorporando Google Maps con la ubicación de cada campo de juego. Cómo crear links para llamar desde los navegadores de celulares: Cómo crear un vínculo para enviar un Google Maps - Google Maps Guide (utilizando IFrames) Este recursos provee una guía paso a paso para poder insertar Google maps en su sitio web. - Learn to Code HTML & CSS: Develop & Style Websites by Shay Howe Lesson 9: describe cómo agregar mapas utlizando iframes. Evaluación: Cada alumno actualizará sus archivos HTML y CSS y luego el mentor realiza una evaluación personal de cada uno, de modo que los alumnos que no han alcanzado el nivel de desempeño esperado deberán dedicar mas tiempo a una segunda o tercera iteración hasta que terminen la tarea con el nivel de desempeño aceptable.

7 Tarea 6: Anclar la Home Page en tu móvil. Entregables: Los alumnos deben entregar: - un documento para el usuario final con los pasos a seguir para poner colocar el sitio web creado en la página de inicio de sus celulares (tanto Android como IOS). Cómo insertar el HTML en la portada de tu celular Android / IOS: Evaluación: Cada alumno entregará su documento para revisión del mentor, de modo que los alumnos que no han alcanzado el nivel de desempeño esperado deberán dedicar mas tiempo a una segunda o tercera iteración hasta que terminen la tarea con el nivel de desempeño aceptable.

Documentos relacionados

Contenido. Curso de Diseño básico de páginas web (online)

Contenido. Curso de Diseño básico de páginas web (online) Contenido Curso de Diseño básico de páginas web (online) ACCIóN FORMATIVA Curso de Diseño básico de páginas web (online) La presente guía tiene como finalidad proporcionar al alumno/a una visión general