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 full-size slide

  2. Before we get started

    View full-size slide

  3. http://jsbin.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Save a branch
    This number changes
    Shareable link!

    View full-size slide

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

    View full-size slide

  8. Browser Defaults

    View full-size slide

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

    View full-size slide

  10. Very basic HTML page




    Site name


    Site Content


    HTML

    View full-size slide

  11. Very basic HTML page




    Site name


    Site Content


    “I’m writing HTML”
    HTML

    View full-size slide

  12. Very basic HTML page




    Site name


    Site Content


    tag
    HTML

    View full-size slide

  13. Very basic HTML page




    Site name


    Site Content


    browser
    information
    [
    HTML

    View full-size slide

  14. Very basic HTML page




    Site name


    Site Content


    which character encoding we’re using
    HTML

    View full-size slide

  15. Very basic HTML page




    Site name


    Site Content


    appears in browser tab
    HTML

    View full-size slide

  16. Very basic HTML page




    Site name


    Site Content


    appears on page
    [
    HTML

    View full-size slide

  17. 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 full-size slide

  18. Opening & Closing T
    ags

    A heading
    Some text

    body
    h1 p
    HTML

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Unordered List

    List item 1
    List item 2
    List item 3

    screenshot from bbc.co.uk/news
    HTML

    View full-size slide

  22. Ordered List

    List item 1
    List item 2
    List item 3

    screenshot from bbc.co.uk/news
    HTML

    View full-size slide

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

    View full-size slide

  24. Images
    nyancat.jpg” />
    HTML

    View full-size slide

  25. Comments

    HTML

    View full-size slide

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

    View full-size slide

  27. Heading 1
    Paragraph
    Link
    Heading 2

    Unordered List



    Ordered List

    HTML
    HTML
    HTML
    HTML
    HTML
    HTML
    HTML

    View full-size slide

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

    View full-size slide

  29. Writing CSS


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

    HTML

    View full-size slide

  30. h1
    “selector”
    Writing CSS
    CSS

    View full-size slide

  31. h1 {
    open the curly brace
    Writing CSS
    CSS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Comments

    /* This is a CSS comment */
    HTML
    CSS

    View full-size slide

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

    View full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

  44. 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 full-size slide

  45. Grouping styles

    View full-size slide

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

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. Sectioning T
    ags

    View full-size slide

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

    View full-size slide


  51. Heading
    Lorem ipsum dolor sit amet.

    Heading
    Lorem ipsum dolor sit amet.
    HTML

    View full-size slide


  52. Heading
    Lorem ipsum dolor sit amet.

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

    View full-size slide

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

    View full-size slide


  54. Heading
    Lorem ipsum dolor sit amet.

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

    View full-size slide


  55. Heading
    Lorem ipsum dolor sit amet.

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

    View full-size slide

  56. Style with class

    View full-size slide

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

    View full-size slide

  58. 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 full-size slide

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

    View full-size slide

  60. 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 full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

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

    Lorem ipsum

    #content {…}
    HTML
    CSS

    View full-size slide

  64. Give your s different styles

    View full-size slide

  65. Back to the list

    List item 1
    List item 2
    List item 3

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

    View full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

  68. 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 full-size slide

  69. Back to the list


    List item 1
    List item 2
    List item 3


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

    View full-size slide

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

    View full-size slide

  71. Borders, margin and padding

    View full-size slide

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

    View full-size slide

  73. padding: 5px
    [

    View full-size slide

  74. border: 1px solid grey
    [

    View full-size slide

  75. div {

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

    View full-size slide

  76. 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 full-size slide

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

    View full-size slide

  78. 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 full-size slide

  79. 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 full-size slide

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

    View full-size slide

  81. 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 full-size slide

  82. 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 full-size slide

  83. 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 full-size slide

  84. 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 full-size slide

  85. 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 full-size slide

  86. 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 full-size slide

  87. 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 full-size slide

  88. How floats work
    nav
    div
    div

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  95. 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 full-size slide

  96. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  101. 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 full-size slide

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

    }
    These styles apply to…
    CSS

    View full-size slide

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

    }
    Anything that has a class of highlight
    CSS

    View full-size slide

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

    }
    That’s within a paragraph
    CSS

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  113. 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 full-size slide

  114. 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 full-size slide

  115. 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 full-size slide

  116. 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 full-size slide

  117. 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 full-size slide

  118. 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 full-size slide

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

    View full-size slide

  120. Quiz
    What colour is this paragraph?

    There has been an error

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

    View full-size slide

  121. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  124. 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 full-size slide

  125. Advanced Knowledge

    View full-size slide

  126. Absolute & Fixed Positioning…

    View full-size slide

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

    View full-size slide





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

    View full-size slide

  129. Absolute & Fixed Positioning




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

    View full-size slide

  130. Absolute & Fixed Positioning




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

    View full-size slide

  131. Absolute & Fixed Positioning




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

    View full-size slide

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

    View full-size slide

  133. Flexbox








    HTML

    View full-size slide

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








    makes columns equal width
    CSS

    View full-size slide

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











    CSS

    View full-size slide

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














    CSS

    View full-size slide

  137. Ninja style…

    View full-size slide

  138. Ninja style














    View full-size slide

  139. 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 full-size slide

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














    CSS

    View full-size slide

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

    View full-size slide