Rapid Prototyping mit jQuery (German)

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!

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 Hintergrundgraﬁken • 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 Reﬂections • 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

Rapid Prototyping mit jQuery (German)

by Paul Bakaus on Nov 30, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 26

Statistics

Rapid Prototyping mit jQuery (German) — Presentation Transcript

http://www.slideshare.net	23
http://zootool.com	3