|
|
Mise en page avancéeCette leçon vise à vous montrer quelques astuces pour améliorer le rendu visuel de vos pages Storga. Elle commence par une partie culture générale informatique, pour bien comprendre les enjeux et contraintes liées à la mise en page. Choisir sa stratégie de mise en pageComprendre la notion de pile graphiqueIl existe trois grands modes de représentation d'un document :
Il y existe de plus une hiérarchie entre ces trois représentations. En effet, les transformations Repositionnable -> vectoriel et vectoriel -> bitmap sont une simple affaire de calcul, alors que les transformations Bitmap -> vectoriel et vectoriel -> repositionnable ne sont pas faisables dans le cas général. On peut donc parler d'une pile graphique à trois étages, que l'on ne peut parcourir dans la pratique que de haut en bas. Quand on créé un document, on le fait souvent avec un logiciel utilisant une représentation repositionnable. A l'inverse, un écran d'ordinateur moderne affiche exclusivement du format bitmap. Remarquons enfin que les deux transformations ne sont pas forcément effectuées au même moment, ni sur la même machine. Par exemple, on peut effectuer la transformation repositionnable -> vectoriel au niveau de son traitement de texte, stocker le résultat sous forme d'un fichier PDF, le transmettre par mail, et l'afficher sur une autre machine, qui effectuera la transformation vectoriel -> bitmap. Stratégie de conception de la mise en page d'un documentLa grande question au moment de mettre en forme une page dans le but de rendre sa lecture plus attrayante, est : est-ce que l'on choisi à l'avance, et donc on impose, le format de page du document final, et donc plus ou moins la taille d'écran optimale pour le lire ? L'avantage d'imposer le format du document final, c'est de pouvoir optimiser le positionnement des différents éléments plus ou moins 'à la main'. C'est ce que fait la presse magazine, et qu'avaient très largement adopté les sites web au début des années 2000, pour obtenir un impact visuel maximum. A l'inverse, la mise en page fixe s'avère pénible dès que le format naturel sur le matériel utilisé lors de la lecture est très différent de celui adopté au moment de la conception. En voici deux exemples. Tout d'abord un site web des années 2000 prévu pour des écrans 14 pouces 1366x768 aura l'air un peu ridicule quand il est visualisé sur un écran 30 pouces 4K. Dans l'autre sens, un article scientifique ou un livre au format PDF A4 est pénible à lire sur une liseuse ordinaire. Et Storga ?Storga est optimisé pour créer facilement des documents repositionnables. Cela signifie que les possibilités de mise en page sont limitées, mais relativement faciles à mettre en oeuvre au niveau du contenu de la page. Pour les feuilles de style, c'est une toute autre histoire, que nous ne ferons qu'effleurer au cours de cette leçon. Au niveau technique, la pile graphique qui est utilisée par Storga est celle de l'UI du logiciel libre Pliant (qui est aussi celle utilisée par le client natif Storga), et non la pile HTML+CSS des navigateurs web. Cela signifie que quand vous consultez une page Storga depuis un navigateur web, il existe un logiciel, appelé le HTTP proxy de Pliant, qui traduit le format repositionnable Pliant UI en HTML+CSS pour votre navigateur web. Pour autant, Storga ne vous interdit pas d'effectuer de la mise en page fixe, et dans ce cas, les limites sont fixées par le logiciel de mise en page et non par Storga. Dans la pratique, vous utiliserez le plus souvent pour cela le logiciel LibreOffice draw, et ces mises en page fixes vous serviront principalement dans deux cas. D'une part la réalisation d'une page web très graphique, comme décrit plus loin dans cette leçon. D'autre part, l'explicitation d'un processus sous forme d'un diagramme cliquable, ce que nous verrons au niveau 3 de cette formation. Comprendre la notion de feuille de styleUne feuille de style défini l'ensemble des paramètres qui vont piloter le calcul de la transformation repositionnable -> vectoriel. Elle défini entre autre la taille des titres, leur couleur, l'espacement, etc.
Un exemple de mise en page Storga repositionnable↣ Exemple : le site web Copliant Dans le texte de la page, on a inséré des blocs images (ou des blocs fichiers si les illustrations sont au format vectoriel SVG), pour lesquels, au niveau du menu contextuel, on a cliqué sur 'Propriétés', puis renseigné le champ 'Alignement' avec 'A droite' ou 'A gauche'. Ensuite, au niveau du site Storga Copliant, on a défini une feuille de style dans laquelle on a défini les règles de mise en page suivantes :
Le paramètre 'para/align/justify true' spécifie que les lignes seront justifiées. Les paramètres CSS servent à indiquer que les titres et sous titres doivent utiliser la fonte 'Lato', à disposition sur le site web 'fonts.googleapis.com'. Dans la plupart des cas, le champ 'Définitions CSS export supplémentaires' est à remplir avec le même contenu que 'Définitions CSS web supplémentaires', mais comme le code HTML généré pour l'export HTML n'est pas totalement identique à celui produit par le HTTP proxy Pliant, nous avons prévu deux champs, au cas où. Vous trouverez plus d'informations concernant le remplissage des feuilles de style Storga au niveau du manuel Storga. Cependant, leur utilisation reste d'une complexité qui dépasse très largement ce qu'il est réaliste de maîtriser au niveau 1 de la formation Storga. Nous vous recommandons dont de vous contenter de copier coller, ou de prendre contact avec nous pour nous faire part de vos difficultés rencontrées, ou souhaits, par exemple en postant des messages. → Le manuel Storga: les feuilles de style Un exemple de mise en page Storga fixe↣ Exemple : le site web du CJD Montargis-gâtinais La page a été réalisée avec LibreOffice draw. Au niveau de Storga, on a créé une page, on y a ajouté le bloc fichier, comme vu au niveau de la leçon 'Archiver ses fichiers de bureautique', et on a ajusté quelques unes de ses propriétés : On a ajouté les liens via le bouton 'Nouv lien' du menu contextuel du bloc fichier. Puisque la mise en page est fixe, on a pas besoin de feuille de style pour spécifier comment effectuer la conversion repositionnable -> vectoriel, mais uniquement quelques informations pour préciser comment ajuster la taille du document LibreOffice à celle de la fenêtre du navigateur web. Les stratégies logiquement possibles à ce niveau sont bien évidement zoomer, étirer, rajouter du blanc sur les cotés, ou couper les cotés. Cependant, Storga ne permet ni la stratégie zoomer, ni la stratégie étirer.
Pour rendre la page accessible sur le web, via l'URL http://montargis-gatinais.cjd.net/ (au lieu de http://cjd-montargis.storga.com/page/cjd_montargis/DBMXHGFD/0BC36S8) on a changé deux choses. Tout d'abord, toujours au niveau des propriétés de la page :
|