Bienvenido
Nov
28

Semantic Coding

por Martin | servicios, tutoriales | 3 Comentarios

W3C

Antes de comenzar a escribir sobre código semántico, hare una pequeña introducción sobre algunos conceptos.

Un poco de Historial

Hace algunos años en Argentina construir un sitio web, se decía que era solo para entendidos. Pero una vez que estabas mínimamente preparado y con las herramientas correctas parecía ser algo bien simple. Con un buen diseño en Photoshop 4, un buen maquetado con frames en Front-Page y algunas tablas en el contenido de tu sitio. Ya disfrutabas de tu sitio web en el cyber espacio alojado en geocities de modo gratuita.

Hoy con la popularidad de Internet, el acceso con banda ancha, el crecimiento en software y hardware, las wiki y los blogs entre otras cosas. Abrieron la puerta a muchos “especialistas” o “webmaster”. Que, con un poco de lectura de HTML y manejo de photoshop dicen estar listos para construir Sitios Web. Sin ánimo de ofender a nadie, hacer un Sitio Web no es solo un buen diseño y un maquetado breve en HTML/xHTML. Sino que se debe tener en cuenta muchos más detalles, que hacen a la calidad, navegabilidad, portabilidad, accesibilidad y posicionamiento en buscadores.

Código semántico

W3C nos ofrece recomendaciones de varios tipos de documentos en HTML/xHTML, CSS y JavaScript. Para poder generar un sitio válido, semánticamente correcto y bien dividido.

Estas recomendaciones en cierta forma nos dejan tranquilo que nuestro sitio web funcionara para cualquier navegador. Siempre y cuando el navegador respete las recomendaciones del W3C.

Si analizamos un poco los documentos que nos ofrece W3C para cada doctype ya sea HTML 4.01, XHTML 1.0, etc. Podemos observar que existen muchísimas etiquetas (TAGS) disponible, de las cuales ni conocemos o nunca hemos usado. Sería un buen momento para meter carne al asado como dirían algunos. Es hora de conocer un poco más allá de TD, TR, BR, STRONG, BODY, HTML.

En sí el concepto de código semántico lo que nos quiere transmitir, es que cada contenido o texto perdido por el sitio este encerrado por la etiqueta que le corresponde y no por cualquier otra. Por más que nuestro sitio se vea bien y lo hayamos probado en safari, firefox, ie y opera.

¿Que ganamos con eso? Mucho. Entre ellos velocidad y agilidad en la carga de nuestro sitio web. También ayuda con el SEO (optimización para motores de búsqueda), que nuestro código sea entendible y legible. También no debemos olvidar que no solo existen los browser para la lectura de HTML, sino que existen los lectores de Feed o RSS y miles de aplicaciones que interpretan código. Por lo cual mientras más se adecue a las recomendaciones mucho mejor.

Este código es pobre semánticamente

HTML:
  1. <div class="page-heading">Titulo de la pagina</div>
  2. <div class="text-paragraph">Algo de texto explicando de qué se trata este sitio.</div>
  3. <a class="menu-item" href="/item-1">Menu item 1</a>
  4. <a class="menu-item" href="/item-2">Menu item 2</a>
  5. <a class="menu-item" href="/item-3">Menu item 3</a>

Este código es rico semánticamente

HTML:
  1. <h1>Titulo de la pagina</h1>
  2. <p>Algo de texto explicando de que se trata este sitio</p>
  3. <ul class="menu">
  4.         <li><a href="/item-1">Menu item 1</a></li>
  5.         <li><a href="/item-2">Menu item 2</a></li>
  6.         <li><a href="/item-3">Menu item 3</a></li>
  7. </ul>

Les dejo algunas de las etiquetas más utilizadas:

  • STRONG: Aplica formato de Negrita al texto.
  • CITE: Para hacer citaciones o hacer referencia a otro recurso.
  • P: Indicar Párrafo
  • H1, H2, H3, H4, H5, H6: Para indicar títulos o elementos de cabecera.
  • EM: Indicar cursiva
  • ABBR: Abreviaciones
  • VAR: Indicar una instancia de variable
  • ACRONYM: Indicar acrónimo

En resumen, lo que debemos hacer es entender la posibilidad de etiquetas que nos ofrece el doctype con el que estemos trabajando, para saber y analizar cual de ellas utilizaremos como mejor opción.

Aquí les dejo un link donde tienen información técnica sobre este tema de código semántico: http://brainstormsandraves.com/articles/semantics/structure

Espero haber podido orientarlos.

Tags: ,

dibusoft mmdv