Auch diese können mit Buchstaben versehene Themenrollenstylings erhalten. Sie können innerhalb des übergeordneten Elements festgelegt werden

.

Erfahren Sie mehr über Listenteiler.

Beachten Sie, dass wir für diese spezielle Anwendung keine Teiler verwenden werden.

---

Schritt 5: CSS

jQuery Mobile kümmert sich viel um die Formatierung, allerdings benötigen wir natürlich noch ein eigenes Stylesheet für das Tweaking. Wenn Sie beispielsweise die Bilder oben betrachten, können Sie sehen, dass die Tutorialsymbole etwas nach oben verschoben werden müssen. Außerdem möchte ich lieber die Tuts + -Rot als Hintergrundfarbe für die Kopf- und Fußzeile und nicht für das Standard-Schwarz verwenden.

Einen neuen Ordner erstellen, CSS, und füge ein neues Stylesheet hinzu - ich rufe mein an: mobile.css. In dieser Datei korrigieren wir zuerst die Positionierung des Symbols:

 .ui-li-icon top: 9px; 

Als Nächstes erstellen wir eine Handvoll Klassen, die nach ihren jeweiligen Tutorialseiten benannt sind. Diese Klassen enthalten alle spezifischen Formatierungen / Farben für die Site. Beispielsweise hat Nettuts + eine dunklere grüne Farbe, während MobileTuts + gelb ist.

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

Das sollte für jetzt in Ordnung sein. Der letzte Schritt für index.php ist das anzuwenden .tuts Klasse zum Header und Fußzeile Elemente. Auf diese Weise die Header und Fußzeile rendert die korrekte Hintergrundfarbe.

 
? 



---

Schritt 6: YQL, PHP und Caching

Nun ist es an der Zeit, sich vom Layout zu entfernen und an der Funktionalität zu arbeiten. Jeder der von uns erstellten Links verweist auf site.php? siteName = "siteName". Lassen Sie uns jetzt die Datei erstellen.

Obwohl dies eine relativ kleine App ist, sollten wir uns dennoch bemühen, Best Practices zu befolgen. In diesem Fall sollten wir so wenig PHP wie möglich in unserem Dokument aufbewahren. Stattdessen verwenden wir site.php Als ein Regler von Arten. Diese Datei behandelt die anfängliche Logik und wird am Ende in unsere HTML-Vorlage geladen.

Zuweisen des Site-Namens

Um den gewünschten RSS-Feed abzurufen, müssen wir zunächst den Namen der Site erfassen, auf die der Benutzer ursprünglich geklickt hat. Wenn Sie auf einen vorherigen Schritt verweisen, wenn wir eine Verbindung herstellen site.php, Wir haben auch den Namen der Site durch den Querstring übergeben. Mit PHP kann dies problemlos mit abgerufen werden $ _GET ['siteName']. Was wäre jedoch, wenn dieser Wert aus irgendeinem Grund nicht existiert? Könnte sein site.php wurde direkt zugegriffen? Wir sollten eine Standard-Site festlegen, um diese Situationen auszugleichen.

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

Ob $ _GET ['siteName'] leer ist, setzen wir "nettuts" auf die Variable, $ siteName. Andernfalls entspricht es dem Namen der jeweiligen Site.

Sicherheit

Auch wenn dies ein kleines Projekt ist, versuchen wir auch, einige Sicherheitsmaßnahmen zu ergreifen. Um zu verhindern, dass der Benutzer dem System automatisch einen potenziell gefährlichen Wert zuweist siteName Schlüssel, lassen Sie uns sicherstellen, dass der Wert tatsächlich der Name einer unserer Tutorialseiten ist.

 // Array mit Tutorial-Sites vorbereiten $ siteList = array ('nettuts', 'flashtuts', 'webdesigntutsplus', 'psdtuts', 'vectortuts', 'phototuts', 'mobiletuts', 'cgtuts', 'audiotuts', 'aetuts' '); // Wenn es sich bei der Zeichenfolge nicht um einen Site-Namen handelt, wechseln Sie stattdessen in Nettuts. if (! in_array ($ siteName, $ siteList)) $ siteName = 'nettuts'; 

Das in_array () Mit der Funktion können wir feststellen, ob ein Wert - in unserem Fall der Wert von $ siteName -- ist gleich einem der Elemente in der $ siteList Array.

