Estos, también, pueden recibir estilos de rodillos de tema con letras. Se pueden establecer dentro del padre.

.

Aprende más sobre los separadores de listas.

Tenga en cuenta que no usaremos divisores para esta aplicación en particular.

---

Paso 5: CSS

jQuery Mobile se encarga de una gran parte del formato, sin embargo, todavía necesitamos, por supuesto, nuestra propia hoja de estilo para realizar ajustes. Por ejemplo, al mirar las imágenes de arriba, podemos ver que los íconos del tutorial deben ser subidos un poco. Además, me gustaría usar Tuts + red para el color de fondo del encabezado y pie de página, en lugar del negro predeterminado.

Crear una nueva carpeta, CSS, y añadir una nueva hoja de estilo - Llamaré la mía: mobile.css. Dentro de este archivo, primero arreglaremos el posicionamiento del icono:

 .ui-li-icon arriba: 9px; 

A continuación, crearemos un puñado de clases, nombradas después de sus respectivos sitios tutoriales. Estas clases contendrán cualquier formato / colores específicos para el sitio. Por ejemplo, Nettuts + tiene un color verde má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 fondo: # 4b7e00;  .webdesigntutsplus background: # 0d533f;  .mobiletuts background: # dba600; 

Eso debería estar bien por ahora. El ultimo paso para index.php es aplicar el .tuts clase a la encabezamiento y pie de página elementos. De esa manera, el encabezamiento y pie de página renderizará el color de fondo correcto.

 
? 



---

Paso 6: YQL, PHP y almacenamiento en caché

Ahora es el momento de alejarse del diseño y trabajar en la funcionalidad. Cada uno de los enlaces que hemos creado dirigidos a site.php? siteName = "siteName". Sigamos y creamos ese archivo ahora.

Aunque esta es una aplicación relativamente pequeña, debemos esforzarnos por seguir las mejores prácticas. En este caso, significa que debemos mantener la menor cantidad de PHP en nuestro documento como sea posible. En su lugar, usaremos site.php como un controlador de clases Este archivo manejará la lógica inicial y luego, en la parte inferior, se cargará en nuestra plantilla HTML.

Asignando el 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 va a referirse a un paso anterior, cuando nos vinculamos a site.php, También pasamos el nombre del sitio a través de la cadena de consulta. Con PHP, esto se puede recuperar fácilmente, con $ _GET ['siteName']. Sin embargo, ¿qué pasa si, por alguna extraña razón, este valor no existe? Tal vez site.php se accedió directamente ?? Debemos establecer un sitio predeterminado para compensar estas situaciones..

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

Si $ _GET ['siteName'] está vacío, vamos a establecer "nettuts" a la variable, $ siteName. De lo contrario, será igual al nombre del sitio respectivo.

Seguridad

A pesar de que este es un proyecto pequeño, también intentemos establecer cierta seguridad. Para evitar que el usuario asigne automáticamente un valor potencialmente peligroso a la nombre del sitio clave, asegurémonos de que el valor sea de hecho el nombre de uno de nuestros sitios tutoriales.

 // Prepare la matriz de sitios tutoriales $ siteList = array ('nettuts', 'flashtuts', 'webdesigntutsplus', 'psdtuts', 'vectortuts', 'phototuts', 'mobiletuts', 'cgtuts', 'audiotuts', 'aetuts '); // Si la cadena no es un nombre de sitio, solo cambia a nettuts. if (! in_array ($ siteName, $ siteList)) $ siteName = 'nettuts'; 

los in_array () función nos permite determinar si un valor - en nuestro caso, el valor de $ siteName -- es igual a uno de los elementos en el $ siteList formación.

Almacenamiento en caché

En última instancia, utilizaremos el excelente YQL para realizar nuestras consultas. Piense en YQL como una API para APIs. En lugar de tener que aprender veinte API diferentes, la sintaxis similar a SQL de YQL le permite aprender solo una. Sin embargo, aunque YQL realiza un poco de almacenamiento en caché por su cuenta, también salvar Las fuentes RSS a un archivo de texto en nuestro servidor. De esa manera, podemos mejorar un poco el rendimiento.

Comenzamos creando una nueva variable., $ caché, y hacer que sea igual a la ubicación donde se almacenará el archivo en caché.

 $ cache = dirname (__ FILE__). "/ cache / $ siteName";

El código anterior apunta al directorio actual del archivo, y luego a una carpeta de caché y, finalmente, el nombre del sitio seleccionado.

Decidí que este archivo en caché debería actualizarse cada tres horas. Como tal, podemos ejecutar un rápido Si y determine la última vez que se actualizó el archivo. Si el archivo no existe, o la actualización fue hace más de tres horas, consultamos YQL.

 $ cache = dirname (__ FILE__). "/ cache / $ siteName"; // Re-caché cada tres horas si (tiempo de archivo ($ caché) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

