0
Conception dApplications       Interactives : Applications Web et JEE            Séance #1 Le web en 2012 - HTML5/CSS3/JS
Description du module●   Le web en 2012 : HTML5/CCS3/JS●   Applications web avec GWT●   La webapp dans un écosystème JEE● ...
Le web en 2012 : HTML5/CCS3/JS● Les bases du web  ○ HTTP, URL, HTML, CSS, JS, AJAX...● HTML5  ○ HTML5, CSS3, le casse-tête...
HTML5●   Le buzzword - HTML5, cest quoi ?●   HTML 5●   CSS 3●   Le casse-tête des navigateurs...●   Le web en 2012, le res...
Le buzzwordHTML5, cest quoi ?
L’HTML 5 n’est pas…        "L’HTML5, c’est un nouveau langage ?" "Je débute, j’ai envie d’apprendre l’HTML5 directement,  ...
LHTML5 est...● Une évolution dHTML 4  ○ Quon a survolé précédement● Deux syntaxes : HTML5 et XHTML5● Des nouvelles fonctio...
LHTML5 et les standards● W3C définit les standards du web   ○ Chargé délaborer le standard HTML5   ○ Processus très lent e...
LHTML5 et les standards● En 2012 le W3C et le WHATWG ont décidé de suivre  des chemins séparés   ○ W3C travaille pour un s...
Les nouveautés de lHTML5●   Allègement du code●   Nouvelles balises sémantiques●   Disparition de balises de mise en forme...
Les nouveautés de lHTML5 -Allègement du code●   Allègement de lentête head    ○ Le doctype, les balises meta, lencodage de...
Les nouveautés de lHTML5 -Nouvelles balises sémantiques● Des balises avec du sens sémantique  ○ Plus spécifiques que les g...
Les nouveautés de lHTML5 -Disparition de balises de mise en forme● Meilleure séparation entre forme et contenu● Disparitio...
Les nouveautés de lHTML5 -Nouvelles modèle de contenu● Avant : modèle inline-block● Maintenant : des catégories  ○ Chaque ...
Les nouveautés de lHTML5 -Balises multimédia●   <video> : introduit un lecteur vidéo ayant une URL comme source●   <audio>...
Les nouveautés de lHTML5 -Formulaires avec sémantique● Des nouveaux types pour la balise <input>   ○   tel   ○   email   ○...
Les nouveautés de lHTML5 -Stockage local● Stocker des informations côté navigateur  ○ Système clé-valeur  ○ Chaque domaine...
Les nouveautés de lHTML5 -Géolocalisation● Spécification W3C propre associée à HTML5● Permet de géolocaliser le navigateur...
Les nouveautés de lHTML5 -Glisser-Déposer●   Permet de déplacer des éléments entre des applications et le navigateur     ○...
Les nouveautés de lHTML5 -Websockets● HTTP standard : requête-réponse   ○ Du navigateur au serveur● Websockets :   communi...
CSS3
Les CSS3, cest quoi ?   "Cest quoi le CSS3 ? Ca a un rapport avec HTML5"● Le CCS3 nest pas forcément lié à HTML5● Une évol...
Exemple classique :Les coins arrondis● Boîte avec coins arrondis avant CSS3   ○   Une <table> avec 9 cases, chacune avec d...
Les nouveautés CSS3● Effets visuels● Sélecteurs● Nouveaux outils
Les nouveautés CSS3 -Effets visuels● border-radius              ● text-shadow   border-radius: 20px;        text-shadow:  ...
Les nouveautés CSS3 -Effets visuels● gradient   background-image:     linear-gradient(right top,          #D60F0F 0%, #FFD...
Les nouveautés CSS3 -Effets visuels : transform ● transform : rotate                ● transform : scale    transform:   ro...
Les nouveautés CSS3 -Effets visuels : Transitions● Des propriétés   ○   transition-property : Propriétés CSS à transformer...
Les nouveautés CSS3 -Effets visuels : Transitions● Déclenchement   .transition {     background: #aaa;     transition-prop...
Les nouveautés CSS3 -Tranformées en 3D● perspective     transform:       perspective(600px)       rotateX(40deg ); ● rotat...
Les nouveautés CSS3 -Animations● Des keyframes@keyframes rotateCube {   0% {       transform: rotateX(   0deg ) rotateY(  ...
Exemple :le cube des navigateurs● translateX, translateY, translateZ● rotateX, rotateY, rotateZ● animation, @keyframes
Le casse-tête des navigateurs
Les coins arrondis :Les préfixes vendeurs● Vous souvenez-vous des coins arrondis ?               border-radius: 20px;   ○ ...
Les coins arrondis :Et sur les vieux IE ?● Et comment on fait sur IE8 ou IE7 ?   Ou même IE6 ?● Cest grave si ça ne marche...
Le problème...● HTML5 et CSS3 pas encore figés dans le marbre   ○   Le niveau de support change selon les navigateurs et l...
Puis-je lutiliser ?Avec des préfixes ?● Dans le doute, consulter Can I use... ?   ○   Support par navigateur pour chaque é...
Pour aller plus loin
Pour aller plus loin● Pour apprendre et se tenir informés :   HTML5 Rocks!
Upcoming SlideShare
Loading in...5
×

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2

800

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
800
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Enib cours c.a.i. web - séance #1 - html5 css3-js - 2"

  1. 1. Conception dApplications Interactives : Applications Web et JEE Séance #1 Le web en 2012 - HTML5/CSS3/JS
  2. 2. Description du module● Le web en 2012 : HTML5/CCS3/JS● Applications web avec GWT● La webapp dans un écosystème JEE● Frameworks JEE ○ Spring● Nouveaux langages et frameworks JEE ○ Groovy et Scala, Play Framework● Sortons un peu du monde JEE : ○ NodeJS, Dart● Examen et TP
  3. 3. Le web en 2012 : HTML5/CCS3/JS● Les bases du web ○ HTTP, URL, HTML, CSS, JS, AJAX...● HTML5 ○ HTML5, CSS3, le casse-tête des navigateurs... ○ Le web en 2012, le responsive design● Twitter Bootstrap ○ Outils, échafaudage, LessCSS, JQuery● Le développeur web en 2012 ○ Rôles, technologies, langages, veille technologique
  4. 4. HTML5● Le buzzword - HTML5, cest quoi ?● HTML 5● CSS 3● Le casse-tête des navigateurs...● Le web en 2012, le responsive design
  5. 5. Le buzzwordHTML5, cest quoi ?
  6. 6. L’HTML 5 n’est pas… "L’HTML5, c’est un nouveau langage ?" "Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant." "Pfff, moi qui venais d’apprendre l’HTML, je vais devoir tout réapprendre…" L’HTML5 n’est pas un nouveau langage
  7. 7. LHTML5 est...● Une évolution dHTML 4 ○ Quon a survolé précédement● Deux syntaxes : HTML5 et XHTML5● Des nouvelles fonctionnalités● Une couche dapplication ○ Des APIs
  8. 8. LHTML5 et les standards● W3C définit les standards du web ○ Chargé délaborer le standard HTML5 ○ Processus très lent et bureaucratique● WHATWG Web Hypertext Application Technology Working Group ○ Groupe dissident du W3C ○ Des développeurs des navigateurs ○ Approche pratique● Les deux travaillent en parallèle sur le même document
  9. 9. LHTML5 et les standards● En 2012 le W3C et le WHATWG ont décidé de suivre des chemins séparés ○ W3C travaille pour un standard fixe ■ Un snapshop de létat actuel : HTML5 ○ WHATWG travaille sur un living standard ■ En évolution permanente : HTML● Approches complémentaires
  10. 10. Les nouveautés de lHTML5● Allègement du code● Nouvelles balises sémantiques● Disparition de balises de mise en forme● Nouveau modèle de contenu● Balises multimédia● Formulaires avec sémantique● Stockage local● Glisser-Déposer● Géolocalisation● Websockets
  11. 11. Les nouveautés de lHTML5 -Allègement du code● Allègement de lentête head ○ Le doctype, les balises meta, lencodage des caractères, les balises style et script<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="fr"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head><head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" <link rel="stylesheet" href="design. content="text/html; charset=utf-8"> css" /> <link rel="stylesheet" type="text/css" href="design. <script src="script.js"></script>css" /> </head> <script type=”text/javascript” src=script.js"></script></head>● Simplifications en général ○ Certaines discutables (pas de /> pour balises vides)
  12. 12. Les nouveautés de lHTML5 -Nouvelles balises sémantiques● Des balises avec du sens sémantique ○ Plus spécifiques que les génériques ○ Structuration du document● <header> : indique une en-tête● <footer> : indique un pied de page Image : Alsa Creations● <nav> : indique un élément de navigation (menu...)● <aside> : indique une zone secondaire (sidebar, publicité...)● <section> : indique une portion de la page● <article> : indique une portion de la page avec du sens en lui-même
  13. 13. Les nouveautés de lHTML5 -Disparition de balises de mise en forme● Meilleure séparation entre forme et contenu● Disparition de balises sans sens sémantique ○ Telles que center, font, big, strike ou u● La mise en forme se fait avec les CSS
  14. 14. Les nouveautés de lHTML5 -Nouvelles modèle de contenu● Avant : modèle inline-block● Maintenant : des catégories ○ Chaque élément dans 0 ou plus catégories● Structuration logique du document Image : WHATWG
  15. 15. Les nouveautés de lHTML5 -Balises multimédia● <video> : introduit un lecteur vidéo ayant une URL comme source● <audio> : introduit un lecteur audio ayant une URL comme source● <canvas> : introduit une surface de dessin ○ Dessiner, tracer des formes, les animer...
  16. 16. Les nouveautés de lHTML5 -Formulaires avec sémantique● Des nouveaux types pour la balise <input> ○ tel ○ email ○ url ○ date, day, month, year, week ○ number ○ range ○ search ○ color
  17. 17. Les nouveautés de lHTML5 -Stockage local● Stocker des informations côté navigateur ○ Système clé-valeur ○ Chaque domaine a son sandbox● Applications web déconnectés localStorage[maCle] = "Ma valeur"; ou Stocker une valeur : localStorage.setitem("maCle", "Ma valeur"); localStorage[maCle]; ou Récupérer une valeur : localStorage.getitem[maCle]; Effacer une clé : removeItem("maCle"); Tester si le navigateur if (localStorage) { supporte le stockage local // Le navigateur supporte le localStorage } else { : // localStorage non supporté }
  18. 18. Les nouveautés de lHTML5 -Géolocalisation● Spécification W3C propre associée à HTML5● Permet de géolocaliser le navigateur ○ GPS, triangulation GSM, triangulation wifi, adresse IP● Pour Wifi et IP, utilisation de BDD de géolocalisation ○ E.g : https://www.google.com/loc/json● API asynchrone ○ Fonction callback pour récevoir la réponse function maPosition(position) { var infopos = "Position déterminée :n"; infopos += "Latitude : "+position.coords.latitude +"n" infopos += "Longitude: "+position.coords.longitude+"n"; infopos += "Altitude : "+position.coords.altitude +"n"; document.getElementById("infoposition").innerHTML = infopos; } // Pour connaître la position navigator.geolocation.getCurrentPosition(maPosition); // Pour suivre la position var survId = navigator.geolocation.watchPosition(maPosition); // Pour annuler le suivi de position navigator.geolocation.clearWatch(survId);
  19. 19. Les nouveautés de lHTML5 -Glisser-Déposer● Permet de déplacer des éléments entre des applications et le navigateur ○ API JavaScript native HTML5● Attribut draggable : élément déplaçable● Événement dragstart : généré au début du transfert● Événement dragover : généré au survole dun élément pendant la glisse● Événement drop : généré en fin de transfert function dragstart(target, e) { e.dataTransfer.setData(text/plain, "Texte transmis""); } function dragover(target, e) { e.preventDefault(); // Annule linterdiction de drop } function drop(target, e) { e.preventDefault(); // Annule linterdiction de drop alert(Vous avez bien déposé votre élément !); } <div id="source" draggable="true" ondragstart="dragstart(this, event)"> Élement source </div> <div id="target" ondragover="dragover(this,event)" ondrop="drop(this,event)"> Élement cible </div>
  20. 20. Les nouveautés de lHTML5 -Websockets● HTTP standard : requête-réponse ○ Du navigateur au serveur● Websockets : communication bi-directionnelle ○ Plus besoin de polling, long-polling ou autres
  21. 21. CSS3
  22. 22. Les CSS3, cest quoi ? "Cest quoi le CSS3 ? Ca a un rapport avec HTML5"● Le CCS3 nest pas forcément lié à HTML5● Une évolution majeure des CSS ○ Nouveaux sélecteurs ○ Nouvelles façons de spécifier les couleurs ○ Détection des caractéristiques des terminaux ○ Des calculs dans la feuille de style ○ Des SVG en arrière plan ○ ...
  23. 23. Exemple classique :Les coins arrondis● Boîte avec coins arrondis avant CSS3 ○ Une <table> avec 9 cases, chacune avec des images de fond● Boîte avec coins arrondis avec CSS3 <!doctype html> <html> <head> <meta charset="utf-8" /> <style> .boite_arrondie { background: #eeeeee; border: 2px solid black; border-radius: 20px; width: 200px; height: 80px; margin: auto; padding: 20px; } </style> </head> <div class="boite_arrondie"> Oh la jolie boîte ! </div> </hmtl>
  24. 24. Les nouveautés CSS3● Effets visuels● Sélecteurs● Nouveaux outils
  25. 25. Les nouveautés CSS3 -Effets visuels● border-radius ● text-shadow border-radius: 20px; text-shadow: 4px 4px 3px #ff0000;● box-shadow ● font-face box-shadow: @font-face { 10px 10px 5px #000088; font-family: Luckiest Guy; src:url("luckiest-guy-regular.otf") } ... font-family:Luckiest Guy;
  26. 26. Les nouveautés CSS3 -Effets visuels● gradient background-image: linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);● opacity background: rgba(0, 180, 0, 0.5);
  27. 27. Les nouveautés CSS3 -Effets visuels : transform ● transform : rotate ● transform : scale transform: rotate(30deg) transform: scale(1,0.25) ● transform : skew ● transform : translate transform: skew(15deg, 30deg); -webkit-transform: translate(30px, 30px);
  28. 28. Les nouveautés CSS3 -Effets visuels : Transitions● Des propriétés ○ transition-property : Propriétés CSS à transformer ■ couleurs, position, dimensions, transformations, visibilité, ombres, dégradés ○ transition-duration : Durée de la transition ■ en secondes ou millisecondes ○ transition-timing-function : ■ Fonction de transition, modèle dinterpolation (accélération, décélération...) ○ transition-delay : Retard du départ de la transition ■ en secondes ou millisecondes
  29. 29. Les nouveautés CSS3 -Effets visuels : Transitions● Déclenchement .transition { background: #aaa; transition-property : color; transition-duration : 5s; color: white; } .transition:hover { transition-property : color; transition-duration : 5s; color: black; }
  30. 30. Les nouveautés CSS3 -Tranformées en 3D● perspective transform: perspective(600px) rotateX(40deg ); ● rotateX, rotateY, rotateZ ● translateX, translateY, translateZ
  31. 31. Les nouveautés CSS3 -Animations● Des keyframes@keyframes rotateCube { 0% { transform: rotateX( 0deg ) rotateY( 0deg ); } 100% { transform: rotateX( 360deg ) rotateY( 360deg ); }}● Des animationsanimation: rotateCube 8s infinite linear;
  32. 32. Exemple :le cube des navigateurs● translateX, translateY, translateZ● rotateX, rotateY, rotateZ● animation, @keyframes
  33. 33. Le casse-tête des navigateurs
  34. 34. Les coins arrondis :Les préfixes vendeurs● Vous souvenez-vous des coins arrondis ? border-radius: 20px; ○ Jusquà il ny a pas longtemps, cela ne marchait pas partout● CSS3 considéré expérimental, chaque navigateur implémentait à sa façon ○ Des préfixes propriétaires ou préfixes vendeurs ■ Les principaux ? -moz pour Firefox, -webkit pour Chrome/Safari ○ Oblligation de les mettre pour atteindre tout le monde -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
  35. 35. Les coins arrondis :Et sur les vieux IE ?● Et comment on fait sur IE8 ou IE7 ? Ou même IE6 ?● Cest grave si ça ne marche pas ? ○ Pas pour des coins arrondis ○ Oui si cela gêne le fonctionnement !● On peut faire quoi ○ Essayer Modernizr et utiliser polyfills ○ Vérifier fonctionnement dans vieux navigateurs Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js });
  36. 36. Le problème...● HTML5 et CSS3 pas encore figés dans le marbre ○ Le niveau de support change selon les navigateurs et les versions ○ Des fonctions non implémentées ○ Des fonctions avec des noms différents● Certaines propriétés sont supportées un peu partout ○ Dautres seulement sur quelques rares navigateurs● Quand et quoi utiliser ? ○ Ca dépend de lapplication ■ Public cible... ○ Et de la criticité du composant ■ Si pas supporté, lappli reste utilisable ?
  37. 37. Puis-je lutiliser ?Avec des préfixes ?● Dans le doute, consulter Can I use... ? ○ Support par navigateur pour chaque élément HTML5/CSS3/JS● Ou le très beau HTML5 Readiness
  38. 38. Pour aller plus loin
  39. 39. Pour aller plus loin● Pour apprendre et se tenir informés : HTML5 Rocks!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×