HTML 5: algunas novedades antes de empezar

Fecha: 3 Mayo 2010 - Comentarios: 1 comentario - Etiquetas: HTML.

Sin duda HTML 5 es el futuro presente, y un claro ejemplo ha sido el lanzamiento

de este mismo blog en HTML desde Octubre de 2009 y algo comercial como es
TuManitas en Abril de 2010.

Para empezar he de decir que uno de los

detalles que ms me ha gustado es que los
tags nicos ya no sea obligatorio
cerrarlos. Esto significa que podemos
poner cosas como <br> o <img
src="http://example.com/example.jpg"> sin
necesidad de incluir la barra / final.

Otro detalle es que se va a poder tener

acceso a dispositivos externos como una
cmara web gracias al tag device. Ahora
mismo nadie da soporte a este elemento,
pero bsicamente tendr 3 opciones gracias
al parmetro type: media (una cmara
web), fs (un USB o similar) y rs232 (un
puesto serie del dispositivo).

A parte de esto, el canvas, los microdatos (y microformatos), muchas mejoras en

los formularios y sobretodo algunos elementos externos como los WebWorkers
(que vienen a ser como los hilos en programacin que permiten ejecutar procesos
en background), el Web Storage (o cach temporal en el navegador), los
WebSockets para mantener bidireccionalidad en las comunicaciones, el Web
SQL Database, a modo de base de datos temporal en el navegador, la
Geolocation que empieza a tomar fuerza, los SVG o grficos vectoriales, el
MathML para incorporar elementos matemticos o una nueva versin del
XMLHttpRequest para todo lo llamado AJAX.

Y por qu lanzar el HTML 5? Hay que recordar que entre 1990 y 1995, el HTML se
creaba desde el CERN y tuvo gran cantidad de retoques y versiones, hasta que en
1995 se cre el W3C que es el organismo que vela por los estndares de, entre otras
cosas, el lenguaje web. En 1995 se lanz el HTML 3 que lleg en 1997 a su versin
HTML 3.2. Poco tiempod espus, se lanzaba el HTML 4, en 1998. En paralelo
nacan y crecan el XHTML 1 y los DOM HTML (que llegaron a tener 3 versiones).
Con HTML 5 se pretende unificar todo lo que se ha ido evolucionando en estos
ltimos 10 aos de Internet.
Otra cosa a tener en cuenta es la anidacin de elementos. No podemos hacer cosas
como esta:

<p>Esto es un <em>muy <strong>mal</em> ejemplo</strong>.</p>

Pero s cosas como esta:

<p>Esto es un <em>muy <strong>buen</strong> ejemplo</em>.</p>

Tambin hay que tener en cuenta cmo indicar los atributos a los distintos
elementos; y es que hasta ahora los atributos tampoco podan estar en blanco, algo
que ahora s que se puede hacer:

<input name=address disabled>

<input name=address disabled="">

Por mi parte, y ahora que se puede, recomiendo el primero de los casos en

Cambio, en los que s hay valor, recomiendo el uso de comillas dobles (y para
JavaScript el uso de comilla simple).

<input name=address maxlength=200>

<input name=address maxlength='200'>
<input name=address maxlength="200">

An as, cualquiera de estas opciones es correcta, por lo que cada uno decida hacer
con su cdigo lo que quiera

Otra cosa a tener en cuenta es que la etiqueta embed es la que se utilizar para
incorporar elementos externos, y no el object que bsicamente era necesario para
Internet Explorer. Gracias a esto elementos en Flash u otras tecnologas se pueden
incorporar de forma ms sencilla.

Y, aunque ya hablar con ms detalle de ello, hay que tener cuidado con los
elementos que estn desapareciendo. Algunos de ellos sin atributos de algunos
tags, como el border de las imgenes, que ya no se puede usar, el language de los
scripts, o algunos tags como acronym, frame, center, font, o el de subrayado, u. La
mayora de estos elementos desaparecen porque gracias a las hojas de estilo CSS se
pueden aplicar todos los cambios.

HTML 5: atributos globales

Fecha: 10 Mayo 2010 - Comentarios: 1 comentario - Etiquetas: HTML.
 Antes de empezar a hablar de las etiquetas en
el HTML 5, hay que tener presente una serie de elementos globales que sirven para
la gran mayora de etiquetas y que hay que tener en cuenta a la hora de comenzar a
desarrollar, sobre todo por la gran posibilidades de accin que nos permiten.

Estos elementos que os comentar ahora son atributos de los tags, de forma que se
pueden aadir dentro del tag como un parmetro ms. Y, una vez explicado esto,
vamos a comenzar con cada uno de ellos:

accesskey
Este atributo accesskey bsicamente lo que permite es una mejora en la
accesibilidad del sitio, pudiendo llegar a esa zona de la pgina pulsando una letra o
nmero del teclado.

Un ejemplo podra ser el de un enlace o el de un cajetn de un formulario:

<a accesskey="A" href="http://example.com/">Ejemplo</a>

<label>buscador: <input type="search" name="q" accesskey="b"></label>

Para el primer caso, el usuario debera usar la combinacin de teclas Control + Alt
+ A para acceder a esta tecla. De todas formas, cada navegador puede tener su
propia combinacin de teclas.

class
El atributo class bsicamente se usa para lo que siempre se ha utilizado, y es para
controlar las hojas de estilo. Dentro de un class se pueden poner varios contenidos
haciendo referencia a los correspondientes en la hoja de estilos.

<a class="enlace" href="http://example.com/">Ejemplo</a>

En este caso, si tuviramos una definicin del estilo enlace en el CSS, se aplicara
en este caso.
contenteditable
Este es uno de los nuevos atributos que aparece, y es que contenteditable va a
permitir que un acceso externo permita o no editar o cambiar el contenido de una
etiqueta. Es un elemento heredado de los padres, por lo que si un padre no se
puede editar, los hijos tampoco.

Al ser un elemento booleano, slo es necesario ponerlo con un true o false para
que funcione.

<div contenteditable="false">Este contenido no debera ser editable desde el

exterior...</div>

contextmenu
Este es otro de los nuevos elementos que encontramos. contextmenu
bsicamente viene a dar un nombre a uno de los tambin nuevos tags, menu.

Para resumir, viene a ser como si le pusieramos un id (un identificador, como os

explico ms adelante), pero para el caso especial de este tag. e de reconocer que es
algo bastante nuevo y an no le encuentro aplicacin prctica (que seguro que la
tiene).

dir
El atributo dir bsicamente indica la direccin del texto, o, mejor dicho, de
escritura, para aquellos idiomas en los que se escribe de derecha a izquierda y no de
izquierda a derecha como lo hacemos nosotros.

Tiene tan slo dos opciones que corresponden a lo que acabo de comentar: ltr (left
to right) o rtl (right to left).

<div dir="ltr">Este contenido est escrito de izquierda a derecha...</div>

draggable
Otra de las nuevas incorporaciones es el draggable, que cada vez que lo veo me da a
pensar en las ventanitas y bloques que se pueden mover dentro de una web.
Supongo que en un futuro ese ser el uso principal que se har, aunque en la
actualidad va a permitir incorporar o eliminar elementos de una pgina
simplemente arrastrndolos.

Un ejemplo de lo que hasta ahora poda tratarse como tal sera una imagen que,
al arrastrarla fuera de la ventana y colocarla en un editor de imgenes, se poda
abrir. Otro ejemplo el de un enlace que se arrastraba sobre una pertaa del
navegador y ejecutaba esa direccin.
Los parmetros que permite son true, false o auto, que es el que est por defecto,
dejando a cada usuario / navegador decidir los elementos.

hidden
Seguro que el elemento hidden va a dar mucho que hablar, sobre todo en lo que a
SEO se refiere. Hasta ahora cuando queras que un bloque de contenido no se viera
tenas que utilizar los CSS para ocultarlo. Ahora eso ya no ser necesario, ya que
que si un elemento incorpora este atributo simplemente no se mostrar por
pantalla.

De todas formas, este elemento no debe usarse para ocultar bloques o pestaas,
sino que se ha de utilizar para elementos que no son todava o no van a ser
relevantes.

Por ahora no hay ningn navegador que lo soporte, por lo que habr que esperar a
ver qu ocurre con el contenido que va dentro de estos elementos.

<div hidden>Este contenido est oculto por no ser relevante para el

usuario...</div>

