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
• ...
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>
           ...
HTML5 overview

Web Workers                Geolocation API
                   HTML5
 Web Socket                Web Databas...
HTML5 overview

Web Workers                Geolocation API
                   HTML5
 Web Socket                Web Databas...
HTML5
Doctype, DTD, charset
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/...
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...
XHTML1.0
       <div id=”header”>

      <div id=”navigation”>



<div id=”main”>          <div id=”aside”>



       <div...
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>              ...
<aside>

<aside>
<section>
<h1>         </h1>
</section>
</aside>
<footer>
<footer>
<ul>
<li>        </li>
<li>                </li>
</ul>
</footer>
<small>
<footer>
<small>
&copy 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,....
Gradient

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

background-image: -moz-linear-gradient(
bottom, top,
from(rgba(81, 70, 61,1)),
color-stop(50%, rgb(107, 92, 79,....
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...
Web Forms
webkit-transition
• <input id=form-1 name=haha
  type=text autofocus required>
• <input id=form-5 name=email
  type=email ...
HTML5 & CSS3
Flickr


•   http://www.flickr.com/photos/theamarand/3622334673/
11    11         13
               Web

“   Web         ”
• Twitter   @wdeast
               Andy Clarke
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Upcoming SlideShare
Loading in …5
×

Html5

4,680 views

Published on

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,680
On SlideShare
0
From Embeds
0
Number of Embeds
297
Actions
Shares
0
Downloads
50
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Html5

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

×