Introduction dans la Programmation Web Vlad Posea

Présentation au sujet: "Introduction dans la Programmation Web Vlad Posea"— Transcription de la présentation:

1 Introduction dans la Programmation Web Vlad Posea vladposea@yahoo.com http://vlad.posea.eu

2 Les Objectives du Course Comprendre quest que cest une application web Etre capable a développer une simple application web Développer les patterns mentales nécessaires a adapter a levolution rapide des technologies web

3 Quest 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

4 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 HTML JavaScript PHP

5 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 Utiliser PHP pour faire la partie serveur de lapplication web Développer une application Web en utilisant les techniques apprises

6 Comment vous obtenez des points Laboratoire 5p (activite au labo, devoirs, projet) examen partiel 2p (24 ou 31 mars) examen final (dans la derniere semaine) 3p

7 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

8 Plan du cours 1.Introduction + courte histoire + structure du Web 2.HTML (1) 3.HTML (2) 4.Cascading Style Sheets (CSS) 5.CSS (2) 6.Client-side scripting languages - Introduction au JavaScript (1) 7.JavaScript (2) 8.bibliotheques pour JS - Jquery 9.PHP (1) 10.PHP(2)

9 Lab Plan (1) 1.Introduction, courte histoire, utiliser le web 2.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 6.PHP - functions, classes, GET/POST, Sessions

10 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

11 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é

12 Le web et linternet 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

13 Linvention 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. " navigateur

14 Lhistoire du Web 1992-93 – les sites des organisations publiques et dadministration de web - worldbank.org, whitehouse.gov, ripe.net (manages ips) 1994 Yahoo! 1994 – le navigateur netscape 1994 - World Wide Web Consortium (W3C) lorganisation qui se preoccupe avec les standards web1995 – altavista, e-bay, javascript, HTML (http://en.wikipedia.org/wiki/HTML ), PHPhttp://en.wikipedia.org/wiki/HTML 1996 - ASP, CSS 1997 – flash player 2 – actuellement sur 99% des ordinateurs du monde

15 Lhistoire de web 1998 – google 1999 – microsoft passport (un façon didentification 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 – lapparition des blogs 2000 – linvention de XHTML 2001 – wikipedia – maintenant la plus grande encyclopédie du monde 2004 - facebook 2006 JQuery 2008 - premiere version du html5 2011 - premieres modules du CSS3

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 2014 – + recommandations personnalisés, blogs, meilleure organisation de contenu, beacoup de publicite

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

20 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 sil veut poursuivre la communication Exemples: e-mail, dns, http

21 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 dentités intermédiaires Utilisé principalement dans le partage des ressources Exemples: napster, kazaa, direct connect, bitTorrent

22 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

23 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

24 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) )

25 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"

26 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

27 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

28 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

29 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

30 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à

31 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)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)

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

33 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 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

34 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çu 3.Vérifiez le corps du message

35 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: http://google.com/ 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.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 http://www.google.com/ 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

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

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