Archiv der ‘Tutorials’ Kategorien
Google Maps Geocoding
Seit einer Weile gibt es im Google Maps API auch eine Geocoding Funktion.
Diese Funktion erlaubt es für Ortsangaben die Längen und Breitengradinformationen zu erhalten.
So kann beispielsweise eine Strassenadresse übergeben werden, und die Länge/Breite Information wird als Antwort geliefert.
Im Gegensatz zum Yahoo Geocoding Service bietet der Google Geocoder auch für Deutschland, Frankreich und Spanien geographische Daten bis auf Strassen-Niveau.
Der Yahoo Dienst funktioniert derzeit nur für US Adressen.
Bei developer.com gibt es ein recht anschauliches Tutorial zum Google Geocoding Dienst.
Es bietet einige praktische Beispiele.
Google Maps API Tutorial
Von allen Google Diensten ist Google.Maps sicher der “ajaxifizierteste”.
Insofern eignet sich Maps natürlich auch besonders gut für Mashups und das Integrieren von Karten in eigenen Webprojekten.
Zu diesem Zweck bietet Google ein API für Maps an. Mit diesem API ist es möglich, eigene Webservices auf Basis von Maps zu entwickeln.
Man benötigt lediglich einen API Key - den man nach einer Registrierung bei Google kostenlos erhält.
Die offizielle Dokumentation bietet auch einige grundlegende Beispiele zur Nutzung der API.
Allerdings ist die Nutzung der Maps API nicht ganz einfach, wenn man keine guten Kenntnisse in Javascript hat.
Deshalb habe ich die PHP Klasse Gmapper entwickelt und unter GPL für jedermann freigegeben.
Gmapper implementiert das Google Maps API in PHP und ermöglicht es auch Entwicklern mit nur grundlegenden Javascript Kenntnissen erheblich selbst komplexere Karten zu erstellen.
Tutorial: Dateiupload mit Ajax und PHP
Thomas Larsson hat in seinem Blog ein Tutorial veröffentlicht, in dem erklärt wird wie man einen (multi) Dateiupload mit Ajax und PHP auf dem Server realisiert.
Das besprochene Script stellt auch einen Fortschrittsbalken zur Verfügung.
Ich finde das Tutorial recht empfehlenswert, da es kurz und einfach die Erstellung einer wirklich nützlichen Komponente erklärt
Tutorial: sortierbare Listen mit PHP und Ajax
Auf der englischsprachigen Seite phpRiot gibt es ein sehr gutes Tutorial zu sortierbaren Listen.
Das Tutorial beinhaltet:
- Erstellung einer sortierbaren Liste mit Scriptaculous
- Füllung der Liste mit Daten aus einer MySQL Datenbank via PHP
- Speichern der Veränderungen der Liste in der DB
Tutorial: Animierte Livesuche mit Ajax
Steve Smith hat in seinem Blog ein nettes Tutorial für eine Live Suche mit Ajax veröffentlicht.
Der Autor verwendet für seine Suche PHP und die JS Bibliotheken Scriptaculous und Prototype. Er weist aber darauf hin, dass man auch recht einfach eine lightweight Bibliothek wie Moo.FX anstelle von Scriptaculous nutzen könnte.
Diese Option halte ich für sehr sinnvoll, da ich Scriptaculous für rein visuelle Effekte als zu umfangreich einschätze.
Es gibt keinen sinnvollen Grund mehr Traffic und Ladezeit zu haben, als unbedingt nötig.
Tutorial: RSS Ticker mit Ajax
Bei Dynamicdrive.com gibt es ein interessantes Tutorial, für einen ajaxifizierten RSS Ticker.
Das Tutorial nutzt den PHP RSS Parser LastRSS, um die Newsfeeds zu fetchen und auf dem Server zwischenzuspeichern (”Cache”).
Durch das Zwischenspeichern muss dann nicht bei jedem Seitenaufruf der Feed neu abgerufen werden.
Die Features des fertigen RSS Tickers sind u.a.:
- Zeigt in einem Ticker jeden beliebigen RSS Feed an.
- Nur bestimmte Teile eines Feeds können zur Anzeige gewählt werden (zb nur der Titel)
- Überblendeffekt zwischen verschiedenen Nachrichten
Lightbox JS für Dialogfenster
Chris Campbell hat in seinem Blog ein ausführliches Tutorial veröffentlicht, dass eine neue Implementierung der Lightbox Bibliothek nutzt um komplette Dialogfenster zu öffnen.
Diese Dialogfenster können dann asynchron mit Inhalt befüllt werden.
Chris nennt seine Implementierung “Lightbox gone wild” - da er die Effektbibliothek Moo.Fx nutzt um das ganze optisch sehr viel ansehnlicher zu gestalten als dies bisher mit Lightbox möglich war.
Update: Artikel zu Effektpack für Moo.FX hinzugefügt
Wie bereits angekündigt, habe ich nun auch einen Artikel / Tutorial zum Effektpack (moo.fx.pack.js) für Moo.FX hinzugefügt.
Das Effektpack führt zusätzliche, komplexere Methoden in die Bibliothek ein.
So ist es beispielsweise möglich, mit einem Funktionsaufruf Höhe und Breite eines Elements zu verändern (”resize”), und dies auch noch optisch recht ansprechend.
Andere Effekte dienen z.B. der Textmanipulation.
Tutorial: Ajax Warenkorb mit Scriptaculous
Auf der brasilianischen Seite von Sys-con gibt es ein (englischsprachiges) Tutorial, in dem erklärt wird wie man mit Hilfe der Scriptacoulous Bibliothek einen Drag and Drop fähigen Warenkorb entwickeln kann.
Das Tutorial ist recht ausführlich geschrieben, und ich finde es recht brauchbar.
Ich bin mir allerdings grundsätzlich immer nicht so ganz sicher, ob Drag and Drop auf Websites aus Usability Sicht wirklich so eine gute Idee ist.
Einführung in Moo.FX hinzugefügt
Aufgrund der Tatsache das es für die, von mir sehr geschätzte, Effektbibliothek Moo.FX keine wirkliche Dokumentation gibt habe ich mir erlaubt selbst eine Einleitung zu Moo.FX zu schreiben.
In dem Artikel wird die Grundlegende Funktionsweise, die Einbindung in HTML Seiten, und die einzelnen Effekt-Funktionen von Moo FX besprochen.
Für jede Funktion wird auch ein kurzes Beispiel gegeben.
Ich mag Moo.FX deshalb recht gerne weil sie, im Gegensatz zb zu Scriptaculous, nur eine Dateigrösse von (insgesamt) rund 15KB aufweist, und damit Super Lightweight ist.
Das spart einiges an Traffic