Proposición

Publicar un documento HTML que contendrá los resultados de esta exploración, para ello se hará uso de ficheros como los realizados por el alumno en la tarea de presentación de la asignatura u otros con licencia libre disponibles en Internet.

El alumno deberá almacenar el fichero en el directorio public_html de la cuenta en el servidor de la asignatura y visualizar el fichero anterior en el navegador a través de una URL al estilo de <http://websisop.disca.upv.es./~NombreUsuario/practica_HTML.html>. El nombre del fichero HTML lo elige el alumno.

Proposición

Sobre el documento realizado, realice las siguientes comprobaciones:

Proposición

Introducir aspectos de visualización mediante las opciones de BlueGriffon en una hoja de estilos (CSS) externa al fichero HTML. Por ejemplo, ha de declarar:

• Un tipo de letra, tamaño, color de fondo y color de letra genéricos al elemento body.
• Una imagen de fondo, un tipo y tamaño de letra distintos para h1.
• La alineación del texto a “justificado” para párrafos (p) y “a la izquierda” con un sangrado de 10 píxeles para listas no numeradas (ul).
• Que los enlaces (a) se resalten en verde al pasar sobre ellos y que se queden en amarillo después de ser visitados.

Proposición

Introduciendo estilos de la versión CSS3 que incorpora BlueGriffon, se pueden generar ciertos efectos. Por ejemplo, ha de explorar y utilizar los apartados de:

• Geométrico, para dar un espacio mayor entre párrafos.
• Bordes, para que los encabezados tengan una línea por encima que los resalte sobre el texto y las dos esquinas superiores redondeadas.
• Columnas, para poner a tres columnas un trozo del documento.
• Transformaciones, para incluir un párrafo rotado un ángulo de 30º.

Proposición

Validar el código CSS de los contenidos realizados en los ejercicios 2 y 3 utilizando la Web Developer:

• Valide los estilos introducidos con Tools | Validate CSS y con Tools | Validate Local CSS.
• ¿Se han observado diferencias entre las dos opciones?

Proposición

Visitar el ejemplo de Bert Bos. “Alternative style sheets” en la URL <https://www.w3.org/Style/Examples/007/alternatives.en.html> para ver un ejemplo práctico de uso de esta opción. Tras familiarizarse con el ejemplo:

• Descargue dos hojas de estilos de las allí propuestas como alternativas, indicando cuáles ha escogido.
• Incorpórelas al documento que ha venido realizando en los ejercicios anteriores como CSS alternativas. Haga capturas de pantalla del antes y el después de aplicar cada una de ellas.

Proposición

Realizar una hoja de estilos alternativa del estilo “media para impresión” creándola cómo se muestra en la fig. 16 y que:

• Genere una vista alternativa con únicamente colores blanco (para el fondo del documento) y negro (para los tipos de letra).
• Edite manualmente el contenido de esta hoja de estilo y copie el siguiente fragmento de código CSS. ¿Qué efecto tiene este código cuando se aplica esta hoja de estilo?

a:after{

content:" (" attr(href) ") ";

font-size:0.8em;

font-weight:normal;}

• Guarde una versión en PDF de la página que se está editando para comprobar los cambios.

Proposición

Incorpore al documento cuatro conjuntos de media queries que definan para el medio screen (descrito por “media para pantalla”), cuatro escenarios en los que el color de fondo del documento (seleccione la etiqueta body para ello) y el de los tipos de letra de todo el documento cambie visiblemente.

Empiece definiendo uno de esos contextos seleccionando las condiciones que lo definen, como muestra la fig. 17, utilizando el botón “Añadir restricción” para concatenar varios valores de estas propiedades en un solo escenario. Asigne valores a las propiedades y no olvide poner las unidades “px” (píxeles) en el caso de los valores numéricos.

Se habrán de declarar estos cuatro casos y modificar, conforme se indica, el valor de color de fondo:

• screen and (min-width: 0px) and (max-width: 420px) → red.
• screen and (min-width: 421px) and (max-width: 768px) → yellow.
• screen and (min-width: 769px) and (max-width: 1024px) → green.
• screen and (orientation: landscape) → pink.

Como respuesta a este ejercicio guarde un enlace a la versión actual del documento y diga qué resultado se observa al redimensionar la ventana del navegador y guarde capturas de la ventana que lo muestren.

Proposición

La figura en el documento de proposición muestra un ejemplo de diseño de página web extraído del trabajo de M. Pilgrim [5]- Descargar y comparar los ficheros blog-html5.html y blog-original.html de los ejemplos que acompañan al trabajo de Dive into HTML5 de <http://diveintohtml5.info/examples/>.

Publique, a partir de la versión HTML5 de estos ejemplos, en su espacio de usuario, una página que sirva de banco de pruebas para el porfolio y el trabajo de la asignatura. Para ello, modifique dos apartados de la cabecera inicial del documento, de modo que recoja:

• En los tres primeros enlaces de la cabecera, las respuestas a los tres primeros ejercicios de esta misma práctica.
• En el cuarto, los datos relativos a la propuesta de su trabajo de asignatura con los datos que ha introducido en la tarea correspondiente.
• Incorpore un ejemplo de audio y uno de video, como los empleados en el ejercicio 1, ampliados con el uso de la etiqueta source para ofrecer alternativas que el navegador pueda mostrar y un párrafo con un enlace al archivo de audio y el de vídeo, respectivamente, para el caso de que no se puedan utilizar estas versiones propuestas.