View
1.231
Download
1
Category
Preview:
DESCRIPTION
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
Citation preview
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>
<div style="background:#fff">
Voici mon contenu
</div>
</body>
Markup
HTML : les noeuds
<body>
<div style="background:#fff">
Voici mon contenu
</div>
</body>
Markup - Informations de style
HTML : les noeuds
<body>
<div style="background:#fff">
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
HTML5 : les nouvelles balises
Balises pour webapplication : <list> <datalist> <detail> <summary> <meter> <progress>}Barre de progression
}Listes déroulantes
14
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 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
Les plus connus
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
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
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';}
25
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
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
Recommended