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

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
170
Prototyping all the things
Avatar for Florian Plank polarblau
2
170
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
130
Enabling Design for a Complex Reality
Avatar for Florian Plank polarblau
2
130
A primer on Content Security Policy
Avatar for Florian Plank polarblau
1
400
Rails and the future of the open web
Avatar for Florian Plank polarblau
3
120
Brief Ruby/Ruby on Rails intro
Avatar for Florian Plank polarblau
3
180
Ruby Idioms
Avatar for Florian Plank polarblau
3
570

Other Decks in Technology

See All in Technology
Kubernetesで作るAIプラットフォーム
Avatar for oracle4engineer oracle4engineer
PRO
2
220
AIコーディング新時代を生き残るための試行錯誤 / AI Coding Survival Guide
Avatar for Tomohisa Takaoka tomohisa
8
11k
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
Avatar for ayane blueb
0
110
AWS Lambdaでサーバレス設計を学ぼう_ベンダーロックインの懸念を超えて-サーバレスの真価を探る
Avatar for ふくちーぬ（Takaya Fukuchi） fukuchiiinu
4
960
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
270
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
Avatar for y_taka_23 ytaka23
8
2k
Securing your Lambda 101
Avatar for Ilia chillzprezi
0
200
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.2k
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
Avatar for upamune / Yu SERIZAWA upamune
8
5k
Test Smarter, Not Harder: Achieving Confidence in Complex Distributed Systems
Avatar for Elias Nogueira eliasnogueira
1
140
20250514_未経験から Fintech実務参画まで。学生エンジニアの挑戦録
Avatar for Hideto1008 hideto1008
0
900
堅牢な認証基盤の実現 TypeScriptで代数的データ型を活用する
Avatar for KAKEHASHI kakehashi
PRO
1
170

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
470
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k

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