Aplicaciones web multiplataforma con XSL y XML: un reto SEO

Jueves, 24 de marzo de 2011 | sin comentarios home title

Gracias al uso de XSL vamos a transformar un XML para lo que nos convenga.

Lo primero, la utilidad, una aplicación en PHP o Java o cualquier otro lenguaje, como por ejemplo un juego o un TPV, una tienda, un portal…, cualquier tipo de aplicación puede compartir datos como hemos visto en los cursos y talleres de servicios web, pero podemos avanzar un poco más: si comprendemos el uso de una plantilla XSLT que transforme un fichero XML, siendo este la salida de nuestra aplicación, en un fichero XHTML que el navegador interpreta, sea en un móvil, un ordenador de escritorio o cualquier otro formato que necesitemos…entonces, las posibilidades son ilimitadas.

Para nosotros como webmasters, programadores, diseñadores…, un XSLT es un fichero que sirve para dar formato HTML a un fichero XML.
http://es.wikipedia.org/wiki/Extensible_Stylesheet_Language_Transformations
¿Cómo?
En español, si abres un fichero .XML con el navegador, éste lee la cabecera buscando de qué manera interpretarlo, aquí entra en juego el esquema XSLT, donde la T es de template, o sea, plantilla, en nuestro caso, una plantilla XHTML.
Bueno, vamos a los ejemplos, éste en concreto es de la W3C:
http://www.w3schools.com/xml/simplexsl.xml
como ves, es una dirección .XML que interpreta el navegador, incluso el IE6 :-).
Esto lo hace gracias a que en la cabecera aparece:

<?xml-stylesheet type=”text/xsl” href=”simple.xsl” ?>
entonces, usa la hoja de estilos o plantilla para dar formato que está en la misma dirección pero con distinta extensión:
http://www.w3schools.com/xml/simple.xsl
como ves, este fichero se basa en un esquema de TRANSFORMACIÓN

, lo que quiere decir que va a tomar el contenido del fichero inicial .XML y usando las reglas del XSL va a convertir las etiquetas con nombres comunes, en el ejemplo, son elementos del desayuno, ej.) “<breakfast_menu>” , en divisiones del tipo:
——-
<div style=”..”>
<span>
<!–etc.–>
</span>
</div>
——-
En concreto, esta regla es :
________________________________
<xsl:for-each select=”breakfast_menu/food”>
[CODIGO XHTML]
</xsl:for-each>
________________________________
para extraer los valores de un elemento de un nodo xml, se utiliza <xsl:value-of select=”RUTA/NOMBRE_NODO”/>
que es lo que se utiliza en el ejemplo para el precio, nodo <price> (que está dentro de <food>, que está dentro del menú <breakfast_menu>, que es la raíz o root del documento).
Para mostrar el valor de un atributo, por ejemplo,si a cada nodo <price> le añadimos la moneda:
<price currency=”dollar”>8.50</price>
en la plantilla xslt ,el valor se sacaría, así:
<xsl:value-of select=”price/@currency”/>
ya que estamos dentro de un bucle (o loop) que recorre todos los elementos del tipo
breakfast_menu/food
es decir, todos los <food>, dentro tienen un <price> y sacamos el atributo currency con la @.

La lista completa de referencias de XSL con templates está en:
http://www.w3schools.com/XSL/xsl_w3celementref.asp

Este es un ejemplo sencillo porque no incluye ningún DTD o definición de datos (en lenguaje XTiger), este se suele utilizar para hacer las cosas bien como ingenieros, …este DTD es un fichero que está por debajo del XML y es el que determina cómo se debe construir el árbol DOM completo, es decir, si no se siguen las reglas del DTD base, el fichero XML no es válido. Pero esto ya es pa nota jeje…hace unos años escribí un generador de código php+xhtml+jscript+css en php-gtk que creaba el esqueleto de una web en función a un xml ,el vídeo está aquí:

Resumiendo, podemos tener una aplicación que genere el mismo código XML para todas las plataformas pero cambiando sólo el esquema XSLT le diremos a la aplicación final que interpreta dicho XML cómo ha de hacerlo. Para el caso de móviles utilizaremos su lenguaje propio, al igual que si fuera una aplicación externa que necesitamos conectar/adaptar con nuestra aplicación, pudiendo usar servicios web como ya vimos en otros tutoriales si necesitamos algo más avanzado.