id
Sin duda uno de los pilares bsicos hoy en da en cualquier sitio, el id simplemente
identifica un elemento de forma nica (por lo que slo puede haber uno que se
llame as por pgina. A parte de utilizarse en las hojas de estilo, lo ms habitual es
su uso con AJAX y la funcin getElementById().

<div id="explicacion">Este contenido puede variar si se accede mediante AJAX o

similar...</div>

itemid, itemprop, itemref, itemscope y itemtype

Estos elementos tambin son nuevos y creo que van a dar bastante juego. Algunos
ya sabis que me encantan los microformatos, y estos van a permitir ampliar todos
esos pequeos detalles que van a ampliar el juego.

El itemscope permite crear un nuevo conjunto de elementos los cuales han de ser
de un tipo, que se informa con el itemtype. Este tipo ha de venir dado con una
direccin URL (que indica el microdato nuevo)

El itemid es el que identifica al elemento, el itemref hace referencia a otros

elementos que han de poder ser utilizados y, para acabar, itemprop viene a ser el
que da los valores.
Y, en este caso, slo hay una forma de entender todo lo que he puesto, y es con un
ejemplo:

<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>
<p id="licenses">All images licensed under the <a itemprop="license"
href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>

NOTA: en este ejemplo se utilizan algunos nuevos elementos como figure o

figcaption del que ya hablar ms adelante.

lang
Otro de los clsicos sin duda es el lang, que marca el idioma del contenido de ese
fragmento de texto. Hay que tenet en cuenta que, aunque un documento se le
aplique un idioma, por normal general, puede haber fragmentos de texto de
contenidos que se encuentran en otros idiomas, por lo que hay que indicarlos.

<div lang="es">este bloque se encuentra escrito en espaol...</div>

<div lang="en">...and this is in english...</div>

spellcheck
Otra de las novedades que an no s para qu, pero bueno, gracias a spellcheck se
podr indicar qu contenidos o no queremos que puedan sufrir una correccin
ortogrfica o gramatical. Seguramente acabar usndose en los formularios en los
que haya que incluir palabras sin sentido, o en textos en un idioma distinto del
general de la pgina

Tiene tres posibles valores, que son true, false y default.

style
De los style no voy a contar gran cosa, ya que eso es todo un mundo, pero
bsicamente a cualquier elemento se le puede aplicar directamente, en lnea,
algunos atributos que hacen referencia a las hojas de estilo.

tabindex
Este es quiz uno de los desconocidos a la hora de mejorar la usabilidad de un sitio,
y es que gracias a tabindex cada vez que pulsemos en la tecla tab vaya a un sitio
y otro de la pgina. De todas formas, no todos los elementos permiten tener este
atributo, slo aquellos en los que el usuario puede focalizarse. Lo ms habitual es
su uso en formularios, para que el usuario vaya saltando de un campo a otro en el
orden que t le digas, y no en el que el cdigo fuente tenga.
title
El genial title bsicamente hace lo que su nombre indica: titulear. Y es que muchos
elementos, cuando se pone el ratn encima permiten mostrar ms informacin de
lo que eso significa. Un ejemplo muy habitual sera el las abreviaturas

<p>Internet usa mucho el protocolo <abbr title="Hypertext Transport

Protocol">HTTP</abbr> y el <abbr title="File Transport Protocol">FTP</abbr>.</p>

data-*
Aunque, sin duda, si hay que tener algo en cuenta que va a hacer crecer la lista de
atributos es el data-*. Gracias a este tipo de atributos podremos crear nuestros
propios microformatos de una forma ms o menos estndar.

Bsicamente la idea es la de poder aadir informacin oculta que no moleste a los

lectores pero que los navegadores y los robots sean capaces de interpretar si se les
aade la forma de hacerlo.

Un ejemplo podra se algo como esto:

<div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-

shields="50%" data-x="30" data-y="10" data-z="90">
<button class="fire"
onclick="spaceships[this.parentNode.dataset.shipId].fire()">Fire</button>
</div>

Y, hasta aqu lo que corresponde a los atributos globales ahora queda comenzar a
tratar los elementos / tags que se pueden usar en HTML 5 que no son pocos y
algunos llevan muchsimas nuevas funcionalidades que vale la pena analizar.

HTML 5: cmo es la cabecera de una pgina

Fecha: 16 Mayo 2010 - Comentarios: 2 comentarios - Etiquetas: HTML.

Hoy comienzo un repaso de las nuevas etiquetas del HTML 5, aunque tambin
hablar, claro est de las etiquetas que ya existen, y si han cambiado o no con
respecto a las versiones anteriores. Y como no me quiero enrollar mucho, porque
no es lo que toca, voy a empezar con algunos de estos tags
doctype
Para empezar cualquier pgina
toca el doctype. La verdad es
que histricamente este elemento
nunca ha tenido un buen
acompaamiento, ya que haba
que indicarle algunos parmetros
y versiones que normalmente
nunca se ajustaban a la realidad.
Ahora, con el HTML 5 esto queda
reducido a una nica opcin muy
simple:

<!DOCTYPE HTML>

Y ya est no hay que indicar si

es HTML 4, XHTML, si es
estricto, ni versin ni nada de
nada simple. Este elemento no
hay que cerrarlo ni nada,
simplemente ser la primera
lnea de cada una de nuestras
pginas.

html
El siguiente elemento que hay que revisar es el html. Este es el elemento que ha de
mantener toda la pgina, y que tendr dentro el resto de elementos.

<html> [...] </html>

Entre los parmetros que puede incorporar estn los atributos globales y el
manifest. Este atributo es el que se utiliza para el sistema de cach propio del
navegador (lo que era el Google Gears en su da y por lo que se estn empezando a
dejar de usar y a aplicar la cach propia del HTML 5). Pero el tema de cachear
contenidos ya lo tratar ms adelante.

head
El siguiente elemento es el del head. Este es el elemento que contiene meta-
informacin de la pgina y es el primer elemento que debemos encontrar en la
pgina. Permite tener los atributos globales, aunque la verdad es que no
recomiendo ponerle ninguno.

<head> [...] </head>

Aunque en teora no tiene porqu tener elementos dentro obligatoriamente, s que
es muy recomendable que siempre incluya el elemento title.

title
Para mi uno de los elementos ms importante de cada una de las pginas de un
sitio es el elemento title. Por un lado porque es un elemento nico, es decir, slo
puede haber uno por pgina, y tambin, de cara a SEO, es muy importante que est
bien construido.

Este elemento slo puede incorporar texto (es decir, no puede tener cdigo HTML
ni nada parecido). Tambin se ve afectado por cualquiera de los elementos
globales.

<title>Aqu va el ttulo de la pgina</title>

base
Uno de los elementos que siempre me ha intrigado es precisamente el base. Mucha
utilidad no acabo de verle, aunque si est y se ha mantenido por tantos aos es por
algo. En SEO siempre digo que es mejor que todos los enlaces de un sitio sean
completos, pero en caso de que sean relativos, es bueno indicarles que sean
relativos en base a algo. Y esa base es este elemento, la direccin a partir de la que
se han de calcular el resto de enlaces relativos de la pgina.

<base href="http://www.example.com/news/index.html">

Al igual que el title, slo puede haber uno por pgina, y tambin acepta los
atributos globales adems de dos ms, que son el href y el target.

El parmetro href ha de incluir la direccin URL desde la que se han de tomar en

consideracin los enlaces relativos de la pgina. El target, s, es lo que pensis es
lo que permite que cualquier enlace de la pgina se abra de distintas formas:
_blank (ventana nueva), _self (ella misma), _parent o _top. En el caso de estos dos
ltimos, hoy en da ya no tiene muchos entido usarse ya que los frames y
similares no se usan. El self tampoco debera de usarse ya que si no pones nada
ya es la misma ventana. Personalmente el blank tampoco lo usara, sobretodo
teniendo en cuenta que hay muchos dispositivos mviles que ya no tienen ventanas
nuevas

link
Uno de los elementos que puede dar mucho juego es el link, bsicamente porque
nos puede ofrecer elementos alternativos u otros recursos relacionados con esa
misma pgina. El ejemplo ms habitual es el autodiscover de los feeds o los
ficheros CSS externos.
 <link rel="alternate" href="/fr/html" hreflang="fr" type="text/html"
title="French HTML">

Entre los elementos que puede incorporar est el href (que hace referencia a la
direccin URL del otro elemento), el rel (que indica el tipo de relacin -hay un
montn de posibilidades-), el media (que indica el soporte donde se ha de mostrar
esta direccin -hay varios soportes-), hreflang (que es el idioma de destino de la
direccin alternativa), el type (que indica me MIME-type de la direccin final) y el
sizes (que slo se usa en caso de que la direccin sea un icono).

Otro elemento que se puede poner, en el caso de que sea un stylesheet (hoja de
estilo) es disabled, que impedira acceder a travs de sistemas externos (tipo
JavaScript) a hacer cualquier cambio en los elementos de ese CSS. El title suele ser
simplemente informativo, excepto en el caso de los CSS, donde el ttulo define los
distintos CSS alternativos.

meta
Quiz los meta necesiten un captulo entero. Y es que histricamente la gente
decide poner todos los que se encuentra en cualquier sitio web, aunque no son
siempre vlidos. Esta etiqueta ofrece informacin de elementos que puede leer la
mquina y que no tiene porqu ser interesante para el usuario en s mismo. Son
meta-informacin que no encontramos en el resto de elementos del head.

Como en el resto de ocasiones, tienen los atributos globales y unos ms que son:
name (es el nombre del concepto a tratar), content (es el contenido que le damos a
ese valor). Tambin tenemos el http-equiv (que hace referencia a cabeceras HTTP)
y el charset (que indica la codificacin de caracteres del elemento).

Los valores habituales que puede tener un meta son:

application-name: se usa en el caso de que el contenido no sea una pgina web, por
lo que, en general, no se usar.

author: es el nombre de la persona o empresa creadora del contenido.

description: slo ha de haber uno por pgina y es una breve descripcin de lo que
encontraremos en ella; recomiendo que tenga entre 125 y 175 caracteres, que es lo que
aparecer en los resultados de los buscadores.

generator: es el programa que ha creado la pgina y que, personalmente,

recomiendo no incluir.

keywords: una serie de conceptos separados por comas que indican qu tendra
que encontrar un usuario en la pgina; personalmente recomiendo entre 4 y 6 conceptos.
 A parte de estos, que son los que estn definidos en el estndar, podramos incluir
meta-extensiones si encontramos alguna especfica que cuadre con nuestro sitio.
Algunos ejemplos pueden ser:

robots: es el que se utiliza para bloquear a los robots de bsqueda.

audience: una lista de palabras que definiran el tipo de personas que s o no

pueden ver los contenidos.

Como antes comentaba, est el http-equiv que hace referencia a algunas

cabeceras

content-language: define el idioma que tendr la pgina en general.

content-type: es el tipo de contenido MIME que tendr la pgina; habitualmente

text/html.

default-style: establece cul es la hoja de estilos CSS por defecto.

refresh: indica que esa pgina ha de refrescarse cada N segundos. Si se le indica

despus una URL se actualizar hacia esa direccin.

<meta http-equiv="refresh" content="20; URL=page4.html">

Adems de estos, tambin se propone el PICS-Label que dara informacin para la

proteccin de menores.

Para acabar, existe un meta especial (que antes se indicaba de una forma distinta y
ms compleja) que es la de la codificacin de la pgina. Ahora existe el charset
directamente que quedara algo como:

<meta charset="utf-8">

style
Sin duda hoy en da es inconcebible el HTML sin los CSS u hojas de estilo. Y como
tal es as, los CSS tienen su propio sistema de incorporarse al cdigo HTML. He de
reconocer que no recomiendo el uso del elemento style, ya que lo mejor es
incluirlo de forma externa con un link y que de esa forma quede cacheado pero es
decisin de cada uno.

Este elemento tiene varias opciones a parte de las globales, que son type
(habitualmente ser text/css), media (como ya he comentado en el punto
anterior) y scoped que es booleano y que si no se indica los estilos son para todo el
documento, y si se indica slo es aplicable al subrbol donde se encuentra.
Tambin se puede usar el disabled al igual que ya he explicado anteriormente,
bloquea el acceso externo. Por defecto no hace falta poner el type ya que se da por
hecho.

<style>
body { color: black; background: white; }
em { font-style: normal; color: red; }
</style>

No voy a entrar en lo que al CSS se refiere, ya que eso es otro mundo casi
interminable

script
Este es otro de los elementos que me ha sorprendido encontrar incrustado en el
HTML 5. La verdad es que los script, y sobre todo el JavaScript siempre se haba
tratado como algo externo al HTML, pero en esta versin se podra decir que es
bsico que el JavaScript funcione como el CSS de una forma casi imprescindible.

Los script, al igual que los CSS, pueden encontrarse en el propio cdigo o externo.
Lo ideal es que la mayor parte de funciones se encuentren externalizadas, y que
slo el cdigo que vaya cambiando se encuentre en el propio sitio.

De esta forma encontraremos la opcin de cargar contenido externo simplemente

indicando la direccin correspondiente mediante el atributo src (que indica una
direccin URL):

<script src="game-engine.js"></script>

Adems de este parmetro podemos encontrar unos cuantos ms como el type que,
si no se indica es el MIME-type text/javascript. De la misma forma que en otros
elementos encontramos el charset que si no se indica es el general de la pgina.

A parte de estos, tenemos 2 atributos booleanos que son async y defer. Estos
elementos slo pueden aparecer siempre y cuando el src est presente. El elemento
async indica que este proceso ha de ejecutarse de forma asncrona, por lo que se
cargar tan pronto como pueda, pero sin prisas en el caso en el que se ponga
este elemento, tambin ha de aparecer obligatoriamente el defer. En este caso, si
slo aparece el defer, el script se ejecutar una vez se haya parseado el resto de la
pgina. En definitiva: si se pone defer, el script se ejecutar una vez se acabe de
cargar la pgina, pero en serie, uno tras otro. En caso de estar el async, permitir
ejecutarlos en paralelo, varios a a la vez.

Como detalle a tener en cuenta, es que el language ya ha quedado en desuso, ya

que el type marca el lenguaje de programacin utilizado.
Y, adems del script, tenemos el noscript. Este elemento tiene dos opciones,
aunque se resumen en una: si el script anterior no se puede ejecutar, se ejecutar lo
que se incluya en este bloque. Y es que los usuarios habitualmente tienen la
posibilidad de desactivar lenguajes como JavaScript en su navegador por
seguridad.

Y hasta aqu lo que corresponde a la cabecera de una pgina. Los cambios son
bastante mnimos con respecto a las versiones anteriores, y hay que reconocer que
el hecho de que en muchos casos se tome por defecto muchos de los parmetros
hacen que se facilite mayoritariamente el uso.

HTML 5: cmo estructurar, ahora, una pgina

Fecha: 20 Mayo 2010 - Comentarios: 8 comentarios - Etiquetas: HTML.

Hace unos das os explicaba algunos de

los cambios genricos en el HTML 5, y despus cmo ha de ser la cabecera del sitio.
Pero si una cosa ha cambiado mucho en cuando al diseo de las distintas pginas
del sitio es la introduccin de lo que se puede llamar los tags de la estructura web.

Hace unos 10 aos, cuando se quera hacer una pgina, te podas plantear el uso de
los frames que eran la forma ms sencilla de no tener que repetir y repetir
infinidad de veces el mismo cdigo. Con la entrada de los lenguajes de
programacin esto comenz a variar y se usaban tablas para dar formato al sitio
La aparicin de los CSS hizo que los div se convirtieran en la mejor opcin para
formatear los sitios, y ahora llega el HTML 5 que incluye unas nuevas etiquetas que
solucionan todos estos procesos genricos.

Adems, estas nuevas etiquetas, si lo miramos desde el punto de vista SEO, dan y
quitan peso a algunas secciones de las pginas que costaba analizar. Mucho se ha
hablado de la indexacin por parte de Google del blogroll, que con estos nuevos
tags se eliminaran.

De una forma muy resumida, tendramos que:

Estructura bsica con HTML 3

Estructura bsica con HTML 4
Estructura bsica con HTML 5

Y es que los nuevos tags, a parte de los que se muestran en la imagen, van a facilitar
mucho la estructuracin de los sitios. As que, una vez ms, comencemos con las
etiquetas dedicadas a dar formato a los sitios:

body
Aunque el elemento body no se utiliza directamente en la maquetacin de un sitio,
creo que es bastante claro que es el mayor contenedor de informacin de todos, y
por eso lo he acabado poniendo en estas explicaciones. Siempre he dicho que el
head recoge la informacin que los usuarios no ven y que el body representa todo
lo contrario, el contenido visible de la pgina Este elemento no varia en nada a
sus versiones anteriores, aunque s es cierto que se podrn hacer ms cosas sobre
l, pero eso no es lo que toca ahora (ya explicar en entradas posteriores).

header
Este s que es uno de los nuevos elementos. Y es que header va a dar mucho de s,
y aunque muchos simplemente lo usarn para indicar el bloque contenedor de la
cabecera (bloque superior de informacin) que suele haber siempre en las pginas,
tambin se puede usar en otros puntos del sitio.
 En principio se presenta como un contenedor que agrupa elementos introductorios
o un conjunto de informacin referente a lo que a continuacin se pondr.

De forma resumida, yo hara dos grandes usos de este elementos:

Cabecera de la pgina web, donde se incluiran el logo, el men de navegacin y

esas cosas tpicas de la cabecera

Encabezado de algunos bloques de informacin. Por ejemplo, si tuvieramos un

contenido que es la ficha de un libro, pues en este header incorporaramos como bloque el
ttulo del libro y una pequea ficha tcnica, como encabezado del resto de informacin.

De todas formas, no creo que mucha gente acabe usando este segundo elemento
como norma general, por lo que lo dejara como principal elemento de la primera
opcin, como cabecera del sitio.

footer
El elemento footer va a ser muy parecido al header anterior, aunque quiz s que
tenga ms utilidades que no el otro Bsicamente se ha incluido como agrupador
de elemento al final de otro Por norma general los sitios web tienen un pie de
pgina en el que se indican datos legales y similares, y esta podra ser la principal
funcin, aunque no est pensado para que sea la nica.

De la misma forma que el otro, hay dos funciones principales para el elemento:

Pie de pgina del sitio, donde se encuentran los datos legales y esas cosas

Pie de bloque de contenido, donde incorporar informacin como la fecha, enlaces

relacionados, nube de tags y similares

Como digo, aunque el segundo caso puede que se utilice en alguna ocasin, la
principal funcionalidad se le dar a la primera de ellas.

article
Y ahora llegan las curvas, as que agrrense fuerte a la silla. Y es que el nuevo
elemento article va a revolucionar los contenedores y el SEO. Este elemento viene
a ser el contenedor de lo que es importante en la pgina. Puede haber varios y es
el agrupador de lo que vendra a ser lo indexable por un buscador lo
importante, vaya

De todas formas, aunque al principio pareca que el elemento section iba a ser el
que agrupase los contenidos, he llegado a la conclusin por los ejemplos que est
lanzando la W3C que no es as, que el gran contenedor de informacin til es el
article.
Para hacernos una idea bsica, una pgina tendra este formato:

<body>
<header>...</header>
<article>...</article>
<article>...</article>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>

Esto dara a entender que hay 3 bloques de informacin principales en el sitio, que
son los contenidos que el usuario ha de contemplar, adems de una cabecera, un
men lateral y un pie de pgina Que conste que este ejemplo es muy bsico
luego intentar poner algo ms trabajado, al final del artculo, cuando haya
explicado todos los elementos.

Dentro del article encontraramos elementos como un header, un footer y varios

section, que comentar en un momento

aside
Otro de los nuevos elementos el aside viene a ser la barra lateral de toda la
vida. Digamos que, por norma general, este bloque incluir la zona de navegacin
del sitio web, las categoras, opciones o como queramos llamarlo

Como he puesto en los grficos anteriores, vendran a ser el contenido que, pgina
a pgina dentro del sitio web se repite junto a la cabecera y el pie) e intuyo que los
buscadores le darn menos peso a este bloque ya que notarn que es contenido
duplicado y que no tiene utilidad a la hora de posicionar.

