Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#01 { cours : présentation ; }

Séparation : présentation / contenu

La première partie de ce cours portera essentiellement sur la nécessité de séparer la couche de présentation web de la couche des contenus. Il s’agit d’une séparation idéologique que nous allons nous imposer volontairement. Ironiquement, cette séparation un peu autoritaire nous ouvrira sur un espace politique plus ouvert, et permettra à la fois aux Internautes et aux robots d’accéder à nos créations sans renier à leur diversité. C’est un point important, parce que souvent — et pour des raisons plus ou moins liés à des considérations mercantiles — nous avons du faire des choix jusqu’ici entre une bonne présentation de nos sites et un contenu accesible de nos sites.

L’histoire et la politique de cette tension entre contenu et présentation des pages web est longue et tortureux. Pour les graphistes, par exemple, le web a toujours été un cauchemar : pas de contrôle sur la typographie (plus ou moins la base du graphisme), pas de contrôle sur le positionnement des élements graphiques, etc. Divers solutions ont été proposées pour pâlier à ce problème, souvent liées à une société privé voulant détourner les pages web vers une solution permettant de vendre plus de logiciels de leur société. mais aujourd’hui, une des solutions commence à sérieusement se distinguer des autres. Ouverte et gratuite, cette solution porte sur la séparation structurelle entre contenu et présentation. Elle évite les problèmes d’obfuscation des contenus des pages web, tout en offrant de très bonnes bases graphiques, voire typographiques, pour la présentation de ces contenus. Et elle garde toute la force hypertextuel de ce qui a donné naissance à l’engouement pour le world wide web, puisque elle est basé sur le format même qui a révolutionné Internet : le HTmL.

La cas de Flash

mais regardons un moment une des solutions alternatives. Aujourd’hui, le meilleur contre-exemple, et un des plus courants, tourne autour de l’utilisation de Flash dans les pages web (si vous ne connaissez pas Flash, voici un petit déscriptif de son fonctionnement).

Il faut rappeller que Flash a été conçu, au départ, pour faire des animations vectorielles interactives, suivant des logiques temporelles. Il n’a pas été conçu pour créer des hypertextes imbriqués les uns dans les autres. Quand on regarde l’interface, on voit tout de suite qu’il n’a jamais été question d’utiliser Flash pour faire de blocs de texte avec des liens pour naviger entre différents documents. L’interface, au contraire, a été conçu pour faire des dessins en mouvement.

Il y a même une très forte ressemblance — surtout quand on regarde la palette d’outils — avec un des plus célèbres logiciels de dessin sur ordinateur, macPaint de 1984 :

Et pourtant, certains utilisent aujourd’hui Flash pour faire justemment des sites Internet. même si nous défendons ailleurs l’importance de détournement de logiciels, il s’agit ici d’un détournement moins d’un logiciel qu’un espace d’expression. Et quand ce genre de détournement profite un fabricant de logiciels propriétaires, il faudrait plutôt parler d’appropriation. Le World Wide Web, avec ses principes de visibilité permanente des contenus et de leur structures (donnant naissance à des choses comme Google), petit-à-petit s’est fait grignoter cette visibilité par un logiciel de dessin qui savaient (malheureusement, dans ce cas), bien manier la typographie.

Exemple

Si on va sur la page actuelle [10/2005] du site http://www.arte-radio.com, nous nous trouvons dans un curieux choix à faire : l’utilisateur doit choisir entre une page en Flash et une page en HTmL.

Et si nous faisons ce choix, nous voyons tout de suite, que les deux pages n’ont pas le même statut :

Il s’agit d’un choix très problematique pour le concepteurs de pages internet. Que l’on demande aux internautes de choisir de cette façon entre deux formules, signifie que les concepteurs n’ont pas eu le courage tout simplement de faire eux-mêmes ce choix. Entre leur désir d’être élégant (et on leur comprend) et le désir d’être socialement réponsable (la mauvaise conscience, plutôt genre gauchiste-coupabilisant), les concepteurs n’ont pas réussi à trancher. Et on doit avouer que nous avons nous même proposé ce genre de choix absurde (sur le site de l’école, par exemple) à une certaine époque : nous avons nous mêmes été tiraillé entre réponsabilité civique et élegance graphique (autremment dit, lisible vs. tape-à-l’oeil). mais cette indécision nous semble — vu l’évolution récente du web — ne plus être tenable. Elle irait même à l’encontre des avancés du web : nous n’avons plus à faire ce choix entre élegence et lisibilité.

On n’a qu’à aller regarder la diversité de propositions graphiques du site www.csszengarden.com pour savoir que ce choix n’est plus d’actualité. Il s’agit d’un site où le même contenu hypertextuel (texte+liens) est exprimé d’une infinitude de différentes mannières graphiques. Ce site est du coup lisible à la fois par des robots en tout genres (programmes, petits appareils, consoles UNIX, lecteurs pour aveugles) et des browsers non seulement d’ajourd’hui, mais — et ceci est le plus important — de demain.

