HTML5 The Missing Part

TOSSUG HTML5 Meetup

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