Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,531 views

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

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

Statistics

Views

Total Views
1,531
Views on SlideShare
1,305
Embed Views
226

Actions

Likes
0
Downloads
37
Comments
0

3 Embeds 226

http://codedarmor.fr 224
http://localhost 1
http://nodeslide.herokuapp.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • HTML5 – CSS3 - Javascript Le 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 View slide
  • HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body> View slide
  • 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 : 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 dApple dont 1 Chairman (Maciej Stachoviak) 19 employés dOpé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 nouvellesbalises
  • HTML5 : les nouvelles balises Structure de page web : <header> <nav>  <header> <section>  <nav> <article>  <section> <aside> <section>  <article>  <aside> <article>  <footer> <footer> 12
  • HTML5 : les nouvelles balises Balises pour webapplication :  <list>  <datalist>  <detail> } Listes déroulantes  <summary>  <meter>  <progress> } Barre de progression 13
  • HTML5 : les nouvelles balises Les attributs nouveaux du champ texte <input> :  type=’’color’’  required  placeholder  type=’’email’’  type=’’date’’  type=’’range’’  type=’’search’’  type=’’tel’’  type=’’number’’ 14
  • Les Framework JS
  • La philosophie Raccourcir la syntaxe Cross-browser Améliorer, POO-iser PluginsMais 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 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
  • 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
  • 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
  • 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
  • Mobilité et webapp
  • 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
  • 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
  • Canvas, dessin etanimation
  • 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