HTML5 The Missing Part

Transcript

1. 1.

   HTML5 The Missing Part othree

2. 2.

   Outline • Semantic Web • HTML5 ᅺᜀၾ᙮׌ • Web Forms

   2.0
3. 3.

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

4. 4.

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

5. 5.

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

6. 6.

   None
7. 7.

   How ? • XML for data • (X)HTML for web

   content
8. 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 (ᄻ૝)
9. 9.

   XHTML 2.0 • ढϖԞٙᅺ๟ • ˄ᘌࣸdʔΣɨ޴࢙ • ex: no <h1>

   ~ <h6>, <br>
10. 10.

    ɓϣՑЗ݊Ϟᗭܓٙ

11. 11.

    How ? • ͍ᆽٙԴ͜ᅺᜀ • <table> for ڌࣸ༟ࣘ not રو

    • <p> for ݬໝ • <h1> ~ <h6> for ᅺᕚ not ɽο᜗ • <blockquote> for ˏԊ not ᐵર • ʔԴ͜ <b>, <i>, <u>, <big>, <small>
12. 12.

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

13. 13.

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

14. 14.

    HTML <div> Ң݊ Bob Smithd ʔཀ؃ʾே̣Ң Smithyf ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com">www.example.com</a>.

    ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ACME Corp.d ዄ΂ʈ೻ࢪɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
15. 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
16. 16.

    RDFa <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> Ң݊ <span property="v:name">Bob Smith</span>d ʔཀ؃ʾே̣Ң <span

    property="v:nickname">Smithy</span>f ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" rel="v:url">www.example.com</a>. ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ <span property="v:affiliation">ACME Corp</span>.d ዄ΂<span property="v:title">ʈ೻ࢪ</span>ɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
17. 17.

    Microformats <div class="vcard"> Ң݊ <span class="fn">Bob Smith</span>d ʔཀ؃ʾே̣Ң <span class="nickname">Smithy</span>f

    ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" class="url">www.example.com</a>. ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ <span class="org">ACME Corp</span>.d ዄ΂<span class="title">ʈ೻ࢪ</span>ɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
18. 18.

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

19. 19.

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

20. 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
21. 21.

    HTML5 New Elements

22. 22.

    New Structure Elements <header> <footer> <nav> <aside> <article> <hgroup> <section>

23. 23.

    A Web Page <div id=”header”></div> <div id=”footer”></div> <ul id=”navigator”></ul> <div

    id=”content”></div> <div id=”sidebar”> </div>
24. 24.

    A Web Page in HTML5 <header></header> <footer></footer> <nav></nav> <div id=”content”></div>

    <aside> </aside>
25. 25.

    Structure Elements • <header> ࠫ࠯༟ৃjᅺᕚeЪ٫ • <footer> ࠫ҈༟ৃjഹЪᛆ • <aside>

    ޴ᗫ༟ৃ • <nav> ኬᚎ
26. 26.

    Weblog Index <div class=”entry”></div> <div class=”entry”></div> <div class=”entry”></div>

27. 27.

    Weblog Index <article></article> <article></article> <article></article>

28. 28.

    <article> • ௅ໝࣸ˖௝ • ஞ܄वԊ • ীሞਜ˖௝ • జ௝ᕏႦ˖௝ •

    ...etc
29. 29.

    An Article <h1></h1> <p></p> <h2></h2> <p></p> <h2></h2> <p></p>

30. 30.

    <section> </section> An Article <h1></h1> <p></p> <h2></h2> <p></p> <h2></h2> <p></p>

31. 31.

    <hgroup> <hgroup> <h1>My Weblog</h1> <h2 class="tagline">A lot of effort went

    into making this effortless.</h2> </hgroup> <div class="entry"> <h2>Travel day</h2> </div> <div class="entry"> <h2>I'm going to Prague!</h2> </div> http://diveintohtml5.org/semantics.html
32. 32.

    Outline • My Weblog • Travel day • I'm going

    to Prague! http://diveintohtml5.org/semantics.html
33. 33.

    Site Title and Article Title <h1>My Weblog</h1> <h2 class="tagline">A lot

    of effort went into making this effortless.</h2> <div class="entry"> <h2>Travel day</h2> </div> <div class="entry"> <h2>I'm going to Prague!</h2> </div> http://diveintohtml5.org/semantics.html
34. 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
35. 35.

    Mixin • Is <article> in <article> valid ? • Is

    <article> in <section> valid ? • How about <header> in <article> ?
36. 36.

    Yes <article> <header> <h1>The Very First Rule of Life</h1> <p><time

    pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> </section> </article> http://dev.w3.org/html5/spec/sections.html#the-article-element
37. 37.

    <article> </article> <header> </header> <p>Centent</p> <section> </section> <h1>Title</h1> <p><time pubdate></p>

    <h1>Comments</h1> <article> </article> <footer> </footer> <p></p> <p>Posted by</p> <p><time pubdate></p>
38. 38.

    New Elements <figure> <figcaption>

39. 39.

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

