SlideShare ist ein Scribd-Unternehmen logo
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, or standard for
other things of the same category.
“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
WAS IST RAPID
                     PROTOTYPING?

• Gewisse     Produktfunktionalität sobald wie möglich umzusetzen

• Sich
    keine Sorgen über Details oder Produktionsprobleme zu
 machen

• Eine   Illusion!
Rapid prototypers sind die
Illusionisten und Magier des
            Webs.
WARUM?
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
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 layouts

 • Meistens gezielt ausgerichtet auf eine Zielgruppe, auf
  einer Platform
Ein Prototyp muss nicht validieren!
KEIN CROSS-
 BROWSER
   CRAP!
Semantics?
     Who needs semantics!



                       SEO?
  Who cares, damn it?



Structure, logic...!

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

Behavior

 Data
LAYOUT

   • CSS   Frameworks verwenden!

   • Copy   and Paste!

   • WYSIWYG      Editoren verwenden!




Just get the damn job done!
CSS FRAMEWORKS?

• Verstecken   Komplexität, wie jedes andere
 Framework

• Stellt Templates   für Grids, Spalten und mehr zur
 Verfügung

• Normalisiert   über Browser hinweg
EIN PAAR TECHNIKEN
• Wenn  Floats mal nicht funktionieren, einfach alles
 positionieren

• Gezieltein CSS Framework verwenden welches Grid/
 Spalten eingebaut hat

• Gezielt   spezielle Browsertechniken verwenden
BEHAVIOR
• Haucht     dem Prototypen Leben ein

• Beschreibendie Interaktionen, die sich zwischen
 Benutzer und Produkt abspielen:

  • Klicke

  • Hovers

  • Drag     & Drop

  • ..etc
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
DATA


• jQuery’s AjaxFunktionen verwenden um schnell
 Content zu injizieren

• JSONP   is your friend!

