AJAX- hands on Refactoring Google suggest

Refactoring Google suggest

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

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

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

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

Was ist 'Google suggest' ?

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)

„ 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)

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

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

Abbildung einer dynamischen Selectbox Textfeld erweitert mit Javascript Liste von Vorschlägen abhängig von eingegebenen Zeichen Hervorheben der Eingabe Fortlaufende Aktualisierung

Textfeld erweitert mit Javascript

Liste von Vorschlägen abhängig von eingegebenen Zeichen

Hervorheben der Eingabe

Fortlaufende Aktualisierung

Technische Problemstellung Zeicheneingabe async. Request an Server Response von Server zum Client Client verarbeitet die Daten Client stellt die Daten dar

Zeicheneingabe

async. Request an Server

Response von Server zum Client

Client verarbeitet die Daten

Client stellt die Daten dar

Das Backend Liste der Eingabevorschläge Tabelle mit Stammdaten (PLZ, Ort) System zur Rückgabe von Eingabevorschlägen Auswahl der relevanten Daten aus Tabelle

Liste der Eingabevorschläge

Tabelle mit Stammdaten (PLZ, Ort)

System zur Rückgabe von Eingabevorschlägen

Auswahl der relevanten Daten aus Tabelle

Das Backend - Datenbank embedded Datenbank (SQLite) relationaler Datenbank-Server (MySQL)

embedded Datenbank (SQLite)

relationaler Datenbank-Server (MySQL)

Das Backend - Optimierungen Query-Cache Bytecode-Cache Ausgabe-Cache

Query-Cache

Bytecode-Cache

Ausgabe-Cache

Query-Cache Funktion vieler Datenbank-Server transparent für Anwendungslogik Zwischenspeicher für Datenbankabfragen Arbeitsspeicher MySQL – nicht mit Prepared Statements

Funktion vieler Datenbank-Server

transparent für Anwendungslogik

Zwischenspeicher für Datenbankabfragen

Arbeitsspeicher

MySQL – nicht mit Prepared Statements

Bytecode-Cache PHP-Erweiterung APC Zend Accelerator eAccelerator Speicher für erzeugten PHP Bytecode Arbeitsspeicher Festplatte zusätzliche Optimierungen des Codes

PHP-Erweiterung

APC

Zend Accelerator

eAccelerator

Speicher für erzeugten PHP Bytecode

Arbeitsspeicher

Festplatte

zusätzliche Optimierungen des Codes

Ausgabe-Cache in der Anwendungslogik behandelt Cache-Identifer aus Parametern Speicherung der fertigen Ausgabe Festplatte Arbeitspeicher MemCache Zeitabhängig

in der Anwendungslogik behandelt

Cache-Identifer aus Parametern

Speicherung der fertigen Ausgabe

Festplatte

Arbeitspeicher

MemCache

Zeitabhängig

Die Datenübertragung XML vs. JSON – Kein Vergleich?

XML vs. JSON – Kein Vergleich?

XML = Datenstruktur Nativer DOM- parser im Browser XML ist nicht nur XML- RPC oder SOAP

Nativer DOM- parser im Browser

XML ist nicht nur XML- RPC oder SOAP

JSON = Quellcode Response wird interpretiert JS implemplementation eines JSON- parsers ( www.json.org )

Response wird interpretiert

JS implemplementation eines JSON- parsers ( www.json.org )

Beispiel: JSON Implementation

Beispiel: XML Implementation

Demonstration - Backend

Das Frontend Bedienung Maus Tastatur Kantenkollision rechts unten Highlighting Animationen Barrierefreiheit

Bedienung

Maus

Tastatur

Kantenkollision

rechts

unten

Highlighting

Animationen

Barrierefreiheit

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

Pfeiltasten

hoch / runter: Navigtion in der Liste

rechts: Übernahme der Auswahl

links: Detailansicht der Auswahl

Eingabetaste zum Bestätigen

Versand des Formulars

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

Bestimmung der Grösse des sichtbaren Bereiches des Browserfensters

ragt die Vorschlagbox aus dem sichtbaren Bereich heraus?

Positionierung der Vorschlagsbox

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

Animation der Vorschlagbox

slide in / out

fade in / out

Markieren des Suchstrings in einem Eintrag

Herausstellen des aktuell ausgewählten Eintrags

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

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

Barrierefreiheit Screenreader keine Lösungsvorschlag:

Screenreader

keine

Lösungsvorschlag:

Barrierefreiheit „elastisches“ Layout skalierbare Schriftgrösse kontrastreiche Farbgebung Farbenblindheit allgemeine Sehschwächen Tastaturzugänglichkeit

„elastisches“ Layout

skalierbare Schriftgrösse

kontrastreiche Farbgebung

Farbenblindheit

allgemeine Sehschwächen

Tastaturzugänglichkeit

Demonstration - Frontend

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 )

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 )

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 )

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 )

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)

„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)

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)

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)

jQuery - Beispiel

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)

„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)

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.

Crossbrowser kompatibel

Herausstellende Eigenschaften:

Unit Test framework

Sehr umfangreiche Effektbibliothek (multiple, transitions, pulsate, highlight, etc)

Integration in PHP (PEAR), ROR, Java, etc.

Scriptaculous - Beispiel

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

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

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

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