Caching

Letztendlich verwenden wir die exzellente YQL-Datenbank, um unsere Abfragen auszuführen. Stellen Sie sich YQL als eine API für APIs vor. Anstatt zwanzig verschiedene APIs zu lernen, können Sie mit der SQL-ähnlichen Syntax von YQL nur eine lernen. Obwohl YQL selbst ein bisschen Caching ausführt, lasst es uns auch tun sparen die RSS-Feeds in eine Textdatei auf unserem Server. Auf diese Weise können wir die Leistung ein gutes Stück verbessern.

Wir beginnen mit dem Erstellen einer neuen Variablen, $ cache, und macht es gleich dem Ort, an dem die zwischengespeicherte Datei gespeichert wird.

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

Der obige Code verweist auf das aktuelle Verzeichnis der Datei und dann in einen Cache-Ordner und schließlich auf den Namen der ausgewählten Site.

Ich habe entschieden, dass diese zwischengespeicherte Datei alle drei Stunden aktualisiert werden sollte. So können wir schnell laufen ob und bestimmen Sie, wann die Datei zuletzt aktualisiert wurde. Wenn die Datei nicht vorhanden ist oder das Update länger als drei Stunden zurückliegt, wird YQL abgefragt.

 $ cache = dirname (__ FILE__). "/ cache / $ siteName"; // Zwischenspeicherung alle drei Stunden if (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

YQL ist unglaublich einfach zu handhaben. In unserem Fall verwenden wir es zu einem sehr einfachen Zweck: Rufen Sie den RSS-Feed in JSON-Form der Site, die durch den Querystring geleitet wurde, über auf siteName. Sie können mit den verschiedenen Befehlen mithilfe der YQL-Konsole experimentieren.





Um einen RSS-Feed abzufragen, verwenden wir den Befehl: SELECT * FROM feed WHERE url = "Pfad / zu / rss / feed".

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

Den Weg bauen

Aus Gründen der besseren Lesbarkeit bauen wir unsere YQL-Abfrage abschnittsweise auf.

 // YQL-Abfrage (SELECT * aus dem Feed?) // Zur besseren Lesbarkeit aufgeteilt $ path = "http://query.yahooapis.com/v1/public/yql?q="; $ path. = urlencode ("SELECT * FROM feed WHERE url =" http://feeds.feedburner.com/$siteName ""); $ path. = "& format = json";

Der Schlüssel ist der zweite Teil oben; Wenn die Seite geladen wurde, haben wir den Namen der Site aus der Querzeichenfolge übernommen. Jetzt müssen wir es nur noch in die einfügen WÄHLEN Abfrage. Glücklicherweise verwenden alle Tutorialseiten Feedburner! Stellen Sie sicher, dass Sie Urlencode die Abfrage, um alle Sonderzeichen zu ersetzen.

Okay, der Weg ist bereit. lass uns benutzen file_get_contents () den Feed greifen!

 $ feed = file_get_contents ($ path, true);

Unter der Annahme, dass $ feed jetzt dem zurückgegebenen JSON entspricht, können wir die Ergebnisse in einer Textdatei speichern. Lassen Sie uns jedoch zunächst sicherstellen, dass die Daten zurückgegeben wurden. Solange etwas von der Abfrage zurückgegeben wird, $ feed-> query-> count ist gleich einem Wert größer als Null. Wenn dies der Fall ist, öffnen wir die zwischengespeicherte Datei, schreiben die Daten in die Datei und schließen sie schließlich.

 // Wenn etwas zurückgegeben wurde, zwischenspeichern, wenn (is_object ($ feed) && $ feed-> query-> count) $ cachefile = fopen ($ cache, 'w'); fwrite ($ cachefile, $ feed); fclose ($ cachefile); 

Es scheint verwirrend, aber wirklich nicht. Die Funktion fopen () akzeptiert zwei Parameter:

• Die zu öffnende Datei: Diesen Pfad haben wir im gespeichert $ cache Variable am oberen Rand der Seite. Wenn diese Datei nicht existiert, wird sie für Sie erstellt.
• Zugriffsrechte: Hier können wir festlegen, welche Privilegien verfügbar sind. w steht für "schreiben".