Para editar XSLT tienes editores a patadas :] ( Amaya )

Más tutoriales:

y más cosas habrá por ahi…

¿Quién está usando XML y XSLT hoy en día?: Blizzard lo utilizó en su primera versión de su web de Starcraft 2 ( XML , XSL -en este caso usan un script PHP que define el idioma y lo coloca en el atributo lang que se interpreta en la plantilla XSL- ), supongo que mantenía una base de datos interna en la empresa y quería reutilizarla por lo que le dió una salida xml y creó un esquema xslt bastante chulo, no me extrañaría que fuera la misma aplicación que usaran para gestionar el trabajo de los empleados… Otras empresas lo utilizan, Microsoft para su Office, OpenOffice también,…las universidades quieren pasar todo a XML, en Sun, digo, Oracle, todo se quiere hacer en función a XML para poder traspasar todas las fronteras y si no pueden usar un xslt para transformar de un lado a otro con facilidad.

Las ventajas de usar XML como código fuente es que podremos ocultar un poco mejor el XHTML final de posibles plagios e intentos de ataque, la información mostrada es muy fácil de leer, esto es bueno para la web semántica (web 3.0!), bueno para el posicionamiento (SEO),claro, de hecho Google anunció que una página en XML y XSLT iría a la cabeza antes que otra en XHTML, las arañas, webbots ,spiders, como queráis llamarlas, graban mejor información en XML y hacen las transformaciones a XHTML…además es un buen reto construir una web en XML,

¿O no?

Componente de Firefox para diseñadores y maquetadores Web: Pixel Perfect

Miércoles, 24 de febrero de 2010 | sin comentarios home title

Estos son algunos de los diseños en XHTML+CSS que existen actualmente en la red y que se basan en el correcto posicionamiento del arte gráfico usando un esquema de divisiones o cajas que enmarcan el resultado final…

Supongo que muchas veces os preguntaréis cómo diseñan estos genios sus páginas web, (mirad estos 35 excelentes diseños de webs e-commerce) no nos hace falta Flash realmente, sino que usando XHTML y CSS se pueden crear maravillas, ya lo estáis viendo.

Sin embargo, la tediosa tarea de colocar cada imagen en su sitio dentro de una división, cada fondo en el renglón adecuado y el pixel colocado en el milímetro ideal…es una tarea de titanes!, pero para eso amigos tenemos la herramienta Pixel Perfect…para colocar perfectamente los gráficos dentro de nuestra estructura y a mano :)

Y para muestra, un vídeo:

Para instalar esta extensión de Firefox sólo hay que pinchar aquí. (Debes tener Firebug instalado)

Para usarlo: Vamos a nuestra web, pulsamos F12 o sobre el icono de Pixel Perfect

y añadimos una capa con “Add overlay” que será la imagen que necesitamos colocar mediante valores CSS.

Por ejemplo:

Ahora podemos colocar la imagen que hemos añadido gráficamente, para obtener el HTML+CSS correspondiente a esta colocación pinchamos en la pestaña “HTML” y buscamos el objeto añadido dinámicamente o bien pulsamos en “Inspeccionar” y luego en la capa con la imagen superpuesta de modo que podemos copiar fácilmente el código creado por el generador de la extensión.

Felices modificaciones CSS :D

Aplicación web de reservas, ofertas y otros para apartamentos

Domingo, 31 de enero de 2010 | 2 comentarios home title

Uno de los prototipos del framework zen php más avanzados de los años 2007 a 2008 fué desarrollado mientras trabajaba en Agencia Q4, dónde se realizó el diseño de la web (la plantilla XHTML+CSS) mostrada en el vídeo.

Técnicamente: en esta aplicación web se rellena el contenido de las plantillas usando una estructura de clases embebida en una clase principal, es decir, toda la aplicación es un único objeto con referencias a cada parte.

Las plantillas fueron mejoradas usando JQuery para las operaciones de administración con AJAX y validaciones de formularios, animaciones, etc.

Se utilizan las sesiones de usuario para mantener los datos, al enviarse un formulario de reserva se avisa al encargado de los apartamentos y puede ver dicha información de reserva a través de un enlace en el e-mail enviado automáticamente que va directamente a la administración permitiendo realizar las reservas oportunas en el apartamento correspondiente a la reserva.