Cómo crear un lector de RSS con jQuery Mobile

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Dos veces al mes, revisitamos algunas de las publicaciones que se han convertido en las favoritas de nuestros lectores a lo largo de la historia de Nettuts+. Este tutorial se publicó por primera vez en octubre de 2010.

Hoy nos adentraremos en jQuery Mobile, que, al momento de escribir este artículo, se encuentra en estado RC1. Vamos a crear un sencillo lector de RSS de Tuts+ utilizando PHP y jQuery Mobile. Cuando hayamos terminado, podrás agregar este sencillo proyecto a tu teléfono iPhone o Android con el clic de un botón, ¡y contarás con las habilidades para crear tus propias aplicaciones web móviles personalizadas!

Paso 1: Bosquejar el proyecto

Siempre es útil bosquejar primero lo que quieres que tu proyecto haga o logre.

Mostrar una lista de cada sitio de Tuts+, junto con su logotipo cuadrado
Mostrar la fuente de cada sitio al hacer clic en cada uno de ellos
Crear una hoja de estilo básica de *artículo* para representar cada publicación
Crear un icono de Apple-touch para los usuarios que agregan la "aplicación" a sus teléfonos
Utilizar YQL para recuperar la fuente RSS deseada
Implementar una forma básica de almacenamiento en caché que ocurra cada tres horas usando "archivos de texto"

Paso 2: Comenzar

El siguiente paso es comenzar a crear nuestro proyecto. Sigue adelante y crea una nueva carpeta (asígnale el nombre que desees) y agrega un nuevo archivo header.php. *Ten en cuenta que este proyecto utiliza PHP. Si no estás familiarizado con este lenguaje, ¡no dudes en omitir las partes que involucran PHP! Dentro de este archivo, haremos referencia a jQuery Mobile, su hoja de estilo y cualquier otro recurso que necesitemos. Aunque solo sea para mantener el proyecto organizado, he colocado mi archivo header.php dentro de una carpeta includes/.

<!DOCTYPE html> 
<html> 
   <head> 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <title> Tuts+ </title> 

   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
   <link rel="apple-touch-icon" href="img/tutsTouchIcon.png" />

   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

Hay un puñado de cosas que vale la pena señalar aquí.

Se requiere un doctype HTML5. ¡Pero deberías usar eso de todos modos!
La etiqueta X-UA-Compatible obliga a IE a utilizar su motor de renderizado más actual
Necesitamos hacer referencia a la hoja de estilo de jQuery Mobile. Puedes usar su CDN ¡y ahorrar en ancho de banda!
Si quieres designar un icono para cuando los usuarios agreguen tu página web a la pantalla de inicio de su iPhone (o Android), agrega una etiqueta link, con un atributo rel con el valor apple-touch-icon.
Estamos haciendo referencia a la versión más reciente de jQuery: la 1.4.3
Finalmente, estamos cargando el archivo de script de jQuery Mobile (actualmente en Alpha 1)

La estructura básica

El framework jQuery Mobile se puede activar aplicando atributos data-* únicos a tu código. La estructura básica para la mayoría de los sitios se verá similar a la siguiente:

<!-- Let's include the header file that we created above -->
<?php include('includes/header.php'); ?> 
<body>
 <div data-role="page">
 
   <header data-role="header">

   </header>


   <div data-role="content">

   </div>

   <footer data-role="footer">

   </footer>

 </div>
 
</body>
</html>

Agrega el código anterior a un nuevo archivo index.php, dentro de la raíz de tu proyecto.

Tenemos que informar a jQuery sobre nuestro proyecto. Por ejemplo, trata de no pensar en cada archivo como una página. Técnicamente, puedes crear varias páginas a la vez agregando atributos adicionales de ajuste data-role="page". Estas se conocen como páginas internas.

Además, el framework tiene configuraciones y estilos específicos para el header, o encabezado, el área de contenido principal y el footer, o pie de página. Para informar a jQuery Mobile sobre las ubicaciones de estos elementos, agregamos los siguientes atributos.

