Anotaciones discontínuas, en el tiempo y en su forma (Ruben Divall)

Rubendivall.es »  Blog » Estándares web » Código semántico, ejemplos básicos

Código semántico, ejemplos básicos

Publicado el: 21/05/2008 - 02:14

Usar las etiquetas html correctamente para dotar a nuestro documento de código semántico no es nada trivial, desde la primera línea de código nos podemos plantear la primera duda. ¿El logotipo de la página web es un <h1> (que lo introduciremos vía hoja de estilos CSS) o bién es una imagen?. Según muchos lo correcto es que sea una imagen, porque el logotipo tiene contenido y significado, otros los insertan como un h1 para que el código sea más bonito. Yo según...

La complejidad, inicial a la que nos enfrentamos es "linealizar el contenido". Con "linealizar" me refiero a transformar las dos dimensiones de la pantalla en una única línea -la de nuestro código- compuesta por titulos, subtitulos, menú, listas, etc. Generalmente se suele ir capeando de izquierda a derecha o de derecha a izquierda para poder ir jugando a posteriori con los floats:left o right, pero eso no nos interesa ahora. Lo que buscamos es identificar que etiqueta xhtml es cada cosa.

Para intentar explicar cómo marcar texto correctamente nos vamos a olvidar de layouts (maquetas), CSS y diseño, abstrayendo todo al código y su marcado con un ejemplo gráfico. El ejemplo escogido es alguna publicación en papel que queremos transformar en html. Creo que este ejemplo es muy ilustrador ya que en los periódicos y revistas se suele ser muy riguroso al maquetar los diferentes elementos del texto: las noticias, encabezados, entradillas, etc.

La portada del País con código semántico

El código quedaría de la siguiente forma:

<h1>El país</h1>
<p>www.elpais.com</p>
<p>El periódico global en español</p>
<p>Domingo 21 de Octubre de 2007 | Año XXXII | Número 11.089 | Edición Madrid | Precio 2 euros</p>
<ul>
   <li>
     <h2>La hora de salvar el planeta</h2>
     <img src="..." alt="Hombre cabeza" longdesc="Montaje de un hombre con una cabeza pintada con la tierra" />
     <p>50 ideas para luchar por una Tierra herida. <strong>El País Semanal</strong></p>
   </li>
   <li>
     <h2>289 formas de crear adicci&oacute;n</h2>
     <p>Lista de aditivos, incluidos tóxicos en el tabaco. <strong>Página 42</strong></p>
   </li>
   <li>
     <h2>La guerra no acaba nunca.</h2>
     <p>Entrevista con la nueva Nobel Doris Lessing. <strong>Domingo</strong></p>
   </li>
</ul>

Con este recorte podríamos discutir muchas etiquetas. ¿Porqué la entradilla (naranja) es p y no un h3?, o ¿por qué una lista?. Particularmente me gusta que al final de tanto encabezado haya algún parráfo <p></p> y no me gusta abusar de los encabezados. La lista, pues... para ilustrar mejor los ejemplos, aunque podriamos haber metido en una capa <div> todos los <h2> y <p>.

Evidentemente la complejidad de una página web es mucho mayor que un simple recorte de periódico. Tendremos muchos más elementos estructurales en el documento dónde entran en juego otras etiquetas xhtml (con ejemplos) que "la experiencia" te dirá cuándo y dónde hay que usar.

Como veís hacer un documento web con código semántico es facil pero hay que ser sistemático y tener muchas horas de vuelo para no desesperarse.

Lo normal cuando se entrega un proyecto completo, es entregar una plantilla junto con un CMS, dónde el cliente sólo tendrá que preocuparse de introducir contenido con parrafos, strong, em, alguna que otra lista y enlaces, ya que los títulos y otros elementos se suelen generar automáticamente. Aunque a los creadores de contenido os animo a que indageis más sobre las etiquetas html para dotar de mayor riqueza a vuestros documentos.

David Navarro el día 22/05/2008 - 19:21

Ya estoy aquí. :-)

Antes que nada, decirte que leí tu respuesta en el otro post, y entro al trapo aquí porque me apetece un poco de guerra dialéctica, aunque tengo claro que no tengo nada que enseñarte.