Quand on voit qu’avec l’utilisation de standards Internet ouvert (csszengarden requiert aucun logiciel propriétaire), qui sépare le contenu de la présentation — on peut donc avoir le meilleur des deux mondes — franchement on ne devrait plus avoir à choisir. En séparant le contenu de la présentation, on rend lisibile et beau, notre contenu. On laisse à l’environement ce choix, à savoir comment adapter le contenu au contexte. Il s’agit de l’introduction d’une autre forme d’élegance : c’est-à-dire la capacité de faire adapter un site à différents systèmes d’exploitation, une diversité (imprévisible) de logiciels de lecture (exemple : les nouveau Widgets de mac OS X 10.4), l’arrivé rapide d’objets portables accédant au réseau, etc. Est-ce que les concepteurs du site de Arte-Radio vont, par exemple, adapter leur site avec un troisième choix, si par exemple Apple décide de mettre du wifi + Safari dans un iPod ? On pourrait l’imaginer, car Arte-Radio est d’abord un site dédié au son. mais que se passera-t-il si un autre concepteur décidait alors d’un autre format pour la lecture de sites internets sur lecteur mp3 ? On voit que cette solution n’est pas tenable dans le long-terme, surtout (pour Arte-Radio) à l’époque où les radio en-ligne tourne de plus en plus vers la logique du Podcast, et où le robot cherche lui-même les nouveaux enregistrements sans s’inquiéter de la couleur ou de l’emplacement des icônes. Dans ce cas, la plupart des utilisateurs du Podcast Arte-Radio ne verront même pas ce site web — jolie ou pas. En plus (s’il fallait encore un clou à enfoncer), si Arte-Radio séparait dès le départ le contenu de leur site de sa présentation, ils pourraient ajouter un jour un formattage de présentation pour ce futur wifiPod hypothétique, sans affecter les autres formats de présentation (navigateur sur ordinateur, navigateur pour portables téléphone). En plus, ils n’auraient même pas à demander aux utilisateurs de cliquer sur un gros bouton à l’ouverture du site : le système pourrait s’en charger tout seul.

Comme nous le montre le site www.csszengarden.com, Arte-Radio pourrait avoir non seulement le beurre, mais l’argent du beurre : on peut rendre un site lisible pour un robot, lisible pour un être humain, réellement lisibile et audible pour des personnes handicapés, visuellement agréable pour les utilisateurs de machines performantes ou actualisées, diversifié et dynamique pour les nouveaux appareils et logiciels — tout cela sans proposer un choix franchement arbitraire pour la plupart des utilisateurs du web.

Nous ne disons pas que ce passage de « standardisation » (autre terme souvent utilisé pour la séparation entre présentation / contenu) sera simple pour les infographistes habitués à une logique ancienne, c’est-à-dire une manque presque totale de logique, voire de politique commune. On aurait du mal d’ailleurs à pointer les doigts : nous avons nous-mêmes encore plusieurs sites publiés qui ne réspectent pas encore les principes qui seront enseignés ici. Il s’agit donc d’une transition qui prendra du temps pour tout le monde. mais comme on est ici dans un contexte de cours, et qu’il est donc possible d’enseigner une approche saine dès l’entrée pour certains dans le monde de la création web, autant donner tout de suite de bonnes habitudes.

Free Flash !*

On va donc proposer ici un slogan qui nous permet de relier deux mondes qui nous intéressent dans l’atelier :

- la création de contenus ouverts, suivant un principe d’accessibilité et d’adaptabilité des contenus dans des formes divers d’algorithmisation et d’usage (i.e. hypermedias). Autremment dit on est intéressé à des contenus fluctuants.
- la création d’animations et d’installations interactives, qui tirent pleinement profit des possibilités plastiques des machines.

Libérons Flash de sa lourde tâche, libérons Flash de ce qu’il ne sais pas faire : donner un contenu ouvert et bien adapté à la diversité des contenus sur le web. Free Flash ! Libérons Flash pour ce qu’il sait faire de mieux — de belles animations interactives et des interfaces vraiment novatrices — pour qu’il laisse à l’HTmL et au CSS ce qu’ils savent vraiment faire ensemble — bien présenter des contenus ouverts.

Il ne faut pas croire, quand nous critiquons l’utilisation de Flash sur des sites web, que nous condamnons tout entier son utilisation. Au contraire, sur des sites comme Yugop, Sodaplay ou sur certains de nos propres sites (cf. http://www.webwaste.net), on voit mal comment on pourrait faire un tel contenu sans passer par l’utilisation de modules externes (plug-ins) comme Flash, Shockwave ou Java. Dans ces trois exemples, d’ailleurs, il s’agit aussi de l’utilisation de contenus collectifs et donc ouverts, d’oeuvres qui cherchent à jouer avec le principe d’association publique et collective des contenus que Internet nous offre.

mais même à leur mannière, ces sites respectent la séparation des couches de présentation de leurs contenus. Et sur ces sites, Flash, Director, ou Java est utilisé pour donner forme à quelque chose qui ne pourrait avoir de forme qu’en passant par là. On a du mal à voir comment le site de Arte-Radio soit obligé d’utiliser Flash pour présenter leurs contenus. Sans Flash, le site d’Arte-Radio fonctionne toujours (la preuve, ils nous donnent ce choix), alors que dans le cas d’un site comme http://www.sodaplay.com, on ne peut même pas venir créer/jouer avec les contenus du site si on n’est pas dans un environement lui-même dynamique.

Nous allons dans ce cours essayez de trouver d’autres formes de présentation que ceux qui nous donneraient des sites alléchants, mais finalement peu adaptés à l’évolution actuelle du web qui tourne de plus en plus vers la diversification des moyens d’accès. Dans le cas d’usages spécifiques, nécessant l’usage de modules externes qui ouvrent des possibilités qui ne sont pas possibles ailleurs, nous chercherons néanmoins à jouer un jeu similaire de séparation des données avec leur expression, nous permettant ainsi de rendre plus collectif ces formes interactives.

*note : on pourrait aussi voir dans notre slogan une invitation à Adobe d’ouvrir Flash aux Internautes (libérez-le !), mais nous laisserons cette lutte pour une autre fois.

Exercise

Pour ceux qui suivent ce cour dans l’atelier, la première exercise consistera tout simplement à parcourir les trois sites suivants, et de comparer les méthodes utilisés pour rassembler et présenter les contenus :

- http://fr.wikipedia.org
- http://www.sodaplay.com
- http://www.csszengarden.com


ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr