Storoch (by) Ernest

El escribir el articulo que viene a continuación (sus dos partes) surgió a raíz de la presentación que hizo Tantek Celic en la sxsw de este año el pasado mes de marzo, al señor Tantek del q muchos ya habréis oído hablar tuve el placer de conocerle el mes pasado en varias ocasiones, para aquellos q aun no lo conozcáis su currículum habla por si solo. El articulo, siendo en muchas partes transcripciones de dicha presentación, consta de dos capítulos, en la primera se explica de una forma muy ejemplificada la teoría sobre la aplicación de la semántica en el diseño web. En la segunda se entra de lleno en el asunto, tratando acerca de los microformatos

Tags

El futuro del desarrollo web viene lógicamente impuesto por el utilizar un formato semántico en el código de las paginas, así el salto de HTML a XHTML viene caracterizado por el potenciar el significado del contenido y no de su aspecto puramente. Un <h1></h1> no tiene porque ser grande y en negrita, ni un <em></em> tiene que ser a la fuerza itálica, sino que simplemente estas en-fatizando el termino. Esta claro entonces, que la aplicación del XHTML tiene que dejar de ser transicional (en su definición) para pasar a ser estricto. Utilizar los tags para lo que se crearon y no utilizar aquellos que no tienen un significado asociado (b, br, i). Y por supuesto, prohibido utilizar tablas a modo de capas de posicionamiento, eso ya es historia, las tablas son para la información tabular

Formato

No tenemos que olvidar q el (x)html se trata de un lenguaje, y como cualquier otro lenguaje tiene unos patrones muy bien definidos, la diferencia con otros lenguajes radica en que cuando este no esta bien formado no nos salta un warning en el navegador, ni se interrumpe su ejecución. Esto permite que la exigencia auto-impuesta por muchos desarrolladores se pase por alto dando como resultado el típico – lo suficiente y para que se vea – . Esta claro que si nuestro objetivo es hacer buenas aplicaciones y con una proyección de futuro, debemos auto-exigirnos, empezando por un servidor, un nivel estricto conforme a los estándares establecidos. No es la única manera, pero si la mas correcta para que sea posible aportar correcciones e ideas para la evolución del lenguaje.

Estas directrices no son para un escritor de bitácoras que suficiente faena tiene con actualizar su weblog periódicamente, sino para aquellos desarrolladores que crean o utilizan herramientas que generan código html de una forma u otra

Ejemplos

Ejemplos de correcta aplicación:

1- Mostrar información concreta:

Si toda la información va dentro del parágrafo, todo el texto tiene el mismo peso y significado

<p>
Please contact webmaster at example dot com
if you find any problems with this site.
</p>

Una alternativa es ubicar el texto en un div (tipo bloque) y indicar con address la dirección de contacto

<p><div>
Please contact
<address>webmaster at example dot com</address>
if you find any problems with this site.
</div><p>


Utilizaremos div y span para añadir estructura a un documento, indicando si el contenido es de tipo bloque o en linea respectivamente, el tag address no solo se limita al correo sino a toda información de contacto

2- Mostrar una frase extraída de algún sitio

En el ejemplo mencionamos un texto escrito por otra persona, indicando el autor al principio y dando nuestra opinión después

<p>Eric Meyer wrote:</p>
<p>
What's so interesting to me is that the guys who decided
to focus on the positive went out and did something;
those who want to mix in the negative seem to have
nothing to offer except complaints.
</p>
<p>An excellent contrast between those who want to
build new things and those who want to tear them down.
</p>


A diferencia de la estructura de arriba, utilizamos cite para indicar el autor o interlocutor, y blockquote para sus palabras, con el atributo cite para enlazar la url de donde proviene nuestra extracción

<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite=”http://meyerweb…/social-protocols/”>
<p>
What’s so interesting to me is that the guys who decided
to focus on the positive went out and did something;
those who want to mix in the negative seem to have
nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to
build new things and those who want to tear them down.
</p>


Nuestra opinión sera el único texto que dejaremos intacto, notar que al tratarse de varios párrafos continuamos utilizando <p>, estos lógicamente pueden estar dentro de un div

3- Mostrar código

En el ejemplo queremos mostrar una parte de código css

<p>
Le añadimos estilo al tag address:
</p>
<p>
address {
display:inline;
font-style:normal;
}
</p>


No solo utilizamos el tag code para indicar que se trata de código sino que además indicamos que queremos que el navegador respete el aspecto pre-formateado como por ejemplo el utilizar letras con el mismo ancho o respetar todos los espacios y tabulaciones

<p>
Le añadimos estilo al tag address:
</p>
<p><pre><code>
address {
display:inline;
font-style:normal;
}
</code></pre></p>


4- Mostrar una conversación

Partiendo del siguiente ejemplo:

<dl>
<dt>Costello</dt>
<dd>Well then who's on first?</dd>
<dt>Abbott</dt>
<dd>Yes.</dd>
<dt>Costello</dt>
<dd>I mean the fellow's name.</dd>
<dt>Abbott</dt>
<dd>Who.</dd>
<dt>Costello</dt>
<dd>The guy on first.</dd>
<dt>Abbott</dt>
<dd>Who.</dd>
</dl>


Esta es una forma clara de abusar de dt y dd, mas allá de querer aprovechar una tabulación automática de estos tags, estos están concebidos para términos y descripciones. Pero una conversación la componen interlocutores y frases, como hemos visto en el ejemplo 2 utilizaremos cite y blockquote

<cite>Costello</cite>
<blockquote><p>Well then who’s on first?</p></blockquote>
<cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote>
<cite>Costello</cite>
<blockquote><p>I mean the fellow’s name.</p></blockquote>
<cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>
<cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote>
<cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>


Además la conversación no deja de ser un simple listado, con el que le agregaremos los tags para ello

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who’s on first?</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>I mean the fellow’s name.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
</ol>


Las ventajas de utilizar este formato de listados lo veremos en la segunda parte. No hay que olvidar que la utilización correcta del formato muchas veces da pie a que el desarrollador se encuentre limitado con tales recursos debido a que la diversidad del contenido mostrado muchas veces supera a la evolución del propio lenguaje, es por eso q siempre se anima a los desarrolladores a que tomen un papel activo con la experimentación y participación en las diferentes discusiones de desarrolladores.

En el siguiente capitulo veremos una posible solución para incrementar el potencial del XHTML: los microformatos

Enlaces recomendados:
The Elements of Meaningful XHTML / Tantek Celik
SimpleQuizzes / Dan Cederholm