1.
Introduction dans la Programmation Web Vlad Posea [email_address] http://vlad.posea.eu

2.
Les Objectives du Course <ul><li>Comprendre qu’est que c’est une application web </li></ul><ul><li>Etre capable a développer une simple application web </li></ul><ul><li>Développer les patterns mentales nécessaires a adapter a l’evolution rapide des technologies web </li></ul>

3.
Qu’est que je veux que vous faites <ul><li>Posez des questions - ne rien laisser sans réponse (parfois, je vais essayer de lui demander pour vous) </li></ul><ul><li>Pourquoi poser des questions? </li></ul><ul><ul><li>Afin de comprendre quelque chose dont vous avez besoin a obtenir des réponses </li></ul></ul><ul><ul><li>vous avez besoin de vouloir obtenir des réponses </li></ul></ul><ul><ul><li>Vous avez besoin de savoir quelles questions poser </li></ul></ul><ul><li>Travailler individuellement </li></ul><ul><ul><li>Pourquoi? L'apprentissage se produit lorsque vous travaillez et découvrez. C'est ainsi que la connaissance est construite dans votre tête </li></ul></ul>

4.
Qu'est-ce que nous allons étudier <ul><li>Le Web - courte histoire, la raison pour laquelle il a été élaboré, comment il a évolué, où va-t-il </li></ul><ul><li>Comment fonctionne le web, le protocole HTTP </li></ul><ul><li>Les technologies du Web </li></ul><ul><li>(X) HTML </li></ul><ul><li>JavaScript </li></ul>

5.
Qu'est-ce que vous allez faire dans le laboratoire <ul><li>Ecrire des pages Web utilisant le HTML et CSS </li></ul><ul><li>Développer des fonctions interactives utilisant Javascript </li></ul><ul><li>Développer une application Web en utilisant les techniques apprises </li></ul>

6.
Comment vous obtenez des points <ul><li>Les points que vous recevez récompense: </li></ul><ul><ul><li>La compréhension des concepts enseignés dans le cours (examen 4p + 1p tests de courte durée) </li></ul></ul><ul><ul><li>Les compétences acquises dans le laboratoire (2.5p travail individuel en laboratoire) </li></ul></ul><ul><ul><li>Les compétences acquises par le travail et l'étude individuel (2.5p) </li></ul></ul><ul><li>POUR PASSER: > = 2p examen > = 2.5p labo > = 5p score total </li></ul>

7.
Comment vous perdez des points <ul><li>Tricher – vous serez expulsé ou échouerez à l'examen </li></ul><ul><li>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 </li></ul>

8.
Plan du cours <ul><li>Introduction + courte histoire + structure du Web </li></ul><ul><li>XML, (X) HTML (1) </li></ul><ul><li>(X)HTML (2) +Cascading Style-Sheets </li></ul><ul><li>Cascading Style Sheets (CSS) </li></ul><ul><li>Client-side scripting languages - Introduction au JavaScript (1) </li></ul><ul><li>JavaScript (2) </li></ul>

9.
Lab Plan (1) <ul><li>Introduction, courte histoire, utiliser le web </li></ul><ul><li>Le langage html – développer une page web simple </li></ul><ul><li>Outils avancées pour développer des pages web </li></ul><ul><li>Use CSS to transform the page designed at the previous lab. </li></ul><ul><li>Javascript – introduction, validation des formulaires </li></ul>

10.
Courte histoire du Web <ul><li>Pourquoi est-il nécessaire? ? </li></ul><ul><ul><li>Le WWW a eu une évolution très rapide </li></ul></ul><ul><ul><li>Les technologies changent très rapidement </li></ul></ul><ul><ul><li>Innovation presque toujours porte des énormes avantages pour les innovateurs </li></ul></ul><ul><ul><li>Dans le but d'innover, vous avez besoin a comprendre l'évolution du web </li></ul></ul><ul><ul><li>Vous avez besoin de comprendre où va le web </li></ul></ul>

