33-mal heruntergeladen
Hochgeladen vonPaul Bakaus
Rapid Prototyping mit jQuery (German)
Das Dokument beschreibt rapid prototyping mit jQuery und definiert Prototypen als initiale Beispiele für Produkte, die helfen, Nutzererfahrungen zu verstehen. Ein Prototyp soll schnell entwickelt werden, ohne sich über Details oder Produktionsprobleme Gedanken zu machen, und kann verschiedene Formen wie Wireframes und interaktive Click-Dummys annehmen. Es werden CSS-Frameworks, AJAX-Funktionen und animierte Interaktionen zur Verbesserung der Nutzererfahrung diskutiert, sowie Werkzeuge wie Themeroller zur Anpassung von Designs.
Rapid Prototyping mit jQuery (German)
- 1. RAPID PROTOTYPING mit jQuery
- 2.
- 3. WAS IST EINPROTOTYP? 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 Prototypeis 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 sinddie Illusionisten und Magier des Webs.
- 7.
- 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 EINPROTOTYP 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 mussnicht 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.
- 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 AjaxFunktionenverwenden 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 OFSPEED
- 28. EIN PROTOTYP MUSSNICHT SCHNELL SEIN.
- 29. ER MUSS SICHNUR 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.
- 32.
- 33. THEMEROLLER • Eigene Themes designen • 100%jQuery UI CSS Framework kompatibel • Funund intuitive UI (Kein coding!) • png8mit Alpha Transparenz • Theme Gallery
- 34.
- 36. JQUERY UI CSSFRAMEWORK
- 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 ABERICH BRAUCH JA TROTZDEM EIGENE STYLES..
- 39.
- 40. KEINE EXKLUSIVITÄT • Benutzt em‘s für alle Einheiten • Skaliert Hintergrundgrafiken • Dokumentiert! • Kommt mit Testing/Debugging Tools
- 41.
- 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.
- 44. ...VIEL MEHR • CSS Gradients • box shadow • CSS Reflections • CSS Animations • text shadow • CSS Transitions
- 45.
- 46.
- 47. FIREBUG / WEBKITDEV • Schnell Markup editieren • CSS editieren • JavaScript manipulieren Der Save button fehlt!
- 48.
- 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 ZUMNÄCHSTEN MAL! http://paulbakaus.com / @pbakaus