Ajaxschmiede.de

Wie angekündigt, war ich in München, um am Google Developer Day 2008 im ICM auf dem Messegelände in München teilzunehmen. Pünktlich um 06:00 Uhr in der Frühe ging mein Flieger ab Dresden. Obwohl ich bereits 08:30 Uhr vor Ort war, konnte ich mich schon registrieren. Neben meinem Namensschild bekam ich einen lustigen USB Stick, auf dem sich Daten zum Event befinden.

Punkt 09:00 Uhr war dann Einlass. Bereits vor Beginn der Eröffnungsrede wurden wir Teilnehmer mit Getränken und kleinen Snacks verpflegt. Die Themen der Konferenz waren die Maps API, YouTube API, Visualization API, App Engine, Web Toolkit, OpenSocial, Android, Gears und nicht zu vergessen Google Chrome. Neben den Breakout Sessions gab es auch Codelabs, in denen man sich mit der Programmierung von Anwendungs-Szenarien auseinander gesetzt hat.

Ich selber habe bisher nur mit der Maps API und vereinzelt auch mit der Visualization API gearbeitet, deshalb beschloss ich das Maps Codelab zu besuchen. Interessant fand ich, dass man dank eines Plugins die Google Earth API mit der Maps API nutzen kann. Ebenso kann Streetview verwendet werden. Nach dem Codelab war dann auch schon Mittagspause. Während der Mittagspause gab es einen zusätzlichen Vortrag über den neuen Webbrowser Google Chrome und die V8 Engine.

Nach der Pause besuchte ich den äußerst interessanten Vortrag über die YouTube API. Mit dieser API kann man in der Tat ohne großen Aufwand seine eigene Video Community erstellen. Als nächstes wollte ich mich über die App Engine informieren. Das tat ich dann auch einige Minuten, bis ich mangels Interesse in einen anderen Konferenzraum zum Thema Android wechselte. Dort wurde die zum selben Zeitpunkt laufende Pressekonferenz in New York zum neuen Mobiltelefons „G1“ per Live Stream übertragen.

Danach war es auch schon 17:30 Uhr und Zeit für die Schlussrede. Diese wurde größtenteils von Chris DiBona geführt, der nochmal einige Features von Android OS, welches eine offene Entwicklungsumgebung bietet, zeigte.

Zum Abschluss des Tages standen die Google Mitarbeiter für Gespräche oder auch ein Spielchen am Kickertisch zur Verfügung.

Update 26.09.2008:
Soeben bekam ich eine Mail von Google. Hier gibts ein Fotoalbum vom Developerday in München.

Der Internetriese Google breitet sich in den Weiten des World Wide Web weiter aus.

Am heutigen Dienstag stellte das Unternehmen mit der gleichnamigen Suchmaschine einen eigenen, auf WebKit basierenden Browser namens Google Chrome als Beta-Version der Öffentlichkeit vor.

In Sachen Ausführungsgeschwindigkeit von Javascript ging man jedoch eigene Wege und ließ in Dänemark die JS-Engine V8 entwickeln.

Die Gründe dafür liegen in der Tatsache, dass zu Projektbeginn nicht abzusehen war, dass die WebKit-Entwickler mit SquirrelFish bereits an einer virtuelle Javascript-Engine arbeiten, die einen enormen Performanceschub bringen soll.

Die virtuelle V8-Engine erzeugt dynamisch aus dem Javascript-Code Maschinencode, der direkt vom Prozessor ausgeführt wird.

Vor allem in modernen, javascriptlasten Webanwendungen – wie GoogleMaps – soll V8 dadurch seine Stärken ausspielen können.

Wie der gesamte Browser, nutzt V8 auch die Vorteile von Mehrkernprozessoren zur weiteren Performancesteigerung.

Durch das dynamische Optimierungsverfahren „Hidden-Class-Transition“ werden JS-Objekte mit gleichen Eigenschaften um nicht sichtbare, geteilte Klasse erweitert.

Innerhalb von Google Chrome wird jeder Tab in einem eigenen Prozess ausgeführt.

