Architectures d’applications

Comment fonctionnent les applications sur Internet? L'essentiel

 L'environnement client/serveur désigne un mode de communication à travers un réseau entre plusieurs programmes ou logiciels :
Par extension, le client désigne également l'ordinateur sur lequel est exécuté le logiciel client , et le serveur, l'ordinateur sur lequel est exécuté le logiciel serveur. Toutes les données sont centralisées sur un seul serveur, ce qui simplifie les contrôles de sécurité et la mise à jour des données et des logiciels.

Toute la complexité/puissance peut être déportée sur le serveur(s), les utilisateurs utilisant simplement un client léger sur un ordinateur terminal qui peut être simplifié au maximum.

Les formualires en lien avec des base de données permettent d'automatiser des actions sur Internet  : les sites dynamiques.

Internet utilise des navigateurs (application client) pour adresse des requêtes aux serveur HTTP. Ces navigateurs, tels que firefox, affichent de l'html produit soit directement, soir par des application serveurs comme PHP ou des CGI (Common Gateway Inteface : un seré de programmes)

Les  navigateurs  ne  sont  pas  capables  d'interpréter  chacun  des  centaines  de  formats  utilisés  sur Internet. Ils recourent alors à des programmes extérieurs applelés plug-ins qui s'intégrent au sein même du navigateur. Les plugins ouvrent ces fichiers grâce au standard MIME qui a répertorié les différens formats en classes et sous-classes.

Pour augmenter les fonctionnalités d'un navigateur, on aussi, en plus des plug-ins, ajouter des add-ons, modules logiciels

1.  Généralités

Dans la définition que nous avons faite d'Internet, nous avons mis l'accent sur le fait qu'Internet était un réseau qui permettait d'exploiter des applications. Rappelons qu'une application est un ensemble de programmes  conçus  pour  obtenir  un  résultat  ou  atteindre  un  objectif.  Pour  que  des  applications puissent fonctionner sur Internet, celles-ci doivent répondre à un certain nombre de contraintes liées aux  caractéristiques  propres  du  réseau,  notamment  en  ce  qui  concerne  les  protocoles  et  règles  de fonctionnement.


1.1.  Le mode Client/Serveur


Dans  l'informatique  dite  "traditionnelle",  le  terminal  de  l'utilisateur  est  en  prise  directe  avec l'ordinateur  auquel  il  est  attaché  et  est  reconnu  comme  tel.  Les  programmes  qui  s'exécutent  pour l'utilisateur  sont  situés  sur  l'ordinateur  central  dans  une  partition  de  la  mémoire  spécifique  à l'utilisateur. Les conséquences de cette organisation sont nombreuses, mais on notera les principales :
 
Dans  une  organisation  comme  celle  d'Internet,  c'est  le  mode  Client/Serveur  qui  prévaut.  Le  mode client/serveur  que  nous  présentons  ci-dessous  correspond  à  celui  en  vigueur  sur  Internet  qui  est  le niveau ultime. Dans l'absolu, le mode client/serveur peut répondre à plusieurs définitions ou niveaux qui  vont  de  la  simple  gestion  indépendante  du  terminal  à  un  pilotage  complet  du  serveur  par  le terminal. Le mode client/serveur répond à une organisation très différente du schéma précédent :
NB : un poste peut faire office de serveur, un matériel où des services sont installés.
Une  application  Intranet  ou  Extranet,  même  si  elle  est  basée  sur  les  mêmes  principes  de programmation, identifie personnellement chaque "user" à chaque transaction.
 
Toutes ces contraintes ou caractéristiques font que la programmation d'applications pour Internet est très particulière.
 
Typiquement,  le  serveur  reçoit,  à  un  instant  donné,  un  ordre  assorti  de  paramètres,  l'exécute  puis renvoie la réponse au terminal qui a formulé la requête. Après cela, il oublie tout et s'occupe d'une autre requête.

1.2.  Les types de transactions

Pour  faciliter  la  compréhension  des  différents  niveaux  de  programmation  d'une  application  Internet, nous ferons une distinction entre différents types de transactions :
La  programmation  HTML  avec  les  feuilles  de  style  (CSS/Java  script)  et  le  HTML  dynamique  ont  été conçus dans ce but.
 