40. 40.

    Actually for • Everything • image • code • blockquote

    • video • ...etc
41. 41.

    Examples <figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair,

    works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure> http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element
42. 42.

    Examples <figure> <p>'Twas brillig, and the slithy toves<br> Did gyre

    and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> </figure> http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element
43. 43.

    And... <audio> <video> <canvas> <embed>

44. 44.

    <dialog> • dropped !

45. 45.

    New Inline Elements <b>, <i>, <small> <ruby>, <rt>, <rp> <mark>

    <time> <a>
46. 46.

    b, i, small redefine • <b> for typographic presentation is

    boldened • <i> for alternate voice or mood • <small> for small print
47. 47.

    <ruby> not on Rails

48. 48.

    ဏο 㗋㘓 㗘

49. 49.

    Ruby Markup <ruby> ဏ <rt> 㗋㘓 </rt> ο <rt> 㗘c

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

    <rp> <ruby> ဏ <rp>(</rp><rt>㗋㘓</rt><rp>)</rp> ο <rp>(</rp><rt>㗘</rt><rp>)</rp> </ruby> ဏ (㗋㘓) ο

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

    <mark> ೥ࠠᓃ

52. 52.

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

    ...etc
53. 53.

    Example <p lang="en-US">Consider the following quote:</p> <blockquote lang="en-GB"> <p>Look around

    and you will find, no-one's really <mark>colour</mark> blind.</p> </blockquote> <p lang="en-US">As we can tell from the <em>spelling</em> of the word, the person writing this quote is clearly not American.</p> http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element
54. 54.

    <time> ˚ಂࣛග

55. 55.

    Example <time datetime="2006-09-23">a Saturday</time> <time pubdate datetime="2009-08-30">today</time> http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element

56. 56.

    Annoying pubdate • without pubdate : just a time •

    with pubdate : page publish time • with pubdate and inside an <article> : article’s publish time
57. 57.

    <a> • block level link howto ? • XHTML 2

    : • href is global level attribute • HTML5 ?
58. 58.

    Block Level Link in HTML5 <a href="http://blog.othree.net"> <p>I'm block. But

    I always try to be a link too.</p> <p>me too.</p> </a> a { display: block; }
59. 59.

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

60. 60.

    Microdata

61. 61.

    Remember Microformats ? <div class="vcard"> Ң݊ <span class="fn">Bob Smith</span>d ʔཀ؃ʾே̣Ң

    <span class="nickname">Smithy</span>f ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" class="url">www.example.com</a>. ҢИί Albuquerque (NM)dͦۃ؂ਕ׵ <span class="org">ACME Corp</span>.d ዄ΂<span class="title">ʈ೻ࢪ</span>ɓᔖf </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
62. 62.

    Microdata <div itemscope itemtype="http://data-vocabulary.org/Person"> Ң݊ <span itemprop="name">Bob Smith</span> ʔཀ؃ʾே̣Ң <span

    itemprop="nickname">Smithy</span>. ˸ɨ݊Ңٙ࠯ࠫၣѧj <a href="http://www.example.com" itemprop="url">www.example.com</a> ҢИί Albuquerque (NM)dዄ΂ <span itemprop="title">ʈ೻ࢪ</span> ɓᔖ ͦۃ؂ਕ׵ <span itemprop="affiliation">ACME Corp</span>f </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
63. 63.

    attributes • itemscope : ༟ࣘᇍఖ • itemtype : ༟ࣘᗳй •

    itemprop : ༟ࣘ᙮׌
64. 64.

    APIs • document . getItems( [ types ] ) •

    element . properties • element . itemValue [ = value ] http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api
65. 65.

    No Browser Supports Now

66. 66.

    Web Forms 2.0

67. 67.

    Where is 1.0 ?

68. 68.

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

69. 69.

    What’s New • New Input Types • New Attributes •

    Form Validation
70. 70.

    New Input Types url email tel number range color date

71. 71.

    <input type="datetime" /> <input type="number" min="99" max="101"/> <input type="email" placeholder="foo@bar.com"

    />
72. 72.

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

73. 73.

    And One More Type search

74. 74.

    New Form Elements <output> <datalist>

75. 75.

    <output> <form> <input name=a type=number step=any> + <input name=b type=number

    step=any> = <output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output> </form> http://dev.w3.org/html5/spec/the-button-element.html#the-output-element
76. 76.

    <datalist> <input type="search" autofocus list="search-suggestions"/> <datalist id="search-suggestions"> <option label="DM" value="Depeche

    Mode"> <option label="Moz" value="Morrissey"> <option label="NO" value="New Order"> <option label="TC" value="The Cure"> </datalist> http://miketaylr.com/pres/html5/forms2.html
77. 77.

    New Attributes • autofocus: auto focus • autocomplete: browser’s auto

    complete • placeholder: short hint • multiple for [type=file]: upload multiple file
78. 78.

    Validation • support new input types • pattern attribute for

    <input> • novalidate attribute for <form>
79. 79.

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

80. 80.

    <datagrid> • dropped !

81. 81.

    Q&A