PDF de programación - Tutorial de HTML5 - Semántica, parte 1

Mostrando artículos de 'HTML/CSS'
Tutorial de HTML5 - Semántica, parte 1
03 Sep 2011
Escrito por Alejandro Castillo 10
HTML5 introduce nuevos elementos "inline" muy útiles para aumentar nuestro existente arsenal de "span, strong, em, abbr, etc". A partir de
ahora a estos elementos ya no se les llamará "inline", sino “text-level semantics.”
mark
Cuando revisamos un listado de una búsqueda en una web, usualmente vemos el término por el que hemos buscado iluminado o resaltado
dentro de cada resultado. Por lo general se marca cada instancia del término de búsqueda con un elemento span, pero span desde un
punto de vista semántico, se queda un poco cojo, ya que realmente sirve para poco más que aplicarle una clase específica a un elemento
dentro de un estilo ya definido.
Se podría utilizar em o strong pero semánticamente no sería correcto ya que no querrías otorgarle una “importancia” al término de
búsqueda, simplemente queremos que de alguna manera quede resaltado.
Introduzcamos el elemento mark:
<h1>Resultado de búsqueda para 'unicornio'</h1>
<ol>
<li>
<a href="http://www.3sellers.com/">Leyendo el Gran <mark>unicornio</mark> azul.</a>
</li>
</ol>
El elemento mark no lleva implícito ninguna importancia para el contenido salvo el mostrarlo como algo de interés en el contexto en que
esté. Según la especificación, mark denota fragmento de texto de un documento marcado o iluminado con fines de referencia debido a su
importancia en otro contexto.
meter
El elemento meter puede ser utilizado para marcar medidas, siempre que esas medidas sean parte de una escala con valores mínimos y
máximos.
<meter>9 de 10 gatos</meter>
No es obligatorio escribir el valor máximo si no quiere, para eso se puede utilizar el atributo max.
<meter max="10">9 gatos</meter>
Existe un atributo min correspondiente. También se puede utilizar los atributos high, low, y optimum. Si lo desea, puede incluso ocultar la
medición dentro del atribulo value.
<meter low="-273" high="100" min="12" max="30" optimum="21" value="25">Hace bastante calor en esta época del año.</meter>
progress
Mientras el elemento meter es muy bueno para describir algo que ya ha sido medido. El elemento progress te permite marcar un valor
que está en proceso de cambio.
Su perfil está <progress>60%</progress> completado.
Otra vez se pueden utilizar los atributos min, max, y value:
<progress min="0" max="100" value="60"></progress>
El elemento progress es más útil cuando se utiliza combinado con DOM Scripting. Se puede utilizar JavaScript para actualizaciones
dinámicas del valor, permitiendo al navegador comunicar el cambio al usuario. Muy útil para cargar archivos con Ajax.
Estructura
HTML5 presenta una estructura basada en la experiencia de los desarrolladores de HTML y CSS. Tras haber valorado un millón de páginas y
haber tabulado los nombres más comunes que se le asigna a los elementos class, nombres como “header, footer y nav” prevalecieron.
section
El elemento section es usado para agrupar por temas contenido relacionado. Eso suena muy similar al elemento div, que suele utilizarse
como contenedor de contenido genérico. La diferencia es que div no tiene sentido en la semántica; no te dice nada sobre el contenido que
lleva dentro. El elemento section, por otra parte, se utiliza de forma explícita para agrupar contenido relacionado.
Usted podría sustituir a algunos de sus elementos div con elementos section, pero recuerde siempre preguntarse ¿Está todo el contenido
relacionado?
<section>

<h1>Ave del paraíso</h1>
<p> Narrativa policíaca y de intriga/Novela negra.</p>
<p> CAROL JOICE</p>
</section>
header
Especialistas en HTML5 describen al elemento header como un contenedor de “a group of introductory or navigational aids", que viene
siendo algo como: elementos que sirven como introducción o elemento para la navegación. Eso suena razonable. Ese es el tipo de
contenido que yo esperaría encontrar en un encabezado, y en inglés la palabra "header" se utiliza a menudo como sinónimo de cabecera
(masthead).
Existe una diferencia crucial entre el elemento header en HTML5 y el uso aceptado y generalizado de la palabra encabezado o cabecera.
Por lo general en una página existe una sola cabecera pero un documento puede tener múltiples encabezados, o lo que sería lo mismo
múltiple elementos “header”. Se puede utilizar un elemento header dentro de un elemento section por ejemplo. Las especificaciones
describen los elementos section como “a thematic grouping of content, typically with a heading”, o sea, una agrupación temática de
contenido, generalmente con un encabezado.
<section>
<header>
<h1>Ave del paraíso</h1>
</header>
<p>Narrativa policíaca y de intriga/Novela negra.</p>
<p>CAROL JOICE</p>
</section>
El elemento header aparecerá por lo general en la parte superior de un documento o section, no tiene que ser así obligatoriamente. Ha
sido definido por su contenido —introductorio o elemento para la navegación— sea cual sea su posición.
footer
Como el elemento header, footer (pie) suena como su descripción y ubicación. En cambio, el elemento footer deberá contener
información sobre sus elementos de contenido: quien lo escribió, información de copyright, enlaces a contenido relacionado, etc.
Mientras estamos acostumbrados a tener un pie para todo un documento, HTML5 nos permite también tienen pies dentro de las secciones.
<section>
<header>
<h1>Ave del paraíso</h1>
</header>
<p>Narrativa policíaca y de intriga/Novela negra.</p>
<footer>
<p>CAROL JOICE</p>
</footer>
</section>
Tutorial HTML5 – Browsers y doctype
20 Aug 2011 6
EL !DOCTYPE (Document Type Declaration) es usado tradicionalmente para especificar a los navegadores el lenguaje y/o versión con el que
está escrito un documento HTML.

