Sehr komfortable Lösung, die den eigenen Server entlastet und Framework-Updates überflüssig macht. Haken wie so oft: man wird noch abhängiger von Google. Habe diese Seite erstmal angepasst. Die jQuery-Bilbiothek für coldheat.de, wohnt nun bei Google. Vereinfacht sicherlich auch sehr das Mischen diverser Bibliotheken, von dem man eigentlich prinzipiell absehen sollen.

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Google works directly with the key stake holders for each library effort and accept the latest stable versions as they are released. Once we host a release of a given library, we are committed to hosting that release indefinitely.

The AJAX Libraries API takes the pain out of developing mashups in JavaScript while using a collection of libraries. We take the pain out of hosting the libraries, correctly setting cache headers, staying up to date with the most recent bug fixes, etc.

Feedback: 0 Kommentare

Meine Link-List auf der Start-Seite bzw. der dazugehörige Feed, sind nichts anderes, als meine Empfehlungen im Google-Reader. Ein Klick im Reader und die Überschriften erscheinen auch hier. Zwar bietet Google dafür extra eine vorgefertigte Lösung, die mir aber zu aufgebläht in der Struktur und insgesamt zu unflexibel ist. Google bietet aber auch eine eigene API zum Sammeln und ausgeben von Feeds auf Webseiten, damals noch einfach Google Feed API genannt, heute schon als Google AJAX Feed API betitelt.

Der Zusatz AJAX sorgt für noch aufgeblähteren Quellcode und völlig fehlende Semantik, weshalb ich auch hier wieder einen großen Bogen um die fertigen Lösungen mache und was Eigenes bastle. Es folgt ein kurzes Tutorial zum Javaskript der Feed-Darstellung.

Inhalte verlinken nicht stehlen

Nichts gegen die immer beliebter werdenden Feed-Aggregatoren – Webseiten, die praktisch nur Inhalte anderer Seiten mit Hilfe derer Feeds bei sich darstellen – ich halte eine solche Praxis für aüßerst fragwürdig. Hier entsteht der Eindruck fremde Inhalte als eigene verkaufen zu wollen. Links zur Quelle hin oder her, falsch bleibt falsch. Komplette Feed-Items sollte man einfach nicht absaugen und einfach so bei sich darstellen, das ist einfach schlechte Schule. Gute Schule dagegen ist ein einfacher Link der Überschrift, hin zur fremden Seite. Nichts anderes bringt das folgende Skript mit.

warum keine fertige Lösung?

Fertige Lösungen gibt es zwar viele, aber bei allen bin ich immer irgendwo eingeschränkt. Sei es viel zu komplexer Quellcode, langsame Skript-Performance, oder Grenzen bei der CSS-Gestaltung. Nur bei einer eigenen Lösung ist man alle Probleme los. Hinzu kommt, dass es kinderleicht ist, mit Google’s APIs zu arbeiten. Was man als erstes benötigt ist ein API-Schlüssel von Google, der sich hier holen lässt. Meine Version ist damals noch mit der alten Version dieser API entstanden, gehe aber mal stark davon aus, dass Schlüssel und API abwärtskompatibel sind und somit mein Skript, auch mit neuen Schlüsseln funktioniert.

Dieser API-Schlüssel wird dann auf der jeweiligen Seite, mit einem Skript-Verweis im Head aktiviert:

<script type="text/javascript" src="http://www.google.com/jsapi?key=sgj[...]"></script>

feed-display.js

Das fertige Skript auf den eigenen Server packen und auf der eigenen Seite, wie schon den API-Schlüssel einbinden:

<script type="text/javascript" src="http://www.meinewebsite.de/feed-display.js"></script>

Nun kann man mit folgender Syntax munter Feeds auf der eigenen Seite darstellen lassen. Wer zum Beispiel eine Liste mit Links zu den letzten 5 Einträngen dieser Seite, in einer Div mit der id „cold-heat“ haben möchte, bekommt es mit folgendem Aufruf im HTML:

