Le concept du portail web Le concept du portail web Janvier 2011 – Eric Giraudin

Plan 1.Définition du portail 2.Site web, CMS et portail 3.Différents types de portails 4.Métaphore du portail 5.Différents accès 6.Différents rôles et acteurs 7.Production de contenu simplifiée 8.Principe modulaire du portail 9.Syndication des contenus 10.Séparation entre contenu et présentation - principes de base 11.Séparation entre contenu et présentation - les templates 12.Séparation entre contenu et présentation - codage des templates 13.Design des portails – généralités 14.Design des portails – page d’accueil 15.Design des portails – page de contenu 16.Écriture web dans les portails 17.Accessibilité Web 18.Exemples et démonstrations

Définition du portail Un site Web de référence dans un domaine précis… Un site internet et/ou intranet Une porte d'entrée unique sur un large panel de ressources et/ou de services Centré sur un domaine ou une communauté particulière …avec un public acteur qui peut contribuer au développement L’utilisateur visite, s’inscrit, et revient Il trouve et partage des informations Il communique avec les autres membres Il peut personnaliser son accès

Site web, CMS et portail Le site web Ensemble de fichiers et de dossiers, formant l'arborescence du site, placés sur un serveur et liés entre eux par des liens hypertextes. Le CMS (système de gestion de contenu) Logiciel de conception et de mise à jour dynamique de site Web Travail de plusieurs individus sur un même document Chaîne de publication (workflow) Structuration de contenu Gestion de versions. Le portail Un site web de référence dans un domaine précis, qui intègre le plus souvent un CMS pour gérer et publier son contenu

Différents types de portails Le portail web entrée unique sur un large panel de ressources et services dans un domaine et une communauté particulière accès généralement gratuit dans un logique web 2.0 chacun peut contribuer à l’enrichissement du portail (production de contenus, évaluation, commentaire, discussions, etc.). Le portail commercial site multiservice accès à des contenus et des services majoritairement payants (abonnements). Le portail institutionnel plate-forme intranet/extranet accès à des données de l‘organisme accès des ressources du système d'information

La métaphore du portail Un passage obligé pour entrer dans un endroit Le portail peut être fermé Ne rentre pas qui veut (contrôler) Périmètre fermé (se cacher) Le portail peut être ouvert Informations importantes (nom, but, news, etc.) accessibles directement Sans un portail, on a une dispersion : Informations/outils d’accès Quelle information est d’actualité? Où est-elle? Quel logiciel pour y accéder?

Différents accès Partie privée : espace membre, de publication, … Partie très privée : espace d’administration Espace public : espace de consultation

Les rôlesLes acteurs Différents rôles et acteurs Qui fait quoi? Qui produit quoi? Qui gère les droits? Qui peut publier? Qui valide quoi? Qui peut lire quoi? Le webmestre Les administrateurs Les modérateurs Les animateurs Les auteurs Les membres Le visiteur anonyme

Une production de contenu simplifiée Du « dur et solitaire » au « souple et communautaire »… Dans le temps : technologie en « dur » et 1 homme-clef 1 webmaster = homme-clef (technique + contenu) Des logiciels : dreamweaver, Golive, … Développements informatiques complexes pour rajouter des composants Actuellement : gestion d’un portail accessible à des non informaticiens (sauf pour la sécurité) par une équipe d’acteurs 1 webmaster éditorial, des administrateurs, des auteurs contributeurs Publication décentralisée simple sans logiciel à installer Facilité d’ajout d’extensions dans le portail

Principe modulaire du portail L’application portail gestion de contenu, extensions de base, … extensions communauté extensions e-formation extensions e-commerce extensions gestion de fichiers extensions génériques extensions divertissement et jeux extensions de contenu Etc. extensions communication

Syndication des contenus Mon portail Portail x Portail Y

CMS ou SGC Séparation contenu et présentation – principes de base Bases de données Stockage du Contenu Gestion et structuration du contenu Le template graphique (XHTML / CSS,..) Apparence graphique de l’interface web et du contenu

Séparation contenu et présentation – les templates Le template graphique d’un portail est un ensemble de fichiers qui structure et positionne visuellement les éléments des pages (php, html, …) qui décrivent la forme graphique de ces éléments (feuille de style css) qui enrichissent et personnalisent le design (les images) et qui permettent la cohérence visuelle du portail. On peut changer l’apparence d’un portail sans changer le contenu, en changeant le template. Exemple :

Séparation contenu et présentation – Codage du template Structure visuelle de la page et des zones Extrait du code XHTML de la page web Extrait de la feuille de style Main Header Footer Content Menu1 Bloc 1 Bloc 2 Menu2 Side 1 Side 2 #Main{ width:970px; text-align:left; margin-left:auto; margin-right:auto; background: transparent url(../images/bg.gif) repeat-y ; margin-bottom: 20px; } #header { height: 116px; width: 100%; } …

Design de portails Identification rapide du portail et de sa thématique (logo, base line, nom) Un design épuré voir minimaliste Un découpage en bandeau, colonnes et blocs. Priorité au contenu Une navigation principale par blocs de contenus + une navigation classique par menu Une page d’accueil avec de multiples entrées et une mise en avant des actualités Cohérence graphique (grâce au template)

Design de portails – page d’accueil Blocs de contenus de type actualités visuels et qui incitent au clic Blocs secondaires Accès privé Newsletter Mot du jour Les connectés sur le site … Éléments d’identification du portail : Logo et baseline, … Navigation classique

Design de portails – page de contenu Découpage global en bandeau (logo + menu) et colonnes Blocs et/ou menus contextuels sur la colonne de droite Colonne centrale épurée pour un confort de lecture. zone très textuelle Titre de la page Chapeau, résumé de la page Détail et contenu de la page

Écriture web dans les portails Les règles linguistiques et typographiques Les procédés stylistiques Styles et techniques rhétoriques Modes de lecture : recherche ou consommation Lecture à l’écran La pyramide inversée Placer le message principal en amont et détailler ensuite Ex :Titre, chapo, développement Un paragraphe = une idée Effet pyramide grâce à la navigation hypertexte La règle des 5 « W » Who? What? When? Where? Why? Les guidelines Graphiques : cohérence grâce aux feuilles de style Éditoriales : cohérence de la ligne éditoriale et aussi de chaque type de contenu Visiter le site :

Accessibilité Web Accessibilité Web aux handicapés 30% des Français concernés par une situation handicapante générant des difficultés quotidiennes tant physiques que sensorielles, intellectuelles ou mentales 10 % d'internautes français utilisent des aides techniques spécialisées pour la consultation et l'usage d'Internet. Des directives publiées par la WAIDes directives publiées par la WAI du W3C pour rendre les sites accessiblesDes directives publiées par la WAIDes directives publiées par la WAI Une obligation publique : loi de l’égalité des chances (2004) Accessibilité pour tous et pour tous les environnements OS, navigateurs, PDA, smartphone, logiciel vocal pour handicapés, etc.…

Exemple de portails et démonstration WikipediaWikipedia une encyclopédie portailWikipedia NonfictionNonfiction le portail des livres et des idéesNonfiction Jules Verne Jules VerneLe portail web francophone sur Jules VerneJules Verne Démonstration d’un CMS