Cette nouvelle version du Site avec le CMS Joomla 3.4 qui apporte beaucoup de nouvelles fonctionnalités par rapport aux pages Web antérieures et a pour principale avantage de s'adapter aux nouveaux outils de consultation, tablettes et smartphones, dont la taille d'écran impose des contraintes de redimensionnement...

Dans la suite de cet article, nous donnons quelques informations pour l'utilisation du site qui, bien que sa structure soit plutôt assez simple, comporte sans doute quelques notions et quelques réflexes que beaucoup n'ont pas encore acquis !

Principales informations pour l'utilisation du site A Punta Bunifazinca :

Vous trouverez ci-dessous les principales informations qui vous seront utiles dans l'utilisation de cette première version du site, avec un contenu qui, pour le moment, reste assez similaire aux pages Web précédentes, même s'il a été pas mal enrichi :

• Le fond : la principale nouveauté est une organisation plus structurée, abordée dans la suite de l'article, avec plus d'articles, plus de vidéos et plus de photos que précédemment
• L'organisation et la présentation du contenu et du fond :
  • La structuration Joomla! Catégories/Sous-catégories/.../Articles a été adoptée avec jusqu'à 4 niveaux d'arborescence que vous trouverez déclinés dans le principal menu de navigation en tête de chaque page : le menu horizontal (Méga menu) qui d'un seul clic déploie une Catégorie ou Sous-catégorie sous forme d'un menu déroulant qui permet d'aller au niveau suivant
  • Les Catégories principales devraient être assez claires quant à leur contenu : L'associu, Réalisations, Projets, Photos, Vidéos et Fil d'Infos. Le Fil d'Infos est simplement un blog (empilement chronologique d'articles d'actualités) retraçant la vie et l'actualité de l'association outre les articles des Réalisations et Projets abordés dans les catégories correspondantes
  • Tout au bout de l'arborescence, il y a l'Article qui peut, 1°) soit relater une information sans chronologie ou date (infos association, topos de randonnée, ...) mais nécessitant une mise à jour dans le temps, 2°) soit donner une information ponctuelle associée à une notion de temps et donc datée et sans mise à jour ultérieure en analogie avec des articles de presse.
    La 1ère catégorie d'article ne contient que des articles directement atteignables par le Méga menu (ils y ont un lien inséré comme les liens des articles sous L'associu) alors que la seconde ne peut s'atteindre que par le biais des blogs de leur catégorie (Réalisations/Randonnées, Réalisations/Patrimoine, Réalisations/Autres, Projets/... et Fils d'Infos et Evénements)
  • Les articles sont les seuls éléments à faire l'objet de commentaires, mais, pour le moment, sans possibilité de pré-visualiser votre commentaire. Attention, donc, à le vérifier avant de l'envoyer, car vous ne pourrez plus le modifier, sauf si vous vous enregistrez sur le site via le module de connexion en pages Accueil et Blogs ou dans le Méga menu en survolant Accueil...
  • Les visiteurs peuvent donc s'enregistrer (module de connexion) et accéder ainsi à des pages, des parties de commentaires ou des fonctions spécifiquement réservées, ainsi que la possibilité de modifier/supprimer leurs propres commentaires, de voir les commentaires ou morceaux de commentaires qui leur sont réservés, etc...
• L'utilisation du site :
  • La navigation : deux menus de navigation et un bouton de retour en haut de page devraient permettre une navigation aisée dans le site
    • Le Méga menu horizontal en haut de page, fixé à la page et donc restant toujours présent quel que soit le défilement de la page, avec accès direct aux pages des articles "fixes" ou aux pages des "blogs" (chronologie des articles de leur catégorie)
    • Un petit menu vertical, doté d'un développement réduit et situé à gauche du pied-de-page, permet de revenir aux pages des catégories de niveau 1 depuis le bas de chaque page. Le pied-de-page n'est pas disponibme sur les petits écrans !
    • Un bouton de navigation rapide pour retourner en haut de page est présent sur les écrans assez grands, "fixé" en bas à droite, sur toutes les pages
  • La recherche :
    • Une barre de recherche sur tout le site (Modules, Articles ET Commentaires) en haut et à droite de l'en-tête de TOUTES les pages
  • La structuration des pages :
    • Très simple avec seulement trois types de pages, Accueil, Blog et Article
    • La Page-Accueil, comme son nom l'indique, ne concerne qu'une seule page du Site sur laquelle a été adopté un format magazine avec en tête une mise en évidence de quelques articles conseillés aux visiteurs, puis, par catégorie, une liste des quelques derniers articles publiés. Pour chaque article, on a titre et infos articles (auteur, dates) et, éventuellement un texte d'introduction.
      Cette page a une en-tête plus importante que les autres pour mettre en évidence l'association et un diaporama photos de notre "Punta" préférée. Outre la partie gauche consacrée aux articles comme indiqué précédemment, elle présente un bandeau à droite avec des modules divers empilés en colonne : module de connexion (sans passer par le Méga menu), module météo, la liste des derniers articles publiés, la liste des derniers commentaires publiés, la fil des informations publiées sur la page Facebook de l'association, ...
    • Les Pages-Blog sont des pages associées à une Catégorie qui exposent les article de cette catégorie dans l'ordre chronologique descendant avec titre, image, infos article et texte introductif.
      Ces pages ont une en-tête encore assez conséquente mais sans le diaporama photos et conserve le bandeau droit avec les modules comme sur la Page-Accueil
    • Les Pages-Article présentent un (et UN SEUL) article dans sa totalité et affiché sur toute la largeur de l'écran (un maximum est respecté pour les grands écrans !) sans aucun bandeau à droite
  • Les commentairess :
    L'une des principales nouveautés par rapport aux pages Web précédentes permet à tout visiteur de laisser des commentaires sur un article, avec des droits plus importants s'il s'est enregistré au préalable...
    • Les commentaires sont créés à partir d'un module Commentaire, situé uniquement sur les Pages-Article et positionné APRES l'article
    • Le module Commentaire est présenté différemment selon que l'utilisateur est "Invité" ou "Enregistré". L'"Invité" dispose de moins d'outils de saisie et doit passer par un test de Captcha pour publier son commentaire afin d'éviter les spams. L'"Enregistré" a une batterie d'outils de saisie plus importante et plus de boutons sur la barre d'assistance (Wikibarre) à la saisie.
      Une fois la saisie effectué, cliquer sur Enregistrer pour publier le commentaire
      
      

      
    • Les outils de saisie comportent un code Wikicode spécial aidant à mettre en forme le texte saisi : gras, italique, souligné, etc... Le Wikicode est assisté de la Wikibarre, bandeau de boutons au-dessus de la zone de saisie, qui facilite l'insertion du code en sélectionnant le texte à mettre en forme et en cliquant sur le bouton de mise en forme choisie.
      Des outils plus sophistiqués sont mis à disposition des "Enregistrés" (les "Invités" ne les voient pas) : insertion d'images, de liens, de vidéos, agrandissement d'image, ...
      Une fois le commentaire publié, l'"Invité" ne peut rien en faire alors que l'"Enregistré" peut modifier ou supprimer son propre commentaire...
      Tous ces éléments peuvent être vus en direct dans les commentaires qui suivent cet article où des commentaires ont été postés pour exemple !
      
      

      

      

      