"Semántica" indica "significado". La etiqueta patatínpatatan no dice nada acerca de lo que significa que quiera que vaya a ser marcado. Sólo indica CÓMO mostrarlo, no QUÉ es.

Si lo que contiene está en castellano, lo entenderé. Si está en chino no, por muy grande que sea la letra. (Esto me recuerda a cuando se le grita a un inglés para que nos entienda mejor cuando le hablamos en nuestro idioma, :-D ).

Un ejemplo semántico es esto:

2006-02-17
Apache Jakarta JMeter


(fuente: http://svn.apache.org/repos/asf/jakarta/jmeter/trunk/doap_JMeter.rdf)

Otro ejemplo de semántica en Webs viene dado al utilizar microformatos:


Juan Pérez
El Ejemplo S. A.
604-555-1234
http://ejemplo.com/


(fuente: http://es.wikipedia.org/wiki/Microformatos)

¿Cómo hacer una Web con semántica?, pues por ejemplo a tu adorada Web del ayuntamiento de Granada le metía unas etiquetas hCalendar para los eventos de agenda.

Ruben el día 22/05/2008 - 20:44

David tienes toda la razón, y he estado usando web semántica cuando me refiería al código semántico. Código que con ciertas etiquetas que le dontan al bloque del texto un cierto significado dentro de su arquitectura, ya que no es igual escribir:

  • <p>David Navarro me dijo "Semántica" indica "significado".</p>
  • <p>David Navarro me djo <cite>"Semántica" indica "significado".</cite></p>

El segundo ejemplo es más rico, para el buscador, para el invidente, pero para tí y para mí nos va a resultar igual.

Cada estoy más convencido que lo más importante de la red es el contenido y no los continentes. Lamentablemente en Internet y más en el gremio lo que destaca son los continentes. Se suele decir: mira que página web más bonita en vez de: que artículo más interesante, cuando con los libros nunca ha pasado eso, pero bueno nos idiotizamos y es indiscutible.

Por cierto, dijiste por algún comentario que eras generador de contenidos, pues ayer ví un banner por alguna página yankie que decía algo como Custom Freelance Writing and Editing.

David Navarro el día 23/05/2008 - 09:44

Los contenidos para usuario no son nada sin buenos continentes (opino).

Microformatos no es más que un apaño hasta que la Web Semántica llegue a la capa de presentación... y para llegar ahí aún nos queda un buen trecho.

Por culpa de ese "trecho" se invierten años o millones (euros/dolares) en proyectos para hacer scrapping inteligente del Caos de la Web, y aún no he visto una solución que cumpla. Yo participé durante 2 años en uno.

Vosotros, los buenos diseñatas (apelativo totalmente cariñoso, conste), facilitáis el trabajo con buenas prácticas de separación de contenidos y aspecto. ¿Código semántico?, bueno, aceptamos barco, sea lo que sea, ayuda y mucho al objetivo final: que la información llegue al usuario, y que el usuario no tenga que ir a la información (Web 1.0).

En cuanto al asunto que estamos tratando, ¿qué es semántica en diseño Web?, sinceramente creo que es el peor momento para llamarlo así. La existencia de "unacosallamada" Web Semántica ha llegado al público general, y los pobres aún no saben que nuevo invento friki es ese... y utilizar "Semántica" para hablar de HTML no ayuda.

Yo mismo, que llevo 5 años trabajando en Web Semántica, me quedé alucinado al oíros hablar de Semántica en periódicos (no eres el primero). Ahora, gracias a tu ejemplo, entiendo que NO es Web Semántica.

Todo esto no es más que otro ejemplo de "ambigüedad semántica". Así de rico es nuestro lenguaje.

Ruben el día 23/05/2008 - 10:46

Has visto David como la portada de El País era un buen ejemplo, jajaja. Si, yo también lo he escuchado y leido en medios, es más también en prensa inglesa lo he visto y de ahí lo he acuñado.

Nota para el futuro :P

Escribe un comentario

* = campos obligatorios

:

:

:


Mil novecientos más 84 =