Anche questi possono ricevere styling a tema con caratteri a rullo. Possono essere impostati all'interno del genitore

.

Ulteriori informazioni sui divisori degli elenchi.

Nota che non useremo i divisori per questa particolare applicazione.

---

Passaggio 5: CSS

jQuery Mobile si occupa di gran parte della formattazione, tuttavia, ovviamente, abbiamo ancora bisogno del nostro foglio di stile per la messa a punto. Ad esempio, guardando le immagini sopra, possiamo vedere che le icone del tutorial devono essere sollevate un po '. Inoltre, mi piacerebbe usare i Tuts + rosso per il colore di sfondo dell'intestazione e del piè di pagina, piuttosto che il nero predefinito.

Crea una nuova cartella, CSS, e aggiungi un nuovo foglio di stile - chiamerò il mio: mobile.css. All'interno di questo file, prima sistemeremo il posizionamento dell'icona:

 .ui-li-icon top: 9px; 

Successivamente, creeremo una serie di classi, denominate in base ai rispettivi siti tutorial. Queste classi conterranno qualsiasi formattazione / colori specifici per il sito. Ad esempio, Nettuts + ha un colore verde più scuro, mentre MobileTuts + è giallo.

 .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; 

Per ora dovrebbe andare bene. L'ultimo passo per index.php è quello di applicare il .tuts classe al intestazione e footer elementi. In questo modo, il intestazione e footer renderà il colore di sfondo corretto.

 
? 



---

Passaggio 6: YQL, PHP e Caching

Ora è il momento di abbandonare il layout e lavorare sulla funzionalità. Ognuno dei link che abbiamo creato ha diretto site.php? siteName = "siteName". Andiamo avanti e creare quel file ora.

Anche se questa è un'app relativamente piccola, dovremmo comunque sforzarci di seguire le migliori pratiche. In questo caso, significa che dovremmo mantenere il minor numero possibile di PHP nel nostro documento. Invece, useremo site.php come un controllore di sorta. Questo file gestirà la logica iniziale e quindi, in fondo, verrà caricato nel nostro modello HTML.

Assegnazione del nome del sito

Per recuperare il feed RSS desiderato, dobbiamo prima catturare il nome del sito su cui l'utente ha fatto clic inizialmente. Se farai riferimento a un passaggio precedente, quando ci siamo collegati site.php, abbiamo anche passato il nome del sito attraverso la querystring. Con PHP, questo può essere facilmente recuperato, con $ _GET [ 'siteName']. Tuttavia, cosa succede se, per qualche strana ragione, questo valore non esiste? Può essere site.php è stato effettuato l'accesso direttamente ?? Dovremmo impostare un sito predefinito per compensare queste situazioni.

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

Se $ _GET [ 'siteName'] è vuoto, imposteremo "nettuts" sulla variabile, $ siteName. Altrimenti, sarà uguale al nome del rispettivo sito.

Sicurezza

Anche se si tratta di un piccolo progetto, proviamo anche a mettere un po 'di sicurezza sul posto. Per impedire all'utente di assegnare automaticamente un valore potenzialmente pericoloso a nome del sito chiave, assicuriamoci che il valore sia in realtà il nome di uno dei nostri siti tutorial.

 // Prepara un array di siti tutorial $ siteList = array ('nettuts', 'flashtuts', 'webdesigntutsplus', 'psdtuts', 'vectortuts', 'phototuts', 'mobiletuts', 'cgtuts', 'audiotuts', 'aetuts '); // Se la stringa non è un nome di sito, cambia semplicemente in nettuts. if (! in_array ($ siteName, $ siteList)) $ siteName = 'nettuts'; 

Il in_array () la funzione ci consente di determinare se un valore - nel nostro caso, il valore di $ siteName -- è uguale a uno degli elementi nel $ SiteList schieramento.

caching

In definitiva, utilizzeremo l'eccellente YQL per eseguire le nostre query. Pensa a YQL come API per le API. Piuttosto che dover apprendere venti diverse API, la sintassi SQL-like di YQL ti consente di apprenderne solo una. Tuttavia, sebbene YQL esegua un po 'di caching da solo, facciamo pure salvare i feed RSS in un file di testo sul nostro server. In questo modo, possiamo migliorare le prestazioni un bel po '.

Iniziamo creando una nuova variabile, $ di cache, e rendendolo uguale alla posizione in cui verrà archiviato il file memorizzato nella cache.

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

Il codice sopra indica la directory corrente del file, quindi in una cartella cache e, infine, il nome del sito selezionato.

Ho deciso che questo file memorizzato nella cache dovrebbe essere aggiornato ogni tre ore. In quanto tale, possiamo eseguire un rapido Se istruzione e determinare l'ultima volta che il file è stato aggiornato. Se il file non esiste o l'aggiornamento è stato più lungo di tre ore fa, eseguiamo una query su YQL.

 $ cache = dirname (__ FILE__). "/ Cache / $ siteName"; // Re-cache ogni tre ore se (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

