Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Prototyping 1 — Tools

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

Prototyping 1 — Tools

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

Avatar for Florian Plank

Florian Plank

April 20, 2012

More Decks by Florian Plank

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

Other Decks in Technology

See All in Technology
20260912_スクフェス三河
Avatar for hikari kgnkhkr
0
380
安心して変更できるWebフロントエンドの作り方
Avatar for Hiroyuki ANAI pirosikick
4
2.5k
日経電子版を支えていく Kasane Design System/fec_fukuoka
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
1.5k
事業課題から技術的負債に向き合う
Avatar for SansanTech sansantech
PRO
2
1.8k
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
Avatar for 10xinc 10xinc
0
1.9k
AIネイティブプロダクトで顧客価値を最大化するプロダクトエンジニアとFDEの協働
Avatar for RightTouch righttouch
PRO
0
310
ユーザー価値を届け続けるためにウォンテッドリーが大切にしている文化
Avatar for Kota Minato kotaminato
0
150
映像変換サーバーなしで端末内でHLSを生成してライブ配信
Avatar for HikaruSato hikarusato
0
110
2026_devsumi_ozono.pdf
Avatar for O3(ozono) o3
3
500
空間オーディオで過去の 自分（ゴースト）と競うランニング 〜HealthKitのルートを足音に変える実装〜
Avatar for Nao-RandD nao_randd
0
210
開発投資の期待値を上げるプロダクトロードマップづくり ~プロダクトエンジニアが越境して事業を伸ばす~
Avatar for Kenta Suzuki kekekenta
0
150
Reactの設計論
Avatar for uhyo uhyo
24
13k

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
202
76k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
560
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.6k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
690
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
430
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
830
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
240

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