Prototyping 1 — Tools

A light introduction to the tools usable for prototyping in the browser.

Transcript

1. Prototyping in the browser
2. “The web application”
3. Prototyping
4. “Even if your idea is worth stealing, the hard part is implementing the idea, not coming up with it.” — Guy Kawasaki on NDAs, 2008
5. Software is hard
6. Software is expensive
7. Educational Fast Cheap Pick two!
8. In the browser
9. TOOLS
10. HTML
11. 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
12. <!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>
13. <div class="important">Cats</div> Start tag Attribute End tag Content
14. <DIV> <H1>Headline <P>Hello World
15. Semantic mark–up
16. <h1>Heading1</h1> <h2>Heading2</h2> <h3>Heading3</h3> <h4>Heading4</h4> <h5>Heading5</h5> <h6>Heading6</h6>
17. <ul> <li>Item1</li> <li>Item2</li> </ul> <ol> <li>Item1</li> <li>Item2</li> </ol>
18. <dl> <dt>Term</dt> <dd>Definition</dd> <dt>Cat</dt> <dd>Makes for funny images online</dd> </dl>
19. <img src="cat.jpg" alt="A cat doing Math" />
20. <input type="text" name="email" />
21. <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>
22. <a href="another/page.html" title="More about pages"> Another Page <a/>
23. Presentational mark–up
24. <b>bold</b> <i>italic</i> <center>centered</center> <font>font declaration</font> ✕
25. Always separate content and presentation!
26. Neutral mark–up
27. <div>A block of something</div> <span>A neutral inline element</span>
28. https://developer.mozilla.org/en/HTML
30. Backwards compatible
31. Simplified
32. <!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>
33. <!DOCTYPE> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>
34. <script type="text/javascript"> alert("Hello World!"); </script>
35. <script> alert("Hello World!"); </script>
36. <script> <link> <style>
37. <img src="cat.jpg" />
38. <img src="cat.jpg">
39. Re–defined HTML4 elements
40. <a href="page.html" > <h1>Headline</h1> <p>Hello World!</p> </a> a { display: block; }
41. New values and attributes
42. <input type="email">
43. <input type="email" placeholder="Your email address">
44. New elements
45. <header> <nav> <section> <article> <footer> <aside>
46. (New Javascript APIs)
47. <video> <audio> <canvas>
48. CSS
49. h1 { font-size: 24px; } Selector Property Unit Value
50. h1, h2 { font-size: 24px; color: red; }
51. a:hover { text-decoration: underline; } Pseudo class
52. Usage
53. <head> <link rel="stylesheet" href="styles.css"> </head>
54. <head> <style> h1, h2 { font-size: 24px; color: red; } </style> </head>
55. <h1 style="font-size:24px">Headline</h1>
56. CSS
57. Color
58. h1, h2 { opacity: 0.75; color: rgb(255, 255, 255); // rgba() // hsl() }
59. Backgrounds
60. div { background-size: 50px 100px; }
61. div { background: url(foo.png) top left no-repeat, url(bar.png) bottom left no-repeat; }
62. Rounded corners
63. div { border-radius: 10px; }
64. Shadows
65. div { box-shadow: 10px 10px 10px #333; }
66. h1 { text-shadow: 10px 10px 10px #333; }
67. Custom fonts
68. @font-face
69. Transformations
70. div { transform: rotate(30deg); transform: scale(0.5, 0.75); transform: skew(-30deg); }
71. 3D Transformations
72. http://css3.bradshawenterprises.com/
73. Browser prefixes
74. 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; }
75. Javascript
76. UTILITIES
77. Development console
79. Metalanguages
80. HAML
81. <!DOCTYPE> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>
82. !!! 5 %html %head %title Hello HTML %body %p Hello World!
83. SASS / SCSS
84. h1, h2 { font-size: 24px; color: red; }
85. h1, h2 font-size: 24px color: red
86. Nesting
87. article { font-size: 1em; } article h1 { font-size: 1.5em; } article h1 span { color: red; font-weight: bold; }
88. article font-size: 1em h1 font-size: 1.5em span color: red font-weight: bold
89. Variables
90. $headline-highlight: #f00 h1 span color: $headline-highlight
91. Mixins
92. =very-important font-weight: bold font-size: 24px color: red h1 +very-important
93. Coffeescript
94. Git
95. Serve
96. Ruby