historiques
Nouvelle mouture, nouvelle structure du site (06/02/07)
Cette nouvelle version remplace et annule les précédentes. Les précédentes versions sont gardées à titre d'historique, de journal de bord.
Une dizaine de mois s'est écoulé depuis la dernière version de ce site. Qu'apporte-t-elle de nouveau ? La charte graphique reste sensiblement la même. Le plus grand changement passe dans la conception du site puisque après moults et moults demandes, suggestions, critiques, discussions, etc ce dernier se transforme en CMS (Système de Gestion de Contenu ou, en anglais Content Management System).
Les conséquences
- La première et la plus attendue est une gestion plus souple en ce qui concerne l'administration du site. S'attaquer au code HTML tel quel même avec un logiciel WYSIWYG performant comme NVU a été difficilement maîtrisé et accepté par l'ensemble des techniciens de la radio. C'est pour cette raison principale que je me suis tourné vers un système de gestion de contenu de type CMS.
- Une autre conséquence, de type technique, est une perte indéniable en terme de qualité du code. Mais il faut savoir trancher et répondre aux attentes et besoins des techniciens lesquels s'intéressent plus à la maîtrise du contenu qu'à la maîtrise du code.
Le CMS choisi
Après avoir testé plusieurs types de CMS sans grande satisfaction, j'ai enfin trouvé mon bonheur avec CMSmadesimple lequel répond à plusieurs points précis que je n'ai jamais vraiment trouvé ailleurs :
- Une interface d'administration simple, claire, parfaitement intuitive et modulaire. Ce qui permet d'enlever les éléments trop complexes par un astucieux système de gestion des groupes et des utilisateurs (Ceux qui connaissent le monde de Linux savent ô combien ce type de gestion est pratique !!!)
- Une gestion du contenu tout aussi intuititve qui ne nécessite pas un apprentissage long et fastidieux.
- Une gestion modulaire pour l'ajout de nouvelles fonctionnalités (Quand on a goûté aux joies des modules externes du navigateur Firefox, on ne peut plus s'en passer !!!)
- Une gestion intuitive des gabarits, des feuilles de style qui ne nécéssite pas un apprentissage long et fastidieux auprès de la doc, des forums, etc.
Bref, c'est peu dire que ce CMS répond parfaitement aux besoins souhaités. Les seuls reproches à pointer reposent sur l'utilisation d'un éditeur interne fckeditor peut regardant au niveau de la qualité du code ainsi que pour les gabarits :
- on est obligé de passer à un mode de type transitionnel plutôt que strict. J'ai testé d'autres éditeurs intégrés proposés par le site officiel, comme tinymce par exemple. Il propose un nettoyage du code mais il n'est pas automatisé...
- Le passage mode wysiwyg vers le mode source est assez fastidieux d'autant que le code n'est pas du tout indenté.
- Les gabarits proposent un code plutôt lourd, nombreuses imbrications de div inutiles. Il a fallu réécrire l'ensemble du gabarit et le réadapter à un code moins lourd. Ce qui n'a pas été une mince affaire d'autant plus qu'il a fallu parfois aller dans les méandres de cmsmadesimple pour réécrire le code HTML proposé.
Qu'est-ce qui change dans cette dernière version ?
- Le menu par onglets disparaît ainsi que l'abécédaire (à droite).
- Un menu de navigation, à gauche, ré-apparaît. Eh ! Oui ! La toute première version de ce site proposait déjà un menu de navigation sur la gauche se séparant de la navigation par onglets. Cette idée n'avait pas été retenue lors des premières présentations de la maquette. Aujourd'hui elle revient en force sous une autre forme...
- En-dessous une système de news calendaire.
- Une barre d'outils, en cours d'élaboration, dans laquelle apparaissent un moteur de recherche intégré, des boutons supplémentaires pour la connexion vers la web-radio (audio) et l'impression de la page (texte).
- Un album photo intégré afin de savoir qui est qui à la radio...
- D'autres nouveautés seront à découvrir et en préparation...
- Interface que vous pouvez voir en même temps que vous lisez ce texte !
NotreWebOuvrier février 2007
Nouvelle mouture du site (30/04/06)
Cette nouvelle mouture apporte des modifications substantielles et relativement importantes en ce qui concerne la page d'accueil avec quelques retouches du code pour l'ensemble du site.
- disparition des préférences
- intégration du menu association dans les onglets
- refonte complète de l'entête du site
- déplacement du bloc central et ajout d'un second bloc (chérie, c'est quoi cette émission déjà ?) auparavant inclus dans les onglets.
- Amélioration globale des graphismes du site.
- Amélioration du code. Le bloc central était composé de plusieurs div imbriqués l'un dans l'autre.
- <div id="present"> : bloc général.
- <div class="navigation"> </div> : onglets.
- <div "blah"> </div> : contenu.
- </div>
- J'ai enlevé le div "present" qui ne servait à rien et compliquait la structure de cette partie sans être vraiment utile.
- <div id="blah"> : prend la place de "present".
- <div class="navigation"> </div> : onglets.
- </div>
L'ancienne version :
La nouvelle version :
Comment ce site est-il structuré ?
Ce site respecte les règles principales d'accessibilité, utilise la séparation du contenu et de la présentation. Chaque élément est traité séparément comme un module autonome qui se superpose l'un par rapport à l'autre, à savoir :
- Le code HTML (fichiers avec l'extension .htm): contenu textuel et sémantique hiérarchisée. C'est le fichier brut. Sa construction ne contient que du html pur. C'est à partir de ce dernier que se superposent deux autres couches : css et js.
- Le design (fichiers avec l'extension .css): contenu dans plusieurs modules CSS qui s'adressent aux différents types de médias de sortie :
- écrans d'ordinateur, de projection
- impression [la feuille de style est à revoir]
- portable (bien que cette fonctionnalité ne soit pas complètement utilisée encore mais on ne sait jamais...) [pas encore installée]
Cette seconde couche est celle qui donne au fichier html brut son dess(e)in (placement des objets html, couleur des objets html, etc).
- L'interaction dynamique (fichiers avec l'extension .js): cette dernière couche assure un confort d'utilisation supplémentaire à l'utilisateur. Cette couche est pensée comme un objet non nécessaire.
C'est-à-dire : si l'utilisateur désactive le support javascript de son navigateur le site reste entièrement fonctionnel. On parle alors de couche non intrusive. Elle n'est pas nécessaire au bon fonctionnement du site.
Organisation et structure de chaque page
Chaque page contient trois parties principales :
- Un entête
- Un corps de page
- Un pied de page
Chaque partie principale est englobée dans un conteneur général appelé div. Ce dernier offre un souplesse supplémentaire en englobant l'ensemble des éléments insérés à l'intérieur de ce div ; de plus cela rend chaque partie totalement modulaire. On peut placer ce div où bon nous semble dans la page avec les règles de style CSS.
À chaque partie est donc attribuée un "id" pour identificateur :
- Entête : <div id="tete"> </div>
- Corps : <div id="blah"> </div>
- Pied : <div id="pied"> </div>
Il est possible d'inclure d'autres div à l'intérieur d'un div existant. C'est le cas pour les onglets :
- <div id="blah"> : corps de page.
- <div class="navigation"> </div> : onglets.
- </div>
Application des règles de style
Une règle de style sert à mettre en forme, une feuille HTML brute
Page HTML brute :
La même page HTML avec une feuille de style :
L'application des règles de style est des plus simples. Il suffit de renseigner la taille, la position, la police de caractères utilisée pour chaque div dans un feuille de style qui sera rattachée à la page HTML brute, et, le tour est joué !
Page précédente: Pour nous contacter
Page suivante:Liens