Fronteers Workshop: Rabid Prototyping

  • 98,846 views
Uploaded on

 

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
98,846
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
27
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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