Fronteers Workshop: Rabid Prototyping
3 likes3,025 views
This document provides an overview of RABID, a toolkit for rapid web mockups and prototyping. RABID uses HTML, CSS and JavaScript along with templates and JSON objects to allow quick creation of mockups without extensive coding. It provides components, advantages like speed and separation of content from structure, and dependencies on tools like jQuery and Handlebars. The document demonstrates using RABID's structure, JSON objects, templates and CSS flexbox capabilities.
![IK GEBRUIK
[PEN, PAPIER]/WACOM TABLET
INKSCAPE](https://image.slidesharecdn.com/rabid-110921104922-phpapp01/85/Fronteers-Workshop-Rabid-Prototyping-24-320.jpg)
![IK GEBRUIK
[PEN, PAPIER]/WACOM TABLET
INKSCAPE
EN JIJ?](https://image.slidesharecdn.com/rabid-110921104922-phpapp01/85/Fronteers-Workshop-Rabid-Prototyping-25-320.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])](https://image.slidesharecdn.com/rabid-110921104922-phpapp01/85/Fronteers-Workshop-Rabid-Prototyping-40-320.jpg)
![JSON OBJECTS
/* voorbeeld als variable */
var object = {
property: value
}
/* meerdere properties */
var object = {
property: value,
property2: [ val, val, val ]
}](https://image.slidesharecdn.com/rabid-110921104922-phpapp01/85/Fronteers-Workshop-Rabid-Prototyping-41-320.jpg)
![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;](https://image.slidesharecdn.com/rabid-110921104922-phpapp01/85/Fronteers-Workshop-Rabid-Prototyping-43-320.jpg)
Fronteers Workshop: Rabid Prototyping
- 1. STEPHEN HAY . 20110920 . UTRECHT
- 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.
- 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
- 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
- 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.
- 28. MOCKUPS/“PSDs”
- 30. (This slide removed for the greater good)
- 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