html5 2

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