AJAX- hands on <ul><ul><li>Refactoring Google suggest </li></ul></ul>
Wer sind wir? <ul><li>Bastian Feder </li></ul><ul><li>Applikations- Entwickler </li></ul><ul><li>PHP seit Version 3 </li><...
Agenda <ul><li>Was ist 'Google suggest' ? </li></ul><ul><li>Problemstellung </li></ul><ul><li>Das Backend (Datenbank, Cach...
Was ist 'Google suggest' ?
Was ist 'Google suggest' ? <ul><ul><li>„ Google Suggest ist eine Erweiterung der Internet-Suchmaschine Google, bei der wäh...
Problemstellung – PLZ / Ort Eingabe <ul><li>Warum kein Textfeld? </li></ul><ul><ul><li>sehr variable Daten (Schreibweise, ...
Abbildung einer dynamischen Selectbox <ul><li>Textfeld erweitert mit Javascript </li></ul><ul><li>Liste von Vorschlägen ab...
Technische Problemstellung <ul><li>Zeicheneingabe </li></ul><ul><li>async. Request an Server </li></ul><ul><li>Response vo...
Das Backend <ul><li>Liste der Eingabevorschläge </li></ul><ul><ul><li>Tabelle mit Stammdaten (PLZ, Ort) </li></ul></ul><ul...
Das Backend - Datenbank <ul><li>embedded Datenbank (SQLite) </li></ul><ul><li>relationaler Datenbank-Server (MySQL) </li><...
Das Backend - Optimierungen <ul><li>Query-Cache </li></ul><ul><li>Bytecode-Cache </li></ul><ul><li>Ausgabe-Cache </li></ul>
Query-Cache <ul><li>Funktion vieler Datenbank-Server </li></ul><ul><li>transparent für Anwendungslogik </li></ul><ul><li>Z...
Bytecode-Cache <ul><li>PHP-Erweiterung  </li></ul><ul><ul><li>APC </li></ul></ul><ul><ul><li>Zend Accelerator </li></ul></...
Ausgabe-Cache <ul><li>in der Anwendungslogik behandelt </li></ul><ul><ul><li>Cache-Identifer aus Parametern </li></ul></ul...
Die Datenübertragung <ul><li>XML vs. JSON – Kein Vergleich? </li></ul>
XML = Datenstruktur <ul><li>Nativer DOM- parser im Browser </li></ul><ul><li>XML ist nicht nur XML- RPC oder SOAP </li></ul>
JSON = Quellcode <ul><li>Response wird interpretiert </li></ul><ul><li>JS implemplementation eines JSON- parsers  ( www.js...
Beispiel: JSON Implementation
Beispiel: XML Implementation
Demonstration - Backend
Das Frontend <ul><li>Bedienung </li></ul><ul><ul><li>Maus </li></ul></ul><ul><ul><li>Tastatur </li></ul></ul><ul><li>Kante...
Bedienung <ul><li>Pfeiltasten </li></ul><ul><ul><li>hoch / runter: Navigtion in der Liste </li></ul></ul><ul><ul><li>recht...
Kantenkollision <ul><li>Bestimmung der Grösse des sichtbaren  Bereiches des Browserfensters </li></ul><ul><ul><li>ragt die...
Highlighting und Animation <ul><li>Animation der Vorschlagbox </li></ul><ul><ul><li>slide in / out </li></ul></ul><ul><ul>...
Barrierefreiheit <ul><li>Barrierefreies Ajax ist nur möglich, wenn es den Nutzer  nicht verwirrt </li></ul><ul><li>Fehlend...
Barrierefreiheit <ul><li>Screenreader </li></ul><ul><ul><li>keine  </li></ul></ul><ul><ul><li>Lösungsvorschlag:  </li></ul...
Barrierefreiheit <ul><li>„elastisches“ Layout </li></ul><ul><ul><li>skalierbare Schriftgrösse </li></ul></ul><ul><li>kontr...
Demonstration - Frontend
Wie machen das die Anderen? <ul><li>jQuery  ( http://www.jquery.com )  </li></ul><ul><ul><li>Plugin ( jquery.suggest) ( ht...
Wie machen das die Anderen? <ul><li>jQuery  ( http://www.jquery.com ) </li></ul><ul><ul><li>Plugin ( jquery.suggest) ( htt...
jQuery <ul><li>„jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle even...
jQuery -  Eigenschaften <ul><li>Crossbrowser Kompatibel  (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+) </li></ul><ul><li>CSS3 ...
jQuery - Beispiel
Scriptaculous / prototype <ul><li>„script.aculo.us provides you with </li></ul><ul><li>easy-to-use, cross-browser user </l...
Scriptaculous / prototype - Eigenschaften <ul><li>Crossbrowser kompatibel </li></ul><ul><li>Herausstellende Eigenschaften:...
Scriptaculous - Beispiel
Zusammenfassung <ul><li>Typeahead Suggest ist ... </li></ul><ul><ul><li>eine sehr elegante Lösung große Datenmengen auswäh...
Referenzen <ul><li>Javascript Sicherheit: </li></ul><ul><ul><li>http://www.fortifysoftware.com > JavaScript_Hijacking.pdf ...
Nächste SlideShare
Wird geladen in …5
×

Ajax hands on - Refactoring Google Suggest

3.057 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.057
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
27
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Ajax hands on - Refactoring Google Suggest

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

    ×