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

HTML5 – CSS3 - JavascriptLe Web nouvelle définition

Historique du HTML

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 HTML1989 :Création :- Du http- Des URL- Du HTML

1995 :W3CSpécificationsHTML 2.0

1994 :Netscape 0.9 1996 :

HTML 3.2… table !

1995 :HTML 4.0StylesScriptsObjectFrame

2000 :xHTML

2006 :Mort de xHTML

2007 :Nouveau groupe de travailHTML5

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

12

HTML5 : les nouvelles balises

Structure de page web :

<header> <nav> <section> <article> <aside> <footer>

<header><nav>

<section>

<section>

<footer>

<article>

<article>

<aside>

13


Balises pour webapplication : <list> <datalist> <detail> <summary> <meter> <progress>}Barre de progression

}Listes déroulantes

14


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

type=’’color’’ placeholder

Les Framework JS

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

http://www.bayrou.fr/

Les plus connus

Les mobiles

XUI

Ceux qui vont encore plus loinCelui

• 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

23


Sélecteurs : :ntn-child(odd/even) :not(.class or #id or elem) :first-child :last-child input[type=’’text’’] div > div

24


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';}

25


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

27

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>

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

29

Mobilité et webapp

Champs textes spéciaux :

HTML5 et multimedia

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>

32

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>

33

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

Démo

http://jsfiddle.net/eWcdS/






Le temps réel• Ecrire côté serveur

en Javascript• Le GWT du non-

barbu• Performances• DOM parsingRequê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

Technology

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