Dadurch wird zum einen das Speicherleckproblem umgangen, da nach jedem Schließen eines Tabs der Speicher vom Betriebssystem selbst freigegeben wird, und zum anderen verhindert man so den Komplettabsturz des Browsers bei unerwarteten Fehlern beim Öffnen von Internetseiten.

Aus Webentwicklersicht ist der eingebaute Prozessor-, Speicher- und Netzwerk-Ressourcenmanager das eigentliche Highlight, der für jeden einzelen Tab – und damit für jede Website separat – die Systembelastung anzeigt.

Ebenso wie Safari und Microsofts Internet Explorer 8 bietet Google Chrome das Surfen über einen „Privacy Mode“ an. Wird dieser für einen Tab aktiviert, werden weder Cookies, noch Einträge in der Chronik oder sonstige Spuren hinterlassen, die Dritten Aufschluß über das Surfverhalten des jeweiligen Nutzers bieten könnten.

Mit dem „Omnibox“ genannte Feature vereint der Suchmaschinenriese die Adressleiste mit dem in der Konkurrenz meist zu findenden, unabhängigen Eingabefeld für Suchanfragen.

Im Großen und Ganzen bietet Google einen Browser auf dem Stand der Zeit mit ansonsten allen bekannten Features wie Phishing- und Malware-Filter zum Schutz des Users vor Betrügern.

Wer Interesse hat, kann den Google Chrome hier downloaden.

Über die weiteren Pläne und Visionen wird Google auf dem Google Developer Day berichten, der am 23. September in München stattfinden wird. Tobias und ich werden vor Ort sein und über Neuigkeiten und Eindrücke berichten.

Den Web-Übersetzer von Google kennen sicher die meisten. Google bietet mit der „Google AJAX Language API“ jetzt für Webentwickler die Möglichkeit eine derartige Übersetzungsfunktion in ihre Seiten einzubinden. Geniale Sache!

Die Entwickler-API wird per Javascript in die Applikation eingebettet. Der nachfolgende Code-Schnipsel zeigt, wie einfach das geht. Es wird die zu übersetzende Zeichenkette sowie Quell- und Zielsprache übergeben. Bei Erfolg wird die Ausgabe in den div-Container mit der id „translation“ geschrieben.

google.language.translate("Hello world!", "en", "de", function(result) {
if (!result.error) {
    var container = document.getElementById("translation");
    container.innerHTML = result.translation;
  }
});

Das Script liefert wie zu erwarten die Ausgabe: Hallo Welt!

Die zu übersetzende Sprache kann aber auch dank AJAX automatisch erkannt werden. Die korrekte Erkennung hängt jedoch von der Menge des Textes ab. Den Beispielcode für die Erkennung der Sprache und die automatische Übersetzung sind im Developer’s Guide der Language-API zu finden.

Google plant für die Zukunft weitere nette Fähigkeiten für ihre Sprach-API. Lassen wir uns überraschen 🙂

Die zum Zeichnen von Graphen entwickelte flot-Javascriptbibliothek ist seit einiger Zeit in der Version 0.4 erhältlich.

Zu den Änderungen gegenüber der bisheriger 0.3er Version gehören unter anderem folgende Punkte:

• Unterstützung von Zeitangaben an den Graphenachsen über mode=“time“
• Unterstützung farbiger Hintergrundflächen mittels grid.coloredAreas( x1, y1, x2, y2 ) – die Parameter geben die beiden Eckpunkte der Fläche oben-links und unten-rechts an
• Unterstützung von Strichlinien
• die Rahmenbreite ist nun veränderbar
• Überarbeitung des automatischen Achsen-Skalierungsalgorithmuses

Wie man flot ein bindet und was man damit anfangen kann, haben wir in unserer Vorstellung dieser Bibliothek aufgezeigt. Zudem haben wir auf Grundlage von flot einige Beispielanwendungen erstellt.

