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

UX Bootcamp Code Fitness

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/

Anna Debenham

September 26, 2011
Tweet

More Decks by Anna Debenham

Other Decks in Technology

Transcript

  1. UX BOOTCAMP
    Code Fitness

    View Slide

  2. Before we get started

    View Slide

  3. http://jsbin.com

    View Slide

  4. Javascript
    window
    HTML+ CSS
    window
    Preview window
    (automatically updates)
    [
    [
    [
    View/hide windows
    X

    View Slide

  5. Switch between code view and full screen preview
    Include a javascript library
    (we won’t need this today)

    View Slide

  6. Save a branch
    This number changes
    Shareable link!

    View Slide

  7. HTML

    View Slide

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

    View Slide

  9. HTML ≈ IA

    View Slide

  10. Browser Defaults

    View Slide

  11. Label the website printout with the following:
    •main heading
    •paragraph
    •unordered list
    •ordered list
    •image
    •subheading
    •link

    View Slide

  12. Very basic HTML page




    Site name


    Site Content


    HTML

    View Slide

  13. Very basic HTML page




    Site name


    Site Content


    “I’m writing HTML”
    HTML

    View Slide

  14. Very basic HTML page




    Site name


    Site Content


    tag
    HTML

    View Slide

  15. Very basic HTML page




    Site name


    Site Content


    browser
    information
    [
    HTML

    View Slide

  16. Very basic HTML page




    Site name


    Site Content


    which character encoding we’re using
    HTML

    View Slide

  17. Very basic HTML page




    Site name


    Site Content


    appears in browser tab
    HTML

    View Slide

  18. Very basic HTML page




    Site name


    Site Content


    appears on page
    [
    HTML

    View Slide

  19. Opening & Closing T
    ags
    A heading

    Some text


    Some self-closing tags:
    Some tags that close because they contain text:
    HTML
    HTML
    HTML
    HTML

    View Slide

  20. Opening & Closing T
    ags

    A heading
    Some text

    body
    h1 p
    HTML

    View Slide

  21. Paragraphs
    This is a paragraph.
    This is another paragraph.
    screenshot from bbc.co.uk/news
    HTML

    View Slide

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

    View Slide

  23. Unordered List

    List item 1
    List item 2
    List item 3

    screenshot from bbc.co.uk/news
    HTML

    View Slide

  24. Ordered List

    List item 1
    List item 2
    List item 3

    screenshot from bbc.co.uk/news
    HTML

    View Slide

  25. Links
    This is
    the link text.
    screenshot from bbc.co.uk/sport
    HTML

    View Slide

  26. Images
    nyancat.jpg” />
    HTML

    View Slide

  27. Comments

    HTML

    View Slide

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

    View Slide

  29. Heading 1
    Paragraph
    Link
    Heading 2

    Unordered List



    Ordered List

    HTML
    HTML
    HTML
    HTML
    HTML
    HTML
    HTML

    View Slide

  30. Style

    View Slide

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

    View Slide

  32. Writing CSS


    CSS Flexbox prototype
    <br/>…<br/>

    HTML

    View Slide

  33. h1
    “selector”
    Writing CSS
    CSS

    View Slide

  34. h1 {
    open the curly brace
    Writing CSS
    CSS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. Comments

    /* This is a CSS comment */
    HTML
    CSS

    View Slide

  44. Heading
    Heading
    Lorem ipsum dolor sit
    amet.
    Lorem ipsum dolor sit
    amet.
    HTML

    View Slide

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

    View Slide

  46. Heading
    Lorem ipsum dolor sit
    amet.
    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

    View Slide

  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)

    View Slide

  48. Grouping styles

    View Slide

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

    View Slide

  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

    View Slide

  51. Try grouping styles to give all your
    paragraphs and headings the same color

    View Slide

  52. Sectioning T
    ags

    View Slide

  53. Heading
    Lorem ipsum dolor sit amet.
    Heading
    Lorem ipsum dolor sit amet.
    HTML

    View Slide


  54. Heading
    Lorem ipsum dolor sit amet.

    Heading
    Lorem ipsum dolor sit amet.
    HTML

    View Slide


  55. Heading
    Lorem ipsum dolor sit amet.

    Heading
    Lorem ipsum dolor sit amet.
    div {
    background-color: hotpink;
    color: white;
    }
    CSS
    HTML

    View Slide

  56. Add some tags to the bits of content
    on your page that you think should be
    grouped

    View Slide

  57. Dimensions

    View Slide


  58. Heading
    Lorem ipsum dolor sit amet.

    Heading
    Lorem ipsum dolor
    sit amet.
    div {
    background-color: hotpink;
    color: white;
    width:250px;
    }
    HTML
    CSS

    View Slide


  59. Heading
    Lorem ipsum dolor sit amet.

    Heading
    Lorem ipsum dolor sit
    amet.
    div {
    background-color: hotpink;
    color: white;
    width:50%;
    }
    HTML
    CSS

    View Slide

  60. Style with class

    View Slide

  61. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    HTML
    CSS

    View Slide

  62. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum
    we want to target this one
    Consectetuer
    adipiscing
    HTML
    CSS

    View Slide

  63. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    HTML
    CSS

    View Slide

  64. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    use classes as “hooks” for styling
    HTML
    CSS

    View Slide

  65. Lorem ipsum
    Dolor sit amet
    Consectetuer adipiscing
    div {
    background-color:yellow; …
    }
    .alert {
    background-color:red;
    }
    Dolor sit amet
    Lorem ipsum Consectetuer
    adipiscing
    HTML
    CSS

    View Slide

  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.

    View Slide

  67. IDs
    • Can only be used once on a page
    • Used for navigating between sections on the same
    page

    Lorem ipsum

    #content {…}
    HTML
    CSS

    View Slide

  68. Give your s different styles

    View Slide

  69. Navigation

    View Slide

  70. Back to the list

    List item 1
    List item 2
    List item 3

    •List item 1
    •List item 2
    •List item 3
    HTML

    View Slide

  71. Back to the list
    •List item 1
    •List item 2
    •List item 2.1
    •List item 2.2
    •List item 3

    List item 1
    List item 2

    List item 2.1
    List item 2.2


    List item 3

    HTML

    View Slide

  72. Back to the list
    •List item 1
    •List item 2
    •List item 2.1
    •List item 2.2
    •List item 3

    List item 1
    List item 2

    List item 2.1
    List item 2.2


    List item 3

    HTML

    View Slide

  73. Back to the list
    •List item 1
    •List item 2
    •List item 2.1
    •List item 2.2
    •List item 3

    List item 1
    List item 2

    List item 2.1
    List item 2.2


    List item 3

    HTML

    View Slide

  74. Back to the list


    List item 1
    List item 2
    List item 3


    •List item 1
    •List item 2
    •List item 3
    HTML

    View Slide

  75. Add some navigation to your page linking to
    external sites

    View Slide

  76. Borders, margin and padding

    View Slide

  77. View Slide

  78. View Slide

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

    View Slide

  80. padding: 5px
    [

    View Slide

  81. border: 1px solid grey
    [

    View Slide

  82. div {

    }
    Lorem ipsum dolor sit
    amet, consectetuer
    adipiscing elit. Donec
    odio.
    Quisque volutpat mattis eros. Nullam
    malesuada erat ut turpis.
    CSS

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  95. Floats

    View Slide

  96. How floats work
    nav
    div
    div

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  102. Have a look at:
    Try creating a 2 column layout using floats.
    How about 3 columns?
    http://goo.gl/iRwsr

    View Slide

  103. Specificity

    View Slide

  104. Using more than one class

    There’s been an error

    .alert {
    border: 2px solid grey;
    background-color: yellow;
    }
    There has been an error
    HTML
    CSS

    View Slide

  105. Using more than one class

    There’s been an error

    .alert {
    border: 2px solid grey;
    background-color: yellow;
    }
    .error {
    background-color: red;
    }
    There has been an error
    HTML
    CSS

    View Slide

  106. Lorem ipsum
    Dolor sit amet
    Dolor sit amet
    Lorem ipsum
    Specificity
    HTML

    View Slide

  107. Lorem ipsum
    Dolor sit amet
    Specificity
    Dolor sit amet
    Lorem ipsum
    HTML

    View Slide

  108. Lorem ipsum
    Dolor sit amet
    .highlight {
    background-color:yellow;
    }
    Specificity
    Dolor sit amet
    Lorem ipsum
    HTML
    CSS

    View Slide

  109. Lorem ipsum
    Dolor sit amet
    .highlight {
    background-color:yellow;
    }
    Specificity
    Lorem ipsum
    ipsum
    Dolor sit amet
    HTML
    CSS

    View Slide

  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

    View Slide

  111. Read CSS backwards
    div.content p .highlight {

    }
    These styles apply to…
    CSS

    View Slide

  112. Read CSS backwards
    div.content p .highlight {

    }
    Anything that has a class of highlight
    CSS

    View Slide

  113. Read CSS backwards
    div.content p .highlight {

    }
    That’s within a paragraph
    CSS

    View Slide

  114. Read CSS backwards
    div.content p .highlight {

    }
    That’s within a div that has a class of “content”
    CSS

    View Slide

  115. Lorem ipsum
    Dolor sit amet
    p.highlight {
    background-color:yellow;
    }
    Specificity
    Lorem ipsum
    Dolor sit amet
    HTML
    CSS

    View Slide

  116. Lorem ipsum
    Dolor sit amet
    p .highlight {
    background-color:yellow;
    }
    Specificity
    Lorem ipsum
    ipsum
    Dolor sit amet
    HTML
    CSS

    View Slide

  117. Lorem ipsum
    Dolor sit amet
    .highlight {
    background-color:yellow;
    }
    Specificity
    Lorem ipsum
    ipsum
    Dolor sit amet
    HTML
    CSS

    View Slide

  118. Lorem ipsum
    Dolor sit amet
    span.highlight {
    background-color:yellow;
    }
    Specificity
    Lorem ipsum
    ipsum
    Dolor sit amet
    HTML
    CSS

    View Slide

  119. Lorem ipsum
    Dolor sit amet
    span .highlight {
    background-color:yellow;
    }
    Specificity
    Lorem ipsum
    Dolor sit amet
    HTML
    CSS

    View Slide

  120. View Slide

  121. Breakdown
    Styles applied to a class will override styles for its element
    Lorem ipsum
    Lorem ipsum
    p { color:blue; }
    HTML
    CSS

    View Slide

  122. Breakdown
    Class styles override styles applied to their element
    Lorem ipsum
    Lorem ipsum
    p { color:blue; }
    .prominent { color:pink; }
    HTML
    CSS

    View Slide

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

    View Slide

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

    View Slide

  125. Breakdown
    A style will override other styles if it defines more selectors

    Lorem ipsum
    Lorem ipsum

    p { color:blue; }
    .important { color:orange; }
    .highlight { color:green; }
    .prominent { color:pink; }
    HTML
    CSS

    View Slide

  126. Breakdown
    A style will override other styles if it defines more selectors

    Lorem ipsum
    Lorem ipsum

    p { color:blue; }
    .important { color:orange; }
    .important .prominent { color:purple; }
    .prominent { color:pink; }
    HTML
    CSS

    View Slide

  127. Breakdown
    A style will override other styles if it defines more selectors

    Lorem ipsum

    p { color:blue; }
    .important { color:orange; }
    .important p { color:purple; }
    .important .prominent { color:grey; }
    .prominent { color:pink; }
    HTML
    CSS

    View Slide

  128. Breakdown
    A style will override other styles if it defines more selectors

    Lorem ipsum

    p { color:blue; }
    .important { color:orange; }
    .important p { color:purple; }
    .important .prominent { color:grey; }
    .important p.prominent { color:cyan; }
    .prominent { color:pink; }
    HTML
    CSS

    View Slide

  129. Quiz
    What colour is this paragraph?
    There has been an error
    p { color:blue; }
    .error { color:red; }
    HTML
    CSS

    View Slide

  130. Quiz
    What colour is this paragraph?

    There has been an error

    p { color:blue; }
    .prominent { color:green; }
    .error { color:red; }
    HTML
    CSS

    View Slide

  131. Quiz
    What colour is this paragraph?

    There has been an error

    p { color:blue; }
    .prominent .error { color:hotpink; }
    .prominent { color:green; }
    .error { color:red; }
    HTML
    CSS

    View Slide

  132. Quiz
    What colour is this paragraph?
    There has been an
    error
    p { color:blue; }
    .prominent { color:green; }
    .error { color:red; }
    HTML
    CSS

    View Slide

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

    View Slide

  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

    View Slide

  135. Advanced Knowledge

    View Slide

  136. Absolute & Fixed Positioning…

    View Slide

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

    View Slide





  138. .box2 {
    position: absolute;
    right: 0;
    top:0;
    }
    .box1
    .box2
    Absolute & Fixed Positioning
    HTML
    CSS

    View Slide

  139. Absolute & Fixed Positioning




    .box1 {
    position: relative
    }
    .box2 {
    position: absolute;
    right: 0;
    top: 0;
    }
    .box1
    .box2
    HTML
    CSS

    View Slide

  140. Absolute & Fixed Positioning




    .box2 {
    position: fixed;
    right: 0;
    top: 0;
    }
    HTML
    CSS

    View Slide

  141. Absolute & Fixed Positioning




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

    View Slide

  142. Flexbox

    View Slide

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

    View Slide

  144. Flexbox








    HTML

    View Slide

  145. Flexbox
    .row {
    display:box;
    }
    .column {
    flex-box:1;
    width:0;
    }








    makes columns equal width
    CSS

    View Slide

  146. Flexbox
    .row {
    display:box;
    }
    .column {
    flex-box:1;
    width:0;
    }











    CSS

    View Slide

  147. Flexbox
    .row {
    display:box;
    }
    .column {
    flex-box:1;
    width:0;
    }














    CSS

    View Slide

  148. Ninja style…

    View Slide

  149. Ninja style














    View Slide

  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

    View Slide

  151. Ninja style
    .row .column:first-child {
    margin-left:0;
    }
    .row .column:last-child {
    margin-right:0;
    }














    CSS

    View Slide

  152. Have a play with:
    http://goo.gl/Qt4oS

    View Slide

  153. View Slide