Le document présente un cours sur le développement d'applications web, abordant des technologies clés comme HTML5, CSS, JavaScript et Angular. Il couvre également des concepts liés au côté serveur, l'écosystème des webapps, et les fondations du web incluant le protocole HTTP, les requêtes, et les différents types de contenu. Enfin, le document propose des ressources pour approfondir les connaissances en développement web.

1. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Conception d'Applications
Interactives :
Applications Web
Séance #1 - Côté navigateur
HTML5 / CSS / JS / Angular
1/3 - HTTP, HTML, CSS, JS

2. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Description du module
● Côté navigateur
○ HTML5 / CSS / JS - Angular
● Côté serveur - Concepts
○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava
● Forge JavaScript
○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman
● Côté serveur - NodeJS
○ NodeJS, ExpressJS, APIs
● Écosystème de la webapp
○ Introduction à NoSQL : MongoDB, Redis, Cassandra…
● Autour de la webapp
○ Forge logicielle en Java - Test-driven development
● Examen et exposées des projets

3. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
● Les bases du web
○ HTTP, URL, HTML, CSS, JS, AJAX...
● HTML5, CSS3
○ HTML5, CSS3, living standard, le casse-tête des navigateurs...
○ Le web en 2016, mobile first, le responsive design...
● Twitter Bootstrap
○ Outils, échafaudage, LessCSS, JQuery
● Le développeur web en 2017
○ Rôles, technologies, langages, veille technologique
● Angular
Côté navigateur

4. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Qui sommes nous

5. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Horacio Gonzalez
@LostInBrittany
Cityzen Data
http://cityzendata.com
Spaniard lost in Brittany,
developer, dreamer and
all-around geek

6. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Xavier Marin
● Chef de projet et développeur passionné
au Crédit Mutuel Arkéa
● CTO chez @qaobee
marin.xavier@gmail.com
@XavMarin

7. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Les bases du web

8. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Les bases du web
● Le Web, URLs, HTTP
● HTML
● CSS
● JavaScript

9. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Le Web, URLs, HTTP

10. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

11. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Principaux composants du web

12. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les
ressources du web
URLs

13. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
URL - Query string
Chaîne de caractères envoyée au serveur
● Des données à passer à l'application web
● Personnalisation des contenus

14. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

15. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur
développé pour le World Wide Web

16. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

17. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Méthodes HTTP
● GET
● POST
● PUT
● DELETE
● HEAD
● TRACE
● OPTIONS
● CONNECT
● PATCH

18. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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
○ ...

19. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Web statique et web dynamique

20. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
HTML

21. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

22. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Document HTML

23. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

24. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Balises de structuration du texte

25. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Balises avec attributs

26. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Balises auto-fermantes

27. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Les espaces et les sauts de ligne

28. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Éléments inline et éléments bloc

29. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Balises génériques : <span> et <div>

30. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
CSS

31. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
La mise en page HTML
Image : Wikipedia

32. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
La mise en page HTML
Image : Mosaic

33. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
La mise en page HMTL
Sites Disney.com et Apple.com, 1997
Source : Wayback Machine

34. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
La mise en page HMTL
Site Disney.com, 1999
Source : Wayback Machine

35. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Les feuilles de style en cascade

36. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
● Arbre logique du document
○ DOM
● Concept de boîte
● Propriétés et valeurs
● Sélecteurs et blocs de règles
Principes des CSS

37. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Objectifs des CSS
● Séparer la structure de la présentation
● Décliner les styles selon le récepteur
● Permettre la cascade des styles

38. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Le problème
Problème : Support différent selon le navigateur
● Guerre des navigateurs
● Domination IE6
● CSS 2 et CSS 2.1 jamais complètement implémentées
○ Technique du doctype switching
○ Différents sous-ensembles de CSS 1

39. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
L'exemple par excellence :
CSS Zen Garden
Source : CSS Zen Garden

40. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
DOM

41. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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)

42. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
JavaScript

43. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

44. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Caractéristiques de JavaScript
● Impératif 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

45. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

46. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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

47. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
● HTTP : modèle requête-réponse
● Applications riches : besoin de pousser des infos du serveur vers client
● Comment fait-on ?
AJAX polling

48. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Conclusions

49. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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...

50. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
Voulez-vous en savoir plus ?

51. Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème
semestre
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...