Les Objectives du Course
• Comprendre qu’est que c’est une application web
• Etre capable a développer une simple application web
• Développer les patterns mentales nécessaires a adapter a l’evolution rapide des technologies web
Qu’est que je veux que vous faites
• Posez des questions - ne rien laisser sans réponse (parfois, je vais essayer de lui demander pour vous)
• Pourquoi poser des questions? – Afin de comprendre quelque chose dont vous avez besoin
a obtenir des réponses – vous avez besoin de vouloir obtenir des réponses – Vous avez besoin de savoir quelles questions poser
• Travailler individuellement– Pourquoi? L'apprentissage se produit lorsque vous
travaillez et découvrez. C'est ainsi que la connaissance est construite dans votre tête
Qu'est-ce que nous allons étudier
• Le Web - courte histoire, la raison pour laquelle il a été élaboré, comment il a évolué, où va-t-il
• Comment fonctionne le web, le protocole HTTP
• Les technologies du Web • (X) HTML • JavaScript
Qu'est-ce que vous allez faire dans le laboratoire
• Ecrire des pages Web utilisant le HTML et CSS• Développer des fonctions interactives utilisant
Javascript• Développer une application Web en utilisant
les techniques apprises
Comment vous obtenez des points • Les points que vous recevez récompense:
– La compréhension des concepts enseignés dans le cours (examen 4p + 1p tests de courte durée)
– Les compétences acquises dans le laboratoire (2.5p travail individuel en laboratoire)
– Les compétences acquises par le travail et l'étude individuel (2.5p)
• POUR PASSER: > = 2p examen > = 2.5p labo> = 5p score total
Comment vous perdez des points
• Tricher – vous serez expulsé ou échouerez à l'examen
• Non-exécution de votre travail au term - vous perdez des points en cas de retard Ne pas être là - les laboratoires et les tests ne peuvent pas être re-prises en cas d'absence
Plan du cours 1. Introduction + courte histoire + structure du Web 2. XML, (X) HTML (1)3. (X)HTML (2) +Cascading Style-Sheets 4. Cascading Style Sheets (CSS)5. Client-side scripting languages - Introduction au JavaScript
(1)6. JavaScript (2)
Lab Plan (1)
1. Introduction, courte histoire, utiliser le web2. Le langage html – développer une page web
simple 3. Outils avancées pour développer des pages web 4. Use CSS to transform the page designed at the
previous lab. 5. Javascript – introduction, validation des
formulaires
Courte histoire du Web
• Pourquoi est-il nécessaire? ?– Le WWW a eu une évolution très rapide – Les technologies changent très rapidement – Innovation presque toujours porte des énormes
avantages pour les innovateurs – Dans le but d'innover, vous avez besoin a
comprendre l'évolution du web – Vous avez besoin de comprendre où va le web
Avant le web• Internet était déjà existant • Ressources sur l'internet ont été trouvés en utilisant des
outils comme la ligne de commande ftp • Exemple:
– Exécuter programme ftp – Entrez "C hôte" (se connecte à un serveur) – Entrez un nom d'utilisateur – Entrez le mot de passe – Ls (liste de fichiers) – Télécharger le fichier – Cd (change directory)
• Il n'y avait pas de liens • Il fallait savoir où l'information a été
Le web et l’internet• “The Web is an abstract (imaginary) space of
information. On the Net, you find computers -- on the Web, you find document, sounds, videos,.... information. On the Net, the connections are cables between computers; on the Web, connections are hypertext links. The Web exists because of programs which communicate between computers on the Net. The Web could not be without the Net. The Web made the net useful because people are really interested in information (not to mention knowledge and wisdom!) and don't really want to have know about computers and cables.” – Tim Berners Lee – the inventor of the web
L’invention
• 1989 - Tim Berners Lee propose au CERN, une façon d'organiser l'information à l'aide d'hyperliens 1990 – Tim Berners Lee développe le premier navigateur - "World Wide Web" 1991 - premier serveur web 1993 - "Date de la déclaration par l'administration de CERN ou il dit que WWW technologie serait librement utilisable par toute personne, sans honoraires à payer au CERN. "
L’histoire du Web• 1992-93 – les sites des organisations publiques et
d’administration de web - worldbank.org, whitehouse.gov, ripe.net (manages ip’s)
• 1994 Yahoo!• 1994 – le navigateur netscape • 1994 - World Wide Web Consortium (W3C)
l’organisation qui se preoccupe avec les standards web1995 – altavista, e-bay, javascript, HTML (http://en.wikipedia.org/wiki/HTML ), PHP
• 1996 - ASP• 1997 – flash player 2 – actuellement sur 99% des
ordinateurs du monde
L’histoire de web• 1998 – google • 1999 – microsoft passport (un façon
d’identification sur des multiples sites web avec une single identité)
• 1999 – rss – rich site summary – obtenir des actualisations en temps réels de vôtres sites favorites
• 1999 – l’apparition des blogs• 2000 – l’invention de XHTML• 2001 – wikipedia – maintenant la plus grande
encyclopédie du monde • 2004 - facebook
Comment a évolué le web (Yahoo)
Comment a évolué le web (Amazon)
Amazon 1999 – des catégories, des produits recommandes, des comptes des utilisateurs, tentatives de personnalisation
Amazon 2009 – + recommandations personnalisés, blogs, meilleure organisation de contenu
Comment a évolué le web (Apple)2008 - L'interface simple, utilise des animations flash, Plus de contenu, l'espace mieux utilisées, personnalisation
Apple 2004 – interface reste simple, espace est mieux utilise, peux changements
Conclusions• World wide web a d'abord été un moyen de lier des documents
texte • WWW a évolué en
– Fournir des différents types de contenus (images, vidéo) – offrant des services aux personnes (des jeux, des réponses aux
questions, nouveautés) – Fournir des moyens pour les gens à créer du contenu (wikis, forums,
des applications de réseautage social, blogs)– Fournir des services pour les ordinateurs
• Le contenu a été statiques - les pages de texte qui ont été rarement changé et seulement par le propriétaire– Le contenu est devenu dynamique mise à jour de la base de données
du serveur– Contenu est maintenant actualise en temps réel (sans actualiser la
page en utilisant des technologies asynchrones)– Le contenu provient de différentes sources et il est agrégées sur une
page
Client - Serveur architecture Les clients communiquent avec un
serveur unique Le serveur attend les connexions Le client initie la communication Serveur reçoit une requête et envoie
une réponse Client reçoit la réponse et décides
s’il veut poursuivre la communication
Exemples: e-mail, dns, http
Peer to peer architecture Il n'y a pas de serveur dans le
réseau Les clients communiquent
entre eux Il n'y a pas d’entités
intermédiaires Utilisé principalement dans le
partage des ressources Exemples: napster, kazaa,
direct connect, bitTorrent
Avantages et inconvénients de l'architecture client-serveur
Avantages Beaucoup de différents types de clients, un protocole
commun Les ressources sont centralisées sur un serveur - plus
faciles à trouver et à distribuer Inconvénients
Point de défaillance unique (si le serveur est en panne les clients ne reçoivent pas les réponses)
Le plus grand nombre de clients => les temps de réponse du serveur est plus grand
Le protocole HTTP
HTTP - Hypertext Transfer Protocol. Protocole client-serveur Http serveur – serveur web (Apache, IIS) Http client – navigateur (IE, Firefox, Chrome,
Opera, Safari) Http = protocole utilisé pour transmettre des
ressources sur Internet
Protocole HTTP - Glossaire de base (RFC 2616)
Connexion - Une couche de transport circuit virtuel établi entre deux programmes aux fins de la communication.
Message - L'unité de base de communication HTTP, transmis par la connexion.
Requête - Un message de requête HTTP Réponse - Un message de réponse HTTP Ressource - Un objet ou service qui peut être
identifié par une URI (adresse d'une ressource) )
Protocole HTTP - Glossaire de base (RFC 2616)
Client - Un programme qui établit les connexions envoi des requêtes et accepte des réponses
user agent - Le client qui initie une demande. Ce sont souvent les navigateurs, les éditeurs, les spiders (robots parcourant le Web), ou d'autres outils de l'utilisateur final.
Server - Un programme d'application qui accepte les connexions pour les demandes de service et envoi des réponses.
inbound/outbound - entrants et sortants se référer à la demande et de réponse aux messages des chemins: “inbound" signifie "voyage vers le serveur d'origine", et "outbound" signifie "voyage vers l'agent utilisateur"
Qu'est-ce qu'une URL? URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] Examples:
http://www.google.com http://www.google.com:80/ig?refresh=1
Le port 80 est le paramètre par défaut Les hôtes sont insensibles à la casse Les chemins sont sensibles à la casse Certains des caractères réservés sont "codés“ Encodage signifie que représente un code ASCII
hexadécimal Exemple: “ “ = “%20” http://tools.ietf.org/html/rfc2396
Structure d'un message HTTP
Ligne du requête / Ligne d’état Exemple: GET /index.html HTTP/1.1 GET= Méthode de Requeté
Headers – je ne veux pas traduire ca Ligne vide Corps de message - facultatif
HTTP Requeté méthodes (les plus importantes)
GET – demande une ressource spécifique (peut envoyer des paramètres qui modifient les ressources, mais il est préférable de ne pas faire)
POST – présente les données (généralement un formulaire) qui doivent être traitées
PUT – mets une ressource sur le serveur HEAD – identique à un GET, mais ne reçoit
que les headers DELETE – supprime une ressource
Lignes d’état
• La première ligne d'une réponse HTTP • Types de codes d'état sont les suivants: • 1xx – information - habituellement des réponses
provisoires • 2xx – succès
• 200 Success – réponse standard en l'absence des erreurs• 201 Created – la ressource a été créé sur le serveur
• 3xx redirections• 301 Moved Permanently – la ressource a été déplacée à l'URI
spécifiée et la prochaine demande doit être faite à la nouvelle URI
Lignes d’état
• Types of status codes are:• 3xx redirects
• 302 Found – même comportement que 303 - code de redirection • 303 See Other – de base rediriger vers une nouvelle ressource (un
nouvel GET est requis)
• 4xx Erreurs• 400 Bad Request • 401 Not Authorized – certains sites nécessitent une
authentification HTTP • 403 Forbidden – l'accès à la ressource est refusé • 404 Not Found – la ressource demandée n'est pas là
HTTP Headers Utilisé pour définir les caractéristiques des données
demandées ou prévues Host – le nom du serveur (peut être beaucoup de machines
sur une seule adresse IP) Accept – type de ressource acceptés Content-type – le type de contenu média
(http://en.wikipedia.org/wiki/Mime_type) Authorization – données requises pour l'authentification Referer – le lien de l'endroit où nous avons atteint la page
en cours (important dans l'analyse du trafic)
HTTP Headers
• Cache-control – si le contenu doit être mis dans le cache
• Content-Language• Location – pour implémenter la redirection
User sessions & HTTP
• HTTP est un protocole sans état, les demandes ne sont pas connectés sur le serveur
• "Le support des sessions en PHP se compose d'un moyen de préserver certaines des données à travers des accès ultérieurs" http://www.php.net/sessions
• Les séances ne peuvent pas être mises en œuvre au niveau HTTP parce-que le protocole n'a pas de "mémoire"
• Nous avons besoin de stocker des informations sur les accès ultérieurs
Exemple
1. Envoi une requête HTTP 1. Vérifiez les “headers” envoie – use
LiveHTTPHeaders https://addons.mozilla.org/en-US/firefox/addon/3829
2. Vérifiez les headers reçu3. Vérifiez le corps du message
Résulté•http://google.com/ GET / HTTP/1.1 Host: google.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=aee3d09e6859909c:CR=1:•Response:HTTP/1.x 301 Moved Permanently Location: http://www.google.com/ Content-Type: text/html; charset=UTF-8 Date: Tue, 03 Mar 2009 05:59:25 GMT Expires: Thu, 02 Apr 2009 05:59:25 GMT Cache-Control: public, max-age=2592000 Server: gws Content-Length: 219
•http://www.google.com/GET / HTTP/1.1Host: www.google.comUser-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-alive•Response: HTTP/1.x 302 Found Location: http://www.google.ro/Cache-Control: privateContent-Type: text/html; charset=UTF-8Date: Tue, 03 Mar 2009 05:59:25 GMTServer: gwsContent-Length: 218
References
• http://www.wakeuplater.com/website-building/evolution-of-websites-10-popular-websites.aspx (images in slides How the web evolved)
• http://www.w3.org/History.html• http://www.w3.org/People/Berners-Lee/
FAQ.html • http://www.zakon.org/robert/internet/
timeline/
http://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gif