Vos résultats de recherche

    HTML5

    Démos HTML5

    Une collection de démos montrant les dernières technologies HTML.

    HTML5_Logo

    HTML5 est la dernière évolution des standards qui définissent HTML. Le terme HTML5 regroupe deux concepts différents :

    Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et comportements ; mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. Cet ensemble est parfois appelé HTML5 & Cie et souvent juste abrégé en HTML5.

    Conçu pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait des liens vers de nombreuses ressources sur les technologies HTML5, classés dans différents groupes d'après leur fonction.

    • Sémantique : vous permet de décrire précisément votre contenu.
    • Connectivité : vous permet de communiquer avec le serveur d'une façon nouvelle et innovante.
    • Hors-connexion & stockage : permet aux pages web de stocker des données sur le client et de fonctionner plus efficacement hors-connexion
    • Multimédia : Rendre la vidéo et l'audio des citoyens de premier plan sur l'Open Web
    • Rendu 2D/3D et effets : permet des options de présentation bien plus variés
    • Performance & intégration : offre une puissance bien plus grande et une meilleur utilisation du matériel de l'ordinateur
    • Accès aux périphériques : permet un usage varié des périphériques d'entrées et de sorties
    • Style : permet aux auteurs d'écrire des thèmes plus sophistiqués

    Sémantique

    Introduction à HTML5
    Cet article vous présente la manière d'utiliser HTML5 dans vos conceptions de sites et d'applications web.
    Sections et structure des documents avec HTML5
    Un aperçu de la nouvelle organisation des documents avec les nouveaux éléments de section en HTML5 : <section>, <article>, <nav>, <header>, <footer>, <aside> et <hgroup>.
    Utilisation de l'audio et de la video en HTML5
    Les éléments <audio> et <video> en HTML5 permet d'insérer dans vos pages et de manipuler de nouveaux contenus multimédia.
    Formulaires en HTML5
    Un aperçu des améliorations apportées aux formulaires en HTML5 : l'API de validation, de nouveaux attributs, de nouvelles valeurs pour l'attribut type de <input> et le nouvel élément <output>.
    Nouveaux éléments d'HTML5
    En plus des éléments de sections, de média et de formulaires, HTML5 ajoute de nombreux nouveaux éléments, comme <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, ou encore <meter>.
    Amélioration de <iframe>
    En utilisant les attributs sandbox, seamless, et srcdoc, les auteurs peuvent contrôler plus finement la sécurité et l'affichage de l'élément <iframe>.
    MathML
    Permet d'insérer directement dans les pages, des formules mathématiques.
    Parseur conforme à HTML5
    Le parseur, qui transforme les octets d'un document HTML en un DOM, a été étendu, et défini maintenant précisément le comportement à utiliser dans les différentes situations, même confronté à du code HTML incorrecte. Ceci lui permet d'être bien plus prévisible et interopérable avec les différents moteurs de navigateur.

    Connectivité

    Web Sockets
    Permet de créer une connexion permanente entre la page et le serveur, et de cette façon échanger des données non-HTML.
    Évènements envoyés par le serveur
    Permet à un serveur d'envoyer des évènements au client, au lieu du comportement habituel qui veut que le serveur envoie des données qu'en réponse à une demande du client.
    WebRTC
    RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou d'applications externes.

    Hors-connexion et Stockage

    Ressources hors connexion : l'Application Cache
    Firefox gère complètement la spécification des ressources hors connexion de HTML5.
    Évènement online et offline
    Firefox 3 gère les évènements online et offline du WHATWG, qui permettent aux applications web et aux extensions de détecter si une connexion à Internet est active ou non, ainsi que le moment où la connexion et la déconnexion se font.
    Stockage de session et persistance côté client du WHATWG (ou DOM Storage)
    Le stockage de session et la persistance côté client permet aux applications web de stocker des données structurées du côté du client.
    IndexedDB
    est un standard web pour stocker des volumes importants de données structurées dans le navigateur, et pour effectuer des recherches rapides dans ces données en utilisant des indexes.
    Utilisation de fichiers depuis des applications web
    La gestion de la nouvelle API File d'HTML5 a été ajoutée à Gecko, ce qui permet aux applications web d'accéder à des fichiers locaux sélectionnés par l'utilisateur. Cela comprend la sélection de plusieurs fichiers à l'aide du nouvel attribut multiple de l'élément HTML <input> type="file".

    Multimédia

    Utilisation de l'audio et de la video en HTML5
    Les éléments <audio> et <video> en HTML5 permet d'insérer dans vos pages et de manipuler de nouveaux contenus multimédia.
    WebRTC
    RTC veut dire Real-Time Communication (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou d'applications externes.
    Utiliser l'API Camera
    Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
    Track et WebVTT
    L'élément <track> permet de sous-titrer et de chapitrer. WebVTT est un format pour marqué du texte par rapport à une durée.

    3D, Graphiques et Effets

    Tutoriel Canvas
    Découvrez le nouvel élément <canvas> et comment dessiner des graphiques et d'autres objets dans Firefox.
    API de texte HTML5 pour les éléments <canvas>
    Les éléments <canvas> gèrent également l'API texte d'HTML5.
    WebGL
    WebGL amène le monde de la 3D au Web, avec une API très proche de OpenGL ES 2.0, et peut-être utilisé dans les éléments <canvas>.
    SVG
    Un format d'image vectoriel basé sur XML qui peut être inclus directement dans du HTML.

    Performance et Intégration

    Web Workers
    Permet de déléguer l'interprétation du JavaScript sur des fils en arrière plan, et évite ainsi le ralentissement des évènements d’interaction.
    XMLHttpRequest Niveau 2
    Permet de récupérer de manière asynchrone certaines parties d'une page. Ceci permet d'afficher du contenu dynamique, s'adaptant en fonction du temps et des actions de l'utilisateur. Il s'agit de la technologie derrière l'AJAX.
    Moteur JavaScript à compilation JIT (juste à temps)
    La nouvelle génération de moteur JavaScript sont bien plus puissant, et apportent une plus grande performance.
    API Historique
    Permet la manipulation de l'historique du navigateur. Ceci est particulièrement utile sur les pages qui chargent du contenu dynamiquement.
    L'attribut contentEditable : transformer un site web en un wiki !
    HTML5 a standardisé l'attribut contentEditable. Apprenez-en plus sur cette fonctionnalité.
    Glisser et déposer
    L'API de glisser et déposer HTML5 (drag and drop) permet de faire glisser des éléments au sein et entre des sites web. C'est aussi une API plus simple utilisable par les extensions et applications basées sur Mozilla.
    Gestion du focus en HTML
    Les nouveaux attributs HTML5 activeElement et hasFocus sont gérés.
    Gestionnaires de protocoles web
    Il est à présent possible d'enregistrer des applications web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
    requestAnimationFrame
    Permet de contrôler le rendu des animations et ainsi obtenir une performance optimale.
    API Plein écran
    Contrôle l'utilisation de la totalité de l'écran pour afficher une page web ou une application, sans l'interface du navigateur
    API Verrouillage de la souris
    Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.
    Évènement online et offline
    Pour construire de bonnes applications web capables de fonctionner hors connexion, vous avez besoin de savoir quand votre application est déconnectée du réseau. Et forcément, vous avez aussi besoin de savoir quand votre application est de nouveau connectée au réseau.

    Accès aux périphériques

    Utiliser l'API Camera
    Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.
    Évènements tactiles
    Des gestionnaires pour réagire aux évènements créés par un utilisateur qui touche un écran tactile.
    Utilisation de la Geolocalisation
    Permet au navigateur de situer l'utilisateur en utilisant la geolocalisation.
    Détection de l'orientation de l'appareil
    Permet de savoir si l'appareil sur lequel tourne le navigateur change d'orientation. Cela peut être utilisé comme un périphérique d'entrée (par exemple, un jeu peut réagir selon la position de l'appareil), ou pour adapter la mise en page d'après l'orientation de l'appareil (portrait ou paysage).
    API Verrouillage de la souris
    Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.

    Style

    CSS a été enrichi pour styler les éléments d'une manière beaucoup plus avancée. Ceci est souvent défini comme le CSS3, bien que CSS n'est plus une spécification monolithique, et les différent modules ne sont pas tous au niveau 3 : certains sont au niveau 1 et d'autres au niveau 4, avec tous les niveaux intermédiaires de couverts.

    Nouveaux styles d'arrière-plan
    Il est maintenant possible créer une ombre pour une boîte en utilisant box-shadow, et de définir plusieurs arrière-plans.
    Des bordures plus classes
    Il est maintenant non seulement possible d'utiliser des images pour styler les bordure en utilisant border-image, mais aussi de faire des bords arrondies grâce à la propriété border-radius.
    Animer vos styles
    En utilisant les Transitions CSS pour animer entre différents états, ou en utilisant les Animations CSS pour animer une partie de la page sans un évènement déclencheur, vous pouvez maintenant gérer les mouvements sur votre page.
    Amélioration de la typographie
    Les auteurs ont un bien meilleur contrôle sur leur typographie. Ils peuvent contrôler text-overflow et la césure automatique. Ils peuvent rajouter une ombre, et des décorations plus fines. Des polices personnalisées peuvent être utilisées grâce @font-face.
    Nouvelles options de mise en page
    Pour améliorer la flexibilité de vos designs, deux nouvelles options de mise en page ont été ajoutées : Colonnes CSS et boîtes flexibles CSS.

     

    Pièces jointes

    Fichier Taille Date Joint par
    HTML5_Logo_128.png
    2223 octets 2011-12-20 00:36:08 Jay
    HTML5 Semantics
    4932 octets 2012-08-20 05:08:25 teoli
    HTML5 Styling
    3991 octets 2012-08-20 05:08:50 teoli
    HTML5 Performance
    11330 octets 2012-08-20 05:09:06 teoli
    HTML5 Offline storage
    9223 octets 2012-08-20 05:09:32 teoli
    HTML5 Multimedia
    2159 octets 2012-08-20 05:09:54 teoli
    HTML5 Device Access
    3103 octets 2012-08-20 05:10:17 teoli
    HTML5 Connectivity
    3920 octets 2012-08-20 05:10:41 teoli
    HTML5 3D Effects
    4474 octets 2012-08-20 05:11:16 teoli

    Étiquettes et contributeurs liés au document

    Étiquettes :
    Contributeurs ayant participé à cette page : tregagnon, Dwchiang, Flaburgan, leoetlino, DavidWalsh, vigia122, BenoitL, teoli, rd6137, MatthieuMaler
    Dernière mise à jour par : tregagnon,