Tweet
Tweet

Slide 1

Slide 1 text

HTML5 The Missing Part othree

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

(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 (ᄻ૝)

Slide 9

Slide 9 text

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

~

,

Slide 10

Slide 10 text

ɓϣՑЗ݊Ϟᗭܓٙ

Slide 11

Slide 11 text

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

for ݬໝ •

~

for ᅺᕚ not ɽο᜗ •
for ˏԊ not ᐵર • ʔԴ͜ , , , ,

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

HTML5 New Elements

Slide 22

Slide 22 text

New Structure Elements

Slide 23

Slide 23 text

A Web Page

    Slide 24

    Slide 24 text

    A Web Page in HTML5

    Slide 25

    Slide 25 text

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

    Slide 26

    Slide 26 text

    Weblog Index

    Slide 27

    Slide 27 text

    Weblog Index

    Slide 28

    Slide 28 text

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

    Slide 29

    Slide 29 text

    An Article

    Slide 30

    Slide 30 text

    An Article

    Slide 31

    Slide 31 text

    My Weblog

    A lot of effort went into making this effortless.

    Travel day

    I'm going to Prague!

    http://diveintohtml5.org/semantics.html

    Slide 32

    Slide 32 text

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

    Slide 33

    Slide 33 text

    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

    Slide 34

    Slide 34 text

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

    Slide 35

    Slide 35 text

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

    Slide 36

    Slide 36 text

    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

    Slide 37

    Slide 37 text

    Centent

    Title

    Comments

    Posted by

    Slide 38

    Slide 38 text

    New Elements <figure> <figcaption>

    Slide 39

    Slide 39 text

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

    Slide 40

    Slide 40 text

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

    Slide 41

    Slide 41 text

    Examples 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

    Slide 42

    Slide 42 text

    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

    Slide 43

    Slide 43 text

    And...

    Slide 44

    Slide 44 text

    • dropped !

    Slide 45

    Slide 45 text

    New Inline Elements , , , ,

    Slide 46

    Slide 46 text

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

    Slide 47

    Slide 47 text

    not on Rails

    Slide 48

    Slide 48 text

    ဏο 㗋㘓 㗘

    Slide 49

    Slide 49 text

    Ruby Markup ဏ 㗋㘓 ο 㗘c http://dev.w3.org/html5/spec/text-level-semantics.html#the-ruby-element

    Slide 50

    Slide 50 text

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

    Slide 51

    Slide 51 text

    ೥ࠠᓃ

    Slide 52

    Slide 52 text

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

    Slide 53

    Slide 53 text

    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

    Slide 54

    Slide 54 text

    ˚ಂࣛග

    Slide 55

    Slide 55 text

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

    Slide 56

    Slide 56 text

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

    Slide 57

    Slide 57 text

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

    Slide 58

    Slide 58 text

    Block Level Link in HTML5

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

    me too.

     a { display: block; }

    Slide 59

    Slide 59 text

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

    Slide 60

    Slide 60 text

    Microdata

    Slide 61

    Slide 61 text

    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

    Slide 62

    Slide 62 text

    Microdata
    Ң݊ Bob Smith ʔཀ؃ʾே̣Ң Smithy. ˸ɨ݊Ңٙ࠯ࠫၣѧj www.example.com ҢИί Albuquerque (NM)dዄ΂ ʈ೻ࢪ ɓᔖ ͦۃ؂ਕ׵ ACME Corpf
    http://www.google.com/support/webmasters/bin/topic.py?topic=21997

    Slide 63

    Slide 63 text

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

    Slide 64

    Slide 64 text

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

    Slide 65

    Slide 65 text

    No Browser Supports Now

    Slide 66

    Slide 66 text

    Web Forms 2.0

    Slide 67

    Slide 67 text

    Where is 1.0 ?

    Slide 68

    Slide 68 text

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

    Slide 69

    Slide 69 text

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

    Slide 70

    Slide 70 text

    New Input Types url email tel number range color date

    Slide 71

    Slide 71 text

    Slide 72

    Slide 72 text

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

    Slide 73

    Slide 73 text

    And One More Type search

    Slide 74

    Slide 74 text

    New Form Elements

    Slide 75

    Slide 75 text

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

    Slide 76

    Slide 76 text

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

    Slide 77

    Slide 77 text

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

    Slide 78

    Slide 78 text

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

    Slide 79

    Slide 79 text

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

    Slide 80

    Slide 80 text

    • dropped !

    Slide 81

    Slide 81 text

    Q&A