Html5
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
2 Favorites
-
Sho Ito, Software Engineer at Hokuriu Engineer Group, FxUG(Flex User Group), FITEA, favorited this 23 hours ago
-
rikishun
favorited this 2 weeks ago
Html5 - Presentation Transcript
- Takashi Kikuchi 2009.10.10 WCAN
- • Web Directions East • ASCII • •
- HTML5
- HTML5
- HTML5
- 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 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
- HTML5 overview Web Workers Geolocation API HTML5 Web Socket Web Database Web Storage
- HTML5
- 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>
- HTML5 <header> <nav> <section id=”main”> <aside> <footer>
- <header> <header> <h1>allWeb </h1> <p>allWeb </p> </header>
- <nav> <nav id=”global”> <h1> </h1> <ul> <li> </li> <li> </li> </ul> </nav>
- <section> <section> <h1>HTML5 </h1> <p>HTML5 </p> </section>
- <article> <article> <header> <h1>DOM </h1> </header> <p>DOM HTML5 </p> <footer> </footer> </article>
- <aside> <aside> <section> <h1> </h1> </section> </aside>
- <footer> <footer> <ul> <li> </li> <li> </li> </ul> </footer>
- <small> <footer> <small> © Web Directions East LLC </small> </footer>
- <img /> <img alt=”” src=”” />
- validator.nu
- HTML5
- HTML5
- HTML5 reset.css header,nav,hgroup,footer,se ction,article{display: block;}
- html5.js <!--[if lte IE 8]> <script src="html5.js" type="text/ javascript"></script> <![endif]-->
- CSS3
- CSS3 Difference does not mean broken. “Walls Come Tumbling Down”-Andy Clarke
- CSS3 HANDCRAFTED CSS Dan Cederholm
- vender prefix • -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 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)));
- 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)));
- 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
- 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.flickr.com/photos/theamarand/3622334673/
- 11 11 13 Web “ Web ”
- • Twitter @wdeast Andy Clarke
+
382 views, 2 favs, more stats
This presentation is conducted in Japanese. Base th more
More info about this document
© All Rights Reserved
Go to text version
- Total Views 382
- 270 on SlideShare
- Comments 0
- Favorites 2
- Downloads 13
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Apple Keynote
0 comments
Post a comment