Archive for décembre, 2014

Avancement

Lundi, décembre 15th, 2014

La nouvelle interface responsive design est en cours de mise en place. Quelques ajustement sont et seront faits au fur et à mesure de l’avancement.

La mise en place de modules est aussi en cours d’introduction. Pour l’instant ils ne sont pas fonctionnels. Va se poser la question de la sécurité autour des modules. Lequels va-t-on accepter de charger…

developpement_bachue_-_sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_2014-12-14_23.20.11

Le responsive design en pratique

Samedi, décembre 6th, 2014

Ca m’aura pris une bonne journée de travail, mais le résultat est plaisant.

Voici donc une page de test comme proposition de mise en page pour que sylabe soit responsive design. Ici avec une résolution classique de 1280×800 pixels (moins les bordures du navigateur) :

Test_Responsive_Design_1280x800_2014-12-06_21.54.33

Au passage, il y a une nouvelle icône :

imodify

La page de test peut être essayée à l’adresse de l’objet :
539b0aaacf258f1190e33524b368ca9685b9cccb933ed2ec2021acee4fa83705

Il y a pas mal de captures d’écrans pour montrer l’adaptation de la page à des résolutions d’écran parfois assez… réduites. Malheureusement, Fierfox ne me permet pas de descendre en dessous de 300 pixels en largeur pour atteindre les 240 pixels de certains téléphones. Mais à priori, ça ne passe pas à une si petite résolution.

Évidemment, du 1024×768 sur un téléphone ne seront pas aussi lisible que sur un écran 15 pouces de PC…
Et il est illusoire d’espérer analyser les liens des objets sur de petites résolutions…

(suite…)

Symbologie du verrouillage/déverrouillage

Samedi, décembre 6th, 2014

La remise en forme de l’interface sylabe suivant le responsive design impose de permettre à l’interface de réduire très fortement dans son affichage. Ainsi, le lien web qui permet à l’utilisateur (entité) de se déverrouiller (se connecter, s’authentifier) ne peut plus forcément être un texte explicite de l’état de connexion et surtout de l’action du lien web. Il faut pouvoir réduire cette action à une icône unique.

On trouve souvent ce genre de lien sur les sites web : Se connecter / Créer un compte

On pourrait aussi utiliser deux icônes, une pour l’état de connexion et une pour le lien d’action. Mais cela pourrait être difficile à comprendre par un utilisateur en fait.
Une des icônes ne serait pas fonctionnelle puisqu’elle ne ferait que afficher l’état : je suis connecté.
L’autre icône serait le lien web de connexion ou déconnexion : je me déconnecte.

Il y a aussi le problème de vocabulaire. On ne parle pas sous nebule d’état connecté ou déconnecté, donc pas plus de connexion ou de déconnexion. On est verrouillé ou déverrouillé, donc on déverrouille et on verrouille, enfin son entité numérique en fait. Ce changement de sémantique traduit une différence profonde dans le sens, et ce même si on peut abusivement faire les traductions connecté/déverrouillé et déconnecté/verrouillé.
Dans la pratique, lorsque l’on consulte la page d’une entité, même si elle est verrouillée, on est connecté à cette entité. Il n’est donc pas besoin de se connecter plus avec cette entité. Par contre, tant qu’elle n’est pas déverrouillée, on ne voit de cette entité que sa partie publique. Dans ce cas, ses informations privées sont verrouillées.

Alors ? Comment doit-on afficher simplement l’état de verrouillage et l’action inverse associée ?

Un autre moyen peut être utilisé pour indiqué l’état de verrouillage. Puisque cela n’a pas à être un lien web et qu’il est peut-être inopportun d’utiliser une image, ce peut être un autre élément de décoration. Il faut quand même qu’il soit visible.
On trouve sur certains sites web, en bordure de la barre d’utilisateur en haut de page, un liseret de couleur en fonction de l’état de connexion. On peut réutiliser ce principe. Un liseret noir peut être utilisé lorsque l’entité est verrouillée, un liseret relativement visible de quelques pixels. Ce même liseret peut passer rouge dès que l’entité est déverrouillée. C’est un code couleur qu’il faut apprendre, mais il peut être imposé systématiquement quelque soit le thème de couleur de la page appliqué, et surtout il est binaire : noir ou rouge.

Reste le lien de changement d’état de verrouillage.
Doit-il être un affichage positif, c’est à dire qu’il représente l’état et non l’action (d’inversion d’état) ?
Ou doit-il être un affichage négatif, c’est à dire qu’il représente l’action et l’état (inversé) ?

Anticipation

Jeudi, décembre 4th, 2014

Pour la refonte de l’interface, on va partir sur le principe du responsive design, ou site web adaptatif.

On peut assez facilement avec le CSS faire des pages web qui s’adaptent automatiquement à l’écran du périphérique de l’utilisateur.

CF : http://objetdirect.developpez.com/tutoriels/css/responsive-design/