$30 off During Our Annual Pro Sale. View Details »

HTML5 The Missing Part

othree
September 26, 2011

HTML5 The Missing Part

TOSSUG HTML5 Meetup

othree

September 26, 2011
Tweet

More Decks by othree

Other Decks in Programming

Transcript

  1. HTML5 The Missing Part
    othree

    View Slide

  2. Outline
    • Semantic Web
    • HTML5 ᅺᜀၾ᙮׌
    • Web Forms 2.0

    View Slide

  3. Semantic Web
    • Tim Bernes Lee ͦۃ˴ɢપਗͦᅺ

    View Slide

  4. What is Semantic Web
    • ၣ༩ɪٙ༟ࣘேϞཥ໘̙˸ଣ༆ٙจ່ᅺা

    View Slide

  5. So
    • ซ྅Ϟɓ˂Ό௅ٙ༟̙ࣘ˸ஹഐৎԸ

    View Slide

  6. View Slide

  7. How ?
    • XML for data
    • (X)HTML for web content

    View Slide

  8. (X)HTML Standards
    • HTML 4.01: Still using today
    • XHTML 1: Bridge between HTML and XML
    • XHTML 1.1: Preparing for Semantic Web
    • XHTML 2.0 (ᄻ૝)

    View Slide

  9. XHTML 2.0
    • ढϖԞٙᅺ๟
    • ˄ᘌࣸdʔΣɨ޴࢙
    • ex: no ~ ,

    View Slide

  10. ɓϣՑЗ݊Ϟᗭܓٙ

    View Slide

  11. How ?
    • ͍ᆽٙԴ͜ᅺᜀ
    • for ڌࣸ༟ࣘ not રو
    • for ݬໝ
    • ~ for ᅺᕚ not ɽο᜗
    • for ˏԊ not ᐵર
    • ʔԴ͜ , , , ,

    View Slide

  12. http://www.certifiedchinesetranslation.com/openaccess/rdfa-primer.html

    View Slide

  13. 2nd Step
    • Դ͜ RDFa, Microformats ... etc

    View Slide

  14. HTML

    Ң݊ Bob Smithd
    ʔཀ؃ʾே̣Ң Smithyf
    ˸ɨ݊Ңٙ࠯ࠫၣѧj
    www.example.com.
    ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ACME Corp.d
    ዄ΂ʈ೻ࢪɓᔖf

    http://www.google.com/support/webmasters/bin/topic.py?topic=21997

    View Slide

  15. vCard
    BEGIN:VCARD
    VERSION:3.0
    N:Bob Smith
    FN:Bob Smith
    NICKNAME:Smithy
    URL: http://www.example.com
    TITLE:ʈ೻ࢪ
    ORG:ACME Corp
    ADR;TYPE=work:;;;Albuquerque;NM;;
    END:VCARD
    http://www.google.com/support/webmasters/bin/topic.py?topic=21997

    View Slide

  16. RDFa

    Ң݊ Bob Smithd
    ʔཀ؃ʾே̣Ң Smithyf
    ˸ɨ݊Ңٙ࠯ࠫၣѧj
    www.example.com.
    ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ ACME
    Corp.d
    ዄ΂ʈ೻ࢪɓᔖf

    http://www.google.com/support/webmasters/bin/topic.py?topic=21997

    View Slide

  17. Microformats

    Ң݊ Bob Smithd
    ʔཀ؃ʾே̣Ң Smithyf
    ˸ɨ݊Ңٙ࠯ࠫၣѧj
    www.example.com.
    ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ ACME Corp.d
    ዄ΂ʈ೻ࢪɓᔖf

    http://www.google.com/support/webmasters/bin/topic.py?topic=21997

    View Slide

  18. Microformats
    hCalendar
    hCard
    rel-license
    rel-nofollow
    rel-tag
    XFN
    XOXO
    ...

    View Slide

  19. Benefits
    • ፋձɢ (Accessibility)
    • SEO
    • ୋɧ˙Ꮠ͜
    • ଗ

    View Slide

  20. HTML Standards
    • HTML 4.01: Still using today
    • XHTML 1: Bridge between HTML and XML
    • XHTML 1.1: Preparing for Semantic Web
    • XHTML 2.0 (ᄻ૝)
    • (X)HTML5 by WHATWG

    View Slide

  21. HTML5 New Elements

    View Slide

  22. New Structure Elements







    View Slide

  23. A Web Page





    View Slide

  24. A Web Page in HTML5






    View Slide

  25. Structure Elements
    • ࠫ࠯༟ৃjᅺᕚeЪ٫
    • ࠫ҈༟ৃjഹЪᛆ
    • ޴ᗫ༟ৃ
    • ኬᚎ

    View Slide

  26. Weblog Index



    View Slide

  27. Weblog Index



    View Slide


  28. • ௅ໝࣸ˖௝
    • ஞ܄वԊ
    • ীሞਜ˖௝
    • జ௝ᕏႦ˖௝
    • ...etc

    View Slide

  29. An Article






    View Slide



  30. An Article






    View Slide



  31. My Weblog
    A lot of effort went into making this effortless.


    Travel day


    I'm going to Prague!

    http://diveintohtml5.org/semantics.html

    View Slide

  32. Outline
    • My Weblog
    • Travel day
    • I'm going to Prague!
    http://diveintohtml5.org/semantics.html

    View Slide

  33. Site Title and Article Title
    My Weblog
    A lot of effort went into making this effortless.

    Travel day


    I'm going to Prague!

    http://diveintohtml5.org/semantics.html

    View Slide

  34. Outline
    • My Weblog
    • A lot of effort went into making this effortless
    • Travel day
    • I'm going to Prague!
    http://diveintohtml5.org/semantics.html

    View Slide

  35. Mixin
    • Is in valid ?
    • Is in valid ?
    • How about in ?

    View Slide

  36. Yes


    The Very First Rule of Life


    If there's a microphone anywhere near you, assume it's hot and
    sending whatever you're saying to the world. Seriously.
    ...

    Comments


    Posted by: George Washington


    Yeah! Especially when talking about your lobbyist friends!



    http://dev.w3.org/html5/spec/sections.html#the-article-element

    View Slide





  37. Centent


    Title

    Comments





    Posted by

    View Slide

  38. New Elements
    <figure>
    <figcaption>

    View Slide

  39. for
    http://html5doctor.com/the-figure-figcaption-elements/

    View Slide

  40. Actually for
    • Everything
    • image
    • code
    • blockquote
    • video
    • ...etc

    View Slide

  41. Examples

    alt="Bubbles, sitting in his office chair, works on his
    latest project intently.">
    Bubbles at work

    http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element

    View Slide

  42. Examples

    'Twas brillig, and the slithy toves

    Did gyre and gimble in the wabe;

    All mimsy were the borogoves,

    And the mome raths outgrabe.
    Jabberwocky (first verse).
    Lewis Carroll, 1832-98

    http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element

    View Slide

  43. And...




    View Slide


  44. • dropped !

    View Slide

  45. New Inline Elements
    , ,
    , ,



    View Slide

  46. b, i, small redefine
    • for typographic presentation is boldened
    • for alternate voice or mood
    • for small print

    View Slide


  47. not on Rails

    View Slide

  48. ဏο
    㗋㘓 㗘

    View Slide

  49. Ruby Markup

    ဏ 㗋㘓
    ο 㗘c

    http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element

    View Slide



  50. ဏ (㗋㘓)
    ο (㗘)

    ဏ (㗋㘓) ο (㗘)
    http://dev.w3.org/html5/spec/text-level-semantics.html#the-rp-element

    View Slide


  51. ೥ࠠᓃ

    View Slide

  52. mark usage
    • ˏԊࠠᓃ
    • ೻όᇁࠠᓃ
    • ฤరഐ؈ᗫᒟο highlight
    • ...etc

    View Slide

  53. Example
    Consider the following quote:

    Look around and you will find, no-one's really
    colour blind.

    As we can tell from the spelling of the word,
    the person writing this quote is clearly not American.
    http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element

    View Slide


  54. ˚ಂࣛග

    View Slide

  55. Example
    a Saturday
    today
    http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element

    View Slide

  56. Annoying pubdate
    • without pubdate : just a time
    • with pubdate : page publish time
    • with pubdate and inside an :
    article’s publish time

    View Slide


  57. • block level link howto ?
    • XHTML 2 :
    • href is global level attribute
    • HTML5 ?

    View Slide

  58. Block Level Link in HTML5

    I'm block. But I always try to be a link too.
    me too.

    a {
    display: block;
    }

    View Slide

  59. Content Models
    http://dev.w3.org/html5/spec/content-models.html#flow-content

    View Slide

  60. Microdata

    View Slide

  61. Remember Microformats ?

    Ң݊ Bob Smithd
    ʔཀ؃ʾே̣Ң Smithyf
    ˸ɨ݊Ңٙ࠯ࠫၣѧj
    www.example.com.
    ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ ACME Corp.d
    ዄ΂ʈ೻ࢪɓᔖf

    http://www.google.com/support/webmasters/bin/topic.py?topic=21997

    View Slide

  62. Microdata

    Ң݊ Bob Smith
    ʔཀ؃ʾே̣Ң Smithy.
    ˸ɨ݊Ңٙ࠯ࠫၣѧj
    www.example.com
    ҢИί Albuquerque (NM)dዄ΂ ʈ೻ࢪ ɓᔖ
    ͦۃ؂ਕ׵ ACME Corpf

    http://www.google.com/support/webmasters/bin/topic.py?topic=21997

    View Slide

  63. attributes
    • itemscope : ༟ࣘᇍఖ
    • itemtype : ༟ࣘᗳй
    • itemprop : ༟ࣘ᙮׌

    View Slide

  64. APIs
    • document . getItems( [ types ] )
    • element . properties
    • element . itemValue [ = value ]
    http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api

    View Slide

  65. No Browser Supports Now

    View Slide

  66. Web Forms 2.0

    View Slide

  67. Where is 1.0 ?

    View Slide

  68. http://www.w3.org/TR/html401/
    HTML 4.01 Spec

    View Slide

  69. What’s New
    • New Input Types
    • New Attributes
    • Form Validation

    View Slide

  70. New Input Types
    url
    email
    tel
    number
    range
    color
    date

    View Slide




  71. View Slide

  72. DEMO
    http://miketaylr.com/pres/html5/forms2.html

    View Slide

  73. And One More Type
    search

    View Slide

  74. New Form Elements


    View Slide



  75. +
    =


    http://dev.w3.org/html5/spec/the-button-element.html#the-output-element

    View Slide









  76. http://miketaylr.com/pres/html5/forms2.html

    View Slide

  77. New Attributes
    • autofocus: auto focus
    • autocomplete: browser’s auto complete
    • placeholder: short hint
    • multiple for [type=file]: upload multiple file

    View Slide

  78. Validation
    • support new input types
    • pattern attribute for
    • novalidate attribute for

    View Slide

  79. Opera Supports
    http://www.opera.com/docs/specs/presto26/

    View Slide


  80. • dropped !

    View Slide

  81. Q&A

    View Slide