11.
Avant le web <ul><li>Internet était déjà existant </li></ul><ul><li>Ressources sur l'internet ont été trouvés en utilisant des outils comme la ligne de commande ftp </li></ul><ul><li>Exemple: </li></ul><ul><ul><li>Exécuter programme ftp </li></ul></ul><ul><ul><li>Entrez &quot;C hôte&quot; (se connecte à un serveur) </li></ul></ul><ul><ul><li>Entrez un nom d'utilisateur </li></ul></ul><ul><ul><li>Entrez le mot de passe </li></ul></ul><ul><ul><li>Ls (liste de fichiers) </li></ul></ul><ul><ul><li>Télécharger le fichier </li></ul></ul><ul><ul><li>Cd (change directory) </li></ul></ul><ul><li>Il n'y avait pas de liens </li></ul><ul><li>Il fallait savoir où l'information a été </li></ul>

12.
Le web et l’internet <ul><li>“ 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 </li></ul>

13.
L’invention <ul><li>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 - &quot;World Wide Web&quot; 1991 - premier serveur web 1993 - &quot;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. &quot; </li></ul>

14.
L’histoire du Web <ul><li>1992-93 – les sites des organisations publiques et d’administration de web - worldbank.org, whitehouse.gov, ripe.net (manages ip’s) </li></ul><ul><li>1994 Yahoo! </li></ul><ul><li>1994 – le navigateur netscape </li></ul><ul><li>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 </li></ul><ul><li>1996 - ASP </li></ul><ul><li>1997 – flash player 2 – actuellement sur 99% des ordinateurs du monde </li></ul>

15.
L’histoire de web <ul><li>1998 – google </li></ul><ul><li>1999 – microsoft passport (un façon d’identification sur des multiples sites web avec une single identité) </li></ul><ul><li>1999 – rss – rich site summary – obtenir des actualisations en temps réels de vôtres sites favorites </li></ul><ul><li>1999 – l’apparition des blogs </li></ul><ul><li>2000 – l’invention de XHTML </li></ul><ul><li>2001 – wikipedia – maintenant la plus grande encyclopédie du monde </li></ul><ul><li>2004 - facebook </li></ul>

16.
Comment a évolué le web (Yahoo)

17.
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

18.
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

19.
Conclusions <ul><li>World wide web a d'abord été un moyen de lier des documents texte </li></ul><ul><li>WWW a évolué en </li></ul><ul><ul><li>Fournir des différents types de contenus (images, vidéo) </li></ul></ul><ul><ul><li>offrant des services aux personnes (des jeux, des réponses aux questions, nouveautés) </li></ul></ul><ul><ul><li>Fournir des moyens pour les gens à créer du contenu (wikis, forums, des applications de réseautage social, blogs) </li></ul></ul><ul><ul><li>Fournir des services pour les ordinateurs </li></ul></ul><ul><li>Le contenu a été statiques - les pages de texte qui ont été rarement changé et seulement par le propriétaire </li></ul><ul><ul><li>Le contenu est devenu dynamique mise à jour de la base de données du serveur </li></ul></ul><ul><ul><li>Contenu est maintenant actualise en temps réel (sans actualiser la page en utilisant des technologies asynchrones) </li></ul></ul><ul><ul><li>Le contenu provient de différentes sources et il est agrégées sur une page </li></ul></ul>

20.
Client - Serveur architecture <ul><li>Les clients communiquent avec un serveur unique </li></ul><ul><li>Le serveur attend les connexions </li></ul><ul><li>Le client initie la communication </li></ul><ul><li>Serveur reçoit une requête et envoie une réponse </li></ul><ul><li>Client reçoit la réponse et décides s’il veut poursuivre la communication </li></ul><ul><li>Exemples: e-mail, dns, http </li></ul>

21.
Peer to peer architecture <ul><li>Il n'y a pas de serveur dans le réseau </li></ul><ul><li>Les clients communiquent entre eux </li></ul><ul><li>Il n'y a pas d’entités intermédiaires </li></ul><ul><li>Utilisé principalement dans le partage des ressources </li></ul><ul><li>Exemples: napster, kazaa, direct connect, bitTorrent </li></ul>

