Antártico Norte » html5 http://antarticonorte.com/blog Fotografía, diseño web y de todo un poco Tue, 19 Jan 2010 19:20:49 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Estructurando nuestra web con HTML5 http://antarticonorte.com/blog/2008/01/26/estructurando-nuestra-web-con-html5/ http://antarticonorte.com/blog/2008/01/26/estructurando-nuestra-web-con-html5/#comments Sat, 26 Jan 2008 13:20:49 +0000 Al-x http://antarticonorte.com/blog/2008/01/26/reescribiendo-nuestras-webs-con-html5/ Este artículo está basado en el borrador público del estándar HTML5. La información aquí escrita podría no ser válida cuando se apruebe el estandar definitivo.

HTML5 va a suponer un paso importante hacia la web semántica. Las nuevas etiquetas para el marcado permiten describir mejor el contenido de nuestros documentos, lo que mejorará el tratamiento que dan a la información los navegadores y los motores de búsqueda.

Secciones, encabezados y pies

Hasta ahora para definir las distintas partes de un documento era necesario el uso de <div>s con el atributo class para organizar el contenido. Aunque el uso de clases es útil para nosotros como desarrolladores, los UAs poco pueden hacer para interpretar el significado semántico de las mismas. Si nosotros escribimos <div class="header"> o <div class="cabecera"> sabemos que se corresponde a la cabecera de un bloque, pero un navegador o un motor de búsqueda no sabría diferenciar ese bloque de cualquier otro.

Con las nuevas etiquetas <section>, <header> y <footer> podremos definir con exactitud la función que desempeña cada bloque de nuestro documento.

Por ejemplo, una entrada de un blog en HTML4 es más o menos así:

<div class="articulo">
	<div class="articulo-cabecera">
		<h1>Titulo de la entrada</h1>
		<p class="meta">Escrito el 19/07/2008 - 12:34</p>
	</div>

	<p>Lorem ipsum dolor...</p>
	<div class="foto">
		<img src="una-foto.jpg">
		<p>Texto de pie de foto</p>
	</div>
	...

	<div class="relacionados">
		<ul>
			<li><a href="..">Articulo relacionado 1</a></li>
			<li><a href="..">Articulo relacionado 2</a></li>
			<li><a href="..">Articulo relacionado 3</a></li>
		</ul>
	</div>

	<div class="articulo-pie">
		<p>Comentarios: <a href="...">40</a></p>
	</div>
</div>

Utilizando el nuevo estandar, nuestro marcado es mucho más descriptivo sobre que papel desempeña cada bloque de texto dentro del documento:

<article>
	<header>
		<h1>Titulo de la entrada</h1>
		<p class="meta">Escrito el <time datetime="2008-07-19 12:34">19/07/2008 - 12:34</time></p>
	</header>

	<p>Lorem ipsum...</p>
	<figure>
		<img src="una-foto.jpg">
		<legend>Texto de pie de foto</legend>
	</figure>
	...

	<aside>
		<ul>
			<li><a href="..">Articulo relacionado 1</a></li>
			<li><a href="..">Articulo relacionado 2</a></li>
			<li><a href="..">Articulo relacionado 3</a></li>
		</ul>
	</aside>

	<footer>
		<p>Comentarios: <a href="...">40</a></p>
	</footer>
</article>

En el ejemplo podeis ver que he utilizado <article> en lugar de <section>. No es más que una forma más precisa de definir el tipo de sección en el que estamos.

El estandar no limita el número de <header> o <footer> que podemos poner en una página. Podemos poner tantos como secciones tenga el sitio. Por ejemplo la portada de nuestro hipotetico blog podría quedar así:

<body>
	<header>
		<h1>Titulo del blog</h1>
		<p>Tagline</p>
	</header>
	<section class="articulos">
		<article>
			<header>
				<h2>Titulo de la entrada</h2>
				<p class="meta">Escrito el <time datetime="2008-07-19 12:34">19/07/2008 - 12:34</time></p>
			</header>

			<p>Lorem ipsum...</p>

			<footer>
				<p>Comentarios: <a href="...">40</a></p>
			</footer>
		</article>

		<article>
			<header>
				<h2>Titulo de la otra entrada</h2>
				<p class="meta">Escrito el <time datetime="2008-07-19 12:34">19/07/2008 - 12:34</time></p>
			</header>

			<p>Lorem ipsum...</p>

			<footer>
				<p>Comentarios: <a href="...">40</a></p>
			</footer>
		</article>
	</section>
	<footer>
		© blablba....
	</footer>
</body>

Para más información no dejéis de consultar el apartado de secciones en el estandar.

]]> http://antarticonorte.com/blog/2008/01/26/estructurando-nuestra-web-con-html5/feed/ 1 Extensiones en el DOM de HTML5 http://antarticonorte.com/blog/2008/01/23/extensiones-en-el-dom-de-html5/ http://antarticonorte.com/blog/2008/01/23/extensiones-en-el-dom-de-html5/#comments Wed, 23 Jan 2008 21:34:54 +0000 Al-x http://antarticonorte.com/blog/2008/01/23/extensiones-en-el-dom-de-html5/ Una de las cosas que mas me gustan del nuevo HTML5 son las extensiones de los objetos HTMLDocument y HTMLElement. Si bien son cosas que podemos hacer actualmente con librerías como prototype o jQuery, no viene mal que se puedan realizar de manera nativa.

HTMLDocument

El nuevo HTML5 define el metodo getElementsByClassName() para seleccionar elementos a través de su clase.

innerHTML pasa a ser estandar, y a nivel de documento (antes solo estaba implementado en HTMLElement). De esta forma podemos serializar todo el documento.

activeElement devuelve el elemento que tiene foco actualmente. Si ningún elemento tiene foco devuelve el body de la página.

hasFocus determina si el documento tiene foco.

getSelection() devuelve un objeto que representa la selección o selecciones actuales del documento. Si por ejemplo el usuario selecciona el siguiente bloque de texto en su navegador Texto seleccionado document.getSelection().toString() devolverá "est qui dolorem ipsum quia dolor sit amet"

HTMLElement

Tambien implementa getElementsByClassName(). Combinado con getElementById() podemos restringir el ámbito de la búsqueda. Así podremos escribir sentencias como:

var articulos = document.getElementById('contenido').getElementsByClassName('articulo');

Al igual que en HTMLDocument, innerHTML pasa a ser estandar.

classList devuelve un objeto con el que poder manipular las clases de un elemento. Esto es muy útil cuando tenemos un elemento con más de una clase.

clases = document.getElementById('contenido').classList;
clases.has('clase'); // Vemos si el elemento tiene una clase determinada
clases.add('clase'); // Añade una clase al elemento
clases.del('clase'); // Elimina una clase del elemento
clases.toggle('clase'); // Si el elemento tiene la clase, la elimina. Si no la tiene la añade

Para los elementos a, area y link se añade un objeto llamado relList con los mismos métodos para manejar el atributo rel

Lo malo: que las podremos usar cuando Microsoft las implemente en Internet Explorer 17 o así.

]]> http://antarticonorte.com/blog/2008/01/23/extensiones-en-el-dom-de-html5/feed/ 3