SlideShare une entreprise Scribd logo
Conception d'Applications
       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
●   Frameworks JEE
    ○ Spring
● Nouveaux langages et frameworks JEE
    ○ Groovy et Scala, Play Framework
● Sortons un peu du monde JEE :
    ○ NodeJS, Dart
● Examen et TP
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
HTML5
●   Le buzzword - HTML5, c'est quoi ?
●   HTML 5
●   CSS 3
●   Le casse-tête des navigateurs...
●   Le web en 2012, le responsive design
Le buzzword

HTML5, c'est 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,
          ç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
L'HTML5 est...
● Une évolution d'HTML 4
  ○ Qu'on a survolé précédement


● Deux syntaxes : HTML5 et XHTML5

● Des nouvelles fonctionnalités

● Une couche d'application
  ○ Des APIs
L'HTML5 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
L'HTML5 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
Les nouveautés de l'HTML5

●   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
Les nouveautés de l'HTML5 -
Allègement du code

●   Allègement de l'entête head
    ○ Le doctype, les balises meta, l'encodage 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)
Les nouveautés de l'HTML5 -
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
Les nouveautés de l'HTML5 -
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
Les nouveautés de l'HTML5 -
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
Les nouveautés de l'HTML5 -
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...
Les nouveautés de l'HTML5 -
Formulaires avec sémantique

● Des nouveaux types pour la balise <input>



   ○   tel
   ○   email
   ○   url
   ○   date, day, month, year, week
   ○   number
   ○   range
   ○   search
   ○   color
Les nouveautés de l'HTML5 -
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é
                                  }
Les nouveautés de l'HTML5 -
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);
Les nouveautés de l'HTML5 -
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 d'un é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 l'interdiction de drop
         }
         function drop(target, e) {
             e.preventDefault(); // Annule l'interdiction 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>
Les nouveautés de l'HTML5 -
Websockets

● HTTP standard : requête-réponse
   ○ Du navigateur au serveur


● Websockets :
   communication
   bi-directionnelle
   ○ Plus besoin de
      polling, long-polling
      ou autres
CSS3
Les CSS3, c'est quoi ?

   "C'est quoi le CSS3 ? Ca a un rapport avec HTML5"

● Le CCS3 n'est 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
   ○   ...
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>
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:
                                    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';
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);
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);
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 d'interpolation (accélération, décélération...)




   ○   transition-delay : Retard du départ de la transition
       ■   en secondes ou millisecondes
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;
   }
Les nouveautés CSS3 -
Tranformées en 3D

● perspective
     transform:
       perspective(600px)
       rotateX(40deg );




 ● rotateX, rotateY, rotateZ
 ● translateX, translateY, translateZ
Les nouveautés CSS3 -
Animations
● Des keyframes
@keyframes rotateCube {
   0% {
       transform: rotateX(   0deg ) rotateY(   0deg );
   }
   100% {
       transform: rotateX( 360deg ) rotateY( 360deg );
   }
}


● Des animations
animation: rotateCube 8s infinite linear;
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;


   ○   Jusqu'à il n'y 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;
Les coins arrondis :
Et sur les vieux IE ?

● Et comment on fait sur IE8 ou IE7 ?
   Ou même IE6 ?


● C'est 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'
          });
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
   ○   D'autres seulement sur quelques rares navigateurs


● Quand et quoi utiliser ?
   ○   Ca dépend de l'application
       ■   Public cible...
   ○   Et de la criticité du composant
       ■   Si pas supporté, l'appli reste utilisable ?
Puis-je l'utiliser ?
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
Pour aller plus loin
Pour aller plus loin

● Pour apprendre et se tenir informés :
   HTML5 Rocks!

Contenu connexe

Tendances

Mongo DB
Mongo DBMongo DB
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
Abdoulaye Dieng
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
SOAT
 
jQuery
jQueryjQuery
jQuery
Franck SIMON
 
ToursJUG mongoDB
ToursJUG mongoDBToursJUG mongoDB
ToursJUG mongoDB
Cedric Gatay
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
kadzaki
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
Yannick Croissant
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
Content Square
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Les différents design patterns pour CoreData par Emmanuel Furnon
Les différents design patterns pour CoreData par Emmanuel FurnonLes différents design patterns pour CoreData par Emmanuel Furnon
Les différents design patterns pour CoreData par Emmanuel Furnon
Nicolas Lourenço
 
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
TelecomValley
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
Voyelle Voyelle
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
Rémy Savard
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
Yoann Gotthilf
 