Y la verdad es que poco ms a decir de este elemento simplemente que es un

agrupador y que estar lleno de sections.

section
Y aqu est la madre del cordero. El nuevo elemento section viene a ser el <div
id="nombre"> que llevamos usando aos y aos.

Este elemento se perfila como el nuevo div agrupador de cosas, ya sean muy
grandes o muy pequeas. Digamos que una pgina de noticias tendra un gran
article con un primer section especial, que sera el header (o el hgroup que luego
comentar), luego tendra otro gran section que vendra a ser el artculo en s, y
unos cuantos ms como podran ser los elementos relacionados, fichas
relacionadas, adjuntos como imgenes o vdeos en fin, que nos vamos a hartar de
usar los section para cualquier agrupacin o distincin de elementos.
<article>
<header>...</header>
<section class="noticia">...</section>
<section class="relacionados">...</section>
<section class="multimedia">...</section>
<footer>...</footer>
</article>

Como idea bsica creo que este ejemplo resume bsicamente lo que quiero
explicar

address
Uno de los elementos que, ideolgicamente no ha variado, pero que personalmente
creo que va a tomar muchsima relevancia a partir de ahora es el address. Y es que
hasta ahora en este elemento se indicaban direcciones postales y cosas de este
estilo pero ahora la indicacin del W3C ha variado y nos piden que no incluyamos
esa informacin, sino que se utilice como elemento aadido (como un section
especial) en el que se den datos de contacto del sitio entero o del article en
cuestin.

Como digo, es curioso que se haya dado un giro a este elemento, aunque supongo
que por un tema de derechos de autor, sumado a las mejoras en cuanto a
geolocalizacin y similares parece tener mucha ms lgica que antes, que casi no se
utilizaba para nada

nav
Dentro de unos aos, cuando ejerza de abuelo contador de batallitas, podr decir
que este elemento es el que provoc un cisma en el mundillo SEO. Aqu estamos, el
nav, el elemento que separ a los incondicionales del pagerank, del link-juice, del
link-builing y de todas esas cosas (a mi parecer sin sentido) de los que no piensan
tanto en los enlaces y s en los contenidos.

Este elemento es el que agrupa los enlaces. Y se vende como eso, un section
especial para los enlaces, tanto salientes como internos. Aun as, no todos los
enlaces han de estar agrupados en este elemento, sino slo aquellos grandes
bloques que incluyan enlaces, sobre todo aquellos habituales que incluyen los
trminos y condiciones, otras secciones del sitio.

Y aunque probablemente aqu habra que acabar este articulo sobre los elementos
que agrupan otros elementos, es curioso que hayan incluido los encabezados como
elementos contenedores y no de formato. Esto dice ms de lo que parece en cuanto
a la importancia de estos elementos.
h1 h6
Estos elementos son los ttulos de las diferentes sections y cada h tiene un peso /
ranking especfico en base al nmero que tiene, del 1 (el ms alto) al 6 (el ms
bajo). Hay que recordar que por los estndares de usabilidad y nosequms, de h1
slo puede haber uno por pgina, para que no salten las alarmas.

hgroup
Este es otro elemento nuevo, aunque el hgroup no acabo de entenderlo, ya que
dudo que se utilice con mucha frecuencia y tambin dudo de su utilidad en todos
los sentidos.

En principio el elemento se define como un agrupador de h. Esto significa que los

hgroup slo pueden incluir elementos de encabezado. eso s, su funcionalidad
mxima es que, en cada bloque de encabezados, el ranking se resetea teniendo pero
uno el de menor valor. En otras palabras, que tendramos algo como:

<hgroup>
<h1>...</h1>
<h2>...</h2>
</hgroup>
...
<hgroup>
<h2>...</h2>
<h4>...</h4>
</hgroup>

El primero de los grupos tiene 2 cabeceras, el primer h1 tendra un peso de h1, y el

h2 tendra un peso de h2; pero en el segundo bloque, el h2 tendra un peso de h1 y
el h4 tendra un peso de h2 Al menos eso es lo que la teora dice pero, vuelvo a
decir, no s hasta que punto tiene mucho sentido utilizar este elemento.

Y ahora s, para acabar vamos a hacer un repaso de estos elementos de los que he
ido hablando ahora, y para ello os dejo un ejemplo de pgina, que no deja de ser un
HTML al que hay que ver el cdigo fuente, hecho exclusivamente en HTML 5.
NOTA: el cdigo no est diseado, por lo que si se abre en un navegador se ver
como mucho texto plano, si orden aparente en resumen, que slo sirve para ver
el cdigo fuente).
HTML 5: los bloques de contenido textual
Fecha: 22 Mayo 2010 - Comentarios: 0 comentarios - Etiquetas: HTML.

Hace unos das os comentaba los

bloques genricos que contienen la estructura de las pginas en HTML 5, y ahora
toca los bloques que contienen texto, y su forma de organizarse

Parece que no, pero aunque muchos elementos de organizacin de textos son muy
parecidos, no se han de utilizar para las mismas cosas y el objetivo de esta
entrada es ver esos elementos y los pocos nuevos que se han aadido
comenzamos?

p
El elemento p es sencillo de definir: es un pargrafo. Se podra decir que es el
elemento bsico a la hora de escribir un contenido Y poco ms a decir

hr
El hr histricamente se ha utilizado como barra. Su uso real es el de separar
prrafos o contenidos temticos, de forma que si un artculo tiene varios temas, se
deberan separar con este elemento.

pre
El elemento pre tampoco ha variado excesivamente, aunque s que creo que va a
tomar algo ms de importancia que antes. Bsicamente se utiliza para mostrra
texto preformateado, de forma que lo que se indique dentro d este bloque
aparecer tal y como se ponga. Algunos ejemplos para lo que podra servir son una
versin plana de un correo, cdigo fuente de un ordenador, en el que se
mantendr la estructura, texto ASCII

Un detalle interesante es que este elemento debera ir acompaado de otros

elementos que indican el tipo de texto que es. Por ejemplo, si es cdigo informatico,
usaramos el code algo como <pre><code>...</code></pre> o de otros elementos
como samp y kbd.

blockquote
Cuando vayamos a citar un fragmento utilizaremos el elemento blockquote. Este
elemento es para citas bastante grandes, sobretodo que se encuentran el otros sitios
web. Y es que para ello dispone de un atributo llamado cite en el que se indicar la
procedencia del texto.

De esta forma, tendramos algo como esto:

<p>Esto es un fragmento de <i>un ejemplo</i>:</p>

<blockquote cite=http://www.example.com/ejemplo.html>El perro de San
Roque no tiene rabo,
<br>porque Ramn Rodrguez se lo ha cortado</blockquote>

ol
Uno de los elementos que tena algunas papeletas para desaparecer (y ser
sustituido por el propio ul con algn atributo) era el ol, las listas ordenadas.
Bsicamente son los listados que van numerados de alguna u otra forma.

Este tipo de listado tiene dos posibles atributos, el start, que lleva como parmetro
el primero de los nmeros por los que ha de empezar a contar y un segundo
parmetro, el reversed, que simplemente indica que el listado es inverso. Un
ejemplo sencillo sera:

<ol start="3" reversed>

<li>...</li>
<li>...</li>
<li>...</li>
<ol>

ul
Al igual que las listas ordenadas, el ul son las listas desordenadas. El
funcionamiento es el mismo que el de las ordenadas, eso s, no tiene ningn tipo de
parmetro. El resto es igual
li
El li es la lista de elementos (list items) y representa cada uno de los elementos
tanto de las listas ordenadas como las desordenadas. En el caso de las listas
ordenadas s que pueden llevar un atributo value. Este atributo puede forzar el
nmero que ha de aparecer en el listado.

dl
El dl es una lista descriptiva. Este es un elemento contenedor de un listado que
siempre tiene dos elementos, uno primero que es el nombre dt y el segundo, los
valores dd.

Este contenedor permite tener varias combinaciones de elementos, es decir,

podriamos tener varios nombres con un valor, un nombre con varios valores o
varios nombres con varios valores

Este elemento no ha de utilizarse en caso de querer mostrar un dilogo, ya que para

eso hay otros elementos ms adecuados.

<dl>
<dt>Actualizar cada</dt>
<dd>60s</dd>
<dt>Autores</dt>
<dt>Editores</dt>
<dd>Joe Black</dd>
<dd>Black John</dd>
</dl>

dt
Como ya comentaba antes, el dt es el elemento que define la parte del nombre de
un listado descriptivo.

dd
Y el dd es el elemento que da la descripcin, definicin o valor en la lista.