YQL è ridicolmente facile da lavorare. Nel nostro caso, lo useremo per uno scopo molto semplice: afferrare il feed RSS, in forma JSON, del sito che è stato passato attraverso la querystring, via nome del sito. Puoi sperimentare con i vari comandi usando la console YQL.





Per interrogare un feed RSS, usiamo il comando: SELEZIONA * DA feed WHERE url = "percorso / su / rss / feed".

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

Costruire il percorso

Per motivi di leggibilità, creeremo la nostra query YQL in sezioni.

 // query YQL (SELECT * dal feed?) // Dividi per leggibilità $ path = "http://query.yahooapis.com/v1/public/yql?q="; $ path. = urlencode ("SELECT * FROM feed WHERE url =" http://feeds.feedburner.com/$siteName ""); $ path. = "& format = json";

La chiave è la seconda parte sopra; quando la pagina è stata caricata, abbiamo afferrato il nome del sito dalla querystring. Ora, abbiamo solo bisogno di inserirlo nel SELEZIONARE query. Fortunatamente, tutti i siti tutorial utilizzano Feedburner! Assicurati di te UrlEncode la query per sostituire eventuali caratteri speciali.

Ok, il percorso è pronto; usiamo file_get_contents () per afferrare il feed!

 $ feed = file_get_contents ($ path, true);

Supponendo che $ feed sia ora uguale al JSON restituito, possiamo memorizzare i risultati in un file di testo. Tuttavia, assicuriamoci innanzitutto che i dati siano stati restituiti. Finché qualcosa viene restituito dalla query, $ Feed-> query-> count sarà uguale a un valore maggiore di zero. Se lo è, apriremo il file memorizzato nella cache, scriveremo i dati nel file e infine lo chiuderemo.

 // Se qualcosa è stato restituito, cache se (is_object ($ feed) && $ feed-> query-> count) $ cachefile = fopen ($ cache, 'w'); fwrite ($ cachefile, $ feed); fclose ($ cachefile); 

Sembra confusionario, ma in realtà non lo è. La funzione fopen () accetta due parametri:

• Il file da aprire: Abbiamo memorizzato questo percorso nel $ di cache variabile nella parte superiore della pagina. Nota che, se questo file non esiste, creerà il file per te.
• Privilegi di accesso: Qui, possiamo specificare quali privilegi sono disponibili. w sta per "scrivere".

Successivamente, apriamo il file e scriviamo il contenuto di $ mangime (i dati RSS JSON restituiti) nel file e chiuderlo.

Utilizzo del file memorizzato nella cache

Sopra, abbiamo prima verificato se il file memorizzato nella cache fosse più vecchio di tre ore.

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

Ma cosa succede se non fosse? In tal caso, eseguiamo un altro dichiarazione, e prendere il contenuto del file di testo, piuttosto che usare YQL.

 se (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); 

Infine, non possiamo fare molto con il feed RSS JSON finché non lo decodifichiamo con PHP.

 // Decodifica che shizzle $ feed = json_decode ($ feed);

E questo dovrebbe farlo per il nostro controllore! Con la logica fuori mano, includiamo il nostro modello HTML.

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

Ecco la nostra finale site.php. Clicca sul espandere icona per vederlo.

 count) $ cachefile = fopen ($ cache, 'wb'); fwrite ($ cachefile, $ feed); fclose ($ cachefile);  else // Abbiamo già una cache locale. Usalo invece. $ feed = file_get_contents ($ cache);  // Decodifica che shizzle $ feed = json_decode ($ feed); // Include la vista include ('views / site.tmpl.php'); 

---

Passaggio 7: il modello del sito

Alla fine del passaggio precedente, abbiamo caricato nel nostro modello (o vista). Vai avanti e crea quello visualizzazioni cartella, e site.tmpl.php file. Sentiti libero di chiamarlo come desideri. Successivamente, inseriremo il nostro codice HTML.

Punti di interesse in alto

• Nota come seguiamo lo stesso layout di base: intestazione, area del contenuto, piè di pagina.
• Poiché questo modello verrà utilizzato per ogni sito Tuts + tutorial, è necessario impostare il titolo in modo dinamico. Fortunatamente, se si ricorda, il nome del sito è stato passato attraverso la querystring e memorizzato nel file $ siteName variabile (come "nettuts"). Per capitalizzare la prima lettera e applicare la firma + dopo il nome, eseguiremo la variabile attraverso ucwords () (uppercases la prima lettera di ogni parola nella stringa) e aggiunge a "+":

• Prossimamente visualizzeremo il numero di commenti per ogni pubblicazione accanto al titolo. Possiamo, ancora, usare ThemeRoller per modellarlo, tramite il Dati-counttheme = "e" attributo.


