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
220
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
160
Prototyping all the things
polarblau
2
160
CoffeeScript vs. ECMAScript 6
polarblau
5
3.4k
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
120
Enabling Design for a Complex Reality
polarblau
2
120
A primer on Content Security Policy
polarblau
1
370
Rails and the future of the open web
polarblau
3
110
Brief Ruby/Ruby on Rails intro
polarblau
3
160
Ruby Idioms
polarblau
3
550
Other Decks in Technology
See All in Technology
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
140
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
2.5Dモデルのすべて
yu4u
2
790
速くて安いWebサイトを作る
nishiharatsubasa
9
11k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
2.4k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.8k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
500
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
990
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
160
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.2k
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
370
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3.1k
Featured
See All Featured
Bash Introduction
62gerente
610
210k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Visualization
eitanlees
146
15k
Building Your Own Lightsaber
phodgson
104
6.2k
The Invisible Side of Design
smashingmag
299
50k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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