YQL es ridículamente fácil trabajar con él. En nuestro caso, lo usaremos con un propósito muy simple: captar la fuente RSS, en forma JSON, del sitio que se pasó a través de la cadena de consulta, a través de nombre del sitio. Puedes experimentar con los diferentes comandos usando la consola YQL.





Para consultar una fuente RSS, usamos el comando: SELECCIONAR * DESDE el feed DONDE url = "ruta / a / rss / feed".

• Nettuts + Feed: http://feeds.feedburner.com/nettuts
• Psdtuts + Feed: http://feeds.feedburner.com/psdtuts
• Vectortuts + Feed: http://feeds.feedburner.com/vectortuts
• etc.

Construyendo el camino

En aras de la legibilidad, construiremos nuestra consulta YQL en secciones.

 // Consulta YQL (¿SELECCIONAR * de la fuente?) // Dividir para legibilidad $ ruta = "http://query.yahooapis.com/v1/public/yql?q="; $ ruta. = urlencode ("SELECT * FROM feed WHERE url =" http://feeds.feedburner.com/$siteName ""); $ ruta. = "& format = json";

La clave es la segunda parte de arriba; cuando se cargó la página, tomamos el nombre del sitio de la cadena de consulta. Ahora, solo necesitamos insertarlo en el SELECCIONAR consulta. ¡Por suerte, todos los sitios de tutoriales utilizan Feedburner! Asegúrate de que urlencode La consulta para reemplazar cualquier carácter especial..

Está bien, el camino está listo; usemos file_get_contents () para agarrar la alimentación!

 $ feed = file_get_contents ($ path, true);

Suponiendo que $ feed ahora sea igual al JSON devuelto, podemos almacenar los resultados en un archivo de texto. Sin embargo, primero aseguremos que los datos fueron devueltos. Siempre que se devuelva algo de la consulta., $ feed-> consulta-> contar será igual a un valor mayor que cero. Si es así, abriremos el archivo en caché, escribiremos los datos en el archivo y finalmente lo cerraremos..

 // Si se devolvió algo, caché 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 función fopen () acepta dos parámetros:

• El archivo a abrir: Almacenamos este camino en el $ caché Variable en la parte superior de la página. Tenga en cuenta que, si este archivo no existe, creará el archivo por usted..
• Privilegios de acceso: Aquí, podemos especificar qué privilegios están disponibles. w significa "escribir".

A continuación, abrimos ese archivo, y escribimos el contenido de $ feed (los datos devueltos de RSS JSON) al archivo y ciérrelo.

Usando el archivo en caché

Anteriormente, primero verificamos si el archivo almacenado en caché tenía más de tres horas de antigüedad..

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

Pero ¿y si no fuera así? En ese caso, corremos un más declaración, y tome 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 último, no podemos hacer mucho con el canal RSS de JSON hasta que lo decodifiquemos con PHP.

 // Descodifica ese shizzle $ feed = json_decode ($ feed);

Y eso deberia hacerlo por nuestra controlador! Con la lógica fuera del camino, incluyamos nuestra plantilla HTML.

 // Incluir la vista include ('views / site.tmpl.php');

Aquí está nuestra final site.php. Haga clic en el expandir icono para verlo.

 count) $ cachefile = fopen ($ cache, 'wb'); fwrite ($ cachefile, $ feed); fclose ($ cachefile);  else // Ya tenemos caché local. Usa eso en su lugar. $ feed = file_get_contents ($ cache);  // Descodifica ese shizzle $ feed = json_decode ($ feed); // Incluir la vista include ('views / site.tmpl.php'); 

---

Paso 7: La plantilla del sitio

Al final del paso anterior, cargamos en nuestra plantilla (o vista). Adelante y crea eso puntos de vista carpeta, y site.tmpl.php expediente. Siéntase libre de nombrarlo como desee. A continuación, insertaremos nuestro HTML..

Puntos de interés arriba

• Observe cómo seguimos el mismo diseño básico: encabezado, área de contenido, pie de página.
• Como esta plantilla se utilizará para cada sitio tutorial de Tuts +, debemos establecer el título dinámicamente. Afortunadamente, si recuerda, el nombre del sitio se pasó a través de la cadena de consulta y se almacenó en la $ siteName variable (como, "nettuts"). Para capitalizar la primera letra, y aplicar la firma. + Después del nombre, ejecutaremos la variable a través de ucwords () (en mayúsculas la primera letra de cada palabra en la cadena), y agregue un "+":

• Pronto mostraremos la cantidad de comentarios para cada publicación junto al título. Podemos, nuevamente, usar ThemeRoller para diseñarlo, a través de data-counttheme = "e" atributo.


