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
140
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
410
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
190
Ruby Idioms
Avatar for Florian Plank polarblau
3
580

Other Decks in Technology

See All in Technology
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
Avatar for Kazuyuki Miyazawa kzykmyzw
0
370
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
Avatar for Yuji Oshima yuj1osm
1
150
Browser
Avatar for Recruit recruitengineers
PRO
5
1.3k
LLMエージェント時代に適応した開発フロー
Avatar for Yuya Hirayama hiragram
1
430
実践アプリケーション設計 ①データモデルとドメインモデル
Avatar for Recruit recruitengineers
PRO
4
830
【Oracle Cloud ウェビナー】[最新動向]：AIエージェント大量生産時代に突入、AI-Readyなデータプラットフォームのススメ
Avatar for oracle4engineer oracle4engineer
PRO
3
100
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
Avatar for yuriemori yuriemori
2
280
JavaScript 研修
Avatar for Recruit recruitengineers
PRO
4
840
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
Avatar for ZOZO Developers zozotech
PRO
18
5.6k
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
Avatar for Susisu susisu
7
2k
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
Avatar for 弁護士ドットコム bengo4com
0
1.1k
[CVPR2025論文読み会] Linguistics-aware Masked Image Modeling for Self-supervised Scene Text Recognition
Avatar for So Uchida s_aiueo32
0
220

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
283
13k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k

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