Présentation mongoDB et mongoId
Présentation mongoDB et mongoIdPrésentation mongoDB et mongoId
Présentation mongoDB et mongoId
vtabary
 
Des CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSSDes CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSS
Raphaël Goetter
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Les frameworks flashlike javascript
Les frameworks flashlike javascriptLes frameworks flashlike javascript
Les frameworks flashlike javascript
ekito
 
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
Romain Jarraud
 

Tendances (20)

Mongo DB
Mongo DBMongo DB
Mongo DB
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
 
jQuery
jQueryjQuery
jQuery
 
ToursJUG mongoDB
ToursJUG mongoDBToursJUG mongoDB
ToursJUG mongoDB
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Cours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partieCours php & Mysql - 3éme partie
Cours php & Mysql - 3éme partie
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Les différents design patterns pour CoreData par Emmanuel Furnon
Les différents design patterns pour CoreData par Emmanuel FurnonLes différents design patterns pour CoreData par Emmanuel Furnon
Les différents design patterns pour CoreData par Emmanuel Furnon
 
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
Présentation mongoDB et mongoId
Présentation mongoDB et mongoIdPrésentation mongoDB et mongoId
Présentation mongoDB et mongoId
 
Des CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSSDes CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSS
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Les frameworks flashlike javascript
Les frameworks flashlike javascriptLes frameworks flashlike javascript
Les frameworks flashlike javascript
 
Drupal meetup paris nov 2012
Drupal meetup paris nov 2012Drupal meetup paris nov 2012
Drupal meetup paris nov 2012
 

En vedette

Friends Pictures
Friends PicturesFriends Pictures
Friends Pictures
aylingn
 
Blo
BloBlo
Blo
anamelg
 
Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010
Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010
Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010
Association Perce-Neige
 
Travailler en équipe avec le web 2.0
Travailler en équipe avec le web 2.0Travailler en équipe avec le web 2.0
Travailler en équipe avec le web 2.0
cedric lemery
 
Le calendrier complet des PO
Le calendrier complet des POLe calendrier complet des PO
Le calendrier complet des PO
Gil Durand
 
Canales RSS
Canales RSSCanales RSS
KOUNAKOU, Lieux d'accès public à lnternet en Tunisie
KOUNAKOU, Lieux d'accès public à lnternet en TunisieKOUNAKOU, Lieux d'accès public à lnternet en Tunisie
KOUNAKOU, Lieux d'accès public à lnternet en Tunisie
Kounakou
 
Minerales visita a museos virtuales semi completo
Minerales visita a museos virtuales semi completoMinerales visita a museos virtuales semi completo
Minerales visita a museos virtuales semi completo
monicaitzel18
 
Tres de cada diez detenidos de bandas latinas son menores
Tres de cada diez detenidos de bandas latinas son menoresTres de cada diez detenidos de bandas latinas son menores
Tres de cada diez detenidos de bandas latinas son menores
fernandoatienzagarcia
 
Datos internet
Datos internetDatos internet
Datos internet
Fernando Tricas García
 
Prise en charge de l'hypertension
Prise en charge de l'hypertensionPrise en charge de l'hypertension
Prise en charge de l'hypertension
NECH-CIEH
 
DOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓN
DOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓNDOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓN
DOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓN
jackluyo
 
Plantes Kefirees 2009
Plantes Kefirees 2009Plantes Kefirees 2009
Plantes Kefirees 2009
47jd47
 
Mamá Antula
Mamá AntulaMamá Antula
Mamá Antula
Josefina Carzedda
 
Semana 02 de Economía
Semana 02 de EconomíaSemana 02 de Economía
Semana 02 de Economía
Larry Mendoza
 
Objetos de Aprendizaje
Objetos de AprendizajeObjetos de Aprendizaje
Objetos de Aprendizaje
Xavier Ochoa
 
¿Crisis del periodismo en la Web?
¿Crisis del periodismo en la Web?¿Crisis del periodismo en la Web?
¿Crisis del periodismo en la Web?
alvaroliuzzi
 
