Accueil S'informer Services ariase La nouvelle version du site web ariase.com est en ligne
Par François le mercredi 15 juillet 2009 à 16h13
Depuis son lancement en 2002, Ariase.com n'avait connu que deux mises à jour importantes. La troisième version du site est l'occasion d'apporter une touche de fraîcheur et de nouveautés, et surtout, de répondre le mieux possible aux attentes des internautes qui souhaitent s'informer sur les offres Internet, les services proposés par les fournisseurs d'accès et sur la résiliation.
Le changement le plus visible concerne la page d'accueil. Les articles, les reportages, et les comparatifs gagnent en visibilité et simplifient l'accès aux informations sur les offres et l'actualité des opérateurs Internet. Les outils pratiques et gratuits - comme le générateur de lettre de résiliation et le test d'éligibilité - sont accessibles en un clin d'oeil.
La navigation sur le site et l'ergonomie des pages ont été retravaillées. En passe de devenir une "norme" sur le web, le menu supérieur est désormais déroulant. Au passage de la souris, les principales ressources du site sont disponibles en un clic. Un "chemin de fer" (breadcrumb en haut de page) et un pied de page complètent par ailleurs le système de navigation. A noter la présence d'un "dock" en haut de chaque page. A la manière d'un widget, cette barre d'icône regroupe les principaux outils présents sur Ariase.
Une attention particulière a été portée sur la lisibilité des contenus. Les pages sont mieux aérées grâce au colonnage 2/3 - 1/3 et la taille de la police de caractère a été augmentée pour faciliter la lecture (notamment sur le forum). Tous les internautes n'ont pas 20 ans !
Malgré nos efforts, il est possible (et même probable !) que certains bugs soient passés à travers les mailles de notre filet ! En cas d'affichage étrange, n'oubliez pas de rafraîchir votre page via la touche F5. Nous comptons sur vous pour remonter les éventuelles erreurs rencontrées ici et là. Vos avis et vos suggestions sont bien entendu les bienvenus. Un topic est justement prévu à cet effet sur notre forum. Toute l'équipe Ariase espère que vous apprécierez cette nouvelle version. Bonne (re)découverte du site :-)
écrit par :
Ariase
Test d'éligibilité ADSL et Fibre optique
Avec firefox 3.5 j'ai un affichage bizarre mais à la maison avec chrome cela ressemble beaucoup plus a l'impression écran de l'article.
Après j'ai pas eu vraiment le temps de faire le tour pour donner mon avis.
L'affichage bizarre est lié au rafraichissement des styles CSS.
Un F5 devrait faire l'affaire niko :-)
Je confirme.
Une pression sur F5 sous firefox 3.5 devrait régler le problème.
On attend vos avis bons (ça fait toujours plaisir) et mauvais (on peut essayer d'améliorer ce qui ne va pas) avec impatience ![]()
euh...
pour rappel, il y a un topic dédié ici
Citation :
Le changement le plus visible concerne la page d'accueil. Les articles, les reportages, et les comparatifs gagnent en visibilité ...L'on commence effectivement à y voir un peu plus clair ![]()
Mais à vrai dire, seuls les articles sont mis en valeur et apparaissent sur l'écran dont la capture illustre la news, sauf pour ceux qui ont la chance de disposer d'un écran d'une résolution d'au moins 2500x1150 en mode portrait sur lequel la page s'affichera quasiment dans son intégralité.
Ou encore en zoomant(-) jusqu'à ce que la page tienne sur un plein écran:
(cliquer sur l'image pour voir en taille réelle, hauteur 814 pixels) 
L'on se demande s'il n'était pas demandé aux développeurs de faire une chose jolie et agréable à regarder, comme cela était arrivé à Ztor1
Citation :
... et simplifient l'accès aux informations sur les offres et l'actualité des opérateurs Internet.Cet accès est malheureusement simplifié à l'excès ![]()
... notamment le menu déroulant relatif aux offres adsl des divers FAI; ce menu qui était disponible sur la plupart des pages a disparu, ainsi que les menus en colonne gauche bien pratiques ![]()
... pour y pallier cela m'a amené à me rabattre sur
le plan du site 
(que pour la circonstance j'ai "concentré" sur une page unique (au lieu des 3 de départ). Si cela peut aider d'autres lecteurs, qu'ils n'hésitent pas à user et abuser du lien; les boutiques des FAI n'y sont pas encore ajoutés).
.
Il est à remarquer que, autant jadis les développeurs savaient créer des pages qui tenaient sur un seul écran (longtemps 800x600) d'un moniteur courant.
(le site officiel du droit français en est un exemple:
http://www.legifrance.gouv.fr/ ),
autant maintenant ils semblent avoir été équipés d'écrans d'une résolution minimale de 1068x2505 en mode portrait (c'est la taille de la page d'accueil!), leur permettant de travailler sur la page entière (à moins que chaque développeur ne se voit dévolu une tranche horizontale de la page, laquelle est finalement reconstituée par empilage de ces tranches?)
Citation :
En passe de devenir une "norme" sur le web, ...somme toute un retour logique aux sources de l'informatique. La majorité des logiciels n'est-elle pas conçue avec une barre de menu supérieure, chacun des items "Fichier, Edition, Affichage,..." cliqué déroule un sous-menu des options de choix disponibles.
Les pages web permettent la même chose ... sans avoir à cliquer pour dérouler ![]()
Citation :
... le menu supérieur est désormais déroulant....
sur mon écran pas l'ombre d'un menu déroulant ![]()
Pour mémoire, voici un exemple de menu déroulant:
http://css.developpez.com/tutoriels/menu-deroulant/fichiers/menu01test.html
tels qu'on en trouve sur le net (chaque item de cet exemple demande à être complété avec sa fonctionnalité consistant en un lien vers le sujet souhaité ou le déroulé d'un sous-menu. À l'intention du lecteur que cela intéresserait, voici le lien vers le tuto dont est extrait l'exemple.)
Quelques exemples actuels de menus déroulants:
developpez.com : le menu déroulant (drop-down) est complété par une info-bulle en "drop-up";
cdiscount.com : la barre de menu est stylisée en onglets;
dslvalley.com : le menu déroulant s'ouvre dès le survol par la souris, et se referme après temporisation.
mozilla.com : ses menus comportent une triple temporisation, [list]
-à l'ouverture, au survol de l'item de la barre de menu: durée moyenne,
-à la fermeture, en quittant l'item ci-dessus, de durée courte,
-à la fermeture, en quittant le sous-menu, de durée moyenne.[/list:u]
Désolé, je ne me laisserais pas vendre une banale popup (un menu déroulant a-t-il besoin d'une case de fermeture [X] ? ) pour un menu déroulant ....
![]()
Citation :
Une attention particulière a été portée sur la lisibilité des contenus.Ce n'est pas la peine de crier pour être mieux vu ![]()
Je me réfère ici au chemin de fer libellé en MAJUSCULES: n'est-il pas plus lisible en écriture normale?

(oui, j'ai demandé à mon navigateur de supprimer le fond ... même si je sais bien qu'il n'y a pas de chemin de fer sans rails !!)
Je ne pense pas que l'absence des majuscules sera cause d'un quelconque préjudice au niveau du référencement.
Dans le même ordre d'idées, est-il indispensable que nombre de liens tels ceux de navigation sur le forum soient en gras? Voir ci-dessous le rendu avec une écriture normale

voire même sans soulignement!
Ce dernier exemple me semble bien mettre en évidence la page actuelle (en gras) parmi les autres pages du même sujet.
(bien entendu, s'agissant d'une capture d'écran, les liens ont conservé leur aspect mais perdu leur fonctionnalité!)
Au passage, ne serait-il pas plus ergonomique (et logique) de disposer le navigateur interne au sujet (Aller à la page précédente 1 2 ...) au dessous de celui sur la branche (le 2nd breadcrump)?
La lecture d'une page commençant en haut à gauche (du moins jusqu'à maintenant!), il semble logique que l'on puisse changer de page avec un minimum de déplacement de la souris; tout comme il est logique que le navigateur jumeau en fin de page se trouve à droite ... comme il est actuellement ![]()
Citation :
Les pages sont mieux aérées grâce au colonnage 2/3 - 1/3sauf quelques pages comme le forum ou le wiki, la colonne 1/3 est occupée par la communication promotionnelle. Ainsi, en se référant à la capture incluse dans la news, seulement 1/6 de la page spontanément visible est porteuse d'information actualisée.
Je ne sais pas si un visiteur occasionnel passant par la page d'accueil aura une juste idée des services que ARIASE met à sa disposition. Je ne pense pas que l'on vienne spécialement sur ARIASE pour souscrire à une offre; on y est plutôt amené par la recherche d'une information particulière.
La souscription s'effectue alors dans un second temps, en "remerciement" du service rendu par le site sous forme d'informations plus ou moins spécifiques.
Pour ce qui est du caractère aéré, il me semble cette autre page d'accueil ARIASE est autrement plus aérée pour un meilleur confort du lecteur ![]()
Citation :
et la taille de la police de caractère a été augmentée pour faciliter la lecture (notamment sur le forum). Tous les internautes n'ont pas 20 ans !Effectivement, il y a aussi ceux de 40, ceux de 60 ans, 80 ans aussi, sans oublier les débutants de 10 ans (l'un de nos membres est à peine plus âgé )
Est-ce à dire que tout comme il faut prévoir un module pour chaque navigateur, il conviendra de prévoir une interface pour chaque âge; ou encore qu'Ariase entendrait favoriser le 3ème âge (paraît que ce sont des personnes qui ont du temps et de l'argent, à ce qu'en disent les tours-operators) ![]()
Sauf si tout le web adoptait la même politique, je pense qu'il serait plus constructif de conseiller aux sujets dont la vue se dégrade d'y prêter attention et de faire vérifier leur vue (il pourrait y avoir athérosclérose ou cataracte sous roche), voire d'adopter des verres correcteurs leur permettant d'avoir une bonne vision à courte distance (au-delà de la vision de près nécessaire pour la lecture des documents papiers).
Je sais qu'il persiste ce fantasme de la jeunesse éternelle, les intéressés se refusant de prendre une canne ou de chausser des lunettes au prétexte que cela les vieillirait. Il est de ces coquetteries ....!
Dans une moindre mesure le zooming permis par les navigateurs ou des modules d'accessibilité (Démarrer » Programmes » Accessoires » Accessibilité » Loupe de windows) pourra leur rendre service, tout autant qu'une aide pour leur indiquer comment utiliser au mieux les outils disponibles sur leur machine:
Par exemple, la loupe windows en action
(cliquer sur l'image pour agrandir en 1280x1024)
L'usage (relativement) confortable de ce type d'outil suppose des lignes relativement courtes, faute de quoi la lecture oblige à des va-et-vient à la longue pénibles (tout comme lorsque la page déborde de la fenêtre).
Outre les caractéristiques du texte lui-même (taille de la police, hauteur des lignes, espacement des caractères et des mots), la lisibilité dépend également de l'environnement immédiat et du contraste qu'il forme:
- un souligné inutile handicape la lecture. Par exemple les liens présents dans les menus ne sont pas soulignés, alors que ceux insérés dans un texte le seront en général afin de bien les distinguer.
- un contraste optimal est primordial. Sur la capture présentée dans la news, les titres des articles sont à peine déchiffrables, alors que les messages promotionnels se lisent relativement facilement. Cette remarque oblige à se poser la question sur ce qui est important aux yeux de ceux qui ont commandé ce travail?
Citation :
Malgré nos efforts, il est possible (et même probable !) que certains bugs soient passés à travers les mailles de notre filet !Il n'y a hélas pas que les bugs qui soient passés au travers ![]()
Le wiki a carrément été laissé pour compte ![]()
Le pauvre, il n'a plus visage humain
![]()
Je m'étais laissé la semaine avant de publier ma réaction, mais finalement je n'ai pas eu à revenir sur mes observations initiales ![]()
Tout cela laisse une impression d'inachevé (qui me rappelle étrangement un post que j'avais lu récemment).
N'était-il réellement pas possible d'effectuer la transition en douceur, éléments par élément ou section par section, de manière à conserver sa fonctionnalité à l'existant?
Certes la modification aurait été moins spectaculaire, s'effectuant par petites touches (pour la partie visible), mais aurait aussi été plus efficace et plus sûre, laissant par là même le temps aux habitués de suivre une évolution peu perturbante.
En conclusion, si j'étais dans l'enseignement, je dirais que cet élève fait des progrès et il ne doit surtout pas relâcher ses efforts qui le conduiront au succès.
La barre de menu en têtière présente sur toutes les pages est une promesse de pouvoir naviguer sur tout le site, de quelque page où l'on se trouve ![]()
Il reste à la compléter des items qui seront nécessaires et lui associer les menus déroulants correspondants, menus déroulants absents à ce jour (regret exprimé par ailleurs par l'un des membres de la communauté)
[Edit] Problème de liens (vers le tuto menus déroulants) altérés sur la page actu, mais corrects sur le forum [/Edit]
Merci pour ce retour enrichissant Prououou,
Il est vrai que certains élements du site n'ont pas été inclus dans le projet V3 comme par exemple le wiki. Plusieurs raisons à cela : le code wiki est une horreur et le wiki n'est plus mis à jour (contenus).
Citation :
Effectivement, il y a aussi ceux de 40, ceux de 60 ans, 80 ans aussi, sans oublier les débutants de 10 ans (l'un de nos membres est à peine plus âgé ) L'ancienne police d'Ariase n'était vraiment pas assez visible. en l'augmentant, on facilite la lecture sans pour autant passer d'un extrême à l'autre :-)
Citation :
N'était-il réellement pas possible d'effectuer la transition en douceur, éléments par élément ou section par section, de manière à conserver sa fonctionnalité à l'existant? Malheureusement non :-) La structure back-page du site a évolué. Cela facilitera la mise à jour (contenus et visuels) et uniformise l'ensemble du site.
Citation :
En conclusion, si j'étais dans l'enseignement, je dirais que cet élève fait des progrès et il ne doit surtout pas relâcher ses efforts qui le conduiront au succès. Le site a vocation à évoluer et le travail non visible réalisé à cette occasion y contribuera.
Citation :
Désolé, je ne me laisserais pas vendre une banale popup (un menu déroulant a-t-il besoin d'une case de fermeture [X] ? ) pour un menu déroulant ....Il ne s'agit pas d'une popup même si ce type de menu n'est pas le menu déroulant fréquemment vu sur le web. Tu remarqueras que le menu disparait tout seul si ta souris ne le survoles plus.
En revanche, la question du menu mérite en effet d'être soulevée.
Citation :
Il est à remarquer que, autant jadis les développeurs savaient créer des pages qui tenaient sur un seul écran (longtemps 800x600) d'un moniteur courantPlus de 80% des visiteurs du site Ariase ont des résolutions supérieures à 1024x768, dont 60% au dessus de 1280. Le 800*600 est très minoritaire aujourd'hui, d'où l'évolution sur Ariase.
Citation :
notamment le menu déroulant relatif aux offres adsl des divers FAIOn peut en effet réfléchir au retour de ces raccourcis.
Nous analyserons les retours avec Olivier (webdesigner) dès son retour de vacances. Des améliorations pourront alors être envisagées :-)
Citation :
Désolé, je ne me laisserais pas vendre une banale popup (un menu déroulant a-t-il besoin d'une case de fermeture [X] ? ) pour un menu déroulant ....Il ne s'agit pas d'une popup même si ce type de menu n'est pas le menu déroulant fréquemment vu sur le web. Tu remarqueras que le menu disparait tout seul si ta souris ne le survoles plus.Vérifions ce qu'il en est ![]()
1er temps: activons l'onglet de notre navigateur sur lequel se trouve la page à tester, et au besoin rafraîchissons la page (F5).
2nd temps: le curseur de la souris se trouvant en haut de page, descendons-le lentement.
Le hasard veut qu'il survole l'item "actualités" lequel prend ses couleurs activé, et soudain une pop-up en ligne gicle au-dessous de la barre de menu.
Cette popup:[list]
-d'une part apparaît sans action particulière autre que le survol de la cible déclencheuse: cette particularité est commune avec le menu déroulant,
-d'autre part elle repousse le reste de la page plus bas au-dessous d'elle, à la différence d'un menu déroulant qui lui survole la page sans la modifier aucunement.
[/list:u]
3ème temps: la pop-up ne nous intéressant pas, faisons marche arrière et remontons le curseur au-dessus de la ligne des items, suffisamment afin que l'item cible reprenne sa couleur inactif:
après la temporisation programmée, la fenêtre du "menu déroulant" ne devrait pas tarder à disparaître ...
4ème temps: patience ....
la pop-up n'a toujours pas disparu ....
et elle ne disparaîtra pas spontanément, comme toute pop-up de son genre qui se respecte (quand bien même elle n'ouvre pas une nouvelle fenêtre du navigateur ou qu'elle s'intègre dans la page),
à la différence d'un menu déroulant qui aurait disparu depuis longtemps ![]()
5ème temps: l'attente précédente nous ayant donné le temps de la réflexion, nous redescendons lentement ... pour cliquer sur un lien, disons .... "Les archives" ...
6ème temps: fallait que ça arrive: au moment où nous sommes repassés à nouveau (en flânant) sur l'item "actualités", la pop-up s'est soudain refermée .... ![]()
Nous ne cliquerons donc pas sur le lien comme nous l'avions envisagé, puisqu'il a disparu ![]()
Ces manipulations peuvent être refaites avec les menus déroulants. Le lecteur pourra se reporter aux liens indiqués précédemment à titre d'exemples: il constatera que le comportement normal d'un menu déroulant est tout autre.
Décidément non, le comportement de cette pop-up n'a rien de commun avec celui d'un menu déroulant ![]()
Ici l'élément déclencheur se comporte comme une bascule: son survol provoque l'inversion de la visibilité de la pop-up correspondante: une fois il l'affiche, le coup d'après il la cache ![]()
comme quoi ... le fait que l'élément se "referme" spontanément ou lorsque la souris le quitte ne suffit pas à caractériser un menu déroulant.
Le principe de ce type de pop-up consiste à rendre visible un élément de la page préalablement masqué, masquages / démasquages étant pilotés par les gestionnaires d'évènement onmouseover et onmouseout (quand ils ne le sont pas -ou en complément- de l'application des règles des feuilles de styles CSS), le comportement de l'élément étant ensuite une question de programmation. (il serait aussi possible de les créer à la volée)
Voyons donc comment sont placés ces éléments dans le cas Ariase et dans l'exemple tuto antérieur (il suffit de les rendre visibles!):
le cas Ariase:
et le cas de l'exemple du tuto:
(cliquer sur les images pour agrandir)
Nous constatons que les boîtes ARIASE s'affichent "en ligne" sans rupture du flux, c'est à dire l'une au-dessous de l'autre selon leur nature [%bloc], repoussant le reste de la page plus bas, alors que les boîtes de l'exemple menus-déroulants s'affichent avec une rupture du flux au-dessus de la page, leur position étant ici fixée par les feuilles de style.
L'on comprend ainsi le pourquoi du décalage de la page vers le bas: l'élément s'affiche dans la page et non au-dessus de la page.
Si ARIASE a adopté cette présentation pour une question de commentaires explicatifs associés, il avait tout aussi bien la possibilité d'associer une "info-bulle" à chaque item d'un véritable menu déroulant, cette disposition permettant d'apporter une information contextuelle très pointue.
Pour illustrer mon propos, j'invite le lecteur à tester le tutoriel dont l'item "carottes" a été aménagé (à la hâte) selon ce principe:
http://prououou.free.fr/tutos/md.html
Pour enfoncer mon clou (avant qu'il ne rouille ;) ), j'invite le lecteur à jeter un coup d'œil à ce
post
Il y verra ce qu'aurait pu être l'entête des pages d'ARIASE, et comment fonctionne un menu déroulant (pour la partie qui se déroule vers le bas) associée à une infobulle qui se développe au-dessus.
Cette partie supérieure peut également porter des liens; cependant je rechigne à la qualifier de "menu" du fait de l'absence d'une liste de liens en ligne.
Seule une disposition linéaire me semble propre à permettre une progression arborescente dans la recherche d'un lien particulier, alors qu'il me paraît hasardeux de tenter "d'empiler" des popups ou des infobulles-popup, le chemin suivi dans l'arborescence n'ayant plus rien de "visuel".
Bien entendu, chaque item des sous-menus peut également être agrémenté de son infobulle assortie ![]()
PS: actuellement seule la temporisation ouverture/fermeture de l'infobulle est implémentée (en javascript). Le menu déroulant est en CSS: du script serait nécessaire pour une temporisation à ce niveau.
Il semble exister un hic du côté de IE (internet explorer). Je viens de vérifier que ni IE6 ni IE7 ne rendent la page avec les menus déroulants en CSS, pas même la page démo du tuto indiquée plus haut ![]()
Une seule solution, adopter un autre navigateur (IE8 non testé)
PS: la page d'accueil Ariase passe le test du validateur W3C, sauf pour une balise <div> avec un attribut "name=" non admis !!
Citation :
la page d'accueil Ariase passe le test du validateur W3C, sauf pour une balise <div> avec un attribut "name=" non admisC'est pas moi !!
![]()
Une fois par mois, des news (reportages, nouveaux services...) et des bons plans pour faire des économies !
Un conseiller peut vous aider à choisir au 02 99 36 30 54N° non surtaxé, gratuit depuis 1 box
Etes-vous éligible à la fibre optique ?