SlideShare une entreprise Scribd logo
Conception d'Applications
       Interactives :
 Applications Web et JEE
            Séance #1
 Le web en 2013 - HTML5/CSS3/JS
Description du module
●   Le web en 2013 : 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, Grail & Play Framework
● Sortons un peu du monde JEE :
    ○ NodeJS, Dart
● Examen et TP
Le web en 2013 : 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 2013, le responsive design
● Twitter Bootstrap
  ○ Outils, échafaudage, LessCSS, JQuery
● Le développeur web en 2013
  ○ Rôles, technologies, langages, veille technologique
Qui sommes nous
Horacio Gonzalez
        Spaniard lost in Brittany, Java developer,
             dreamer and all-around geek

● Architecte technique au Crédit Mutuel Arkea
  ○ Direction Technique Informatique

● JUG Leader du FinistJUG

        http://lostinbrittany.org/
            +Horacio.Gonzalez
            @LostInBrittany
Sébastien Lambour
  Le développeur de l'Est le plus à l'Ouest, Java & C++
 Developer, coder addict, continuous intégration ayatollah

● Référent technique au Crédit Mutuel Arkea
  ○ Direction des Etudes Informatiques




sebastien.lambour@gmail.com
    +sebastien.lambour
        @FinistSeb
David Herviou
Java Developer, Programming addict, Curious about new
                     technologies

● Responsable du service Méthodes Appliquées au Crédit
  Mutuel Arkéa
  mots clés : Architecture Applicative, Intégration Continue, Qualimétrie de
  code, Optimisation, GWT, Thrift, Java, Test de charge, Big Data, APM,
  Revue de Code, Testing...


   david.herviou@gmail.com
       +david.herviou
          @herviou
Les bases du web
Les bases du web
●   Le Web, URLs, HTTP
●   HTML
●   CSS
●   JavaScript
Le Web, URLs, HTTP
Le Web
● Système hypertexte public fonctionnant sur
  internet qui permet de consulter, avec un
  navigateur, des ressources accessibles
  sur des sites (merci Wikipedia)




                                  Image : CIA
Principaux composants du web
URLs
          Uniform Resource Locator

Chaîne de caractères utilisée pour adresser les
ressources du web
URL - Query string
Chaîne de caractères envoyée au serveur
● Des données à passer à l'application web
● Personnalisation des contenus
URL - Identifiant de fragment
Chaîne de caractères interprétée par le
navigateur
● Identifie une ressource dans le document
  reçu
● Jamais transmise au serveur
HTTP
       HyperText Transfer Protocol

 Protocole de communication client-serveur
    développé pour le World Wide Web
Requête HTTP




● En-têtes HTTP : Information ajoutée
    ○ Host : domaine appelé (serveurs multi-domaines)
    ○ User-Agent : indentifiant navigateur
    ○ Referer : Document duquel on vient
    ○ ...
●   Méthode : Commande demandée
●   Version : HTTP/1.0, HTTP/1.1
Méthodes HTTP
●   GET
●   POST
●   PUT
●   DELETE

●   HEAD
●   TRACE
●   OPTIONS
●   CONNECT
●   PATCH
Réponses HTTP




● Ligne de Statut
● En-têtes HTTP : Information ajoutée
   ○   Date
   ○   Server : Info sur le serveur web
   ○   Content-Type : identifiant de format de
       données
   ○   Content-Length : taille en octets de la
       ressource
   ○   ...
Web statique et web dynamique
HTML
HTML
          HyperText Markup Language

Les documents HTML sont le cœur du web

● Composés de
  ○   Texte
  ○   Balisage
  ○   Références à d'autres documents
  ○   Liens
Document HTML
Balises HTML
Le contenu à marquer est délimité par des balises



●   Balises de premier niveau
●   Balises d'en-tête
●   Balises de structuration du texte
●   Balises de listes
●   Balises de tableau
●   Balises de formulaire
●   Balises sectionnantes
●   Balises génériques
Balises de structuration du texte
Balises avec attributs
Balises vides
Les espaces et les sauts de ligne
Éléments inline et éléments bloc
Balises génériques : <span> et <div>
CSS
La mise en page HTML




                       Image : Wikipedia
La mise en page HTML




                       Image : Mosaic
