ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

Click here to load reader

  • date post

    16-Apr-2017
  • Category

    Education

  • view

    2.604
  • download

    0

Embed Size (px)

Transcript of ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

  • Conception d'Applications Interactives :

    Applications Web et JEESance #1

    Ct navigateur HTML5 / CSS / JS / Polymer

    1/3 - HTTP, HTML, CSS, JS

  • Description du module Ct navigateur

    HTML5 / CSS / JS - Polymer, Twitter Bootstrap

    Ct serveur - Concepts Introduction JEE : servlets, JSP, frameworks - SparkJava

    Ct 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 exposes des projets

  • Les bases du web HTTP, URL, HTML, CSS, JS, AJAX...

    HTML5 HTML5, CSS3, le casse-tte des navigateurs... Le web en 2013, le responsive design

    Twitter Bootstrap Outils, chafaudage, LessCSS, JQuery

    Le dveloppeur web en 2014 Rles, technologies, langages, veille technologique

    Polymer Web components & Polymer

    Ct navigateur

  • Qui sommes nous

  • Horacio GonzalezSpaniard 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 Finistre et de la communaut BreizhBeans

    http://lostinbrittany.org/ +Horacio.Gonzalez @LostInBrittany

    http://lostinbrittany.org/https://plus.google.com/100578619938900089909/http://twitter.com/LostInBrittany

  • Sbastien LambourLe dveloppeur de l'Est le plus l'Ouest, Java & C++

    Developer, coder addict, continuous intgration 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

  • Xavier Marin

    Chef de projet et dveloppeur passionn au Crdit Mutuel Arka

    marin.xavier@gmail.com

  • Les bases du web

  • Les bases du web

    Le Web, URLs, HTTP HTML CSS JavaScript

  • Le Web, URLs, HTTP

  • Le Web

    Systme hypertexte public fonctionnant sur internet qui permet de consulter, avec un navigateur, des ressources accessibles sur des sites (merci Wikipedia)

    Image : CIA

    http://fr.wikipedia.org/wiki/World_Wide_Webhttps://www.cia.gov/library/center-for-the-study-of-intelligence/csi-publications/csi-studies/studies/vol49no3/html_files/Intelligence_Networking_6.htm

  • Principaux composants du web

  • Uniform Resource Locator

    Chane de caractres utilise pour adresser les ressources du web

    URLs

  • URL - Query string

    Chane de caractres envoye au serveur Des donnes passer l'application web Personnalisation des contenus

  • URL - Identifiant de fragment

    Chane de caractres interprte par le navigateur

    Identifie une ressource dans le document reu

    Jamais transmise au serveur

  • HTTP

    HyperText Transfer Protocol

    Protocole de communication client-serveur dvelopp pour le World Wide Web

  • Requte HTTP

    En-ttes HTTP : Information ajoute Host : domaine appel (serveurs multi-domaines) User-Agent : identifiant navigateur Referer : Document duquel on vient ...

    Mthode : Commande demande Version : HTTP/1.0, HTTP/1.1

  • Mthodes HTTP

    GET POST PUT DELETE

    HEAD TRACE OPTIONS CONNECT PATCH

  • Rponses HTTP

    Ligne de Statut En-ttes HTTP : Information ajoute

    Date Server : Info sur le serveur web Content-Type : identifiant de format de

    donnes Content-Length : taille en octets de la

    ressource ...

  • Web statique et web dynamique

  • HTML

  • HTML

    HyperText Markup Language

    Les documents HTML sont le cur du web

    Composs de Texte Balisage Rfrences d'autres documents Liens

  • Document HTML

  • Le contenu marquer est dlimit par des balises

    Balises HTML

    Balises de premier niveau Balises d'en-tte Balises de structuration du texte Balises de listes Balises de tableau Balises de formulaire Balises de section Balises gnriques

  • Balises de structuration du texte

  • Balises avec attributs

  • Balises vides

  • Les espaces et les sauts de ligne

  • lments inline et lments bloc

  • Balises gnriques : et

  • CSS

  • La mise en page HTML

    Image : Wikipedia

    http://fr.wikipedia.org/wiki/Lynx_(navigateur)

  • La mise en page HTML

    Image : Mosaic

    http://www.ncsa.illinois.edu/Projects/mosaic.html

  • La mise en page HMTL

    Sites Disney.com et Apple.com, 1997Source : Wayback Machine

    http://archive.org/web/web.php

  • La mise en page HMTL

    Site Disney.com, 1999Source : Wayback Machine

    http://archive.org/web/web.php

  • Les feuilles de style en cascade

  • Arbre logique du document DOM

    Concept de bote

    Proprits et valeurs

    Slecteurs et blocs de rgles

    Principes des CSS

  • Objectifs des CSS

    Sparer la structure de la prsentation

    Dcliner les styles selon le rcepteur

    Permettre la cascade des styles

  • Le problme

    Problme : Support diffrent selon le navigateur

    Guerre des navigateurs

    Domination IE6

    Technique du doctype switching Diffrents sous-ensembles de CSS 1

    CSS 2 et CSS 2.1 jamais compltement implmentes

  • L'exemple par excellence : CSS Zen Garden

    Source : CSS Zen Garden

    http://www.csszengarden.com

  • DOM

  • L'arbre DOMDocument Object Model

    Interface indpendante de tout langage de programmation et de toute plate-forme, permettant des programmes informatiques et des scripts d'accder 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'excutent ct navigateur Pages webs dynamiques, DHTML

  • Caracteristiques de JavaScript

    Procdural et structur

    Fonctionnel Les fonctions sont objets de premier niveau

    Dynamique Typage dynamique Avec objets : tableaux associatif (cl-valeur)

    Proprits dynamiques

    Bas sur des Prototypes Hritage bas sur le clonage d'objets

  • XMLHttpRequest

    Appeler un serveur depuis un script JS Traiter la rponse directement depuis le script Rponse en JSON, XML, HTML ou simple texte

    Origine : un ActiveX pour IE 5 (1998) R-implment par Mozilla (2002), Safari (2004)

    Permet de la vraie interactivit client-serveur Rponse synchrone ou asynchrone

    Scurit : same origin policy

  • AJAX

    Asynchronous JavaScript and XML

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

    (c) Colgate-PalmoliveSource : Wikipedia

    http://en.wikipedia.org/wiki/Ajax_(cleaning_product)

  • AJAX polling HTTP : modle requte-rponse Applications riches : besoin de pousser des infos du serveur vers client

    Comment fait-on ?

  • Conclusions

  • Des technologies la base du web

    On a pass en revue les technologies de base du web

    Ces technologies sont encore trs importantes aujourd'hui

    Si vous ne les matrisez 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...

    http://fr.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascadehttp://fr.wikipedia.org/wiki/JavaScripthttp://fr.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://web.developpez.com/cours/http://fr.html.net/tutorials/html/http://www.css-faciles.com/http://web.developpez.com/cours/http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/Stylehttp://www.w3.org/MarkUp/Guide/http://htmldog.com/http://www.w3schools.com/http://htmldog.com/