Html5
•Als KEY, PDF herunterladen•
5 gefällt mir•1,595 views
This presentation is conducted in Japanese. Base theme is HTML5 and CSS3 history and techniques.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Html5
Ähnlich wie Html5 (20)
Mehr von Satoshi Kikuchi
Mehr von Satoshi Kikuchi (18)
Html5
- 1. Takashi Kikuchi 2009.10.10 WCAN
- 2. • Web Directions East • ASCII • •
- 3. HTML5
- 4. HTML5
- 5. HTML5
- 7. HTML • 1991 Tim Berners Lee • 1993 HTML1.0 • 1995 HTML2.0 • 1997 HTML3.2 (W3C) • 1999 HTML4.01 (W3C)
- 8. XHTML • 2000 XHTML1.0 • 2001 XHTML1.1 • 2001 XHTML2.0 • 2009 XHTML2.0
- 9. Web XHTML+ SVG+ SMIL+XForm Brendan Eich, June 2004
- 10. XHTML2 ??
- 11. 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
- 12. HTML5 Web Forms2 + Web Application1.0
- 13. ? Ian Hickson = “Hixie” ( Opera Google)
- 14. HTML5 • •
- 15. HTML5 HTML XML
- 16. HTML5 HTML XML
- 17. HTML5 XHTML <meta ..... content="text/html; charset=utf-8" /> HTML XML
- 18. HTML5 • <img src=logo.png alt=”” /> • <img src=‘logo.png’ alt=`` /> • <img src=”logo.png” alt=”” >
- 19. HTML5 • <a><li>HTML5 </a><li>
- 20. 93% invalid
- 21. HTML5 !!
- 22. HTML5 DOM
- 24. HTML5 IE5.0
- 25. HTML5 <div> Document <h1>DOM</h1> <ul> div <li>DOM </li> ul h1 </ul> </div> li
- 26. HTML5 overview Web Workers Geolocation API HTML5 Web Socket Web Database Web Storage
- 27. HTML5 overview Web Workers Geolocation API HTML5 Web Socket Web Database Web Storage
- 28. HTML5
- 29. 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>
- 30. Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
- 32. charset <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- 33. charset <meta charset=”utf-8" /> or <meta charset=”utf-8">
- 34. Doctype, DTD, charset <!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> </head> <body> </body> </html>
- 35. XHTML1.0 <div id=”header”> <div id=”navigation”> <div id=”main”> <div id=”aside”> <div id=”footer”>
- 36. HTML5 <header> <nav> <section id=”main”> <aside> <footer>
- 38. HTML5 <header> <nav> <section id=”main”> <aside> <footer>
- 39. <header> <header> <h1>allWeb </h1> <p>allWeb </p> </header>
- 40. <nav> <nav id=”global”> <h1> </h1> <ul> <li> </li> <li> </li> </ul> </nav>
- 41. <section> <section> <h1>HTML5 </h1> <p>HTML5 </p> </section>
- 42. <article> <article> <header> <h1>DOM </h1> </header> <p>DOM HTML5 </p> <footer> </footer> </article>
- 43. <aside> <aside> <section> <h1> </h1> </section> </aside>
- 44. <footer> <footer> <ul> <li> </li> <li> </li> </ul> </footer>
- 45. <small> <footer> <small> © Web Directions East LLC </small> </footer>
- 46. <img /> <img alt=”” src=”” />
- 47. validator.nu
- 48. HTML5
- 49. HTML5
- 52. html5.js <!--[if lte IE 8]> <script src="html5.js" type="text/ javascript"></script> <![endif]-->
- 53. CSS3
- 57. CSS3 Difference does not mean broken. “Walls Come Tumbling Down”-Andy Clarke
- 58. CSS3 HANDCRAFTED CSS Dan Cederholm
- 59. vender prefix • -webkit- • -atsc- • -moz- • -wap- • -ms- • -o- • -khtml- • mso-
- 60. text-shadow
- 62. text-shadow text-shadow: #bbb 2px 2px 2px;
- 64. RGBa
- 65. RGBa rgba(55, 146, 179, 0.8) rgba( , , , )
- 67. Gradient
- 68. 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)));
- 69. 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)));
- 70. 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)));
- 72. transition
- 73. webkit-transition • 0.4 • 0.2 •
- 77. template layout module body { display: "aaa" "bcd" } #head{ position: a } #nav{ position: b } #adv{ posiiton: c } #body { position: d }
- 79. Web Forms
- 80. 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>
- 82. HTML5 & CSS3
- 83. Flickr • http://www.flickr.com/photos/theamarand/3622334673/
- 85. 11 11 13 Web “ Web ”
- 86. • Twitter @wdeast Andy Clarke