Retour : Page Principale > SiteTelaVersion4

SPIP Actualités


Maintenance du Spip Actualités

Informations plus techniques :
Liste des fichiers modifiés de SPIP : squelettes etc...
Structure html des fichiers spip (organsation des éléments div etc...)
Le Spip Actualité et CVS

Conception de l'Actualité deTela Botanica


L'actualité est une des parties du site de TB, accessible par la page centralisatrice. Le but de ce travail a été de concevoir un espace où les adhérents puissent déposer facilement leurs informations, leurs avancements au sein des projets. L'outil retenu a été un logiciel de gestion de contenus en ligne (SPIP). Cette interface possède une partie publique sous la forme de webzine (articles, forums) et ue partie privée où seuls les adhérents du réseau peuvent entrer pour rédiger leurs news. L'espace privé regroupe un ensemble de fonctionnalités et d'aide à la rédaction. L'objectif a été de simplifier au maximum cet outil pour le rendre le plus accessible à tous et faciliter le passage à l'acte.
l'Actualité

Objectifs et positionnement :
2 axes se dégagent :
  • des actualités à court terme : ce sont les news de la botanique au jour le jour. L'objectif est de servir de relais à l'information pour augmenter le nombre de visites des adhérents. Ainsi ils peuvent directement soumettre leurs annonces d'activité (sorties sur le terrain, colloques, journées de sensibilisation...). Tout ceci se regroupe sous la rubrique "Brèves d'actualité".

  • des actualités à plus long terme : ces productions sont mises en ligne dans une optique de prise de recul par rapport au quotidien, c'est-à-dire des articles qui peuvent rester en ligne plus longtemps que les types précédents. Ceci est réuni sous le terme d'"Articles de fond".

  • Trouvent leurs places dans les différentes rubriques, les compte-rendus de certaines activités des adhérents : ex. reportages, sorties de terrain des Ecologistes de l'Euzière comme les weekends orchidées, champignons, de la Pentecôte.... ou encore le rapport de journées de sensibilisation comme premières journées de rencontre sur la lutte biologique...

Inventaire de l'existant
  • site de futura-sciences (www.futura-sciences.com) : la rubrique "s'informer" est très réactive vis-à-vis de l'actualité scientifique. Le style est très journalistique (l'ergonomie ressemble à des sites de grandes journaux généralistes tels Le Monde, Libération...) : colonne centrale avec liens sur la gauche et catch-words dans la colonne de droite.:
  • site de linuxfr (linuxfr.org) : le site rassemble un ensemble de brèves qui sont hiérarchisées en 3 niveaux d'intérêt par les modérateurs. Chaque brève donne lieu à des commentaires qui s'inscrivent par la suite.
  • site de la société britannique de l'étude des bryophytes (BBS) : Le site se divise en 7 structures. La page d'accueil propose une entrée selon les souhaits de l'internaute par un ensemble de questions (ex : "où voulez-vous aller herboriser aujourd'hui ?") puis oriente dans les différentes rubriques en fonction. La colonne de gauche de l'accueil annonce les derniers changements sur le site (ex : la photo du mois, haiku).
  • Le site présente une rubrique de vulgarisation "Learning more" avec une partie didactique pour commencer en bryologie premiers pas : ceci explique le matériel de base, les livres faciles à consulter...
  • Le site est très riche en ressourubriques.rces surtout sur les bilans des rencontres de la société scientifique. La partie chorologie est bien fournie mais manque d'actualisation. Par contre la présentation des contenus est beaucoup dense et textuelle, pas d'utilisation d'hypertextes, peu d'illustrations.
  • site de la société britannique d'écologie (BES) : ils ont fait le choix dès l'accueil de proposer deux modes d'accès au site. 1) il y a une entrée par "aires d'intérêt" c'est-à-dire que les internautes choisissent leur niveau (grand public, étudiants, professeurs, journalistes, auteurs). Là apparaît une sélection de rubriques en rapport avec chacun de ces niveaux. 2) il y a des rubriques (colonnes de gauche) qui présentent les différentes activités et missions de BES. De plus sur cette même page d'accueil, dans une demi-colonne de droite il y a les news et les dates importantes.
  • L'objet de cette société est de fédérer des membres au sein d'une communauté (accès est payant 30 livres). Cette participation donne le droit à des réductions sur les abonnements à des journaux spécialisés (journal of ecology, journal of applied ecology...) et à des articles en ligne.

  • Les design de BES et de BSS sont très sobres et suivent le même schéma de navigation et de mise en page.
    • logo de la société en haut à gauche suivi du titre
    • aires d'intérêt
    • rubriques dans colonne de gauche
    • colonne de droite réservée à des news
    • search en bas à gauche, au pied des rubriques


Navigation et Architecture
SPIP "Actualité"
La page d'accueil du monde "Actualité" présente au centre un ensemble de sélections des articles les plus récents. A gauche on a l'ensemble des rubriques : les articles de fond, les brèves d'actualité, les stages et les sorties, les reportages et l'emploi. A droite est présenté l'espace rédaction avec le formulaire de recherche interne à l'actualité.

