Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Prototyping 1 — Tools
Search
Florian Plank
April 20, 2012
Technology
2
230
Prototyping 1 — Tools
A light introduction to the tools usable for prototyping in the browser.
Florian Plank
April 20, 2012
Tweet
Share
More Decks by Florian Plank
See All by Florian Plank
Ready, set, immersion!
polarblau
0
170
Prototyping all the things
polarblau
2
170
CoffeeScript vs. ECMAScript 6
polarblau
5
3.5k
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
130
Enabling Design for a Complex Reality
polarblau
2
130
A primer on Content Security Policy
polarblau
1
400
Rails and the future of the open web
polarblau
3
130
Brief Ruby/Ruby on Rails intro
polarblau
3
180
Ruby Idioms
polarblau
3
570
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
AWS認定を取る中で感じたこと
siromi
1
190
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.6k
怖くない!はじめてのClaude Code
shinya337
0
400
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
700
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Raft: Consensus for Rubyists
vanstee
140
7k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Code Review Best Practice
trishagee
69
18k
We Have a Design System, Now What?
morganepeng
53
7.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Practical Orchestrator
shlominoach
189
11k
Transcript
Prototyping in the browser
“The web application”
Prototyping
“Even if your idea is worth stealing, the hard part
is implementing the idea, not coming up with it.” — Guy Kawasaki on NDAs, 2008
Software is hard
Software is expensive
Educational Fast Cheap Pick two!
In the browser
TOOLS
HTML
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
<!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>
<div class="important">Cats</div> Start tag Attribute End tag Content
<DIV> <H1>Headline <P>Hello World
Semantic mark–up
<h1>Heading1</h1> <h2>Heading2</h2> <h3>Heading3</h3> <h4>Heading4</h4> <h5>Heading5</h5> <h6>Heading6</h6>
<ul> <li>Item1</li> <li>Item2</li> </ul> <ol> <li>Item1</li> <li>Item2</li> </ol>
<dl> <dt>Term</dt> <dd>Definition</dd> <dt>Cat</dt> <dd>Makes for funny images online</dd> </dl>
<img src="cat.jpg" alt="A cat doing Math" />
<input type="text" name="email" />
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>
<a href="another/page.html" title="More about pages"> Another Page <a/>
Presentational mark–up
<b>bold</b> <i>italic</i> <center>centered</center> <font>font declaration</font> ✕
Always separate content and presentation!
Neutral mark–up
<div>A block of something</div> <span>A neutral inline element</span>
https://developer.mozilla.org/en/HTML
None
Backwards compatible
Simplified
<!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>
<!DOCTYPE> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body>
</html>
<script type="text/javascript"> alert("Hello World!"); </script>
<script> alert("Hello World!"); </script>
<script> <link> <style>
<img src="cat.jpg" />
<img src="cat.jpg">
Re–defined HTML4 elements
<a href="page.html" > <h1>Headline</h1> <p>Hello World!</p> </a> a { display:
block; }
New values and attributes
<input type="email">
<input type="email" placeholder="Your email address">
New elements
<header> <nav> <section> <article> <footer> <aside>
(New Javascript APIs)
<video> <audio> <canvas>
CSS
h1 { font-size: 24px; } Selector Property Unit Value
h1, h2 { font-size: 24px; color: red; }
a:hover { text-decoration: underline; } Pseudo class
Usage
<head> <link rel="stylesheet" href="styles.css"> </head>
<head> <style> h1, h2 { font-size: 24px; color: red; }
</style> </head>
<h1 style="font-size:24px">Headline</h1>
CSS
Color
h1, h2 { opacity: 0.75; color: rgb(255, 255, 255); //
rgba() // hsl() }
Backgrounds
div { background-size: 50px 100px; }
div { background: url(foo.png) top left no-repeat, url(bar.png) bottom left
no-repeat; }
Rounded corners
div { border-radius: 10px; }
Shadows
div { box-shadow: 10px 10px 10px #333; }
h1 { text-shadow: 10px 10px 10px #333; }
Custom fonts
@font-face
Transformations
div { transform: rotate(30deg); transform: scale(0.5, 0.75); transform: skew(-30deg); }
3D Transformations
http://css3.bradshawenterprises.com/
Browser prefixes
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; }
Javascript
UTILITIES
Development console
None
Metalanguages
HAML
<!DOCTYPE> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body>
</html>
!!! 5 %html %head %title Hello HTML %body %p Hello
World!
SASS / SCSS
h1, h2 { font-size: 24px; color: red; }
h1, h2 font-size: 24px color: red
Nesting
article { font-size: 1em; } article h1 { font-size: 1.5em;
} article h1 span { color: red; font-weight: bold; }
article font-size: 1em h1 font-size: 1.5em span color: red font-weight:
bold
Variables
$headline-highlight: #f00 h1 span color: $headline-highlight
Mixins
=very-important font-weight: bold font-size: 24px color: red h1 +very-important
Coffeescript
Git
Serve
Ruby