Catégorie : CSS

Avancement

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

L’identification et l’authentification de l’entité en cours d’utilisation se font dans la librairie nebule. Mais l’interface avec l’utilisateur pour ça est faite par sylabe, et plus particulièrement par le module de gestion des entités.

L’interface de verrouillage/déverrouillage (connexion) a été modifiée pour avoir un style plus épurée et direct tout en présentant les informations minimums vitales. Elle met aussi beaucoup plus en évidence le fond d’écran, ce qui n’est plus le cas dans les autres page qui affichent beaucoup plus de contenu.

Voici ce que cela donne lorsque l’on va pour déverrouiller son entité :

sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_975571a8a470a6d975662e284f5ef1bd0396c06b31a2207b81bef2e24c5bf0c5_-_2015-03-07_17.31.46

Et on arrive tout de suite sur la fenêtre pour verrouiller l’entité :

sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_975571a8a470a6d975662e284f5ef1bd0396c06b31a2207b81bef2e24c5bf0c5_-_2015-03-07_17.32.47

Enfin, en cas de problème grave avec un composant interne remettant en cause le fonctionnement sécurisé, un indicateur passe en jaune (warning) ou en rouge (erreur) :

sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_975571a8a470a6d975662e284f5ef1bd0396c06b31a2207b81bef2e24c5bf0c5_-_2015-03-07_17.35.03

Avancement

L’interface évolue un peu au grès des évolutions du moteur. La remise en place de ce qui fonctionnait avant n’est pas aussi évidente et rapide…

Les menus ont été intervertis.

Les modules sont plus complets et commencent tout juste à prendre en charge les actions. Ils permettent aussi de compléter la traduction générale, le style CSS et les scriptes d’une page qui les concerne. Tout ce qui est fait dans l’interface repose sur un socle commun pour l’arrière plan et tout le reste est exporté dans des modules, certains seront peut-être intégrés par défaut au code de sylabe parce qu’ils seront indispensables. Les modules mériteront à eux seuls un article dans le blog et dans la documentation.

Voici ce que cela donne aujourd’hui pour la gestion des nÅ“uds :

sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_7855163e7ad8be9534cba394b63f0da6432fbe537d3e9ed8ffb687a29fd1cdbd_-_2015-02-08_23.36.05

Le logo de la métrologie a changé, mais c’est une erreur il va revenir…

Un autre exemple avec le module des entités. Celui-ci prendra en compte la gestion des entités connues, de la bascule entre entités et de la « connexion ». Le mécanisme de vérification de la connexion reste par contre exclusivement dans la librairie nebule.

sylabe_-_15d194c0ac5da323b50e868ab62c17c0a5470283c92f3d8a8631743b5cd9f42f_-_7855163e7ad8be9534cba394b63f0da6432fbe537d3e9ed8ffb687a29fd1cdbd_-_2015-02-08_23.49.55

Avancement

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

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…

Continuer la lecture de Le responsive design en pratique

Avancement

Quelques ajouts plutôt cosmétiques dans l’interface comme un fond plus foncé ou clair sous l’objet dans l’affichage.

L’aide progresse et peut maintenant afficher plus facilement des balises et images diverses. On peut notamment voir un cas extrême dans le mode des liens :

shot-2014-05-15_16-40-59

Le code de sylabe vérifie maintenant l’empreinte du bootstrap. En cas de problème ce n’est pas bloquant, mais on est avertit qu’il y a une mise à jour à faire faire par l’administrateur du serveur. La méthode n’est pas infaillible mais elle augment la difficulté pour corrompre une instance sylabe. Le petit panneau du bilan de santé dans le dock intègre l’indicateur correspondant :

shot-2014-05-15_16-45-26

Un système de gestion du thème est mis en place. Il permet de remplacer le thème CSS par défaut d’une page. Ce mécanisme est découpé en quatre parties, toutes avec possibilité de mise à jour :

  1. Une petite feuille de style commune et minimale. Elle est surtout dédiée à la gestion du fond d’écran.
  2. Une feuille de style dédiée à l’affichage de sylabe lorsque une entité est déverrouillée.
  3. Une feuille de style dédiée à l’affichage de sylabe lorsque aucune entité n’est déverrouillée.
  4. Une image utilisée avec le thème par défaut.

La possibilité de modifier le thème est contrôlé par les variables $sylabe_permitfollowcss et $sylabe_permitphpcss. La deuxième autorise la présence de balises qui peuvent servir à lancer du code pour adapter le thème en temps réel.

Voici l’image par défaut (licence CC BY-NC-SA) :

bg

Enfin, les liens générés sont maintenant en version 1.2, ce qui n’est que déclaratif actuellement.