STEPHEN HAY . 20110920 . UTRECHT

WIE ZIJN WIJ?

NO EXPECTATION == NO FRUSTRATION

“RULES”MOBILES > SILENTCALLS > OUTSIDEWC > WC

NO WORRIES.

AN EXAMPLE REPRESENTATION OF A WEB PAGE/SITE/SCREEN/APP.

RABID?THINK DIFFERENT.

RABID?THINK DIFFERENT.

TIME TO CREATE: ARGH.

RABID?THINK DIFFERENT.

TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.

RABID?THINK DIFFERENT.

TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.

REAL-WORLD DEMOING

RABID?THINK DIFFERENT.

TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.

REAL-WORLD DEMOINGRESPONSIVE DESIGN

EN JIJ?

WIREFRAMES

EXERCISE

BRON: FAILBLOG.ORG

http://www.flickr.com/photos/drigoteixeira/4344138100/

http://www.flickr.com/photos/hirt/5553421982/

http://www.flickr.com/photos/baldiri/5734993652/

“Every minute you spend in planning saves 10 minutes in execution.”

— BRIAN TRACY

WAT IS HET DOEL VAN DE VISUALISATIE?

SNELHEID DOOR NIET ALLES IN ÉÉN VISUALISATIE TE PROPPEN

http://www.flickr.com/photos/emmajane/3790483305/

http://www.flickr.com/photos/emmajane/3790483305/

\o/

TOOLSIT AIN’T ’BOUT THE

IK GEBRUIK [PEN, PAPIER]/WACOM TABLETINKSCAPE

IK GEBRUIK [PEN, PAPIER]/WACOM TABLETINKSCAPE

EN JIJ?

DOOR WAT WIJ DOEN, BEPALEN WIJ

WAT KLANTEN VERWACHTEN.

EXERCISE

BRON: FAILBLOG.ORG

MOCKUPS/“PSDs”

http://www.flickr.com/photos/pixelsebi/4126907323/

(This slide removed for the greater good)

TEMPLATES/DEMO’S/PROTOTYPES

CONCLUSIE: DOE DE MOEILIJKE DINGEN

IN DE BROWSER.

(MAAR LAAT DE TECHNOLOGIE JE HELPEN)

WELKE TOOLS ZIJN ER?

NADELEN:SOFTWARE PAKKET (SLECHTE CODE)HTML/CSS (KOST VEEL TIJD)

WIJZIGINGEN KOSTEN VEEL TIJD

RABIDA TOOLKIT FOR RAPID WEB MOCKUPS& PROTOTYPING

STEPHEN HAY • MICHIEL JELIJS

RABIDRABID.js: paging & helper functionsHTML base structureCSS helper stylesMUSTACHE/HTML templates

COMPONENTEN

RABIDSNELCONTENT KAN GESCHEIDEN VAN STRUCTUURDOCTYPE-AGNOSTIC / LAYOUT-AGNOSTIC...?

VOORDELEN

RABIDjQUERYHANDLEBARS.js (bij gebruik van MUSTACHE)

DEPENDENCIES

PLAYTIMERABID structureJSON ObjectsMUSTACHE templatesCSS3 flexbox

RABID CHEATSHEET/* Content regions */class=”rabid-region-[naam]”

/* Auto-generated nav */{{nav}}

/* Helper methods */rabid.image(b, h)rabid.lipsum(n)rabid.list(n, [destination pagina])rabid.comp(‘[tpl]’, [JSON obj])

JSON OBJECTS/* voorbeeld als variable */var object = { property: value}

/* meerdere properties */var object = { property: value, property2: [ val, val, val ]}

MUSTACHE TEMPLATES/* simple template */{{item}}

/* loop through properties */{{#list}}<p>{{item}}</p>{{/list}}

/* simple conditionals */{{#if item}}<p>{{item}}</p>{{/if}}

ER IS NOG VEEL MEER MOGELIJK...

CSS3 FLEXBOX/* on parent element */display: [-prefix-]box;[-prefix-]box-orient: horizontal|vertical;

/* alignment along orient axis */[-prefix-]box-pack: start|end|center|justify;

/* alignment along the opposite */[-prefix-]box-align: start|end|center|baseline|stretch;

/* on child element */[-prefix-]box-flex: n;

(CURRENT IMPLEMENTATION)

BEDANKT!http://github.com/stephenhay/rabid (project)http://rabidjs.com (nog niet!)

http://delicious.com/stephenhay/rabid (bookmarks)

http://twitter.com/stephenhayhttp://twitter.com/michielj