Test Project. Diseño Web (Skill 17) SpainSkills 2011

Transcripción

1 Test Project Diseño Web (Skill 17) SpainSkills 2011 Impresión: 21/12/2010 Secretaría Spain Skills M.E.C. (MADRID) 1 de 9

2 INDICE 1. CONTENIDOS 2. INTRODUCCION 3. DESCRIPCION DE PROYECTO Y TAREAS 4. INSTRUCCIONES A COMPETIDORES 5. ESPECIFICACIONES TÉCNICAS 6. DIRECTRICES DE EVALUACIÓN 7. EQUIPAMIENTO HARDWARE, INSTALACIONES Y MATERIAL REQUERIDO.

3 1. Contenidos Esta propuesta de Test Project consta de la siguiente documentación/ficheros: 1. Test_Project_Diseño_Web.odt 2. Carpeta recursos ubicada en el escritorio con los ficheros necesarios para la creación del proyecto. (Los ficheros mencionados serán facilitados el día de la prueba.) 2. Introducción SpainForeigners es una comunidad que desea realizar una web que permita poner en contacto a la Comunidad de españoles alrededor del mundo. El objetivo de esta web es ayudar y poner en contacto a todos los españoles que viven en el extranjero, bien sea por motivo de estudios, trabajo o placer, además de a todos aquellos que buscan salir de España, temporal o permanentemente. La web será accesible por una audiencia muy variada y por lo tanto tendrá que cumplir las normas básicas de accesibilidad y usabilidad y las guías del W3C (XHTML, CSS). 3. DESCRIPCIÓN DE PROYECTO Y TAREAS. El proyecto de Diseño Web consiste en la tarea práctica de construcción del sitio web SpainForeigners en un tiempo especificado de 22 horas repartidas a lo largo de 4 días según el horario especificado más abajo. La tarea está dividida en 4 módulos. Al final de cada día tendrá que estar completado el módulo correspondiente. El reparto de tareas de cada módulo se detalla en la sección 4, (Instrucciones para competidores) y los criterios de puntuación para cada módulo se enumeran en el documento adicional adjunto a éste.

4 Horario para competidores (por confirmar) Lunes Mañana 10:00 14:00 horas (presentaciones, toma de contacto, etc.) Tarde 15: horas Martes Inauguración competición 15: horas Miércoles 9: horas 15: horas Jueves 9: horas 15: horas Viernes Sábado 9: horas Entrega de Medallas y Clausura 4. INSTRUCCIONES A COMPETIDORES Tu tarea es la de construir el sitio web SpainForeigners usando la información y medios facilitados por la Organización SpainSkills. Esta información conteniendo texto e información multimedia, ha sido preparada y está a tu disposición en el escritorio de tu PC. No es necesario que uses toda la información y medios facilitados, ya que podrás crear tus propios medios para facilitar el diseño. Tu web debe incluir la funcionalidad y los siguientes elementos de diseño: 1. Una página índice que incluya: a. Texto de bienvenida y presentación de la web b. Las mejores aportaciones de la comunidad. c. Zona para subscribirse/zona para poder iniciar sesión. d. Logo de la web. e. Animación fotográfica en la parte superior con las fotografías mejor valoradas por los usuarios o nuestras preferidas una vez logueados en la web. f. Menú para navegar. 2. Una sección de Contacto: a. Información sobre la web SpainForeigners. b. Formulario de contacto. c. Ayuda y uso de la web [En blanco en principio] 3. Registro de Usuarios a. Con validación y envío de s al administrador y usuario recién registrado. Los usuarios cuando se registren tendrán que introducir su nombre, apellidos, y seleccionar su país de residencia. Un usuario sólo podrá publicar información en las sub-secciones correspondientes a su país de residencia.

