Introduction aux Technologies Web élaborée par Marouan OMEZZINE
48
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 1 Version 1.2070208 Last update : 07-Fév-2008
-
Upload
marouan-omezzine -
Category
Technology
-
view
4.735 -
download
2
description
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/).
Transcript of Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux technologies WEB
M. Marouan OMEZZINE
Elève ingénieurJuniorENSI & E.N.S.I.http://www.junior-ensi.orghttp://www.slideshares.net/marouan.omezzine
1
Version 1.2070208 Last update : 07-Fév-2008
Plan
•Introduction à la techno. (démystification).
•Le Web 2.0.•PHP•Ajax
2
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).
3
Client – serveur : modèle statique
4
Client
Serveur Web
Dans ce modèle le Client 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).
le client demande la page ma_page.html
le serveur transmet la page au client
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++…):
5
Le contenu d’une page web statique• HTML - HyperText Markup Language est un
langage balisé permettant de décrire la structure et la présentation des documents pour le Web .
• CSS - Cascading Style Sheets . 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 …)
▫…
6
Le contenu d’une page web statique
7
• 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 "-//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>
• XML, microcodes . . .
Client – serveur : modèle dynamique
8
Client Serveur Web
Serveur d’applications
2211
3344
1 -le Client demande la page ma_page.php1 -le Client demande la page ma_page.php2-le Serveur Web sollicite le Serveur d’applications (plateforme PHP, .Net, etc.)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 Web3-le Serveur d’application exécute la requête et transmet le résultat au Serveur Web4 -le Serveur Web transmet la page au Client4 -le Serveur Web transmet la page au Client
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.
9
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.
10
Exemple de plateforme, langage et Framework pour développer un contenu web dynamique.
• .Net (asp.net)• J2EE •PHP•Ruby On Rails•…
11
Le Web 2.0
12
Web 2.0
13
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.
C’est quoi le Web 2.0 ? Est-ce qu’il y a des versions du Web
!!?
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.
14
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.
15
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).
16
Les Buzzwords
17
Web 2.0
18
Web 1.0Web 2.0
Web 2.0 (Infographie)
•Vibrant, high contrast colours•‘Special offer’ badges•Gloss / sheen•Bevelled edges•Gradients•Diagonal lines•Soft-focus effects (subtle outer glow)
19
What do people
consider tobe the “Web 2.0 Look”?
Destroy The “Web 2.0 Look” by Elliot Jay Stocks
Web 2.0 (Infographie)
20
21
22
Conclusion
23
Le Langage PHP
24
PHP
25
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.
Applications
•Forums•Recherche•Blogs•Chat•Génération de graph, courbe, image
dynamique.•Web Services•… la liste est trop longue !.
26
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.
27
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)
28
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.
29
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 …)
30
Exemple
31
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
PHP et le Job Trends ?!
32
Réponse
Ajax
33
Ajax
34
On ne parle pas d’un produit de nettoyage.
On ne parle pas de Ajax l’ancienne équipe
de Hatem Trabelsi.Asynchronous JavaScript And
XML
Rappel du modèle classique
35
La machine cliente envoie une requête au serveur.
Le serveur envoie sa la réponse à la requête au machine cliente.
Modèle Ajax
36
•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).
Ajax
•Ajax n’est pas une nouvelle technologie•Ajax est un ensemble de technologies.•Ajax est une architecture.
37
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.
38
Ajax : The architecture
39
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.
40
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 ?
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.
41
Asynchronous Vs synchronous
42
Exemple de l’utilisation d’Ajax !
43
Autosuggest / Autocomplete with Ajax
http://www.ajaxdaddy.com/demo-bsn-autocomplete.html
Exemple de l’utilisation d’Ajax !
44
Css Dock Menu
http://www.ajaxdaddy.com/demo-css-dock-menu.html
Exemple de l’utilisation d’Ajax !
45
Google Maps
Contact• Email / msn : [email protected]• Skype : marouan.omezzzine• Slides :
http://www.slideshare.net/marouan.omezzine
46
Références1. Développer un site Web de qualité plateformes, standards et ergonomie.2. Destroy The “Web 2.0 Look” by Elliot Jay Stocks - elliotjaystocks.com/fowd3. Introduction au World Wide Web – Techniques de l’ingénieur4. Etude de cas : JavaScript, Ajax, Web 2.0 – Anonyme.5. What is Web 2.0? - By Andy Budd of Clearleft Ltd6. http://www.wikipedia.org7. http://blog.asoon.com8. http//www.indeed.com9. http://xmlfr.org/actualites/decid/051201-0001
47
Merci
48