El doctype para HTML 4.01 tiene la siguiente apariencia:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Este es el doctype para XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
No están escritos en lenguaje "humano" pero simplemente vienen a decir algo así: “este documento ha sido escrito en HTML 4.01” o “este
documento ha sido escrito en XHTML 1.0.”
Se podría esperar que para HTML5 la declaración del doctype fuera “este documento ha sido escrito en HTML5” debería tener un número
5 en algún sitio, pues no, el doctype para HTML5 quedaría así:
<!DOCTYPE html>
Cuando lo vemos por primera vez nos puede resultar raro no encontrar un número de versión, y sobre todo, ¿cómo se especificarán
futuras versiones de HTML? ¿Realmente piensan que esta será la definitiva?
Detengámonos a pensarlo por un momento, el doctype de HTML5 es muy pragmático. Debemos tener en cuenta que una de las premisas
de HTML5 es que tiene que soportar el contenido existente, el doctype de HTML5 deberá poderse aplicar a documentos ya escritos en
HTML 4.01 o XHTML 1. Las futuras versiones de HTML deberán también soportar el contenido en HTML5, por lo que ponerle un número no
sería lo más conveniente.

La verdad es que el doctype no es lo más importante. Supongamos que tenemos un documento con un doctype para HTML 4.01. Si ese

documento contiene elementos de otras especificaciones, como HTML 3.2 o HTML5, el navegador mostrará esa parte del documento. Los
navegadores soportan funcionalidades no doctypes.
HTML5 – Simplificando
El doctype no es la única cosa que se ha simplificado en HTML5.
Si usted quiere especificar la codificación de caracteres del marcado de un documento, la mejor forma es asegurarnos que el servidor envía
en correcto Content-Type del header. Si quiere estar doblemente seguro puede especificar los caracteres utilizando la etiqueta <meta>.
Aquí podemos ver cómo se utiliza la etiqueta meta para un documento escrito en HTML 4.01:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Así sería en HTML5:
<meta charset="UTF-8">

La etiqueta <script> también sufrió algunas simplificaciones. Es común añadir un atributo type con el valor de “text/javascript” a los
elementos script:

<script type="text/javascript" src="file.js"></script>

Los navegadores no necesitas ese atributo. Ellos asumen que es script está escrito en JavaScript, el lenguaje de programación más
popular the most popular en la web.

<script src="file.js"></script>

De la misma manera no es necesario especificar el valor type de “text/css” cada vez que se enlaza a un fichero CSS:

<link rel="stylesheet" type="text/css" href="file.css">

Simplemente se escribe:

<link rel="stylesheet" href="file.css">
Estas son algunas de las características de HTML5, próximamente seguiremos presentándolo.
Crea fondos degradados con CSS3
17 Aug 2011 3
La técnica de creación de degradado que vamos a ver sólo funciona en Mozilla y Webkit. Para variar Internet Explorer todavía no da soporte
a esta opción de CSS3, pero con el tiempo (más tarde que temprano) esta opción será compatible con todos los navegadores.
A diferencia de otras opciones de CSS3, en esta ocasión la sintáxis de Mozilla y Safari/Chrome para los degradados difiere un poquito. Así
que vamos a ver como hacerlo primero con Mozilla y luego con Webkit.
Mozilla
La sintáxis para Firefox es la siguiente

-moz-linear-gradient( [ || <ángulo>,]? , [, ]* )
Que aunque puede parecer complicada es realmente sencilla. Veamos un ejemplo, si deseamos un degradado de negro a blanco desde
arriba, escribimos

background: -moz-linear-gradient(top, black, white);
Webkit
La sintáxis de Webkit, válida para Chrome y Safari, es la siguiente.

-webkit-gradient(, [, ]?, [, ]? [, ]*)
Es un poco más compleja pero a la vez más potente que la de Mozilla. En este caso, para generar el mismo degrado de antes escribiríamos,

background: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
Básicamente lo que le decimos es que haga un degradado lineal, desde el punto 0 0 (que es la esquina superior izquierda) hasta el punto 0
100% (que es la esquina inferior izquierda) desde el color negro al color blanc