Der Grund für die neue Version liegt vorrangig – wie man dem Entwickler-Blog entnehmen kann – im Beheben von Fehler in jQuery 1.2.2. Die aktuelle Version ist jetzt absolut kompatibel zu Adobe AIR. Des Weiteren wird diese Version in dem CMS „Drupal 6“ eingesetzt und bildet die Grundlage für jQuery UI 1.5. Darüber hinaus wurden in dieser Version einige nebensächliche Funktionen für Plugin-Entwickler hinzugefügt.

.data() and .removeData()

Diese Methoden ergänzen die bereits existierenden Methoden jQuery.data und jQuery.removeData, die in jQuery 1.2 eingeführt wurden. Diese Methoden wurden für Plugin-Entwickler angepasst.

.unbind(”.namespace”)

In der Version 1.2 konnte man definierte Ereignisse hinzufügen und entfernen. Jedoch musste man immer ein Name des verwendeten Event-Typs inkludiert werden. Jetzt können alle gebundenen Ereignisse, die zu einem bestimmten Namensraum gehören, entfernt werden.

.trigger(”click!”)

Es wurde eine neue Ergänzgung hinzugefügt, die es erlaubt mit einem Namen versehene Ereignisse vom Ausgelöstwerden auszuschließen.

Alpha Versionen von jQuery UI 1.5 und jQuery Enchant 1.0

Außerdem präsentierten die jQuery-Entwickler die Alpha-Version von jQuery UI 1.5 vor. Diese Alpha stellt eine Generalüberholung des bestehenden Codes dar, behebt dabei unzählige Fehler und beschleunigt die API. Es wird noch einige Zeit und endloses Testen dauern bis diese Version genauso stabil läuft wie die 1.2er.

Zusätzlich gaben die jQuery-Väter bekannt, an einem Plugin namens jQuery Enchant zu arbeiten und veröffentlichten auch gleich eine Alpha-Version davon. jQuery Enchant soll die jQuery-Bibliothek um eine Menge zusätzlicher Effekte bereichern, wie zum Beispiel „Abschneiden“, „Wackeln“ und „Explodieren“. Auch Enchant wird noch eine Entwicklungs- und Testzeit verschlingen.

jQuery 1.2.3 herunterladen

Die letzten beiden Wochen verbrachte ich unter anderen damit, mein Skript zur Darstellung mathematischer Funktionen mittels flot weiterzuentwickeln. Dabei entdeckte ich die fehlerhafte Darstellung gebrochener Zahlen in heutigen PC-Systemen und etliche andere Kleinigkeiten, auf die ich gleich eingehen werde. Insgesamt bin ich einen großen Schritt vorwärts gekommen.

Erfolgreich implementierte ich die Möglichkeit eine Kurvenschar (Funktionsschar) anzeigen zu lassen. Als zweiten Parameter entschied ich mich für die Variable z, da mir das für gewöhnlich genutze a größere Probleme beim Ersetzen des Parameters durch konkrete Werte bereitet hätte. So kommt beispielsweise ein a in Math.exp() beim Verwenden einer Exponentialfunktion vor.

Wie angekündigt habe ich die Möglichkeit eingebaut, sich über Scrollbuttons in der Grafik zu bewegen. Das erleichtet das Verfolgen eines Funktionsverlaufs erheblich. Mir ist es bisher nicht gelungen, das Zoomen mit dem Mausrad mittels des mousewheel-Plugins für jQuery 1.2.2 zu integrieren.

Alle Änderungen im Überblick:

• Einbau der numlib-Bibliothek zum Eingrenzen des Binärdarstellungsproblems von gebrochenen Zahlen
• Möglichkeit zur Darstellung von Kurvenscharen
• Integration einer Scrollfunktion in die Funktionsgrafik
• Möglichkeit die Schrittweite automatisch berechnen zu lassen
• Zulassen von gebrochenen Zahlen im Exponenten der Exponentialfunktion ( = Wurzelfunktion )
• Fehler bei negativen Zahlen behoben ( — gleich +)
• Potenzgesetze in einfacher Form eingebaut ( x[2][3] gleich x[6] )

Ich werde weiter am Ball bleiben und das Skript stetig ergänzen. Man sieht bereits, dass es vorgesehen ist, eine zweite selbstdefinierte Funktion parallel in der Grafik anzuzeigen.

