;-)Web

Connecter l’information

Moteurs de recherche

Sites WebPortails d’entreprise

Serveursde fichiers

Peer to Peer

E-mail

E-marketing Voice & SMS

E-businessBases de données

;-)Pages statiques ... rappel

1995 : début du Web -> multiplication de sites en html pur.

HTML -> site statique : une seule version.

Modifier un site statique : changer une à une toutes les pages avec un éditeur html (Dreamweaver, FrontPage, Textpad, etc.) :

• OK pour des sites web de petite taille, au contenu permanent ou rarement mis à jour,

• pas pour des sites dont les informations font l'objet de modifications fréquentes (e-business).

;-)Pages Web dynamiques

Page dynamique : construite à la demande (à la volée) par le serveur, en fonction de critères spécifiques.

Présentation et contenu adaptés de manière interactive, en fonction des produits, des internautes, des langues, etc.

Voir URL :• page statique :

http://www.monsite.be/accueil.htm• page dynamique :

http://www.monsite.be/accueil.php?lang=frMais ! De plus en plus souvent, réécriture d’URL pour optimiser les pages pour les moteurs de recherche

;-)Client / serveur : statique

:Client 5

Serveur Web

1. le client demande la page accueil.htm

2. le serveur transmet la page au client

La page s’affiche simplement, le serveur sortant la page telle quelle. Une forme de dynamisme peut être introduite par du Javascript (attention à la compatibilité). Dans ce cas l’interactivité est côté client.

;-)Client/serveur : dynamique

:Client 5

Serveur Web

1. le client demande la page mapage.aspx (ou .php, etc.)

2. le serveur web sollicite le serveur d’applications (plateforme .Net, ou php, 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

;-)Pages dynamiques = programmation

Les pages dynamiques sont mises en œuvre grâce à un langage de programmation qui permet des opérations complexes : instructions conditionnelles, boucles, fonctions de traitement, etc. Le langage de programmation ne remplace pas le (x)html, mais il en produit.

;-)Pages dynamiques : pourquoi ?

• 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, création de graphiques, protection de pages par mot de passe, production de fichiers à divers formats (PDF, texte, …), gestion automatique des hyperliens, RSS, etc.

• Intégration du multimédia et des outils Web 2.0.• API (Application Programming Interface).• XML et ses possibilités infinies.

;-)Avantages des pages dynamiques

• Mises à jour plus aisées du contenu.• Maintenance du site facilitée (catalogue en ligne).• Manipulation et recherche.• Possibilités illimitées : notamment personnalisation

pour :o l’entreprise : mieux connaître ses utilisateurs

(data mining);o l’internaute : environnement adapté à ses

habitudes.

;-)Site dynamique : coût

Le passage des pages statiques vers les pages dynamiques requiert un investissement important :

• au niveau financier (plus cher qu'un site statique);• en ressources humaines et en compétences

techniques.

Attention :• statique -> dynamique • monde du design -> monde de l’informatique

Un site Web n’est jamais fini !

;-)HTML, XML et XHTML

HTML (HyperText Markup Language) :• créé par des scientifiques pour transmettre du

texte;• enrichi et dénaturé pour le rendre attractif;• double utilisation ambiguë : mise en page et

structuration du contenu très fortement imbriquées (exemple typique des tables);

• absence de sens.

;-)HTML, XML et XHTML

XHTML (eXtensible HyperText Markup Language). Standard de publication Web :

• apporter la rigueur et la souplesse d’XML à HTML pour lui rendre sa mission première : présenter l’information;

• XHTML + CSS + DOM : permet de présenter des sites très complexes de manière très rigoureuses (attention aux anciens browsers);

• incontournable pour l’accessibilité (browsers pour handicapés, télévision, terminaux mobiles et browsers spécifiques (Opera);

• impératif pour les nouveaux sites.• HTML 5 ?

;-)Standardisation !

Séparer contenu et présentation, structurer la page, respecter les standards :

• aucune indication de présentation explicite (polices, couleurs, justification, etc.);

• usage des balises XHTML adéquates (blocs DIV, tables, listes à puces ou numérotées, titres, définitions, citations, etc.);

• respect de règles strictes pour la structuration (balises fermées, minuscules, imbrication, id, alt, etc.)