• $(‘div’).load(‘some.url#content’)
PUBLIC API’S VERWENDEN!


• YQL

• Google API’s(Maps,
 Search, Docs, etc)    Klauen, du
                         musst!
• Flickr
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 ladenden Prozess zu
 verstecken

• Durch verlangsamte Interaktion verstehen Menschen deinen
 Prototyp!

  • Zeigt   den State Change

  • Zeigt Verknüpfungen    zwischen Elementen

  • Fokussiert!
TOOLS
THEMEROLLER
THEMEROLLER
     • Eigene Themes     designen

     • 100%jQuery UI CSS
      Framework kompatibel

     • Funund intuitive UI (Kein
      coding!)

     • png8mit Alpha
      Transparenz

     • Theme   Gallery
JQUERY UI
JQUERY UI CSS FRAMEWORK
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
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      mit Testing/Debugging
 Tools
WEBKIT
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
3D CSS TRANSFORMS!
...VIEL MEHR

• CSS    Gradients    • box   shadow

• CSS    Reflections   • CSS Animations

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

• Schnell   Markup editieren

• CSS   editieren

• JavaScript   manipulieren


                               Der Save button fehlt!
GREASEMONKEY
META


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

• http://paulbakaus.com          • http://wiki.jqueryui.com

•   http://twitter.com/pbakaus   • http://dev.jqueryui.com
DANKE, BIS ZUM NÄCHSTEN MAL!
       http://paulbakaus.com / @pbakaus

Weitere ähnliche Inhalte

Andere mochten auch

Hotel Schloss Wilhelminenberg
Hotel Schloss WilhelminenbergHotel Schloss Wilhelminenberg
Hotel Schloss Wilhelminenberg
hanhdoan
 
Google über alles? Wissenschaftssuchmaschinen als alternativer Weg zu releva...
Google über alles?  Wissenschaftssuchmaschinen als alternativer Weg zu releva...Google über alles?  Wissenschaftssuchmaschinen als alternativer Weg zu releva...
Google über alles? Wissenschaftssuchmaschinen als alternativer Weg zu releva...
hubert3
 
Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...
Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...
Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...
saerdnaer
 
echologic bei Socialbar Berlin
echologic bei Socialbar Berlinechologic bei Socialbar Berlin
echologic bei Socialbar Berlin
Socialbar
 
Arte
ArteArte
Arte
Tochy
 

Andere mochten auch (20)

Hotel Schloss Wilhelminenberg
Hotel Schloss WilhelminenbergHotel Schloss Wilhelminenberg
Hotel Schloss Wilhelminenberg
 
Keynote (DE): Führen mit flexiblen Zielen, at Trendkongress Cologne/D, organi...
Keynote (DE): Führen mit flexiblen Zielen, at Trendkongress Cologne/D, organi...Keynote (DE): Führen mit flexiblen Zielen, at Trendkongress Cologne/D, organi...
Keynote (DE): Führen mit flexiblen Zielen, at Trendkongress Cologne/D, organi...
 
Google über alles? Wissenschaftssuchmaschinen als alternativer Weg zu releva...
Google über alles?  Wissenschaftssuchmaschinen als alternativer Weg zu releva...Google über alles?  Wissenschaftssuchmaschinen als alternativer Weg zu releva...
Google über alles? Wissenschaftssuchmaschinen als alternativer Weg zu releva...
 
Bebeu
BebeuBebeu
Bebeu
 
Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...
Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...
Fachschaftsvollversammlung Sommersemester 2009 Mathematik Physik Informatik -...
 
Wissenswertes zu globo-study Sprachreisen
Wissenswertes zu globo-study SprachreisenWissenswertes zu globo-study Sprachreisen
Wissenswertes zu globo-study Sprachreisen
 
Keynote (DE): Bye-bye Management, at University Westküste, Heide/Germany
Keynote (DE): Bye-bye Management, at University Westküste, Heide/GermanyKeynote (DE): Bye-bye Management, at University Westküste, Heide/Germany
Keynote (DE): Bye-bye Management, at University Westküste, Heide/Germany
 
OpenTransfer - Wie Weltretter ihre Ideen verbreiten
OpenTransfer - Wie Weltretter ihre Ideen verbreitenOpenTransfer - Wie Weltretter ihre Ideen verbreiten
OpenTransfer - Wie Weltretter ihre Ideen verbreiten
 
100.000 Jobs
100.000 Jobs100.000 Jobs
100.000 Jobs
 
FOTOS
FOTOSFOTOS
FOTOS
 
Africa
AfricaAfrica
Africa
 
OVK Online- Report 2008/02
OVK Online- Report 2008/02OVK Online- Report 2008/02
OVK Online- Report 2008/02
 
echologic bei Socialbar Berlin
echologic bei Socialbar Berlinechologic bei Socialbar Berlin
echologic bei Socialbar Berlin
 
Workshop (DE): Beyond-Budgeting-Transformation, organized by SGU
Workshop (DE): Beyond-Budgeting-Transformation, organized by SGUWorkshop (DE): Beyond-Budgeting-Transformation, organized by SGU
Workshop (DE): Beyond-Budgeting-Transformation, organized by SGU
 
Arte
ArteArte
Arte
 
Spanisch Sprachkurse Sprachaufenthalt Spanisch lernen Sprachreisen Spanien Sp...
Spanisch Sprachkurse Sprachaufenthalt Spanisch lernen Sprachreisen Spanien Sp...Spanisch Sprachkurse Sprachaufenthalt Spanisch lernen Sprachreisen Spanien Sp...
Spanisch Sprachkurse Sprachaufenthalt Spanisch lernen Sprachreisen Spanien Sp...
 
Gemeinschaftliche Erfassung von Aufsätzen
Gemeinschaftliche Erfassung von AufsätzenGemeinschaftliche Erfassung von Aufsätzen
Gemeinschaftliche Erfassung von Aufsätzen
 
Seminar (DE): Beyond Budgeting in der Praxis, Heilbronn/Germany, organized by...
Seminar (DE): Beyond Budgeting in der Praxis, Heilbronn/Germany, organized by...Seminar (DE): Beyond Budgeting in der Praxis, Heilbronn/Germany, organized by...
Seminar (DE): Beyond Budgeting in der Praxis, Heilbronn/Germany, organized by...
 
Betacodex2010 06-14
Betacodex2010 06-14Betacodex2010 06-14
Betacodex2010 06-14
 
Spanischkurs für Juristen | Spanischkurs fuer Anwälte | Spanisch sprachkurs f...
Spanischkurs für Juristen | Spanischkurs fuer Anwälte | Spanisch sprachkurs f...Spanischkurs für Juristen | Spanischkurs fuer Anwälte | Spanisch sprachkurs f...
Spanischkurs für Juristen | Spanischkurs fuer Anwälte | Spanisch sprachkurs f...
 

Ähnlich wie Rapid Prototyping mit jQuery (German)

Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier BrowserWeb Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
Sebastian Bauer
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 
JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
Oliver Zeigermann
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Stephan Hamberger
 
Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...
Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...
Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...
SHI Search | Analytics | Big Data
 

Ähnlich wie Rapid Prototyping mit jQuery (German) (20)

Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
Enterprise Java on Steroids
Enterprise Java on SteroidsEnterprise Java on Steroids
Enterprise Java on Steroids
 
IntelliJ für Flex
IntelliJ für FlexIntelliJ für Flex
IntelliJ für Flex
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
 
Web Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier BrowserWeb Workers - Das Arbeitstier Browser
Web Workers - Das Arbeitstier Browser
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015
 
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und AngularVon Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
Von Applets zu Web Components: Robuste Design Systems mit Storybook und Angular
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013JavaScript für Java-Entwickler W-JAX 2013
JavaScript für Java-Entwickler W-JAX 2013
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und Pflege
 
Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...
Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...
Apache Solr vs. Elasticsearch - And The Winner Is...! Ein Vergleich der Shoot...
 

Mehr von Paul Bakaus

Mehr von Paul Bakaus (7)

Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Rapid Prototyping With jQuery
Rapid Prototyping With jQueryRapid Prototyping With jQuery
Rapid Prototyping With jQuery
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
 
Beyond the Standards
Beyond the StandardsBeyond the Standards
Beyond the Standards
 
Ignore the DOM (German)
Ignore the DOM (German)Ignore the DOM (German)
Ignore the DOM (German)
 
Ignore the DOM
Ignore the DOMIgnore the DOM
Ignore the DOM
 

Rapid Prototyping mit jQuery (German)

  • 1. RAPID PROTOTYPING mit jQuery
  • 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.
  • 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
  • 10.
  • 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!
  • 15. Semantics? Who needs semantics! SEO? Who cares, damn it? Structure, logic...! LOL!
  • 16.
  • 17. Mach doch einfach, verdammt!
  • 18. ANFORDERUNGEN EINES PROTOTYPS
  • 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
  • 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
  • 33. THEMEROLLER • Eigene Themes designen • 100%jQuery UI CSS Framework kompatibel • Funund intuitive UI (Kein coding!) • png8mit Alpha Transparenz • Theme Gallery
  • 35.
  • 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..
  • 40. KEINE EXKLUSIVITÄT • Benutzt em‘s für alle Einheiten • Skaliert Hintergrundgrafiken • Dokumentiert! • Kommt mit Testing/Debugging Tools
  • 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
  • 44. ...VIEL MEHR • CSS Gradients • box shadow • CSS Reflections • CSS Animations • text shadow • CSS Transitions
  • 47. FIREBUG / WEBKIT DEV • Schnell Markup editieren • CSS editieren • JavaScript manipulieren Der Save button fehlt!
  • 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