Folgende Neuerungen plane ich bis zur nächsten Veröffentlichung zu realisieren:

• e-Funktion soll verwendet werden können
• ebenso trigonometrische Funktionen
• Optimierung der Scrollfunktion (nicht bei jeder Bewegung alle Werte neu berechnen)
• Mausrad-Zoom-Funktion
• Möglichkeit zwei unabhängige Funktionen darzustellen
• Verallgemeinerung der regulären Ausdrücke
• ausgeprägtere Gliederung in Funktionen oder Objekte
• Erweiterung der Potenzgesetze

Und nun viel Spaß beim Ausprobieren der aktuellen Version meiner flot-Anwendung.

Angeregt durch einen Artikel von Lutz Tautenhahn über das Zeichnen von Diagrammen und Funktionen mittels Javascript überlegte ich mir, ob es mit Hilfe der Javascript-Bibliothek flot, über die wir bereits berichteten, nicht ebenso möglich ist, mathematische Funktionen darzustellen.

Bereits nach kurzer Zeit hatte ich es geschafft, meine erste Funktion mittels Javascript und flot zu zeichnen. Als mathematisch geprägter Mensch war ich mit den Kompromissen, die ich in Bezug auf das Aufstellen von Gleichungen eingehen musste, jedoch nicht zufrieden und wollte Abhilfe schaffen.

Um es vorweg zu nehmen: Ich hatte Erfolg. Das Ergebnis meiner Bemühungen kann man in dieser Demonstration sehen, die es auch erlaubt komplexere Funktionen zu visualisieren

Das Script macht massiven Gebrauch von regulären Ausdrücken – zum einen um die eingegebene Funktion zu überarbeiten, zum anderen zum darstellen.

Kernstück des Zeichnens von Gleichungen ist die folgende for-Schleife, die einerseits die Aufgabe hat das x in der Funktion bei jedem Durchlauf gegen den Zählerwert zu ersetzen und andererseits das benötige Array, das an flot übergeben wird, bestehend aus x- und y-Wert aufzubauen:

for ( var i = startwert; i <= endwert; i += schrittweite ) { ausgabe = funktion.replace(/x/gi, i); var1.push([i, eval(ausgabe)]); } [/source] Das übrige Javascript dient, wie bereits erwähnt, dazu das Aufstellen von Funktionen sehr zu vereinfachen und für den Menschen intuitiver zu gestalten. Reguläre Ausdrücke übersetzen diese Kürzel und Kurzschreibungweisen in für den Browser verständliche Operationen. Folgende Vereinfachungen habe ich implementiert:

• 2x anstatt 2*x
• x(x+2) anstatt x*(x+2)
• x[5] bzw. (x+2)[5] anstatt Math.pow(x, 5) bzw. Math.pow(x+2, 5) zum Potenzieren
• ² und ³ wird akzeptiert
• Leerzeichen können beliebig gesetzt werden
• gebrochene Zahlen können sowohl mit , als auch mit . geschrieben werden

Ich werde an meinem Script weiter arbeiten, da ich noch etliche Ideen habe, die ich gern umsetzen will.

Unter anderem z.B.

• Anzeigen von mehr als einer Gleichung
• Bilden von Ableitungen und Stammfunktion
• Darstellen einer Funktionenschar (Funktion mit 2 Variablen)
• Scrollen innerhalb der Grafik
• Angabe von Extrema und Wendepunkten (Annäherung oder Gleichung) und Markieren dieser
• Möglichkeit des Einzeichnens der Tangente an einen Punkt (samt Funktion?)

Zur Demoseite

Flot ist eine Javascript-Bibliothek zum Erstellen von ansprechenden Diagrammen auf einfache Weise. Das dänische Web-Studio Iola entwickelte flot als Plugin für das Ajax-Framework jQuery. Aktuell ist flot in der Version 0.3 verfügbar und wird auf einer Projektseite bei Google Code publiziert.Ich habe ein paar Beispiele erstellt, anhand derer ich die Funktionsweise und die Möglichkeiten von flot aufzeigen will.

