Fronteers Workshop: Rabid Prototyping
-
Upload
stephen-hay -
Category
Technology
-
view
117 -
download
0
description
Transcript of Fronteers Workshop: Rabid Prototyping
![Page 1: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/1.jpg)
STEPHEN HAY . 20110920 . UTRECHT
![Page 2: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/2.jpg)
WIE ZIJN WIJ?
![Page 3: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/3.jpg)
NO EXPECTATION == NO FRUSTRATION
![Page 4: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/4.jpg)
“RULES”MOBILES > SILENTCALLS > OUTSIDEWC > WC
![Page 5: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/5.jpg)
NO WORRIES.
![Page 6: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/6.jpg)
![Page 7: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/7.jpg)
AN EXAMPLE REPRESENTATION OF A WEB PAGE/SITE/SCREEN/APP.
![Page 8: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/8.jpg)
RABID?THINK DIFFERENT.
![Page 9: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/9.jpg)
RABID?THINK DIFFERENT.
TIME TO CREATE: ARGH.
![Page 10: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/10.jpg)
RABID?THINK DIFFERENT.
TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.
![Page 11: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/11.jpg)
RABID?THINK DIFFERENT.
TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.
REAL-WORLD DEMOING
![Page 12: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/12.jpg)
RABID?THINK DIFFERENT.
TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.
REAL-WORLD DEMOINGRESPONSIVE DESIGN
![Page 13: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/13.jpg)
EN JIJ?
![Page 14: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/14.jpg)
WIREFRAMES
![Page 15: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/15.jpg)
EXERCISE
BRON: FAILBLOG.ORG
![Page 16: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/drigoteixeira/4344138100/
![Page 17: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/17.jpg)
http://www.flickr.com/photos/hirt/5553421982/
![Page 18: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/18.jpg)
http://www.flickr.com/photos/baldiri/5734993652/
![Page 19: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/19.jpg)
“Every minute you spend in planning saves 10 minutes in execution.”
— BRIAN TRACY
![Page 20: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/20.jpg)
WAT IS HET DOEL VAN DE VISUALISATIE?
SNELHEID DOOR NIET ALLES IN ÉÉN VISUALISATIE TE PROPPEN
![Page 21: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/21.jpg)
http://www.flickr.com/photos/emmajane/3790483305/
![Page 22: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/22.jpg)
http://www.flickr.com/photos/emmajane/3790483305/
\o/
![Page 23: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/23.jpg)
TOOLSIT AIN’T ’BOUT THE
![Page 24: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/24.jpg)
IK GEBRUIK [PEN, PAPIER]/WACOM TABLETINKSCAPE
![Page 25: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/25.jpg)
IK GEBRUIK [PEN, PAPIER]/WACOM TABLETINKSCAPE
EN JIJ?
![Page 26: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/26.jpg)
DOOR WAT WIJ DOEN, BEPALEN WIJ
WAT KLANTEN VERWACHTEN.
![Page 27: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/27.jpg)
EXERCISE
BRON: FAILBLOG.ORG
![Page 28: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/28.jpg)
MOCKUPS/“PSDs”
![Page 29: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/29.jpg)
http://www.flickr.com/photos/pixelsebi/4126907323/
![Page 30: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/30.jpg)
(This slide removed for the greater good)
![Page 31: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/31.jpg)
TEMPLATES/DEMO’S/PROTOTYPES
![Page 32: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/32.jpg)
CONCLUSIE: DOE DE MOEILIJKE DINGEN
IN DE BROWSER.
(MAAR LAAT DE TECHNOLOGIE JE HELPEN)
![Page 33: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/33.jpg)
WELKE TOOLS ZIJN ER?
![Page 34: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/34.jpg)
NADELEN:SOFTWARE PAKKET (SLECHTE CODE)HTML/CSS (KOST VEEL TIJD)
WIJZIGINGEN KOSTEN VEEL TIJD
![Page 35: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/35.jpg)
RABIDA TOOLKIT FOR RAPID WEB MOCKUPS& PROTOTYPING
STEPHEN HAY • MICHIEL JELIJS
![Page 36: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/36.jpg)
RABIDRABID.js: paging & helper functionsHTML base structureCSS helper stylesMUSTACHE/HTML templates
COMPONENTEN
![Page 37: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/37.jpg)
RABIDSNELCONTENT KAN GESCHEIDEN VAN STRUCTUURDOCTYPE-AGNOSTIC / LAYOUT-AGNOSTIC...?
VOORDELEN
![Page 38: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/38.jpg)
RABIDjQUERYHANDLEBARS.js (bij gebruik van MUSTACHE)
DEPENDENCIES
![Page 39: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/39.jpg)
PLAYTIMERABID structureJSON ObjectsMUSTACHE templatesCSS3 flexbox
![Page 40: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/40.jpg)
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])
![Page 41: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/41.jpg)
JSON OBJECTS/* voorbeeld als variable */var object = { property: value}
/* meerdere properties */var object = { property: value, property2: [ val, val, val ]}
![Page 42: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/42.jpg)
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...
![Page 43: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/43.jpg)
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)
![Page 44: Fronteers Workshop: Rabid Prototyping](https://reader036.fdocuments.us/reader036/viewer/2022081414/54c7914f4a7959304b8b456b/html5/thumbnails/44.jpg)
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