5 4. Sección Países: a. Al seleccionar un país, nos conectará con la portada de ese país en la que se mostrará información obtenida de los mensajes o publicaciones realizadas por los residentes del mismo, así como fotos o vídeos más valorados. b. Además aparecerán los siguientes enlaces a sub-secciones con información referente a ese país: i. Foros. ii. Multimedia iii. Eventos 5. Sub-sección Foros: a. Listado de los foros disponibles ordenados por nombre. En ellos, los usuarios registrados podrán expresar sus opiniones y realizar las preguntas que consideren oportunas. Listado de foros: Comidas y recetas. Bancos y transferencia. Cultura y costumbres. Estudiar en el extranjero. Lugares a visitar. Alojamientos. 6. Sub-sección de Multimedia: Sección en donde los internautas podrán colgar las fotografías y videos que hayan realizado en sus diferentes países. Este contenido multimedia deberá almacenar información referente a la zona geográfica, el tema sobre el que trata, rating, etc.. para que permita realizar búsquedas por tags y mostrar un listado de los recursos más votados al comienzo de la sub-sección. Cualquier usuario registrado podrá puntuar cualquier recurso multimedia publicado en la web. 7. Sub-sección de Eventos: Los usuarios podrán informar de los próximos eventos que tienen lugar en los diferentes países. Estos usuarios tendrán que facilitar fecha y hora del evento, título descriptivo e información adicional. De esta forma cuando entremos en la sub-sección de eventos veremos un listado ordenado por fecha y hora y al pulsar en el título se mostrará información adicional. Solamente se mostrarán los eventos que estén activos en base a la fecha actual. 8. Sección Buscador: Permite buscar información en todas las sub-secciones de la propia web. 9. Sección de Administración: el usuario con privilegios de administración, será el encargado de generar la estructura de la web. a. Cuando se de alta un nuevo país se generarán automáticamente todas las secciones y subsecciones, de tal forma que los usuarios registrados podrán introducir información en su país correspondiente. b. El administrador de la web podrá editar u borrar la información que los diferentes usuarios han introducido en las diferentes sub-secciones. 10. Sección de usuarios registrados:

