Portail culturel & évènementiel
Extranet d'entreprise ou communautaire
Un thème original pour YACS
photo : Hong Kong sky lights, Laurence Mellinger, 2004.C'est à partir d'un tutoriel donné par le concepteur web Guillaume Normand, dans le hors-serie n°5 de la revue Webdesign, que j'ai intégré ce thème pour YACS, en l'enrichissant davantage et surtout en utilisant la puissance d'un CMS pour mettre en œuvre une utilisation intéressante d'images de fond.
C'est là le principal objet de ce thème : pouvoir afficher une image de fond, ajustée en plein écran. En second objet, comme tous les blocs sont positionnés en absolu, il n'y a pas de défilement de la page. (C'est le main_panel seulement qui fait défiler son contenu.) La conséquence est que les menus et les outils sont visibles et accessibles en permanence.
Menu d'interactions
DépliéAfin d'optimiser davantage la place, et ne pas masquer l'image de fond. la colonne extra est affichée de manière innovante à l'horizontale en haut de page, et se déplie au survol de la souris.Bien sûr ces positionnements ont une limite de place disponible, surtout en petite résolution, et ne conviendront pas sur un site qui demande d'afficher beaucoup d'informations (boites de navigation, etc.).
Pour une consultation depuis un mobile, Yacs utilise un autre canevas.
Positionnement intelligent
L'affichage de l'image de fond n'est pas qu'une simple déformation de l'image aux dimensions de la fenêtre du navigateur. Les proportions de l'image sont préservées tandis que l'image est centrée. Selon le différentiel entre les proportions de l'image et de la fenêtre du navigateur, l'image est rognée verticalement ou horizontalement. Le rendu est obtenu par les balises HTML et les règles CSS.Fonds multiples
L'image de fond par défaut est images/background.jpg dans le répertoire du thème. Là ou cela devient intéressant c'est que le thème permet d'utiliser très facilement des backgrounds différents pour chaque page, attribués en cascade sur l'arborescence, et sans intervenir dans le code PHP ! Deux méthodes sont disponibles simultanément :- méthode 1: définir au niveau d'une section une option de variante de thème. Par exemple "variant_montheme".
Uploadez ensuite par FTP une image nommée background_montheme dans le répertoire /images du thème.
Le thème va afficher automatiquement l'image en fond pour la section et tous ces descendants. - méthode 2: fournir au niveau d'une page une "image de page".L'image de page sera utilisée pour le fond, en priorité d'après la méthode 1.
Dans le cadre d'une section le fond est cascadé sur un niveau inférieur seulement.
Notez que la méthode 1 affiche le fond lors de l'édition des pages, ce qui n'est pas le cas de la méthode 2 (le fond par défaut est utilisé à la place, ou une variante définie aux niveaux supérieurs de la page). Pour la méthode 2, attention au redimensionnement des images par YACS. Voici la procédure la plus rapide pour attribuer un fond sur un serveur YACS Martin :
- allez sur la page concernée, cliquer sur "modifier la page" dans outils (en haut) ;
- cliquez sur l'onglet "média" ;
- cliquez sur le bouton "ajouter" pour la ligne "image de page" ;
- donnez votre fichier, l'image est chargée, mais à cet instant elle est retaillée au dimension d'une vignette !
- cliquez sur le lien "ajouter une autre image" en dessous du message de notification ;
- redonnez le même fichier ;
- dans les options, si vous êtes de niveau d'accès associé, cochez "ne pas redimensionner l'image". Si vous êtes simple membre, vous tombez sous le coup des limites pour grandes images, paramètres du serveur ;
- l'image de page est maintenant aux bonnes dimensions, retournez à la page principale pour voir le résultat.
Concernant la méthode 1 avec variante de thème, il faut savoir que YACS génère déjà des marquages de variantes selon les pages affichées. Par exemple "users", "categories, "control", "sections", "articles", etc. En fournissant par exemple une image "background_users.jpg", celle-ci s'affichera automatiquement pour l'index des utilisateurs, les profils, la page d'authentification.
Consultez dans le source HTML l'identifiant de la balise body pour connaitre la variante de la page.
Menu en boutons 3D
Menu en boutonsLes règles de style transforment les liens de la colonne latérale en joli menu à boutons (pour les navigateurs compatibles CSS3). Vous pouvez facilement changer les couleurs via la feuille de style.Les boutons dans le corps de page (barre de commande, boutons à la demande) auront le même rendu.
Feuille de style CSS3
Titre et fil d'Ariane
Onglets, en-têtes et menu Les effets de style sont obtenus par CSS3 et donc non implémentés par tous les navigateurs. Cependant c'est une solution d'avenir, qui simplifie fortement l'intégration.@font-face, box-shadow, text-shadow, border-radius.
Personnaliser et dériver ce thème
Le CSS est organisé de manière à isoler ce qui relève de la décoration ou du positionnement délicat des blocs.Le thème est livré ici avec une ambiance quelque peu technoïde, mais vous pouvez rapidement changer ses couleurs en éditant la première partie du CSS.
Les scripts sont entièrement commentés.
Idées d'utilisation
À partir de ce thème, vous pouvez élaborer une galerie d'images en plein écran. De nouvelles interactions pourront aussi être mises en oeuvre après l'intégration de jQuery.
Spécifications
- En-tête, colonne latérale, corps de page, pied de page, barre d'interactions.
- Positionnement absolu, blocs toujours visibles
- 2 colonnes + une barre d'interactions dépliable au survol
- Menu en boutons 3D
- Onglets de navigation.
- Fil d'Ariane
- Validité XHTML 1.1
- Feuille de style CSS3
- Police embarquée
- Rendu maximum avec le navigateur Firefox 3.5+
- Scripts très commentés, basés sur le thème Mu
