Archive for the ‘responsive design’ Category

Avancement

Samedi, juillet 18th, 2015

Une refonte partielle de l’interface a été faite. Suite aux développements récents de l’interface et de ces modules, il est apparu qu’il fallait moins mettre en avant les objets et liens et plus les fonctionnalités des modules.

Maintenant, une bonne partie des modules sont externes. Seuls sont restés internes, et donc obligatoires, les modules entités et aide. Les autres modules sont détectés via les liens et chargés si les liens sont valides et les signataires identifiés comme autorités locales. Il faut encore améliorer la détection de collision entre modules prétendants au même nom.

Nous ne sommes plus très loin d’une remise en ligne régulière du code sur le serveur de test…

Enfin, en lien avec la refonte de l’interface, l’iconographie a été revue :

add addent addlnk addobj addtxt
idownload ihlp imenu imetrolog imodify
key lc ld le lf
lk ll lll lo ls
lstent lstobj lu lx mchr
ment mmsg msglist msgsent oent
sylabe synent synlnk synobj

Voici la nouvelle interface :

20150718 sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_2db5ebfbdc6db01b5972837182275c2142d68de20fe78670a87875108e616cf7_-_2015-07-18_16.52.53
Version moyenne et haute définition.

20150718 sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_2db5ebfbdc6db01b5972837182275c2142d68de20fe78670a87875108e616cf7_-_2015-07-18_16.53.45
Version petite définition.

20150718 sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_2db5ebfbdc6db01b5972837182275c2142d68de20fe78670a87875108e616cf7_-_2015-07-18_16.54.48
Version très petite définition.

Et le menu des applications, en fait des modules :

20150718 sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_2db5ebfbdc6db01b5972837182275c2142d68de20fe78670a87875108e616cf7_-_2015-07-18_17.17.35
Le menu des applications.

Avancement

Mercredi, février 18th, 2015

Quelques corrections cosmétiques sur l’affichage… notamment pour les petites résolutions… et il y en a encore beaucoup en attente…

Les premières actions apparaissent avec les nœuds, à condition que l’entité soit déverrouillée. Mais les actions ne sont pas encore réalisées, c’est juste la mécanique qui s’affiche en attendant de passer à l’acte. Voila ce que ça donne :

sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_0a7a0f6589b7112fe2272254fce5908fb7b88a65da0507dc0f9b3e3894c5ade6_-_2015-02-18_00.11.03

Et ici une autre vue concernant une entité :

sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_e5600bf20cd7cd94a495c17bfaa4e841ddefe4654c61a18883803567231d0b40_-_2015-02-18_00.23.35

Cette dernière vue montre que si les entités ont leur propre module d’affichage et de gestion, elles sont tout à fait affichables dans le module des objets, donc comme des objets. Il est possible de faire des choses avec les objets qui n’ont pas d’intérêt pour les entités, mais c’est faisable quand même.

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/