Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Fronteers Workshop: Rabid Prototyping

100.883 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Sport
  • Als Erste(r) kommentieren

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

×