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

Frontend Development (Workshop)

Frontend Development (Workshop)

Workshop on Frontend Development for visual designers
Part 1: Design/UX
Part 2: Progressive Enhancement
Part 3: HTML/CSS
Part 4: HTML/CSS 2

Gunnar Bittersmann

January 28, 2014
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Education

Transcript

  1. Gunnar&Bittersmann&&&@g16n

    View Slide

  2. Design&&
    is&not&&
    veneer.&
    —Aral&Balkan&

    View Slide

  3. Design&&
    is&not&&
    veneer.&
    —Aral&Balkan&

    View Slide

  4. Most&people&make&the&mistake&of&thinking&design&is&what&it&looks&like.&
    That’s&not&what&we&think&design&is.&It’s&not&just&what&it&looks&like&and&
    feels&like.&Design&is&how&it&works.&
    —Steve&Jobs

    View Slide

  5. [Design]&is&about&worrying&about&the&right&thing:&
    solving&your&user’s&problems&not&your&own&problems.&
    —Aral&Balkan

    View Slide

  6. Most&UX&pitfalls&would&be&prevented&if&developers&
    thought&‘What&is&the&user&trying&to&do’&instead&of&
    ‘What&info&do&I&have&to&present’.&
    —Lea&Verou

    View Slide

  7. Design&is&as&much&about&asking&the&right&questions&
    as&it&is&about&answering&them.&
    —Aral&Balkan

    View Slide

  8. Design&is&much&more&about&saying&‘no’&
    than&it&is&about&saying&‘yes’.&
    —Aral&Balkan

    View Slide

  9. Perfection&is&achieved,&not&when&there&is&nothing&more&to&add,&
    but&when&there&is&nothing&left&to&take&away.&
    —Antoine&de&SaintTExupéry

    View Slide

  10. Design&isn’t&crafting&a&beautiful,&textured&button.&
    It’s&figuring&out&if&there’s&a&way&to&get&rid&of&the&
    button&altogether.&
    —Edward&Tufte

    View Slide

  11. Great&design&is&invisible,&bad&design&gets&noticed.&
    —Jared&Spool

    View Slide

  12. The&enemy&of&good&design&is&rarely&bad&design;&
    more&often,&it&is&politics,&territorialism,&and&poor&
    understanding&of&the&problem&at&hand.&
    —Dave&Cronin

    View Slide

  13. When&you&know&the&answer&to&a&problem&immediately&
    it’s&called&production,&not&design.&
    —Peter&van&Blokland

    View Slide

  14. Design&is&a&process,&not&a&product.&
    —Aral&Balkan

    View Slide

  15. The&details&are&not&details,&they&make&the&product.&
    —Charles&Eames

    View Slide

  16. I&remain&amazed&and&perplexed&at&how&often&people&think&
    they&can&solve&an&information&architecture&problem&with&
    interaction&design.&
    —Jesse&James&Garrett

    View Slide

  17. View Slide

  18. Dan&Saffer,&Designing&for&Interaction

    View Slide

  19. the&extent&to&which&a&product&can&be&used&
    by&specified&users&to&achieve&specified&goals&
    with&effectiveness,&efficiency,&and&
    satisfaction&in&a&specified&context&of&use.&
    [ISO&9241T11]
    usability

    View Slide

  20. dialog&principles&
    suitability&for&the&task&
    self&descriptiveness&
    suitability&for&learning&
    controllability&
    conformity&with&user&expectations&
    suitability&for&individualization&
    error&tolerance
    ISO&9241T110

    View Slide

  21. webpage&(images)&optimized&for&performance&
    contact&information&on&a&website&
    no&required&input&field&irrelevant&to&the&task&
    autofocus&on&input&field&that&needs&correction&
    shortcuts&to&most&important&pages
    suitability&for&the&task

    View Slide

  22. feedback&messages&
    meaningful&link&titles&
    item&numbers&in&paged&lists&
    online&help
    self&descriptiveness

    View Slide

  23. suitable&metaphors&
    guided&tour&
    sitemap
    suitability&for&learning

    View Slide

  24. scrollbar&
    sortable&table&
    halt&download&and&continue&later
    controllability

    View Slide

  25. logo&on&top&left&links&to&home&page&
    tab&key&moves&cursor&to&next&input&field&
    enter&key&submits&form&
    consistent&vocabulary,&eg.&“cart”&
    underlined&phrases&are&always&links
    conformity&with&&
    user&expectations

    View Slide

  26. user&profile&
    language&negotiation
    suitability&for&&
    individualisation

    View Slide

  27. form&validation&
    error&messages&in&the&languge&of&the&user&
    undo&function
    error&tolerance

    View Slide

  28. the&degree&to&which&a&product,&device,&
    service,&or&environment&is&available&to&as&
    many&people&as&possible.
    accessibility&

    View Slide

  29. do#websites#need#to#look#exactly#the#same#in#every#browser?

    View Slide

  30. do#websites#need#to#look#exactly#the#same#in#every#browser#.com

    View Slide

  31. View Slide

  32. is#an#escalator##
    that#becomes#stairs.
    progressive#enhancement
    is#building#a#lift##
    then#having#to#add#stairs.#
    —#Andrew#Wight
    graceful#degradation

    View Slide

  33. I#like#an#escalator#because

    an#escalator#can#never#break,

    it#can#only#become#stairs.#
    There#would#never#be#an

    escalator#temporarily#out#of#
    order#sign,#only#an#escalator

    temporarily#stairs.#
    Sorry#for#the#convenience.#
    —#Mitch#Hedberg

    View Slide

  34. behavior'
    JavaScript
    presentation'
    CSS
    structure'
    HTML,'DOM

    View Slide

  35. behavior'
    JavaScript
    presentation'
    CSS
    structure'
    HTML,'DOM

    View Slide

  36. behavior'
    JavaScript
    presentation'
    CSS
    structure'
    HTML,'DOM

    View Slide

  37. Hypertext'Markup'Language
    HTML

    View Slide

  38. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    element

    View Slide

  39. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    tag

    View Slide

  40. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    element'content

    View Slide

  41. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    element'content

    View Slide

  42. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    tag

    View Slide

  43. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    start'tag

    View Slide

  44. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    tag'name'
    element'type

    View Slide

  45. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    end'tag

    View Slide

  46. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    tag'pairs

    View Slide

  47. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    nested'elements

    View Slide

  48. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    wrong!

    View Slide

  49. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    child'element'
    descendant

    View Slide

  50. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    parent'element'
    ancestor

    View Slide

  51. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    start'tag

    View Slide

  52. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    attribute

    View Slide

  53. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    attribute'name

    View Slide

  54. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    attribute'value

    View Slide

  55. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    attributes

    View Slide

  56. This'paragr
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    wrong!

    View Slide

  57. This'paragraph'
    ''''introduces'the'terms'
    ''''element,'tag'and'
    ''''attribute.
    multiple'classes

    View Slide

  58. This'paragraph'introduces'the'terms…
    element

    View Slide

  59. This'paragraph'introduces'the'terms…
    element
    start'tag end'tag

    View Slide

  60. This'paragraph'introduces'the'terms…
    element
    start'tag end'tag
    content

    View Slide

  61. This'paragraph'introduces'the'terms…
    element
    start'tag end'tag
    tag'name tag'name
    content

    View Slide

  62. This'paragraph'introduces'the'terms…
    element
    start'tag end'tag
    attribute
    attribute
    tag'name tag'name
    content

    View Slide

  63. This'paragraph'introduces'the'terms…
    element
    start'tag end'tag
    attribute
    attribute
    tag'name tag'name
    value
    attribute'name
    content

    View Slide

  64. )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    )
    <1tle>The)Universal)Declara1on)of)Human)Rights1tle>)
    The)Universal)Declara1on)of)Human)Rights)
    Ar1cle)1)
    All)human)beings)are)born)free)and)equal)in)dignity)
    and)rights.)They)are)endowed)with)reason)and)conscience)
    and)should)act)towards)one)another)in)a)spirit)of)
    brotherhood.)
    lang="en">)
    )
    )
    )

    View Slide

  65. html root'element'
    2'child'elements:'head'and'body'
    should'have'a'lang'attribute'indicating'the'
    language'of'page'content
    head container'for'character'encoding,'page'title,'
    link'to'stylesheet,'metainformation
    character'encoding'declaration
    always'on'top'for'proper'rendering
    page'title'(browser'tab,'bookmark)
    title
    reference'to'stylesheet

    View Slide

  66. p paragraph
    emphasis
    em
    strong strong'emphasis
    h1'…'h6 heading,'1st'…'6th'level
    body container'for'page'content
    hyperlink

    View Slide

  67. Whereas'a'common'understanding'of'these'
    rights'and'freedoms'is'of'the'greatest'importance'
    for'the'full'realization'of'this'pledge,'
    Now,'Therefore'the'General'
    Assembly'proclaims'this'Universal'
    Declaration'of'Human'Rights'as'a'
    common'standard'of'achievement'for'all'peoples'
    and'all'nations,'to'the'end'that'every'individual'
    and'every'organ'of'society,'keeping'this'
    Declaration'constantly'in'mind,'shall'strive'by'
    teaching'and'education'to'promote'respect'for'
    these'rights'and'freedoms'and'by'progressive'
    measures,'national'and'international,'to'secure'
    their'universal'and'effective'recognition'and'
    observance,'both'among'the'peoples'of'Member'
    States'themselves'and'among'the'peoples'of'
    territories'under'their'jurisdiction.
    block'elements
    '⋮

    View Slide

  68. Whereas'a'common'understanding'of'these'
    rights'and'freedoms'is'of'the'greatest'importance'
    for'the'full'realization'of'this'pledge,'
    Now,'Therefore'the'General'
    Assembly'proclaims'this'Universal'
    Declaration'of'Human'Rights'as'a'
    common'standard'of'achievement'for'all'peoples'
    and'all'nations,'to'the'end'that'every'individual'
    and'every'organ'of'society,'keeping'this'
    Declaration'constantly'in'mind,'shall'strive'by'
    teaching'and'education'to'promote'respect'for'
    these'rights'and'freedoms'and'by'progressive'
    measures,'national'and'international,'to'secure'
    their'universal'and'effective'recognition'and'
    observance,'both'among'the'peoples'of'Member'
    States'themselves'and'among'the'peoples'of'
    territories'under'their'jurisdiction.
    inline'elements
    block'elements
    '⋮

    View Slide

  69. example:'udhr.html

    View Slide

  70. Cascading'Style'Sheets
    CSS

    View Slide

  71. p.lede'
    {'
    ''''fontOweight:'bold;'
    }'
    rule

    View Slide

  72. p.lede'
    {'
    ''''fontOweight:'bold;'
    }'
    selector

    View Slide

  73. p.lede'
    {'
    ''''fontOweight:'bold;'
    }'
    declaration

    View Slide

  74. p.lede'
    {'
    ''''fontOweight:'bold;'
    }'
    property

    View Slide

  75. p.lede'
    {'
    ''''fontOweight:'bold;'
    }'
    value

    View Slide

  76. p.lede'
    {'
    ''''fontOweight:'bold;'
    ''''fontOsize:'1.25em;'
    }'
    declarations

    View Slide

  77. p.lede,'p.important'
    {'
    ''''fontOweight:'bold;'
    ''''fontOsize:'1.25em;'
    }'
    group'of'selectors

    View Slide

  78. p.lede,'p.important'{'fontOweight:'bold;'fontOsize:'1.25em'}'
    rule

    View Slide

  79. p.lede,'p.important'{'fontOweight:'bold;'fontOsize:'1.25em'}'
    rule
    group'of'selectors
    selector
    selector

    View Slide

  80. p.lede,'p.important'{'fontOweight:'bold;'fontOsize:'1.25em'}'
    rule
    group'of'selectors
    declaration
    selector
    selector declaration

    View Slide

  81. p.lede,'p.important'{'fontOweight:'bold;'fontOsize:'1.25em'}'
    rule
    group'of'selectors
    declaration
    selector
    selector
    value
    property
    declaration

    View Slide

  82. exercise:'udhr.html

    View Slide

  83. content
    box'model

    View Slide

  84. content
    box'model
    border

    View Slide

  85. content
    box'model
    border
    padding

    View Slide

  86. content
    box'model
    border
    padding

    View Slide

  87. content
    box'model
    border
    margin
    padding

    View Slide

  88. paddingOtop:'1em;'
    paddingOright:'2em;'
    paddingObottom:'3em;'
    paddingOleft:'4em;
    padding:'1em'2em'3em'4em;
    top
    right
    bottom
    left

    View Slide

  89. paddingOtop:'1em;'
    paddingOright:'2em;'
    paddingObottom:'3em;'
    paddingOleft:'4em;
    padding:'1em'2em'3em'4em;
    top
    right
    bottom
    left

    View Slide

  90. paddingOtop:'1em;'
    paddingOright:'2em;'
    paddingObottom:'3em;'
    paddingOleft:'2em;'
    padding:'1em'2em'3em;
    top
    right
    bottom
    left

    View Slide

  91. paddingOtop:'1em;'
    paddingOright:'2em;'
    paddingObottom:'1em;'
    paddingOleft:'2em;'
    padding:'1em'2em;
    top
    right
    bottom
    left

    View Slide

  92. paddingOtop:'1em;'
    paddingOright:'1em;'
    paddingObottom:'1em;'
    paddingOleft:'1em;'
    padding:'1em;
    top
    right
    bottom
    left

    View Slide

  93. top
    right
    bottom
    left
    marginOtop:'1em;'
    marginOright:'2em;'
    marginObottom:'3em;'
    marginOleft:'4em;'
    margin:'1em'2em'3em'4em;

    View Slide

  94. borderOtopOwidth:'1em;'
    borderOrightOwidth:'2em;'
    borderObottomOwidth:'3em;'
    borderOleftOwidth:'4em;'
    borderOwidth:'1em'2em'3em'4em;
    top
    right
    bottom
    left

    View Slide

  95. content
    border
    margin
    padding

    View Slide

  96. content
    boxOsizing:'contentObox
    border
    margin
    padding
    width
    height

    View Slide

  97. content
    boxOsizing:'paddingObox
    border
    margin
    padding
    width
    height

    View Slide

  98. content
    boxOsizing:'borderObox
    border
    margin
    padding
    width
    height

    View Slide

  99. View Slide

  100. header,'footer e.g.'information'ab.'author,'copyrights
    navigation,'tangentially'related'content
    nav,'aside
    div block'element'with'no'semantics
    section,'article grouping'elements,'should'have'headings
    main'page'content;'max.'1'per'page
    span inline'element'with'no'semantics

    View Slide

  101. figure container'for'multimedia'objects,'quotes,'etc.
    figure'caption
    figcaption
    object,'audio,'video multimedia'objects
    image;'alternative'text'mandatory

    View Slide

  102. table table;'don’t'use'for'layout
    layout'table

    caption table'caption
    li list'item
    ol,'ul (un)ordered'list;'only'li'child'elements'allowed

    View Slide

  103. colgroup group'of'table'columns
    col table'column
    th table'head'cell'(for'row'or'column)
    table'data'cell
    td
    tr table'row
    thead,'tfoot,'tbody groups'of'table'rows

    View Slide

  104. th'''''''''''''''''''''''th'''''''''''''''''''''''th''''''''''''''''''
    th'''''''''''''''''''''''td'''''''''''''''''''''''td'''''''''''''''''
    th'''''''''''''''''''''''td'''''''''''''''''''''''td'''''''''''''''''
    tr
    tr
    tr
    thead
    tbody

    View Slide

  105. button,' submit'button
    other'button

    textarea multiline'input'field
    input'field
    form;'action'attribute'required
    fieldset,'legend grouping'element,'group'heading
    label'for'input'field'with'id,'click'focusses'input

    View Slide

  106. checkbox
    radio'button;'all'of'same'name'in'a'group

    input'field'must'be'filled'out
    input,' text'input
    password'input'(hidden)
    "range";'"date",'"time",'etc. browser'may'display'slider'or'date/time'picker
    "email",'"tel",'"url",'"number" enable'special'keybords'on'mobile'devices

    View Slide

  107. selectors element'type'''p'
    id'''#terms,'p#terms'
    class''.lede,'p.lede'
    attribute'''a[href],'a[href="#"],'a[href^="http"],''
    ' 'img[href$=".jpg"],'p[class~"lede”]
    combinators descendant'''figure'img'
    child'''ol'>'li'
    adjacent'sibling'''h1'+'p'
    general'sibling'''h2'~'p

    View Slide

  108. pseudoQclasses :hover,':active,':focus,':link,':visited'
    :firstQchild,':lastQchild,':nthQchild(an+b)'
    :firstQofQtype,':lastQofQtype,':nthQofQtype(an+b)'
    :checked'
    :valid,':invalid'
    :target'
    :lang(en)'
    :not(…)
    pseudoQelements ::before,'::after'''li::before'{'content:'"▶"'}

    View Slide

  109. selector'specifity'
    a.b.c.d
    a. style'attribute?'
    b. number'of'ID'selectors'
    c. number'of'class'selectors,'attributes'selectors,'
    and'pseudoQclasses'
    d. number'of'type'selectors'and'pseudoQelements

    View Slide

  110. cascading'stylesheets 1. browser'stylesheet'
    2. user'stylesheet,'normal'declarations''
    3. author'stylesheet,'normal'declarations''
    4. author'stylesheet,'important'declarations''
    5. user'stylesheet,'important'declarations'

    View Slide