Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript

HTML5 – CSS3 - Javascript
Le Web nouvelle définition

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

HTML : les noeuds
<body>

<div style="background:#fff">

Voici mon contenu

</div>

</body>

HTML : les noeuds
<body>
Voici mon contenu
</div>
</body>

Markup

HTML : les noeuds
<body>
Voici mon contenu
</div>
</body>

Markup - Informations de style

HTML : les noeuds
<body>
Voici mon contenu
</div>
</body>

Markup - Informations de style – Contenu (= nœud)

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

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

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)

HTML5 : les nouvelles balises
 Structure de page web : <header>
<nav>

 <header> <section>
 <nav> <article>
 <section>
<aside>
<section>
 <article>
 <aside> <article>

 <footer>
<footer>

12

 Balises pour webapplication :
 <list>
 <datalist>
 <detail>
} Listes déroulantes

 <summary>
 <meter>
 <progress> } Barre de progression

13

 Les attributs nouveaux du
champ texte <input> :  type=’’color’’
 required  placeholder
 type=’’email’’
 type=’’date’’
 type=’’range’’
 type=’’search’’
 type=’’tel’’
 type=’’number’’

14

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

Ceux qui vont encore plus loin

• Philosophie M-V-VM
• Data binding
• Utilisation complète des attributs HTML5

Démo jQuery
 Les sélecteurs simples

 Les sélecteurs complexes

 Les animations

 La manipulation de CSS

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

 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

 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

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

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

Mobilité et webapp
 Champs textes spéciaux :

29

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

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

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

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

Démo
 http://jsfiddle.net/eWcdS/

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

Framework jeux

 Centré sur l’animation

 Léger

 Rapide à mettre en place

 Laisse le contrôle sur le code

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

Framework jeux

 Complexe mais extrêmement performant

 Capable de faire du temps réel

 100% intégré à Facebook

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript

Contenu connexe

Tendances

En vedette

Similaire à Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript