Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,307 views

Published on

  • Login to see the comments

  • Be the first to like this

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!

×