figure
Otro de los nuevos elementos que puede dar mucho juego va a ser figure, sobre
todo porque va a darle vidilla a ilustraciones, diagramas, fotografas, cdigo y es
que este bloque permitir que se trate la informacin contenida en l de una forma
distinta, a modo de aadido o apndice suplementario a la informacin general.

Este elemento tambin es contenedor, y puede ir acompaado del siguiente, el

figcaption.

El ejemplo ms visual y claro de esto es el de una imagen a la que, debajo, le

queremos aadir una descripcin sobre lo que hay en la imagen, a modo
descriptivo. De todas forma,s como deca, no ha de ser una imagen, puede ser un
vdeo, un cdigo o cualquier otro elemento.

<figure>
<img src="imagen.jpg" alt="Cuadro muy interesante de unas bailarinas...">
<figcaption>Las bailarinas de la calle Mayor</figcaption>
</figure>

figcaption
El elemento figcaption representa la leyenda del contenido de un figure.

div
Es curioso que haya tenido que dejar el div para el final de todo. Pero es que este
tag tan utilizado ya no significa nada. Simplemente es un contenedor que puede
tener hijos y agruparlos, pero nada ms

Como ya coment hace unos das, hasta hace bien poco este elemento ha sido el que
nos ha permitido crear los sitios web en los ltimos aos de una forma masiva, pero
con la nueva versin queda reducido a un elemento secundario que ha sido
sustituido por otros tantos.

Su uso ser similar al del section aunque la gran diferencia, probablemente es que,
si ese se usa para agrupar bloques de elementos, este se debera usar para agrupar
bloques de contenido ms bien textual.

Hay que tener en cuenta tambin que este elemento permite el uso de atributos
globales, por lo que su combinacin con title y lang podran tener un uso
mayoritariamente semntico (de ah que haya pasado a la lista de elementos de
contenido textual y haya salido de los blqoues de contenido estructural).

Y, hasta aqu la explicacin de hoy sobre HTML 5. Ahora que ya tenemos las
estructuras tanto generales como textuales slo queda comenzar por cada uno de
los elementos que van a dar vidilla a nuestro sitio web.

HTML 5: enlaces que cobran vida

Fecha: 25 Mayo 2010 - Comentarios: 2 comentarios - Etiquetas: HTML.
 Si hay un elemento que hace que
Internet sea lo que es son los hipervnculos, los enlaces o, en definitiva en elemento
anchor. Y es que la importancia de los enlaces en la red de redes no es trivial, ya
que es lo que hace que Internet se distinga de la mayor biblioteca del mundo: el
poder saltar de una informacin a otra sin necesidad de ir al final del libro y buscar
en la bibliografa.

Los enlaces, hasta ahora, simplemente eran eso, enlaces. Poco a poco en los ltimos
aos se han ido creando elementos suplementarios, pero que al no ser estndar
cada uno haca un poco lo que le daba la gana. Y digo cada uno haciendo
referencia a los seres humanos, a los navegadores y a los robots.

Con HTML 5, los enlaces han variado mucho. Y, aunque siguen siendo elementos
que permiten saltar de una pgina a otra, tienen muchos atributos que hacen que
cada enlace tenga un significado especial y diferente.

href
Se podra decir que todo enlace ha de ir acompaado de su href, que no deja de ser
la direccin URL a la que ha de apuntar. En caso de tenerlo, que es lo habitual, el
enlace apuntar hacia ese lugar. Pero, en caso de no tenerlo, s que se puede seguir
usando el elemento a. En este caso, su significado viene a ser que ah debera
haber un enlace hacia un sitio, que es importante, que es relevante, pero que
todava no existe.

En el caso de que href no est, otros atributos como target, rel, media, hreflang o
type tampoco tienen sentido.

<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/noticias/">Noticias</a></li>
<li><a>Ejemplos</a></li>
 </ul>
</nav>

Otro detalle importante es que el elemento a no slo se utiliza para enlazar un

simple texto, sino que permite otros elementos contenedores que seran enlazables.
Un ejemplo claro donde se vera, podra ser el de un anuncio textual.

<aside class="advertising">
<h1>Publicidad</h1>
<a href="http://ad.example.com/?adid=1929&pubid=1422">
<section>
<h1>Mellblomatic 9000!</h1>
<p>Turn all your widgets into mellbloms!</p>
<p>Only $9.99 plus shipping and handling.</p>
</section>
</a>
<a href="http://ad.example.com/?adid=375&pubid=1422">
<section>
<h1>The Mellblom Browser</h1>
<p>Web browsing at the speed of light.</p>
<p>No other browser goes faster!</p>
</section>
</a>
</aside>

target
Siempre se ha podido abrir un enlace en una ventana nueva, en un marco o
similar a lo largo del tiempo esos valores se han ido retocando y hoy en da
quedan los siguientes:

_self: es lo mismo que no poner nada, y bsicamente lo que hace es abrir el enlace
en la misma ventana que se encuentra el documento actual.

_parent: en el caso de que haya marcos o secciones dentro del documento

principal, con este tipo de enlaces se va al padre del documento actual

_top: parecido al _parent, pero en este caso s que va al mximo de los padres.

_blank: bsicamente abre una ventana nueva.

media
El caso de los media es un poco complejo, ya que no hay ningn sitio en el que se
hayan definido todos los elementos posibles. Los principales que he encontrado
como estndar de HTML 4 son los siguientes, aunque parece que para el HTML 5
podra haber algunos ms:

screen: para pantallas.

 tty: para terminales, teletipos o elementos porttiles de ancho fijo.

tv: para televisin de baja resolucin.

projection: para proyectores.

handheld: para dispositivos porttiles con pantallas pequeas y poca

conectividad.

print: para impresin.

braille: para dispositivos tctiles de braille.

aural: para sintetizadores de voz.

all: para cualquier dispositivo.

Otros elementos que pueden funcionar son 3d-glasses (para gafas en 3D),
resolution > 90dpi (para resoluciones menores de, en este caso, 90dpi)

hreflang
El atributo hreflang representa, simplemente de forma informativa, el idioma en
el que se encuentra el recurso (el contenido de destino de la URL) a la que hay que
seguir. Hay que tener en cuenta que los navegadores han de usar la informacin de
idioma de la pgina de destino, y no la metainformacin que da este elemento. En
definitiva, que no s porqu est esto aqu al menos no todava.

<a href="/" hreflang="ca">Inici</a>

type
En caso de no enlazar a una pgina, sino de enlazar a algn tipo de fichero de
descarga o similar es interesante utilizar este atributo. Y es que el type es bastante
significativo, en cuanto en tanto sirve para indicar el MIME-type del contenido de
destino. Por defecto es el text/html, pero si por ejemplo enlazamos a un fichero de
texto plano podramos usar text/plain.

<a href="leeme.txt" type="text/plain">LEEME</a>

rel=alternate
Cuando un enlace lleva este atributo, hace referencia al documento actual pero en
otro formato, es decir, que es el mismo contenido pero en vdeo, audio, un PDF,
una versin para imprimir

Normalmente ir acompaado de algn otro atributo para especificar la distinta

versin a la que representa. Por ejemplo, si va acompaado del hreflang indicara
que es el mismo documento en otro idioma, o si va acompaado del type indicara
que est en otro formato.

<a rel="alternate" type="application/pdf" hreflang="ca"

href="/catalan.pdf">versin en cataln [pdf]</a>

rel=archives
Este tipo de enlace indica que la direccin URL apunta a una pgina histrica,
una pgina donde se recopila informacin o material antiguo pero que ha de estar
disponible.

A parte de usar rel=archives, tambin se puede usar rel=archive por razones

histricas.

<a rel="archives" href="/2010-02/">febrero de 2010</a>

rel=author
Cuando existe un enlace con este atributo cerca de un article, en enlace hace
referencia al creador / autor del contenido del mismo. Ese enlace podra ser
tranquilamente un enlace hacia una direccin de correo electrnico (con un
mailto:).

Por razones histricas, tiene el mismo efecto el rev=made.

<a rel="author" href="/nosotros/javier/">Javier</a>

rel=bookmark
Este atributo hace referencia a un enlace permanente. Esto viene a ser aquellas
direcciones URL que no cambiarn, por ejemplo, en listados de resultados o
similares. En principio hace referencia a un article cercano.

rel=external
El atributo external hace referencia a que el enlace hace referencia hacia una
direccin que no es parte del documento. Es decir, todos los enlaces externos a
nuestro sitio deberan ser de este estilo.

rel=help
El atributo help hace referencia a un enlace en el que se da informacin de ayuda al
documento actual, de forma que queden relacionados por este vnculo.

rel=license
En el caso de license se hace referencia al documento que da informacin de los
derechos sobre la mayor parte del contenido de la pgina. Este elemento no
distingue entre el contenido principal o un subcontenido, por lo que se ha de
especificar claramente por parte del creador.

Por razones histricas, tambin se puede usar rel=copyright.

rel=nofollow
Podra haber desaparecido pero el nofollow creado por Google ha llegado para
quedarse, algo normal teniendo en cuenta que el HTML 5 tiene una gran influencia
por parte del gigante de Mountain View.

El atributo nofollow vara de su original por Google y se establece como un enlace

que indica que no tiene nada que ver con el autor o editor de la pgina actual, o que
ese enlace hace referencia a un documento principalmente publicitario o con
contenido comercial en el que hay una relacin entre las dos partes.

rel=noreferrer
Esta es una de las nuevas aportaciones ms interesantes de los enlaces en HTML 5,
y es que con este parmetro se podr indicar que los enlaces no incluyan un
referrer dentro de las cabeceras HTTP.

Cuando un usuario navega de una pgina a otra, la pgina de destino recibe un

parmetro que es la pgina desde donde se viene, y con este elemento esa
informacin desaparecera.

rel=search
Otro de los elementos que puede ser muy interesante en muchos sentidos es el del
search. Este tipo de enlace har referencia a pginas y/o contenidos que
simplemente sean resultados de bsqueda. Habitualmente hay pginas de este
estilo que slo se utilizan para hacer los sitios ms rastreables, y que en el caso de
los robots de bsqueda tal vez no sea necesario posicionar, por lo que este elemento
ayudara a ello.

rel=sidebar
Los elementos que estn en un plano secundario, cmo son los enlaces que podemos
encontrar en un men de opciones secundarios deberan llevar este enlace.
Bsicamente lo que har es abrir los contenidos en una navegacin secundaria y as
no molestar a los contenidos primarios.

La verdad es que pensando un poco en futuro no acabo de tener presente cmo

reaccionarn los navegadores y rastreadores ante este tipo de enlaces. habr que
ver el uso que se le comienza a hacer y tomar decisiones.
rel=tag
Este tipo de enlace hace referencia a una palabra clave (tag) que hace referencia al
documento actual en el que se encuentra. Tambin hay que dejar claro que esto no
ha de utilizarse para las nubes de tags.

Haciendo un poco de revisin mental, vendra a ser, en un blog, las palabras clave
que se suelen poner al final de un artculo, que s que representan al artculo en s,
pero, claro est, que una nube de tags no representa al actual sino a todo el sitio.

rel=index
Este tipo de enlace es un indicador de la situacin con respecto al resto del sitio. En
el caso del index hace referencia a que el documento es parte de una estructura
jerrquica y que este enlace es el inicio de todos ellos.

De forma histrica este se ha podido llamar top, contents o toc.

rel=up
Este es otro de los indicadores se situacin dentro de un rbol jerrquico. En este
caso, el enlace que se indica significa que est a un nivel por encima del documento
actual.

<nav>
<p> <a href="/" rel="index up up up">Main</a>
<a href="/products/" rel="up up">Products</a>
<a href="/products/dishwashers/" rel="up">Dishwashers</a>
<a>Second hand</a> </p>
</nav>

rel=first
Aunque en este caso no va a indicarnos un rbol jerrquico, si que este elemento
nos va a indicar la forma de navegar del sitio, por donde empezar y como seguir
En el caso de first nos va a indicar el inicio de una secuencia de documentos.

Por razones histricas tambin se podrn ver begin y start.

rel=last
Y de la misma forma que hay un principio con first, tenemos un final con last que
indica el final de la secuendia de documentos relacionados.

rel=next
Al igual que en los casos anteriores, este tambin indica una secuencia de
documentos, y en el caso de next indica el siguiente documento a tener en cuenta.
 rel=prev
Y como no poda ser de otra manera, con prev tenemos relacionado el elemento
anterior al actual.

