Taller: Sitio web con HTML y CSS Objetivos

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.