Entropie
EntropieEntropie
Las menores beben y fuman más
Las menores beben y fuman másLas menores beben y fuman más
Las menores beben y fuman más
fernandoatienzagarcia
 

En vedette (20)

Stateczek
StateczekStateczek
Stateczek
 
Friends Pictures
Friends PicturesFriends Pictures
Friends Pictures
 
Blo
BloBlo
Blo
 
Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010
Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010
Le nouveau visage des maladies psychiatriques, Inserm 19 mai 2010
 
Travailler en équipe avec le web 2.0
Travailler en équipe avec le web 2.0Travailler en équipe avec le web 2.0
Travailler en équipe avec le web 2.0
 
Le calendrier complet des PO
Le calendrier complet des POLe calendrier complet des PO
Le calendrier complet des PO
 
Canales RSS
Canales RSSCanales RSS
Canales RSS
 
KOUNAKOU, Lieux d'accès public à lnternet en Tunisie
KOUNAKOU, Lieux d'accès public à lnternet en TunisieKOUNAKOU, Lieux d'accès public à lnternet en Tunisie
KOUNAKOU, Lieux d'accès public à lnternet en Tunisie
 
Minerales visita a museos virtuales semi completo
Minerales visita a museos virtuales semi completoMinerales visita a museos virtuales semi completo
Minerales visita a museos virtuales semi completo
 
Tres de cada diez detenidos de bandas latinas son menores
Tres de cada diez detenidos de bandas latinas son menoresTres de cada diez detenidos de bandas latinas son menores
Tres de cada diez detenidos de bandas latinas son menores
 
Datos internet
Datos internetDatos internet
Datos internet
 
Prise en charge de l'hypertension
Prise en charge de l'hypertensionPrise en charge de l'hypertension
Prise en charge de l'hypertension
 
DOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓN
DOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓNDOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓN
DOCTRINA SOCIAL DE LA IGLESIA II PARTICIPACIÓN
 
Plantes Kefirees 2009
Plantes Kefirees 2009Plantes Kefirees 2009
Plantes Kefirees 2009
 
Mamá Antula
Mamá AntulaMamá Antula
Mamá Antula
 
Semana 02 de Economía
Semana 02 de EconomíaSemana 02 de Economía
Semana 02 de Economía
 
Objetos de Aprendizaje
Objetos de AprendizajeObjetos de Aprendizaje
Objetos de Aprendizaje
 
¿Crisis del periodismo en la Web?
¿Crisis del periodismo en la Web?¿Crisis del periodismo en la Web?
¿Crisis del periodismo en la Web?
 
Entropie
EntropieEntropie
Entropie
 
Las menores beben y fuman más
Las menores beben y fuman másLas menores beben y fuman más
Las menores beben y fuman más
 

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

ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
Horacio Gonzalez
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
pefringant
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
radjadjouambi1
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
Enib   cours c.a.i. web - séance #1 - html5 css3-js - tdEnib   cours c.a.i. web - séance #1 - html5 css3-js - td
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
Horacio Gonzalez
 
JQuery
JQueryJQuery
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
davrous
 
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
Clément OUDOT
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
Les-Tilleuls.coop
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
Jean-Baptiste Guerraz
 

Similaire à Enib cours c.a.i. web - séance #1 - html5 css3-js - 2 (20)

ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
HTML5
HTML5HTML5
HTML5
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
Enib   cours c.a.i. web - séance #1 - html5 css3-js - tdEnib   cours c.a.i. web - séance #1 - html5 css3-js - td
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
 
JQuery
JQueryJQuery
JQuery
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 

Plus de Horacio Gonzalez

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Horacio Gonzalez
 
But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...
Horacio Gonzalez
 
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Horacio Gonzalez
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
Horacio Gonzalez
 
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Horacio Gonzalez
 
Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09
Horacio Gonzalez
 
Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20
Horacio Gonzalez
 
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
Horacio Gonzalez
 
Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18
Horacio Gonzalez
 
Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16 Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16
Horacio Gonzalez
 
Devoxx France - Web Components, Polymer et Material Design
Devoxx France -  Web Components, Polymer et Material DesignDevoxx France -  Web Components, Polymer et Material Design
Devoxx France - Web Components, Polymer et Material Design
Horacio Gonzalez
 
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Horacio Gonzalez
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
Horacio Gonzalez
 
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
Horacio Gonzalez
 

