Fronteers Workshop: Rabid Prototyping
44
STEPHEN HAY . 20110920 . UTRECHT
-
Upload
stephen-hay -
Category
Technology
-
view
117 -
download
0
description
Transcript of Fronteers Workshop: Rabid Prototyping
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
