Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rapid HTML Prototypes

B5cf6e112eeee572d722743dea924487?s=47 Garth Braithwaite
November 09, 2012

Rapid HTML Prototypes

Code is a design tool.

Build interactive prototypes to make friends and then bend them to your will.

A tweak of a presentation (https://speakerdeck.com/garthdb/rapid-html) for Web Unleashed.

B5cf6e112eeee572d722743dea924487?s=128

Garth Braithwaite

November 09, 2012
Tweet

Transcript

  1. None
  2. None
  3. brackets.io

  4. None
  5. Goals

  6. Goals

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. Design worflows suck

  14. Design worflows suck Let’s make another!

  15. Design worflows suck Let’s make another!

  16. None
  17. Text! Illustrator Webkit

  18. Illustrator Webkit

  19. Designing out of context will always be open to misinterpretation

    and translation errors.
  20. None
  21. “But I’m not doing design”

  22. None
  23. Dirty code

  24. Dirty code Simple

  25. Dirty code Simple Available

  26. Dirty code Simple Available Interactive

  27. Dirty code Simple Available Interactive New

  28. None
  29. Fast

  30. Fast

  31. Prototype

  32. Prototype index.html

  33. Prototype index.html main.css

  34. Prototype index.html main.css app.js

  35. Prototype index.html main.css app.js assets

  36. Examples

  37. Examples

  38. Examples garthdb.github.com/Brackets-UI-Prototypes

  39. None
  40. None
  41. IDE

  42. IDE Starter

  43. IDE Starter Preprocessors

  44. IDE Starter Preprocessors Build

  45. IDE Starter Preprocessors Build Testing

  46. IDE Starter Preprocessors Build Testing Hosting

  47. IDE

  48. IDE

  49. IDE

  50. IDE

  51. IDE

  52. IDE

  53. Starter

  54. Starter

  55. Starter github.com/GarthDB/Starter

  56. Preprocessors

  57. Preprocessors

  58. Markup

  59. Markup

  60. Markup

  61. Markup

  62. body h1 Jade - node template engine #container if youAreUsingJade

    p You are amazing else p Get on it! <body> <h1> Jade - node template engine</h1> <div id="container"> <p>You are amazing</p> </div> </body> Jade Code HTML
  63. %body %h1 HAML - {markup haiku} #container - if youAreUsingHAML

    %p You are amazing - else %p Get on it! <body> <h1> HAML - {markup haiku}</h1> <div id="container"> <p>You are amazing</p> </div> </body> HAML Code HTML
  64. # This is an H1 * Red * Green *

    Blue [an example](http://example.com/ "Title") inline link. <h1>This is an H1</h1> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> <p><a href="http://example.com/" title="Title">an example</a> inline link.</p> Markdown HTML
  65. Styles

  66. Styles

  67. Styles

  68. Styles

  69. border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px

    Helvetica, Arial, sans-serif & > a.button border-radius(5px) body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Stylus CSS
  70. @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }

    body { font: 12px Helvetica, Arial, sans-serif; & > a.button { @include border-radius(5px); } } body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } SASS CSS
  71. .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;

    } body { font: 12px Helvetica, Arial, sans-serif; & > a.button { .border-radius(5px); } } body { font: 12px Helvetica, Arial, sans-serif; } body > a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Less CSS
  72. Script

  73. Script

  74. class Animal constructor: (@name) -> move: (meters) -> alert @name

    + " moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 Coffeescript var Animal, Snake, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); Snake = (function(_super) { __extends(Snake, _super); function Snake() { return Snake.__super__.constructor.apply(this, arguments); } Snake.prototype.move = function() { alert("Slithering..."); return Snake.__super__.move.call(this, 5); }; return Snake; })(Animal); Javascript
  75. Build

  76. Build

  77. Build

  78. Build

  79. Build

  80. Testing

  81. httpster Testing

  82. httpster Testing

  83. Hosting

  84. Hosting gh-pages

  85. Hosting gh-pages

  86. END!

  87. END! Nailed it!