[cmi-marseille] promotion du futur(?) site

[1728]

Salut a tou-te-s,

l'objectif de ce long mail est de presenter les choix et les fonctionalites
introduits dans le travail sur une nouvelle version du site du CMI de Marseille
pour pouvoir avancer ensemble dessus. Ca pas mal avance notamment cet ete lors de
discussions entre les personnes presentes sur le chat dans l'attente du
redemarrage de la vie du collectif, ce qui explique le manque de documentation. En
voici donc un bout.

La maquette se trouve a l'adresse :
https://marseille.indymedia.org/indextest.php?theme=6

En particulier, elle est censee prendre en compte l'ensemble des
decisions/discussions du printemps dernier. Elle vise aussi a une plus grande
acessibilite http://openweb.eu.org/articles/intro_accessibilite/
http://openweb.eu.org/accessibilite/


--ALLURE GENERALE--
Cf decisions du printemps dernier :
https://docs.indymedia.org/view/Local/ImcMarseilleCr19042006#Modifications_du_site
https://docs.indymedia.org/view/Local/ImcMarseilleCr17052006#Modifications_site
https://docs.indymedia.org/view/Local/ImcMarseilleStructureSite

On peut decouvrir les fameux ok-blocs en noir sur la gauche qui permettent
d'anoncer une friture importante (ok si tu nous entends...;)

La colonne de droite contient la liste des contributions recentes en rapport avec
Marseille et grace a la modification de Leon, elle liste aussi les resumes de ces
articles.

Ce qui est propose comme "categorie" par sf-active est utilise de differentes
facons. C'est deja plus ou moins le cas actuellement, l'idee est d'eclaircir le
truc avec un positionnement et un nommage different selon la fonction desiree.
 -- Les categories thematiques restent sur un fonctionnement de "filtre" du site,
c'est un outil de navigation, on peut selectionner les articles selon tel ou tel
theme.
 -- Les categories evenementielles sont des dossiers dedies a un "evenement
particulier", elles cessent d'etre actives lorsque l'evenement est passe mais
toujours acessibles.
 -- Les categories regionales permettent une "mise en reseau" des avec les
informations produites localement en provenance du monde entier, a differentes
echelles. On raccourcit ainsi le nombre d'intermediaires entre production et
lecture de l'information, en particulier le CMI de Marseille. Inutile de
republier sur indymedia marseille la mort des 157 de Liege...


--ACCESSIBILITE--
 -Legerete- : afin d'alleger le plus possible le telechargement de la page
d'accueil, il n'y a plus d'image "inutile" servant comme decoration. Finie donc
la bonne mere qui tourne, et les petits logos d'appareil photo ou de camera, meme
le ((i)) est en mode texte, les utilisateur-ice-s de modem rtc apprecieront. J'ai
laisse la possibilite de mettre les images dans la liste des articles en
publication libre car c'est ce qui faisait consensus, mais je serais presque pour
les degager ce qui ramenerait la page a un poids minimal. C'est un peu spartiate
mais j'aime bien.

 -Accesskeys- : c'est un systeme qui permet d'acceder rapidement aux
fonctions/pages importantes du site a l'aide du clavier. Voir
http://openweb.eu.org/articles/accesskey_essai_non_transforme/ Pour l'instant,
  - lorsqu'une personne clique sur ALT+4, elle tombe directement sur le moteur de
recherche,
  - si elle clique sur ALT+1, elle revient a la page d'accueil,
  - si elle clique sur ALT+5, elle va a la page premiere visite (a rediger)
  - si elle clique sur ALT+6, elle va a la page structure du site (a rediger)
  - si elle clique sur ALT+7, elle va a la page contacts si elle clique sur ALT+8,
elle va a la page copyleft.
Il faudrait encore faire une page ou un truc comme ca pour decrire les touches.


-Du HTML signifiant- : Desormais, lorsqu'on veut faire
  - une liste de titres, on utilise <ul> et <li> et pas des <p> et <br> de retour
a la ligne ou encore des tableaux.
  - un paragraphe de texte, on utilise <p>
  - un titre on utilise <h.>
  - etc...
Ainsi la seule lecture du code source (sans les elements de decoration) de la page
permet de comprendre sa logique, ce qui est pas mal pour certains naviateurs,
notamment ceux prevus pour les aveugles. Pour s'en rendre compte, selectionnez le
style "texe" qui donne simplement le rendu du site sans css.
  - avant : https://marseille.indymedia.org/hebergement/demosite/index-avant.txt
  - apres : https://marseille.indymedia.org/hebergement/demosite/index-apres.txt

Il n'y a pas dans le code html d'element de description stylistique (taille de tel
caractere, positionement en colonnes, ...), ceux-ci se trouvent dans une feuille
de style appellee css, c'est juste un fichier separe qui est telecharge par le
navigateur ene meme temps que le fichier html.
  - avant : https://marseille.indymedia.org/themes/theme0.css
  - apres : https://marseille.indymedia.org/themes/theme6.css

Du fait de cette separation claire, il devrait desormais etre possible, sans
changer la structure HTML de presenter le site a l'ancienne, c'est a dire en
orange avec 3 colonnes et le menu et la navigation sur la colonne de gauche. Pour
montrer les possibilites du bazar, y'a des themes de test pour gaucher-e-s et pour
fan-e-s d'openpublishing.

 -Modification du site facilitee- : Les fichier include ont ete refaits a zero et
chacun correspond a une fonction precise. Leur nom n'est plus un truc du genre
"content-header.es.inc" mais plutot "PiedDePage.inc",
"CategoriesEvenementielles.inc" ou "Participer.inc". Les passages a la ligne et
la presentation est plus soignee. Ils devrient donc etre manipulales et
modifiables plus facilement et par tout le monde (voir la difference des fichiers
css plus haut).

 -Suppression des formulaires javascript- : certains navigateurs ne comprenent pas
