Ajax hands on - Refactoring Google Suggest

  • 2,754 views
Uploaded on

Die Entwicklung interaktiver Internetseiten und -applikationen (RIAs) schreitet unaufhörlich voran. Nicht zuletzt Google hat sich schon sehr früh mit sehr innovativen Ideen (Mail, Kalender etc.) und …

Die Entwicklung interaktiver Internetseiten und -applikationen (RIAs) schreitet unaufhörlich voran. Nicht zuletzt Google hat sich schon sehr früh mit sehr innovativen Ideen (Mail, Kalender etc.) und deren Umsetzung einen Platz unter den Großen der Internetgemeinde reserviert. Eine Idee hat meines Erachtens die Benutzbarkeit und Anwenderfreundlichkeit von RIAs entscheidend beeinflusst - Google Suggest. Dieser Workshop beschäftigt sich im Detail mit der Erstellung einer solchen Vorschlagsfunktion. Er betrachtet verschiedene JavaScript Frameworks und Bibliotheken und deren Herangehensweisen an diese Aufgabenstellung. Eine kurze Gegenüberstellung von XML und JSON zeigt den Teilnehmern deren Vor- und Nachteile in verschiedenen Situationen der Client-Server-Kommunikation. Eine Betrachtung aus der Usability-Ecke ist ebenso Bestandteil des Workshops wie die Berücksichtigung von Sicherheit und Barrierefreiheit.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,754
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. AJAX- hands on
      • Refactoring Google suggest
  • 2. Wer sind wir?
    • Bastian Feder
    • Applikations- Entwickler
    • PHP seit Version 3
    • Setzt sich für Barrierefreiheit ein
    • papaya CMS seit 01.2008
    • Thomas Weinert
    • Applikations- Entwickler
    • PHP seit Version 3
    • papaya CMS
    • Weaverslave
  • 3. Agenda
    • Was ist 'Google suggest' ?
    • Problemstellung
    • Das Backend (Datenbank, Caching)
    • XML vs JSON – kein Vergleich?
    • Das Frontend
      • Bedienung
      • Positionierung der Vorschlagsbox
      • Barrierefreiheit
    • Wie machen das die Anderen?
      • jQuery
      • Scriptaculous / prototype
    • Zusammenfassung
  • 4. Was ist 'Google suggest' ?
  • 5. Was ist 'Google suggest' ?
      • „ Google Suggest ist eine Erweiterung der Internet-Suchmaschine Google, bei der während des Tippens eines Suchworts bereits beliebte Stichworte, die ein entsprechendes Präfix besitzen, mit einer geschätzten Trefferzahl aufgelistet werden. Der Name leitet sich vom englischen "to suggest" = vorschlagen ab.
      • [...]
      • Die getippten Buchstaben des Suchwortes werden unmittelbar im Hinter-grund zum Server übertragen, das jeweilige Ergebnis zurückgeschickt und "live" in die bestehende Seite eingefügt. Dieser Vorgang wiederholt sich bei jedem getippten Buchstaben.“ (Wikipedia)
  • 6. Problemstellung – PLZ / Ort Eingabe
    • Warum kein Textfeld?
      • sehr variable Daten (Schreibweise, Formattierung)
      • unkomfortabel
      • keine unmittelbare Rückmeldung der Richtigkeit der Eingabe
    • Warum keine statische Selectbox?
      • Übertragung unbenötiger Daten
      • unbedienbar durch enorme Länge
    • Abbildung einer dynamischen Selectbox
  • 7. Abbildung einer dynamischen Selectbox
    • Textfeld erweitert mit Javascript
    • Liste von Vorschlägen abhängig von eingegebenen Zeichen
    • Hervorheben der Eingabe
    • Fortlaufende Aktualisierung
  • 8. Technische Problemstellung
    • Zeicheneingabe
    • async. Request an Server
    • Response von Server zum Client
    • Client verarbeitet die Daten
    • Client stellt die Daten dar
  • 9. Das Backend
    • Liste der Eingabevorschläge
      • Tabelle mit Stammdaten (PLZ, Ort)
    • System zur Rückgabe von Eingabevorschlägen
      • Auswahl der relevanten Daten aus Tabelle
  • 10. Das Backend - Datenbank
    • embedded Datenbank (SQLite)
    • relationaler Datenbank-Server (MySQL)
  • 11. Das Backend - Optimierungen
    • Query-Cache
    • Bytecode-Cache
    • Ausgabe-Cache
  • 12. Query-Cache
    • Funktion vieler Datenbank-Server
    • transparent für Anwendungslogik
    • Zwischenspeicher für Datenbankabfragen
      • Arbeitsspeicher
    • MySQL – nicht mit Prepared Statements
  • 13. Bytecode-Cache
    • PHP-Erweiterung
      • APC
      • Zend Accelerator
      • eAccelerator
    • Speicher für erzeugten PHP Bytecode
      • Arbeitsspeicher
      • Festplatte
    • zusätzliche Optimierungen des Codes
  • 14. Ausgabe-Cache
    • in der Anwendungslogik behandelt
      • Cache-Identifer aus Parametern
    • Speicherung der fertigen Ausgabe
    • Festplatte
    • Arbeitspeicher
      • MemCache
    • Zeitabhängig
  • 15. Die Datenübertragung
    • XML vs. JSON – Kein Vergleich?
  • 16. XML = Datenstruktur
    • Nativer DOM- parser im Browser
    • XML ist nicht nur XML- RPC oder SOAP
  • 17. JSON = Quellcode
    • Response wird interpretiert
    • JS implemplementation eines JSON- parsers ( www.json.org )
  • 18. Beispiel: JSON Implementation
  • 19. Beispiel: XML Implementation
  • 20. Demonstration - Backend
  • 21. Das Frontend
    • Bedienung
      • Maus
      • Tastatur
    • Kantenkollision
      • rechts
      • unten
    • Highlighting
    • Animationen
    • Barrierefreiheit
  • 22. Bedienung
    • Pfeiltasten
      • hoch / runter: Navigtion in der Liste
      • rechts: Übernahme der Auswahl
      • links: Detailansicht der Auswahl
    • Eingabetaste zum Bestätigen
      • Versand des Formulars
    50668 Köln 50670 Köln ... 506_ 506 68 Köln 506 70 Köln ... 506 73 Köln
  • 23. Kantenkollision
    • Bestimmung der Grösse des sichtbaren Bereiches des Browserfensters
      • ragt die Vorschlagbox aus dem sichtbaren Bereich heraus?
    • Positionierung der Vorschlagsbox
    50668 Köln 50670 Köln ... 506_ 506 68 Köln 506 70 Köln ... 506 73 Köln
  • 24. Highlighting und Animation
    • Animation der Vorschlagbox
      • slide in / out
      • fade in / out
    • Markieren des Suchstrings in einem Eintrag
    • Herausstellen des aktuell ausgewählten Eintrags
    50668 Köln 50670 Köln ... 506_ 506 68 Köln 506 70 Köln ... 506 73 Köln
  • 25. Barrierefreiheit
    • Barrierefreies Ajax ist nur möglich, wenn es den Nutzer nicht verwirrt
    • Fehlende Standards an denen sich Hersteller von Hilfsmittel und Entwickler halten können
      • Browser- Hersteller sind sich in der Interpretation des Quellcodes nicht einig
      • Leitlinien des W3C in Draft - Status
  • 26. Barrierefreiheit
    • Screenreader
      • keine
      • Lösungsvorschlag:
  • 27. Barrierefreiheit
    • „elastisches“ Layout
      • skalierbare Schriftgrösse
    • kontrastreiche Farbgebung
      • Farbenblindheit
      • allgemeine Sehschwächen
    • Tastaturzugänglichkeit
  • 28. Demonstration - Frontend
  • 29. Wie machen das die Anderen?
    • jQuery ( http://www.jquery.com )
      • Plugin ( jquery.suggest) ( http://plugins.jquery.com/project/suggest )
    • Scriptaculous / prototype ( http://script.aculo.us )
      • Embedded (autocompleter) ( http://demo.script.aculo.us/ajax/autocompleter_customized )
    • Mootools ( http://www.mootools.net )
      • Erweiterung von digitarald ( http://digitarald.de/project/autocompleter )
  • 30. Wie machen das die Anderen?
    • jQuery ( http://www.jquery.com )
      • Plugin ( jquery.suggest) ( http://plugins.jquery.com/project/suggest )
    • Scriptaculous / prototype ( http://script.aculo.us )
      • Basisfunktionalität (autocompleter) ( http://demo.script.aculo.us/ajax/autocompleter_customized )
  • 31. jQuery
    • „jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.“ (www.jquery.com)
  • 32. jQuery - Eigenschaften
    • Crossbrowser Kompatibel (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)
    • CSS3 Kompatibel
    • Herausstellende Eigenschaften:
      • Verarbeitungsliste für Effekte
      • Selbstdefinierte Animationen
      • Plugins
      • Konflliktbehandlung im Betrieb mit anderen JS- Bibliotheken (eg. prototype)
  • 33. jQuery - Beispiel
  • 34. Scriptaculous / prototype
    • „script.aculo.us provides you with
    • easy-to-use, cross-browser user
    • interface JavaScript libraries to make
    • your web sites and web applications fly.“ (script.aculo.us)
    • „Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. [...]“ (prototypejs.org)
  • 35. Scriptaculous / prototype - Eigenschaften
    • Crossbrowser kompatibel
    • Herausstellende Eigenschaften:
      • Unit Test framework
      • Sehr umfangreiche Effektbibliothek (multiple, transitions, pulsate, highlight, etc)
      • Integration in PHP (PEAR), ROR, Java, etc.
  • 36. Scriptaculous - Beispiel
  • 37. Zusammenfassung
    • Typeahead Suggest ist ...
      • eine sehr elegante Lösung große Datenmengen auswählbar zu machen
      • nur in bestimmten Fällen einsetzbar
      • nicht oder nur bedingt barrierefrei
      • mittlerweile von vielen frameworks/Bibliotheken unterstützt
  • 38. Referenzen
    • Javascript Sicherheit:
      • http://www.fortifysoftware.com > JavaScript_Hijacking.pdf
    • JSON- parser in JS
      • http://www.json.org/js.html
    • Barrierefreiheit
      • http://blog.namics.com/
      • http://www.access-for-all.ch/
    • Sildes
      • www.webinale.de/workmon