otros rel="
Hay otra serie de elementos que estn en proceso de desarrollo, o ya han sido
aceptados. Algunos de ellos son:

acquaintance: enlace que representa que el responsable del documento actual

conoce a la persona del documento destino.

child: enlace que representa al hijo de la persona del creadora del documento
actual.

co-resident : enlace que representa que el creador del documento de destino

reside en el mismo domicilio que la del documento de destino.

co-worker : enlace que representa que el creador del documento de origen es

compaero de trabajo del creador del documento de destino.

colleague: enlace que representa que el creador del documento de origen es colega
del creador del documento de destino.

contact: indica que el creador del documento de destino es un contacto del

documento origen.

crush: la persona del documento de origen se siente atraido por la persona del
documento destino.

date: la persona del documento de origen est saliendo con la persona del
documento destino.

friend: la persona del documento origen es amigo de la persona del documento

destino.

kin: la persona a la que se hace referencia es parte de la familia lejana del origen.

me: la persona del documento origen es la misma que la del documento destino.

met: la persona del documento de origen ha cumplido en lo que se refiere a la

persona de destino.

muse: la persona del documento de destino es inspiracin para la persona del

documento de origen.

neighbor: la persona del documento de origen y la de destino viven cerca / son

vecinos.
 parent: la persona a la que se hace referencia es uno de los padres de la persona de
origen.

sibling: la persona a la que hace referencia el documento de destino es hermano de

la de origen.

spouse: la persona a la que hace referencia el documento de destino es cnyugue

de la de origen.

Y la verdad es que con respecto a los enlaces, poco ms a decir sin duda es uno de
los elementos que ms juego va a dar en el HTML 5, y es que la combinatoria que
permite es bastante grande.

HTML 5: dndole color a lo que escribimos

Fecha: 28 Mayo 2010 - Comentarios: 0 comentarios - Etiquetas: HTML.

Si por algo se invent el HTML en su da fue para

hacer markup de los textos, lo que, en el fondo, significa que se invent para
hacer que los textos de la red de redes tuvieran una forma de darles color, formato
y, sobretodo, vinculacin.

Pero como ya he hablado de la vinculacin de los elementos, ahora toca hablar de

los elementos que hacen que podamos tener negritas, cursivas, y una serie de cosas
que cualquier texto debera poder tener.

em
Aunque muchos asocian el elemento em a las cursivas, no es as. Habitualmente se
representa como una cursiva pero el elemento em bsicamente lo que implica es
dar nfasis a una palabra para que, dentro de una frase, se haga un mayor esfuerzo
en ello. Es interesante porque este elemento es anidable, es decir, podemos poner
un em dentro de otro em para as enfatizar aun ms algo.

Es habitual que en una conversacin o en un texto queramos enfatizar algn detalle

en concreto, resaltarlo, y para ello deberemos utilizar este elemento.

Atencin, este texto es <em>exclusivamente</em> informativo.

En este caso, el exclusivamente queda enfatizado por encima del resto del texto.

strong
Al igual que en el caso anterior, muchos utilizan el elemento strong como una
negrita, y no es correcto. El significado y uso de este elemento es el de dar
importancia a algo en concreto, sin ser decorativo. Al igual que el anterior, este
elemento es anidable, por lo que podremos encontrar un strong dentro de otro
strong.

<strong>Atencin</strong>, este texto es exclusivamente informativo.

En este caso, el atencin queda reforzado por encima del resto del texto.

small
El elemento small representa un pequeo comentario en un tamao ms reducido.
Habitualmente har referencia a disclaimers, restricciones legales, copyrights y
similares. Este elemento no le restar importancia a lo que haya enfatizado con em
o reforzado con strong.

Este elemento no debe utilizarse con bloques largos de contenido, mltiples

pargrafos, listados slo debe utilizarse con pequeas porciones de texto.

<p>Este producto no debe ser utilizado junto al otro producto.</p>

<p>El eslgan de la compaa Fulanito de Tal es el de "dar el poder de Internet a
los usuarios".</p>
<p><small>Esta informacin ha sido vista en el sitio web de <a
href="http://example.com/nosotros.html">fulanito de tal</a>.</small></p>

cite
El elemento cite representa el ttulo de un trabajo (libro, poema, cancin,
pelcula), pero no la cita en s, sino, slo su ttulo. En el caso de los nombres de
autores no se debe hacer uso de este elemento, sino que podra estar bien una
negrita b.

<p><cite>Universal Declaration of Human Rights</cite>, United Nations, December

1948. Adopted by General Assembly resolution 217 A (III).</p>

q
Y si el elemento anterior era el ttulo de una cita, el elemento q es la cita en s,
siempre y cuando sea una lnea. Las comillas no hay que ponerlas, ya que el
propio navegador las aadir.

Este elemento puede incorporar un atributo cite que ser la direccin URL de
donde se ha extraido la informacin referente a ese texto.

<p>The W3C page <cite>About W3C</cite> says the W3C's mission is <q
cite="http://www.w3.org/Consortium/">To lead the World Wide Web to its full
potential by developing protocols and guidelines that ensure long-term growth for
the Web</q>.</p>

dfn
El elemento dfn representa la definicin de un trmino. Los contenidos alrededor
de este elemento seran la definicin del mismo. En el caso en que el elemento tenga
un title, ste ser el que de la definicin exacta del trmino, sin tener en cuenta el
resto del contenido. En este caso, slo podr incluirse la definicin exacta del
trmino.

<p>The <dfn id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a

device that allows off-world teams to open the iris.</p>
<p>...</p>
<p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door
Opener">GDO</abbr></a> and so Hammond ordered the iris to be opened.</p>

abbr
Cuando tengamos que hacer alguna abreviatura, acrnimo o similar utilizaremos el
abbr que permite la incorporacin de un title en el que aadir el significado
extendido de lo que son las siglas.

Hay que tener en cuenta que no siempre hay que utilizar este elemento, aunque s
se recomienda el uso en documentos en los que esas siglas son poco conocidas, en
las que hace falta una presencia semntica aadida o en las que los autores quieren
dar la definicin sin necesidad de escribirlo despus entre parntesis, por ejemplo.

time
Este es uno de los nuevos elementos que tiene cierta gracia su uso. Bsicamente
con time debemos ofrecer horas en formato de 24horas que permitan a las
mquinas leer fechas, de forma que los navegadores puedan interpretarlas y
generar recordatorios con ellas. Estas horas a las que representa han de ser
precisas.

Este elemento permite algunos parmetros. Por ejemplo, si se incluye el booleano

pubdate significar que esa hora es la que corresponde al article ms cercano o, en
caso de no haberlo, al documento en el que se encuentra. El atributo datetime es el
que puede incluir un valor exacto de la fecha y hora en la que se quiere establecer el
momento.

Aunque los navegadores no son capaces de renderizarlos en este momento, creo

que puede ser muy interesante la forma en la que lo harn. Si vemos estos ejemplos
que pongo a continuacin, os explicar el porqu:

<p>I usually have a snack at <time>16:00</time>.</p>

En este caso, el navegador ha de mostrar algo como:

I usually have a snack at 4pm. oI usually have a snack at 16h00.

En este caso, supongo que depender de la configuracin del sistema operativo,

navegador o dispositivo pero no es el nico caso:

<p>Published <time pubdate datetime="2009-08-30T07:13Z"></time>.</p>

Aqu, el sistema podra mostrar varias opciones como:

Published 30/08/2009 07:13. o Published 30 Aug 2009.

code
El elemento code representa cdigo informtico cualquier tipo de cdigo que un
ordenador podra reconocer de alguna manera

<pre><code class="language-pascal">var i: Integer;

begin
i := 1;
end.</code></pre>
var
Aunque es muy probable que el elemento var se utilice en casos ms elaborados, su
funcin es la de indicar que el elemento que hay hace referencia a una variable
matemtica o de programacin.

La hipotenusa <var>a</var> es la suma de los cuadrados de <var>b</var> y

<var>c</var>

samp
El elemento samp representa el contenido que muestra la pantalla de un sistema
operativo.

kbd
El elemento kbd es lo que un usuario ha de introducir en un sistema (normalmente
a travs del teclado).

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh

demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
<span class="prompt">jdoe@demo:~$</span> <span
class="cursor">_</span></samp></pre>

sub / sup
Estos dos elementos muestran la informacin sobre (sup) la lnea y bajo (sup) la
lnea. Normalmente se utiliza en casos muy contados, aunque habitualmente
elementos matemticos.

f(<var>x</var>, <var>n</var>) =
log₄<var>x</var>^<var>n</var>

i
Otro de los clsicos es el i, que representa un bloque de texto como voz alternativa,
designacin taxonmica, trmino tcnico, frase en otro idioma, o cualquier
elemento que quieta ponerse en cursiva.

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

b
Y el otro clsico, el b que representa un texto con una importancia extra, como
alguna palabra a destacar, el extracto de un documento, nombres de productos o
cualquier otra cosa que deba ir en negrita.

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

hay que tener en cuenta que el uso de b es el caso extreo, ya que para encabezados
hay que utilizar los h1-h6, para dar nfasis a un contenido el em y para remarcar
algo el strong o el mark.

mark
El elemento mark ofrece a un fragmento de texto el verse remarcado o destacado
con respecto a otro fragmento. En principio este elemento puede ser utilizado para
dar importancia a un fragmento segn el uso de cada usuario.

El ejemplo ms claro y que en alguna ocasin se ha podido ver, sera en de analizar

la bsqueda que llega un referrer de un buscador y marcarla en el texto, como si de
un rotulador amarillo fluorescente se tratase.

<p>El usuario ha realizado la bsqueda <mark>coche rojo</mark> desde Bing.</p>

ruby / rt / rp
Estos elementos se utilizan para dar anotaciones sobretodo en texto asitico como
el chino o japons.

...
<ruby>
<rt> hn </rt>
<rt> z </rt>
</ruby>
...

bdo
Este elemento reconozco que no lo acabo de entender S que tiene que ver con la
direccin del texto que se incluye, y que por lo tanto ha de ir acompaada del
atributo dir (el que indica la direccin del texto), pero poco ms puedo decir

En principio tampoco creo que sea de mucha importancia a menos que se haga uso
de textos en idiomas que escriben al revs al estilo del rabe y similares

span
El elemento span es el elemento ms absdurdo, porque bsicamente no sirve para
nada. Este elemento por s slo no hace nada de nada, aunque existe porque es lti
a la hora de acompaar hojas de estilo, idiomas, etc

br
Otro de los elementos clsicos es el br, el salto de lnea, que permite, en el ligar
donde se incluya, hacer un salto de lnea del bloque de texto en el que se est
escribiendo
Hay que tener en cuenta que los saltos de lnea no deben utilizarse con propsito de
diseo, por lo que este elemento slo debe utilizarse para dividir textos en varias
lneas.

wbr
Y, aunque no s hasta que punto es til hoy en da, en el caso en el que haya
palabras o frases excesivamente largas, pero que se puedan dar oportunidades para
dividir, se podra usar este elemento. Por s mismo no hace nada aunque permite
que, en caso de necesitarse un salto de lnea, se haga en uno de estos puntos.

<p>So then he pointed at the tiger and screamed

"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<
wbr>me"!</p>

ins / del
Aunque estos elementos no son expresamente de formateo de texto he credo
interesante integrarlos en este punto.

El ins representa un fragmento de cntenido que se ha aadido al documento. Es

importante tener en cuenta que no puede incluir varios prrafos o similar (vaya, no
debera) y es recomendable que incluya el atributo datetime indicando la fecha de
la insercin e incluso el cite si la nueva informacin proviene de otra URL.

El caso del del es igual, aunque en este caso se usa para eliminar un contenido
(aunque en la pgina siga apareciendo, habitualmente tachado).

Os dejo, como la otra vez, un ejemplo de cmo se ven actualmente estos elementos
en los navegadores actuales os recomiendo ver el cdigo fuente del fichero en
cuestin.

Y, hasta aqu los elementos que hacen referencia a lo que a los textos se refiere, a su
presentacin en la pantalla y todo eso El resto de elementos que queda y que ir
mostrando ms adelante, hace referencia ms a otro tipo de elementos, muchos
multimedia adems de tablas y formularios, que tambin han variado bastante
con respecto a sus versiones anteriores
 HTML 5: imagen grande, ande o no ande
Fecha: 31 Mayo 2010 - Comentarios: 0 comentarios - Etiquetas: HTML.

