Otra semana que empieza y otra semana con más cursos de formación… hoy ha tocado una pequeña introducción a algunos elementos interesantes de HTML 5 para hacer abrir boca a desarrolladores y parte de la gente de contenidos.
Básicamente me he centrado en comentar los nuevos elementos (los que he considerado más interesantes), en comentar los que desaparecen y otras cosas bastante estándar como son los meta-tags, los enlaces o las relaciones entre elementos.
Hace ya un tiempo que no comento cosas de HTML 5, y ahora que se va acercando la fecha de su puesta en marcha ya muchos proyectos nuevos se plantean, al menos la estructura base, comenzarse en esta nueva versión del idioma de Internet. En su día comenté cómo conseguir que, mediante un pequeño script, funcionase HTML5 en Internet Explorer 8. El tema es ¿cómo hacer que funciona siempre?
La solución es bastante sencilla y a la vez también algo compleja, aunque en su día permitirá hacer una actualización bastante rápida del código con un simple “replace”. Como ya sabéis, HTML 5 es un markup, al igual que lo son el HTML, los XML, el RDFa, etc… de forma que, lo mismo que podemos cargar XML en el código HTML… ¿por qué no cargar HTML 5 de la misma manera?
La idea es que, aquellos nuevos elementos que pueden no funcionar en todos los navegadores de forma correcta podemos cargarlos de la siguiente manera:
El día en que se vea que todos los usuarios usan un navegador “compatible”, se hace un simple “reemplazar” de <html5: por < y de </html5: por </ y ya está… ¡prueba superada!
Un buen punto de partida para aquellos que quieran comenzar a hacer sus primeros códigos y ver que cualquier usuario lo ve correctamente.
Hace un tiempo, cuando comencé a hablar del HTML 5, hice una breve referencia a los distinto “rel-algo” que podemos encontrar en la nueva codificación. Entre estos hay uno que puede ser muy interesante si sabes cómo navegan los usuarios de tu sitio web y, aun no sabiéndolo, crees que puedes acelerar la velocidad de carga de la misma.
El link prefetching básicamente lo que permite es descargar las URL indicadas antes de que se vayan a visitar… y el HTML 5 incluye un sistema para avisarlo, ya de forma estándar (hasta ahora sólo Firefox le daba soporte).
El sistema es tan sencillo como poner en el <head> algo como:
Otra posibilidad es la de acelerar la carga pero en URL concretas que se vayan cargando dentro del sitio… de forma que cualquier enlace interno quedaría de la siguiente forma:
Un ejemplo de uso interesante es el que hace Yahoo! con su página principal. Cuando se carga, a priori no hace nada, pero una vez escribes la primera letra en el cajetín de búsqueda, comienza un proceso para precargar imágenes y CSS de la página de resultados de búsqueda, ya que se plantea que va a ser la siguiente en visitarse.
Estamos muy mal acostumbrados a que nuestros vídeos se alojen en FLV en sitios como Youtube o Vimeo. Hoy en día teniendo en cuenta que el ancho de banda está tirado de precio, no entiendo porqué no se tiende a la calidad y a alojar la propia información si que otros decidan.
Con HTML 5 y su nuevo elemento <video> tenemos la posibilidad de incluir muchos formatos de vídeo con muchas opciones… y para hacerlo ya todo más sencillo, además de hacerlo compatible con versiones anteriores que no soportan los nuevos formatos, están apareciendo algunos sistemas que permiten estos reproductores de una forma “chula” y fácil.
Algunos de los que he encontrado son estos:
FlareVideo: Necesita de jQuery y el soporte es, a mi gusto, un poco reducido… hay que programar expresamente para ello.
MediaElementsJS: También necesita de jQuery, soporta todos los navegadores e incluso terminales móviles. Hay que incluir el nuevo tag <video> y unas pocas líneas más… Esto significa que cuando todos los navegadores den soporte, se quita y todo seguirá funcionando.
JW Player: La nueva versión de este tan utilizado reproductor ya es compatible con HTML 5. Necesita de jQuery y aun está en βeta.
VideoJS: No necesita de librerías externas y funciona gracias al elemento <video>, lo que, en principio, a mi me da mucha seguridad. Funciona con todos los navegadores y soporta los nuevos formatos.
SublimeVideo: Aunque aun no ha salido oficialmente, lo que se puede ver es parecido al VideoJS, es decir, que no necesita de librerías externas y funciona gracias al elemento <video>. En principio funciona con todos los navegadores, soporta la mayoría de formatos.
Hoy estoy en la Tenerife Lan Party haciendo un par de presentaciones, una de ellas sobre penalizaciones (principalmente de Google) y otra sobre HTML 5 (relacionada con temas más bien de SEO).
Y, aunque va a ser una entrada breve, os dejo con la descarga en PDF de ambas para quien quiera darles una ojeada:
Lástima estos días que Tenerife Norte está teniendo unos nubarrones bastante importantes y no he podido ni ir a la piscina ni a la playita, y ya mañana me vuelvo para Barcelona.
Tras ver el otro día qué son los MicroDatos, hoy voy a explicaros lo que antiguamente eran los hCard. Este microformato es de los más extendidos y extensibles, y ahora se ha convertido, usando la misma base, en un MicroDato bastante interesante, sobretodo porque ya viene documentado en el HTML 5.
En la actualidad conozco 3 formatos en los que se habla de cómo dar formato a las fichas de personas y/o empresas… que son:
Teniendo en cuenta que de los 3, el primero es el más completo, y que tal como dice Google en los otros 2, es capaz de interpretar similitudes entre unos y otros, voy a enfocarme en el más completo de todos.
fn: Es el nombre completo (u organización), el campo principal.
n: Es un contenedor para indicar el nombre (u organización) de forma más específica… puede incorporar los siguientes sub-elementos:
family-name: Da el apellido(s) familiar de la persona o el nombre completo de la organización.
given-name: El nombre (de pila) que habitualmente se usa con la persona.
additional-name: Si tiene un nombre adicional.
honorific-prefix: Si tiene un prefijo honorífico.
honorific-suffix: Si tiene un sufijo honorífico.
nickname: El nick o sobrenombre de la persona u organización.
photo: Será una URL con la fotografía de la persona u organización.
bday: Fecha de cumpleaños de la persona o de creación de la organización.
adr: indica la dirección postal de la persona u organización. Es un contenedor formado por:
type: Indica el tipo de dirección, que puede ser uno de los siguientes:
dom: Doméstico.
intl: Internacional.
postal: Entrega postal.
parcel: Entrega de paquetería.
home: Residencial.
work: Trabajo.
pref: De todas las opciones, la preferida.
post-office-box: Apartado de correos.
extended-address: Dirección extendida.
street-address : La calle.
locality: Población.
region: Provincia.
postal-code: Código postal.
country-name: País.
label: Dirección de entregas de la persona u organización (viene a ser el nombre del sitio de entrega). Puede contener:
type: Son los mismos que los anteriores de direcciones.
value: La información, con formato.
tel: El teléfono (esta era muy obvia)… Puede incorporar un par de elementos:
type: Indica el tipo de teléfono, que puede ser uno de los siguientes:
home: El de casa.
msg: Envío de SMS.
work: Trabajo.
voice: De voz.
fax: Fax.
cell: Móvil / Celular.
video: Vídeo conferencia.
pager: Buscapersonas.
bbs: BBS.
modem: Módem.
car: Teléfono en el coche.
isdn: Línea RDSI.
pcs: Servicio de comunicación personal.
pref: De todas las opciones, la preferida.
value: La información, con el formato correspondiente.
email: La dirección de correo electrónico. También es un contenedor y puede llevar lo siguiente:
type: Indica el tipo de correo electrónico, que puede ser uno de los siguientes:
internet: La mayoría de cuentas de correo.
x400: cuenta de tipo x.400.
pref: De todas las opciones, la preferida.
value: La información, con el formato correspondiente.
mailer: Indica el software de correo que usa la persona.
tz: Indica el desfase horario de la persona (la Zona horaria con respecto al UTC). Por ejemplo: +06:30.
geo: Indica la la latitud y longitud. Por ejemplo: +41.383333;+2.183333.
title: El puesto de trabajo o función de la persona.
role: El rol, departamento o categoría profesional.
logo: El logotipo de la persona u organización, que será una dirección URL.
agent: Persona que actúa de intermediario de contacto (secretaria, etc…).
org: Nombre detallado de la organización. Puede incorporar algunos elementos:
organization-name: Nombre de la organización / empresa.
organization-unit: Unidad o Subsector de la empresa u organización.
categories: Categorías, palabras clave o lugar donde categorizar esa persona u organización.
note: Añade algunos comentarios a la ficha de la persona u organización.
rev: Última fecha de revisión de la información que se ofrece.
sort-string: Forma de ordenar la información de la persona u organización.
sound: Sonido relacionado con la persona u organización. Ha de corresponder con una dirección URL.
url: La dirección URL de la persona u organización.
class: Cómo ha de tratarse la información que se ofrece. Puede tener estos valores:
public: Pública.
private: Privada.
confidential: Confidencial.
impp: Ofrece el sistema de comunicación instantánea con la persona u organización.
type: Indica el tipo de sistema, que puede ser uno de los siguientes:
personal o business: Si es personal o de negocios.
home o work o mobile: Si está en casa, en el trabajo o es móvil.
pref: De todas las opciones, la preferida.
value: La dirección URL, con el formato correspondiente.
Y ahora el ejemplo:
<section id="jack" itemscope itemtype="http://microformats.org/profile/hcard"> <h1 itemprop="fn">Jack Bauer</h1> <div itemprop="n"> <meta itemprop="given-name" content="Jack"> <meta itemprop="family-name" content="Bauer"> </div> <img itemprop="photo" alt="" src="jack-bauer.jpg"> <p itemprop="org" itemscope> <span itemprop="organization-name">Counter-Terrorist Unit</span> (<span itemprop="organization-unit">Los Angeles Division</span>) </p> <p> <span itemprop="adr" itemscope> <span itemprop="street-address">10201 W. Pico Blvd.</span><br> <span itemprop="locality">Los Angeles</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">90064</span><br> <span itemprop="country-name">United States</span><br> </span> <span itemprop="geo">34.052339;-118.410623</span> </p> <h2>Assorted Contact Methods</h2> <ul> <li itemprop="tel" itemscope> <span itemprop="value">+1 (310) 597 3781</span> <span itemprop="type">work</span> <meta itemprop="type" content="pref"> </li> <li><a itemprop="url" href="http://en.wikipedia.org/wiki/Jack_Bauer">I'm on Wikipedia</a> so you can leave a message on my user talk page.</li> <li><a itemprop="url" href="http://www.jackbauerfacts.com/">Jack Bauer Facts</a></li> <li itemprop="email"><a href="mailto:j.bauer@la.ctu.gov.invalid">j.bauer@la.ctu.gov.invalid</a></li> <li itemprop="tel" itemscope> <span itemprop="value">+1 (310) 555 3781</span> <span> <meta itemprop="type" content="cell">mobile phone</span> </li> </ul> <p itemprop="note">If I'm out in the field, you may be better off contacting <span itemprop="agent" itemscope itemtype="http://microformats.org/profile/hcard"><a itemprop="email" href="mailto:c.obrian@la.ctu.gov.invalid"><span itemprop="fn"><span itemprop="n" itemscope><span itemprop="given-name">Chloe</span> <span itemprop="family=name">O'Brian</span></span></span></a></span> if it's about work, or ask <span itemprop="agent">Tony Almeida</span> if you're interested in the CTU five-a-side football team we're trying to get going.</p> <ins datetime="2008-07-20T21:00:00+01:00"> <span itemprop="rev" itemscope> <meta itemprop="type" content="date-time"> <meta itemprop="value" content="2008-07-20T21:00:00+01:00"> </span> <p itemprop="tel" itemscope><strong>Update!</strong> My new <span itemprop="type">home</span> phone number is <span itemprop="value">01632 960 123</span>.</p> </ins> </section>
Si queremos comprobar si este fragmento sería válido de cara a Google, podemos usar su herramienta para comprobarlo…
Los que me conocéis sabéis que desde hace tiempo he sido un seguidos de los microformatos, y una de las mejoras que descubrí al hacer la serie de artículos de HTML 5 fue la incorporación “oficial” de lo que antiguamente se denominaba microformatos en lo que actualmente pasan a ser los midrodatos (microdata en inglés) y que vienen de la antigua implementación denominada RDFa.
Pero ¿qué son los microdatos? Pues básicamente son pequeñas mejoras del HTML que, en apariencia no han de modificar nada, pero que hacen que las máquinas (buscadores, navegadores, aplicaciones…) sean capaces de interpretar y mejorar semánticamente el significado de parte de la información que se muestra por pantalla.
Hasta ahora los microformatos eran bastante complejos de integrar ya que no existía un sistema estándar, algo que con los microdatos se acaba consiguiendo. Algunos ejemplos muy básicos podrían ser estos:
<div itemscope> <p>My name is <span itemprop="name">Elizabeth</span>.</p> </div>
o este:
<div itemscope> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>
Hasta aquí no hay mucho que decir… aunque estos ejemplos son tan sencillos como, casi, me atrevería a decir que inútiles, ya que no se especifica ningún sistema identificativo para que se pudieran interpretar de forma semántica.
Los microdatos pueden anidarse entre sí, lo que los convierte en una herramienta escalable, además de poderse agrupar por distintos elementos:
Como decía, hasta ahora los ejemplos son “inútiles” ya que no siguen un estándar… para ello se integra la posibilidad de informar de un “tipo”. Los tipo se darán en referencia a una dirección URL en la que se informa de la estructura de cada elemento.
<section itemscope itemtype="http://example.org/animals#cat"> <h1 itemprop="name">Hedral</h1> <p itemprop="desc">Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.</p> <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months"> </section>
¿Y qué elementos son los que han de incorporar los microdatos?
itemscope
itemtype
itemid
itemref
itemprop
itemscope
Este será el indicador de que el bloque, ese elemento, será el contenedor de información importante. Es un elemento booleano, es decir, se pone o no se pone… y ya está.
itemtype
Al indicar un itemscope podemos querer indicar qué tipo de información vamos a encontrar, que diccionario, que vocabulario vamos a utilizar. Para ello indicaremos este atributo que contendrá una dirección URL donde encontrar la información correspondiente.
itemid
Este atributo puede dar información sobre un elemento común que encontremos en el resto de Internet. Viene a ser como crear una ficha única (o no) que contenga la información que queremos dar.
itemref
Si dentro del contenido queremos hacer referencia a varios elementos, podemos asignarles como un nombre a cada uno de ellos. Para eso usaremos el itemref, que será el que haga referencia a los distintos elementos.
itemprop
Es la propiedad y el valor en sí que queremos indicar. Simple y llanamente.
Y, como último ejemplo:
<!DOCTYPE HTML> <html> <head> <title>Photo gallery</title> </head> <body> <h1>My photos</h1> <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses"> <img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest."> <figcaption itemprop="title">The house I found.</figcaption> </figure> <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses"> <img itemprop="work" src="images/mailbox.jpeg" alt="Outside the house is a mailbox. It has a leaflet inside."> <figcaption itemprop="title">The mailbox.</figcaption> </figure> <footer> <p id="licenses">All images licensed under the <a itemprop="license" href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p> </footer> </body> </html>
El resultado de este ejemplo es que, según la información que encontremos en esta URL: http://n.whatwg.org/work tenemos que:
Y esto es todo… y a lo largo de los próximos días os pondré ejemplos de elementos que ya han sido creados para un objetivo claro, y que los buscadores podrían ya utilizar para extraer información.
Aunque se asocia el lanzamiento de las funciones de geolocalización al HTML 5, lo cierto es que la Geolocation API son unas funciones en JavaScript independientes de esta forma de mostrar las páginas web.
Básicamente el navegador, dependiendo de la conexión a Internet, será capaz de saber qué latitud, longitud y otros datos tienes en ese momento. Os dejo con un par de ejemplos de código que, dependiendo del navegador, deberían funcionar. El primero de ellos es simplemente textual, el segundo muestra un mapa.
El código más sencillo tiene una pinta tal que esta:
<script type="text/javascript"> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(successFunction, errorFunction); } else { alert('Tu navegador no soporta la geolocalizacion.'); } function successFunction(position) { var lat = position.coords.latitude; var long = position.coords.longitude; alert('Tu localizacion es -- latitud : '+lat+' longitud : '+long); } function errorFunction(position) { alert('No se ha podido recuperar la geolocalizacion.'); } </script>
Poco a poco se acaban los temas a tratar referentes al código que podemos desarrollar sobre HTML 5, aunque eso no significa que las entradas sobre el tema se acaben.
En esta ocasión toca ya cerrar los elementos, y lo haré con los multimedia. No voy a entrar en muchísima profundidad en cada uno de ellos, ya que algunos darían para documentación muy extensa (sobre todo su actividad externa y el funcionamiento), pero aquí os comento un poco sobre cada uno de ellos.
embed
El elemento embed normalmente se utiliza para integrar elementos multimedia no-HTML, como aplicaciones o elementos interactivos. El bastante sencillo de configurar ya que tiene pocos atributos.
El primero de ellos es el src para indicar la dirección URL del elemento en cuestión, y también el type, que indicará el MIME del elemento, para que el navegador sepa interpretarlo. para acabar, sólo queda indicar el width y height, y así ocupar el espacio que debe.
<embed src="ejemplo.swf" quality="high">
object
El elemento object representa un recurso externo que se podría tratar de forma similar a una imagen, y que puede necesitar un plugin para ser procesado.
El atributo data hace referencia a la dirección URL del contenido a mostrar, el type, al igual que en otros elementos, es el MIME de dicho contenido
A parte del width y height, también se pueden incluir otros atributos como el name, para poder interactuar con el elemento, el usemap si lo queremos relacionar con un mapa, o el form, si está relacionado con un formulario.
param
El elemento param, que depende siempre del object, se utiliza para enviar información de los parámetros que ha de utilizar el plugin en cuestión.
Únicamente tiene dos atributos, que son el name, que sería el nombre de la variable y el value, que sería el valor en sí mismo.
Si hay un elemento que está generando mucha controversia es el elemento video. Básicamente todo viene por el uso del estándar de vídeo que debe funcionar en todos los navegadores y que, en este momento, no existe… pero, dejando de eso a un lado, el sistema de funcionamiento del elemento ya está decidido…
El atributo src sería la dirección URL del vídeo, y el poster, la dirección URL de la imagen que aparecería representando al vídeo. Si queremos conseguir algo de información del vídeo, podemos usar el atributo preload que permite 3 posibles valores: “none” si no queremos que se lea nada del vídeo), “metadata”, si queremos que lea el primero de los frames y saque cierta información (tamaño del vídeo, duración, etc…) o “auto” si queremos que sea el navegador el que decida qué hacer.
En el caso en que queramos que el vídeo comienza a funcionar de forma automática, podemos añadir el atributo booleano autoplay que hará que se cargue sólo, y de una forma similar, el atributo loop permitirá que el vídeo se reproduzca de forma indefinida.
A parte del width y height, también tenemos el booleano controls, que nos permite decidir si el reproductor ha de mostrar o no los sistemas de control para poder interactuar con los vídeos.
<video src="video.mpg" autoplay controls></video>
audio
El elemento audio es bastante similar al video, con la diferencia de que es un formato más establecido, pero que tiene básicamente los mismos parámetros.
Tendremos los mismo parámetros, que son src para indicar el audio, preload para sacar la información, autoplay para que empiece sólo, loop si queremos que se repita y controls si queremos que se muestren los controles del reproductor.
<audio src="audio.mp3" autoplay loop></audio>
source
Como antes comentaba, puede que los distintos navegadores den soporte a distintos formatos de vídeo y audio… por lo que una sola dirección URL no sería útil. Es por esto que existe el elemento source, con el que este problemilla se soluciona, permitiendo incorporar distintos medios como fuentes de muestra de los vídeos o audios.
Este elemento tiene tres atributos, que son src, que indicará la dirección URL, el type que indicará el MIME y que debería incluir el codecs= que indicarán el sistema de codificación del vídeo. También puede llevar el atributo media, que habitualmente tendrá el valor “all”.
Otro de los elementos que hace años se utilizaba bastante era el de los map. Gracias a estos se podría hacer una selección de zonas de una imagen, y convertir esas zonas en enlaces, por ejemplo.
El único atributo que soporta es el name, que hace referencia a la imagen por la cual se generará el mapa.
area
Para que un map tenga zonas, se necesitan indicar las area que van a tener. Este elemento siempre irá contenido dentro de un mapa.
Los atributos que soporta son bastantes y variados. El primero de ellos es el href, que indica la dirección a la que se dirigirá al hacer clic en la zona indicada. Al igual que en las imágenes, el alt informará sobre ese enlace.
Para indicar la forma y lugar de la zona tenemos los elementos coords y shape. las coordenadas serán número enteros que indicarán los puntos de la imagen, y la forma puede tener los valores “circle”, “default”, “poly” o “rect”.
Otros atributos habituales, de los que ya he hablado en muchas ocasiones son target, rel, media, hreflang y type.
Un ejemplo sobre esta imagen, podría ser este:
<img src="sample-usemap.png" lt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." width="600" height="150" usemap="#shapes"> <map name="shapes"> <area shape=rect coords="50,50,100,100"> <area shape=rect coords="25,25,125,125" href="rojo.html" alt="Red box."> <area shape=circle coords="200,75,50" href="verde.html" alt="Green circle."> <area shape=poly coords="325,25,262,125,388,125" href="azul.html" alt="Blue triangle."> <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="amarillo.html" alt="Yellow star."> </map>
details
Aunque no se podría llegar a considerar un elemento multimedia en sí, es cierto que el bloque details es muy probable que se utilice junto a elementos multimedia, ya que representa un bloque de contenido que muestra información adicional o controles de otro bloque.
El único atributo que se le permite es el de open que haría que, si está activo, los detalles estén expandidos, ya que, sino, este bloque quedaría oculto por defecto. Otro detalle es que obligatoriamente ha de contener un summary.
summary
Esta es fácil; el summary simplemente es el resumen o título de un details.
El elemento menu representa un conjunto de comandos… básicamente es un simple contenedor de elementos command. Hay dos atributos posibles. El primero de ellos es el label, que será el atributo que dará nombre al menú.
El segundo de ellos es el type. En este caso tiene tres posibles opciones; si no se indica nada, será un “list” (listado). En caso de incluir el valor “context” se tratará como un menú contextual, y si es el valor “toolbar” se tratará como una barra de herramientas.
command
El elemento command es eso, un comando, una especie de botón que cuando se pulse, el sistema ejecutará alguna acción (como si de una opción de un menú de las ventanas de la mayoría de sistemas operativos se tratase).
Puede tener varios atributos. El primero de ellos es el type, que en este caso incida el tipo de comando. Puede ser un “command” (que ejecuta algo), un “checkbox” (para indicar si está activo o no) o un “radio” (si es una opción de entre varias). Además, cada una de las opciones puede llevar un label que daría la explicación de qué hace.
El atributo icon indicaría la URL del icono que ha de mostrar esa opción. Cada una de ellas puede estar checked y/o disabled según sea necesario. Los “radio” incorporarán un radiogroup que llevará un valor común para varias opciones.
Está claro que hoy en día el HTML no es nada sin los CSS, y hay algunos elementos que tienen algunas pseudo-clases que permiten algunas mejoras a la hora de interactuar con los estilos o diseños.
Con la nueva versión, el HTML 5 tiene algunas clases que en las versiones anteriores no existían… aquí la lista de clases:
: link: Son enlaces (o elementos) que no hayan sido visitados.
: visited: Son enlaces (o elementos) que sí han sido visitados.
: active: Son enlaces (o elementos) que están activados (por ejemplo, en el momento en el que hace clic en ellos).
: enabled: Son elementos que están activos, como enlaces, botones, formularios…
: disabled: Para los elementos contrarios al anterior, aquellos que en ese momento están desactivados.
: checked: Para los formularios que tengan activada alguna opción.
: indeterminate: Para los input con el estado indeterminate.
: default: Cuando el formulario es por defecto.
: valid: Si la validación del formulario es correcta.
: invalid: Todo lo contrario, si falla al validar.
: in-range: si los valores del formulario están en el rango correcto.
: out-of-range: Como antes, pero al revés, si los valores se salen del rango.
: required: Si el valor es obligatorio en el formulario.
: optional: Cuando los valores son opcionales en el formulario.
: read-only: Si los valores del formulario (aunque casi todos los elementos del HTML lo permiten) son sólo lectura.
: read-write: Para aquellos elementos que se pueden editar.
A parte de estos, también esta el : target, aunque si he de decir la verdad, no queda muy claro exactamente su funcionamiento. Y, claro está, luego está todo el sistema de selectores que tiene específicamente el CSS 3 que permite hacer cosas muy interesantes incluidos los valores de los elementos y atributos.
Estamos muy mal acostumbrados a que nuestros vídeos se alojen en FLV en sitios como 