Scribd
Cargar
103 vistas

Practica02 HTML5-CSS3

Este documento describe una práctica sobre el uso de HTML5 y CSS3. Los objetivos son aplicar nuevos elementos de HTML5 como section, article y nuevas propiedades de CSS3. Se pide convertir una página web existente siguiendo requisitos como incluir videos, audio, nuevos controles de formulario y fuentes web. La práctica es individual y se entregará un archivo comprimido con todos los materiales de la página revisada.

Cargado por

mayte
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
103 vistas

Practica02 HTML5-CSS3

Este documento describe una práctica sobre el uso de HTML5 y CSS3. Los objetivos son aplicar nuevos elementos de HTML5 como section, article y nuevas propiedades de CSS3. Se pide convertir una página web existente siguiendo requisitos como incluir videos, audio, nuevos controles de formulario y fuentes web. La práctica es individual y se entregará un archivo comprimido con todos los materiales de la página revisada.

Cargado por

mayte
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

UNIVERSIDAD PONTIFICIA DE SALAMANCA EN MADRID

Escuela Superior de Ingeniería y Arquitectura


Grado en Ingeniería Informática

PRACTICA 2

Diseño, Evaluación y Desarrollo de Interfaces


(Curso 2013-2014)

HTML5 Y CSS3

Objetivos
El objetivo de la práctica es aplicar los nuevos elementos de HTML5 y las propiedades de CSS3 en
una página web

Desarrollo de la práctica

La práctica consistirá en convertir una página escrita en XHTML 1.0 Strict a HTML5 según una serie
de requisitos.

Requisitos de la nueva página


 El layout de la página se deberá mantener también en navegadores antiguos (hasta IE8) y la
página deberá ser funcional en las últimas versiones de Firefox, IE, Chrome y Opera.
 El aspecto general de la página no se modificará aunque, si se desea, se pueden utilizar
nuevas propiedades de CSS3 de degradados, sombras, bordes redondeados para mejorar el
aspecto.
 La página deberá mantener los niveles de accesibilidad de la página original (nivel de
conformidad AA).
 Se deberá modificar la DTD y todos los errores de validación que aparezcan al cambiarla
(para escribir el código se puede utilizar tanto la sintaxis HTML como la sintaxis XML).
 Se deben utilizar los nuevos elementos estructurales (section, article, nav, aside,
header, footer, main, figure, figcaption) para marcar los distintos bloques de
información. No es necesario utilizar todos los elementos, pero, siempre que sea adecuado,
deberán sustituir a los elementos div.
 La página deberá incluir un elemento video y otro audio en una sección “Video” y otra
“Canto” que se añadirá a la sección de contenido principal de la página. En
www.colimbo.net/media/ están almacenados distintos archivos de audio y video en
distintos formatos:
o Archivos de video
 verderon.mp4

Práctica: HTML5 y CSS3 1


UNIVERSIDAD PONTIFICIA DE SALAMANCA EN MADRID
Escuela Superior de Ingeniería y Arquitectura
Grado en Ingeniería Informática

 verderon.ogv
 verderon.webm
o Archivos de audio
 verderon.wav
 verderón.mp3
 En el formulario se deben utilizar los nuevos controles de HTML5 y las nuevas propiedades
de los elementos de formulario siempre que sea conveniente. No debe importar que
algunos no funcionen en algunas versiones de navegadores.
 Para el logo y los encabezados se utilizará la letra M+ 1C Black (disponible en
www.fontsquirrel.com/fonts/M-1c). Para utilizarlas es necesario bajarse el webfont kit de la
fuente y utilizar la regla @font-face de CSS.
 La tabla deberá tener un estilo “cebra”, es decir, aparte de las cabeceras y el pie de la tabla,
se deben alternar el fondo de las líneas pares e impares, de forma similar a la siguiente
imagen:

Materiales necesarios

El archivo Practica02_HTML5-CSS3.zip contiene la página original, su css, imágenes y archivos


necesarios para su realización. Los archivos multimedia están disponibles en
www.colimbo.net/media y las fuentes en www.fontsquirrel.com/.

Normas de entrega

La práctica será individual. Para la evaluación de la práctica se deberán entregar por medio del
campus virtual un archivo comprimido con todos los materiales necesarios para la correcta
visualización de la página (archivos HTML, hojas de estilo, imágenes, etc.).

Práctica: HTML5 y CSS3 2

También podría gustarte