22.
Avantages et inconvénients de l'architecture client-serveur <ul><li>Avantages </li></ul><ul><ul><li>Beaucoup de différents types de clients, un protocole commun </li></ul></ul><ul><ul><li>Les ressources sont centralisées sur un serveur - plus faciles à trouver et à distribuer </li></ul></ul><ul><li>Inconvénients </li></ul><ul><ul><li>Point de défaillance unique (si le serveur est en panne les clients ne reçoivent pas les réponses) </li></ul></ul><ul><ul><li>Le plus grand nombre de clients => les temps de réponse du serveur est plus grand </li></ul></ul>

23.
Le protocole HTTP <ul><li>HTTP - Hypertext Transfer Protocol. </li></ul><ul><li>Protocole client-serveur </li></ul><ul><li>Http serveur – serveur web (Apache, IIS) </li></ul><ul><li>Http client – navigateur (IE, Firefox, Chrome, Opera, Safari) </li></ul><ul><li>Http = protocole utilisé pour transmettre des ressources sur Internet </li></ul>

24.
Protocole HTTP - Glossaire de base (RFC 2616) <ul><li>Connexion - Une couche de transport circuit virtuel établi entre deux programmes aux fins de la communication. </li></ul><ul><li>Message - L'unité de base de communication HTTP, transmis par la connexion. </li></ul><ul><li>Requête - Un message de requête HTTP </li></ul><ul><li>Réponse - Un message de réponse HTTP </li></ul><ul><li>Ressource - Un objet ou service qui peut être identifié par une URI (adresse d'une ressource) ) </li></ul>

25.
Protocole HTTP - Glossaire de base (RFC 2616) <ul><li>Client - Un programme qui établit les connexions envoi des requêtes et accepte des réponses </li></ul><ul><li>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. </li></ul><ul><li>Server - Un programme d'application qui accepte les connexions pour les demandes de service et envoi des réponses. </li></ul><ul><li>inbound/outbound - entrants et sortants se référer à la demande et de réponse aux messages des chemins: “inbound&quot; signifie &quot;voyage vers le serveur d'origine&quot;, et &quot;outbound&quot; signifie &quot;voyage vers l'agent utilisateur&quot; </li></ul>

26.
Qu'est-ce qu'une URL? <ul><li>URL = &quot;http:&quot; &quot;//&quot; host [ &quot;:&quot; port ] [ abs_path [ &quot;?&quot; query ]] </li></ul><ul><li>Examples: </li></ul><ul><ul><li>http:// www.google.com </li></ul></ul><ul><ul><li>http:// www.google.com : 80 / ig ? refresh=1 </li></ul></ul><ul><li>Le port 80 est le paramètre par défaut </li></ul><ul><li>Les hôtes sont insensibles à la casse </li></ul><ul><li>Les chemins sont sensibles à la casse </li></ul><ul><li>Certains des caractères réservés sont &quot;codés“ </li></ul><ul><li>Encodage signifie que représente un code ASCII hexadécimal </li></ul><ul><li>Exemple: “ “ = “%20” </li></ul><ul><li>http://tools.ietf.org/html/rfc2396 </li></ul>

27.
Structure d'un message HTTP <ul><li>Ligne du requête / Ligne d’état </li></ul><ul><ul><li>Exemple: GET /index.html HTTP/1.1 </li></ul></ul><ul><ul><li>GET= Méthode de Requeté </li></ul></ul><ul><li>Headers – je ne veux pas traduire ca  </li></ul><ul><li>Ligne vide </li></ul><ul><li>Corps de message - facultatif </li></ul>

28.
HTTP Requeté méthodes (les plus importantes) <ul><li>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) </li></ul><ul><li>POST – présente les données (généralement un formulaire) qui doivent être traitées </li></ul><ul><li>PUT – mets une ressource sur le serveur </li></ul><ul><li>HEAD – identique à un GET, mais ne reçoit que les headers </li></ul><ul><li>DELETE – supprime une ressource </li></ul>

