aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace más de un año que iMeneame vió la luz, la versión para el iPhone de Meneame.net (versión no oficial) ha tenido que aguantar con un diseño realmente horrible (evidentemente mio) hasta que me he topado con Lucas Savelli de WydStudio.

Gracias a Lucas, iMeneame ha adquirido un aspecto más moderno y más eficiente para el dispositivo que fue creado. Debido a que el contenido lo saco del RSS de Meneame me veo condicionado a lo que este formato nos devuelve, las limitaciones del XSL tampoco han ayudado mucho, pero creo que el resultado es más que satisfactorio apesar de las salvedades encontradas.

Espero que os guste, y me comuniqueis todos los fallos e impresiones.

Hace un tiempo vimos como se veía Digg desde el iPhone, una versión lite de Digg adaptada para dedazos. Pues ahora le toca a Meneame.

Este fin de semana he estado trasteando un poco, leyendo la documentación de Apple para optimar el contenido y los sitios web para el iPhone/iTouch y he pensado, «¿que mejor que Meneame para probar esto?». Y me puse manos a la obra.

Desarrollo

Está desarrollado en PHP y se basa sobre el Feed de Meneame.net, usando transformaciones XSLT para convertilo en HTML, he desarrollado una mini caché de 60 segundos de los ficheros HTML, que aliviará la transformación y lectura del feed.

Resultado 

El resultado es una versión, ligera y optimizada que los usuarios de iPhone/iTouch podrán utilizar perfectamente. Aún se haya en estado Beta, pero es bastante estable y desde el iTouch se ve perfectamente.

[Descargar][Demo][iTouch Appz]

Actualización
Se han añadido los comentarios de cada entrada, mediante la lectura del RSS correspondiente y cacheandolo transformado con el resto de la noticia.

Esta tarde Enzo me preguntaba si sabía algo acerca de la implantación de XSLT 2 en el nuevo Firefox 3.0 y la verdad es que me ha hecho mucha curiosidad el tema y he estado indagando un poco sobre el tema.

Al parecer Firefox 3.0 no integrará, o no hay planes al respecto,  XSLT 2 aunque tampoco se limitará a mantener la versión actual (XSLT 1.0)  y añadirá EXSLT, una iniciativa de la cominidad para proveer de extensiones al XSLT, entre ellas podemos ver mejoras:

• Fechas
• Dynamic
• Comunes
  
• Funciones
• Matemáticas
• Random (gracias a Dios!!)
• Expresiones regulares
• Set’s
• Strings

Hasta el momento estos son los datos que he encontrado, quizas decidan cambiar los planes e implementar el estandar en el último momento, pero hasta entonces, solo podemos esperar.

Ayer Ajaxian, me alegraba con un nuevo framework para aplicar templates al javascript. En este caso se trata de un framework capaz de aplicar fichero XSL a nuestros XML’s, Freja es el nombre de este framework.

¿Que es Freja?

Freja es un framework especializado para la creación te templates para aplicaciones web visuales, para que nos entendamos, nos permite transforma nuestras códigos XML, en algo legible por el usuario de forma realmente simple.

Únicamente necesitas conocer el lenguaje XSL para poder distrutar de esta librería.

Ejemplo de uso

//XML
<?xml version="1.0" encoding="utf-8"?>
<items>
	<item id="item1">
		<name>Black Bean and Smoked Tomato</name>
		<description>with Goat Cheese, a touch of Cumin and Cayenne</description>		
		<price>$3.80</price>	
	</item>
	<item id="item2">
		<name>Baked Brie Wheel</name>
		<description>Oven baked and served with condiments and crackers</description>		
		<price>$8.85</price>	
	</item>	
	<item id="item3">
		<name>Pork Green Chili and Chips</name>
		<description>Homemade pork green chili served with a basket of white corn tortilla chips</description>		
		<price>$7.95</price>	
	</item>	
</items>
//XSL
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" encoding="UTF-8"/>
<xsl:template match="/">
	<xsl:apply-templates />
</xsl:template>
<xsl:template match="items">
<div>
	<xsl:apply-templates />
	<p><a href="#" class="addLink">Add a new menu entry</a></p>