data-role="header"
data-role="content"
data-role="footer"

No se han aplicado atributos data-role.

Se han aplicado atributos data-role.

Paso 3: Listado de los sitios de tutoriales

Ahora que la estructura de nuestra página index.php está completa, podemos rellenar cada sección con nuestro marcado específico de Tuts+.

<body>
 	<div>
	    <header data-role="header">
	    	<h1> <img src="img/TLogo.png" alt="Tuts+"/> </h1>
	    </header>
	
	    <div data-role="content">
			<ul>
				<li>
					<img src="img/ntLogo.jpg" alt="Nettuts" class="ui-li-icon"/>
					<a href="site.php?siteName=nettuts"> Nettuts+ </a>
				</li>
				<li>
					<img src="img/psdLogo.jpg" alt="Psdtuts" class="ui-li-icon"/>
					<a href="site.php?siteName=psdtuts"> Psdtuts+ </a>
				</li>
				<li>
					<img src="img/vectorLogo.jpg" alt="Vectortuts+" class="ui-li-icon"/>
					<a href="site.php?siteName=vectortuts"> Vectortuts+ </a>
				</li>
				<li>
					<img src="img/mobileLogo.png" alt="Mobiletuts+" class="ui-li-icon"/>
					<a href="site.php?siteName=mobiletuts"> Mobiletuts+ </a>
				</li>
				<li>
					<img src="img/aeLogo.jpg" alt="Aetuts+" class="ui-li-icon"/>
					<a href="site.php?siteName=aetuts"> Aetuts+ </a>
				</li>
				<li>
					<img src="img/photoLogo.jpg" alt="Phototuts+" class="ui-li-icon"/>
					<a href="site.php?siteName=phototuts"> Phototuts+ </a>
				</li>
				<li>
					<img src="img/cgLogo.jpg" alt="Cgtuts+" class="ui-li-icon"/>
					<a href="site.php?siteName=cgtuts"> Cgtuts+ </a>
				</li>
				<li>
					<img src="img/audioLogo.jpg" alt="Audiotuts+" class="ui-li-icon"/>
					<a href="site.php?siteName=audiotuts"> Audiotuts+ </a>
				</li>
				<li>
					<img src="img/wdLogo.jpg" alt="Webdesigntuts+" class="ui-li-icon"/>
					<a href="site.php?siteName=webdesigntutsplus"> Webdesigntuts+ </a>
				</li>
			</ul>
	    </div>
	
	    <footer data-role="footer">
			<h4> www.tutsplus.com </h4>
	    </footer>

	</div>

</body>
</html>

Header (Encabezado): En esta sección, simplemente insertamos el gráfico de Tuts+ y proporcionamos texto alternativo si las imágenes están desactivadas.
Contenido: En el área de contenido, debemos enumerar todos los sitios de tutoriales y aplicar un icono único al lado de cada encabezado. También creamos un enlace a una nueva página, site.php, que se encargará del proceso de recuperación de la fuente RSS. Para mayor comodidad, cuando enlazamos a site.php, también enviamos el nombre del sitio seleccionado a través de la cadena de consulta: siteName=nettuts.
Footer (Pie de página): En la parte inferior, por ahora, simplemente agregaremos un enlace a Tuts+.

jQuery Mobile ofrece una gran cantidad de útiles clases CSS, incluyendo ui-li-icon. Cuando esta se aplica a una imagen, la clase flotará dicha imagen a la izquierda y aplicará 10 px de margen a la derecha.

En este punto, nuestro sitio debería verse como el de la imagen de arriba.

Transiciones de página

Ya que jQuery cargará páginas locales de forma asíncrona con AJAX, podemos especificar cualquier cantidad de geniales transiciones de página. El valor predeterminado es el efecto básico de deslizamiento a la izquierda o deslizamiento a la derecha que la mayoría de los usuarios de teléfonos táctiles conocen. Para sobrescribir el valor predeterminado, utiliza el atributo data-transition en la etiqueta de anclaje.

