Introduction aux technologies WEB M. Marouan OMEZZINE Elève ingénieur JuniorENSI & E.N.S.I. http://www.junior-ensi.org htt...
Plan <ul><li>Introduction à la techno. (démystification). </li></ul><ul><li>Le Web 2.0. </li></ul><ul><li>PHP </li></ul><u...
Introduction <ul><li>L’Internet est la fondation sur laquelle est construit le Web.  </li></ul><ul><li>Le Web est le servi...
Client – serveur : modèle statique le client demande la page ma_page.html le serveur transmet la page au client Client Ser...
Les pages web statiques <ul><li>Adaptée pour des sites web de petite taille, les sites vitrines, les pages persos au conte...
Le contenu d’une page web statique <ul><li>HTML   -  H yper T ext  M arkup  L anguage  est un langage balisé  permettant d...
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 ...
Client – serveur : modèle dynamique 2 1 3 4 1 -le  Client  demande la page ma_page.php 2-le  Serveur Web  sollicite le  Se...
Les pages web dynamique <ul><li>Page dynamique :  construite à la demande (On the fly) par le serveur, en fonction de crit...
Intérêt d’un langage dynamique <ul><li>Accès aux bases de données   </li></ul><ul><li>Assemblage et transformation  de dif...
Exemple de plateforme, langage et Framework  pour développer un contenu web dynamique. <ul><li>.Net (asp.net) </li></ul><u...
Le Web 2.0
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 vi...
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 fair...
Caractéristiques techniques (1) <ul><li>HTML (ou XHTML se faisant passer pour du HTML puisque Internet Explorer n'accepte ...
Caractéristiques techniques (2) <ul><li>XML. </li></ul><ul><li>Syndication Atom ou RSS (RSS a été créé par Netscape en 199...
Les Buzzwords
Web 2.0 Web 1.0 Web 2.0
Web 2.0 (Infographie) <ul><li>Vibrant, high contrast colours </li></ul><ul><li>‘ Special offer’ badges </li></ul><ul><li>G...
Web 2.0 (Infographie)
Conclusion
Le Langage PHP
PHP PHP  (PHP Hypertext Preprocessor),  créé en 1994 par Rasmus Lerdorf,  est un langage de  scripts   libre  principaleme...
Applications <ul><li>Forums </li></ul><ul><li>Recherche </li></ul><ul><li>Blogs </li></ul><ul><li>Chat </li></ul><ul><li>G...
Simple <ul><li>Fidèle au principe  KISS (Keep It Simple & Stupid). </li></ul><ul><li>Fidèle au principe RAD (Rapid Applica...
Portable <ul><li>PHP est un langage  interprété  et non pas compilé. </li></ul><ul><li>Conséquence directe : PHP est haute...
Open Source <ul><li>PHP est un langage open source; c.-à-d. que son code source est disponible sur le net sans aucune rest...
Extensible <ul><li>PHP possède une architecture extensible    Evolutif selon les besoins. </li></ul><ul><li>Exemple des a...
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 ...
PHP et le Job Trends ?!   Réponse
Ajax
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 é...
Rappel du modèle classique La machine cliente envoie une requête au serveur. Le serveur envoie sa la réponse à la requête ...
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></...
Ajax <ul><li>Ajax n’est pas une nouvelle technologie </li></ul><ul><li>Ajax est un ensemble de technologies. </li></ul><ul...
Ajax : A set of technologies <ul><li>(X)HTML  et  CSS : présentation visuelle  </li></ul><ul><li>DOM  (Document Object Mod...
Ajax : The architecture
En pratique (exemple e-commande) <ul><li>Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plus...
Comment il fonctionne ? <ul><li>Introduction d’un médiateur entre le client et le serveur : le moteur AJAX. </li></ul><ul>...
Asynchronous Vs synchronous
Exemple de l’utilisation d’Ajax ! <ul><li>Autosuggest / Autocomplete with Ajax </li></ul>http://www.ajaxdaddy.com/demo-bsn...
Exemple de l’utilisation d’Ajax ! <ul><li>Css Dock Menu </li></ul>http://www.ajaxdaddy.com/demo-css-dock-menu.html
Exemple de l’utilisation d’Ajax ! <ul><li>Google Maps </li></ul>
Contact <ul><li>Email / msn  : marouan.omezzine@hotmail.com </li></ul><ul><li>Skype  : marouan.omezzzine </li></ul><ul><li...
Références <ul><li>Développer un site Web de qualité plateformes, standards et ergonomie. </li></ul><ul><li>Destroy The “W...
Merci
Prochain SlideShare
Chargement dans…5
×

Introduction aux Technologies Web élaborée par Marouan OMEZZINE

5 435 vues

Publié le

Une introduction / ébauche aux technologies Web (Web, évolution, web 2.0, php, ajax...) faite dans le cadre des formations inter-membres du club Junior ENSI (http://www.junior-ensi.org/) de l'école nationale des sciences de l'informatique (http://www.ensi.rnu.tn/).

Publié dans : Technologie
2 commentaires
3 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
5 435
Sur SlideShare
0
Issues des intégrations
0
Intégrations
136
Actions
Partages
0
Téléchargements
294
Commentaires
2
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Marouan OMEZZINE &amp; JuniorEnsi
  • Introduction aux Technologies Web élaborée par Marouan OMEZZINE

    1. 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. 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. 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. 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. 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. 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. 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 &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; > <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. 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. 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. 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. 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. 12. Le Web 2.0
    13. 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. 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. 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. 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. 17. Les Buzzwords
    18. 18. Web 2.0 Web 1.0 Web 2.0
    19. 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. 20. Web 2.0 (Infographie)
    21. 21.
    22. 22.
    23. 23. Conclusion
    24. 24. Le Langage PHP
    25. 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. 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. 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. 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. 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. 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. 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. 32. PHP et le Job Trends ?!  Réponse
    33. 33. Ajax
    34. 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. 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. 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. 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. 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. 39. Ajax : The architecture
    40. 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. 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. 42. Asynchronous Vs synchronous
    43. 43. Exemple de l’utilisation d’Ajax ! <ul><li>Autosuggest / Autocomplete with Ajax </li></ul>http://www.ajaxdaddy.com/demo-bsn-autocomplete.html
    44. 44. Exemple de l’utilisation d’Ajax ! <ul><li>Css Dock Menu </li></ul>http://www.ajaxdaddy.com/demo-css-dock-menu.html
    45. 45. Exemple de l’utilisation d’Ajax ! <ul><li>Google Maps </li></ul>
    46. 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. 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. 48. Merci

    ×