Als nächstes öffnen wir diese Datei und schreiben den Inhalt von $ feed (die zurückgegebenen RSS-JSON-Daten) in die Datei und schließen Sie sie.

Verwenden der zwischengespeicherten Datei

Oben haben wir zuerst geprüft, ob die zwischengespeicherte Datei älter als drei Stunden war.

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

Aber wenn nicht? In diesem Fall führen wir eine sonst Anweisung und packen Sie den Inhalt der Textdatei, anstatt YQL zu verwenden.

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

Schließlich können wir mit dem JSON-RSS-Feed nicht viel anfangen, bis wir ihn mit PHP dekodieren.

 // Dekodiere das shizzle $ feed = json_decode ($ feed);

Und das sollte es für uns tun Regler! Lassen Sie uns, ohne die Logik aus dem Weg zu räumen, unsere HTML-Vorlage einbinden.

 // Include die Ansicht include ('views / site.tmpl.php');

Hier ist unser Finale site.php. Klicke auf das erweitern Symbol, um es anzuzeigen.

 count) $ cachefile = fopen ($ cache, 'wb'); fwrite ($ cachefile, $ feed); fclose ($ cachefile);  else // Wir haben bereits einen lokalen Cache. Verwenden Sie das stattdessen. $ feed = file_get_contents ($ cache);  // Dekodiere das shizzle $ feed = json_decode ($ feed); // Include die Ansicht include ('views / site.tmpl.php'); 

---

Schritt 7: Die Site-Vorlage

Am Ende des vorherigen Schritts haben wir unsere Vorlage (oder Ansicht) geladen. Mach weiter und erschaffe das Ansichten Ordner und site.tmpl.php Datei. Fühlen Sie sich frei, um es nach Ihren Wünschen zu benennen. Als nächstes fügen wir unser HTML ein.

Sehenswürdigkeiten oben

• Beachten Sie, dass wir dasselbe grundlegende Layout verwenden: Kopfzeile, Inhaltsbereich, Fußzeile.
• Da diese Vorlage für jede Tuts + -Tutorialwebsite verwendet wird, müssen wir den Titel dynamisch festlegen. Glücklicherweise wurde, wenn Sie sich erinnern, der Sitename durch den Abfragestring übergeben und im gespeichert $ siteName variabel (wie "nettuts"). Um den ersten Buchstaben groß zu schreiben und die Unterschrift anzuwenden + Nach dem Namen führen wir die Variable durch ucwords () (Der erste Buchstabe jedes Wortes in der Zeichenfolge wird mit einem Großbuchstaben versehen), und hängen Sie a an "+":

• Demnächst wird die Anzahl der Kommentare für jeden Beitrag neben dem Titel angezeigt. Wir können ThemeRoller wieder verwenden, um es über die data-counttheme = "e" Attribut.


Durch den Feed filtern

An diesem Punkt haben wir Zugriff auf die $ feed Objekt, das unseren RSS-Feed enthält. Um dieses Objekt zu zerlegen, können Sie entweder print_r ($ feed), oder verwenden Sie die YQL-Konsole für eine schönere Ansicht. Letzteres verwenden wir in diesem Fall. Hör zu.





Um die Daten für jedes Posting zu erfassen, müssen wir Folgendes filtern: $ feed-> query-> results-> item. PHP macht dies zu einem Kinderspiel für jeden().

Innerhalb des für jeden() Anweisung können wir nun mit die gewünschten Werte erreichen $ item-> title, oder $ item-> Kommentare, Hier wird der Titel bzw. die Kommentarnummer angezeigt. Fügen Sie Folgendes in das ein

Stichworte.

 
 query-> results-> item als $ item) ?> 
 
 & origLink =Guid-> Inhalt); ?> "> Titel; ?>  
 Bemerkungen; ?>  
  

Im obigen Code erstellen wir ein Listenelement mit dem Titel des Beitrags, der Anzahl der Kommentare und einem Link zu article.php Das enthält auch den Site-Namen und den permanenten Link (zum ursprünglichen Artikel auf der Tuts + Site) in der Abfragezeichenfolge.

Wenn wir die aktualisierte Seite im Browser anzeigen, tada!



