résumé Html5

1. HTML5, les nouvelles
balises
MOHAMED BOUHAMED

2. HTML5 : les nouvelles balises
 Structure de page web :
 <header>
 <nav>
 <section>
 <article>
 <aside>
 <footer>
<header>
<nav>
<section>
<section>
<footer>
<article>
<article>
<aside>
2

3. HTML5 : les nouvelles balises
 Balises pour webapplication :
 <list>
 <datalist>
 <detail>
 <summary>
 <meter>
 <progress> } Barre de progression
} Listes déroulantes
3

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
4

5. Les plus connus

6. Démo jQuery
 Les sélecteurs simples
 Les sélecteurs complexes
 Les animations
 La manipulation de CSS

7. 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
8

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
9
@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 XpxYpx Zpx
 transparence : rgba(x,y,z,∝)
 background-size
 background multiple :
 background: url(image1), url(image2)
 text-shadow
 box-shadow
 transitions
10

11. 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
12
<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>

13. HTML5 et multimedia

14. HTML5 et multimedia
 Images
 utilisation de nouvelles balises en plus de l’images :
14
<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>
15

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>
16

17. Canvas, dessin et
animation

18. 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é parWHATWG

19. 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