Ahora que ya tenemos la mayor parte del

HTML formateado, toca hacer revisin del resto de elementos ms detallados. Y, al
igual que pas con los enlaces, con las imgenes voy a dedicar un captulo entero
para ello ya que aunque la configuracin no es tan compleja, se lo merece.

Las imgenes se representan con el elemento img. Una imagen puede ser un mapa
esttico (png, gif, jpg), vectorial (pdf, xml con svg), imgenes anmadas (gif,
apng) y otra serie de elementos que cada navegador soporte, pero que el propio
HTML 5 no especifica, ya que queda en manos de cada uno de ellos.

src
Este atributo es obligatorio al aadir una imagen e indica la direccin URL donde
se encuentra el elemento a mostrar.

alt
Este elemento es el texto alternativo en una imagen. Dependiendo de una serie de
combinaciones hay que ponerlo o no

Si el alt est en blanco, significa que esa imagen es decorativa o suplementaria.

Si el alt dispone de informacin, el contenido ofrece informacin alternativa o

sustitutiva de la imagen.

Si el alt no existe, la imagen debe ser parte del contenido y no hay ningn elemento
equivalente. En este caso, los navegadores pueden usar la informacin del title o del
figcaption como sustituto.
 Por norma general el atributo alt debera existir, aunque hay casos excepcionales.
Algunos casos donde en principio ha de estar son:

Si la imagen est dentro de un enlace, y ese enlace slo contiene la imagen,

entonces es obligatorio que tenga contenido.

En el caso de algn diagrama o grfica, swe recomienda explicar con mucho detalle
el contenido de la imagen.

Si tenemos una imagen como si fuera un icono, y al lado de la imagen hay un texto
que la define (y viene a ser el mismo), en estos casos el elemento ha de estar vaco.

En el caso de logos, insignias, banderas el contenido ha de ser el nombre de la

entidad a la que representa, y no alguna palabra del estilo logo. En caso de que el logo no
se muestre como logo, sino como una imagen descriptiva, es recomendable incluir una
descripcin de cmo es el logo en s: formas, colores, etc

Si la imagen es un texto sustitutivo, se recomienda que se incluya la misma

informacin que indica el texto.

Si la imagen es simplemente algo que representa lo que se est hablando alrededor

de ella, con un buen fragmento de texto, el atributo debe estar vaco. En estos casos es
recomendable usar un ttulo o similar.

En el caso en que haya varias imgenes complementarias unas a otras (por ejemplo,
un logo dividido en varios ficheros), la primera de las imgenes ser la que incluir un
texto alternativo, quedando el resto vacos.

En el mismo caso, pero que alguna imagen tenga algunos de sus elementos como
enlaces, cada una de estas s que debern incorporar un texto alternativo.

En los casos en los que la imagen tiene un valor excesivamente importante, el texto
deber ser muy detallado y significativo.

Si no se conoce el contenido de una imagen, entonces no debe existir el atributo alt,

aunque en estos casos s que deber haber un title o un figcaption. Un ejemplo de esto
podra ser una imagen de captcha.

Un detalle importante es que el alt es un elemento que ha de reemplazar la imagen

en caso de que no se pueda mostrar, y no es informacin descriptiva (que sera el
title).

En el caso en que las imgenes no estn pensadas para los usuarios (no s, se me
ocurre un contador de visitas de los muy antiguos) no debe existir el atributo alt
y, en este caso, el width y height deben estar forzados a tamao 0.
width / height
Las imgenes pueden llevar el tamao de las mismas. Por norma general es
interesante indicarlas ya que de esta forma el navegador no tendr que esperar a
finalizar la carga de la pgina para poder acabar de renderizarla correctamente.

usemap
Este elemento, si existe, indica la informacin del mapa asociado y ser el nombre
del mapa.

ismap
Si la imagen es un mapa y se encuentra dentro de un enlace a, entonces hay que
indicarlos con este parmetro booleano. Con esto el enlace quedara en entredicho
ya que necesitar de un mapa.

HTML 5: las tablas de multiplicar?

Fecha: 2 Junio 2010 - Comentarios: 0 comentarios - Etiquetas: HTML.
 Y aqu un da ms para seguir hablando
de HTML 5. Por cierto he creado una seccin especial en la que he recopilado todas
las entradas sobre ello.

En esta ocasin toca hablar de las tablas, y es que, aunque las tablas han sido un
elemento que pareca que iba a desaparecer, no es as aunque s que se le quiere dar
un uso muy concreto. Y es que las tablas representan informacin en una o ms
dimensiones que se pueden representar en forma de tabla (qu frase ms
retroalimentada).

Lo que s queda muy escrito es que las tablas no pueden ser parte del layout de un
sitio web.

table
Las table son un elemento muy interesante ya que disponen de muchos
subelementos, y son un contenedor de informacin en s que hay que tratar de
forma muy distinta al de un texto corriente.

Adems, sus elementos han de estar en un orden determinado, ya que sino no se

pueden formar correctamente e implican una lentitud excesiva al tener que crearlas
por parte sobre todo de los navegadores.

As, en este orden, puede haber un elemento caption seguido de cero o ms

colgroup, seguidos opcionalmente de un thead, seguido opcionalmente de un tfoot,
seguido de cero o ms tbody o uno o ms tr seguido opcionalmente de un tfoot
(aunque slo puede haber uno en toda la tabla como mximo).

Esto, como veis, hace que construir una tabla no sea algo trivial, sino que requiere
de un buen hacer por parte de los creadores. Tambin hay que tener en cuenta que
no puede haber filas o columnas en blanco. Adems, para que se comprendan
mejor, se solicita a los editores que incluyan una cabecera en la tabla, para su mejor
comprensin. De todas formas, lo mejor es hacer la tabla tan sencilla que no hagan
falta muchas explicaciones.

El nico atributo que soporta el elemento table es el summary, que ser muy
parecido a la cabecera explicativa de la tabla en s. Aun esto, es interesante indicar
en este atributo la interpretacin de la tabla o cmo hacer un uso de ella, quedando
la cabecera como el ttulo y el summary como la explicacin de la tabla, por
ejemplo, para alguien que no pudiera leerla.

caption
El caption es el primer elemento que puede haber en una tabla y representa el
ttulo de dicha tabla. En el caso en el que la tabla est dentro de un elemento figure,
entonces el texto del ttulo cambiar del caption al figcaption.

El ttulo ha de ser lo ms breve posible, pero lo suficientemente identificativo como

para poder explicar de qu va el contenido de la tabla en s.

colgroup
El elemento colgroup representa la agrupacin de una o ms columnas de una
tabla. En caso de que no incluya elementos col, s que deber incorporar el atributo
span que indique la cantidad, siempre mayor que cero.

col
En el caso en que un colgroup no tenga el atributo span, utilizaremos col para
indicar cada una de las columnas. De igual manera que el anterior, puede
incorporar el atributo span.

thead
El elemento thead representa el bloque de filas que contienen la cabecera
(nombre) de las distintas columnas de la tabla.

tbody
El elemento tbody representa un bloque de filas que contienen la informacin
principal de la tabla. En resumen, es el bloque que agrupa las filas principales (que
no son cabecera o pie).

tfoot
El elemento tfoot representa el bloque de filas que contienen el pie (resultados,
por ejemplo) de las distintas columnas de la tabla.

tr
Los tr son las distintas filas que puede tener una tabla. Cada una de ellas ha de
tener cero o ms celdas (td o th).
 td
Cada una de las td son las celdas de una tabla. Han de formar parte de un elemento
tr (fila).

Puede tener distintos atributos como colspan, rowspan y headers.

colspan: indica el nmero de columnas en las que se divide esa celda.

rowspan: indica el nmero de filas en las que se divide esa celda.

headers: este elemento ha de contener el identificador de un elemento th que forma

parte de la misma tabla. Con esto se pueden relacionar los datos de la tabla y as
interpretarlos.

th
Al igual que los td, los th hacen la misma funcionalidad pero indican el nombre del
contenido de la fila, o su valor principal destacado.

Adems de disponer de los mismos elementos que las celdas normales, puede
incluir el atributo scope. Este atributo puede tener 4 posibles valores:

row: es el indicador de todos los elementos de esa fila.

col: es el indicador de todos los elementos de esa columna.

rowgroup: es el indicador de esa fila y de las siguientes integradas en el contenedor

(que suele ser un tbody).

colgroup: es el indicador de esa columna y de las siguientes integradas en el

contenedor (que suele ser un colgroup).

Ejemplo 1

<table>
<caption>Specification values: <b>Steel</b>, <b>Castings</b>, Ann. A.S.T.M.
A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
<thead>
<tr>
<th rowspan=2>Grade.</th>
<th rowspan=2>Yield Point.</th>
<th colspan=2>Ultimate tensile strength</th>
<th rowspan=2>Per cent elong. 50.8mm or 2 in.</th>
<th rowspan=2>Per cent reduct. area.</th>
</tr>
<tr>
<th>kg/mm²</th>
<th>lb/in²</th>
</tr>
 </thead>
<tbody>
<tr>
<td>Hard</td>
<td>0.45 ultimate</td>
<td>56.2</td>
<td>80,000</td>
<td>15</td>
<td>20</td>
</tr>
<tr>
<td>Medium</td>
<td>0.45 ultimate</td>
<td>49.2</td>
<td>70,000</td>
<td>18</td>
<td>25</td>
</tr>
<tr>
<td>Soft</td>
<td>0.45 ultimate</td>
<td>42.2</td>
<td>60,000</td>
<td>22</td>
<td>30</td>
</tr>
</tbody>
</table>

Specification values: Steel, Castings, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S
max. 0.05.

Ultimate tensile
Yield strength Per cent elong. Per cent reduct.
Grade.
Point. 50.8mm or 2 in. area.
kg/mm2 lb/in2

0.45
Hard 56.2 80,000 15 20
ultimate

Mediu 0.45
49.2 70,000 18 25
m ultimate

0.45
Soft 42.2 60,000 22 30
ultimate

Ejemplo 2

<table>
 <colgroup>
<col>
<colgroup>
<col>
<col>
<col>
<thead>
<tr>
<th>
<th>2008
<th>2007
<th>2006
<tbody>
<tr>
<th scope=rowgroup>Research and development
<td>$ 1,109
<td>$ 782
<td>$ 712
<tr>
<th scope=row>Percentage of net sales
<td>3.4%
<td>3.3%
<td>3.7%
<tbody>
<tr>
<th scope=rowgroup>Selling, general, and administrative
<td>$ 3,761
<td>$ 2,963
<td>$ 2,433
<tr>
<th scope=row>Percentage of net sales
<td>11.6%
<td>12.3%
<td>12.6%
</table>

2008 2007 2006

Research and development $ 1,109 $ 782 $ 712

Percentage of net sales 3.4% 3.3% 3.7%

Selling, general, and administrative $ 3,761 $ 2,963 $ 2,433

Percentage of net sales 11.6% 12.3% 12.6%

HTML 5: formularios, el elemento 2.0 (parte 1)
Fecha: 7 Junio 2010 - Comentarios: 1 comentario - Etiquetas: HTML.

Si hay un elemento que ha evolucionado

enormemente con respecto a las versiones anteriores sin duda es el de los
formularios. Y es que en estos ltimos 10 aos de ha construido lo que se llama
web 2.0 (tambin conocido como yo ya haba visto eBay en el 98 y era una web 1.0,
as que alguien me est tomando el pelo). En fin, no quiero discutir sobre cmo se
llaman las cosas en internet, porque la gente las llama como le da la gana.
 Aunque s que es cierto que hay algo que no se puede obviar, y es que el hecho de
que los sitios web sean ms interactivos con el usuarios ha hecho que las
necesidades de diferencias y complementar algunos elementos y atributos crezcan.

Y esa es una de las razones por las que la parte de formularios hay que dividirla en
2 partes, porque hay algunos elementos que son casi interminables
Comenzamos.

form
El elemento form es el que agrupa cada uno de los formularios. Acta como
contenedor y a la vez permite que se ejecuten las entradas de datos. Tiene algunos
atributos que permiten que el usuario interacte de formas distintas:

accept-charset: Indica el MIME-type con el que se mandar la informacin del

formulario.

action: Indica la direccin URL a la que se enviar la informacin del formulario.

autocomplete: Permite slo on y off (por defecto on) y permite que el navegador
rellene aquellos campos input de forma automtica

