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
380
Rails and the future of the open web
polarblau
3
110
Brief Ruby/Ruby on Rails intro
polarblau
3
160
Ruby Idioms
polarblau
3
560
Other Decks in Technology
See All in Technology
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
310
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.6k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
事業を差別化する技術を生み出す技術
pyama86
2
500
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.8k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
200
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.8k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
360
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.2k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How GitHub (no longer) Works
holman
314
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Docker and Python
trallard
44
3.3k
Gamification - CAS2011
davidbonilla
80
5.2k
Speed Design
sergeychernyshev
27
810
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Building an army of robots
kneath
303
45k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing for humans not robots
tammielis
250
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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