Anotaciones personales sobre tecnologías y estándares web, diseño, marketing y otros temas geek :)

Hace poco me preguntaban acerca de la web semántica de la cual tanto se habla en blogs, foros y esquinas geeks. Haciendo referencia al subtítulo de este blog (… anotaciones personales…), intentaré resumir escribiendo mis ideas divagando un poco.

La Web semántica es una Web con un mayor significado y no propiamente por la información neta que se presenta (contenidos de un website), sino por la forma y estructura en la cual la información es presentada a sistemas (siendo éste un software capaz de leerla, interpretarla, procesarla y compartirla con otros sistemas).

El funcionamiento de la web no semántica a día de hoy (y centrándome en la relación buscadores/usuarios) podría definirse como:

• Millones de usuarios con poca precisión en sus consultas realizadas
• Mucha información redundante, basura, sensible al vocabulario y fácilmente indexable
• Mucha información de calidad, no clasificada (o no etiquetada) no siempre indexable por lo tanto no de fácil acceso
• Pocos sistemas capaces de indexar e interpretar información y responder a consultas avanzadas de usuarios
• Poca interacción  datos - sistemas - usuarios
• Capacidad de indexar muchos datos, pero poca información y escaso conocimiento.

La web semántica mejoraría los anteriores ítems en lo siguiente:

• Los sistemas software serían capaces de interpetar el significado de los datos, por lo tanto capaces de procesar e interpretar información y proporcionar conocimiento
• Interoperatividad entre sistemas distribuidos
• Búsquedas potencialmente más específicas

En definitiva, mayor éxito en la búsqueda de información para el usuario.

Profundizando un poco en el concepto de “web semántica”, podemos decir que su objetivo es llegar a convertir a la Web en una “gran base de datos distribuida” ofreciendo:

• Información clasificada
• Jerarquía en los datos
• Metadatos de los datos

También es verdad que personalmente veo dos profundidades alcanzables en el concepto de Web semántica:

Un primer nivel: correcta sintaxis (x)html

El nivel más superficial que veo, es aquel donde nos encontramos con una Web semántica en lo referente al correcto uso de las etiquetas (x)HTML. No sólo a una correcta sintaxis validándo el código, sino utilizándo las etiquetas semánticamente idóneas, como por ejemplo:

• H1,H2, H3, H4, H5, H6: correctamente jerárquizados para títulos encabezados
• P: para párrafos de textos
• UL, OL: Para listas de elementos, como por ejemplo un menú de links
• STRONG, EM: para resaltar o enfatizar partes de textos
• CITE, ABBR, ACRONYM, CODE, DEL, INS, LABEL .. etc: dependiendo de qué tipo de texto sea para darle valor semántico según lo que representen en el contexto real.
• Proporcionar textos alternativos o complementarios a imágenes, tablas, deficiones
• Escribiendo un código semánticamente correcto como podría ser:

<h1 class="titular">Películas</h1>
<div class="pelicula">
<h2 class="titulo">Extraño Suceso</h2>
<span class="director">Terence Fisher, Antony Darnborough</span>
<span class="fecha">1950</span>
<span class="duracion">86 min</span></div>

Sería como poder averiguar parcialmente la estructura de la base de datos a partir de una simple observación del código html de una págin generada dinámicamente con datos de una base de datos. Viendo el código anterior, (y partiendo de que se trata de una web dinámica con base de datos) podríamos afirmar ciertos campos de la supuesta tabla “películas” como {titulo, director, fecha, duración…}. ¡Exacto! Un buen indicador de que una web ha sido maquetada semánticamente correcta sería aquella que aproximadamente dejase entrever su estructura de la base de datos.

Un segundo nivel: tecnologías…

Referente a la forma de ofrecer información de forma que sea “tratable”, es decir, leída y procesada por sistemas intercomunicados. Aquí es donde intervienen tecnologías como RDF, XML Schemas, OWL y conceptos como ontologías, microformatos los cuales salen del objetivo de este post.

Referencias para ampliar información:

• Guía breve sobre la Web semántica [del w3c.es] (en español)
• Resumen interesante [web-semantica.org] (en español)
• Especificación RDF en español
• Introducción a la web semántica [w3.org] (en inglés)
• Metadatos de Dublin Core (en inglés)
• Sobre microformatos (en inglés)

Aunque poco a poco me estoy desvinculando de ASP, hace poco me pedían unas cuantas líneas de código para generar un documento XML partiendo de los datos almacenados en una base de datos ACCESS.

4 pasos:

1. Cabeceras
2. Conexión a la base de datos
3. Consulta a la base de datos
4. Generar el árbol XML con los datos

