(Between the brackets)

J'ai fait pas mal de web-design ces derniers temps, et j'ai surtout bcp travaillé sur CarpeStudentem dont je rêve depuis des mois de pouvoir retravailler le look, beaucoup trop "mal terminé" actuellement. J'ai donc repris mes pinceaux et outils éléctroniques pour refaire l'apparence de l'annuaire, des galleries photos et en partie aussi de l'agenda et du menu. L'accent a été mis sur l'aspect "propre" et surtout sur l'utilisabilité: petites images liens d'aide à la navigation, bcp de petits détails de ce genre ont été rajoutés.

UPDATE: comme ça n'est pas clair, je fais ici une petite précision. Les modifications présentées ici ne sont pas du tout déjà prises en compte sur le carpe actuel, mais bien sur un carpe de "substitution" que j'emploie pour mettre mes css au point. Il risque malheureusement de s'écouler bcp de temps avant que le vrai carpe soit mis à jour, c'est en effet un long processus (mais je ne désespère pas!). Vous pouvez en attendant toujours découvrir ces modifs via ce site. Qui plus est si vous avez des remarques je suis tout ouïe...

UPDATE II: Les liens apparaissent rouge car ils sont dans l'état "visités". Normalement ils apparaissent tous en bleu, comme ça dans leur état premier

UPDATE III: Suite à la perte de mon blog due à l'attaque par des scripts kiddies, tous les screenshots de ce billets ont disparus, désolé...

Voilà en gros à quoi ça ressemble maintenant:

Menu

Le menu est beaucoup plus clean je trouve, moins encombré par ces gros points ronds comme c'est le cas maintenant. De plus les limitations horizontales sont plus propres (on s'arrête avant la fin de la bordure bleue) et les espaces inter-lignes ne sont pas trop grands. J'ai égalément rajouté de séparateurs entre les groupes d'éléments du menu, pour plus de clartés.

Annuaire

L'annuaire a été completement retravaillé. Basiquement c'est la même idée, en plus peaufiné et avec un accent plus prononcé sur l'utilisabilité. Voilà quelques images:

Cette image montre la page principale. J'ai abandonné l'image du poisson. Ok, elle était sympa, mais elle bouffe la place pour rien. En dessous les catégories apparaissent de façon similaire à maintenant, mais elles sont plus propres. La barre de recherche est mise en exergue par une bordure foncée.

Ici on peut voir la page de navigation dans les catgories. Pas grand chose à dire si ce n'est que désormais les vues sont plus propres et les présentation des éléments ne renseignent que le strict minimun pour ne pas surcharger la vue. De plus j'ai placé des petites icônes pour faciliter le répérage de l'information.

Les éléments sont maintenant présentés dans une page entière (au revoir les pop-ups inutiles!). La présentation s'agrémente de petites icônes, pour faciliter la compréhension de la disposition. Pour tirer part de tout l'espace, des boïtes sur le coté présentent des infos connexes. Ici le logo et la possible future implémentation d'une carte de LLN avec repérage de l'élement en question.

Les galeries photos

Les galeries ont subies un relookage très proches de l'annuaire, photos en plus évidemment. Le but est de toute façon d'homogénéiser les présentations des "services" carpe pour que leur utilisation soit plus simple pour le visiteur.

La page principale, elle présente les catégories de photos et les dernières séries uploadées. Les catgories sont peu nombreuses mais bien décrites, afin de ne pas perdre le visiteur dans un million de sous-catégories. Les albums apparaissant en première page sont les albums qui viennent d'être mis en ligne, ils apparaissent en grand afin d'avoir une bonne visiblité, car c'est de toute fçaon ça que le visiteur va aller chercher en premier lieu. Sur l'image elles sont limitées à 4 car cela permet de toutes les afficher à l'écran, ce chiffre est à discuter.

Un clic sur une catégories renvoie à la page présentant les sous-cétgories et les albums qui y sont présents. COmme on peut le voir le principe est similaire à celui de l'annuaire, si ce n'est qu'il y a des photos en plus. L'information à côtés des album est le strict nécéssaire: la nombre de photo et la date de publication (eventuellement de modification).