Beachten Sie, wie sich die Anzahl der Kommentare in einer gelben Blase befindet und nach rechts verschoben wird. Das liegt daran, dass wir das angewendet haben data-counttheme = "e" Attribut für die ungeordnete Wrapping-Liste. Wie praktisch.

Hmm? Ich denke, dass der Text für diese langen Titel zu groß ist. Ein kurzer Besuch in Firebug zeigt, dass ich das Ziel anvisieren kann h2 Tags mit einer Klasse von .ui-li-Überschrift. Kehren wir zu unserem Stylesheet (mobile.css) zurück und fügen Sie eine neue Regel hinzu:

 .ui-li-Überschrift Schriftgröße: 12px; 

Das ist besser.



---

Schritt 8: Anzeigen der vollständigen Buchung

Der letzte Schritt ist zu bauen article.php, Daraufhin wird die gesamte Buchung angezeigt. Wie bei site.php, article.php wird als unser dienen Regler, und fragt den ausgewählten Artikel mit YQL ab und lädt die entsprechende Ansicht.

 Abfrage-> Ergebnisse-> Element; include ('views / article.tmpl.php');

Wenn Sie mitverfolgt haben, sollte der obige Code Ihnen etwas bekannter vorkommen. Wenn wir diese Seite geladen haben, von site.php, Wir haben zwei Elemente über die Abfragezeichenfolge durchlaufen:

• Site-Name: Enthält den Namen der aktuell ausgewählten Tutorial-Site
• Orig Link: Ein Link zum ursprünglichen Beitrag auf der Tutorial-Site

Der Unterschied zur YQL-Abfrage besteht dieses Mal darin, dass wir die Übereinstimmung mit der guid (orig link) mit dem Beitrag, auf den der Benutzer geklickt (oder gedrückt) hat. Auf diese Weise wird genau ein Beitrag zurückgegeben. Sehen Sie sich diese YQL-Beispielabfrage an, um eine bessere Vorstellung von dem zu erhalten, was ich meine.



Artikelvorlage

Am Ende des obigen Codes haben wir die Vorlagendatei für die Artikelseite geladen: ansichten / article.tmpl.php. Wir werden diese Datei jetzt erstellen.

   
 
 
  
  
 
 Titel; ?> 
 
 Beschreibung; ?> 
 
  
  

Ah - so vertraut. Wir haben diese Vorlage bereits besprochen. Der einzige Unterschied ist, dass diesmal, da nur ein Beitrag aus der YQL-Abfrage angezeigt wird, wir uns nicht mit a beschäftigen müssen für jeden() Aussage.


Nicht gestylte Artikelseite

An dieser Stelle können Sie als nächstes den gewünschten Stil auf den Artikel anwenden. Ich sehe in diesem Tutorial keine Notwendigkeit, es durchzugehen, da alles auf den persönlichen Geschmack zurückzuführen ist. Hier ist meine super-minimale Version.


Anwenden von Schriftgröße, Zeilenhöhe, Abstand und Bildformatierung.

Gesperrte Fußzeilen

Eine letzte Sache: In der Fußzeile des Artikels verlinken wir auf das ursprüngliche Posting von Nettuts +. In seinem aktuellen Zustand wird der Leser dies nur sehen, wenn er den unteren Rand des Artikels erreicht. Lassen Sie uns die Fußzeile immer am unteren Rand des aktuellen Ansichtspunkts sperren. Wir können die verwenden Datenposition Attribut, um dies zu erreichen.

Das ist besser!

---

Wir sind fertig!

Und mit relativ wenig Arbeit haben wir erfolgreich einen mobilen RSS-Reader für die Tuts + -Seiten erstellt. Es kann sicherlich erweitert werden, um zusätzliche Funktionen, Fehlerprüfungen und Leistungsverbesserungen bereitzustellen, aber dies wird Sie hoffentlich zum Einstieg bringen! Möchten Sie das Projekt unter allen Umständen abbauen und verbessern? tun! Vielen Dank für das Lesen. Weitere Informationen finden Sie in der jQuery Mobile-Dokumentation. Ich habe keinen Zweifel, dass Sie auf unserer Schwesterseite Mobiletuts weitere Tutorials zu jQuery Mobile finden werden+.

Fügen Sie den Reader Ihrem iPhone-Startbildschirm hinzu


Demo ansehen oder besser machen!
Code