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
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
2
2.2k
shake-upを科学する
rsakata
7
930
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
250
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
200
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
100
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
560
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
990
AI エージェントと考え直すデータ基盤
na0
18
7.3k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
600
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
450
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Thoughts on Productivity
jonyablonski
69
4.7k
Music & Morning Musume
bryan
46
6.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
A better future with KSS
kneath
238
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rails Girls Zürich Keynote
gr2m
95
14k
For a Future-Friendly Web
brad_frost
179
9.8k
Done Done
chrislema
184
16k
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