Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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!
Prochain SlideShare
Chargement dans…5
×

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

1 299 vues

Publié le

  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Soyez le premier à aimer ceci

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!

×