Plus de Horacio Gonzalez (20)

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
 
But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...
 
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
 
Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09
 
Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20
 
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
 
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
 
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
 
Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18
 
Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16 Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16
 
Devoxx France - Web Components, Polymer et Material Design
Devoxx France -  Web Components, Polymer et Material DesignDevoxx France -  Web Components, Polymer et Material Design
Devoxx France - Web Components, Polymer et Material Design
 
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
 
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
 

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

  • 1. Conception d'Applications Interactives : Applications Web et JEE Séance #1 Le web en 2012 - HTML5/CSS3/JS
  • 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. 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. HTML5 ● Le buzzword - HTML5, c'est quoi ? ● HTML 5 ● CSS 3 ● Le casse-tête des navigateurs... ● Le web en 2012, le responsive design
  • 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. L'HTML5 est... ● Une évolution d'HTML 4 ○ Qu'on a survolé précédement ● Deux syntaxes : HTML5 et XHTML5 ● Des nouvelles fonctionnalités ● Une couche d'application ○ Des APIs
  • 8. L'HTML5 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. L'HTML5 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. Les nouveautés de l'HTML5 ● 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. Les nouveautés de l'HTML5 - Allègement du code ● Allègement de l'entête head ○ Le doctype, les balises meta, l'encodage 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. Les nouveautés de l'HTML5 - 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. Les nouveautés de l'HTML5 - 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. Les nouveautés de l'HTML5 - 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. Les nouveautés de l'HTML5 - 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. Les nouveautés de l'HTML5 - Formulaires avec sémantique ● Des nouveaux types pour la balise <input> ○ tel ○ email ○ url ○ date, day, month, year, week ○ number ○ range ○ search ○ color
  • 17. Les nouveautés de l'HTML5 - 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. Les nouveautés de l'HTML5 - 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. Les nouveautés de l'HTML5 - 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 d'un é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 l'interdiction de drop } function drop(target, e) { e.preventDefault(); // Annule l'interdiction 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. Les nouveautés de l'HTML5 - Websockets ● HTTP standard : requête-réponse ○ Du navigateur au serveur ● Websockets : communication bi-directionnelle ○ Plus besoin de polling, long-polling ou autres
  • 21. CSS3
  • 22. Les CSS3, c'est quoi ? "C'est quoi le CSS3 ? Ca a un rapport avec HTML5" ● Le CCS3 n'est 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. 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. Les nouveautés CSS3 ● Effets visuels ● Sélecteurs ● Nouveaux outils
  • 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. 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. 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. 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 d'interpolation (accélération, décélération...) ○ transition-delay : Retard du départ de la transition ■ en secondes ou millisecondes
  • 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. Les nouveautés CSS3 - Tranformées en 3D ● perspective transform: perspective(600px) rotateX(40deg ); ● rotateX, rotateY, rotateZ ● translateX, translateY, translateZ
  • 31. Les nouveautés CSS3 - Animations ● Des keyframes @keyframes rotateCube { 0% { transform: rotateX( 0deg ) rotateY( 0deg ); } 100% { transform: rotateX( 360deg ) rotateY( 360deg ); } } ● Des animations animation: rotateCube 8s infinite linear;
  • 32. Exemple : le cube des navigateurs ● translateX, translateY, translateZ ● rotateX, rotateY, rotateZ ● animation, @keyframes
  • 33. Le casse-tête des navigateurs
  • 34. Les coins arrondis : Les préfixes vendeurs ● Vous souvenez-vous des coins arrondis ? border-radius: 20px; ○ Jusqu'à il n'y 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. Les coins arrondis : Et sur les vieux IE ? ● Et comment on fait sur IE8 ou IE7 ? Ou même IE6 ? ● C'est 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. 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 ○ D'autres seulement sur quelques rares navigateurs ● Quand et quoi utiliser ? ○ Ca dépend de l'application ■ Public cible... ○ Et de la criticité du composant ■ Si pas supporté, l'appli reste utilisable ?
  • 37. Puis-je l'utiliser ? 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
  • 39. Pour aller plus loin ● Pour apprendre et se tenir informés : HTML5 Rocks!