Im html-Header müssen zuerst die Javascript-Dateien eingebunden werden. Das wäre zum einen die jQuery- und zum anderen die Flot-Bibliothek. Da Flot die erst mit HTML5 und bisher nur von Firefox unterstützte Canvas-Zeichenoberfläche verwendet, muss zusätzlich die Bibliothek angehangen werden, die Canvas für den Internet Explorer verfügbar macht.

<!--&#91;if IE&#93;><script type="text/javascript" src="excanvas.pack.js"></script><!&#91;endif&#93;-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

Anschließend kann man beginnen die Diagramme zu positionieren. Dies geschieht über das div-Element, in dem auch gleich die Ausmaße des Plots angegeben werden. Wichtig ist hierbei das id-Element zum eineindeutigen identifizieren des div.

<div id="dia1" style="width: 500px; height: 200px"></div>

Der „Zaubertrick“ zum einfachen Erstellen von Diagrammen geschieht in einer Javascript-Funktion. Zu aller erst legt man einen oder mehrere Datensätze fest (das können festgelegte Werte sein oder Datenpaare, die man mittels einer Schleife sich erzeugen lässt, sein). Im Anschluss ruft man über die plot-Methode des $-Operator die Funktion zum Erstellen des Diagramms auf und gibt dabei alle benötigen Variablen. Hier ein Beispielaufruf:

$(function () {
	var d1 = [[0, 6], [1, 2], [4, 5], [7, 8], [9, 10]];

	$.plot($("#dia2"), [
	{
		color: "rgb(0, 0, 255)",
		data: d1,
		bars: { show: true }
	}
	]);
});

Wie bereits beschrieben, legt man zuerst den Datensatz fest – im Beispiel d1. Ein Datensatz besteht aus einem Array mit beliebig vielen Elementen, wobei jedes Element ein zweidimensionales Array ist. Das erste Datenpaar lautet [0,6], d.h. für x = 0 ist y = 6.