le javascript. Ainsi, le selecteur de categories n'est plus un formulaire en js,
mais une simple liste. Pour la traduction automatique du site, on squate le site
commercial babelfish.altavista.com. C'etait un formulaire en javascript qui
s'occupait de lancer la traduction. En plus du fait que le traducteur ne marchait
pas pour les navigateur ne supportant pas le js, on cliquait sur ce formulaire
sans savoir ou il allait nous mener (lorsqu'on se rend compte qu'on est redirige
vers babelfish, c'est trop tard, notre adresse ip leur appartient). Desormais, le
traducteur est une liste html. L'url de babelfish ne se trouve donc plus cachee
dans un code immonde, mais est visible dans la barre en bas du navigateur et on
sait a quoi s'attendre avant de cliquer dessus.

 -Lecture aisee des articles- : le nombre de caracteres par ligne est d'une
soixantaine de caracteres, ce qui est cense etre optimal pour une lecture aisee,
quelle que soit le largeur de l'ecran.

 -Adaptation a la taille de l'ecran- : si on veut lire un article sur le site
actuel a partir d'un un petit ecran, il y a 3 mots par ligne tellement la colonne
centrale est ecrasee par les 2 autres colonnes. De meme pour les articles de la
colonne centrale. L'idee qu'a eue 550 est la suivante, on a des blocs flottants
de largeur fixe, qui se repartissent selon la place disponible. On a fait en
sorte que en 1280×1024, les blocs s'organisent en 3 colonnes, en 1024x768 ils
s'organisent en 2 colonnes, en 800x600 il y a une seule colonne de blocs, et en
640x480 on a d'abord les contributions et 2 colonne de blocs se trouvent en
dessous.

 -Prise en main facilite- : la possibilite d'obtenir de l'aide est mise en valeur
(gros bouton dans le menu) avec la possibilite de discuter en direct sue le chat
des la page d'accueil. Il est prevu une aide d'ordre technique qui presente la
structure su site (un peu comme l'aide actuelle), mais aussi une aide plus
"politique" qui explique en des termes simples ce qu'on peut et ce qu'on de peut
pas attendre de ce
site, qu'il s'agit de publication libre etc (page d'aide "premiere fois sur ce
site"). Cette page reste a construire le plus collectivement possible et il y a un
espace reserve sur la wiki du collectif :
https://docs.indymedia.org/view/Local/ImcMarseilleTextesAuFilDuSite#PREMIERE_FOIS_SUR_CE_SITE_propos

 -Acces facile/rapide aux fils de syndication- : le site genrere beaucoup de fils
de syndication disponiles : https://marseille.indymedia.org/syn/ . Sur une
suggestion de frechelmi, des qu'on est sur la page d'accueil d'une categorie, les
fils de syndication de cette categorie peuvent etre sniffes par des navigateurs
tels firefox et le-a lecteur-ice peut s'y inscrire en un clic et etre mis au
courant des articles qui les interessent (je pense par exemple a Julie qui est
passee a la reunion de rentre et voulais animer la categorie "ecologie"). Ca peut
paraitre gadget mais pourquoi s'en priver?

--LE PROBLEME--
  -internet explorer- : cette rouille proprietaire espere maintenir son monopole
en interpretant le css comme bon lui semble. En particulier, il ne comprend ni
les "hover" (commande css qui permet de decrire des comportements selon que la
souris est positionnee sur l'element ou non), ni les "display:none" (qui permet
de ne pas afficher un element dans certaines situations), et du coup les menus
explosent. On pourrait faire un gros popup qui dirait aux utilisateur-ices de ie
de passer a autre chose. Actuellement il ya une ligne qui s'ecrit en haut du
site pour expliquer le probleme lorsque ce navigateur est detecte. Seulement ie
est encore utilise par de nombreuses personnes qui ne peuvent pas toujours
installer firefox (dans un cyber cafe par exemple).) Il faut donc rendre le
site, sinon joli, au moins lisibe. Il y a deja une astuce qui consiste a
rajouter un bout de javascript que seul ie lira et qui lui apprend a interpreter
les hover (c'est la ligne behavior:url("/themes/ie/csshover2.htc"); dans le
fichier theme6.css). Seulement meme avec ca, bien qu'on s'approche d'un truc
potable, c'est vraiment pas le top
(surtout pour les vieilles versions de ie, ca passe a peu pres sous ie6). Il
faudrait peut etre faire un css simplifie moche qui se chargerait pour ce
navigateur.

--CE QU'IL RESTE A FAIRE--
  - Regler le pb d'ie
  - Se prendre un week-end pour appliquer d'un coup les changements aux divers
templates utilises et
raffraichir tous les caches (probablement assez long).
  - Ecrire les textes d'aide.
  - Pinailler sur les couleurs et autres effets stylistiques du css par defaut.
  - trouver un fonctionnement pour la categorie regionale "europe/mediterrannee".
Il faudrait probablement trop de blocs de syndication et il n'y a pas de site
comme www.indy a cette echelle qui permettrait de recuperer un fil global. J'ai
pas vraiment d'idee la dessus, on pourrait faire un truc graphique listant tous
les CMI du coin sur une jolie carte cliquable(??) Separer "Europe" et
"Mediterranee"? S'investir dans la creation d'un site de relais a cette echelle?
  - optimiser le detecteur de css pour pas qu'il mette de mauvais lien lorsqu'on
est pas sur une categorie definie.

Ouf!
1728


-- 
gpg --keyserver keys.indymedia.org --recv-keys 75F1A168