Rapid Prototyping mit jQuery (German)

  • 3,784 views
Uploaded on

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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,784
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 10. VERSCHIEDENE PROTOTYPEN • Wireframes = Walk through Prototypen • Interaktive Prototypen
  • 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. Ein Prototyp muss nicht validieren!
  • 13. KEIN CROSS- BROWSER CRAP!
  • 14. Semantics? Who needs semantics! SEO? Who cares, damn it? Structure, logic...! LOL!
  • 15. Mach doch einfach, verdammt!
  • 16. ANFORDERUNGEN EINES PROTOTYPS
  • 17. Layout Behavior Data
  • 18. LAYOUT • CSS Frameworks verwenden! • Copy and Paste! • WYSIWYG Editoren verwenden! Just get the damn job done!
  • 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. 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. BEHAVIOR • Haucht dem Prototypen Leben ein • Beschreibendie Interaktionen, die sich zwischen Benutzer und Produkt abspielen: • Klicke • Hovers • Drag & Drop • ..etc
  • 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. DATA • jQuery’s AjaxFunktionen verwenden um schnell Content zu injizieren • JSONP is your friend! • $(‘div’).load(‘some.url#content’)
  • 24. PUBLIC API’S VERWENDEN! • YQL • Google API’s(Maps, Search, Docs, etc) Klauen, du musst! • Flickr
  • 25. THE ILLUSION OF SPEED
  • 26. EIN PROTOTYP MUSS NICHT SCHNELL SEIN.
  • 27. ER MUSS SICH NUR SCHNELL ANFÜHLEN.
  • 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. TOOLS
  • 30. THEMEROLLER
  • 31. THEMEROLLER • Eigene Themes designen • 100%jQuery UI CSS Framework kompatibel • Funund intuitive UI (Kein coding!) • png8mit Alpha Transparenz • Theme Gallery
  • 32. JQUERY UI
  • 33. JQUERY UI CSS FRAMEWORK
  • 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. ZIEMLICH STYLISH ABER ICH BRAUCH JA TROTZDEM EIGENE STYLES..
  • 36. Mehr Power!
  • 37. KEINE EXKLUSIVITÄT • Benutzt em‘s für alle Einheiten • Skaliert Hintergrundgrafiken • Dokumentiert! • Kommt mit Testing/Debugging Tools
  • 38. WEBKIT
  • 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. 3D CSS TRANSFORMS!
  • 41. ...VIEL MEHR • CSS Gradients • box shadow • CSS Reflections • CSS Animations • text shadow • CSS Transitions
  • 42. Thank you Webkit!
  • 43. FIREBUG / WEBKIT DEV
  • 44. FIREBUG / WEBKIT DEV • Schnell Markup editieren • CSS editieren • JavaScript manipulieren Der Save button fehlt!
  • 45. GREASEMONKEY
  • 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. DANKE, BIS ZUM NÄCHSTEN MAL! http://paulbakaus.com / @pbakaus