Your SlideShare is downloading. ×
0
HTML5 The Missing Part
         othree
Outline

• Semantic Web
• HTML5
• Web Forms 2.0
Semantic Web


• Tim Bernes Lee
What is Semantic Web


•
So


•
How ?


• XML for data
• (X)HTML for web content
(X)HTML Standards

• HTML 4.01: Still using today
• XHTML 1: Bridge between HTML and XML
• XHTML 1.1: Preparing for Semant...
XHTML 2.0

•
•
• ex: no <h1> ~ <h6>, <br>
How ?
•
    • <table> for            not
    • <p> for
    • <h1> ~ <h6> for not
    • <blockquote> for not
    •         ...
http://www.certifiedchinesetranslation.com/openaccess/rdfa-primer.html
2nd Step


•   RDFa, Microformats ... etc
HTML
<div>
         Bob Smith
                     Smithy

 <a href="http://www.example.com">www.example.com</a>.
        ...
vCard
        BEGIN:VCARD
        VERSION:3.0
        N:Bob Smith
        FN:Bob Smith
        NICKNAME:Smithy
        URL...
RDFa
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
      <span property="v:name">Bob Smith</span>
   ...
Microformats
<div class="vcard">
       <span class="fn">Bob Smith</span>
                 <span class="nickname">Smithy</...
Microformats
    hCalendar
      hCard
    rel-license
   rel-nofollow
      rel-tag
      XFN
     XOXO
        ...
Benefits

•       (Accessibility)
• SEO
•
•
HTML Standards

• HTML 4.01: Still using today
• XHTML 1: Bridge between HTML and XML
• XHTML 1.1: Preparing for Semantic ...
HTML5 New Elements
New Structure Elements
        <header>
        <footer>
         <nav>
         <aside>
        <article>
        <hgroup...
A Web Page
       <div id=”header”></div>

       <ul id=”navigator”></ul>




                             <div id=”sideb...
A Web Page in HTML5
            <header></header>

               <nav></nav>




                                <aside>
...
Structure Elements

• <header>
• <footer>
• <aside>
• <nav>
Weblog Index
<div class=”entry”></div>



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



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



  <article></article>



  <article></article>
<article>

•
•
•
•
• ...etc
An Article
  <h1></h1>

  <p></p>

  <h2></h2>

   <p></p>

  <h2></h2>

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

  <p></p>

  <section>
    <h2></h2>

     <p></p>

    <h2></h2>

     <p></p>

  </section>
<hgroup>
<hgroup>
 <h1>My Weblog</h1>
 <h2 class="tagline">A lot of effort went into making this effortless.</h2>
</hgroup...
Outline


•   My Weblog

    •   Travel day

    •   I'm going to Prague!




                     http://diveintohtml5.or...
Site Title and Article Title
<h1>My Weblog</h1>
<h2 class="tagline">A lot of effort went into making this effortless.</h2>...
Outline

•   My Weblog

    •   A lot of effort went into making this effortless

    •   Travel day

    •   I'm going to...
Mixin

• Is <article> in <article> valid ?
• Is <article> in <section> valid ?
• How about <header> in <article> ?
Yes
<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time...
<article>
    <header>
   <h1>Title</h1>
<p><time pubdate></p>
     </header>

  <p>Centent</p>

     <section>
 <h1>Comme...
New Elements


    <figure>
   <figcaption>
for




http://html5doctor.com/the-figure-figcaption-elements/
Actually for
• Everything
 • image
 • code
 • blockquote
 • video
 • ...etc
Examples

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

<figure>
  <p>'Twas brillig, and the slithy toves<br>
  Did gyre and gimble in the wabe;<br>
  All mimsy were th...
And...

<audio>
<video>
<canvas>
<embed>
<dialog>


• dropped !
New Inline Elements
     <b>, <i>, <small>
     <ruby>, <rt>, <rp>
          <mark>
          <time>
            <a>
b, i, small redefine

• <b> for typographic presentation is boldened
• <i> for alternate voice or mood
• <small> for small ...
<ruby>


not on Rails
Ruby Markup

                <ruby>
                    <rt>                    </rt>
                    <rt>            ...
<rp>

<ruby>
    <rp>(</rp><rt>   </rt><rp>)</rp>
    <rp>(</rp><rt> </rt><rp>)</rp>
