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