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:
             ...
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
“The WebM project is dedicated
Prochain SlideShare
Chargement dans…5
×

“The WebM project is dedicated An Introduction To HTML5

24 022 vues

Publié le

“The WebM project is dedicated to developing a
high-quality, open video format for the web that
is freely available to everyone”

Publié dans : Technologie

×