</ruby>




                       ( ...
<mark>
mark usage

•
•
•              highlight
• ...etc
Example
<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
  <p>Look around and you will find, no...
<time>
Example

<time datetime="2006-09-23">a Saturday</time>
<time pubdate datetime="2009-08-30">today</time>




         http:...
Annoying pubdate

• without pubdate : just a time
• with pubdate : page publish time
• with pubdate and inside an <article...
<a>

• block level link howto ?
 • XHTML 2 :
   • href is global level attribute
 • HTML5 ?
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>...
Content Models




 http://dev.w3.org/html5/spec/content-models.html#flow-content
Microdata
Remember Microformats ?
<div class="vcard">
       <span class="fn">Bob Smith</span>
                 <span class="nicknam...
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
       <span itemprop="name">Bob Smith</span>
     ...
attributes

• itemscope :
• itemtype :
• itemprop :
APIs

• document . getItems( [ types ] )
• element . properties
• element . itemValue [ = value ]


      http://www.w3.or...
No Browser Supports Now
Web Forms 2.0
Where is 1.0 ?
HTML 4.01 Spec




    http://www.w3.org/TR/html401/
What’s New

• New Input Types
• New Attributes
• Form Validation
New Input Types
       url
      email
       tel
     number
      range
      color
      date
<input type="datetime" />
<input type="number" min="99" max="101"/>
<input type="email" placeholder="foo@bar.com" />
DEMO
http://miketaylr.com/pres/html5/forms2.html
And One More Type


       search
New Form Elements


      <output>
      <datalist>
<output>

<form>
 <input name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output onforminput="value...
<datalist>
<input type="search" autofocus list="search-suggestions"/>
<datalist id="search-suggestions">
 <option label="D...
New Attributes

• autofocus: auto focus
• autocomplete: browser’s auto complete
• placeholder: short hint
• multiple for [...
Validation

• support new input types
• pattern attribute for <input>
• novalidate attribute for <form>
Opera Supports
http://www.opera.com/docs/specs/presto26/
<datagrid>


• dropped !
Q&A
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
Upcoming SlideShare
Loading in...5
×

TOSSUG HTML5 讀書會 新標籤與表單

2,690

Published on

語義網、新標籤、新表單

Published in: Technology
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,690
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
48
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "TOSSUG HTML5 讀書會 新標籤與表單"

  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. How ? • XML for data • (X)HTML for web content
  7. 7. (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 ( )
  8. 8. XHTML 2.0 • • • ex: no <h1> ~ <h6>, <br>
  9. 9. How ? • • <table> for not • <p> for • <h1> ~ <h6> for not • <blockquote> for not • <b>, <i>, <u>, <big>, <small>
  10. 10. http://www.certifiedchinesetranslation.com/openaccess/rdfa-primer.html
  11. 11. 2nd Step • RDFa, Microformats ... etc
  12. 12. HTML <div> Bob Smith Smithy <a href="http://www.example.com">www.example.com</a>. Albuquerque (NM) ACME Corp. </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  13. 13. 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
  14. 14. RDFa <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> <span property="v:name">Bob Smith</span> <span property="v:nickname">Smithy</span> <a href="http://www.example.com" rel="v:url">www.example.com</a>. Albuquerque (NM) <span property="v:affiliation">ACME Corp</span>. <span property="v:title"> </span> </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  15. 15. Microformats <div class="vcard"> <span class="fn">Bob Smith</span> <span class="nickname">Smithy</span> <a href="http://www.example.com" class="url">www.example.com</a>. Albuquerque (NM) <span class="org">ACME Corp</span>. <span class="title"> </span> </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  16. 16. Microformats hCalendar hCard rel-license rel-nofollow rel-tag XFN XOXO ...
  17. 17. Benefits • (Accessibility) • SEO • •
  18. 18. 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
  19. 19. HTML5 New Elements
  20. 20. New Structure Elements <header> <footer> <nav> <aside> <article> <hgroup> <section>
  21. 21. A Web Page <div id=”header”></div> <ul id=”navigator”></ul> <div id=”sidebar”> <div id=”content”></div> </div> <div id=”footer”></div>
  22. 22. A Web Page in HTML5 <header></header> <nav></nav> <aside> <div id=”content”></div> </aside> <footer></footer>
  23. 23. Structure Elements • <header> • <footer> • <aside> • <nav>
  24. 24. Weblog Index <div class=”entry”></div> <div class=”entry”></div> <div class=”entry”></div>
  25. 25. Weblog Index <article></article> <article></article> <article></article>
  26. 26. <article> • • • • • ...etc
  27. 27. An Article <h1></h1> <p></p> <h2></h2> <p></p> <h2></h2> <p></p>
  28. 28. An Article <h1></h1> <p></p> <section> <h2></h2> <p></p> <h2></h2> <p></p> </section>
  29. 29. <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
  30. 30. Outline • My Weblog • Travel day • I'm going to Prague! http://diveintohtml5.org/semantics.html
  31. 31. 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
  32. 32. Outline • My Weblog • A lot of effort went into making this effortless • Travel day • I'm going to Prague! http://diveintohtml5.org/semantics.html
  33. 33. Mixin • Is <article> in <article> valid ? • Is <article> in <section> valid ? • How about <header> in <article> ?
  34. 34. 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
  35. 35. <article> <header> <h1>Title</h1> <p><time pubdate></p> </header> <p>Centent</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by</p> <p><time pubdate></p> </footer> <p></p> </article> </section> </article>
  36. 36. New Elements <figure> <figcaption>
  37. 37. for http://html5doctor.com/the-figure-figcaption-elements/
  38. 38. Actually for • Everything • image • code • blockquote • video • ...etc
  39. 39. 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
  40. 40. 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
  41. 41. And... <audio> <video> <canvas> <embed>
  42. 42. <dialog> • dropped !
  43. 43. New Inline Elements <b>, <i>, <small> <ruby>, <rt>, <rp> <mark> <time> <a>
  44. 44. b, i, small redefine • <b> for typographic presentation is boldened • <i> for alternate voice or mood • <small> for small print
  45. 45. <ruby> not on Rails
  46. 46. Ruby Markup <ruby> <rt> </rt> <rt> </rt> </ruby> http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element
  47. 47. <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
  48. 48. <mark>
  49. 49. mark usage • • • highlight • ...etc
  50. 50. 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
  51. 51. <time>
  52. 52. 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
  53. 53. Annoying pubdate • without pubdate : just a time • with pubdate : page publish time • with pubdate and inside an <article> : article’s publish time
  54. 54. <a> • block level link howto ? • XHTML 2 : • href is global level attribute • HTML5 ?
  55. 55. 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; }
  56. 56. Content Models http://dev.w3.org/html5/spec/content-models.html#flow-content
  57. 57. Microdata
  58. 58. Remember Microformats ? <div class="vcard"> <span class="fn">Bob Smith</span> <span class="nickname">Smithy</span> <a href="http://www.example.com" class="url">www.example.com</a>. Albuquerque (NM) <span class="org">ACME Corp</span>. <span class="title"> </span> </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  59. 59. Microdata <div itemscope itemtype="http://data-vocabulary.org/Person"> <span itemprop="name">Bob Smith</span> <span itemprop="nickname">Smithy</span>. <a href="http://www.example.com" itemprop="url">www.example.com</a> Albuquerque (NM) <span itemprop="title"> </span> <span itemprop="affiliation">ACME Corp</span> </div> http://www.google.com/support/webmasters/bin/topic.py?topic=21997
  60. 60. attributes • itemscope : • itemtype : • itemprop :
  61. 61. APIs • document . getItems( [ types ] ) • element . properties • element . itemValue [ = value ] http://www.w3.org/TR/2010/WD-microdata-20100624/#microdata-dom-api
  62. 62. No Browser Supports Now
  63. 63. Web Forms 2.0
  64. 64. Where is 1.0 ?
  65. 65. HTML 4.01 Spec http://www.w3.org/TR/html401/
  66. 66. What’s New • New Input Types • New Attributes • Form Validation
  67. 67. New Input Types url email tel number range color date
  68. 68. <input type="datetime" /> <input type="number" min="99" max="101"/> <input type="email" placeholder="foo@bar.com" />
  69. 69. DEMO http://miketaylr.com/pres/html5/forms2.html
  70. 70. And One More Type search
  71. 71. New Form Elements <output> <datalist>
  72. 72. <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
  73. 73. <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
  74. 74. New Attributes • autofocus: auto focus • autocomplete: browser’s auto complete • placeholder: short hint • multiple for [type=file]: upload multiple file
  75. 75. Validation • support new input types • pattern attribute for <input> • novalidate attribute for <form>
  76. 76. Opera Supports http://www.opera.com/docs/specs/presto26/
  77. 77. <datagrid> • dropped !
  78. 78. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×