enctype: Indica la codificacin de la informacin que se enviar. Tiene 3 posibles

estados: application/x-www-form-urlencoded (por defecto si no se indica),
multipart/form-data y text/plain.

method: Indica el tipo de cabecera por el que se enviar la informacin. Permite 4

estados: GET (por defecto), POST, PUT y DELETE.

name: Es el nombre del formulario. Si se indica no puede estar vaco, pero puede
no ponerse (y el sistema lo crear automticamente de forma interna).

novalidate: Un atributo booleano que indica si la informacin se validar o no.

target: Al igual que los enlaces, permite los valores: _blank, _self (por defecto),
_parent o _top.

input
El principal elemento para la introduccin de datos sigue siendo el input, y en esta
ocasin llega con muchsimos atributos y con muchos tipos de entradas.

El principal atributo del sistema de entrada de datos es el type. Hasta ahora los
valores ms habituales eran hidden o text que bsicamente eran textos
alfanumricos, pero ahora eso ha cambiado, y la lista de tipos es bastante grande:

hidden: Es un contenido oculto que suele corresponder a una serie de caracteres

alfanumricos. Este valor no puede ser manipulado por el usuario.
 text: Campo de texto que no permite saltos de lnea. Si se aade el atributo value
ser el contenido original del campo.

search: Campo de texto que no permite saltos de lnea y que indica que ser usado
como contenido de una bsqueda. Si se aade el atributo value ser el contenido original
del campo.

tel: Campo de texto que indica un nmero de telfono. No tiene ningn formato en
particular, por lo que se pueden incluir espacios o guiones, por ejemplo.

url: Campo de texto en el que se pueden incluir direcciones URL absolutas. Se

puede hacer una especie de autosuggest junto a otros elementos (ver ejemplo ms abajo).

email: Campo de texto que permite incluir correo electrnico. Principalmente si se

incluye el atributo value permite una nica direccin, y si es el multiple puede incluir
varias.

password: Campo de texto, pero que aparece oculto para el usuario y as proteger la
informacin.

datetime: Permite una fecha y hora vlida en un formato como 0037-12-

13T00:00Z, 1979-10-14T12:00:00.001-04:00 o 8592-01-01T02:09+02:09. Si se indica un
nmero, sern los milisegundos transcurridos desde el 01/01/1970.

date: Permite indicar una fecha. El atributo value indica la fecha en cuestin y el
min y max los lmites del rango de fecha. El atributo step marca los milisegundos (por
defecto 1 da) entre un valor y otro. El formato sera 2010-03-09.

month: Permite indicar un mes. Tiene los mismos atributos que date. El formato
sera 2010-03.

week: Permite indicar la semana del ao. Tiene los mismos atributos que date. El
formato sera 2010-W03 (tercera semana).

time: Permite indicar una hora. Tiene los mismos atributos que date. El formato
sera 17:23 y opcionalmente los segundos, 17:23:59.

datetime-local: Es igual que el datetime pero no permite indicar ningn tipo de

desfase horario.

number: Representa un valor numrico. Este puede ser negativo (si empieza con un
guin -), seguido de un nmero y con decimales (si se le indica un punto .) y para acabar,
un exponente, empezando con una letra e, seguida de un smbolo positivo + o negativo y
la cantidad exponencial. Un ejemplo completo sera: -12345.678e+90.

range: El tipo range permite un slide en donde el nmero (valor) no es lo 100%

importante, sino que es el formato en el que se muestra. Un poco ms abajo, un ejemplo.
 color: Este elemento representa un color. El formato es del estilo #A0F59E (o sea,
el RGB).

checkbox: Este elemento ya exista, y es el que permite elegir unas cuantas opciones
de un grupo de ellas.

radio: Al igual que el anterior, permite elegir de un grupo, pero slo una de las
opciones.

