STEPHEN HAY . 20110920 . UTRECHT
WIE ZIJN WIJ?
NO EXPECTATION == NO FRUSTRATION
“RULES”   MOBILES > SILENT   CALLS > OUTSIDE   WC > WC
NO WORRIES.
AN EXAMPLE REPRESENTATION OFA WEB PAGE/SITE/SCREEN/APP.
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.RABID?THINK DIFFERENT.REAL-WORLD DEMOING
TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.RABID?THINK DIFFERENT.REAL-WORLD DEMOINGRESPONSIVE DESIGN
EN JIJ?
WIREFRAMES
EXERCISEBRON: 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 youspend in planningsaves 10 minutesin 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/
o/http://www.flickr.com/photos/emmajane/3790483305/
IT AIN’T ’BOUT THE TOOLS
IK GEBRUIK[PEN, PAPIER]/WACOM TABLETINKSCAPE
IK GEBRUIK[PEN, PAPIER]/WACOM TABLETINKSCAPEEN JIJ?
DOOR WAT WIJ DOEN,      BEPALEN WIJWAT KLANTEN VERWACHTEN.
EXERCISEBRON: 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 FORRAPID WEB MOCKUPS& PROTOTYPINGSTEPHEN HAY • MICHIEL JELIJS
RABID                 COMPONENTENRABID.js: paging & helper functionsHTML base structureCSS helper stylesMUSTACHE/HTML temp...
RABID              VOORDELENSNELCONTENT KAN GESCHEIDEN VAN STRUCTUURDOCTYPE-AGNOSTIC / LAYOUT-AGNOSTIC...?
RABID               DEPENDENCIESjQUERYHANDLEBARS.js (bij gebruik van MUSTACHE)
PLAYTIMERABID structureJSON ObjectsMUSTACHE templatesCSS3 flexbox
RABID CHEATSHEET/* Content regions */class=”rabid-region-[naam]”/* Auto-generated nav */{{nav}}/* Helper methods */rabid.i...
JSON OBJECTS/* voorbeeld als variable */var object = {  property: value}/* meerdere properties */var object = {  property:...
MUSTACHE TEMPLATES/* simple template */{{item}}/* loop through properties */{{#list}}<p>{{item}}</p>{{/list}}/* simple con...
CSS3 (CURRENT IMPLEMENTATION)     FLEXBOX/* on parent element */display: [-prefix-]box;[-prefix-]box-orient: horizontal|ve...
BEDANKT!http://github.com/stephenhay/rabid (project)http://rabidjs.com (nog niet!)http://delicious.com/stephenhay/rabid (b...
Fronteers Workshop: Rabid Prototyping
Upcoming SlideShare
Loading in …5
×

Fronteers Workshop: Rabid Prototyping

100,555 views

Published on

Published in: Technology, Sports
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
100,555
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Fronteers Workshop: Rabid Prototyping

  1. STEPHEN HAY . 20110920 . UTRECHT
  2. WIE ZIJN WIJ?
  3. NO EXPECTATION == NO FRUSTRATION
  4. “RULES” MOBILES > SILENT CALLS > OUTSIDE WC > WC
  5. NO WORRIES.
  6. AN EXAMPLE REPRESENTATION OFA WEB PAGE/SITE/SCREEN/APP.
  7. RABID?THINK DIFFERENT.
  8. TIME TO CREATE: ARGH.RABID?THINK DIFFERENT.
  9. TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.RABID?THINK DIFFERENT.
  10. TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.RABID?THINK DIFFERENT.REAL-WORLD DEMOING
  11. TIME TO CREATE: ARGH.TIME TO EDIT: OMFG.RABID?THINK DIFFERENT.REAL-WORLD DEMOINGRESPONSIVE DESIGN
  12. EN JIJ?
  13. WIREFRAMES
  14. EXERCISEBRON: FAILBLOG.ORG
  15. http://www.flickr.com/photos/drigoteixeira/4344138100/
  16. http://www.flickr.com/photos/hirt/5553421982/
  17. http://www.flickr.com/photos/baldiri/5734993652/
  18. “Every minute youspend in planningsaves 10 minutesin execution.” — BRIAN TRACY
  19. WAT IS HET DOEL VAN DE VISUALISATIE?SNELHEID DOOR NIET ALLES IN ÉÉN VISUALISATIE TE PROPPEN
  20. http://www.flickr.com/photos/emmajane/3790483305/
  21. o/http://www.flickr.com/photos/emmajane/3790483305/
  22. IT AIN’T ’BOUT THE TOOLS
  23. IK GEBRUIK[PEN, PAPIER]/WACOM TABLETINKSCAPE
  24. IK GEBRUIK[PEN, PAPIER]/WACOM TABLETINKSCAPEEN JIJ?
  25. DOOR WAT WIJ DOEN, BEPALEN WIJWAT KLANTEN VERWACHTEN.
  26. EXERCISEBRON: FAILBLOG.ORG
  27. MOCKUPS/“PSDs”
  28. http://www.flickr.com/photos/pixelsebi/4126907323/
  29. (This slide removed for the greater good)
  30. TEMPLATES/DEMO’S/PROTOTYPES
  31. CONCLUSIE: DOE DE MOEILIJKE DINGEN IN DE BROWSER.(MAAR LAAT DE TECHNOLOGIE JE HELPEN)
  32. WELKE TOOLS ZIJN ER?
  33. NADELEN:SOFTWARE PAKKET (SLECHTE CODE)HTML/CSS (KOST VEEL TIJD)WIJZIGINGEN KOSTEN VEEL TIJD
  34. RABIDA TOOLKIT FORRAPID WEB MOCKUPS& PROTOTYPINGSTEPHEN HAY • MICHIEL JELIJS
  35. RABID COMPONENTENRABID.js: paging & helper functionsHTML base structureCSS helper stylesMUSTACHE/HTML templates
  36. RABID VOORDELENSNELCONTENT KAN GESCHEIDEN VAN STRUCTUURDOCTYPE-AGNOSTIC / LAYOUT-AGNOSTIC...?
  37. RABID DEPENDENCIESjQUERYHANDLEBARS.js (bij gebruik van MUSTACHE)
  38. PLAYTIMERABID structureJSON ObjectsMUSTACHE templatesCSS3 flexbox
  39. 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])
  40. JSON OBJECTS/* voorbeeld als variable */var object = { property: value}/* meerdere properties */var object = { property: value, property2: [ val, val, val ]}
  41. 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...
  42. CSS3 (CURRENT IMPLEMENTATION) 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;
  43. 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

×