Mais la grande nouveauté c'est surtout la vue de navigation des photos. OUtre la vue classique en mosaique qui apparait par défaut quand on clique sur une catégorie (non reproduit ici, c quasi la même chose que dans la version actuelle), il y a maintenant moyen de naviguer dans les photos directement depuis la page principale (et plus de pop-up non plus!). La présentation est simple et efficace: la photo est présentée au milieu et la précédente/suivante sont visibles sur les côtés. Cela permet d'avoir des liens facile à cliquer (grosse image difficile à rater) et de voir la photo qui va arriver. En dessous le nom de l'image est présenté (plus facile si on nous demande une version bonne résolution), on pourrait encore donner le lien vers l'image aussi et/ou proposer un lien qui générerait un mail avec toutes les infos nécéssaires pour nous demander la photo (idées à travailler).

Agenda

L'agenda a été un peu retravaillé aussi: maintenant les événements sont présentés en pleine page, comme les éléments de l'annuaire, c'est plus propre et moins emmerdant qu'une pop-up. Jugez plutôt:

Le formulaire de soumission d'événement est lui aussi retravaillé et donne beaucoup plus d'aide à l'encodage des données qu'auparavant. Une vérification de la validité des données encodées est aussi prévue. Les différents types de données à introduire ont été divisés de sorte à éclaircir le tout.

Incroyable! J'avais principalement deux problèmes avec mon portable ACER depuis quelques temps. Le premier c'était que la touche < > ne fonctionnait pas! Embêtant quand on fait de l'HTML pour ainsi dire tous les jours! Mon deuxième problème, c'était que le microphone de mon ordi était lamentable (on entend rien). Du coup je me suis acheté un micro externe, pensant que ça le ferait, mais non! On entendait rien non plus!

Après une visite sur le site d'acr bien inspirée (comment n'y ai-je pas pensé plus tôt!) je viens d'apprendre que

1. le problème du clavier est connu, c'est un problème de fabrique. il faut télécharger un prog et booter sur une disquette pour que tt rentre dans l'ordre.
2. l'entrée micro n'est en réalité pas amplifiée, il faut utiliser un micro actif!

Ok, voilà des semaines de frustrations qui se terminent.

Petits problèmes: j'en ai marre de phpwebgallery que j'utilise pour publier des photos sur BTB car il est trop difficile à customiser. Du coup je vais essayer Coppermine, mais pour l'installer il me faut placer des permissions 777 (vous avez compris? désolé mais dans ce cas vous êtes un geek) sur des répertoires et ça - merci l'ECE - je peux pas le faire directement, je dois le leur demander et ils le feront pour moi...

Du coup je suis obligé d'attendre qu'ils se bougent le cul et en vacances j'ai bon espoir! Si ça dure trop longtemps tant pis j'utiliserai phpwebgallery quand même...

Dans quelques jours va se discuter à la commission européenne la question des brevets logiciels. Un tel decret pourrait donc passer et engendrer une situation absolument insensée: n'importe quel principe informatique pourrait se voir breveté! Imaginez un seul instant ne pas pouvoir utiliser de pop-up sur votre site car vous n'en avez pas l'autorisation du déteneur du brevet! Une telle situation pourrait se produire dans le cadre de cette législation!

Vous pourrez trouver plus d'informations sur le site de la ffii

Aujourd'hui je suis passé au FOSDEM! Après environ 45min de recherche dans Bruxelles (je ne m'y retrouverai jamais!), me voilà enfin arrivé au campus de l'ULB pour retrouver mes amis geek Lionel et Patrick. Après être rentré dans le batiment, nous tâtons le terrain: la première chose que l'on remarque c'est le stand O'Reilly qui est juste à coté de l'entrée. Je regarde désespérément ces livres comme un enfant regarde des jouets même s'il sait qu'ils ne lui serviront à rien ;-) (finalement je n'en ai pas acheté :-(, O'Reilly ne procure toujours pas ce que je cherche: un bon bouquin récapitulant proprement le CSS-positioning). Lorsque nous (je) parvenons (parviens) à nous (m') arracher à ce stand nous poursuivons notre petit tour pour admirer toutes ces têtes de geek qui nous entourent.