<script type="text/javascript">
new rssdisplayer("cold-heat", "https://www.coldheat.de/feed", 5, "title")
</script>

Die Ausgabe mit HTML sieht dann wie folgt aus:

<div id="cold-heat">
<ul>
    <li class="blogtitle">Titel des Blogs</li>
    <li class="tagline">Blog-Beschreibung</li>
    <li><a title="Titel des Artikels" href="https://www.coldheat.de/...">Titel des Artikels</a></li>
    <li><a title="2" href="https://www.coldheat.de/...">2</a></li>
    <li><a title="3" href="https://www.coldheat.de/...">3</a></li>
    <li><a title="4" href="https://www.coldheat.de/...">4</a></li>
    <li><a title="5" href="https://www.coldheat.de/...">5</a></li>
</ul>
</div>

Eine einfache valide Struktur, ohne große Schnörkel. Für jeden Feed benötigt man dann einen separaten Aufruf des Skripts. Wer unbedingt die kompletten Inhalte nutzen möchte, sollte sich das Skript genauer anschauen, es beinhaltet alle Zutaten auch komplette Inhalte der Links darzustellen. Die Schlüssel-Zeile ist im Skript ausreichend kommentiert.

Feedback: 5 Kommentare

Man kann über Google so viel schwarzmalen wie man möchte, aber die immer neuen APIs sind immer wieder einfach besser als die Konkurrenz. Die nun offene Chart API ist da keine Ausname. Es ist die eierlegende Wollmilchsau geworden. Einst exklusives internes Tool für Google, steht es nun jedem Anwender offen, sofern man sich mit 50.000 Abfragen pro Tag begnügt.

Für diese Seite sind die Pie-Charts am interessantesten. Nach kurzem Lesen der Instruktionen, bekomme ich aus den alten Daten dieses Eintrags, sowas heraus:

Hierzu ein winziges kurzes Tutorial, das kurz die API erklären soll. Da diese Art von Diagrammen die sicherlich einfachsten der API sind, bietet sich mein Beispiel auch bestens an. Im Gegensatz zu anderen Google APIs braucht man hier keinen API Key, sondern arbeitet einzig und allein mit URLs. Jede URL baut sich aus mehreren Paramentern auf. Fangen wir mal einfach an mit einem einfacherem Diagramm:

Die URL für dieses Diagramm besteht aus 4 Parametern, die durch ein Ampersand-Symbol verbunden, in der URL an das API übergeben werden. Die Parameter hierfür lauten:

1. cht=p3
2. chs=468x242
3. chd=s:1cs
4. chl=Label-1|Label-2|Label-3

Zeile 1 definiert die Art des Diagramms. Zeile 2 beschreibt die Größe, alle Diagramme werden als normales Bild ausgegeben. Zeile 3 beschreibt die eigentlichen Werte und Zeile 4 schließlich die Beschriftung dieser Werte. Die URL umschreibt also: „Zeichne ein Diagramm der Art 3D Pie-Chart, in den Maßen 468 Pixel breit und 242 Pixel hoch. Gebe dem Diagramm 3 Werte – 53, 28, 19 – und beschrifte diese Werte mit Label-1, Label-2 und Label-3.“ Soweit so einfach.

Etwas abstrakter wird es bei der eigentlichen Beschreibung der Werte. Google bietet hier drei Methoden, alle umschreiben eine andere Art der Kodierung. Mein einfaches Beispiel funktioniert mit dem was Google als Simple Encoding betitelt und was der String chs= in der URL einleitet. Hier die Regeln zum Simple Encoding:

• Upper case A = 0, B = 1 and so on to Z = 25.
• Lower case a = 26, b= 27 and so on to z = 51.
• Zero (0) = 52 and so on to 9 = 61.
• Specify a missing value with an underscore (_).
• If you have more than one set of data, separate each set with a comma (,).

