Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
An Introduction to
     HTML5
Web Hypertext Application Technology Working Group
                         -
                   WHATWG
Web Hypertext Application Technology Working Group
                         -
                   WHATWG
What is HTML5?
Backwards compatibility
Progressive enhancement
<!DOCTYPE html>
HTML or XHTML syntax?
<DIV>A monkey</DIV>
<p id=john>John’s P</p>

<input type=text>
<input type="text">
<input type="text" />
<DIV>A monkey</DIV>
<p id=john>John’s P</p>

<input type=text>
<input type="text">
<input type="text" />
As XHTML



<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">


MUST be application/xhtml+xml or applicati...
<audio>


  <aside>       <nav>
                           <section>

           <hgroup>      <article>
<figure>
        ...
<input type="color">      <input type="range">


<input type="number">     <input type="email">

<input type="time">
     ...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 example</title>
</head>

<body>

    <div id="co...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 example</title>
</head>
<header role="banner">
  <h1>HTML5 example</h1>
  <p>
    A page with valid simple
    HTML5 markup complemented
    with ...
<nav role="navigation">
  <ul>
     <li>
       <a href="http://getfirefox.com">
          Download Firefox
       </a>
  ...
<article id="main" role="main">
   <section id="main-content">
       <header>
          <hgroup>
              <h2>A titl...
<footer id="page-footer" role="contentinfo">
  Created by <a href="http://robertnyman.com/">Robert Nyman</a>
</footer>
<aside aria-live="polite" aria-relevant="additions" aria-atomic="true">
   Some sidebar content
</aside>
WAI-ARIA Authoring Practices 1.0
              Live Regions
                   -
http://www.w3.org/WAI/PF/aria-practices/
...
Video
<video src="swedish-flag.ogv"></video>
<video src="swedish-flag.ogv" controls
  width="320" height="240">
</video>
<video controls>
  <source src="swedish-flag.mp4">
  <source src="swedish-flag.ogv">
  <p>
    Sorry, your web browser doe...
<video controls>
    <source src="http://robertnyman.com/video/swedish-flag.mp4">
    <source src="http://robertnyman.com/...
“The WebM project is dedicated to developing a
high-quality, open video format for the web that
is freely available to eve...
Canvas
<canvas id="my-canvas" width="200" height="200">
    I am canvas
</canvas>
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");
var canvas = document.getElementById("my-canvas"),
    context = canvas.getContext("2d");

context.fillStyle = "#f00";
con...
var canvas2 = document.getElementById("my-canvas-2"),
    context2 = canvas2.getContext("2d");

context2.fillStyle = "#0f0...
var canvas3 = document.getElementById("my-canvas-3"),
    context3 = canvas3.getContext("2d");

context3.beginPath();
cont...
var canvas4 = document.getElementById("my-canvas-4"),
    context4 = canvas4.getContext("2d");

context4.fillStyle = "#f00...
var canvas5 = document.getElementById("my-canvas-5"),
    context5 = canvas5.getContext("2d"),
    img = document.createEl...
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAADICAYAAAA0n5+2AAAgAElEQVR4Acy925Icu5K0xz6QXGvPmEnv/1a60iPoRhcyk2n2XmQf...
HTML5 Canvas for Internet Explorer
                -
          explorercanvas
Geolocation
<script>
    if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
        ...
Offline web applications

     Drag & drop
                           History


Cross-document messaging
                 ...
Sjoerd Visscher - HTML5 Shiv
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 IE fix</title>
    <script>document.createElemen...
Remy Sharp - HTML5.js
Robert Nyman
                                                            robertnyman.com/speaking/
Pictures:
             ...
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source
Prochain SlideShare
Chargement dans…5
×

<video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source An Introduction To HTML5

24 026 vues

Publié le

<video controls>
<source src="http://robertnyman.com/video/swedish-flag.mp4">
<source src="http://robertnyman.com/video/swedish-flag.ogv">
<object width="425" height="340" type="application/x-shockwave-flash"
data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf">
<param name="movie" value="http://pics.robertnyman.com/ria/
ShizVidz-2010012201.swf">
<param name="allowFullScreen" value="true">
<param name="flashVars"
value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b
nltYW4=">
</object>
<p>Sorry, your web browser doesn't support, well, anything...</p>
</video>

Publié dans : Technologie

×