Der Aufruf der $.plot-Methode erwartet bis zu 3 Parameter. Der erste Parameter enthält die id des div, in das der Plot geschrieben werden soll. Mit zweiten Parameter werden der Funktion sowohl die Daten als auch die Art der Darstellung übergeben. Dies geschieht ebenfalls in einem Array. Würde man also 2 Kurven in ein Diagrammm zeichen wollen, würde ein solcher Aufruf etwa die Form $.plot($(„#dia2“), [{data: d1, lines: { show: true }}, {data: d2, lines: { show: true }} ]); haben. Der dritte Parameter ist optional, also keine Pflicht. Über diesen ist es möglich, das Diagramm an die eigenen Bedürfnisse genauer anzupassen.

Folgende Möglichkeiten zur Darstellungen der Daten (2. Parameterteil) sind verfügbar:

• color – legt Farbe des Graphen fest
• data – die zu übergebenden Daten
• label – Bezeichnung / Titel des Graphen (z.B. in der Legende)
• lines – Darstellung der Daten als Linie
• bars – Darstellung der Daten als Balken
• points – Darstellung der Daten als Punkte
• shadowSize – Größe des vom Graphen erzeugten Schattens

Zum Formatieren der Legende wurden folgende Optionen implementiert (Auszug):

• show – erwartet true oder false, je nachdem ob die Legende zu sehen sein soll oder nicht
• noColumns – Anzahl der Legendenspalten
• position – erwartet als Parameter „ne“, „nw“, „se“ oder „sw“ um festzulegen in welcher Ecke die Legende stehen soll
• margin – Abstand der Legende vom Diagrammrand
• backgroundColor – definiert die Hintergrundfarbe
• backgroundOpacity: setzt den Transparenzwert (zwischen 0.0 und 1.0)

Es existieren noch unzählige weitere Möglichkeiten zum individuellen Anpassen des Diagramms wie zum Beispiel das Fixieren der Achsenausmaße oder das Festlegen eines Rastes. Wer mehr dazu erfahren will, sollte die Dokumentation lesen.

Verglichen mit der Google Chart API bietet Flot zwar weniger Diagrammarten, läuft dafür aber lokal statt stets über Google. Des weiteren finde ich die Chart API weitaus kryptischer und damit bei komplexeren Diagrammen schwerer handhabbar. Für welchen Art man sich letztlich entscheidet, steht jedem frei.

Vor kurzem berichteten wir über Google`s neue Chart API. Wer sich mit der API schon einmal auseinander gesetzt hat, hat sicher gemerkt, dass sich Diagramme sehr leicht erstellen lassen. Sobald das Diagramm umfangreicher wird, wird es jedoch komplizierter den richtigen Link zusammen zu bauen, der dann an die Google Chart API geschickt wird.

Jetzt gibt es dafür die ultimative Unterstützung, den Chart Maker. Der Chart Maker bietet eine grafische Benutzeroberfläche, über die sich die Konfiguration für das Diagramm festlegen lässt. Mit einem Klick auf den Button „GET CHART“ lässt sich auch sofort eine Diagramm-Vorschau generieren. Ebenso wird der fertige Link für den <img> Tag erzeugt, den man nur noch kopieren und an die gewünschte Stelle einfügen muss.

Der Code des Chart Maker wurde bei Google Code veröffentlicht.

Hier ein Screenshot:

Jeder Webmaster musste bestimmt schon einmal Daten in Form eines Diagramms für eine Web-Applikation visualisieren. Dafür konnte in der Vergangenheit zum Beispiel die PHP-Klasse PHPLOT genutzt werden. Noch einfacher geht es jetzt mit der Google Chart API, einer einfachen Schnittstelle, die anhand einer URL dynamisch ein Diagramm erstellt. Man definiert im HTML-Code für das Diagramm ein Bild und gibt als Quelle die URL mit den gewünschten Parametern zur Google Chart API an. Google liefert das fertige Diagramm. Einfach genial!

Die URL im HTML <img> Tag sieht wie folgt aus:

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

Diese Parameter können verwendet werden:

• cht der Diagrammtyp (chart type), z.B. p3 für ein 3-dimensionales Kuchendiagramm
• chd die Diagrammdaten (chart data)
• chs die Diagrammgröße (chart size) in Pixel, z.B. 250×125
• chl die Diagrammbeschriftung (chart labels), deren Werte mit | abgetrennt werden, z.B. A|B|C
• chco die Farben der einzelnen Diagrammelemente (chart colors)

Die Diagrammdaten können in drei verschiedenen Formaten kodiert angegeben werden:

Simple encoding

chd=s:<chart data>

Die Daten werden mittels Groß- und Kleinbuchstaben sowie Ziffern angegeben. Der Unterstrich deklariert einen fehlenden Wert. Mehrere Datenmengen werden über das Komma abgetrennt.

Text encoding

chd=t:<chart data>

Die Daten bestehen aus Fließkommewerten (float) von 0.0 bis 100.0 . Einen fehlenden Wert kann über -1 deklariert werden. Mit dem Pipe-Zeichen | werden einzelne Datenmengen getrennt.

Extended encoding

chd=e:<chart data>

Diese Daten bestehen jeweils aus einem Paar der Zeichen A bis Z, a bis z, 0 bis 9, Bindestrich und Punkt angegeben. Die Datenmengen werden hier wieder über das Komma getrennt.

Es stehen einige verschiedene Diagramm-Typen wie Linien-, Balken-, Kuchen-, Venn- und Punktdiagramm zur Auswahl.

Hier ein paar Beispiele:

Kuchendiagramm

http://chart.apis.google.com/chart?cht=p3&chd=s:hmz&chs=250x125&chl=Teil1|Teil2|Teil3&chco=ff0000</code></pre>

Venn-Diagramm

http://chart.apis.google.com/chart?cht=v&chs=200x125&chd=t:100,80,60,30,30,30,10&chco=00ff00,0000ff,ff0000</code></pre>

Punktdiagramm

http://chart.apis.google.com/chart?cht=s&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=200x125</code></pre>

Für das Ajax-Framework jQuery gibt es ein Zeichnen-Plugin, mit dem sich ebenfalls Diagramme erstellen lassen. Darauf werden wir noch in einem separaten Blog-Post eingehen.