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.

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

8. RABID?
THINK DIFFERENT.

9. TIME TO CREATE: ARGH.
RABID?
THINK DIFFERENT.

10. TIME TO CREATE: ARGH.
TIME TO EDIT: OMFG.
RABID?
THINK DIFFERENT.

11. TIME TO CREATE: ARGH.
TIME TO EDIT: OMFG.
RABID?
THINK DIFFERENT.
REAL-WORLD DEMOING

12. TIME TO CREATE: ARGH.
TIME TO EDIT: OMFG.
RABID?
THINK DIFFERENT.
REAL-WORLD DEMOING
RESPONSIVE DESIGN

13. EN JIJ?

14. WIREFRAMES

15. EXERCISE
BRON: FAILBLOG.ORG

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

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

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

19. “Every minute you
spend in planning
saves 10 minutes
in execution.”
— BRIAN TRACY

20. WAT IS HET DOEL VAN
DE VISUALISATIE?
SNELHEID DOOR NIET ALLES IN ÉÉN VISUALISATIE TE PROPPEN

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

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

23. IT AIN’T ’BOUT THE TOOLS

24. IK GEBRUIK
[PEN, PAPIER]/WACOM TABLET
INKSCAPE

25. IK GEBRUIK
[PEN, PAPIER]/WACOM TABLET
INKSCAPE
EN JIJ?

26. DOOR WAT WIJ DOEN,
BEPALEN WIJ
WAT KLANTEN VERWACHTEN.

27. EXERCISE
BRON: FAILBLOG.ORG

28. MOCKUPS/“PSDs”

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

30. (This slide removed for the greater good)

31. TEMPLATES/DEMO’S/PROTOTYPES

32. CONCLUSIE:
DOE DE MOEILIJKE DINGEN
IN DE BROWSER.
(MAAR LAAT DE TECHNOLOGIE JE HELPEN)

33. WELKE TOOLS ZIJN ER?

34. NADELEN:
SOFTWARE PAKKET (SLECHTE CODE)
HTML/CSS (KOST VEEL TIJD)
WIJZIGINGEN KOSTEN VEEL TIJD

35. RABID
A TOOLKIT FOR
RAPID WEB MOCKUPS
& PROTOTYPING
STEPHEN HAY • MICHIEL JELIJS

36. RABID COMPONENTEN
RABID.js: paging & helper functions
HTML base structure
CSS helper styles
MUSTACHE/HTML templates

37. RABID VOORDELEN
SNEL
CONTENT KAN GESCHEIDEN VAN STRUCTUUR
DOCTYPE-AGNOSTIC / LAYOUT-AGNOSTIC
...?

38. RABID DEPENDENCIES
jQUERY
HANDLEBARS.js (bij gebruik van MUSTACHE)

39. PLAYTIME
RABID structure
JSON Objects
MUSTACHE templates
CSS3 flexbox

40. 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])

41. JSON OBJECTS
/* voorbeeld als variable */
var object = {
property: value
}
/* meerdere properties */
var object = {
property: value,
property2: [ val, val, val ]
}

42. 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...

43. 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;

44. BEDANKT!
http://github.com/stephenhay/rabid (project)
http://rabidjs.com (nog niet!)
http://delicious.com/stephenhay/rabid (bookmarks)
http://twitter.com/stephenhay
http://twitter.com/michielj