Introduction aux Technologies Web élaborée par Marouan OMEZZINE

1. Introduction aux technologies WEB M. Marouan OMEZZINE Elève ingénieur JuniorENSI & E.N.S.I. http://www.junior-ensi.org http://www.slideshares.net/marouan.omezzine Version 1.2070208 Last update : 07-Fév-2008

2. Plan <ul><li>Introduction à la techno. (démystification). </li></ul><ul><li>Le Web 2.0. </li></ul><ul><li>PHP </li></ul><ul><li>Ajax </li></ul>

3. Introduction <ul><li>L’Internet est la fondation sur laquelle est construit le Web. </li></ul><ul><li>Le Web est le service qui offre sur l’Internet une interface graphique permettant par simple pointage d’accéder à des documents sur le réseau. </li></ul><ul><li>L’accès aux documents se fait en utilisant un logiciel de consultation (browser, aussi appelé navigateur). </li></ul>

4. Client – serveur : modèle statique le client demande la page ma_page.html le serveur transmet la page au client Client Serveur Web Dans ce modèle le Clien t va demander une page web statique . Le Serveur Web lui transmet la page demandée telle quelle est sauvegardée sur son disque. Une forme de dynamisme peut être introduite par du JavaScript (peut présenter une incompatibilité avec les navigateurs).

5. Les pages web statiques <ul><li>Adaptée pour des sites web de petite taille, les sites vitrines, les pages persos au contenu permanent ou rarement mis à jour. </li></ul><ul><li>Ne sont pas adaptées pour des sites dont les informations font l'objet de modifications fréquentes (e-business) , les sites communautaires , les blogs … </li></ul><ul><li>Pour modifier une page web statique, on utilise des éditeurs html (Dreamweaver, Ms FrontPage, Notepad++…): </li></ul>

6. Le contenu d’une page web statique <ul><li>HTML - H yper T ext M arkup L anguage est un langage balisé permettant de décrire la structure et la présentation des documents pour le Web . </li></ul><ul><li>CSS - C ascading S tyle S heets . Il permet de : </li></ul><ul><ul><li>Le partage de Feuilles de Style entre plusieurs documents HTML (modularité , charte commune sur un ensemble des documents …) </li></ul></ul><ul><ul><li>Avoir plusieurs présentations pour un même contenu (format papier , lecture sur écran …) </li></ul></ul><ul><ul><li>… </li></ul></ul>

7. Le contenu d’une page web statique <ul><li>XHTML 1.0 est une simple reformulation de HTML 4 en application de XML 1.0. Il s'agit donc uniquement d'un changement de syntaxe, aucune fonctionnalité n'ayant été ajoutée ou retirée. </li></ul><ul><ul><li>Exemple : </li></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Exemple XHTML 1.0</title> </head> <body> <h1> bonjour</h1> </body> </html> </li></ul></ul></ul><ul><li>XML, microcodes . . . </li></ul>

8. Client – serveur : modèle dynamique 2 1 3 4 1 -le Client demande la page ma_page.php 2-le Serveur Web sollicite le Serveur d’applications (plateforme PHP, .Net, etc.) 3-le Serveur d’application exécute la requête et transmet le résultat au Serveur Web 4 -le Serveur Web transmet la page au Client Client Serveur Web Serveur d’applications

9. Les pages web dynamique <ul><li>Page dynamique : construite à la demande (On the fly) par le serveur, en fonction de critères spécifiques. </li></ul><ul><ul><li>Exemple : le nombre de visiteurs, une opération de calcul, extraire une information de la base de données…etc. </li></ul></ul><ul><li>Présentation et contenu adaptés de manière interactive , en fonction des produits, des internautes, des langues, etc. </li></ul>

10. Intérêt d’un langage dynamique <ul><li>Accès aux bases de données </li></ul><ul><li>Assemblage et transformation de différents morceaux de pages réutilisables en fonction des besoins </li></ul><ul><li>Reconnaissance de certaines caractéristiques du visiteur (cookie ou session par exemple) </li></ul><ul><li>Fonctionnalités diverses : formulaires, envoi de mails automatiques, la création de graphiques, la protection de certaines pages par mot de passe, la production de fichiers à divers formats (PDF, texte, …), la gestion automatique des hyperliens, RSS, etc. </li></ul><ul><li>XML et ses possibilités infinies. </li></ul>

11. Exemple de plateforme, langage et Framework pour développer un contenu web dynamique. <ul><li>.Net (asp.net) </li></ul><ul><li>J2EE </li></ul><ul><li>PHP </li></ul><ul><li>Ruby On Rails </li></ul><ul><li>… </li></ul>