La mise en page HMTL




Sites Disney.com et Apple.com, 1997
Source : Wayback Machine
La mise en page HMTL




                  Site Disney.com, 1999
                  Source : Wayback Machine
Les feuilles de style en cascade
Principes des CSS
● Arbre logique du document
  ○ DOM


● Concept de boîte


● Propriétés et valeurs

● Sélecteurs et blocs de règles
Objectifs des CSS
● Séparer la structure de la présentation


● Décliner les styles selon le récepteur


● Permettre la cascade des styles
Le problème
Problème : Support différent selon le
navigateur

● Guerre des navigateurs

● Domination IE6

Technique du doctype switching
●   Différents sous-ensembles de CSS 1


CSS 2 et CSS 2.1 jamais complètement implémentées
L'exemple par excellence :
CSS Zen Garden




                       Source : CSS Zen Garden
DOM
L'arbre DOM
                      Document Object Model

●   Interface indépendante de tout langage de programmation et de toute
    plate-forme, permettant à des programmes informatiques et à des scripts
    d'accéder ou de mettre à jour le contenu, la structure ou le style de
    documents XML (merci Wikipedia)
JavaScript
Objectif : donner du dynamisme
● Né chez Netscape en 1995
   ○   Adopté par Internet Explorer 3 en 1996
   ○   Standardisé comme ECMAScript en 1997



● Des scripts qui s'exécutent côté navigateur
   ○   Pages webs dynamiques, DHTML
Caracteristiques de JavaScript
● Procédural et structuré

● Fonctionnel
  ○ Les fonctions sont objets de premier niveau

● Dynamique
  ○ Typage dynamique
  ○ Avec objets : tableaux associatifx (clé-valeur)
     ■ Propriétés dynamiques

● Basé sur des Prototypes
  ○ Héritage basé sur le clonage d'objets
XMLHttpRequest

● Appeler un serveur depuis un script JS
  ○ Traiter la réponse directement depuis le script
  ○ Réponse en JSON, XML, HTML ou simple texte

● Origine : un ActiveX pour IE 5 (1998)
  ○ Ré-implémenté par Mozilla (2002), Safari (2004)

● Permet de la vraie interactivité client-serveur
  ○ Réponse synchrone ou asynchrone


●   Sécurité : same origin policy
AJAX
          Asynchronous JavaScript and XML

●   Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest
    afin d'améliorer maniabilité et confort d'utilisation des Applications Internet
    Riches (merci Wikipedia)




    (c) Colgate-Palmolive
    Source : Wikipedia
AJAX polling
●   HTTP : modèle requête-réponse
●   Applications riches : besoin de pousser des infos du serveur vers client



●   Comment fait-on ?
JSON
Format de données
●   Simple et générique

●   Textuel et
    independant du langage

●   Dérivé de la notation
    des objets en JS
Conclusions
Des technologies à la base du web

 On a passé en revue les technologies de base du web



Ces technologies sont encore très importantes aujourd'hui



               Si vous ne les maîtrisez pas,
        c'est le bon moment pour vous y mettre...
Voulez-vous en savoir plus ?
Voulez-vous en savoir plus ?
● Wikipedia
  ○ HTML, CSS, JavaScript...


● Tutoriels
  ○ Developpez.com, HTML.net, CSS Faciles...


● En anglais
  ○ W3C's intro to HTML, W3C's intro to CSS,
     HTML Dog, w3schools.com...

Contenu connexe

Tendances

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
Horacio Gonzalez
 
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
 
Les Web APIs en .NET Core
Les Web APIs en .NET CoreLes Web APIs en .NET Core
Les Web APIs en .NET Core
François Camus
 
Soutenance de stage
Soutenance de stageSoutenance de stage
Soutenance de stage
Gaut' Xp
 
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
 
Node.js et MongoDB: Mongoose
Node.js et MongoDB: MongooseNode.js et MongoDB: Mongoose
Node.js et MongoDB: Mongoose
jeromegn
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
∞ François CHERPION ∞
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
Sonam TCHEUTSEUN
 
ToursJUG mongoDB
ToursJUG mongoDBToursJUG mongoDB
ToursJUG mongoDB
Cedric Gatay
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
Safwen Chibeni
 
