第五世代型超越式文本標記語言

othree @ HappyDesigner Meetup 4

Whois

Name
othree
Employee
mightHappyDesigner
Site
http://blog.othree.net
Email
Photo

W3C

HTML 年表

HTML
HTML 2
HTML 3(draft)
HTML 3.2
HTML 4
HTML 4.01
XHTML 1
XHTML 1.1

XHTML 2
(第二世代可合體型超越式文本標記語言)

apple

mozilla

opera

WHATWG

HTML 5
(第五世代型超越式文本標記語言)

W3C

HTML 5 完成預計

HTML
HTML 2
HTML 3(draft)
HTML 3.2
HTML 4
HTML 4.01
XHTML 1
XHTML 1.1
HTML 5

後十年

We have to write big test suites and that’s going to take a long time. That’s what the last 10 years of the timetable are about.

Ian Hickson

Implement First

語法差異

DocType


<!DOCTYPE HTML>

簡單、好記

Encoding


<meta charset="UTF-8"/>

簡單、好記

XHTML 5 ?

HTML 5
text/html
XHTML 5
application/xhtml+xml
application/xml

關閉標籤

HTML 5
<img src="" alt="" >
XHTML 5
<img src="" alt="" />

屬性

HTML 5
<input readonly value=1 >
<img src=blah.png alt >
XHTML 5
<input readonly="" value="1" />

<html>, <head>, <body>

可省略

合法的 HTML 4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<h1>I'm valid !</h1>

合法的 HTML 5


<!DOCTYPE HTML>
<h1>I'm valid !</h1>

保持簡單

但不是合法的 XHTML 5

文件結構

常見網頁配置

表格排版


<table>
    <tr>
        <td colspan="2">A Big Title</td>
    </tr>
    <tr>
        <td>Navigator</td>
        <td rowspan="2">This is Sidebar</td>
    </tr>
    <tr>
        <td>Main Content</td>
    </tr>
    <tr>
        <td colspan="2">Footer</td>
    </tr>
</table>

單欄配置

#%^*$%.....


<table>
    <tr>
        <td>A Big Title</td>
    </tr>
    <tr>
        <td>Navigator</td>
    </tr>
    <tr>
        <td>Main Content</td>
    </tr>
    <tr>
        <td>Links, RSS, Copyright</td>
    </tr>
    <tr>
        <td>Footer</td>
    </tr>
</table>

巴哈姆特

118 119 tables

CSS 排版


<div id="header">A Big Title</div>
<div id="navigator">Navigator</div>
<div id="content">Main Content</div>
<div id="sidebar">Links, RSS, Copyright</div>
<div id="footer">Footer</div>

常見網頁配置

CSS 排版


#navigator { float: left; width: 68%; }
#contet { clear: left; float: left; width: 68%; }
#sidebar { float: right; width: 30%; }
#footer { clear: both; }

側邊欄?

現在:使用有意義的 id, class


<div id="header">a big title</div>
<div id="navigator">navigator</div>
<div id="content">main content</div>
<div id="sub-content">links, rss, copyright</div>
<div id="something-else">footer</div>

有語意的標籤


<header>A Big Title</header>
<nav>Navigator</nav>
<article>Kero</article>
<article>Giro</article>
<aside>Links, RSS, Copyright</aside>
<footer>Something else</footer>

新標籤!!

<header>
標題資訊
<footer>
其他資訊
<nav>
導覽列
<aside>
你會想放到側邊欄的東西
<article>
不只是文章

Article

  1. 部落格文章
  2. 訪客留言
  3. 討論區文章
  4. 報章雜誌文章

網頁作為 Feed !!

RSS


<item>
    <title>nginx on windows</title>
    <description>&lt;p&gt;這兩天想說在windows上裝個 ......</description>
    <link>http://feeds.feedburner.com/~r/othree/~3/441844548/</link>
    <category>software</category>
    <pubDate>2008-11-04 15:45</pubDate>
</item>

hAtom via microformats