Cosas básicas en ASP clásico:

• Nada de puntos y coma al final de cada línea (no existen delimitadores de líneas)
• Los nombres de variable no llevan ningún prefijo o carácter especial delante
• Para comentar código se utiliza un apóstrofe justo delante de la frase a comentar. (nada al final)

estas tres cosas hacen que me parezca realmente cochinote este lenguaje.

El código siguiente se conecta a la base de datos “mis-libros” que está en el directorio “datos”, y se crea un XML con una colección de libros, y para cada libro se muestra: su isbn, su titulo y autor.

 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
 
<%
Response.CharSet = "iso-8859-1"
response.ContentType = "text/xml"
 
set conn=Server.CreateObject("ADODB.Connection")
conn.provider="Microsoft.Jet.OLEDB.4.0;"
conn.open
server.mappath("datos/mis-mibros.mdb")
 
consulta = "SELECT [libros].id, [libros].titulo, [libros].autor FROM libros"
set rs = Conn.Execute(consulta)
rs.MoveFirst()
 
response.write("<coleccion>")
 
while (not rs.EOF)
 
response.write("<libro>")
 
response.write("<id>" & rs("id") & "</id>")
response.Write vbCrLf
 
response.write("<titulo>" & rs("titulo") & "</titulo>")
response.Write vbCrLf
 
response.write("<autor>" & rs("autor") & "</autor>")
response.Write vbCrLf
 
response.write("</libro>")
 
rs.MoveNext()
wend
rs.close()
 
conn.close()
 
response.write("</coleccion>")
%>

Después de ejecutar este código se podría mostrar algo como esto:

 
<coleccion>
 
<libro>
<id>123-AAA</id>
<isbn>titulo abc</isbn>
<autor>autor A</autor>
</libro>
 
<libro>
<id>222-QWERT</id>
<isbn>titulo sss</isbn>
<autor>autor B</autor>
</libro>
 
<libro>
<id>333-RTC</id>
<isbn>titulo def</isbn>
<autor>autor C</autor>
</libro>
 
</coleccion>

Para hacer pruebas en local, sin necesidad de tener el servidor Microsoft IIS, recomiendo utilizar Baby server (http://www.pablosoftwaresolutions.com/html/baby_web_server.html).

Se trata de una alternativa gratuita y muy ligera. Por defecto tiene configurado como puerto de escucha el puerto 80, para evitar conflictos entre Apache y Skype, tuve que cambiarlo al 8080.

Todos los elementos HTML tienen un valor por defecto que es interpretado por los navegadores. El problema es cuando esa interpretación no es la misma en cada uno de los navegadores. Esto potencialmente ocurre cuando trabajamos “tableless”, es decir, sin tablas y simplemente usando divs para la distribución y maquetación de los contenidos de una web. (a excepción de colecciones de datos tabulados, para los que si utilizaremos tablas, que es para lo que semánticamente están pensadas).

Dado que el problema viene dado por la diferente interpretación que hacen los navegadores de los valores por defecto de los elementos HMTL, nuestro objetivo será anular esos valores reseteándolos. Para ello, utilizaremos una hoja de estilos base “reset.css”.

Existen dos “reset.css” muy conocidas, utilizadas y por lo tanto muy testeadas que son:

1. reset.css de Yahoo IU
2. reset.css de MeyerWeb (aunque Inicialmente estuvo basada en la de Yahoo IU, ha ido evolucionando logrando una gran aceptación en el mundo CSS, y es la que personalmente me gusta más)

Pongamos un ejemplo de un documento HTML:

<h1>Encabezado de primer ninel</h1>
<h2>Encabezado de segundo ninel</h2>
<h3>Encabezado de tercer ninel</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ante.
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ante.
<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>
<ol>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ol>

A continuación vemos cómo sería interpretado por un navegador sin utilizar ningún reset:

y a continuación, se muestra cómo sería interpertado utilizando una hoja de estilos reset.css

Si nos fijamos, se han perdido todos los valores por defecto por ejemplo:

• El mayor tamaño de letra de los encabezados: h1, h2, h3 … y su mayor grosor (negrita)
• El margen que tienen los elementos H1, H2, H3 … y los párrafos
• El estilo de las listas: no contienen viñetas, ni margen ni relleno (padding)

A partir de este momento, podremos crear una nueva hoja de estilos complementaria, donde definamos el estilo de nuestra web, partiendo desde cero.  A cambio de haber resuelto la mayoría de quebraderos de cabeza por las diferencias entre navegadores, tendremos que preocuparnos de detalles que antes dábamos por hecho y que hemos observado que se han eliminado.