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
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
210
Prototyping all the things
Avatar for Florian Plank polarblau
2
190
CoffeeScript vs. ECMAScript 6
Avatar for Florian Plank polarblau
5
3.6k
Design for a complex Reality — Siili Breakfast Edition
Avatar for Florian Plank polarblau
0
170
Enabling Design for a Complex Reality
Avatar for Florian Plank polarblau
2
150
A primer on Content Security Policy
Avatar for Florian Plank polarblau
1
450
Rails and the future of the open web
Avatar for Florian Plank polarblau
3
140
Brief Ruby/Ruby on Rails intro
Avatar for Florian Plank polarblau
3
210
Ruby Idioms
Avatar for Florian Plank polarblau
3
610

Other Decks in Technology

See All in Technology
AIが書いたコードを信じられない問題 〜レビュー負荷を下げるために変えたこと〜 / The AI Code Trust Gap: Reducing the Review Burden
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
8
1.4k
VespaのParent Childを用いたフィードパフォーマンスの改善
Avatar for 小野崇之 taking
0
120
Pure Intonation on Browser: Building a Sequencer with Ruby
Avatar for nagachika nagachika
0
160
国内外の生成AIセキュリティの最新動向 & AIガードレール製品「chakoshi」のご紹介 / Latest Trends in Generative AI Security (Domestic & International) & Introduction to AI Guardrail Product "chakoshi"
Avatar for NTT docomo Business nttcom
4
1.4k
コミュニティ・勉強会を作るのは目的じゃない
Avatar for uutan1108 ohmori_yusuke
0
260
AI時代のガードレールとしてのAPIガバナンス
Avatar for 草薙昭彦 nagix
0
310
Route 53 Global Resolver で高額課金発生！
Avatar for otanikohei otanikohei2023
0
120
20260428_Product Management Summit_Loglass_JoeHirose
Avatar for 広瀬丈 loglassjoe
3
3.8k
Choose your own adventure in agentic design patterns
Avatar for Guillaume Laforge glaforge
0
150
弁護士ドットコム株式会社 エンジニア職向け 会社紹介資料
Avatar for 弁護士ドットコム bengo4com
1
180
EMから幅を広げるために最近挑戦していること / Recent challenges I'm undertaking to expand my horizons beyond EM
Avatar for hiro-torii hiro_torii
1
130
社内エンジニア勉強会の醍醐味と苦しみ/tamadev
Avatar for Ichiro Nishiuma nishiuma
0
240

Featured

See All Featured
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
320
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.2k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
280
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
310
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
530

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