Your SlideShare is downloading. ×
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction aux Technologies Web élaborée par Marouan OMEZZINE

4,728

Published on

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 …

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/).

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,728
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
266
Comments
2
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Marouan OMEZZINE & JuniorEnsi
  • Transcript

    • 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
      • Introduction à la techno. (démystification).
      • Le Web 2.0.
      • PHP
      • Ajax
    • 3. Introduction
      • L’Internet est la fondation sur laquelle est construit le Web.
      • 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.
      • L’accès aux documents se fait en utilisant un logiciel de consultation (browser, aussi appelé navigateur).
    • 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
      • Adaptée pour des sites web de petite taille, les sites vitrines, les pages persos au contenu permanent ou rarement mis à jour.
      • 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 …
      • Pour modifier une page web statique, on utilise des éditeurs html (Dreamweaver, Ms FrontPage, Notepad++…):
    • 6. Le contenu d’une page web statique
      • 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 .
      • CSS - C ascading S tyle S heets . Il permet de :
        • Le partage de Feuilles de Style entre plusieurs documents HTML (modularité , charte commune sur un ensemble des documents …)
        • Avoir plusieurs présentations pour un même contenu (format papier , lecture sur écran …)
    • 7. Le contenu d’une page web statique
      • 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.
        • Exemple :
          • <!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>
      • XML, microcodes . . .
    • 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
      • Page dynamique : construite à la demande (On the fly) par le serveur, en fonction de critères spécifiques.
        • Exemple : le nombre de visiteurs, une opération de calcul, extraire une information de la base de données…etc.
      • Présentation et contenu adaptés de manière interactive , en fonction des produits, des internautes, des langues, etc.
    • 10. Intérêt d’un langage dynamique
      • Accès aux bases de données
      • Assemblage et transformation de différents morceaux de pages réutilisables en fonction des besoins
      • Reconnaissance de certaines caractéristiques du visiteur (cookie ou session par exemple)
      • 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.
      • XML et ses possibilités infinies.
    • 11. Exemple de plateforme, langage et Framework pour développer un contenu web dynamique.
      • .Net (asp.net)
      • J2EE
      • PHP
      • Ruby On Rails
    • 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
      • 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.
      • l'utilisateur doit rester propriétaire de ses propres données.
      • le site doit être entièrement utilisable à travers un navigateur standard.
      • le site doit présenter des aspects de réseaux sociaux.
    • 15. Caractéristiques techniques (1)
      • HTML (ou XHTML se faisant passer pour du HTML puisque Internet Explorer n'accepte pas de documents XHTML se déclarant comme tels).
      • Un sous ensemble de CSS 2.0 supporté par Internet Explorer. CSS 3.0 est sortie depuis déjà quelques temps.
      • Javascript.
    • 16. Caractéristiques techniques (2)
      • XML.
      • Syndication Atom ou RSS (RSS a été créé par Netscape en 1999).
      • Protocole HTTP.
      • REST (thèse publiée en 2000).
        • http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm
      • Services web (les premières API XML-RPC pour Javascript ont été publiées en 2000).
    • 17. Les Buzzwords
    • 18. Web 2.0 Web 1.0 Web 2.0
    • 19. Web 2.0 (Infographie)
      • Vibrant, high contrast colours
      • ‘ Special offer’ badges
      • Gloss / sheen
      • Bevelled edges
      • Gradients
      • Diagonal lines
      • Soft-focus effects (subtle outer glow)
      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)
    • 21.
    • 22.
    • 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
      • Forums
      • Recherche
      • Blogs
      • Chat
      • Génération de graph, courbe, image dynamique.
      • Web Services
      • … la liste est trop longue !.
    • 27. Simple
      • Fidèle au principe KISS (Keep It Simple & Stupid).
      • Fidèle au principe RAD (Rapid Application Development).
      • Le manuel officiel est très claire et complet permettant ainsi de développer rapidement des applications PHP complètes.
      • PHP est langage « communautaire »  Les tuts, les exemples … sont abondant sur le net.
    • 28. Portable
      • PHP est un langage interprété et non pas compilé.
      • 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.
      • 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)
    • 29. Open Source
      • 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.
      • Avantages :
        • Des prix compétitifs d’hébergement de sites Web développé en PHP.
        • Intégration rapide des nouvelles technologies dans le cœur du langage .
        • Faster bug fixes.
    • 30. Extensible
      • PHP possède une architecture extensible  Evolutif selon les besoins.
      • Exemple des add-on modules :
        • 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 …)
    • 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
      • C’est quoi Ajax ?
      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
      • Pour le modèle Ajax , les données sont transférées discrètement entre le client et le serveur.
      • Le serveur n’a plus besoin d’envoyer la page entière.
      •  Une expérience utilisateur plus riche : Un feedback plus rapide, plus de continuité dans les traitement (contrairement au start-stop momentum du web traditionel).
    • 37. Ajax
      • Ajax n’est pas une nouvelle technologie
      • Ajax est un ensemble de technologies.
      • Ajax est une architecture.
    • 38. Ajax : A set of technologies
      • (X)HTML et CSS : présentation visuelle
      • DOM (Document Object Model): page découpée en objets .
      • Javascript et en particulier le fameux objet XMLHTTPRequest pour manipuler des requêtes et des réponses.
    • 39. Ajax : The architecture
    • 40. En pratique (exemple e-commande)
      • Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plusieurs pages web :
      • 1. Une pour rentrer nos coordonnées postales.
      • 2. Une pour valider notre commande.
      • 3. Une pour saisir nos coordonnées bancaires.
      • 4. Une dernière pour valider définitivement.
      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 ?
      • Introduction d’un médiateur entre le client et le serveur : le moteur AJAX.
      • 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.
      • Il permet une interaction avec l’utilisateur de manière asynchrone.
    • 42. Asynchronous Vs synchronous
    • 43. Exemple de l’utilisation d’Ajax !
      • Autosuggest / Autocomplete with Ajax
      http://www.ajaxdaddy.com/demo-bsn-autocomplete.html
    • 44. Exemple de l’utilisation d’Ajax !
      • Css Dock Menu
      http://www.ajaxdaddy.com/demo-css-dock-menu.html
    • 45. Exemple de l’utilisation d’Ajax !
      • Google Maps
    • 46. Contact
      • Email / msn : marouan.omezzine@hotmail.com
      • Skype : marouan.omezzzine
      • Slides : http://www.slideshare.net/marouan.omezzine
    • 47. Références
      • Développer un site Web de qualité plateformes, standards et ergonomie.
      • Destroy The “Web 2.0 Look” by Elliot Jay Stocks - elliotjaystocks.com/fowd
      • Introduction au World Wide Web – Techniques de l’ingénieur
      • Etude de cas : JavaScript, Ajax, Web 2.0 – Anonyme.
      • What is Web 2.0? - By Andy Budd of Clearleft Ltd
      • http://www.wikipedia.org
      • http://blog.asoon.com
      • http//www.indeed.com
      • http://xmlfr.org/actualites/decid/051201-0001
    • 48. Merci

    ×