2. Description du module
● Côté navigateur
○ HTML5 / CSS / JS - Polymer, Twitter Bootstrap
● Côté serveur - Concepts
○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava
● Côté serveur - NodeJS
○ NodeJS, ExpressJS, APIs
● Forge JavaScript et Web Components
○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman
● Autour de la webapp
○ Forge logicielle en Java - Test-driven development
● Examen et exposées des projets
3. ● 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 2014
○ Rôles, technologies, langages, veille technologique
● Polymer
○ Web components & Polymer
Côté navigateur
5. Horacio Gonzalez
Spaniard lost in Brittany, Java developer,
dreamer and all-around geek
● Senior Software Engineer at Cityzen Data
○ Cityzen Data provides a scalable, secure, ethical
and open platform for sensor data
● Leader du FinistJUG, du GDG Finistère
et de la communauté BreizhBeans
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
● Senior Software Engineer at Cityzen Data
○ Cityzen Data provides a scalable, secure, ethical
and open platform for sensor data
sebastien.lambour@gmail.com
+sebastien.lambour
@FinistSeb
7. Xavier Marin
● Chef de projet et développeur passionné
au Crédit Mutuel Arkéa
marin.xavier@gmail.com
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
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
17. Requête HTTP
● En-têtes HTTP : Information ajoutée
○ Host : domaine appelé (serveurs multi-domaines)
○ User-Agent : identifiant 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
○ ...
24. Le contenu à marquer est délimité par des balises
Balises HTML
● Balises de premier niveau
● Balises d'en-tête
● Balises de structuration du texte
● Balises de listes
● Balises de tableau
● Balises de formulaire
● Balises de section
● Balises génériques
37. ● Arbre logique du document
○ DOM
● Concept de boîte
● Propriétés et valeurs
● Sélecteurs et blocs de règles
Principes des CSS
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
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 associatif (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 ?
50. 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...
52. 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...