• respect des standards (couleurs, etc.)

-> Demander des preuves de l’expertise du développeur !

;-)Plateforme de développement ?

Eviter l’exotisme -> solutions reconnues :• Java/JSP (Java Server Pages)

->.jsp, .shtml, etc.• PHP (Hypertext Preprocessor)

-> .php, .phtml, etc.• ASP.net (Microsoft) -> .aspx

Nombreux CMS s’appuyant sur ces technologies.

Choisir un intermédiaire de qualité et demander des références. Fixer le contour exact de la mission.

;-)AJAX

AJAX (Asynchronous Javascript And XML). Développement web basé sur Javascript pour effectuer des requêtes Web sur une page sans la recharger :

• modèle dynamique classique : succession de requêtes/réponses;• AJAX : modifie uniquement la partie de la page qui le nécessite en

créant une requête HTTP locale et en modifiant cette partie suivant le résultat de la requête HTTP.

AJAX = modèle de développement Web basé sur : • (X)HTML et CSS: présentation visuelle;• DOM (Document Object Model) : page découpée en objets;• Javascript et en particulier l'objet XMLHTTPRequest pour

manipuler des requêtes et des réponses.

;-)AJAX oui ou non ?

Avantages : • interface réactive et intuitive;• rapidité d'exécution (seules les données à modifier

dans la page sont échangées selon le protocole HTTP);• meilleure ergonomie (contrôles en temps réel dans les

formulaires par exemple);• au coeur du Web 2.0.

Inconvénients :• compatibilité et version des browsers,• indexation difficile par les moteurs de recherche,• sécurité des données présentes sur le poste client.

;-)Flash

Flash permet le développement d’animations multimédias pour le Web, des CD, des DVD, etc. Créé par Macromedia depuis racheté par Adobe :

• fichier exécutable grâce à un plug-in sur le poste client (pratiquement tous les ordinateurs dans le monde);

• problème : souvent très mal utilisé (logo qui tourne, animation sans intérêt, etc.) -> skip intro !

Succès considérable et aujourd’hui véritable plateforme de développement intégrant notamment des fonctionnalités XML et un langage de programmation (action script).

Standard de facto -> position très forte sur le marché, notamment dans le multimédia (YouTube), la publicité, le Web 2.0, etc.

Microsoft ... a lancé un concurrent : SilverLight.

Adobe Flex.

;-)12/04/2023 Agence Wallonne des Télécommunications 17

;-)Portail : concept général

Portail -> offrir un point d'entrée unique vers les informations et des services dont les internautes ont besoin.

Exemples : Yahoo!, MSN (Live), Skynet, … Google.

Place virtuelle, le portail cherche à :• attirer et à fidéliser les internautes;• collecter des informations sur ses utilisateurs afin de

personnaliser leurs relations;• offrir un maximum de services en ligne.

;-)Portails : tendances

Personnalisation :• le portail cible chaque visiteur (marketing one to one);• services spécifiques aux personnes;• Web 2.0 -> outils de création d’un portail personnel à

partir d’applications du Web (Netvibes, iGoogle, etc.).

Partage:• le public devient producteur de services et contenus.

Mobilité et multicanal :• toucher le client via le Web ne suffit plus;• portails mobiles;• télévision numérique interactive.

;-)Portails généralistes

Fédérer le plus large public pour devenir LA page d’entrée systématique sur le Web (portails horizontaux) :

• annuaire de liens, • moteur de recherche, • rubriques de contenus et d'actualité (partenaires),• chats et/ou forums de discussion,• lettre d’information, • services de mail, pages perso, blogs, albums photos, etc.• un ou des magasin(s) en ligne,• jeux et concours,• …et beaucoup d'autres choses.

;-)Portails spécialisés (verticaux)

Modèle de contenu et de services = celui des portails généraux, mais focalisé sur un thème spécifique fédérant les intérêts d’une communauté d’intérêt (par exemple le sport).

Frontière parfois (et de plus en plus) floue avec les portails généralistes.

Variantes :• portails d’entreprise et portails applicatifs,• portails industriels,• portails d’e-gouvernement.

;-)Portail d’entreprise

Communauté d’intérêts = l’entreprise et les acteurs de son activité (personnel, fournisseurs, clients, partenaires, grand public, etc.).