<div class="hfeed"> <div class="hentry">
    <h2 class="entry-title"><a href="http://feeds.feedburner.com/~r/othree/~3/441844548/" rel="bookmark">nginx on windows</a></h2>
    <div class="entry-content">
        <p>這兩天想說在windows上裝個 ......</p>
    </div>
    <dl>
        <dt>pubDate</dt>
        <dd><abbr title="2008-11-04 15:45">2008-11-04 15:45</abbr></dd>
        <dt>Category</dt>
        <dd><a href="http://blog.othree.net/log/software/" rel="tag">software</a></dd>
        <dt>Author</dt> <dd class="author vcard">othree</dd>
    </dl>
</div> </div>

HTML as FEED


<article>
    <header>
        <h2><a href="http://feeds.feedburner.com/~r/othree/~3/441844548/">nginx on windows</a></h2>
        <dl>
            <dt>pubDate</dt>
            <dd><time datetime="2008-11-04 15:45">2008-11-04 15:45</time></dd>
            <dt>Category</dt> <dd>software</dd>
            <dt>Author</dt> <dd>othree</dd>
        </dl>
    </header>
    <p>這兩天想說在windows上裝個 ......</p>
</article>

某天, 也許吧....

XHTML 2 如何處理?

role 屬性

標題、段落

HTML 4


<h1>This is a top level heading</h1>
<p>....</p>
<p>....</p>
<h2>This is a second-level heading</h2>
<p>....</p>
<p>....</p>
<h2>This is another second-level heading</h2>
<p>....</p>
<h3>This is a third-level heading</h3>
<p>....</p>

XHTML 2


<h>This is a top level heading</h>
<p>....</p>
<section>
    <p>....</p>
    <h>This is a second-level heading</h>
    <p>....</p>
</section>
<section>
    <p>....</p>
    <h>This is another second-level heading</h>
    <p>....</p>
    <section>
        <h>This is a third-level heading</h>
        <p>....</p>
    </section>
</section>

HTML 5


<h1>This is a top level heading</h1>
<p>....</p>
<section>
    <p>....</p>
    <h2>This is a second-level heading</h2>
    <p>....</p>
</section>
<section>
    <p>....</p>
    <h2>This is another second-level heading</h2>
    <p>....</p>
    <section>
        <h3>This is a third-level heading</h3>
        <p>....</p>
    </section>
</section>

相容第四世代


<h1>This is a top level heading</h1>
<p>....</p>

    <p>....</p>
    <h2>This is a second-level heading</h2>
    <p>....</p>


    <p>....</p>
    <h2>This is another second-level heading</h2>
    <p>....</p>

        <h3>This is a third-level heading</h3>
        <p>....</p>

 

Dialog

Dialog


<dialog>
    <dt>陌生人</dt><dd>哈囉</dd>
    <dt>藍藍路</dt><dd>請問你是?</dd>
    <dt>陌生人</dt><dd>就是之前那個</dd>
    <dt>藍藍路</dt><dd>之前那個??</dd>
    <dt>陌生人</dt><dd>您似乎忘記啦..</dd>
    <dt>藍藍路</dt><dd>就是忘了才用問的</dd>
    <dt>陌生人</dt><dd>我是跟你問虛擬主機的人阿..</dd>
    <dt>藍藍路</dt><dd>很多人問我</dd>
    <dt>陌生人</dt><dd>就是其中一個阿..</dd>
</dialog>

行內元素

b, i

b
The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance
i
The i element represents a span of text in an alternate voice or mood

b, i, strong, em

b
The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance
i
The i element represents a span of text in an alternate voice or mood
strong
The strong element represents strong importance for its contents.
em
The em element represents stress emphasis of its contents.

今夜のご注文は、どっち?

Don't Worry

mark


<blockquote cite="http://blogs.techrepublic.com.com/programming-and-development/?p=718">
    <p>We have to write big <mark>test suites</mark>
    and that’s going to take a long time.  That's what the <mark>
    last 10 years</mark> of the timetable are about.</p>
</blockquote>
<cite>Ian Hickson</cite>

meter


<meter>75%</meter>
<meter>750‰</meter>
<meter>3/4</meter>
<meter min="0" max="20" value="12">12cm</meter>

time


<time datetime="2006-09-23">a Saturday</time>
<time datetime="2006-09-24 05:00 -7">5am, next morning</time>
<time>08:00</time>

ruby

not on rails

