Html5

Takashi Kikuchi 2009.10.10 WCAN

• Web Directions East • ASCII • •

Working Draft

HTML • 1991 Tim Berners Lee • 1993 HTML1.0 • 1995 HTML2.0 • 1997 HTML3.2 (W3C) • 1999 HTML4.01 (W3C)

XHTML • 2000 XHTML1.0 • 2001 XHTML1.1 • 2001 XHTML2.0 • 2009 XHTML2.0

Web XHTML+ SVG+ SMIL+XForm Brendan Eich, June 2004

XHTML2 ??

HTML5 • 2003 Opera CTO Håkom Lie Web Forms2 • 2004. 04 Web Applications 1.0 • 2004. 06 WHATWG Opera, Safari, Mozilla • 2007.03 W3C HTML5 WG • 2009.10 Last call

HTML5 Web Forms2 + Web Application1.0

? Ian Hickson = “Hixie” ( Opera Google)

HTML5 • •

HTML5 HTML XML

HTML5 XHTML <meta ..... content="text/html; charset=utf-8" /> HTML XML

HTML5 • <img src=logo.png alt=”” /> • <img src=‘logo.png’ alt=`` /> • <img src=”logo.png” alt=”” >

HTML5 • <a><li>HTML5 </a><li>

93% invalid

HTML5 !!

HTML5 DOM

HTML5 Document Object Model

HTML5 IE5.0

HTML5 <div> Document <h1>DOM</h1> <ul> div <li>DOM </li> ul h1 </ul> </div> li

HTML5 overview Web Workers Geolocation API HTML5 Web Socket Web Database Web Storage

Doctype, DTD, charset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> </body> </html>

Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">

Doctype <!DOCTYPE html>

charset <meta http-equiv="content-type" content="text/html;charset=utf-8" />

charset <meta charset=”utf-8" /> or <meta charset=”utf-8">

Doctype, DTD, charset <!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> </head> <body> </body> </html>

XHTML1.0 <div id=”header”> <div id=”navigation”> <div id=”main”> <div id=”aside”> <div id=”footer”>

HTML5 <header> <nav> <section id=”main”> <aside> <footer>

<header> <header> <h1>allWeb </h1> <p>allWeb </p> </header>

<small> <footer> <small> &copy Web Directions East LLC </small> </footer>

validator.nu

HTML5 reset.css header,nav,hgroup,footer,se ction,article{display: block;}

html5.js

CSS3 Difference does not mean broken. “Walls Come Tumbling Down”-Andy Clarke

CSS3 HANDCRAFTED CSS Dan Cederholm

vender preﬁx • -webkit- • -atsc- • -moz- • -wap- • -ms- • -o- • -khtml- • mso-

text-shadow

text-shadow text-shadow{} -webkit-text-shadow{} -moz-text-shadow{}

text-shadow text-shadow: #bbb 2px 2px 2px;

RGBa rgba(55, 146, 179, 0.8) rgba( , , , )

Gradient

Gradient background-image: -moz-linear-gradient( bottom, top, from(rgba(81, 70, 61,1)), color-stop(50%, rgb(107, 92, 79,.7)), to(rgba(81, 70, 61,.8)));

transition

webkit-transition • 0.4 • 0.2 •

template layout module

template layout module body { display: "aaa" "bcd" } #head{ position: a } #nav{ position: b } #adv{ posiiton: c } #body { position: d }

Web Forms

webkit-transition • <input id=form-1 name=haha type=text autofocus required> • <input id=form-5 name=email type=email placeholder="email please"> • <input id=form-4 name=shoesize type=number min=18 max=25>

HTML5 & CSS3

Flickr • http://www.ﬂickr.com/photos/theamarand/3622334673/

11 11 13 Web “ Web ”

• Twitter @wdeast Andy Clarke

http://east.webdirections.org	145
http://localhost	78
http://www.slideshare.net	4

Html5

by satoshi kikuchi

Accessibility

Upload Details

Usage Rights

3 Embeds 227

Statistics

Html5 Presentation Transcript