Introduction dans la Programmation Web

Vlad Poseavladposea@yahoo.com

http://vlad.posea.eu

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