月の繭

(やま)() (つき)滿()
(いき)づくあなたの(もり)
(なつ)()(さあ)びて(ねむ)
(いと)おしい (よこ)(がお)
おぼろな この(ほし)
(だい)()(ぎん)(なみだ)
(まる)たる(まゆ)たちは
(なな)たび()をかえる

Only <ruby>, <rt>, <rp>

no <rbc>, <rtc>, <rb>

Media

Embed

大家都用過

不看參考自己寫?

Embed


<embed src="/support/flash/ts/documents/myflashmovie.swf" 
    quality="high" bgcolor="#ffffff" width="550" height="400"
    name="mymoviename" align="" 
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

Object

Object


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="550" height="400" id="mymoviename">
	<param name="movie" value="myflashmovie.swf">
	<param name="quality" value=high>
	<param name="bgcolor" value=#ffffff>
</object>

Combined


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="550" height="400" id="mymoviename">
	<param name=movie value="myflashmovie.swf">
	<param name=quality value="high">
	<param name=bgcolor value="#ffffff">
	<embed src="/support/flash/ts/documents/myflashmovie.swf" 
	quality="high" bgcolor="#ffffff" width="550" height="400"
	name="mymoviename" align="" type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/go/getflashplayer">
	</embed>
</object>

Video

<video src="42.ogg">替代內容</video>

Audio

<audio src="42.ogg">替代內容</audio>

APIs

play(), pause() ...etc

不願面對的真相


<video src="42.ogg">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
    width="550" height="400" id="mymoviename">
        <param name=movie value="myflashmovie.swf">
        <param name=quality value="high">
        <param name=bgcolor value="#ffffff">
        <embed src="/support/flash/ts/documents/myflashmovie.swf" 
        quality="high" bgcolor="#ffffff" width="550" height="400"
        name="mymoviename" align="" type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer">
            替代內容
        </embed>
    </object>
</video>

Canvas

Use javascript to paint.

DEMO

Web Forms 2.0

Where is 1.0 ?

新欄位類別

  1. email
  2. url
  3. date
  4. time
  5. ...etc

表單檢查

  1. required
  2. pattern

Opera Supports

Opera Supports

Output


<input name="a" type="number" step="any" value="0"> *
<input name="b" type="number" step="any" value="0"> =
<output name="result" onforminput="value = a.value * b.value">
    0</output>

DEMO

Browser APIs

A vocabulary and associated APIs for HTML and XHTML

Web Applications 1.0

getElementsByClassName()

Drag & Drop

ondragstart, ondrop, ondragenter, ondragover ...etc

DEMO

Drag & Drop

Drop Zone 1

Drop Zone 2

History

RSH
(Real Simply History)

YUI, jQuery History, Dojo ...etc

History Interface

pushState()
onpopstate

Storage

sessionStorage


sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
sessionStorage.removeItem(key);

sessionStorage

本投影片換頁了幾次: 0

作弊加一萬

databaseStorage

  1. SQLite
  2. Bye Bye Google Gears ?

DEMO

Offline Application

Bye Bye Google Gears ._./

Google Gears

  • Database
  • LocalServer
  • WorkerPool

HTML 5 的離線網路應用程式

  • applicationCache
  • databaseStorage

Firefox 3 支援 applicationCache

但是不支援 databaseStorage ...

現在就想用?

Browser Supports

  • Firefox 3
  • Safari 3
  • Opera 9.x

IE?


var tags = ['header', 'section', 'footer', 'figure', 'dialog', 'article'];
for (var i = 0; i < tags.length; i++ ) {
    document.createElement(tags[i]);
}

<問與答 時間="0"/>

參考文獻

  1. HTML 5
  2. The Web Developer’s Guide to HTML 5
  3. Fronteers 2008 — HTML5 (Presentation)
  4. HTML 5: Features you want desperately but still can't use
  5. Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か?
  6. Macromedia Flash OBJECT and EMBED tag syntax
  7. Offline resources in Firefox

素材來源

  1. HTML Video Example
  2. Blank Canvas
  3. Expensive Noise: アイコン
  4. 3Quarks - Background Pattern
  5. 請用最快的方法讓我想到你 : 藍藍路 黑暗部落格