Dans  les  deux  types  de  transaction  ci-dessus,  le  terminal  ne  fait  que  de  la  consultation  et  n'envoie aucune donnée au serveur. La base de données du serveur se trouve avant et après les transactions dans un état strictement identique.
API : cf les offres Google sur le net : agenda, ... etc
Cependant pour le terminal, la formulation d'une telle requête est subordonnée à la possibilité de saisir (ou de trouver automatiquement) les données,  éventuellement de réaliser des contrôles (ou plus) en local. Les programmes JAVA (par exemple) permettront de réaliser les traitements locaux (Active X de Microsoft pourra réaliser de même). Les données seront transmises au serveur grâce aux formulaires HTML.
 
Les  données  transmises  par  le  serveur  au  terminal  peuvent  être  de  toute  nature  (multimédia),  leur interprétation est le rôle du navigateur (browser en anglais). Lorsque celui-ci ne sait pas les lire pour les exploiter, il fait appel à des programmes externes que l'on appelle des Plug-in (par exemple " Real Player " pour de la musique).

Les programmes Java, l'applet Java s'exécute sur l'ordinateur de l'internaute et non sur le serveur. Le serveur est ainsi économisé.

2.  HTML

Le but de ce chapitre n'est pas d'apprendre à programmer en langage HTML, qui est l'un des objectifs du  cours  d'algorithmique  qui  suit,  mais  simplement  de  vous  dire  en  gros  ce  qu’est  ce  langage  de programmation très largement utilisé sur Internet.
 
HTML est un langage de programmation interprété, qui permet de définir le contenu et la présentation de pages sur un écran, et de rediriger l'auditeur vers une autre page de son choix située n'importe où sur le Web (lien "hypertexte"). HTML peut également permettre à l'utilisateur de saisir des données avec ou sans l'aide de listes, pour transmission au serveur. Les pages HTML peuvent faire appel à des données  externes  (fichiers  textes,  sons,  images,  vidéos,  …)  qui,  dans  ce  cas,  seront  téléchargés  en même temps. Ces données externes peuvent être situées aussi bien sur le même serveur que sur un autre totalement différent (exemple : une vidéo qui est hébergé sur YouTube et qui est donc sur un autre serveur).
 
Lors d'une consultation de pages sur le Web, les données transmises à l'utilisateur par le serveur sont précisément  le  texte  "source  d'un  programme  HTML".  L'ordinateur  client,  grâce  au  navigateur, n'affiche  pas  le  texte  du  programme  source  (bien  que  cela  soit  possible),  mais  le  contenu  texte, tableau, fenêtre des données formatées selon les instructions contenues dans le programme.

Schéma interpréteur-navigateur
 
Le  langage  de  programmation  HTML  est  un  langage  simple  qui  ne  permet  aucun  calcul  et  dispose d'une logique très rudimentaire. Les pages HTML programmées sont stockées sur les disques durs de l'ordinateur serveur afin d'être servies en l'état à chaque sollicitation.
 

2.1.  Programmation HTML

Nous n'entrerons pas dans le fond de la programmation  HTML, mais seulement sur les moyens (les outils) pour y parvenir. En dehors de la connaissance du langage lui-même, un programme HTML peut être écrit au moyen de :

2.2.  Autre production HTML

Depuis son origine, le langage HTML a évolué de façon assez importante, et la fixité des données et de la présentation a été partiellement levée.

2.2.1.  Bases de données

cf  MySQL

Dans de très nombreux cas, les données présentées par les serveurs sont évolutives et les requêtes différentes d'une transaction à l'autre. Dans ce cas, il n'est pas question de créer par avance toutes les pages HTML possibles.
 
