RAPID PROTOTYPING
      mit jQuery
PROTOTYPING
WAS IST EIN PROTOTYP?

A prototype is an original type, form,
or instance of something serving as a
typical example, basis...
“An Experience Prototype is any kind of representation,
 in any medium, that is designed to understand, explore
  or commu...
WAS IST RAPID
                     PROTOTYPING?

• Gewisse     Produktfunktionalität sobald wie möglich umzusetzen

• Sich...
Rapid prototypers sind die
Illusionisten und Magier des
            Webs.
WARUM?
Design wie in
                            ‘Produktdesign’


• Dasentgültige Design umzusetzen kann sehr lange
 dauern

• Z...
WARUM?


• Entdeckung

• Machbarkeitstudie

• Kommunikation
VERSCHIEDENE PROTOTYPEN


   • Wireframes     = Walk through Prototypen

   • Interaktive   Prototypen
WAS IST EIN PROTOTYP FÜR
           UNS?

 • Ein   interaktiver Click Dummy

 • Modelliert   nach Wireframes und Concept l...
Ein Prototyp muss nicht validieren!
KEIN CROSS-
 BROWSER
   CRAP!
Semantics?
     Who needs semantics!



                       SEO?
  Who cares, damn it?



Structure, logic...!

       ...
Mach doch einfach, verdammt!
ANFORDERUNGEN EINES
     PROTOTYPS
Layout

Behavior

 Data
LAYOUT

   • CSS   Frameworks verwenden!

   • Copy   and Paste!

   • WYSIWYG      Editoren verwenden!




Just get the d...
CSS FRAMEWORKS?

• Verstecken   Komplexität, wie jedes andere
 Framework

• Stellt Templates   für Grids, Spalten und mehr...
EIN PAAR TECHNIKEN
• Wenn  Floats mal nicht funktionieren, einfach alles
 positionieren

• Gezieltein CSS Framework verwen...
BEHAVIOR
• Haucht     dem Prototypen Leben ein

• Beschreibendie Interaktionen, die sich zwischen
 Benutzer und Produkt ab...
CSS

• CSS   so viel wie möglich verwenden

• Auch   für hover events: a:hover {}

• Content   injection durch CSS

• Clas...
DATA


• jQuery’s AjaxFunktionen verwenden um schnell
 Content zu injizieren

• JSONP   is your friend!

• $(‘div’).load(‘...
PUBLIC API’S VERWENDEN!


• YQL

• Google API’s(Maps,
 Search, Docs, etc)    Klauen, du
                         musst!
• ...
THE ILLUSION OF SPEED
EIN PROTOTYP MUSS NICHT
      SCHNELL SEIN.
ER MUSS SICH NUR SCHNELL
       ANFÜHLEN.
GEFÜHLTE RESPONSIVENESS
• Interaktionen   verlangsamen und animieren

• Animationen     und Effekte benutzen, um einen lad...
TOOLS
THEMEROLLER
THEMEROLLER
     • Eigene Themes     designen

     • 100%jQuery UI CSS
      Framework kompatibel

     • Funund intuitiv...
JQUERY UI
JQUERY UI CSS FRAMEWORK
DAS CSS FRAMEWORK
        • Semantische +
         generische Klassen anstatt
         per-plugin

        • Trennung   vo...
ZIEMLICH STYLISH ABER ICH
  BRAUCH JA TROTZDEM
      EIGENE STYLES..
Mehr Power!
KEINE EXKLUSIVITÄT

• Benutzt    em‘s für alle Einheiten

• Skaliert   Hintergrundgrafiken

• Dokumentiert!

• Kommt      m...
WEBKIT
CSS TRANSFORMS

• Webkit/Gecko (Safari 3+,
 iPhone, Android, Air, FF 3.5+)

• 2D Transformationen   an HTML
 Elementen

• ...
3D CSS TRANSFORMS!
...VIEL MEHR

• CSS    Gradients    • box   shadow

• CSS    Reflections   • CSS Animations

• text   shadow       • CSS Tr...
Thank you
 Webkit!
FIREBUG / WEBKIT DEV
FIREBUG / WEBKIT DEV

• Schnell   Markup editieren

• CSS   editieren

• JavaScript   manipulieren


                     ...
GREASEMONKEY
META


• paul.bakaus@gmail.com          • http://jqueryui.com

• http://paulbakaus.com          • http://wiki.jqueryui.com...
DANKE, BIS ZUM NÄCHSTEN MAL!
       http://paulbakaus.com / @pbakaus
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
Nächste SlideShare
Wird geladen in …5
×

Rapid Prototyping mit jQuery (German)

4.681 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
  • Als Erste(r) kommentieren

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

×