</div>
</xsl:template>
<xsl:template match="item">	
<div>
	<h4><xsl:value-of select="name" /> &#xA0; <small><a href='#' id='{@id}' class='editLink'>edit</a></small></h4>
	<p><xsl:value-of select="description" /></p>
	<p><em>Price: <xsl:value-of select="price" /></em></p>
</div>
</xsl:template>
<xsl:template match="text()" />
</xsl:stylesheet>
//Javascript
// Freja Tutorial 3 - http://www.csscripting.com/freja

Freja.AssetManager.HTTP_METHOD_TUNNEL = null;
Freja.AssetManager.XSLT_SERVICE_URL = "srvc-xslt.php";	// For safari only

// Load Model and Views
var menu = getModel('models/data.xml');
var display = getView('views/display.xsl');
var edit = getView('views/edit.xsl');

// Handles 'ok' button in edit view
edit.behaviors["editForm"] = {
	onsubmit : function() {
		menu.updateFrom(edit);
		display.render(menu, "content");
		return false;
	}
};
edit.behaviors["cancelButton"] = {
	onclick : function() {
		display.render(menu, "content");
		return false;
	}
};

// Handles 'edit' link next to each menu item
display.behaviors["editLink"] = {
	onclick : function(n) {		
		edit.render(menu, "content", {itemid:n.id});
		return false;
	}
};

// Handles 'add new menu item' link at the bottom of the list
display.behaviors["addLink"] = {
	onclick : function() {
		var newitem = Freja._aux.loadXML(Freja._aux.xmlize( {name: '', description:'', price: '' },"item"));
		var root = menu.document.documentElement;	
		newitem = root.appendChild(Freja._aux.importNode(menu.document, newitem.documentElement));
		var newid = 'item'+root.childNodes.length;
		newitem.setAttribute('id',newid);
		edit.render(menu, "content", {itemid:newid});
		return false;
	}
};

// Let's go.
window.onload = function() {
	display.render(menu, "content");
}

[ Descargar][Demo][Tutorial]

Que javacript es un lenguaje en auge, y que gracias a este auge se está asegurando un futuro hueco en todos los navegadores, no es una novedad. Por ello cada vez más van saliendo aplicaciones, utilidades y mejoras a este lenguaje.

Cade vez más se está apostando por él y hay muchas herramientas que actualmente vulneran la accesibilidad web, pero que a mi parecer en un futuro pueden ser un buen aliado para trabajar con Javascript.

JSLT, es una muestra de ello, una librería javascript que emula el trato de XSLT en a nuestros XML. En la laboriosa y árdua tarea de parsear XML con Javascript generalmente nos encontramos con códigos infumables, por este motivo herramientas que nos facilitan esta tarea me parecen muy interesantes.

XML

<xml>
 <folder name='F1'>
  <file>A</file>
  <file>B</file>
  <file>C</file>
 </folder>
 <folder name='F2'>
  <file>D</file>
 </folder>
 <folder name='F2'>
  <file>E</file>
  <file>F</file>
 </folder>
</xml>

XSLT

<xsl:foreach select="folder">
   <xsl:variable name="c"><xsl:value-of select="count(files)" /></xsl:variable>
   Folder <xsl:value-of select="@name" /> has <xsl:value-of select="$c" /> file\n
   <xsl:foreach select="file" >\s
      File: <xsl:value-of select="text()" />
      <xsl:if test="position() != last()">,</xsl:if>
   </xsl:foreach>\n
</xsl:foreach>

JSLT

[foreach('folder'){]
   Folder {@name} has [%c] file\n
   [foreach('file'){]\s
      File: [%$'text()'.toLowerCase();]
      [if(!last)%',']
   [}]\n
[}]

Tenemos una url en donde probar nuestro JSLT y trastear un poco con él. No soporta funcionalidades como position(), pero la idea es muy buena y atractiva.

Via

XSLT o Hojas de estilos aplicadas a XML (eXtensible Stylesheet Language) , son sin duda una herramienta de futuro y importante de conocer aunque sea únicamente la base. He pensado en que podría aprovechar que es principalmente la tecnología que utilizo en el trabajo, y lo llevo bastante por mano, para hacer un pequeño manual en capítulos con lo más importante de este lenguaje.

Continua —>