1	<a href="site.php?siteName=nettuts" data-transition="pop"> Nettuts+ </a>

Transiciones disponibles

slide (deslizar)
slideup (deslizar hacia arriba)
slidedown (deslizar hacia abajo)
pop (ventana emergente)
flip (voltear)
fade (desvanecer)

Paso 4: ListViews

Eh, la imagen mostrada arriba todavía parece un sitio web. Necesitamos hacer que la interfaz se vea un poco más parecida a la de un teléfono. La solución es usar el atributo data-role="listview". Mira lo que sucede cuando no hacemos nada más que aplicar este atributo a la lista de ajuste desordenada.

Vaya, ¡qué mejora! Aún mejor, tenemos acceso a theme-roller, que, con el cambio de una sola letra, nos permite cambiar de tema de color.

1	<ul data-role="listview" data-theme="a">

1	<ul data-role="listview" data-theme="b">

1	<ul data-role="listview" data-theme="e">

Divisores de listas

Ahora, ¿y si quisiéramos dividir esta lista de sitios de tutoriales? En estas situaciones, podemos aprovechar data-role="list-divider", que se puede aplicar al elemento <li>.

A estas divisiones también se les pueden aplicar estilos de rodillos temáticos con letras. Pueden configurarse dentro del padre, <ul>.

1	<ul data-role="listview" data-dividertheme="d">

Obtén más información sobre los divisores de listas.

Ten en cuenta que no vamos a usar divisores para esta aplicación en particular.

Paso 5: CSS

jQuery Mobile se encarga de gran parte del formato; sin embargo, por supuesto todavía necesitamos nuestra propia hoja de estilo para hacer ajustes. Por ejemplo, al mirar las imágenes de arriba, podemos ver que los iconos del tutorial deben subirse un poco. Además, me gustaría usar el rojo de Tuts+ para el color de fondo del encabezado y del pie de página, en lugar del negro predeterminado.

Crea una nueva carpeta, CSS, y agrega una nueva hoja de estilo: a la mía la llamaré mobile.css. Dentro de este archivo, primero ajustaremos la posición del icono:

1	.ui-li-icon {
2	top: 9px;
3	}

A continuación, crearemos un puñado de clases que llevarán el nombre de sus respectivos sitios de tutoriales. Estas clases contendrán el formato y color específicos para el sitio. Por ejemplo, Nettuts+ tiene un color verde más oscuro, mientras que MobileTuts+ es amarillo.