C'est  pourquoi  il  existe  certains  programmes  qui  permettent  de  remplir  à  la  volée  les  pages  HTML préformatées avec des informations issues d'une base de données du serveur (ou d'ailleurs).
 
Nous  n'en  dirons  pas  plus,  il  existe  de  très  nombreuses  variantes  selon  les  systèmes,  les  bases  de données, … etc. Il faut savoir cependant que ce type de processus est de plus en plus fréquent. Cette possibilité facilite la mise à jour de données fixes mais devant être modifiées souvent.

2.2.2.  Les feuilles de styles

Les feuilles de styles font partie des nouveautés importantes du langage HTML. Elles permettent de changer  l'aspect  d'une  page  HTML  sans  modifier  son  contenu  et  de  disposer  de  quatre  ou  cinq présentations  différentes  pour  une  même  page  Web.  Elles  permettent  des  modifications  étendues  à tout  un  site  Web,  puisque  leur  principal  intérêt  réside  dans  le  fait  qu'elles  peuvent  être  déclarées  à l'extérieur d'un document HTML.
 
Il existe plusieurs façons de décrire des feuilles de style :

2.2.3.  HTML Dynamique

De façon formelle le langage HTML dynamique comprend les feuilles de styles que nous avons cité ci-dessus.
 
Par  contre,  sous  l'impulsion  de  Netscape  le  langage  HTML  a  vu  apparaître  avec  la  version  4  de  son navigateur de nouvelles balises permettant de rendre des parties de page HTML mobiles, amovibles, en un mot dynamique.
 
Le positionnement dans un document peut se faire à l'aide des définitions de feuilles de style. Il peut en outre être mis en œuvre par une nouvelle balise nommée : LAYER. Cette balise LAYER s'utilise dans le  corps  d'une  page  HTML,  c'est  à  dire  entre  le  couple  de  balise  <BODY></BODY>.  Cette  balise permet  de  positionner  une  partie  de  code  HTML  et  elle  accepte  en  conséquence  un  certain  nombre
d'arguments permettant de paramétrer la présentation de certains éléments.

2.3.  Les formulaires

Le langage HTML a été prévu à l'origine pour servir à des stations clientes des données stockées dans un  serveur  sans  qu'aucune  donnée  autre  que  celles  servant  à  la  navigation  puisse  transiter  en direction du serveur.
 
Cette  situation  est  bien  entendue  très  gênante  lorsqu'il  s'agit  de  collecter  des  informations  à  partir d'un  terminal  pour  enrichir  la  base  de  données  du  serveur.  C'est  pourquoi  il  a  été  conçu  les formulaires.
 
Un formulaire est une page HTML qui autorise le " client " à saisir des données dans certaines zones prévues à cet effet. Les contrôles de saisie à ce niveau sont extrêmement limités. Il existe cependant la  possibilité  de  gérer  des  listes  de  choix  pour  certaines  zones  afin de  faciliter  la  saisie  et  filtrer  les éventuelles réponses folkloriques.

3.  Les programmes CGI

Pour  rester  très  générique,  nous  dirons  qu'un  programme  CGI  (Common  Gateway  Interface)  est  un programme  de  traitement  de  données,  indépendant  de  la  plate-forme,  qui  est  lancé  à  partir  d'une page HTML. En fait, il s'agit plus d'une interface passerelle entre un serveur HTTP et un serveur de base de données quelconque.
Les "scripts CGI" peuvent être écrits en différents langages, le Perl en est un exemple. Les programmes CGI s'exécutent sur le ou les serveurs.

dd-ons, modules logiciels destinés à étendre leurs fonctionnalités.
Apache, serveur PHP, tout programme qui s'exécute sur le serveur est un CGI. A confirmer.

4.  Les programmes JAVA

http://fr.wikipedia.org/wiki/Java_(langage)
http://jqueryui.com/ : des applets Java sont disponibles sur ce site. Elles permettent de rendre un site plus dynamique. Exemples d'applets : slide barres, ouitls de dialogue, .... Bibliothèque à mettre sur le serveur et leur exécution se fera sur le terminal. Il s'agit de bibliothèque de JavaScript.

A l'inverse d'un programme CGI, un programme Java s'exécute sur l'ordinateur client. Le programme Java est généralement envoyé à la station cliente par le serveur HTTP.
 
Le langage Java est un langage client-serveur, c'est-à-dire indépendant des plates-formes matérielles. De plus, il est " orienté objet " comme tous les langages modernes.
 
Il existe des bibliothèques publiques de codes Java qui permettent de ne pas réinventer ce qui l'a déjà été (c'est l'avantage de la programmation objet).  

5.  Les Plug-ins

Les  navigateurs  ne  sont  pas  capables  d'interpréter  chacun  des  centaines  de  formats  utilisés  sur Internet. Ils recourent alors à des programmes extérieurs : pour afficher un format de données précis, il suffit de charger au préalable une visionneuse logicielle adaptée, également appelée plug-in, lequel s'intègre au sein même du navigateur. En règle générale, les plug-ins sont disponibles gratuitement sur  le  réseau  et  faciles  à  installer.  Si,  sur  un  site,  sont  proposés  des  fichiers  dans  un  format  peu courant, un lien hypertexte est généralement ajouté qui renvoie à la page permettant de télécharger le
plug-in nécessaire au visionnage.
 
Ainsi, Autodesk, l'éditeur (www.autodesk.com) propose le plug-in  de  visionnage  des  fichiers  au  format  .dwf  (Drawing  Web  Format).  Ce format graphique fortement compressé permet de visualiser des fichiers AutoCAD 14.
 
Sur  son  site  web,  Netscape  présente  la  palette  complète  des  plug-ins  (ou  "modules  externes") disponibles  pour  son  navigateur  ainsi  que  le  format  de  fichiers  auxquels  ils  s'appliquent.  Vous trouverez cette liste à l'adresse http://www.netscape.com/plugins/index.html.
 
Microsoft fait de même pour Internet Explorer, sur son site Browserwatch, qui recense, quelle que soit la plate-forme, l'ensemble des plug-ins disponibles à l'adresse http://browserwatch.internet.com/plug-in.html.
 
Un  plug-in  pour  Netscape  Navigator  se  présente  sous  la  forme  d'un  fichier  .dll,  stocké  dans  le répertoire  des  plug-ins.  Celui-ci  se  trouve,  par  défaut,  dans  le  dossier  C:\Program Files\Netscape\Communicator\Program\plugins\.
 
Les plug-ins les plus complets, qui utilisent leur propre interface ou disposent de fonctions d'édition ou d'exportation, créent leurs propres répertoires. Le fichier .dll ne sert alors qu'à charger le plug-in.
 
Avec Netscape Navigator, il est possible, grâce à la commande Aide/A propos des modules externes, d'afficher une liste des plug-ins déjà installés. Netscape exécute alors un script Java qui en affiche la liste, ainsi que les types MIME enregistrés. 

6.  Les types MIME

Les  formats  de  fichiers  utilisés  sur  Internet  ont  été  classés  par  la  RFC  (Request  For  Comments  ou "appel  à  commentaires")  1521.  Sous  Windows,  ils  sont  nommés  d'après  leur  extension  de  fichier.
Ainsi, un double clic sur un fichier .txt lance automatiquement le Bloc-Notes ; un double clic sur un fichier  .doc,  WordPad.  Si  vous  installez  une  suite  bureautique  telle  qu'Office,  Lotus  ou  WordPerfect, l'extension .doc sera alors associée à leur logiciel de traitement de texte. Lors du prochain double clic sur  un  fichier  .doc,  c'est  ce  programme  qui  sera  automatiquement  chargé.  Ce  principe  vaut  pour toutes les extensions de fichiers qui renvoient à une application donnée. La plupart du temps, cette association est gérée par les routines d'installation des logiciels. Méthode de logiciel par défaut sous windows : un type de fichier, d'extension est associé à un logiciel. Ces fichiers seront automatiquement ouverts par ce logiciel.
 
Sur  Internet,  en  revanche,  tout  le  monde  n'utilise  pas  le  même  système  d'exploitation.  Certains  ne recourent  pas  à  l'attribution  d'extensions  de  fichiers.  On  a  alors  défini  des  formats  de  fichiers indépendants des extensions de fichiers. A un fichier, on peut alors associer un nom, ou un format.
Ainsi les navigateurs seront mieux à même d'identifier le type de fichier dont il s'agit et le plug-in qui permet de l'ouvrir.
 
Le  Standard  MIME  range  ces  formats  en  classes,  puis  en  sous-classes.  Dans  le  tableau  ci-dessous, vous  en  trouverez  les  principales.  Dans  les  pages  web  qui  font  référence  à  d'autres  fichiers,  il  est important d'inclure la dénomination conforme au standard MIME pour faciliter l'association avec le bon plug-in. Les formats multiparts et message servent à l'organisation et au codage des messages e-mail
et newsgroups comportant des pièces jointes.

7.  Les formats graphiques

Les graphiques sont déterminés par la classe MIME image. Au fil du temps, d'autres extensions se sont développées, dont le format apparaît le plus souvent dans la classe image.
Les principaux formats graphiques
Classe MIME Description Extension
image/bmp BMP .bmp
image/cfx CFX .cfx
image/drw DRW .drw
image.pict macintosh Image PICT .pict, .pic, .pct
image/png Image PNG .png
image/tiff  Image TIFF .tif, .tiff
image/x-photoshop Image Photoshop  .psd
image/x-quicktime Image QuickTime .qtif, .qif, .qti
image/x-wordperfect-graphics Wpg .wpg

      
Les images vectorielles, les dessins CAD et les modèles en 3d sont définis dans d'autres classes qui recoupent en partie la classification de la classe image quand, par exemple, différentes classes MIME sont utilisées pour le même format de fichier.
 
Aux  débuts  d'Internet,  on  ne  trouvait  qu'une  classe  MIME  image.  Elle  comprenait  tous  les  formats graphiques  alors  utilisés.  Mais,  avec  le  temps,  les  images  vectorielles  ont  été  de  plus  en  plus répandues et on leur attribua la classe vector. Aujourd'hui, pour gagner en visibilité, l'IANA essaie de l'intégrer  dans  la  sous-classe  image/vnd.  Ce  qui  explique  que  l'on  trouve  les  mêmes  formats représentés dans plusieurs classes.  
 
L'extension .dwf

Classe MIME Description Extension
Drawing/x-dwf   fichier drawing web format .dwf

L'extension .lvr
Classe MIME Description Extension
i-world/i-vrml LivePicture Files .lvr

L'extension .dwf, .wrl et .wrz
Classe MIME Description Extension
model/vnd.wmf  drawing web format file .dwf
model/vrml vrml world .wrl, .wrz

   
Autres extensions de fichiers vectoriels
Classe MIME Description Extension
vector/x-dwg drawing .dwg
vector/x-dxf DXF   .dxf

Multimédia
Les  séquences  audio  et  vidéo  utilisent  leurs  propres  formats.  Les  formats  spéciaux  développés  par certains éditeurs se trouvent dans la classe application.

Principaux formats multimédias
Classe MIME Description Extension
audio/aiff  AIFF Audio .aiff, .aif, .aifc
audio/mid MIDI .midi, .mid, .smf, .kar
audio/rmf RMF .rmf
audio/wav WAV Audio .wav

 
Les formats vidéo
Classe MIME Description Extension
video/msvideo Vidéo for windows .avi
video/quicktime QuickTime Movie .mov, .qt

   
Texte
Il existe aussi peu de formats spécialisés dans la représentation de textes. La plupart des logiciels de traitement  de  texte  utilisent  des  formats  propres  à  leur  éditeur,  que  l'on  retrouve  dans  les applications. Il est également possible de représenter du texte au sein d'un fichier .html, multi plate-forme et qui peut être lu par tous les navigateurs sans plug-ins.
Les formats texte
Classe MIME Description Extension
text/plain Text .txt
text/rtf RichTextFormat .rtf
text/x-vcard Vcf  .vcf

Les formats spéciaux
Les  formats  propres  à  certains  programmes  sont  souvent  enregistrés  comme  types  MIME.  On  les trouve  alors  classés  parmi  les  applications.  Le  plus  souvent,  leur  utilisation  nécessite  un  plug-in développé  par  l'éditeur  ou  une  visionneuse  multiformat.  Le  tableau  ci-dessous  vous  indique  les principaux formats spéciaux.

Les principaux formats spéciaux
Classe MIME Description Extension
application/pdf Acrobat .pdf
application/postscript Postscript .ps
application/vnd.ms-excel xls, xlc .xls, .xlc
application/vnd .ms-powerpoint ppt, pot  .ppt, .pot

8.  Les Add-ons pour navigateurs web

En plus des plug-ins, utilisés pour lire des formats informatiques non reconnus par les navigateurs, il est possible d'ajouter à ceux-ci des add-ons, modules logiciels destinés à étendre leurs fonctionnalités.

Exemples :
Sur firefox : firebug est un add-on.
Sur Google Chrome : Web developper, firebug lite
 
Fullscreen  est  un  exemple  d'add-on.  Vous  le  trouverez  à  l'adresse http://www.inquare.com/fs/index.phtml.
 
Ce module permet, d'un seul clic, de faire disparaître les menus et les barres d'outils de Netscape et de libérer ainsi de l'espace pour afficher une plus grande surface de page web.

9.  Chargement automatique de Plug-Ins

Si, lors du chargement d'une page web dans votre navigateur, un des fichiers n'est pas reconnu par le logiciel,  celui-ci  commence  par  vérifier  que  le  format  correspond  à  un  format  supporté  par  l'un  des plug-ins disponibles. Sinon, il faut espérer que le concepteur de la page ait pensé à y inclure un lien vers le plug-in correspondant …

Dans le cas de figure le plus simple, le navigateur tente d'ouvrir le fichier en tant que fichier texte. Quand il n'est pas fait référence à aucune classe MIME et à aucun plug-in.
<A HREF="cmx/TIME.cmx">Hourglass</A>
 
C'est  cette  ligne  qui  donne  les  informations  sur  le  fichier  à  ouvrir.  Le  format  .cmx  est  un  format d'image  vectorielle  propre  à  Corel.  Le  plug-in  correspondant  se  trouve  à  l'adresse http://www.corel.com/corelcmx/realcmx.htm.