Rapid Prototyping mit jQuery (German)

4.590 Aufrufe

Veröffentlicht am

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.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.590
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
30
Aktionen
Geteilt
0
Downloads
30
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Rapid Prototyping mit jQuery (German)

    1. 1. RAPID PROTOTYPING mit jQuery
    2. 2. PROTOTYPING
    3. 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. 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. 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. 6. Rapid prototypers sind die Illusionisten und Magier des Webs.
    7. 7. WARUM?
    8. 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. 9. WARUM? • Entdeckung • Machbarkeitstudie • Kommunikation
    10. 10. VERSCHIEDENE PROTOTYPEN • Wireframes = Walk through Prototypen • Interaktive Prototypen
    11. 11. 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
    12. 12. Ein Prototyp muss nicht validieren!
    13. 13. KEIN CROSS- BROWSER CRAP!
    14. 14. Semantics? Who needs semantics! SEO? Who cares, damn it? Structure, logic...! LOL!
    15. 15. Mach doch einfach, verdammt!
    16. 16. ANFORDERUNGEN EINES PROTOTYPS
    17. 17. Layout Behavior Data
    18. 18. LAYOUT • CSS Frameworks verwenden! • Copy and Paste! • WYSIWYG Editoren verwenden! Just get the damn job done!
    19. 19. CSS FRAMEWORKS? • Verstecken Komplexität, wie jedes andere Framework • Stellt Templates für Grids, Spalten und mehr zur Verfügung • Normalisiert über Browser hinweg
    20. 20. EIN PAAR TECHNIKEN • Wenn Floats mal nicht funktionieren, einfach alles positionieren • Gezieltein CSS Framework verwenden welches Grid/ Spalten eingebaut hat • Gezielt spezielle Browsertechniken verwenden
    21. 21. BEHAVIOR • Haucht dem Prototypen Leben ein • Beschreibendie Interaktionen, die sich zwischen Benutzer und Produkt abspielen: • Klicke • Hovers • Drag & Drop • ..etc
    22. 22. 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
    23. 23. DATA • jQuery’s AjaxFunktionen verwenden um schnell Content zu injizieren • JSONP is your friend! • $(‘div’).load(‘some.url#content’)
    24. 24. PUBLIC API’S VERWENDEN! • YQL • Google API’s(Maps, Search, Docs, etc) Klauen, du musst! • Flickr
    25. 25. THE ILLUSION OF SPEED
    26. 26. EIN PROTOTYP MUSS NICHT SCHNELL SEIN.
    27. 27. ER MUSS SICH NUR SCHNELL ANFÜHLEN.
    28. 28. 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!
    29. 29. TOOLS
    30. 30. THEMEROLLER
    31. 31. THEMEROLLER • Eigene Themes designen • 100%jQuery UI CSS Framework kompatibel • Funund intuitive UI (Kein coding!) • png8mit Alpha Transparenz • Theme Gallery
    32. 32. JQUERY UI
    33. 33. JQUERY UI CSS FRAMEWORK
    34. 34. 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
    35. 35. ZIEMLICH STYLISH ABER ICH BRAUCH JA TROTZDEM EIGENE STYLES..
    36. 36. Mehr Power!
    37. 37. KEINE EXKLUSIVITÄT • Benutzt em‘s für alle Einheiten • Skaliert Hintergrundgrafiken • Dokumentiert! • Kommt mit Testing/Debugging Tools
    38. 38. WEBKIT
    39. 39. 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
    40. 40. 3D CSS TRANSFORMS!
    41. 41. ...VIEL MEHR • CSS Gradients • box shadow • CSS Reflections • CSS Animations • text shadow • CSS Transitions
    42. 42. Thank you Webkit!
    43. 43. FIREBUG / WEBKIT DEV
    44. 44. FIREBUG / WEBKIT DEV • Schnell Markup editieren • CSS editieren • JavaScript manipulieren Der Save button fehlt!
    45. 45. GREASEMONKEY
    46. 46. META • paul.bakaus@gmail.com • http://jqueryui.com • http://paulbakaus.com • http://wiki.jqueryui.com • http://twitter.com/pbakaus • http://dev.jqueryui.com
    47. 47. DANKE, BIS ZUM NÄCHSTEN MAL! http://paulbakaus.com / @pbakaus

    ×