Prototyping 1 — Tools

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

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>

<dl> <dt>Term</dt> <dd>Definition</dd> <dt>Cat</dt> <dd>Makes for funny images online</dd> </dl>

<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

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>

Re–defined HTML4 elements

<a href="page.html" > <h1>Headline</h1> <p>Hello World!</p> </a> a { display:
block; }

New values and attributes

New elements

(New Javascript APIs)

h1 { font-size: 24px; } Selector Property Unit Value

h1, h2 { font-size: 24px; color: red; }

a:hover { text-decoration: underline; } Pseudo class

<head> <style> h1, h2 { font-size: 24px; color: red; }
</style> </head>

<h1 style="font-size:24px">Headline</h1>

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

Metalanguages

<!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

Prototyping 1 — Tools

Prototyping 1 — Tools

More Decks by Florian Plank

Other Decks in Technology

Featured

Transcript