.tuts { background: #c24e00; }
.nettuts { background: #2d6b61; }
.psdtuts { background: #af1c00; }
.vectortuts { background: #1e468e; }
.aetuts { background: #4a3c59; }
.phototuts { background: #3798aa; }
.cgtuts { background: #723b4a; }
.audiotuts { background: #4b7e00; }
.webdesigntutsplus { background: #0d533f; }
.mobiletuts { background: #dba600; }

Eso debería funcionar por ahora. El último paso en index.php es aplicar la clase .tuts a los elementos header y footer. De esa manera, header y footer mostrarán el color de fondo correcto.

1	<header data-role="header" class="tuts">
2	...
3	<footer data-role="footer" class="tuts">

Paso 6: YQL, PHP y almacenamiento en caché

Ahora es momento de alejarnos del diseño y trabajar en la funcionalidad. Cada uno de los enlaces que creamos hacían referencia a site.php?siteName="siteName". Sigamos adelante y creemos ese archivo ahora.

A pesar de que esta es una aplicación relativamente pequeña, aún debemos esforzarnos por seguir las prácticas recomendadas. En este caso, eso significa que debemos almacenar la menor cantidad posible de PHP en nuestro documento. En lugar de eso, usaremos site.php como una especie de controller. Este archivo gestionará la lógica inicial y luego, en la parte inferior, cargará nuestra plantilla HTML.

Asignación del nombre del sitio

Para recuperar la fuente RSS deseada, primero debemos capturar el nombre del sitio en el que el usuario hizo clic inicialmente. Si revisas un paso anterior, cuando creamos el enlace a site.php, también enviamos el nombre del sitio a través de la cadena de consulta. Con PHP, este se puede recuperar fácilmente usando $_GET['siteName']. Sin embargo, ¿qué pasa si, por alguna extraña razón, este valor no existe? ¿Tal vez se accedió directamente a site.php? Debemos establecer un sitio predeterminado para compensar en caso de encontrarnos con estas situaciones.

1	$siteName = empty($_GET['siteName']) ? 'nettuts' : $_GET['siteName'];

Si $_GET['siteName'] está vacío, estableceremos el valor "nettuts" en la variable $siteName. De lo contrario, será igual al nombre del sitio respectivo.

Seguridad

A pesar de que este es un proyecto pequeño, también vamos a intentar establecer un poco de seguridad. Para evitar que el usuario asigne automáticamente un valor potencialmente peligroso a la clave siteName, asegurémonos de que el valor sea de hecho el nombre de uno de nuestros sitios de tutoriales.

// Prepare array of tutorial sites
$siteList = array(
   'nettuts',
   'flashtuts',
   'webdesigntutsplus',
   'psdtuts',
   'vectortuts',
   'phototuts',
   'mobiletuts',
   'cgtuts',
   'audiotuts',
   'aetuts'
);

// If the string isn't a site name, just change to nettuts instead.
if ( !in_array($siteName, $siteList) ) {
   $siteName = 'nettuts';
}

La función in_array() nos permite determinar si un valor (en nuestro caso, el valor de $siteName) es igual a uno de los elementos de la matriz $siteList.

Almacenamiento en caché

Finalmente, utilizaremos el excelente YQL para realizar nuestras consultas. Piensa en YQL como una API para las API. En lugar de tener que aprender veinte API diferentes, la sintaxis de YQL, que es similar a SQL, permite que sea necesario aprender solo una. Sin embargo, aunque YQL realiza un poco de almacenamiento en caché por su cuenta, guardemos también las fuentes RSS en un archivo de texto en nuestro servidor. De esa manera podemos mejorar un poco el rendimiento.

Comenzamos creando una nueva variable, $cache, y establecemos su valor para que sea igual a la ubicación donde se guardará el archivo almacenado en caché.

1	$cache = dirname(__FILE__) . "/cache/$siteName";

El código anterior apunta al directorio actual del archivo, luego a una carpeta de caché y, por último, al nombre del sitio seleccionado.

Yo he decidido que este archivo almacenado en caché debe actualizarse cada tres horas. Siendo así, podemos ejecutar una rápida instrucción if y determinar cuándo fue la última vez que se actualizó el archivo. Si el archivo no existe, o si la actualización ocurrió hace más de tres horas, consultamos con YQL.

$cache = dirname(__FILE__) . "/cache/$siteName";
// Re-cache every three hours
if( filemtime($cache) < (time() - 10800) ) {
 // grab the site's RSS feed, via YQL
}

Es ridículamente sencillo trabajar con YQL. En nuestro caso lo usaremos para un propósito muy simple: obtener la fuente RSS, en formato JSON, del sitio que se envió mediante la cadena de consulta usando siteName. Puedes experimentar con los diversos comandos utilizando la consola de YQL.

Para consultar una fuente RSS, usamos el comando: SELECT * FROM feed WHERE url="path/to/rss/feed".

Fuente de Nettuts+: http://feeds.feedburner.com/nettuts
Fuente de Psdtuts+: http://feeds.feedburner.com/psdtuts
Fuente de Vectortuts+: http://feeds.feedburner.com/vectortuts
etcétera

Generación de la ruta

En aras de la legibilidad, vamos a generar nuestra consulta de YQL en secciones.

1	// YQL query (SELECT * from feed ... ) // Split for readability
2	$path = "http://query.yahooapis.com/v1/public/yql?q=";
3	$path .= urlencode("SELECT * FROM feed WHERE url='http://feeds.feedburner.com/$siteName'");
4	$path .= "&format=json";

La clave es la segunda parte mostrada arriba; cuando se cargó la página, tomamos el nombre del sitio de la cadena de consulta. Ahora solo necesitamos insertarlo en la consulta SELECT. ¡Afortunadamente todos los sitios de tutoriales usan Feedburner! Asegúrate de usar urlencode en la consulta para reemplazar los caracteres especiales.

Muy bien, la ruta está lista; ¡usemos file_get_contents() para obtener la fuente!

1	$feed = file_get_contents($path, true);

Suponiendo que $feed ahora es igual al JSON devuelto, podemos almacenar los resultados en un archivo de texto. Sin embargo, primero asegurémonos de que los datos fueron devueltos. Siempre que la consulta devuelva algo, $feed->query->count será igual a un valor mayor que cero. Si es así, abriremos el archivo almacenado en caché, escribiremos los datos en el archivo y, finalmente, lo cerraremos.

// If something was returned, cache
if ( is_object($feed) && $feed->query->count ) {
   $cachefile = fopen($cache, 'w');
   fwrite($cachefile, $feed);
   fclose($cachefile);
}

Parece confuso, pero en realidad no lo es. La función fopen() acepta dos parámetros:

El archivo a abrir: Almacenamos esta ruta en la variable $cache, en la parte superior de la página. Ten en cuenta que, si este archivo no existe, la función creará el archivo por ti.
Privilegios de acceso: Aquí podemos especificar qué privilegios están disponibles. w significa "write" ("escritura").

A continuación abrimos ese archivo, escribimos el contenido de $feed (los datos RSS devueltos en formato JSON) en él, y lo cerramos.

Uso del archivo almacenado en caché

En los pasos anteriores, primero verificamos si el archivo almacenado en caché tenía más de tres horas de antigüedad.

1	if( filemtime($cache) < (time() - 10800) ) {
2	// grab the site's RSS feed, via YQL
3	}

Pero, ¿y si no es así? En ese caso, ejecutamos una instrucción else y tomamos el contenido del archivo de texto, en lugar de usar YQL.

if( filemtime($cache) < (time() - 10800) ) {
 // grab the site's RSS feed, via YQL
 ....
}
else {
// We already have local cache. Use that instead.
$feed = file_get_contents($cache);
}

Por último, no podemos hacer mucho con la fuente RSS en formato JSON hasta que la decodifiquemos con PHP.

1	// Decode that shizzle
2	$feed = json_decode($feed);

¡Y eso debería ser todo en cuanto a nuestro controller! Ahora que ya hemos establecido la lógica, incluyamos nuestra plantilla HTML.

1	// Include the view
2	include('views/site.tmpl.php');

Este es nuestro archivo site.php final. Haz clic en el icono expandir para verlo.

<?php
// If "siteName" isn't in the querystring, set the default site name to 'nettuts'
$siteName = empty($_GET['siteName']) ? 'nettuts' : $_GET['siteName'];

$siteList = array(
   'nettuts',
   'flashtuts',
   'webdesigntutsplus',
   'psdtuts',
   'vectortuts',
   'phototuts',
   'mobiletuts',
   'cgtuts',
   'audiotuts',
   'aetuts'
);

// For security reasons. If the string isn't a site name, just change to 
// nettuts instead.
if ( !in_array($siteName, $siteList) ) {
   $siteName = 'nettuts';
}

$cache = dirname(__FILE__) . "/cache/$siteName";
// Re-cache every three hours
if(filemtime($cache) query->count ) {
      $cachefile = fopen($cache, 'wb');
      fwrite($cachefile, $feed);
      fclose($cachefile);
   }
}
else
{
   // We already have local cache. Use that instead.
   $feed = file_get_contents($cache);
}

// Decode that shizzle
$feed = json_decode($feed);

// Include the view
include('views/site.tmpl.php');

Paso 7: La plantilla del sitio

Al final del paso anterior cargamos nuestra plantilla (o vista). Sigue adelante y crea esa carpeta views y el archivo site.tmpl.php. Siéntete libre de asignarle el nombre que tú quieras. A continuación, insertaremos nuestro HTML.

<?php include('includes/header.php'); ?>
<body> 

<div data-role="page">

   <header data-role="header" class="<?php echo $siteName; ?>">
      <h1><?php echo ucwords($siteName).'+'; ?></h1>
   </header>

   <div data-role="content">    
      <ul data-role="listview" data-theme="c" data-dividertheme="d" data-counttheme="e">

      </ul>
   </div>

   <footer data-role="footer" class="<?php echo $siteName; ?>">
      <h4> www.tutsplus.com</h4>
   </footer>
</div>

</body>
</html>

Puntos de interés en el código anterior

Observa cómo seguimos el mismo diseño básico: encabezado, área de contenido, pie de página.
Como esta plantilla se utilizará para cada sitio de tutoriales de Tuts+, debemos establecer el título dinámicamente. Afortunadamente, si recuerdas, el nombre del sitio fue enviado a través de la cadena de consulta y se almacenó en la variable $siteName (como "nettuts"). Para poner en mayúscula la primera letra y aplicar el característico + después del nombre, usaremos la función ucwords() en la variable (cambia a mayúscula la primera letra de cada palabra de la cadena) y agregaremos un "+": <h1><?php echo ucwords($siteName).'+'; ?></h1>
Pronto mostraremos junto al título la cantidad de comentarios que tiene cada publicación. Nuevamente podemos usar ThemeRoller para aplicarle un diseño, a través del atributo data-counttheme="e".

Filtrado de la fuente

En este punto tenemos acceso al objeto $feed que contiene nuestra fuente RSS. Para examinar este objeto, puedes usar print_r($feed) o utilizar la consola de YQL para obtener una vista más bonita. En este caso usaremos esta última opción. Echa un vistazo.

Para obtener los datos de cada publicación, debemos realizar un filtrado: $feed->query->results->item. PHP permite que esto sea muy fácil con el uso de foreach().

Dentro de la instrucción foreach(), ahora podemos acceder a los valores deseados con $item->title, o $item->comments, que mostrarán el título y la cantidad de comentarios, respectivamente. Agrega lo siguiente dentro de las etiquetas <ul>.

<ul data-role="listview" data-theme="c" data-dividertheme="d" data-counttheme="e">
<?php
    foreach($feed->query->results->item as $item) { ?>

    <li>
      <h2>
         <a href="article.php?siteName=<?php echo $siteName;?>&origLink=<?php echo urlencode($item->guid->content); ?>">
               <?php echo $item->title; ?>
         </a>
      </h2>
      <span class="ui-li-count"><?php echo $item->comments; ?> </span>
   </li>

<?php  } ?>
</ul>

En el código anterior, creamos un elemento de lista que contiene el título de la publicación, la cantidad de comentarios y un enlace a article.php que también contiene el nombre del sitio y el enlace permanente (al artículo original en el sitio de Tuts+) en la cadena de consulta.

Cuando vemos la página actualizada en el navegador, ¡sorpresa!

¿Notaste que el recuento de comentarios se encuentra en una burbuja amarilla y está flotando a la derecha? Esto se debe a que aplicamos el atributo data-counttheme="e" a la lista de ajuste desordenada. Qué conveniente.

Hmm... creo que el texto es demasiado grande para estos largos títulos. Una visita rápida a Firebug muestra que puedo hacer referencia a las etiquetas h2 con una clase de .ui-li-heading. Volvamos a nuestra hoja de estilo (mobile.css), y agreguemos una nueva regla:

1	.ui-li-heading { font-size: 12px; }

Eso está mejor.

Paso 8: Mostrar la publicación completa

El paso final es crear article.php, que mostrará la publicación completa. Al igual que site.php, article.php servirá como nuestro controller, consultará el artículo seleccionado con YQL y cargará la vista adecuada.

<?php

$siteName = $_GET['siteName'];
$origLink = $_GET['origLink'];

// YQL query (SELECT * from feed ... ) // Split for readability
$path = "http://query.yahooapis.com/v1/public/yql?q=";
$path .= urlencode("SELECT * FROM feed WHERE url='http://feeds.feedburner.com/$siteName' AND guid='$origLink'");
$path .= "&format=json";

$feed = json_decode(file_get_contents($path));
$feed = $feed->query->results->item;

include('views/article.tmpl.php');

Si has estado siguiendo los pasos, el código anterior debería parecerte un poco más familiar. Cuando cargamos esta página desde site.php, enviamos dos elementos a través de la cadena de consulta:

Site Name (Nombre del sitio): Contiene el nombre del sitio del tutorial seleccionado actualmente
Orig Link (Enlace original): Un enlace a la publicación original en el sitio del tutorial

En esta ocasión, la diferencia con la consulta de YQL es que hacemos coincidir el guid (orig link) con la publicación en la que el usuario hizo clic (o en la que presionó). De esta manera, será devuelta exactamente una publicación. Echa un vistazo a esta consulta de ejemplo de YQL para darte una mejor idea de lo que quiero decir.

Plantilla de artículo

En la parte inferior del código anterior, cargamos el archivo de plantilla de la página del artículo: views/article.tmpl.php. Ahora crearemos ese archivo.

<?php include('includes/header.php'); ?>
<body> 

<div data-role="page">

   <header data-role="header" class="<?php echo $siteName; ?>">
      <h1> <?php echo ucWords($siteName).'+'; ?> </h1>
   </header>

   <div data-role="content">	
        <h1> <?php echo $feed->title; ?> </h1>
        <div> <?php echo $feed->description; ?> </div>
   </div>

   <footer data-role="footer" class="<?php echo $siteName; ?>">
      <h4> <a href="<?php echo $feed->guid->content;?>"> Read on <?php echo ucWords($siteName); ?>+</a></h4>
   </footer>
</div>

</body>
</html>

¡Ah! esto es muy familiar. Ya hemos analizado esta plantilla. La única diferencia es que, esta vez, debido a que solo obtuvimos una publicación para mostrar con la consulta de YQL, no necesitamos molestarnos con una instrucción foreach().

Página de artículo sin estilo

En este punto, y por tu cuenta, el siguiente paso sería comenzar a aplicar al artículo el estilo que desees. No veo la necesidad de analizar este procedimiento en este tutorial, ya que todo se reduce al gusto personal. Aquí está mi versión súper minimalista.

Aplicación de un tamaño de fuente, altura de línea, relleno y formato de imagen.

Pies de página bloqueados

Un último detalle: en la sección de pie de página del artículo, tenemos un enlace a la publicación original en Nettuts+. En su estado actual, el lector solo lo verá cuando llegue a la parte inferior del artículo. Bloqueemos el pie de página en la parte inferior del punto de vista actual en todo momento. Podemos usar el atributo data-position para lograr esto.

1	<footer data-role="footer" data-position="fixed">
2	<h4> <a href="<?php echo $feed->guid->content;?>"> Read on <?php echo ucWords($siteName); ?>+</a></h4>
3	</footer>

¡Eso está mejor!

¡Hemos terminado!

Y, con relativamente poco trabajo, hemos creado con éxito un lector RSS móvil para los sitios de Tuts+. Ciertamente se puede ampliar para proporcionar características adicionales, verificación de errores y mejoras de rendimiento, ¡pero con suerte esto te ayudará a comenzar! Si deseas bifurcar el proyecto y mejorarlo, ¡por supuesto puedes hacerlo! Gracias por leer, y asegúrate de consultar la documentación de jQuery Mobile para obtener más detalles. No tengo duda de que encontrarás más tutoriales de jQuery Mobile en nuestro sitio hermano, Mobiletuts+.

Agrega el lector a la pantalla de inicio de tu iPhone

Ve la demostración ¡o mejórala!