Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Prototyping 1 — Tools

Avatar for Florian Plank Florian Plank
April 20, 2012
Technology
2
230

Prototyping 1 — Tools

A light introduction to the tools usable for prototyping in the browser.

Avatar for Florian Plank

Florian Plank

April 20, 2012
Tweet

More Decks by Florian Plank

See All by Florian Plank
Ready, set, immersion!
Avatar for Florian Plank polarblau
0
190
Prototyping all the things
Avatar for Florian Plank polarblau
2
180
CoffeeScript vs. ECMAScript 6
Avatar for Florian Plank polarblau
5
3.5k
Design for a complex Reality — Siili Breakfast Edition
Avatar for Florian Plank polarblau
0
160
Enabling Design for a Complex Reality
Avatar for Florian Plank polarblau
2
140
A primer on Content Security Policy
Avatar for Florian Plank polarblau
1
430
Rails and the future of the open web
Avatar for Florian Plank polarblau
3
130
Brief Ruby/Ruby on Rails intro
Avatar for Florian Plank polarblau
3
200
Ruby Idioms
Avatar for Florian Plank polarblau
3
600

Other Decks in Technology

See All in Technology
Entity Framework Core におけるIN句クエリ最適化について
Avatar for tkym htkym
0
120
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
500
AWSインフルエンサーへの道 / load of AWS Influencer
Avatar for WHIsaiyo whisaiyo
0
220
Authlete で実装する MCP OAuth 認可サーバー #CIMD の実装を添えて
Avatar for watahani watahani
0
180
2025-12-27 Claude CodeでPRレビュー対応を効率化する@機械学習社会実装勉強会第54回
Avatar for Naka Masato nakamasato
4
1k
AI with TiDD
Avatar for Shiraji shiraji
1
290
特別捜査官等研修会
Avatar for Nomizo Nomizo nomizone
0
570
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
500
アラフォーおじさん、はじめてre:Inventに行く / A 40-Something Guy’s First re:Invent Adventure
Avatar for 株式会社カミナシ kaminashi
0
150
LayerX QA Night#1
Avatar for koyaman2 koyaman2
0
260
まだ間に合う！ Agentic AI on AWSの現在地をやさしく一挙おさらい
Avatar for みのるん minorun365
17
2.8k
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
1
410

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
31
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
27
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
3
2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
69
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
210
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
0
1.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
93k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
550

Transcript

  1. Prototyping in the browser

  2. “The web application”

  3. Prototyping

  4. “Even if your idea is worth stealing, the hard part

    is implementing the idea, not coming up with it.” — Guy Kawasaki on NDAs, 2008

  5. Software is hard

  6. Software is expensive

  7. Educational Fast Cheap Pick two!

  8. In the browser

  9. TOOLS

  10. HTML

  11. 2000 ENQUIRE 1980 HTML5 Draft 2008 1997 1999 2001 1995

    HTML 2.0 HTML 3.2 HTML 4.0 XHTML 1.0 HTML 4.01 XHTML 1.1

  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

    <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>

  13. <div class="important">Cats</div> Start tag Attribute End tag Content

  14. <DIV> <H1>Headline <P>Hello World

  15. Semantic mark–up

  16. <h1>Heading1</h1> <h2>Heading2</h2> <h3>Heading3</h3> <h4>Heading4</h4> <h5>Heading5</h5> <h6>Heading6</h6>

  17. <ul> <li>Item1</li> <li>Item2</li> </ul> <ol> <li>Item1</li> <li>Item2</li> </ol>

  18. <dl> <dt>Term</dt> <dd>Definition</dd> <dt>Cat</dt> <dd>Makes for funny images online</dd> </dl>

  19. <img src="cat.jpg" alt="A cat doing Math" />

  20. <input type="text" name="email" />

  21. <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>

  22. <a href="another/page.html" title="More about pages"> Another Page <a/>

  23. Presentational mark–up

  24. <b>bold</b> <i>italic</i> <center>centered</center> <font>font declaration</font> ✕

  25. Always separate content and presentation!

  26. Neutral mark–up

  27. <div>A block of something</div> <span>A neutral inline element</span>

  28. https://developer.mozilla.org/en/HTML

  29. None

  30. Backwards compatible

  31. Simplified

  32. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

    <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>

  33. <!DOCTYPE> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body>

    </html>

  34. <script type="text/javascript"> alert("Hello World!"); </script>

  35. <script> alert("Hello World!"); </script>

  36. <script> <link> <style>

  37. <img src="cat.jpg" />

  38. <img src="cat.jpg">

  39. Re–defined HTML4 elements

  40. <a href="page.html" > <h1>Headline</h1> <p>Hello World!</p> </a> a { display:

    block; }

  41. New values and attributes

  42. <input type="email">

  43. <input type="email" placeholder="Your email address">

  44. New elements

  45. <header> <nav> <section> <article> <footer> <aside>

  46. (New Javascript APIs)

  47. <video> <audio> <canvas>

  48. CSS

  49. h1 { font-size: 24px; } Selector Property Unit Value

  50. h1, h2 { font-size: 24px; color: red; }

  51. a:hover { text-decoration: underline; } Pseudo class

  52. Usage

  53. <head> <link rel="stylesheet" href="styles.css"> </head>

  54. <head> <style> h1, h2 { font-size: 24px; color: red; }

    </style> </head>

  55. <h1 style="font-size:24px">Headline</h1>

  56. CSS

  57. Color

  58. h1, h2 { opacity: 0.75; color: rgb(255, 255, 255); //

    rgba() // hsl() }

  59. Backgrounds

  60. div { background-size: 50px 100px; }

  61. div { background: url(foo.png) top left no-repeat, url(bar.png) bottom left

    no-repeat; }

  62. Rounded corners

  63. div { border-radius: 10px; }

  64. Shadows

  65. div { box-shadow: 10px 10px 10px #333; }

  66. h1 { text-shadow: 10px 10px 10px #333; }

  67. Custom fonts

  68. @font-face

  69. Transformations

  70. div { transform: rotate(30deg); transform: scale(0.5, 0.75); transform: skew(-30deg); }

  71. 3D Transformations

  72. http://css3.bradshawenterprises.com/

  73. Browser prefixes

  74. div { -moz-box-shadow: 10px 10px 10px #333; -webkit-box-shadow: 10px 10px

    10px #333; -o-box-shadow: 10px 10px 10px #333; -ie-box-shadow: 10px 10px 10px #333; }

  75. Javascript

  76. UTILITIES

  77. Development console

  78. None

  79. Metalanguages

  80. HAML

  81. <!DOCTYPE> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body>

    </html>

  82. !!! 5 %html %head %title Hello HTML %body %p Hello

    World!

  83. SASS / SCSS

  84. h1, h2 { font-size: 24px; color: red; }

  85. h1, h2 font-size: 24px color: red

  86. Nesting

  87. article { font-size: 1em; } article h1 { font-size: 1.5em;

    } article h1 span { color: red; font-weight: bold; }

  88. article font-size: 1em h1 font-size: 1.5em span color: red font-weight:

    bold

  89. Variables

  90. $headline-highlight: #f00 h1 span color: $headline-highlight

  91. Mixins

  92. =very-important font-weight: bold font-size: 24px color: red h1 +very-important

  93. Coffeescript

  94. Git

  95. Serve

  96. Ruby