html5 2
DESCRIPTION
résumé Html5TRANSCRIPT
HTML5, les nouvelles balisesMOHAMED BOUHAMED
2
HTML5 : les nouvelles balises
Structure de page web :
<header> <nav> <section> <article> <aside> <footer>
<header><nav>
<section>
<section>
<footer>
<article>
<article>
<aside>
3
HTML5 : les nouvelles balises
Balises pour webapplication : <list> <datalist> <detail> <summary> <meter> <progress>}Barre de progression
}Listes déroulantes
4
HTML5 : les nouvelles balises
Les attributs nouveaux du champ texte <input> : required type=’’email’’ type=’’date’’ type=’’range’’ type=’’search’’ type=’’tel’’ type=’’number’’
type=’’color’’ placeholder
Les plus connus
Démo jQuery
Les sélecteurs simples
Les sélecteurs complexes
Les animations
La manipulation de CSS
CSS3, ce qui est possible
8
CSS3, ce qui est possible
Sélecteurs : :ntn-child(odd/even) :not(.class or #id or elem) :first-child :last-child input[type=’’text’’] div > div
9
CSS3, ce qui est possible
Polices hébergées sur le serveur plus besoin d’utiliser une police présente sur tous les
ordinateurs toutes les polices sont acceptées
@font-face{font-family: 'Gotham';src: url(Gotham-
Black.otf);}
h1 { font: bold 90px 'Gotham';}
10
CSS3, ce qui est possible
Apparence des éléments border-radius : Wpx Xpx Ypx Zpx transparence : rgba(x,y,z,∝) background-size background multiple :
background: url(image1), url(image2) text-shadow box-shadow transitions
Mobilité et webapp
12
Mobilité et webapp
Géolocalisation possibilité d’utiliser le
GPS de l’appareil demande de
confirmation utilisation de l’API
Google Maps JS affichage de la position
de l’utilisateur
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script type=’’text/javascript’’>function initialize() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onSuccess, onError, {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 120000});
}}</script>
HTML5 et multimedia
14
HTML5 et multimedia
Images utilisation de nouvelles balises en plus de l’images :
<figure><img src=’’mon_image.jpg’’><figcaption>
Texte de légende de l’images
</figcaption></figure>
15
HTML5 et multimedia
Audio balise <audio> prévue à
cet effet prévoir les fichiers :
.ogg (Opera, Firefox) .mp3 (Chrome, Safari)
ajouter les types : type=’’audio/ogg’’ type=’’audio/mpeg’’
player html5 dans chaque navigateur web compatible
possibilité d’options :
<audio controls="controls" preload="auto" autobuffer="autobuffer" loop="loop">
<source src="audio.m4a” type=’’audio/mpeg’’>
<source src="audio.mp3” type=’’audio/mpeg’’>
</audio>
16
HTML5 et multimedia
Vidéo balise <video> prévue
à cet effet prévoir les fichiers :
.ogg (Opera, Firefox) .mp4 (Chrome,
Safari) ajouter les types :
type=’’video/ogg’’ type=’’video/mp4’’
player html5 dans chaque navigateur web compatible
possibilité d’options :
<video width="980px" height="551.25px" controls="controls" autobuffer="autobuffer" loop="loop" class="shown" poster="poster.png">
<source src="video.m4v” type=’’video/mp4’’>
</video>
Canvas, dessin et animation
Définition
Element du DOM
Effectue des rendus DYNAMIQUES d’images
Ne produit donc RIEN seul
Nécessite d’accéder à l’élément et de le modifier à la volée
Utilisable en dernier ressort
Introduit par Apple
Standardisé par WHATWG
Procédure
Créer le CANVAS en HTML
Définir ses dimensions en HTML
Définir son style en CSS
(Créer un raccourcis vers l’élément)
(Créer un raccourcis vers son contexte)
Dessiner ou
Placer une ressources et l’animer