file: ste permite la opcin de subir archivos. Con l se pueden seleccionar archivos
que luego sern enviados al sistema. Si se le indica el atributo multiple se podrn
seleccionar varios ficheros a la vez. Adems, si se indica el atributo accept se puede limitar
ficheros segn su MIME-type, por ejemplo con audio/*, video/* o image/*.

submit: Este es el botn que permite el envo de informacin al sistema. Puede ir

acompaado de otros atributos que hacen que ese botn haga cosas que no son las
generales del formulario. Los parmetros son: formaction (que hace ese botn),
formenctype (la codificacin), formmethod (la forma de envo), formnovalidate (la
validacin) y formtarget (en qu ventana se abre).

image: Es igual que el submit pero permite ser una imagen en vez de un botn en
s. Para ello ha de ir acompaado del atributo src que indica la direccin URL de la imagen.

reset: Otro botn que si pulsas deja los valores del formulario en su valor inicial.

button: Un botn que no hace nada. Suele utilizarse habitualmente con funcione
JavaScript que son los que realizan la accin.

Ejemplo de autosuggest gracias al type=url

<input type="url" name="location" list="urls">

<datalist id="urls">
<option label="MIME: Format of Internet Message Bodies"
value="http://www.ietf.org/rfc/rfc2045">
<option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
<option label="Form Controls"
value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
<option label="Scalable Vector Graphics (SVG) 1.1 Specification"
value="http://www.w3.org/TR/SVG/">
<option label="Feature Sets - SVG 1.1 - 20030114"
value="http://www.w3.org/TR/SVG/feature.html">
<option label="The Single UNIX Specification, Version 3"
value="http://www.unix-systems.org/version3/">
</datalist>
 que quedara algo como:

Ejemplo de range

<input type="range" min="-100" max="100" value="0" step="10" name="power"

list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="+60">
</datalist>

que quedara algo como:

Adems de los distintos tipos que puede haber, existen distintos atributos, como ya
he ido comentando en algunos de los tipos

autocomplete: Permite el estado on y off y hace que el campo se rellene o no

automticamente si el sistema es capaz de identificar la informacin.

list: Es el valor de una lista identificada por el datalist. Con esto se pueden crear
sistema de autosugerencias.

readonly: Es un valor booleano, y permite o no que el usuario pueda modificar el

contenido.

size: Es el nmero de caracteres que se muestran por pantalla.

required: Otro atributo booleano que indica que ese elemento ha de incluirse
obligatoriamente.

multiple: Permite que algunos elementos seleccionen ms de un valor. Un ejemplo

ms adelante.
 maxlength: Es la cantidad mxima de caracteres que se permite.

pattern: Indica el formato de contenido que tiene que tener Por ejemplo: [0-9]
[A-Z]{3} sera un nmero seguido de 3 letras en maysculas.

min y max: Indican los valores mnimo y mximo que se permiten.

step: Indica el valor de paso cuando hay elementos que permiten saltar.

placeholder: Es un ejemplo del valor que se puede incluir.

Ejemplo de seleccin mltiple de cuentas de correo:

<label>Cc: <input type=email multiple name=cc list=contacts></label>

<datalist id="contacts">
<option value="hedral@damowmow.com">
<option value="pillar@example.com">
<option value="astrophy@cute.example">
<option value="astronomy@science.example.org">
</datalist>

Que se mostrar de una forma similar a esto:

Ahora slo queda el resto de elementos que puede incorporar en un formulario,

pero eso ser otro da.
 HTML 5: formularios, el elemento 2.0 (parte 2)
Fecha: 10 Junio 2010 - Comentarios: 0 comentarios - Etiquetas: HTML.

Hace unos das

explicaba principalmente el elemento input de los formularios en HTML 5 y hoy
toca el resto de elementos. Y es que no es moco de pavo todo lo que hay.

fieldset
Este elemento se utiliza para agrupar varios elementos de un formulario si un
formulario tiene varios bloques o contenidos distintos, se deberan agrupar con
este elemento. Si se le indica el atributo disabled entonces los elementos
contenidos en l tambin lo estn. Tambin se le puede indicar el atributo form que
hace referencia al formulario padre, y el atributo name, para acceder externamente
con un nombre nico.

legend
Si se le quiere poner una cabecera descriptiva a cada uno de los fieldset, el legend
es el elemento que debemos utilizar. Con este texto podremos poner una cabecera a
cada uno de los bloques que pueden formar un formulario compuesto de muchos
contenidos.

label
Los label son los textos que acompaan a un elemento, como puede ser un input y
que vienen a decir qu es de lo que se habla (que no una ayuda sobe el campo en
s). Este elemento puede tener el atributo for que se usara para hacer referencia al
name del elemento.

<label><input type="checkbox" name="lost"> Lost</label<

button
Es simplemente un botn, y es que los button son los elementos que permiten
acabar de interactuar con el formulario. Botones hay de 3 tipos que se indican con
el atributo type:

submit: que permite que la informacin del formulario se enve.

 reset: que deja el formulario en su estado inicial.

button: que simplemente, no hace nada.

El atributo form indica el nombre del formulario al que hace referencia, y el name
es el nombre que le asignamos al propio botn. Adems de estos, tambin est
disponible el atributo disabled que bsicamente hace que el botn no pueda
ejecutarse, y de esta forma queda limitado a una serie de verificaciones previas.
Con el atributo autofocus el sistema automticamente mandar el foco al botn.

select
Los select hacen referencia a un listado de opciones. Esta seleccin por defecto es
simple (slo un elemento) aunque si se le aade el atributo booleano multiple
podremos seleccionar ms de una opcin. De la seleccin se elegir uno o ms
option que son los elementos que se usan para indicar cada una de las opciones.

El atributo size permite definir la cantidad de opciones visibles por defecto, que
puede ser una o ms. En el caso de que haya el atributo multiple activo, por defecto
habr 4.

<select name="allowedunits" multiple size="3">

<option value="1" selected>Miner</option>
<option value="2" selected>Puffer</option>
<option value="3">Snipey</option>
<option value="4">Max</option>
<option value="5" selected>Firebot</option>
</select>

optgroup
Como ya el nombre deja ver, optgroup representa una agrupacin de elementos
option que tienen una agrupacin comn. Aunque en s no tiene mucho significado,
bsicamente es eso, una agrupacin de elementos de una misma temtica, tipo o
como se le quiera llamar, pero poco ms.

Puede llevar varios atributos, como el disabled si queremos desactivar todas las
opciones contenidas, o el label, que ser el nombre que tenga ese grupo de cara a
los usuarios.

option
El elemento option puede formar parte de un select, de un optgroup o de un
datalist y bsicamente es una de las opciones a elegir de entre unas cuantas. Al
igual que muchos otros elementos, puede estar disabled y por tanto no ser utilizada
en la seleccin.
Por norma general suele ir acompaado de un valor value que ser lo que
realmente se mande como informacin a la hora de enviar o trabajar con el
formulario. Como informacin aadida podemos usar el label, que podra tratarse
como el ttulo o mini-descripcin de esa opcin. Por supuesto, otro de los atributos
importantes es el selected que se usa en aquellos momentos en que queremos tener
elementos seleccionados por defecto.

datalist
El elemento datalist est pensado para ser un sistema de sugerencias.
Bsicamente es un contenedor en el que se incluyen distintas opciones que
corresponderan a un campo. De esta forma, si alguien empeiza a escribir en un
input y coindice de alguna manera con alguno de los contenidos, le aparecer como
una sugerencia.

<input type="text" name="favcharacter" list="characters">

<datalist id="characters">
<option value="Homer Simpson">
<option value="Bart">
<option value="Fred Flinstone">
</datalist>

textarea
Un textarea es un elemento de entrada de datos libre y multilnea, es decir, un
sitio donde escribir lo que te da la gana. Este elemento tiene bastantes atributos
que le permiten hacer algunas cosas.

Para empezar podemos aplicarle el elemento readonly que bsicamente impide que
los usuarios puedan cambiar el contenido del elemento. Para indicar el tamao del
elemento podremos usar los atributos cols y rows que indican la cantidad de
caracteres por columna y filas que se permiten; por defecto hay 20 caracteres por
columna y 2 filas. Adems, para que no se corten, o s, las palabras que se puedan
incluir en este elemento, podemos usar el wrap indicando el valor soft (por
defecto) o hard con el qe controlamos saltos de lnea y similares. En el caso de
indicar un valor de maxlength le estamos diciendo al textarea que hay un lmite
mximo de caracteres, y que a partir del lmite no ha de dejar continuar. SI
queremos que el usuario tenga que rellenar obligatoriamente el campo, hay que
indicarle el valor booleano required; tambin es posible deshabilitarlo con un
disabled.

Un detalle interesante, es que, al igual que el input, este elemento tambin permite
el atributo placeholder, que es una pequea ayuda (de unas pocas palabras) que
explique qu ha de contener el elemento.
 keygen
Sin duda uno de los elementos ms enigmticos del HTML 5 es el elemento
keygen. Este elemento bsicamente lo que hace es generar una clave privada y una
pblica para que el navegador y el servidor puedan comunicarse. La clave la genera
automticamente el navegador, y supongo que mediante AJAX o algn otro
sistema se podr mantener una conversacin entre el navegador y servidor A
ver si encuentro algn ejemplo de uso, porque no he visto nada todava.

Permite algunos atributos como challenge o el keytype que es el tipo de

codificacin de la clave, que por ahora slo acepta un valor que es rsa.

output
Otro de los nuevos elementos es el output y es que si hay input, por que no
output? Y bsicamente es eso los inputs son los cajetines para escribir cosas, y
en alguna ocasin, los propios inputs han servidor como cajetn de clculo o
similar pues esto es un cajetn que se usa como resultado de algo.

<form onsubmit="return false">

<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>
</form>

progress
Este es uno de los elementos que todava no queda claro si estar en la versin final
de HTML 5 o se quedar por el camino, como ya ha ocurrido con algn otro en
versiones anteriores. Y es que progress viene a indicar el proceso que lleva una
tarea, como si de una barra de progreso se tratase y est pendiente de aprobacin
porque no existe nada que haga referencia la tarea en s.

El elemento tiene dos posibles parmetros que son value y max que indicaran el
valor a mostrar y el valor mximo que puede tener, partiendo de la base de que va
entre 0 y max.

meter
Y el elemento que matara el progress es el meter, que hace lo mismo pero
diferente bsicamente es un sistema que permite crear escalas de cosas,
independientemente de lo que sea. Un ejemplo podra ser el tamao ocupado o
libre de un disco duro.

Este elemento tiene bastantes atributos, y casi dira que hay que ponerlos todos:

value: Es el valor actual de todos los posibles.

 min: El valor mnimo posible para el rango. Por defecto es 0.0

max: El valor mximo posible para el rango. Por defecto es 1.0

low: Es el valor por el que, por debajo, sera un problema. Por defecto es el
mismo que min.

high: Es el valor por el que, por encima, sera un problema. Por defecto es el
mismo que max.

optimum: Es el valor ptimo para la medidicn. Por defecto es la media entre min y
max, o 0.5

Algunos ejemplos:

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>

Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>

Tickets sold: <meter min="0" max="100" value="75"></meter>

<dl>
<dt>Radius: <dd><meter min=0 max=20 value=12>12cm</meter>
<dt>Height: <dd><meter min=0 max=10 value=2>2cm</meter>
</dl>

Y hasta aqu lo que corresponde a los formularios del HTML 5. Algunas novedades
interesantes sobretodo pensadas para lo que en el futuro puede traernos la web
2.0 e incluso, si hace falta la 2.5 o la 3, quin sabe

HTML 5: los malditos iframes

Fecha: 22 Junio 2010 - Comentarios: 0 comentarios - Etiquetas: HTML.
 Aunque es uno de los elementos que se
utilizan todava, la verdad es que el consumo que provoca en los navegadores es tan
alto que si nos paramos a pensar framente, no es nada recomendable su uso an
as, el HTML 5 todava lo mantiene ya que para algunas cosas sigue siento un
elemento valioso (aunque, como digo, yo no lo recomiendo, ni yo ni Google ni
Yahoo!)

iframe
El elemento iframe bsicamente permite integrar lo que se podra decir como una
ventana de navegador dentro de otra, o sea, una pgina dentro de otra, en un
espacio definido. De esta forma podemos abrir el contenido de una pgina propia o
externa dentro de una parte de la que actualmente visualizamos.

El principal atributo que lo acompaa es el src que como en muchos otros

elementos, hace referencia a una direccin URL, que ser la pgina que abrir
dentro. Tambin se le puede indicar el srcdoc que hace referencia al nivel de
profundidad que tendr el elemento. El atributo name har referencia al nombre
del elemento (por si hay que acceder a l a travs del DOM).

Uno de los mayores problemas que tienen los iframes es la seguridad que puede
comportar abrir cualquier elemento externo a nuestro sitio. Es por esto que existe
el atributo sandbox (al que por ejemplo ya da soporte Google Chrome) y que
restringe algunas acciones. Algunos de los valores que puede generar excepciones
son:

allow-same-origin

allow-top-navigation

allow-forms

allow-scripts
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://www.example.com/incrustado.html"></iframe>

Otro atributo que parece muy interesante es seamless. Con este atributo le decimos
al navegador que renderice el contenido del iframe como si fuera parte del sitio.
Esto implicar que haya algunas restricciones y ampliaciones, como que el
contenido ha de estar en el mismo dominio, que los CSS que haya en el iframe
pasarn a formar parte del CSS principal

Para acabar, y como es lgico, hemos de indicar el tamao de la ventana, y para ello
utilizaremos los atributos width y height, que indicarn el ancho y alto de la
ventana.

Sin duda el elemento iframe va a ser uno de los ms criticados por los buscadores y
optimizadores de la red, pero parece que va a seguir aqu durante bastante tiempo.

HTML 5: las pseudo-clases para mayor interactividad

Fecha: 2 Julio 2010 - Comentarios: 0 comentarios - Etiquetas: CSS; HTML; HTML
5.

Est claro que hoy en da 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 diseos.
 Con la nueva versin, el HTML 5 tiene algunas clases que en las versiones
anteriores no existan 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 estn activados (por ejemplo, en el

momento en el que hace clic en ellos).

: enabled: Son elementos que estn activos, como enlaces, botones,

formularios

: disabled: Para los elementos contrarios al anterior, aquellos que en ese

momento estn desactivados.

: checked: Para los formularios que tengan activada alguna opcin.

: indeterminate: Para los input con el estado indeterminate.

: default: Cuando el formulario es por defecto.

: valid: Si la validacin del formulario es correcta.

: invalid: Todo lo contrario, si falla al validar.

: in-range: si los valores del formulario estn en el rango correcto.

: out-of-range: Como antes, pero al revs, 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 slo lectura.

: read-write: Para aquellos elementos que se pueden editar.

A parte de estos, tambin 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 especficamente el CSS 3 que permite hacer cosas muy
interesantes incluidos los valores de los elementos y atributos.
HTML 5: el rich media est de moda
Fecha: 5 Julio 2010 - Comentarios: 0 comentarios - Etiquetas: HTML; HTML 5.

Poco a poco se acaban los temas a tratar

referentes al cdigo que podemos desarrollar sobre HTML 5, aunque eso no
significa que las entradas sobre el tema se acaben.

En esta ocasin toca ya cerrar los elementos, y lo har con los multimedia. No voy a
entrar en muchsima profundidad en cada uno de ellos, ya que algunos daran para
documentacin 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 direccin URL del elemento en cuestin,
y tambin el type, que indicar el MIME del elemento, para que el navegador sepa
interpretarlo. para acabar, slo 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 podra tratar de forma
similar a una imagen, y que puede necesitar un plugin para ser procesado.

El atributo data hace referencia a la direccin 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, tambin 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
informacin de los parmetros que ha de utilizar el plugin en cuestin.

nicamente tiene dos atributos, que son el name, que sera el nombre de la
variable y el value, que sera el valor en s mismo.

<object data="ejemplo.swf">
<param name="quality" value="high">
</object>

video
Si hay un elemento que est generando mucha controversia es el elemento video.
Bsicamente todo viene por el uso del estndar de vdeo 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 sera la direccin URL del vdeo, y el poster, la direccin URL de la
imagen que aparecera representando al vdeo. Si queremos conseguir algo de
informacin del vdeo, podemos usar el atributo preload que permite 3 posibles
valores: none si no queremos que se lea nada del vdeo), metadata, si queremos
que lea el primero de los frames y saque cierta informacin (tamao del vdeo,
duracin, etc) o auto si queremos que sea el navegador el que decida qu hacer.

En el caso en que queramos que el vdeo comienza a funcionar de forma

automtica, podemos aadir el atributo booleano autoplay que har que se cargue
slo, y de una forma similar, el atributo loop permitir que el vdeo se reproduzca
de forma indefinida.

A parte del width y height, tambin 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 vdeos.
<video src="video.mpg" autoplay controls></video>

audio
El elemento audio es bastante similar al video, con la diferencia de que es un
formato ms establecido, pero que tiene bsicamente los mismos parmetros.

Tendremos los mismo parmetros, que son src para indicar el audio, preload para
sacar la informacin, autoplay para que empiece slo, 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 vdeo y audio por lo que una sola direccin URL no sera
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
vdeos o audios.

Este elemento tiene tres atributos, que son src, que indicar la direccin URL, el
type que indicar el MIME y que debera incluir el codecs= que indicarn el
sistema de codificacin del vdeo. Tambin puede llevar el atributo media, que
habitualmente tendr el valor all.

<video controls>
<source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<source src="video.3gp" type="video/3gpp; codecs='mp4v.20.8, samr'">
<source src="video.ogv" type="video/ogg; codecs='theora, vorbis'">
</video>

map
Otro de los elementos que hace aos se utilizaba bastante era el de los map.
Gracias a estos se podra hacer una seleccin 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 direccin a la que se dirigir al hacer clic en la zona indicada. Al igual
que en las imgenes, el alt informar sobre ese enlace.

Para indicar la forma y lugar de la zona tenemos los elementos coords y shape. las
coordenadas sern nmero enteros que indicarn 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, podra 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 podra 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 informacin adicional o
controles de otro bloque.
El nico atributo que se le permite es el de open que hara que, si est activo, los
detalles estn expandidos, ya que, sino, este bloque quedara oculto por defecto.
Otro detalle es que obligatoriamente ha de contener un summary.

summary
Esta es fcil; el summary simplemente es el resumen o ttulo de un details.

<details open>
<summary>Name & Extension:</summary>
<p><input type=text name=fn value="Pillar Magazine.pdf"></p>
<p><label><input type=checkbox name=ext checked>Hide extension</label></p>
</details>

menu
El elemento menu representa un conjunto de comandos bsicamente 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 botn que cuando se
pulse, el sistema ejecutar alguna accin (como si de una opcin de un men de las
ventanas de la mayora 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 opcin de entre varias).
Adems, cada una de las opciones puede llevar un label que dara la explicacin de
qu hace.

El atributo icon indicara la URL del icono que ha de mostrar esa opcin. Cada una
de ellas puede estar checked y/o disabled segn sea necesario. Los radio
incorporarn un radiogroup que llevar un valor comn para varias opciones.

<menu type="toolbar">
<command type="radio" radiogroup="alignment" checked="checked" label="Left"
icon="left.png" onclick="setAlign('left')">
<command type="radio" radiogroup="alignment" label="Center" icon="center.png"
onclick="setAlign('center')">
<command type="radio" radiogroup="alignment" label="Right" icon="right.png"
onclick="setAlign('right')">
<hr>
 <command type="command" disabled label="Publish" icon="pub.png"
onclick="publish()">
</menu>

Otro ejemplo podra quedar algo as:

<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="fnew()">New...</button>
<button type="button" onclick="fopen()">Open...</button>
<button type="button" onclick="fsave()">Save</button>
<button type="button" onclick="fsaveas()">Save as...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="ecopy()">Copy</button>
<button type="button" onclick="ecut()">Cut</button>
<button type="button" onclick="epaste()">Paste</button>
</menu>
</li>
<li>
<menu label="Help">
<li><a href="help.html">Help</a></li>
<li><a href="about.html">About</a></li>
</menu>
</li>
</menu>

HTML 5: el gran hermano te geolocaliza

Fecha: 7 Julio 2010 - Comentarios: 0 comentarios - Etiquetas: HTML; HTML 5.
 Aunque se asocia el lanzamiento de las
funciones de geolocalizacin al HTML 5, lo cierto es que la Geolocation API son
unas funciones en JavaScript independientes de esta forma de mostrar las pginas
web.

Bsicamente el navegador, dependiendo de la conexin a Internet, ser capaz de

saber qu latitud, longitud y otros datos tienes en ese momento. Os dejo con un par
de ejemplos de cdigo que, dependiendo del navegador, deberan funcionar. El
primero de ellos es simplemente textual, el segundo muestra un mapa.

El cdigo ms 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>