• Les autres outils d'utilisation :
  • Agrandissement d'images pour les images marquées d'une loupe dans une fenêtre popup en cliquant dessus. L'image est agrandie dans un diaporama manuel de toutes les images de la page
  • Insertion ou popup de vidéo avec la possibilité d'insérer les vidéos directement dans l'article (JW Player) ou de les visualiser en fenêtre popup (JCE Mediabox)
  • Popup de diaporama images avec la possibilité de visualiser les images/photos en fenêtre popup à l'intérieur d'un diaporama manuel
  • Autres outils annexes : icônes de partage pour réseaux sociaux, lien pour le plan à jour du site, module météo, liste des derniers articles publiés, liste des derniers commentaires publiés, liens RSS de chaque page Accueil ou Blog, des derniers articles et des derniers commentaires pour se tenir au courant des évolutions sans visiter le site !
  • Bouton de commande pour Imprimer l'article ou Envoyer un e-mail avec l'article en haut et à droite de chaque article

Enfin, pour terminer, quelques mots sur l'adaptation du site aux différents types d'équipements de consultation. L'une des principales fonctionnalités de Joomla 3.4/Purity III est de pouvoir plus facilement permettre de visualiser le site sur les équipements dotés d'écrans de taille réduite comme les smartphones et tablettes modernes, et cela sans nécessité de mettre en place plusieurs versions du site (site "normal" et site "mobile") comme c'est le cas de certaines solutions déjà dépassées. La solution proposée ici passe par la mise à disposition de feuilles de styles adaptées à 4 largeurs d'écran : xs < 768px, sm entre 768 et 992px, md entre 992 et 1200px et lg > 1200px. Chacune de ces largeurs d'écran définit une frontière à partir de laquelle la structure et le découpage de la page est redéfini : avec moins de largeur d'écran, la page est redéfinie avec moins de colonnes, empilement des blocs les uns sur les autres et non plus en largeur, redimensionnement des images trop larges, ...

En pratique, avec le site conçu tel qu'il est à l'heure actuelle, quelques éléments à connaître pour les tablettes et smartphones (en dessous de 768px):

• Le Méga menu est abandonné puisqu'il utilise une grande largeur d'écran et est remplacé par un menu latéral déclenché par un bouton spécifique en haut et à gauche de l'écran
  
  

  

  
• Le pied-de-page n'est pas utilisé sur les écrans de taille inférieure à 768px
• Les images sont redimensionnées pour s'adapter à la largeur d'écran. A tel point que certaines images de petite taille peuvent être redimensionnées à une plus grande taille si le concepteur ne fait pas attention... Si vous voyez ce genre de phénomène, c'est que certaines images ont échappé à notre vigilance et que nous avons oublié de leur définir une largeur maximale (max-width) !
• La barre de partage de réseaux sociaux passe de "fixé" au bord gauche de l'écran à "fixé" au bas de l'écran sur les petits écrans pour éviter de cacher les informations du bord gauche du document
• La redéfinition de la page doit être telle qu'elle ne doit pas dépasser la largeur d'écran utilisable et que l'utilisateur n'ait donc pas à faire du défilement latéral pour visualiser ce qu'il veut voir

Pour ceux qui ont des grands écrans et un système d'exploitation gérant la dimension des fenêtres, il leur est facile de vérifier cette redéfinition de page en décroissant la largeur de fenêtre du site dans leur navigateur et en remarquant ce qui se passe aux 4 "ruptures" de taille définies (Cf. exemples sur les deux vues d'écrans à gauche - grand écran - et à droite - petit écran - de ce paragraphe)...

Néanmoins, malgré ces facilités nouvelles pour petits écrans, nous ne recommandons pas les smartphones pour consulter un site qui donne beaucoup de photos, vidéos, plans, cartes et images de nature : il vaut mieux y jouer à "Clan of Clash" ou "Candy Crush" !

Si vous avez des problèmes ou des difficultés d'utilisation ou des suggestions d'amélioration du site en ce domaine, n'hésitez pas à nous contacter et à nous le faire savoir !