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.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

    Html5 - Presentation 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

    + satoshi kikuchisatoshi kikuchi, 1 month ago

    custom

    382 views, 2 favs, 1 embeds 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
      • 112 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 13
    Most viewed embeds
    • 112 views on http://east.webdirections.org

    more

    All embeds
    • 112 views on http://east.webdirections.org

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Tags