Your SlideShare is downloading. ×
Html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5

4,235
views

Published on

This presentation is conducted in Japanese. Base theme is HTML5 and CSS3 history and techniques.

This presentation is conducted in Japanese. Base theme is HTML5 and CSS3 history and techniques.


0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,235
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
47
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Takashi Kikuchi 2009.10.10 WCAN
  • 2. • Web Directions East • ASCII • •
  • 3. HTML5
  • 4. HTML5
  • 5. HTML5
  • 6. Working Draft
  • 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
  • 23. HTML5 Document Object Model
  • 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">
  • 31. Doctype <!DOCTYPE html>
  • 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>
  • 37. HTML5 <header> <nav> <section id=”main”> <aside> <footer>
  • 38. <header> <header> <h1>allWeb </h1> <p>allWeb </p> </header>
  • 39. <nav> <nav id=”global”> <h1> </h1> <ul> <li> </li> <li> </li> </ul> </nav>
  • 40. <section> <section> <h1>HTML5 </h1> <p>HTML5 </p> </section>
  • 41. <article> <article> <header> <h1>DOM </h1> </header> <p>DOM HTML5 </p> <footer> </footer> </article>
  • 42. <aside> <aside> <section> <h1> </h1> </section> </aside>
  • 43. <footer> <footer> <ul> <li> </li> <li> </li> </ul> </footer>
  • 44. <small> <footer> <small> &copy Web Directions East LLC </small> </footer>
  • 45. <img /> <img alt=”” src=”” />
  • 46. validator.nu
  • 47. HTML5
  • 48. HTML5
  • 49. HTML5 reset.css header,nav,hgroup,footer,se ction,article{display: block;}
  • 50. html5.js <!--[if lte IE 8]> <script src="html5.js" type="text/ javascript"></script> <![endif]-->
  • 51. CSS3
  • 52. CSS3 Difference does not mean broken. “Walls Come Tumbling Down”-Andy Clarke
  • 53. CSS3 HANDCRAFTED CSS Dan Cederholm
  • 54. vender prefix • -webkit- • -atsc- • -moz- • -wap- • -ms- • -o- • -khtml- • mso-
  • 55. text-shadow
  • 56. text-shadow text-shadow{} -webkit-text-shadow{} -moz-text-shadow{}
  • 57. text-shadow text-shadow: #bbb 2px 2px 2px;
  • 58. RGBa
  • 59. RGBa rgba(55, 146, 179, 0.8) rgba( , , , )
  • 60. Gradient
  • 61. 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)));
  • 62. 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)));
  • 63. 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)));
  • 64. transition
  • 65. webkit-transition • 0.4 • 0.2 •
  • 66. template layout module
  • 67. template layout module
  • 68. template layout module body { display: "aaa" "bcd" } #head{ position: a } #nav{ position: b } #adv{ posiiton: c } #body { position: d }
  • 69. Web Forms
  • 70. 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>
  • 71. HTML5 & CSS3
  • 72. Flickr • http://www.flickr.com/photos/theamarand/3622334673/
  • 73. 11 11 13 Web “ Web ”
  • 74. • Twitter @wdeast Andy Clarke

×