Die deutsche Variante meines Talks "Rapid prototyping with jQuery" gibt eine Einleitung ins Prototyping und geht dann weiter über Lösungsansätze, Einsatzmöglichkeiten und Vorteilen von Prototypen.

1. RAPID PROTOTYPING
mit jQuery

2. PROTOTYPING

3. WAS IST EIN PROTOTYP?
A prototype is an original type, form,
or instance of something serving as a
typical example, basis, or standard for
other things of the same category.

4. “An Experience Prototype is any kind of representation,
in any medium, that is designed to understand, explore
or communicate what it might be like to engage with
the product, space or system we are designing.”
Jane Fulton Suri

5. WAS IST RAPID
PROTOTYPING?
• Gewisse Produktfunktionalität sobald wie möglich umzusetzen
• Sich
keine Sorgen über Details oder Produktionsprobleme zu
machen
• Eine Illusion!

6. Rapid prototypers sind die
Illusionisten und Magier des
Webs.

7. WARUM?

8. Design wie in
‘Produktdesign’
• Dasentgültige Design umzusetzen kann sehr lange
dauern
• Zäher Feedback loop für jede Design Iteration
• Kommunikationsprobleme zwischen Design und
Entwicklung

9. WARUM?
• Entdeckung
• Machbarkeitstudie
• Kommunikation

11. VERSCHIEDENE PROTOTYPEN
• Wireframes = Walk through Prototypen
• Interaktive Prototypen

12. WAS IST EIN PROTOTYP FÜR
UNS?
• Ein interaktiver Click Dummy
• Modelliert nach Wireframes und Concept layouts
• Meistens gezielt ausgerichtet auf eine Zielgruppe, auf
einer Platform

13. Ein Prototyp muss nicht validieren!

14. KEIN CROSS-
BROWSER
CRAP!

15. Semantics?
Who needs semantics!
SEO?
Who cares, damn it?
Structure, logic...!
LOL!

17. Mach doch einfach, verdammt!

18. ANFORDERUNGEN EINES
PROTOTYPS

19. Layout
Behavior
Data

20. LAYOUT
• CSS Frameworks verwenden!
• Copy and Paste!
• WYSIWYG Editoren verwenden!
Just get the damn job done!

21. CSS FRAMEWORKS?
• Verstecken Komplexität, wie jedes andere
Framework
• Stellt Templates für Grids, Spalten und mehr zur
Verfügung
• Normalisiert über Browser hinweg

22. EIN PAAR TECHNIKEN
• Wenn Floats mal nicht funktionieren, einfach alles
positionieren
• Gezieltein CSS Framework verwenden welches Grid/
Spalten eingebaut hat
• Gezielt spezielle Browsertechniken verwenden

23. BEHAVIOR
• Haucht dem Prototypen Leben ein
• Beschreibendie Interaktionen, die sich zwischen
Benutzer und Produkt abspielen:
• Klicke
• Hovers
• Drag & Drop
• ..etc

24. CSS
• CSS so viel wie möglich verwenden
• Auch für hover events: a:hover {}
• Content injection durch CSS
• Classnames in JavaScript austauschen, nicht
inline styles

25. DATA
• jQuery’s AjaxFunktionen verwenden um schnell
Content zu injizieren
• JSONP is your friend!
• $(‘div’).load(‘some.url#content’)

26. PUBLIC API’S VERWENDEN!
• YQL
• Google API’s(Maps,
Search, Docs, etc) Klauen, du
musst!
• Flickr

27. THE ILLUSION OF SPEED

28. EIN PROTOTYP MUSS NICHT
SCHNELL SEIN.

29. ER MUSS SICH NUR SCHNELL
ANFÜHLEN.

30. GEFÜHLTE RESPONSIVENESS
• Interaktionen verlangsamen und animieren
• Animationen und Effekte benutzen, um einen ladenden Prozess zu
verstecken
• Durch verlangsamte Interaktion verstehen Menschen deinen
Prototyp!
• Zeigt den State Change
• Zeigt Verknüpfungen zwischen Elementen
• Fokussiert!

31. TOOLS

32. THEMEROLLER

33. THEMEROLLER
• Eigene Themes designen
• 100%jQuery UI CSS
Framework kompatibel
• Funund intuitive UI (Kein
coding!)
• png8mit Alpha
Transparenz
• Theme Gallery

34. JQUERY UI

36. JQUERY UI CSS FRAMEWORK

37. DAS CSS FRAMEWORK
• Semantische +
generische Klassen anstatt
per-plugin
• Trennung von Design und
Layout
• Support
für CSS Sprites
+ CSS3 corner radius
• Modular und erweiterbar

38. ZIEMLICH STYLISH ABER ICH
BRAUCH JA TROTZDEM
EIGENE STYLES..

39. Mehr Power!

40. KEINE EXKLUSIVITÄT
• Benutzt em‘s für alle Einheiten
• Skaliert Hintergrundgrafiken
• Dokumentiert!
• Kommt mit Testing/Debugging
Tools

41. WEBKIT

42. CSS TRANSFORMS
• Webkit/Gecko (Safari 3+,
iPhone, Android, Air, FF 3.5+)
• 2D Transformationen an HTML
Elementen
• Yep, alle Varianten
von 2d
Transformationen: Rotation,
Skalierung, Skewing

43. 3D CSS TRANSFORMS!

44. ...VIEL MEHR
• CSS Gradients • box shadow
• CSS Reflections • CSS Animations
• text shadow • CSS Transitions

45. Thank you
Webkit!

46. FIREBUG / WEBKIT DEV

47. FIREBUG / WEBKIT DEV
• Schnell Markup editieren
• CSS editieren
• JavaScript manipulieren
Der Save button fehlt!

48. GREASEMONKEY

49. META
• paul.bakaus@gmail.com • http://jqueryui.com
• http://paulbakaus.com • http://wiki.jqueryui.com
• http://twitter.com/pbakaus • http://dev.jqueryui.com

50. DANKE, BIS ZUM NÄCHSTEN MAL!
http://paulbakaus.com / @pbakaus