Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
3. HTML : Langage à balise
• <balise>Contenu</balise>
• Balise = mise en forme
• Format de données
• CSS : format de présentation
• JS : langage de développement
• Permet d’écrire de l’hypertexte
• = système contenant des nœuds liés entre eux par des liens
• Un nœud = une unité minimale d’information
4. HTML : les noeuds
<body>
<div style="background:#fff">
Voici mon contenu
</div>
</body>
5. HTML : les noeuds
<body>
<div style="background:#fff">
Voici mon contenu
</div>
</body>
Markup
6. HTML : les noeuds
<body>
<div style="background:#fff">
Voici mon contenu
</div>
</body>
Markup - Informations de style
7. HTML : les noeuds
<body>
<div style="background:#fff">
Voici mon contenu
</div>
</body>
Markup - Informations de style – Contenu (= nœud)
8. Evolution du HTML
1989 :
Création : 1995 :
- Du http 1994 : HTML 4.0
1995 : 1996 :
- Des URL Netscape 0.9 Styles
W3C HTML 3.2
- Du HTML
Spécifications … table ! Scripts
HTML 2.0 Object
Frame
2006 :
Mort de xHTML
2007 : 2000 :
Nouveau groupe de travail xHTML
HTML5
9. Un langage pour les gouverner tous
16 employés de Microsoft dont 1 Chairman (Paul Cotton)
17 membres de la Fondation Mozilla
11 employés d'Apple dont 1 Chairman (Maciej Stachoviak)
19 employés d'Opéra
14 employés de Google
10. Un mot sur le WHATWH
Spécification « concurrente » au HTML5
Non officiel
Principaux soutiens : Mozilla, Opera et Apple
Libre, ouverte
S’oppose à la lenteur et au fonctionnement du groupe de travail
HTML5
Mais lui fait des propositions (souvent acceptées)
16. La philosophie
Raccourcir la syntaxe
Cross-browser
Améliorer, POO-iser
Plugins
Mais
S’éloignent parfois de l’esprit JS
Peuvent devenir usine à gaz exemple
23. 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
23
24. 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';
}
24
25. 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
25
27. Mobilité et webapp
<script
Géolocalisation src="http://maps.googleapis.com/maps/api/js?sensor=
possibilité d’utiliser le GPS de false"></script>
<script type=’’text/javascript’’>
l’appareil
function initialize() {
demande de confirmation if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
utilisation de l’API Google onSuccess,
Maps JS onError, {
enableHighAccuracy: true,
affichage de la position de timeout: 20000,
l’utilisateur maximumAge: 120000
});
}
}
</script>
27
28. Mobilité et webapp
Création d’une webapp
intégration sur l’écran d’accueil de l’appareil
utilisation d’une image pour l’icône
utilisation d’une image pour le splashscreen
possibilité de cacher l’interface du navigateur web
rendu de l’application quasi natif
<link rel="apple-touch-icon" href="icon.png"/>
<link rel="apple-touch-startup-image" href="default.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
28
31. 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>
31
32. HTML5 et multimedia
Audio player html5 dans chaque
balise <audio> prévue à navigateur web
cet effet compatible
prévoir les fichiers : possibilité d’options :
.ogg (Opera, Firefox)
<audio controls="controls" preload="auto"
.mp3 (Chrome, Safari) autobuffer="autobuffer" loop="loop">
ajouter les types : <source src="audio.m4a” type=’’audio/mpeg’’>
<source src="audio.mp3” type=’’audio/mpeg’’>
type=’’audio/ogg’’ </audio>
type=’’audio/mpeg’’
32
33. HTML5 et multimedia
Vidéo player html5 dans chaque
balise <video> prévue à navigateur web
cet effet compatible
prévoir les fichiers :
.ogg (Opera, Firefox) possibilité d’options :
.mp4 (Chrome, Safari)
<video width="980px" height="551.25px"
ajouter les types : controls="controls" autobuffer="autobuffer"
loop="loop" class="shown"
type=’’video/ogg’’ poster="poster.png">
type=’’video/mp4’’ <source src="video.m4v” type=’’video/mp4’’>
</video>
33
35. 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
36. 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
38. Le temps réel
• Ecrire côté serveur en
Javascript
• Le GWT du non-barbu
• Performances
• DOM parsing
Requête basique HTTP Hello en TCP
39. Framework jeux
Centré sur l’animation
Léger
Rapide à mettre en place
Laisse le contrôle sur le code
40. Framework jeux
Fonctionne avec un éditeur
Permet l’export pour iOS sans passer par Safari
Structure du code semi-OO très bien faite
Animations et effets basiques pré-développés
41. Framework jeux
Complexe mais extrêmement performant
Capable de faire du temps réel
100% intégré à Facebook