Filtrado a través de la alimentación

En este punto, tenemos acceso a la $ feed Objeto que contiene nuestro feed RSS. Para analizar este objeto, puede: print_r ($ feed), o usa la consola YQL para una vista más bonita. Vamos a utilizar este último en este caso. Echale un vistazo.





Para capturar los datos de cada publicación, necesitamos filtrar a través de: $ feed-> consulta-> resultados-> artículo. PHP hace que esto sea fácil con para cada().

Dentro de para cada() declaración, ahora podemos acceder a los valores deseados con $ item-> title, o $ item-> comentarios, que mostrará el título, y el número de comentario, respectivamente. Agregue lo siguiente dentro de

etiquetas.

 
 consulta-> resultados-> artículo como $ artículo) ?> 
 
 & origLink =guid-> contenido); ?> "> título; ?>  
 comentarios; ?>  
  

En el código anterior, creamos un elemento de lista, que contiene el título de la publicación, el número de comentarios y un enlace a article.php que también contiene el nombre del sitio y el enlace permanente (al artículo original en el sitio de Tuts +) en la cadena de consulta.

Cuando vemos la página actualizada en el navegador, tada.!



¿Observa cómo el recuento de comentarios se encuentra en una burbuja amarilla y se flota a la derecha? Eso es porque aplicamos el data-counttheme = "e" atribuir a la lista de desorden envoltura. Que conveniente.

Hmm Creo que el texto es demasiado grande para estos títulos largos. Una rápida visita a Firebug muestra que puedo apuntar a la h2 etiquetas con una clase de .encabezado ui-li. Regresemos a nuestra hoja de estilo (mobile.css) y agreguemos una nueva regla:

 .ui-li-heading font-size: 12px; 

Eso es mejor.



---

Paso 8: Visualización de la publicación completa

El paso final es construir. article.php, que mostrará la publicación completa. Al igual que con site.php, article.php servirá como nuestro controlador, y consultará el artículo seleccionado con YQL y cargará la vista correspondiente.

 consulta-> resultados-> artículo; include ('views / article.tmpl.php');

Si lo has estado siguiendo, el código anterior debería parecerte un poco más familiar. Cuando cargamos esta página, desde site.php, Pasamos a través de dos elementos, a través de la cadena de consulta:

• Nombre del sitio: Contiene el nombre del sitio tutorial seleccionado actualmente
• Enlace original: Un enlace a la publicación original en el sitio tutorial

La diferencia con la consulta YQL, esta vez, es que coincidimos con guid (enlace original) con la publicación en la que el usuario hizo clic (o presionó). De esta manera, exactamente una publicación será devuelta. Echa un vistazo a esta consulta de YQL de muestra para tener una mejor idea de lo que quiero decir..



Plantilla de artículo

En la parte inferior del código anterior, cargamos el archivo de plantilla para la página del artículo: views / article.tmpl.php. Vamos a crear ese archivo ahora.

   
 
 
  
  
 
 título; ?> 
 
 descripción; ?> 
 
  
  

Ah, tan familiar. Ya hemos repasado esta plantilla. La única diferencia es que, esta vez, debido a que solo hay una publicación de la consulta YQL para mostrar, no necesitamos molestarnos con una para cada() declaración.


Página de artículo sin estilo

En este punto, por su cuenta, el siguiente paso sería comenzar a aplicar el estilo deseado al artículo. No veo la necesidad de repasarlo en este tutorial, ya que todo se reduce a un gusto personal. Aquí está mi versión super-minimal.


Aplicación de un tamaño de fuente, altura de línea, relleno y formato de imagen.

Pies de página bloqueados

Una última cosa: en la sección de pie de página del artículo, enlazamos con la publicación original en Nettuts +. En su estado actual, el lector solo verá eso cuando llegue al final del artículo. Bloqueamos el pie de página en la parte inferior del punto de vista actual en todo momento. Podemos usar el posición de datos atributo para lograr esto.

Eso es mejor!

---

Estamos hechos!

Y, con relativamente poco trabajo, hemos construido con éxito un lector RSS móvil para los sitios Tuts +. Sin duda, se puede expandir para proporcionar funciones adicionales, verificación de errores y mejoras de rendimiento, ¡pero esperamos que esto te ayude a comenzar! ¿Si quieres unir el proyecto y mejorarlo, por supuesto? ¡hacer! Gracias por leer, y asegúrese de consultar la documentación de jQuery Mobile para obtener más detalles. No tengo dudas de que encontrarás más tutoriales móviles de jQuery en nuestro sitio asociado, Mobiletuts+.

Añade el Reader a la pantalla de inicio de tu iPhone


Ver la demostración o hacerlo mejor!
Código