6 a. Los usuarios registrados podrán modificar su información de contacto personal, pero nunca su país de residencia. b. Los usuarios registrados podrán darse de baja automáticamente y ésto borrará todas sus publicaciones, contenidos y recursos multimedia que hayan subido a alguna sub-sección en el servidor. c. Los usuarios registrados podrán introducir contenidos en las sub-secciones y dicha información quedará relacionada con su país de residencia. 11. Navegación a. Información a Pie de página (Política de Privacidad, copyright e información legal) 12. Identidad del usuario a. La identidad del usuario registrado tendrá que ser válida para su uso en todo el sitio web. 5. ESPECIFICACIONES TÉCNICAS 1. El código web debe cumplir XHTML 1.0 Strict. 2. Estándares de accesibilidad y usabilidad: o Deberá respetar todas las pautas de accesibilidad de contenido web ( o Compatibilidad entre diferentes navegadores y dispositivos móviles. o Permitir el cambio del tamaño de fuente de forma dinámica. o Debe visualizarse correctamente a diferentes resoluciones de pantalla (Nativa: 1024x768 pixels). Nota: Los jueces evaluarán la web basándose en el formato nativo y la comprobarán también en formato 1280x1024. o Formateo de presentación y plantilla empleando CSS (sin uso de tablas) Nota: Si CSS está deshabilitado el contenido de la página mantendrá su estructura lógica. o Los datos tabulados tendrán que tener identificadas las filas y las columnas. o Proporcionar contraste de colores suficiente entre el texto y el fondo. o Mantener el sistema de navegación consistente. o Código PHP, XHTML y CSS tendrá que estar documentado. o Permitir la opción de impresión empleando CSS para formatear aquellas páginas susceptibles de impresión. o Uso de etiqueta LABEL para los campos en formularios. o Uso de atributos REL en los hiperenlaces. 4. Optimización para buscadores: o Usar metatags con la información correspondiente [ejemplo: Descripción y palabras clave] o Usar URL amigables para buscadores. Ejemplo: URL no amigable para buscadores: page=contact

7 Ejemplo: URL amigable para buscadores: 5. Detalles de Seguridad o Las contraseñas se almacenarán de forma encriptada en la base de datos. o Uso seguro de variables (vigilar particularmente la inyección de código en PHP y MySQL). o Proteger todos los visibles dentro del código fuente (para evitar spam). o Validar la entrada de datos en el formulario en aquellos campos que sean obligatorios. o Uso de Captcha. 6. DIRECTRICES DE EVALUACIÓN Módulo A: Diseño Preliminar 10 Módulo B: Animación/Plantillas 15 Módulo C: CSS/GUI/Frontend 35 Módulo D: Backend 35 Módulo E: Presentación 05 Día 1: [Módulo A] Al final de este módulo, tendrá que producir un documento sobre la web que incluya lo siguiente: Propósito, audiencia de destino, tema y esquema de colores. Boceto de la estructura de la web y plantilla. Explicación de la animación. Descripción técnica. Planificación de tareas. Si incluyes funcionalidades especiales que no han sido listadas en el proyecto comuníquelo en la planificación del sitio web. Deberá resaltar dichas funcionalidades. Podrás comenzar con las tareas del día 2, una vez haya finalizado las tareas del día 1. La planificación del sitio web no se comparará con el trabajo final hasta la finalización del día 4. Si eliges modificar tu web, no es necesario que modifique la planificación de la web. Recuerda que una mala planificación penalizará tu puntuación. Día 2 [Módulo B] Al final de este día las siguientes tareas deberán estar terminadas: Plantillas de Páginas puede ser una imagen del diseño de la web. Animación fotográfica. Estructura de directorios. Podrá proceder con las tareas del día 3 si ha terminado las tareas del día 2.

8 Día 3 [Módulo C] Al final de este día las siguientes tareas deberán estar terminadas: GUI el código de la plantilla tendrá que estar terminado. La navegación por la web es operacional. El Registro de usuarios está visualmente completo y funciona correctamente. Podrá proceder con las tareas del día 4 si ha terminado las tareas del día 3. Día 4 [Módulo D] Al final de este módulo, las siguientes tareas tienen que estar terminadas: Navegación por la web con la opción de búsquedas incluida. Gestión de los foros. Sección de contacto. Sección de administración. Registro de usuarios con notificación vía , validación de formularios y página de confirmación. Envío de contenido textual y multimedia al servidor por parte de los usuarios registrados. URL's amigables para buscadores. Website completamente funcional con gestión de contenidos y aspectos de seguridad. Testeo y debug.

9 7. EQUIPAMIENTO HARDWARE, INSTALACIONES Y MATERIAL PROHIBIDO. Software Estaciones de Trabajo: MS Windows XP Professional OpenOffice Adobe CS5 Web Premium (incluye Adobe Flash, Dreamweaver, Illustrator, Fireworks, Photoshop...) Microsoft Media Player Notepad++ Kompozer Scite Aptana con PHP Gimp Inkscape Internet Explorer Mozilla Firefox Web Developer Toolbar Firebug Addon Google Chrome Filezilla XAMPP Librerías: jquery (LightBox, JCarousel) jquery UI Dojo Mootools Audacity Avidemux Flash Player Mercurial + TortoiseHg Herramientas de validación (código, html, css, accesibilidad) Documentación (Por ejemplo: PHP, mysql, Javascript, librerías incluidas, xhtml, css, normas de accesibilidad, etc.. Cuando tengamos detallada la lista definitiva y específica de manuales que podrán ser utilizados durante la competición, ampliaremos esta sección). Estación de Trabajo: Ratón Alfombrilla ratón proporcionada bajo petición Teclado Español El participante podrá traer su propio teclado y el software específico del mismo para su instalación.*** Monitor LCD de 20 (2 por box) Otros: Impresora láser color en red. Papel, lápiz, bolígrafos. Sillas ergonómicas Servidor: Servidor Linux (8 GB RAM) LAMP *** Los teclados no podrán disponer de dispositivos lectores de tarjetas integrados. Los encargados de las estaciones tendrán que estar presentes cuando se instale el teclado en la estación de trabajo. Si el teclado necesita un software especial, éste tendrá que ser facilitado por el participante. Material prohibido: 1. Software Adicional 2. Teléfonos Móviles 3. PDAs 4. Pendrives Cualquier dispositivo con memoria