Filtraggio attraverso il feed

A questo punto, abbiamo accesso a $ mangime oggetto che contiene il nostro feed RSS. Per sezionare questo oggetto, puoi o print_r ($ feed), o utilizzare la console YQL per una vista più carina. Useremo quest'ultimo in questo caso. Controlla.





Per prendere i dati per ogni pubblicazione, dobbiamo filtrare attraverso: $ Feed-> query-> Risultati> voce. PHP lo rende un gioco da ragazzi per ciascuno().

All'interno del per ciascuno() dichiarazione, ora possiamo accedere ai valori desiderati con $ Item-> titolo, o $ Item-> Commenti, che visualizzerà rispettivamente il titolo e il numero del commento. Aggiungi il seguente all'interno del

tag.

 
 query-> risultati-> oggetto come $ articolo) ?> 
 
 & OrigLink =guid-> contenuto); ?> "> titolo; ?>  
 Commenti; ?>  
  

Nel codice sopra, costruiamo una voce di elenco, contenente il titolo del post, il numero di commenti e un link a article.php che contiene anche il nome del sito e il link permanente (all'articolo originale sul sito Tuts +) nella stringa di query.

Quando visualizziamo la pagina aggiornata nel browser, tada!



Si noti come il conteggio dei commenti si trova in una bolla gialla ed è flottato a destra? Questo perché abbiamo applicato il Dati-counttheme = "e" attributo alla lista non ordinata di wrapping. Quanto conveniente.

Hmm? Penso che il testo sia troppo grande per questi titoli lunghi. Una rapida visita a Firebug mostra che posso scegliere come target h2 tag con una classe di .ui-li-rubrica. Torniamo al nostro foglio di stile (mobile.css) e aggiungiamo una nuova regola:

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

Così va meglio.



---

Passaggio 8: visualizzazione della registrazione completa

Il passo finale è costruire article.php, che mostrerà l'intera pubblicazione. Come con site.php, article.php servirà come nostro controllore, e interrogherà l'articolo selezionato con YQL e caricherà la vista appropriata.

 query-> Risultati> voce; include ( 'vista / article.tmpl.php');

Se hai seguito, il codice sopra dovrebbe sembrare un po 'più familiare. Quando abbiamo caricato questa pagina, da site.php, abbiamo passato attraverso due elementi, tramite la stringa di query:

• Nome del sito: Contiene il nome del sito tutorial attualmente selezionato
• Link Orig: Un link al post originale sul sito tutorial

La differenza con la query YQL, questa volta, è che corrispondiamo al guid (link orig) con il post che l'utente ha fatto clic (o premuto). In questo modo, verrà restituito esattamente un post. Dai un'occhiata a questa query YQL di esempio per avere un'idea migliore di cosa intendo.



Modello dell'articolo

Nella parte inferiore del codice sopra, abbiamo caricato il file modello per la pagina dell'articolo: views / article.tmpl.php. Creeremo quel file ora.

   
 
 
  
  
 
 titolo; ?> 
 
 descrizione; ?> 
 
  
  

Ah, così familiare Abbiamo già esaminato questo modello. L'unica differenza è che, questa volta, perché c'è solo un messaggio dalla query YQL da visualizzare, non dobbiamo preoccuparci di per ciascuno() dichiarazione.


Pagina dell'articolo senza stile

A questo punto, da solo, il prossimo passo sarebbe iniziare ad applicare lo stile desiderato all'articolo. Non vedo la necessità di esaminarlo in questo tutorial, poiché tutto si riduce al gusto personale. Ecco la mia versione super-minima.


Applicazione di dimensioni carattere, altezza riga, spaziatura interna e formattazione dell'immagine.

Piè di pagina chiusi

Un'ultima cosa: nella sezione footer dell'articolo, colleghiamo il post originale su Nettuts +. Nel suo stato attuale, il lettore lo vedrà solo quando raggiungerà il fondo dell'articolo. Blocciamo il piè di pagina in fondo al punto di vista corrente in ogni momento. Possiamo usare il Dati posizione attributo per ottenere questo.

Così va meglio!

---

Sono stati fatti!

E, con relativamente poco lavoro, abbiamo costruito con successo un lettore RSS mobile per i siti Tuts +. Può certamente essere ampliato per fornire funzionalità aggiuntive, controllo degli errori e miglioramenti delle prestazioni, ma si spera che questo possa iniziare! Se ti piacerebbe biforcare il progetto e renderlo migliore, con tutti i mezzi? fare! Grazie per la lettura e assicurati di fare riferimento alla documentazione di jQuery Mobile per ulteriori dettagli. Non ho dubbi che incontrerai altri tutorial mobili su jQuery sul nostro sito gemello, Mobiletuts+.

Aggiungi il Reader alla schermata Home del tuo iPhone


Visualizza la demo o rendila migliore!
Codice