12. Le Web 2.0

13. Web 2.0 C’est quoi le Web 2.0 ? Est-ce qu’il y a des versions du Web !!? Le concept Web 2.0 désigne la transition que vit actuellement le World Wide Web. Internet passe en effet aujourd’hui d'une collection de sites Web à une plate-forme informatique à part entière, fournissant des applications Web aux utilisateurs.

14. Caractéristiques générales <ul><li>le site ne doit pas être un jardin secret , c'est-à-dire qu'il doit être aisé de faire rentrer ou sortir des informations du système. </li></ul><ul><li>l'utilisateur doit rester propriétaire de ses propres données. </li></ul><ul><li>le site doit être entièrement utilisable à travers un navigateur standard. </li></ul><ul><li>le site doit présenter des aspects de réseaux sociaux. </li></ul>

15. Caractéristiques techniques (1) <ul><li>HTML (ou XHTML se faisant passer pour du HTML puisque Internet Explorer n'accepte pas de documents XHTML se déclarant comme tels). </li></ul><ul><li>Un sous ensemble de CSS 2.0 supporté par Internet Explorer. CSS 3.0 est sortie depuis déjà quelques temps. </li></ul><ul><li>Javascript. </li></ul>

16. Caractéristiques techniques (2) <ul><li>XML. </li></ul><ul><li>Syndication Atom ou RSS (RSS a été créé par Netscape en 1999). </li></ul><ul><li>Protocole HTTP. </li></ul><ul><li>REST (thèse publiée en 2000). </li></ul><ul><ul><li>http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm </li></ul></ul><ul><li>Services web (les premières API XML-RPC pour Javascript ont été publiées en 2000). </li></ul>

17. Les Buzzwords

18. Web 2.0 Web 1.0 Web 2.0

19. Web 2.0 (Infographie) <ul><li>Vibrant, high contrast colours </li></ul><ul><li>‘ Special offer’ badges </li></ul><ul><li>Gloss / sheen </li></ul><ul><li>Bevelled edges </li></ul><ul><li>Gradients </li></ul><ul><li>Diagonal lines </li></ul><ul><li>Soft-focus effects (subtle outer glow) </li></ul>Destroy The “Web 2.0 Look” by Elliot Jay Stocks What do people consider to be the “Web 2.0 Look”?

20. Web 2.0 (Infographie)

23. Conclusion

24. Le Langage PHP

25. PHP PHP (PHP Hypertext Preprocessor), créé en 1994 par Rasmus Lerdorf, est un langage de scripts libre principalement utilisé pour être exécuté par un serveur HTTP, mais il peut fonctionner comme n'importe quel langage interprété de façon locale, en exécutant les programmes en ligne de commande.

26. Applications <ul><li>Forums </li></ul><ul><li>Recherche </li></ul><ul><li>Blogs </li></ul><ul><li>Chat </li></ul><ul><li>Génération de graph, courbe, image dynamique. </li></ul><ul><li>Web Services </li></ul><ul><li>… la liste est trop longue !. </li></ul>

27. Simple <ul><li>Fidèle au principe KISS (Keep It Simple & Stupid). </li></ul><ul><li>Fidèle au principe RAD (Rapid Application Development). </li></ul><ul><li>Le manuel officiel est très claire et complet permettant ainsi de développer rapidement des applications PHP complètes. </li></ul><ul><li>PHP est langage « communautaire »  Les tuts, les exemples … sont abondant sur le net. </li></ul>

28. Portable <ul><li>PHP est un langage interprété et non pas compilé. </li></ul><ul><li>Conséquence directe : PHP est hautement portable et peut fonctionner sur une variété de système ; UNIX, Microsoft Windows, Mac OS, and OS/2. </li></ul><ul><li>Exemple d’exploitation de cette caractéristique : On développe notre application sous Windows et puis on déploie sous Linux. (le code fonctionne généralement sans aucune modification) </li></ul>

29. Open Source <ul><li>PHP est un langage open source; c.-à-d. que son code source est disponible sur le net sans aucune restriction d’utilisation ni d’installation. </li></ul><ul><li>Avantages : </li></ul><ul><ul><li>Des prix compétitifs d’hébergement de sites Web développé en PHP. </li></ul></ul><ul><ul><li>Intégration rapide des nouvelles technologies dans le cœur du langage . </li></ul></ul><ul><ul><li>Faster bug fixes. </li></ul></ul>

30. Extensible <ul><li>PHP possède une architecture extensible  Evolutif selon les besoins. </li></ul><ul><li>Exemple des add-on modules : </li></ul><ul><ul><li>Création dynamique de fichiers PDF, fichiers SWF (des fichiers flash), connexion au IMAP and POP3 servers, interfaçage avec un très grand nombre de base de données (MySQL , Oracle, SQLite , DB2 …) </li></ul></ul>

31. Exemple Exemple d’un code PHP (imbriqué dans du code html) permettant d’avoir la date du système. L'affichage que génère ce code est : On est le 07-02-2008

32. PHP et le Job Trends ?!  Réponse

33. Ajax

34. Ajax <ul><li>C’est quoi Ajax ? </li></ul>On ne parle pas d’un produit de nettoyage. On ne parle pas de Ajax l’ancienne équipe de Hatem Trabelsi. A synchronous J avaScript A nd X ML

35. Rappel du modèle classique La machine cliente envoie une requête au serveur. Le serveur envoie sa la réponse à la requête au machine cliente.

36. Modèle Ajax <ul><li>Pour le modèle Ajax , les données sont transférées discrètement entre le client et le serveur. </li></ul><ul><li>Le serveur n’a plus besoin d’envoyer la page entière. </li></ul><ul><li> Une expérience utilisateur plus riche : Un feedback plus rapide, plus de continuité dans les traitement (contrairement au start-stop momentum du web traditionel). </li></ul>

37. Ajax <ul><li>Ajax n’est pas une nouvelle technologie </li></ul><ul><li>Ajax est un ensemble de technologies. </li></ul><ul><li>Ajax est une architecture. </li></ul>

38. Ajax : A set of technologies <ul><li>(X)HTML et CSS : présentation visuelle </li></ul><ul><li>DOM (Document Object Model): page découpée en objets . </li></ul><ul><li>Javascript et en particulier le fameux objet XMLHTTPRequest pour manipuler des requêtes et des réponses. </li></ul>

39. Ajax : The architecture

40. En pratique (exemple e-commande) <ul><li>Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plusieurs pages web : </li></ul><ul><li>1. Une pour rentrer nos coordonnées postales. </li></ul><ul><li>2. Une pour valider notre commande. </li></ul><ul><li>3. Une pour saisir nos coordonnées bancaires. </li></ul><ul><li>4. Une dernière pour valider définitivement. </li></ul>Avec AJAX, l’idée serait de se dire : pourquoi faire 4 pages nécessitant 4 rechargements alors que seule une partie de la page a besoin d’être rechargée ?

41. Comment il fonctionne ? <ul><li>Introduction d’un médiateur entre le client et le serveur : le moteur AJAX. </li></ul><ul><li>Il se charge du rendu de l’interface, de la communication avec le serveur et de toute réponse à une action de l’utilisateur qui ne requiert pas un transport avec le serveur. </li></ul><ul><li>Il permet une interaction avec l’utilisateur de manière asynchrone. </li></ul>

42. Asynchronous Vs synchronous

43. Exemple de l’utilisation d’Ajax ! <ul><li>Autosuggest / Autocomplete with Ajax </li></ul>http://www.ajaxdaddy.com/demo-bsn-autocomplete.html

44. Exemple de l’utilisation d’Ajax ! <ul><li>Css Dock Menu </li></ul>http://www.ajaxdaddy.com/demo-css-dock-menu.html

45. Exemple de l’utilisation d’Ajax ! <ul><li>Google Maps </li></ul>

46. Contact <ul><li>Email / msn : marouan.omezzine@hotmail.com </li></ul><ul><li>Skype : marouan.omezzzine </li></ul><ul><li>Slides : http://www.slideshare.net/marouan.omezzine </li></ul>

47. Références <ul><li>Développer un site Web de qualité plateformes, standards et ergonomie. </li></ul><ul><li>Destroy The “Web 2.0 Look” by Elliot Jay Stocks - elliotjaystocks.com/fowd </li></ul><ul><li>Introduction au World Wide Web – Techniques de l’ingénieur </li></ul><ul><li>Etude de cas : JavaScript, Ajax, Web 2.0 – Anonyme. </li></ul><ul><li>What is Web 2.0? - By Andy Budd of Clearleft Ltd </li></ul><ul><li>http://www.wikipedia.org </li></ul><ul><li>http://blog.asoon.com </li></ul><ul><li>http//www.indeed.com </li></ul><ul><li>http://xmlfr.org/actualites/decid/051201-0001 </li></ul>

48. Merci