Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX Bootcamp Code Fitness

4a2968e45944bd53db8026919975422e?s=47 Anna Debenham
September 26, 2011

UX Bootcamp Code Fitness

Slides from the UX Prototyping in Code workshop http://lanyrd.com/2011/ux-bootcamp-prototying-in-code/sghbr/

4a2968e45944bd53db8026919975422e?s=128

Anna Debenham

September 26, 2011
Tweet

More Decks by Anna Debenham

Other Decks in Technology

Transcript

  1. UX BOOTCAMP Code Fitness

  2. Before we get started

  3. http://jsbin.com

  4. Javascript window HTML+ CSS window Preview window (automatically updates) [

    [ [ View/hide windows X
  5. Switch between code view and full screen preview Include a

    javascript library (we won’t need this today)
  6. Save a branch This number changes Shareable link!

  7. HTML

  8. Interaction (Javascript) Styles (CSS) Markup (HTML)

  9. HTML ≈ IA

  10. Browser Defaults

  11. Label the website printout with the following: •main heading •paragraph

    •unordered list •ordered list •image •subheading •link
  12. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=”utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> HTML
  13. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> “I’m writing HTML” HTML
  14. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> tag HTML
  15. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> browser information [ HTML
  16. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> which character encoding we’re using HTML
  17. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> appears in browser tab HTML
  18. Very basic HTML page <!DOCTYPE html> <html> <head> <meta charset=“utf-8”

    /> <title>Site name</title> </head> <body> <p>Site Content</p> </body> </html> appears on page [ HTML
  19. Opening & Closing T ags <h1>A heading</h1> <img src=”image.jpg” />

    <p>Some text</p> <br /> Some self-closing tags: Some tags that close because they contain text: HTML HTML HTML HTML
  20. Opening & Closing T ags <body> <h1>A heading</h1> <p>Some text</p>

    </body> body h1 p HTML
  21. Paragraphs <p>This is a paragraph.</p> <p>This is another paragraph.</p> screenshot

    from bbc.co.uk/news HTML
  22. Headings <h1>This is a heading</h1> <p>This is a paragraph.</p> screenshot

    from bbc.co.uk/news HTML
  23. Unordered List <ul> <li>List item 1</li> <li>List item 2</li> <li>List

    item 3</li> </ul> screenshot from bbc.co.uk/news HTML
  24. Ordered List <ol> <li>List item 1</li> <li>List item 2</li> <li>List

    item 3</li> </ol> screenshot from bbc.co.uk/news HTML
  25. Links <a href=”http://google.com”>This is the link text.</a> screenshot from bbc.co.uk/sport

    HTML
  26. Images <img src=”http://nyancat.com/ nyancat.jpg” /> HTML

  27. Comments <!-- This is an HTML comment --> HTML

  28. Mark up the contents of this page: http://goo.gl/y2pqJ

  29. <h1>Heading 1</h1> <p>Paragraph</p> <a href=”http://google.com”>Link</a> <h2>Heading 2</h2> <ul> <li>Unordered List</li>

    </ul> <img src=”http://google.com/image.jpg” /> <ol> <li>Ordered List</li> </ol> HTML HTML HTML HTML HTML HTML HTML
  30. Style

  31. Interaction (Javascript) Styles (CSS) Markup (HTML)

  32. Writing CSS <head> <meta charset=utf-8> <title>CSS Flexbox prototype</title> <style> …

    </style> </head> HTML
  33. h1 “selector” Writing CSS CSS

  34. h1 { open the curly brace Writing CSS CSS

  35. h1 { font-family “property” Writing CSS CSS

  36. h1 { font-family: add a colon Writing CSS CSS

  37. h1 { font-family: Georgia Writing CSS “value” CSS

  38. h1 { font-family: Georgia; finish with a semi-colon Writing CSS

    CSS
  39. h1 { font-family: Georgia; color: green; start a new line,

    add more styles Writing CSS CSS
  40. h1 { font-family: Georgia; color: green; } close the curly

    brace Writing CSS CSS
  41. h1 { font-family: Georgia; color: green; } Writing CSS CSS

  42. Adding more styles h1 { font-family: Georgia; color: green; }

    p { font-family: Verdana; color: pink; } CSS
  43. Comments <!-- This is an HTML comment --> /* This

    is a CSS comment */ HTML CSS
  44. Heading <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Lorem ipsum dolor

    sit amet. HTML
  45. Heading <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Lorem ipsum dolor

    sit amet. Heading h1 { font-family: Arial; color: green; } Lorem ipsum dolor sit amet. HTML CSS
  46. <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Lorem ipsum dolor sit

    amet. Heading h1 { font-family: Georgia; color: green; } p { color: red; font-weight:bold; } Lorem ipsum dolor sit amet. Heading HTML CSS
  47. Try giving everything on your page a different background color

    Open this in another tab for reference: http://goo.gl/tngWK (don’t forget, American spelling)
  48. Grouping styles

  49. Heading h1 { font-family: Arial; color: green; } p {

    font-family: Arial; color: green; } Lorem ipsum dolor sit amet. CSS
  50. Heading h1 { font-family: Arial; color: green; } p {

    font-family: Arial; color: green; } Lorem ipsum dolor sit amet. Heading h1, p { font-family: Arial; color: green; } Lorem ipsum dolor sit amet. CSS
  51. Try grouping styles to give all your paragraphs and headings

    the same color
  52. Sectioning T ags

  53. <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> Heading Lorem ipsum dolor

    sit amet. HTML
  54. <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem

    ipsum dolor sit amet. HTML
  55. <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem

    ipsum dolor sit amet. div { background-color: hotpink; color: white; } CSS HTML
  56. Add some <div> tags to the bits of content on

    your page that you think should be grouped
  57. Dimensions

  58. <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem

    ipsum dolor sit amet. div { background-color: hotpink; color: white; width:250px; } HTML CSS
  59. <div> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet.</p> </div> Heading Lorem

    ipsum dolor sit amet. div { background-color: hotpink; color: white; width:50%; } HTML CSS
  60. Style with class

  61. <div><p>Lorem ipsum</p></div> <div><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div { background-color:yellow;

    … } Dolor sit amet Lorem ipsum Consectetuer adipiscing HTML CSS
  62. <div><p>Lorem ipsum</p></div> <div><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div { background-color:yellow;

    … } Dolor sit amet Lorem ipsum we want to target this one Consectetuer adipiscing HTML CSS
  63. <div><p>Lorem ipsum</p></div> <div class=”alert”><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div {

    background-color:yellow; … } Dolor sit amet Lorem ipsum Consectetuer adipiscing HTML CSS
  64. <div><p>Lorem ipsum</p></div> <div class=”alert”><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div {

    background-color:yellow; … } Dolor sit amet Lorem ipsum Consectetuer adipiscing use classes as “hooks” for styling HTML CSS
  65. <div><p>Lorem ipsum</p></div> <div class=”alert”><p>Dolor sit amet</p></div> <div><p>Consectetuer adipiscing</p></div> div {

    background-color:yellow; … } .alert { background-color:red; } Dolor sit amet Lorem ipsum Consectetuer adipiscing HTML CSS
  66. Class tips • When using a class, think about what

    it is rather than how it looks • Don’t start with a numeral or symbol • You can use a class more than once, and have different styles for it depending on where it’s nested.
  67. IDs • Can only be used once on a page

    • Used for navigating between sections on the same page <div class=”callout” id=”content”> <p>Lorem ipsum</p> </div> #content {…} HTML CSS
  68. Give your <div>s different styles

  69. Navigation

  70. Back to the list <ul> <li>List item 1</li> <li>List item

    2</li> <li>List item 3</li> </ul> •List item 1 •List item 2 •List item 3 HTML
  71. Back to the list •List item 1 •List item 2

    •List item 2.1 •List item 2.2 •List item 3 <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a> <ul> <li><a href=”…”>List item 2.1</a></li> <li><a href=”…”>List item 2.2</a></li> </ul> </li> <li><a href=”…”>List item 3</a></li> </ul> HTML
  72. Back to the list •List item 1 •List item 2

    •List item 2.1 •List item 2.2 •List item 3 <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a> <ul> <li><a href=”…”>List item 2.1</a></li> <li><a href=”…”>List item 2.2</a></li> </ul> </li> <li><a href=”…”>List item 3</a></li> </ul> HTML
  73. Back to the list •List item 1 •List item 2

    •List item 2.1 •List item 2.2 •List item 3 <ul> <li><a href=”…”>List item 1</a></li> <li><a href=”…”>List item 2</a> <ul> <li><a href=”…”>List item 2.1</a></li> <li><a href=”…”>List item 2.2</a></li> </ul> </li> <li><a href=”…”>List item 3</a></li> </ul> HTML
  74. Back to the list <nav> <ul> <li><a href=”…”>List item 1</a></li>

    <li><a href=”…”>List item 2</a></li> <li><a href=”…”>List item 3</a></li> </ul> </nav> •List item 1 •List item 2 •List item 3 HTML
  75. Add some navigation to your page linking to external sites

  76. Borders, margin and padding

  77. None
  78. None
  79. margin-bottom: 10px [ [ (also margin-bottom on the box above)

  80. padding: 5px [

  81. border: 1px solid grey [

  82. div { … } Lorem ipsum dolor sit amet, consectetuer

    adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  83. div { padding-bottom: 20px; } Lorem ipsum dolor sit amet,

    consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  84. div { padding: 20px; } Lorem ipsum dolor sit amet,

    consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  85. div { padding: 20px 20px 0 20px; } Lorem ipsum

    dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
  86. div { margin-right: 20px; } Quisque volutpat mattis eros. Nullam

    malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. CSS
  87. div { margin: 20px; } Quisque volutpat mattis eros. Nullam

    malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. CSS
  88. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 200px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  89. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 210px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  90. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 220px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  91. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 230px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. margin: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
  92. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 240px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. margin: 10px margin: 10px
  93. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

    width: 200px Total Width: 248px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. margin: 10px margin: 10px border:4px border:4px
  94. Add some margin, padding and borders to your page. Tip:

    Try adding a left and right margin to your body. Adding a margin of “auto” to it centres everything.
  95. Floats

  96. How floats work nav div div

  97. How floats work nav { width:30%; } div { width:70%;

    } div { width:70%; }
  98. How floats work nav { width:30%; float:left; } div {

    width:70%; } div { width:70%; }
  99. How floats work nav { width:30%; float:left; } div {

    width:70%; float:left; } div { width:70%; }
  100. How floats work nav { width:30%; float:left; } div {

    width:65%; float:left; } div { width:70%; float:left; }
  101. How floats work nav { width:30%; float:left; } div {

    width:65%; float:right; } div { width:65%; float:right; }
  102. Have a look at: Try creating a 2 column layout

    using floats. How about 3 columns? http://goo.gl/iRwsr
  103. Specificity

  104. Using more than one class <div class=”alert”> <p>There’s been an

    error</p> </div> .alert { border: 2px solid grey; background-color: yellow; } There has been an error HTML CSS
  105. Using more than one class <div class=”alert error”> <p>There’s been

    an error</p> </div> .alert { border: 2px solid grey; background-color: yellow; } .error { background-color: red; } There has been an error HTML CSS
  106. <p>Lorem ipsum</p> <p>Dolor sit amet</p> Dolor sit amet Lorem ipsum

    Specificity HTML
  107. <p>Lorem ipsum</p> <p class=”highlight”>Dolor sit amet</p> Specificity Dolor sit amet

    Lorem ipsum HTML
  108. <p>Lorem ipsum</p> <p class=”highlight”>Dolor sit amet</p> .highlight { background-color:yellow; }

    Specificity Dolor sit amet Lorem ipsum HTML CSS
  109. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> .highlight { background-color:yellow;

    } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSS
  110. p.highlight {…} p .highlight {…} .highlight {…} Spacing is important

    Any element with a class of “highlight” Any paragraph with a class of “highlight” Anything with a class of “highlight” that’s within a paragraph CSS CSS CSS
  111. Read CSS backwards div.content p .highlight { … } These

    styles apply to… CSS
  112. Read CSS backwards div.content p .highlight { … } Anything

    that has a class of highlight CSS
  113. Read CSS backwards div.content p .highlight { … } That’s

    within a paragraph CSS
  114. Read CSS backwards div.content p .highlight { … } That’s

    within a div that has a class of “content” CSS
  115. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> p.highlight { background-color:yellow;

    } Specificity Lorem ipsum Dolor sit amet HTML CSS
  116. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> p .highlight {

    background-color:yellow; } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSS
  117. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> .highlight { background-color:yellow;

    } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSS
  118. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> span.highlight { background-color:yellow;

    } Specificity Lorem ipsum ipsum Dolor sit amet HTML CSS
  119. <p>Lorem <span class=”highlight”>ipsum</span></p> <p class=”highlight”>Dolor sit amet</p> span .highlight {

    background-color:yellow; } Specificity Lorem ipsum Dolor sit amet HTML CSS
  120. None
  121. Breakdown Styles applied to a class will override styles for

    its element <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p> p { color:blue; } HTML CSS
  122. Breakdown Class styles override styles applied to their element <p>Lorem

    ipsum</p> <p class=”prominent”>Lorem ipsum</p> p { color:blue; } .prominent { color:pink; } HTML CSS
  123. Breakdown If an element has 2 classes, the one declared

    last in the stylesheet will override the one declared before it <p>Lorem ipsum</p> <p class=”prominent highlight”>Lorem ipsum</p> p { color:blue; } .prominent { color:pink; } .highlight { color:green; } HTML CSS
  124. Breakdown If an element has 2 classes, the one declared

    last in the stylesheet will override the one declared before it <p>Lorem ipsum</p> <p class=”prominent highlight”>Lorem ipsum</p> p { color:blue; } .highlight { color:green; } .prominent { color:pink; } HTML CSS
  125. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p>Lorem ipsum</p> <p class=”prominent highlight”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .highlight { color:green; } .prominent { color:pink; } HTML CSS
  126. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p>Lorem ipsum</p> <p class=”prominent”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .important .prominent { color:purple; } .prominent { color:pink; } HTML CSS
  127. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p class=”prominent highlight”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .important p { color:purple; } .important .prominent { color:grey; } .prominent { color:pink; } HTML CSS
  128. Breakdown A style will override other styles if it defines

    more selectors <div class=”important”> <p class=”prominent highlight”>Lorem ipsum</p> </div> p { color:blue; } .important { color:orange; } .important p { color:purple; } .important .prominent { color:grey; } .important p.prominent { color:cyan; } .prominent { color:pink; } HTML CSS
  129. Quiz What colour is this paragraph? <p class=”error”>There has been

    an error</p> p { color:blue; } .error { color:red; } HTML CSS
  130. Quiz What colour is this paragraph? <div class=”prominent”> <p class=”error”>There

    has been an error</p> </div> p { color:blue; } .prominent { color:green; } .error { color:red; } HTML CSS
  131. Quiz What colour is this paragraph? <div class=”prominent”> <p class=”error”>There

    has been an error</p> </div> p { color:blue; } .prominent .error { color:hotpink; } .prominent { color:green; } .error { color:red; } HTML CSS
  132. Quiz What colour is this paragraph? <p class=”error prominent”>There has

    been an error</p> p { color:blue; } .prominent { color:green; } .error { color:red; } HTML CSS
  133. Quiz What colour is this paragraph? <p class=”error prominent”>There has

    been an error</p> p { color:blue; } p.prominent { color:green; } .error { color:red; } HTML CSS
  134. Open up the Hackbook: Try the following tasks: • Apply

    a background image to the whole page • Make your navigation look more realistic using background colors and borders • Add a table http://hackbook.hackasaurus.org
  135. Advanced Knowledge

  136. Absolute & Fixed Positioning…

  137. Have a look at http://goo.gl/iizt7

  138. <div class=”box1”> <div class=”box2”> </div> </div> .box2 { position: absolute;

    right: 0; top:0; } .box1 .box2 Absolute & Fixed Positioning HTML CSS
  139. Absolute & Fixed Positioning <div class=”box1”> <div class=”box2”> </div> </div>

    .box1 { position: relative } .box2 { position: absolute; right: 0; top: 0; } .box1 .box2 HTML CSS
  140. Absolute & Fixed Positioning <div class=”box1”> <div class=”box2”> </div> </div>

    .box2 { position: fixed; right: 0; top: 0; } HTML CSS
  141. Absolute & Fixed Positioning <div class=”box1”> <div class=”box2”> </div> </div>

    .box1 { position: relative } .box2 { position: fixed; right: 0; top: 0; } HTML CSS
  142. Flexbox

  143. Flexbox Full demo with all compatible browsers: http://goo.gl/dv9x9 http://goo.gl/ciXp8 http://goo.gl/NKQ18

    Not yet.
  144. Flexbox <div class=”row”> <div class=”column”> … </div> <div class=”column”> …

    </div> </div> <div class=”row”> <div class=”column”>…</div> </div> <div class=”column”>…</div> HTML
  145. Flexbox .row { display:box; } .column { flex-box:1; width:0; }

    <div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> makes columns equal width CSS
  146. Flexbox .row { display:box; } .column { flex-box:1; width:0; }

    <div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> <div class=”column”> … </div> CSS
  147. Flexbox .row { display:box; } .column { flex-box:1; width:0; }

    <div class=”row”> <div class=”column”> … </div> </div> <div class=”column”> … </div> <div class=”column”> … </div> <div class=”column”> … </div> CSS
  148. Ninja style…

  149. Ninja style <div class=”row”> <div class=” column”> … </div> </div>

    <div class=” column”> … </div> <div class=” column”> … </div> <div class=” column”> … </div>
  150. Ninja Style div.last-child {…} a[href$=.pdf] div:nth-child(3) {…} T argets the

    third child div of a parent T argets the last child div of a parent T argets all links that are pointing to a PDF file CSS CSS CSS
  151. Ninja style .row .column:first-child { margin-left:0; } .row .column:last-child {

    margin-right:0; } <div class=”row”> <div class=” column”> … </div> </div> <div class=” column”> … </div> <div class=” column”> … </div> <div class=” column”> … </div> CSS
  152. Have a play with: http://goo.gl/Qt4oS

  153. None