MÓDULO 4. NOVEDADES HTML 5 Y MULTIMEDIA.
Novedades en HTML5
Los cambios introducidos en HTML5 pretenden, en general, simplificar ciertas declaraciones que, en versiones
previas, eran innecesariamente complejas.
Algunas de estas modificaciones son las siguientes:
Definición del tipo de documento, en la
primera línea del documento HTML. Ahora
sería así:
Simplificación de la declaración de
determinadas etiquetas: meta, link o script.
Eliminación de etiquetas.
Incorporación de elementos estructurales a través de etiquetas semánticas.
Introducción de elementos y atributos nuevos que enriquecen la manera en la que se trabaja con los
formularios.
Componentes multimedia
Además de los cambios relacionados anteriormente, se han añadido a HTML5 elementos que permiten
contenido multimedia sin necesidad de plugins externos como Adobe Flash, Microsoft Silverlight o los Applets
Java.
Los elementos multimedia incorporados a través de etiquetas son los siguientes:
Audio
Vídeo
Canvas o área en la que puede dibujarse mediante JavaScript
Compatibilidad entre navegadores
Compatibilidad entre navegadores se refiere a que la página web se muestre de forma muy similar en todos
los navegadores.
Aunque los navegadores cada vez cumplen más y mejor los estándares que marca la W3C, entre ellos hay
diferencias: reglas que no son soportadas, diferentes interpretaciones de una especificación, ... lo cual se
traduce en que las páginas web no siempre se ven igual entre ellos e incluso entre versiones del mismo
navegador (Internet Explorer 6, Internet Explorer 7, ...).
Como el número de navegadores que existen es muy grande, se habla de compatibilidad entre navegadores
cuando la página web se ve casi igual en los más usados: Firefox, Opera, Chrome, Internet Explorer y Safari.
Con esos navegadores se tiene cubierto al 99% de los usuarios.
Para lograr la compatibilidad entre navegadores, lo que se suele hacer es desarrollar cumpliendo los
estándares, de forma que cualquier navegador actual o futuro que cumpla estos mostrará bien la página web,
y luego aplicar "trucos" (hacks) específicos para arreglar lo que se ve mal en cada navegador.
Estas diferencias entre los navegadores pueden darse en cualquiera de los estándares que utilizan: CSS, DOM
(Javascript) o, en menor medida, HTML.
Cada navegador interpreta el código fuente del sitio de manera ligeramente diferente, por lo que es posible
que se muestre de forma diferente en función del navegador que use el usuario de la web. Google aconseja no
confiar en las funcionalidades específicas de los navegadores, como la detección automática de un tipo de
contenido o codificación de carácteres.
¿Cómo conseguir que nuestro sitio se comporte de la manera más adecuada en todos los navegadores?
Usar una codificación HTML válida
Especificar la codificación de caracteres
Accesibilidad
Probar en el mayor número de navegadores.
Utilizar una codificación HTML clara y válida es una apuesta segura, que combinada con el uso de hojas de
estilo CSS garantizarán una carga correcta y rápida.
Es posible que un sitio se muestre correctamente en algunos navegadores aunque el lenguaje HTML no sea
válido, pero ello no es garantía de lo haga en todos los navegadores existentes y por llegar, así como sobre
toda la variedad de versiones de cada uno.
El Consorcio W3 ofrece una serie de herramientas de validación para HTML y CSS. Otras herramientas, como
HTML Tidy, ofrecen ayudas para limpiar el código de forma rápida y sencilla.
De cara al modo en como rastrea Google el sitio web, el uso de una codificación incorrecta no afecta.
Siempre se debe especificar la codificación utilizada para una página HTML o XML. De lo contrario, nos
arriesgamos a que los caracteres del contenido se interpreten incorrectamente. Esto no es sólo un problema
de la capacidad de lectura del ser humano, sino que las máquinas, cada vez más, necesitan comprender la
información. Además deberemos verificar que no estemos especificando codificaciones distintas en lugares
distintos.
Quizás no todos los usuarios tengan habilitado JavaScript en sus navegadores. Por otro lado, es posible que
tecnologías como Flash o ActiveX no se ejecuten de forma correcta en todos los navegadores o que
sencillamente no se ejecuten. Proporciona alternativas de solo texto para los contenidos y las funciones
multimedia, los motores de búsqueda rastrearán e indexarán el sitio más fácilmente y, además, será más
accesible para los usuarios que utilicen tecnologías alternativas como son los lectores de pantalla.
Para estar seguros del funcionamiento de un sitio en diferentes navegadores, se lleva a cabo las llamadas
pruebas "Cross-Browser" que consisten en llevar a cabo revisiones en cada uno de los navegadores más
usados. Gracias al uso de herramientas ya sea de escritorio o web que nos permiten simular el despliegue de
nuestro sitio utilizando el motor de diferentes navegadores.
Etiquetas: opera, safari, mozilla firefox, firefox, google chrome, internet explorer, navegadores web
Categorías: Desarrollo web.
Prueba 1.-
1. ¿Para qué sirven las etiquetas semánticas en HTML5?
Se aseguran de que el contenido que rodean esté relacionado con lo que indica la etiqueta
Indican de forma exacta en que zonas del documento se encuentran definidas las partes de la página
(Son las que sirven para definir el esquema principal del documento, como HEADER, ARTICLE,
FOOTER, etc.)
Para maquetar la página visualmente
Indican al usuario qué está viendo
2. La etiqueta canvas es:
Ideal para mostrar vídeos
Necesaria para mostrar imágenes
Útil para poder generar dibujos (El elemento HTML canvas (<canvas>) se puede utilizar para dibujar
gráficos a través de secuencias de comandos (por lo general JavaScript). Por ejemplo, puede usarse
para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.)
Requiere de poca experiencia como diseñador pues es muy sencilla de utilizar
3. ¿Cuál de estos tipos de input es válido?
input type=”boolean”
input type=”graphic”
input type=”canvas”
input type=”range” (El elemento input, teniendo el valor "text" en su atributo type, representa a un
campo de entrada de texto. El control asociado a este campo es una caja de texto que permite a los
usuarios editar una sola línea de texto regular. Los controles de texto son útiles para recolectar
líneas cortas de texto como títulos, nombres, apellidos, descripciones cortas, palabras clave,
etiquetas, etc.)
4. El atributo placeholder de una caja de texto:
Se ha eliminado en HTML5
Indica el lugar en el que se guardará el dato introducido
Permite añadir un valor por defecto que desaparece al empezar a escribir el usuario (permite al usuario
ver una especie de leyenda o label dentro del input. Cuando el usuario comience a escribir sobre él
este placeholder desaparecerá. Es muy útil para guiar al usuario sobre el tipo de contenido a rellenar
en el formulario.)
Sustituye al atributo ‘value’
5. ¿Cuál de las siguientes etiquetas representa a una pieza independiente de contenido en un documento
html?:
article
section
aside
head
Etiquetas.
<header>: Usado para albergar el contenido del encabezado del sitio.
<footer>: Aloja el contenido del pie de página de un sitio.
<nav>: Contiene el menú de navegación u otra funcionalidad de navegación de la página.
<article>: Contiene una pieza independiente de contenido que tendría sentido al ser distribuida como
un elemento RSS, por ejemplo, una noticia.
<section>: Se utiliza tanto para agrupar diferentes artículos en diferentes propósitos o temas, como para
definir las distintas secciones de un único artículo
<aside>: Define un bloque de contenido que está relacionado con el contenido principal que lo engloba,
pero no es fundamental para el flujo del mismo.