Le détail de cette page d'accueil du monde "Actualité" :
  • Navigation en haut : elle regroupe les intitulés nécessaires à chaque instant (changer de mondes en utilisant un onglet à menu déroulant ; une barre de recherche sur le site qui permet d'aller rechercher dan les pages, dans les annonces, dans les wikinis ; un moyen de se logger à tout moment ; un plan du site).
  • Il apparaît également en dessous le parcours que l'utilisateur a suivi.

  • Colonne gauche : C'est la Navigation par la forme de l'information (c'est-à-dire rubriques).

  • Colone droite : C'est la Navigation par thème pour cela on utilisera le mode de recherche de SPIP. Dans cette zone, on peut également accéder à l'espace Rédaction grâce au login de TB.

  • Au centre : derniers articles mis en ligne que ce soit l'actu ou les autres rubriques.

  • Visibilité de l'espace "Rédaction" : Le clic sur le lien "Ecrire un article" ouvre la page "Aide à la rédaction" où est précisé les étapes à suivre pour réussir la mise en ligne de ses contenus.
  • ex. de présentation et de mise en page : ex de tri-partie et taille de l'écran relative
En cliquant sur un des thèmes de la colonne de gauche, on arrive sur une page qui a les mêmes caractéristiques : Articles de fond, Brèves d'actualité, Rencontres / Colloques, Stages / Sorties, Reportages, Emploi.

Pour les rubriques, il est intéressant de donner un caractère original journalistique tout en respectant la charte graphique. chaque rubrique présente les mêmes caractéristiques por la navigation (colonne de gauche, de droite et bandeau supérieur).
Seul le contenu au centre s'adapte en fonction des rubriques. On place tous les articles de la rubrique avec un extrait des premières phrases. En bas de page, apparaît un encart forum qui précise les articles où les lecteurs ont réagi aux articles.

Ergonomie : comment se déplace dans le site ?

Cahier de conception
On a utilisé pour "Actualité" la version 1.7.2 de SPIP. Nous avons choisi d'utiliser les feuilles de styles (actu.css pour l'ensemble des pages). cf. Spécifications Techniques. Nous n'avons utilisé ni les brèves, ni les mots-clés dans SPIP afin de somplifier au maximum son utilisation par des non-initiés à l'outil.

La page modèle peut se diviser en différents blocs qui structurent la mise en page. Ils permettent de différencier le contenu (relevant de la page HTML) de la mise en forme (relevant de la feuille de style CSS). La totalité des éléments est contenue dans un bloc "réducteur" dont la seule caratéristique est d'aligner à gauche le texte. Ceci a l'avantage dans un écran de grande dimension de positionner la présentation en haut à gauche de l'écran.
  • "nav_gauche" contient le logo de TB : "logo", le formulaire de changement de mondes : "changer_monde", le menu des différentes rubriques : "menus_gauche" et le login de connexion : "ellipse" ;
  • "bandeau" contient le titre Actualité : "titre_monde" sur fond de décor du bandeau et les renseignements de contact et de plandu site : "plan_contact" ;
  • "pos_recherche" affiche le parcours de l'utilisateur au sein des différentes rubriques ;
  • "contenu" affiche toute la partie centrale de la page et contient "box_forum", spécifique à l'affichage du forum ;
  • "menu_droite" contient "frise" en haut de cette colonne et l'accès à l'espace Rédaction et la recherche intra-SPIP ;
  • "form_recherche" contient uniquement le formulaire de recherche générale au site ;
  • "pied_page" se cale sous "contenu" pour présenter les informations d'accessibilité, de la CNIL et de la nétiquette.

Pour être en accord avec les contraintes de navigation à l'aide de navigateur textuel (ex : Lynx), nous avons décidé de suivre le recommandations de acces-pour-tous.net. ainsi nous présentons le code de la façon suivante :

<div id="corps_de_page">
Le corps de votre page
</div>
<div id="menu">
Lien 1
Lien 2
Lien 3
</div>
<div id="haut_de_page">
Votre haut de page
</div>
<div id="pied_de_page">
Votre pied de page
</div>
Pour faciliter la navigation, nous avons les raccourcis "acceskey"
  • * Règles d'accessibilité : accesskey="0"
  • * Accueil : accesskey="1"
  • * Forum : accesskey="3"
  • * Accès direct au moteur de recherche interne : accesskey="4"
  • * Plan du site : accesskey="5"
  • * Nous envoyer un mail : accesskey="9"


* Mozilla : Appuyez simultanément sur la touche Alt, sur la touche maj et sur une des touches du clavier (pas le pavé numérique). Vous vous rendrez directement à l'endroit voulu. -Recherche thématique et par mot-clé : ce type de recherche est adapté pour les gens qui ont déjà une bonne connaissance en botanique.
  • Recherche où l'internaute construit son exploration : il pourrait y avoir un moteur de recherche intra-site Tela et un autre pour des recherches complémentaires sur le web.
    • Si vous utilisez des lettres, vous pouvez vous dispenser de cliquer sur la touche maj.
* Avec IE6 : Appuyez simultanément sur la touche Alt, sur la touche maj et sur une des touches du clavier
(pas le pavé numérique) et ensuite appuyez sur la touche "Entrée" pour vous rendre à l'endroit voulu. -Recherche thématique et par mot-clé : ce type de recherche est adapté pour les gens qui ont déjà une bonne connaissance en botanique.
  • Recherche où l'internaute construit son exploration : il pourrait y avoir un moteur de recherche intra-site Tela et un autre pour des recherches complémentaires sur le web.
* Opera ne supporte pas les accesskey !


Charte graphique

Les codes couleurs du monde "Actualité"


- les liens


  • Hexa : #0227e1
  • Exemple :
""
<div style="background-color:#0227e1;width:100px;height:50px;" title="Exemple de la couleur #0227e1." >