Taller: Sitio web con HTML y CSS Objetivos • Usar HTML y CSS para implementación del front-end de páginas web • Conocer y usar dos frameworks altamente usados en la actualidad para la implementación de front-end responsivo para páginas/aplicaciones web • Usar herramientas en línea para validación/certificación de cumplimento de estándares HTML/CSS • Usar herramientas en línea para certificar la compatibilidad de páginas web con diferentes exploradores web (browsers) Elementos a calificar 1. Implementación de un sitio web (5 secciones) usando HTML y CSS (sin plantillas ni frameworks) 2. Implementación de un sitio web (5 secciones) usando HTML, CSS, y bootstrap. Se deben usar por lo menos 15 componentes/controles diferentes de bootstrap 3. Implementación de un sitio web (5 secciones) usando HTML, CSS, y foundation. Se deben usar por lo menos 15 componentes/controles diferentes de foundation 4. Reporte generado por el validador de la W3C, para los tres sitios 5. Análisis de compatibilidad de exploradores, para los tres sitios Pasos previos a el taller Para visualizar páginas web localmente solo se requiere de un browser. Basta hacer doble clic sobre el archivo local a visualizar. Sin embargo, en el caso de recursos que se acceden a través de una red, la solicitud de estos recursos se hace a través de una solicitud http que es gestionada por un servidor web. El servidor web mas usado en la actualidad es el Apache http Server. Previamente al taller, a manera de trabajo personal, se recomienda instalar el servidor Apache en sus equipos personales y experimentar el despliegue de sitios web en el servidor. Para esto el estudiante debe leer/revisar: 1 Guía introductoria de apache: http://httpd.apache.org/docs/2.4/getting-started.html 2. Página de descargas: http://httpd.apache.org/download.cgi 3. Guía de compilación/instalación para UNIX/LINUX: http://httpd.apache.org/docs/2.4/install.html 4. Para el caso de Windows se pueden utilizar algunos de los bundles listos para instalar en Windows, ejemplo XAMP: https://www.apachefriends.org/index.html Dado que los artefactos esperados al final del taller son páginas web que usan bootstrap y foundation, usted debe familiarizarse con la implementación de páginas web basado en frameworks. Para esto se recomienda ver los videos 2 - 6 de la serie Making a Basic Site with Zurb Foundation 6, que se encuentra disponible en https://goo.gl/goJgYQ Instrucciones Paso a paso Para la implementación de los sitios web se puede utilizar cualquier editor de texto de su preferencia. Se pude usar IDEs como Netbeans o Eclipse, con el fin de que se el estudiante se vaya familiarizando con el uso de IDEs para desarrollo de aplicaciones WEB. 1. Diseñe un sitio/web página que tenga 5 secciones. El contenido es libre y está versión inicial del sitio servirá como un sketch para la diagramación y el contenido, es decir, para esta versión del sitio se debe usar solo HTML y hojas de estilo definidas por usted 2. Para la siguiente versión de su sitio, utilice Foundation 6. Descargue la versión completa de Foundation (http://foundation.zurb.com/sites/download.html/) 3. Se pueden usar tantos estilos y componentes de Foundation como usted desee, pero para efectos de calificación, su sitio debe incluir mínimo 15 componentes/controles (diferentes)1 de Foundation. Una guía rápida de los controles se puede encontrar aquí: http://goo.gl/Heemm1 4. Para la tercera versión de su sitio utilice Bootstrap. De forma similar a la versión 2, primero descargue bootstrap de http://getbootstrap.com/getting-started/. Luego utilice tantos estilos y componentes de Bootstrap como usted desee, pero para efectos de calificación, su sitio debe incluir mínimo 15 componentes/controles (diferentes) de Bootstrap. Una guía rápida de los controles se puede encontrar aquí: http://getbootstrap.com/components/ 5. Utilice el servicio de validación de markup de W3C (http://validator.w3.org/#validate_by_upload) y genere un reporte para cada versión del sitio web. Guarde cada reporte como un archivo PDF. 6. Busque una herramienta para validación de compatibilidad de browsers y genere un reporte de compatibilidad para cada versión del sitio web. Guarde cada reporte como un archivo PDF. 1 Nota: dos componentes diferentes son Button y Menu. Dos botones no van a ser considerados como dos components diferentes 7. La estructura de directorios del taller debe ser la siguiente: En el archivo README.txt escriba los nombres de los estudiantes en el grupo, y describa todas las herramientas usadas para la evaluación de compatibilidad.