Formation web
Formation webFormation web
Formation web
Stéphane BIOKOU
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
OpenEdition
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...
[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...
[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...
Clément OUDOT
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 
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
 

Tendances (20)

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
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...
 
Les Web APIs en .NET Core
Les Web APIs en .NET CoreLes Web APIs en .NET Core
Les Web APIs en .NET Core
 
Soutenance de stage
Soutenance de stageSoutenance de stage
Soutenance de stage
 
Zenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX AmadeusZenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX Amadeus
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
 
Node.js et MongoDB: Mongoose
Node.js et MongoDB: MongooseNode.js et MongoDB: Mongoose
Node.js et MongoDB: Mongoose
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
ToursJUG mongoDB
ToursJUG mongoDBToursJUG mongoDB
ToursJUG mongoDB
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Formation web
Formation webFormation web
Formation web
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
 
[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...
[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...
[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le...
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
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
 

En vedette

Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
Eric Bourdet
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
Horacio Gonzalez
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Horacio Gonzalez
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
Arnaud Héritier
 
JCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratiqueJCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratique
Rossi Oddet
 
.NET Vs J2EE
.NET Vs J2EE.NET Vs J2EE
.NET Vs J2EE
ravikirantummala2000
 
Bonnes pratiques des applications java prêtes pour la production
Bonnes pratiques des applications java prêtes pour la productionBonnes pratiques des applications java prêtes pour la production
Bonnes pratiques des applications java prêtes pour la production
Cyrille Le Clerc
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
Nathaniel Richand
 
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Saâd Zerhouni
 
Denis Vincent R22 BETA II hélicoptère
Denis Vincent R22 BETA II hélicoptèreDenis Vincent R22 BETA II hélicoptère
Denis Vincent R22 BETA II hélicoptère
Denis Vincent
 
Présentation Twitter
Présentation TwitterPrésentation Twitter
Présentation Twitter
Ho2C
 
Rebiss Cat Vir0508
Rebiss Cat Vir0508Rebiss Cat Vir0508
Rebiss Cat Vir0508
dvargas
 
Présentation jury citoyen virage energie centre
Présentation jury citoyen virage energie centrePrésentation jury citoyen virage energie centre
Présentation jury citoyen virage energie centre
AvenirSansPetrole
 
Segmentación
Segmentación Segmentación
Segmentación
daniel naranjo
 
Présentation2 modll
Présentation2 modll Présentation2 modll
Présentation2 modll
Julien Appert Odlm
 
“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...
“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...
“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...
ADBS
 
Angulos
AngulosAngulos
Angulos
XaviSei
 

En vedette (20)

Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
 
JCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratiqueJCertif 2012 : Maven par la pratique
JCertif 2012 : Maven par la pratique
 
.NET Vs J2EE
.NET Vs J2EE.NET Vs J2EE
.NET Vs J2EE
 
Bonnes pratiques des applications java prêtes pour la production
Bonnes pratiques des applications java prêtes pour la productionBonnes pratiques des applications java prêtes pour la production
Bonnes pratiques des applications java prêtes pour la production
 
Soutenance PFE 2012
Soutenance PFE 2012Soutenance PFE 2012
Soutenance PFE 2012
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
Application de gestion des projets en J2EE (Spring-Hibernate) avec architectu...
 
Denis Vincent R22 BETA II hélicoptère
Denis Vincent R22 BETA II hélicoptèreDenis Vincent R22 BETA II hélicoptère
Denis Vincent R22 BETA II hélicoptère
 
Présentation Twitter
Présentation TwitterPrésentation Twitter
Présentation Twitter
 
Rebiss Cat Vir0508
Rebiss Cat Vir0508Rebiss Cat Vir0508
Rebiss Cat Vir0508
 
Présentation jury citoyen virage energie centre
Présentation jury citoyen virage energie centrePrésentation jury citoyen virage energie centre
Présentation jury citoyen virage energie centre
 
Segmentación
Segmentación Segmentación
Segmentación
 
Présentation2 modll
Présentation2 modll Présentation2 modll
Présentation2 modll
 
“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...
“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...
“Open Data” & “Big Data” présentation de Romain Lacombe, mission Etalab, févr...
 
Gente Que Vale
Gente Que ValeGente Que Vale
Gente Que Vale
 
Angulos
AngulosAngulos
Angulos
 

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

Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
Les-Tilleuls.coop
 
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
 
Christophe Tricot et Raphaël Velt (infoviz)
Christophe Tricot et Raphaël Velt (infoviz)Christophe Tricot et Raphaël Velt (infoviz)
Christophe Tricot et Raphaël Velt (infoviz)
Meetup "Les Rencontres du Web de données"
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
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
 
Développement Web
Développement WebDéveloppement Web
Développement Web
mastertic
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)
TribuAndCo
 
Html5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGHtml5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUG
JUG Toulouse
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
Djamel Zouaoui
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantique
Les-Tilleuls.coop
 
Saas Libre
Saas LibreSaas Libre
Saas Libre
grolland
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
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
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
Horacio Gonzalez
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetup
Aspectize
 

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

Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
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
 
Christophe Tricot et Raphaël Velt (infoviz)
Christophe Tricot et Raphaël Velt (infoviz)Christophe Tricot et Raphaël Velt (infoviz)
Christophe Tricot et Raphaël Velt (infoviz)
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
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 !
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)
 
Html5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGHtml5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUG
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantique
 
Saas Libre
Saas LibreSaas Libre
Saas Libre
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
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!
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetup
 

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
 
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
 
Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30
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
 
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!
 
Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30
 

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

  • 1. Conception d'Applications Interactives : Applications Web et JEE Séance #1 Le web en 2013 - HTML5/CSS3/JS
  • 2. Description du module ● Le web en 2013 : 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, Grail & Play Framework ● Sortons un peu du monde JEE : ○ NodeJS, Dart ● Examen et TP
  • 3. Le web en 2013 : 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 2013, le responsive design ● Twitter Bootstrap ○ Outils, échafaudage, LessCSS, JQuery ● Le développeur web en 2013 ○ Rôles, technologies, langages, veille technologique
  • 5. Horacio Gonzalez Spaniard lost in Brittany, Java developer, dreamer and all-around geek ● Architecte technique au Crédit Mutuel Arkea ○ Direction Technique Informatique ● JUG Leader du FinistJUG http://lostinbrittany.org/ +Horacio.Gonzalez @LostInBrittany
  • 6. Sébastien Lambour Le développeur de l'Est le plus à l'Ouest, Java & C++ Developer, coder addict, continuous intégration ayatollah ● Référent technique au Crédit Mutuel Arkea ○ Direction des Etudes Informatiques sebastien.lambour@gmail.com +sebastien.lambour @FinistSeb
  • 7. David Herviou Java Developer, Programming addict, Curious about new technologies ● Responsable du service Méthodes Appliquées au Crédit Mutuel Arkéa mots clés : Architecture Applicative, Intégration Continue, Qualimétrie de code, Optimisation, GWT, Thrift, Java, Test de charge, Big Data, APM, Revue de Code, Testing... david.herviou@gmail.com +david.herviou @herviou
  • 9. Les bases du web ● Le Web, URLs, HTTP ● HTML ● CSS ● JavaScript
  • 11. Le Web ● Système hypertexte public fonctionnant sur internet qui permet de consulter, avec un navigateur, des ressources accessibles sur des sites (merci Wikipedia) Image : CIA
  • 13. URLs Uniform Resource Locator Chaîne de caractères utilisée pour adresser les ressources du web
  • 14. URL - Query string Chaîne de caractères envoyée au serveur ● Des données à passer à l'application web ● Personnalisation des contenus
  • 15. URL - Identifiant de fragment Chaîne de caractères interprétée par le navigateur ● Identifie une ressource dans le document reçu ● Jamais transmise au serveur
  • 16. HTTP HyperText Transfer Protocol Protocole de communication client-serveur développé pour le World Wide Web
  • 17. Requête HTTP ● En-têtes HTTP : Information ajoutée ○ Host : domaine appelé (serveurs multi-domaines) ○ User-Agent : indentifiant navigateur ○ Referer : Document duquel on vient ○ ... ● Méthode : Commande demandée ● Version : HTTP/1.0, HTTP/1.1
  • 18. Méthodes HTTP ● GET ● POST ● PUT ● DELETE ● HEAD ● TRACE ● OPTIONS ● CONNECT ● PATCH
  • 19. Réponses HTTP ● Ligne de Statut ● En-têtes HTTP : Information ajoutée ○ Date ○ Server : Info sur le serveur web ○ Content-Type : identifiant de format de données ○ Content-Length : taille en octets de la ressource ○ ...
  • 20. Web statique et web dynamique
  • 21. HTML
  • 22. HTML HyperText Markup Language Les documents HTML sont le cœur du web ● Composés de ○ Texte ○ Balisage ○ Références à d'autres documents ○ Liens
  • 24. Balises HTML Le contenu à marquer est délimité par des balises ● Balises de premier niveau ● Balises d'en-tête ● Balises de structuration du texte ● Balises de listes ● Balises de tableau ● Balises de formulaire ● Balises sectionnantes ● Balises génériques
  • 28. Les espaces et les sauts de ligne
  • 29. Éléments inline et éléments bloc
  • 30. Balises génériques : <span> et <div>
  • 31. CSS
  • 32. La mise en page HTML Image : Wikipedia
  • 33. La mise en page HTML Image : Mosaic
  • 34. La mise en page HMTL Sites Disney.com et Apple.com, 1997 Source : Wayback Machine
  • 35. La mise en page HMTL Site Disney.com, 1999 Source : Wayback Machine
  • 36. Les feuilles de style en cascade
  • 37. Principes des CSS ● Arbre logique du document ○ DOM ● Concept de boîte ● Propriétés et valeurs ● Sélecteurs et blocs de règles
  • 38. Objectifs des CSS ● Séparer la structure de la présentation ● Décliner les styles selon le récepteur ● Permettre la cascade des styles
  • 39. Le problème Problème : Support différent selon le navigateur ● Guerre des navigateurs ● Domination IE6 Technique du doctype switching ● Différents sous-ensembles de CSS 1 CSS 2 et CSS 2.1 jamais complètement implémentées
  • 40. L'exemple par excellence : CSS Zen Garden Source : CSS Zen Garden
  • 41. DOM
  • 42. L'arbre DOM Document Object Model ● Interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents XML (merci Wikipedia)
  • 44. Objectif : donner du dynamisme ● Né chez Netscape en 1995 ○ Adopté par Internet Explorer 3 en 1996 ○ Standardisé comme ECMAScript en 1997 ● Des scripts qui s'exécutent côté navigateur ○ Pages webs dynamiques, DHTML
  • 45. Caracteristiques de JavaScript ● Procédural et structuré ● Fonctionnel ○ Les fonctions sont objets de premier niveau ● Dynamique ○ Typage dynamique ○ Avec objets : tableaux associatifx (clé-valeur) ■ Propriétés dynamiques ● Basé sur des Prototypes ○ Héritage basé sur le clonage d'objets
  • 46. XMLHttpRequest ● Appeler un serveur depuis un script JS ○ Traiter la réponse directement depuis le script ○ Réponse en JSON, XML, HTML ou simple texte ● Origine : un ActiveX pour IE 5 (1998) ○ Ré-implémenté par Mozilla (2002), Safari (2004) ● Permet de la vraie interactivité client-serveur ○ Réponse synchrone ou asynchrone ● Sécurité : same origin policy
  • 47. AJAX Asynchronous JavaScript and XML ● Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches (merci Wikipedia) (c) Colgate-Palmolive Source : Wikipedia
  • 48. AJAX polling ● HTTP : modèle requête-réponse ● Applications riches : besoin de pousser des infos du serveur vers client ● Comment fait-on ?
  • 49. JSON Format de données ● Simple et générique ● Textuel et independant du langage ● Dérivé de la notation des objets en JS
  • 51. Des technologies à la base du web On a passé en revue les technologies de base du web Ces technologies sont encore très importantes aujourd'hui Si vous ne les maîtrisez pas, c'est le bon moment pour vous y mettre...
  • 53. Voulez-vous en savoir plus ? ● Wikipedia ○ HTML, CSS, JavaScript... ● Tutoriels ○ Developpez.com, HTML.net, CSS Faciles... ● En anglais ○ W3C's intro to HTML, W3C's intro to CSS, HTML Dog, w3schools.com...