Meine 3 Werte (53, 28, 19) werden in dieser Kodierung also als „1cs“ beschrieben.

• 1 = 53
• c = 28
• s = 19

Wer diesen Schritt einmal durchschaut hat, der hat das Schlimmste hinter sich. Viel mehr gibt es eigentlich nicht zu schreiben. Diese API ist äußerst einfach für diese simplen Diagramme. Komplexer wird es erst bei anderen Diagramm-Arten.

Neben dem dreidimensionalen Pie-Chart, gibt es natürlich auch die klassische zweidimensionale Variante:

Man darf das Ganze auch einfärben. Entweder mit einem Farbwert, welcher dann abgestuft wird:

Oder auch mit je einem separaten Farbwert für die einzelnen Abschnitte:

Kann nur jedem empfehlen sich die API mal näher anzuschauen. Glaube da wird man hier bei mir in Zukunft mehr von sehen. Daumen hoch für Google’s Chart API. Kleines aber feines Detail am Rande: Läd man eine dieser URLs für sich separat, dann ist das Favicon im Browser auch wirklich eine verkleinerte Ansicht des jeweiligen Diagramms.

Feedback: 1 Kommentar

Erinnert sich noch jemand an diesen Eintrag? Ich schon. Immer intensiver sogar. Die damalige Lösung war ein Skript auf dem Server, dass aus einem RSS- oder Atom-Feed, HTML-Code zauberte. Leider war dieses Skript doch recht eingeschränkt, langsam und beanspruchte den Server doch zu sehr. Wenige Monate später bot Google ein passende Lösung, genannt Google Feed API. Diese API ist durchaus schnell und beansprucht nicht den eigenen Web-Server. Dieses Problem wär also gelöst, auf geht’s zum nächsten.

Diese Feed-API verarbeitet jeden Feed als separates Objekt und mein Javaskript-Wissen ist zu begrenzt, um diese Objekt-Daten dann miteinander zu vergleichen, auszuwerten und das Ergebnis auszugeben. Was ich somit brauche ist ein einziger Feed.

Hier kommt Google-Lösung Nummer Zwei ins Spiel. Google’s Reader dient mir schon lange als primäre RSS-Reader-Lösung. Dazu gibt es auch die Möglichkeit Feed-Items mit anderen zu teilen. Finde ich etwas sehr Lesenswertes, dann kann ich diesen Text anderen Lesern zugänglich machen. Dieses „shared Items“-Feature wiederum bekommt eine eigene URL samt eigenem Feed, aus jenen Links, die ich teilen möchte. Soweit perfekt.

An diesem Punkt habe ich einen separaten Feed mit Links den ich gern hier einbinden möchte. Das funktioniert soweit auch, nur gibt es mit dem Feed ein Problem. Was man sieht, ist einmal Google’s eigene Lösung, sowie mein Versuch. Irgendwie bekommt meine Lösung nicht die aktuellen Feed-Daten.

Zuerst dachte ich, dass mein Javaskript irgendwo den Fehler verusacht, aber wenn ich diesen Shared-Items-Feed auf der Feed-API Seite in dieses Modul integriere, dann sind auch da nur alte Feed-Daten zu sehen. Mein Skript kann also den Fehler nicht verusachen. Der Feed im herkömmlichen Readern betrachtet wird fehlerlos aktualisiert, beim Einbinden in eine stinknormale Website kommt nur eine alte Version des Feeds an und ich habe keinen blassen Schimmer wieso.

Ich möchte hier keine halbherzige Lösung anbieten. Auf lange Sicht möchte ich meinen eigenen RSS-Reader haben, auch der Google-Reader ist für meinen Geschmack durchaus überfrachtet. Momentan brauch ich noch mehr Erfahrung und Wissen, wie andere RSS-Lösungen so funktionieren. Google selbst macht es einem nicht allzu einfach ihre obskuren, dateneffektiven aber undokumentierten Skripte zu analysieren.

Feedback: 0 Kommentare