29.
Lignes d’état <ul><li>La première ligne d'une réponse HTTP </li></ul><ul><li>Types de codes d'état sont les suivants: </li></ul><ul><li>1xx – information - habituellement des réponses provisoires </li></ul><ul><li>2xx – succès </li></ul><ul><ul><li>200 Success – réponse standard en l'absence des erreurs </li></ul></ul><ul><ul><li>201 Created – la ressource a été créé sur le serveur </li></ul></ul><ul><li>3xx redirections </li></ul><ul><ul><li>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 </li></ul></ul>

30.
Lignes d’état <ul><li>Types of status codes are: </li></ul><ul><ul><li>3xx redirects </li></ul></ul><ul><ul><ul><li>302 Found – même comportement que 303 - code de redirection </li></ul></ul></ul><ul><ul><ul><li>303 See Other – de base rediriger vers une nouvelle ressource (un nouvel GET est requis) </li></ul></ul></ul><ul><ul><li>4xx Erreurs </li></ul></ul><ul><ul><ul><li>400 Bad Request </li></ul></ul></ul><ul><ul><ul><li>401 Not Authorized – certains sites nécessitent une authentification HTTP </li></ul></ul></ul><ul><ul><ul><li>403 Forbidden – l'accès à la ressource est refusé </li></ul></ul></ul><ul><ul><ul><li>404 Not Found – la ressource demandée n'est pas là </li></ul></ul></ul>

31.
HTTP Headers <ul><li>Utilisé pour définir les caractéristiques des données demandées ou prévues </li></ul><ul><li>Host – le nom du serveur (peut être beaucoup de machines sur une seule adresse IP) </li></ul><ul><li>Accept – type de ressource acceptés </li></ul><ul><li>Content-type – le type de contenu média ( http://en.wikipedia.org/wiki/Mime_type ) </li></ul><ul><li>Authorization – données requises pour l'authentification </li></ul><ul><li>Referer – le lien de l'endroit où nous avons atteint la page en cours (important dans l'analyse du trafic) </li></ul>

32.
HTTP Headers <ul><li>Cache-control – si le contenu doit être mis dans le cache </li></ul><ul><li>Content-Language </li></ul><ul><li>Location – pour implémenter la redirection </li></ul>

33.
User sessions & HTTP <ul><li>HTTP est un protocole sans état, les demandes ne sont pas connectés sur le serveur </li></ul><ul><li>&quot;Le support des sessions en PHP se compose d'un moyen de préserver certaines des données à travers des accès ultérieurs&quot; http://www.php.net/sessions </li></ul><ul><li>Les séances ne peuvent pas être mises en œuvre au niveau HTTP parce-que le protocole n'a pas de &quot;mémoire&quot; </li></ul><ul><li>Nous avons besoin de stocker des informations sur les accès ultérieurs </li></ul>

34.
Exemple <ul><li>Envoi une requête HTTP </li></ul><ul><ul><li>Vérifiez les “headers” envoie – use LiveHTTPHeaders https://addons.mozilla.org/en-US/firefox/addon/3829 </li></ul></ul><ul><ul><li>Vérifiez les headers reçu </li></ul></ul><ul><ul><li>Vérifiez le corps du message </li></ul></ul>

35.
Résulté <ul><li>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: </li></ul><ul><li>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 </li></ul><ul><li>http://www.google.com/ GET / HTTP/1.1 Host: www.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 </li></ul><ul><li>Response: HTTP/1.x 302 Found Location: http://www.google.ro/ Cache-Control: private Content-Type: text/html; charset=UTF-8 Date: Tue, 03 Mar 2009 05:59:25 GMT Server: gws Content-Length: 218 </li></ul>

36.
References <ul><li>http://www.wakeuplater.com/website-building/evolution-of-websites-10-popular-websites.aspx (images in slides How the web evolved) </li></ul><ul><li>http://www.w3.org/History.html </li></ul><ul><li>http://www.w3.org/People/Berners-Lee/FAQ.html </li></ul><ul><li>http://www.zakon.org/robert/internet/timeline/ </li></ul>

37.
http://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gif