EIP (Enterprise Information Portal) ou de portail d’entreprise.

Portail d’entreprise … ou d’organisation (par exemple une ville).

;-)Portail d’entreprise : pourquoi?

• Multiplication des PC et autres terminaux.• Management des productions électroniques

individuelles.• Importance toujours plus grande des intranets.

Ceux-ci font de plus en plus appel aux technologies et à la navigation Web.

• Faire évoluer le site Web de l’entreprise.• Assurer l’interopérabilité des différentes applications

de l’entreprise, de plus en plus nombreuses et de plus en plus électroniques

• Intégrer, automatiser et personnaliser les services et relations de l’entreprise avec l’ensemble des acteurs concernés.

;-)Portail

d’entreprise : pourquoi?

…

Entreprise sans portail

;-)Portail : processus business

Beaucoup d’entreprises se sont lancées sur le Web sans trop savoir pourquoi (mode). Beaucoup de développements informatiques ont été réalisés de manière purement empirique.

La mise en œuvre d’un portail oblige l’entreprise à se poser des questions essentielles et à choisir une nouvelle attitude :

• quels utilisateurs?• pour quels services?• processus business?• B2E -> B2B -> B2C -> B2A -> …

;-)Portail

d’entreprise : schéma global

;-)EIP : fonctionnalités

• Agrégation de contenu et intégration d’applications(ERP, bases de données, etc.), entre elles, mais aussi avec des applications extérieures.

• Personnalisation en fonction de l’utilisateur.• Travail collaboratif.• Recherche et catégorisation de l’information.• Gestion de contenu

(documents structurés >< documents non structurés)• Automatisation des tâches et la gestion du workflow.• Gestion de la sécurité (single sign on, droits, etc.).• Administration, analyse, …• Vente en ligne et suivi des commandes.• Etc.

;-)EIP : bonnes pratiques

Penser grand, démarrer modestement, grandir rapidement :

• préparation : services et utilisateurs;• partir de l’existant : interne et externe;• implication des acteurs;• sécurité : données de l’entreprise;• prototype : valider les choix;• standards : XML/RSS/Web services;• évolutivité : assurer la montée en puissance.

;-)XML

XML (eXtensible Markup Language) :• langage balisé (comme HTML), facilement

compréhensible par l’homme et la machine;• les balises d’XML sont extensibles : documents auto-

descriptifs (les données et leur signification);• sauvegarder les informations et assurer leur

pérennité;• échanger des données;• déclencher des processus grâce à la logique interne

de chaque document;• Exemple simple : RSS.

Question : mes applications parlent-elles XML?

;-)Exemple XML

<?xml version="1.0" ?><cours>

<professeurs><titulaire>André Blavier</titulaire><professeur>Damien Jacob</professeur><professeur>Eric Vyncke</professeur>

</professeurs><année>2009/2010</année><étudiants>

<étudiant id="1254"><nom>Tartempion</nom><prénom>Jules</nom>

</étudiant><étudiant> … <étudiant>

</étudiants></cours>

;-)EIP : rôle d’XML

;-)EIP : Web services XML

Un service Web est une application exécutable disposant d’une interface lui permettant d’être accédé par d’autres applications via une requête http (Web).

Basé sur des protocoles standards (XML, SOAP, WSDL).

Self-service informatique : je compose mon application en choisissant les services qui m’intéressent.

-> Cloud Computing (XML, API, mashups).

;-)EIP : rôle des Web services

;-)Solutions techniques

Solutions disponibles :• développement sur mesure s’appuyant plus ou moins sur une

plateforme déjà existante;• plateformes des grands acteurs (Sharepoint, Websphere, etc.);• plateformes d’acteurs locaux s’appuyant plus ou moins sur une

plateforme déjà existante;• CMS divers (Joomla, Alfresco, Drupal, etc.), souvent en mode

Open source (<> gratuit), plus ou moins customisés et/ou couplés avec d’autres outils.

Projets toujours de grande ampleur :• la préparation est essentielle et l’expertise du prestataire est

cruciale!• toujours se baser sur des standards et des solutions pérennes

(XML, PHP, .Net, Java, etc.). Eviter l’exotisme.

;-)?

André Blavier | ab@awt.be