Voici une nouvelle forme du site "Corse sauvage" prévue pour s'adapter à l'apparition des nouveaux écrans que sont les smartphones et les tablettes et se rendre conforme aux dernières versions de Joomla, le CMS utilisé pour la construction du contenu et de la présentation du site !

Les nouveaux modes de consultation sur Internet

Le site "Corse sauvage" 2013 est très mal adapté aux nouveaux médias de consultation que constituent les smartphones et les tablettes !
Ces nouveaux équipements utilisateurs ont apporté plusieurs évolutions majeures par rapport aux ordinateurs personnels qui étaient la norme auparavant :

• Des écrans de taille nettement plus petite que les tailles habituellement utilisées
• Une utilisation portrait ou paysage par basculement de l'appareil en cours de consultation
• Une utilisation tactile de l'écran par contact avec le doigt et non par la désignation précise avec la souris ou le touchpad

Jusque dans les années 2011/2012, les sites Internet étaient très mal adaptés à ces nouveaux moyens de consultation de par leur conception "statique" qui supposaient des dimensions fixes d'affichage à l'usage des écrans des matériels de bureau. Pour les smartphones, les éditeurs de site n'hésitaient pas à refaire un site Internet adapté à leurs dimensions et fonctionnalités ou à le rendre consultable à travers une "application" spécifique.

"Corse sauvage" 2013, dans la pratique, est difficilement visualisable depuis un smartphone avec sa largeur d'écran fixe (avec seulementr deux variantes plus petites accessibles par menu et rechargement de la page) de 1200 pixels, ses images et photos non redimensionnables, l'utilisation de Flash Player pour les lectures de vidéo et de fichiers musicaux, de longues pages avec beaucoup de contenu et de multiples colonnes (typiquement trois colonnes), etc... Il est éventuellement consultable sur les tablettes un peu réactives et capables de supporter son dimensionnement fixe, mais on retrouve les mêmes limites (Flash Player, agrandissement des photos, non redimensionnement des images, ...).

L'apparition du "Responsive Web Design" (RWD)

Depuis quelques années est apparue une nouvelle manière de concevoir les sites Internet pour les rendre mieux adaptés à ces nouveaux médias de consultation : le "Responsve Web Design".
Ce nouveau type de Web Design désigne une approche de conception qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau). Pour réussir, elle implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages. L'intérêt principal de cette approche par rapport à d'autres (site dédié, application native) est qu'elle évite les principaux inconvénients de ces méthodes alternatives : duplication de contenu et maintenance de plusieurs versions pour l'une, développement dans plusieurs langages et coûts associés pour l'autre.

Principales techniques utilisées :

• Adaptation automatique à l'espace disponible sur l'écran : pas de défilement horizontal pour consulter une page mais uniquement du défilement vertical
• Conception fluide des pages par dimensions définies en unités variables (pourcentage, em, vw, ...) pour une première adaptation à la taile de fenêtre
• Re-dimensionnement automatique des images en fonction de l'espace disponible
• Re-positionnement des blocs par décalage des blocs horizontaux en blocs verticaux à certains points de rupture (système de "Media Queries") correspondant à des frontières de dimension
• Réduction du contenu non essentiel sur les petits écrans (système de "Media Queries")
• Passage de la consultation par dispositif type souris sur les grands écrans au tactile sur les plus petits écrans

Les nouvelles versions de Joomla adaptées au RWD

Tout en conservant ses avantages précédents tels que décrits dans l'article Corse sauvage 2010 (logiciel libre et gratuit, prêt à l'emploi, multilingue, doté de multiples exetensions,...), ce CMS a été re-développé pour tenir compte des évolutions indiquées précédemment et a donné lieu à des versions Joomla 3.x tenant compte de ce tournant technologique.

Principales caractéristiques :

• Nouvelle interface utilisateur basé sur Bootstrap, framework HTML/CSS/JS développé par les équipes de Twitter qui apporte les principales fonctionnalités "Responsive Design"
• Recherche intelligente avancée
• Gestion native du multi-site
• Amélioration des performances SQL
• Support complet de PostgreSQL

L'un des avantages de cette version était aussi la mise à disposition d'un outil de migration pour les utilisateurs dont le site, comme "Corse sauvage", avait été déployé avec la dernière version de la génération Joomla précédente, Joomla 2.5.

Toutes ces fonctions et avantages en font un système pratiquement incontournable pour ceux qui ont débuté avec ce CMS.

Les principales modifications apportées par le nouveau site

La version précédente du site en Joomla 2.5 a été traitée avec l'outil de migration Joomla 2 -> 3 et a fait l'objet d'une modification de template (forme de présentation des pages du site) en passant de JA Purity ii à Purity iii qui est un cadre de présentation gratuit très adapté à Bootstrap et aux nouvelles formes de Responsive Design. Le problème, comme souvent dans ces cas de migration, c'est que cela a apporté beaucoup de révisions à faire dans les articles et les différents contenus du site pour s'adapter à ce nouveau cadre de présentation.

Parmi les principales modifications que vous verrez par rapport à la version précédente :

• La plus immédiatement visible est sans doute la nouvelle présentation de la page d'Accueil qui utilise la forme "magazine" proposée par la nouvelle version du template Purity iii : affichage moderne sur une ou plusieurs colonnes avec de multiples possibilités de mise en valeur par l'intermédiaire des articles mis en "vedette", des catégories et des sous-catégories qui peuvent tous être affichés sur ce magazine avec de nombreux paramètres de mise en forme
• Un nouveau Méga menu horizontal qui, dorénavant, est fixe en haut de page et vous évite de devoir faire défiler l'écran pour remonter le consulter
• Une présentation simplifiée, limitée au maximum à deux colonnes (pages Accueil et pages Blog) au lieu de trois auparavant et une seule colonne pour les pages articles au lieu de deux auparavant
• L'utilisation systématique du lecteur vidéo/musique JW Player qui permet de s'afficher en HTML5 ou en Flash Player selon les équipements des visiteurs qui consultent le site : il n'a pas un look génial, surtout pour la musique, mais simplifie beaucoup le codage du contenu et est adapté au HTML5 et l'abandon progressif de Flash (à comparer aux lecteurs du Flash du site 2013)
• Peu de changement dans la présentation des pages où ce sont essentiellement les couleurs et fonds qui ont été modifiés. Pour le moment, il n'est pas possible comme dans la version précédente de choisir parmi plusieurs thèmes de présentations de pages...
• L'apparence du bandeau de droite a été un peu modifiée en y supprimant le module d'identification (Connexion) qui est désormais placé dans le menu "Accueil"
• Les catégories (Maquis, Ravinisme, Canyoning, ...) et sous-catégories ont été conservées telles quelles et se retrouvent de la même manière dans le Méga menu : les pages affichées quand on clique sur les liens de menu correspondants sont des pages "Blog" qui affichent un petit texte de présentation, les sous-catégories éventuelles et la liste des articles associés avec leur texte d'introduction pour les premiers
• ...Et, bien sûr, la fluidité "Responsive Web Design" apportée par Boostrap et la version 3 de Joomla !
• A noter la disparition du Méga menu sur les écrans de largeurs inférieures à 980 pixels pour être remplacé par un "Menu burger" qui permet de déployer un menu complet (long à dérouler) sur la gauche de l'écran !
• Pour aider à utiliser le formulaire des commentaires Jcomments, un mode d'emploi a été ajouté accessible en cliquant sur l'icône d'aide à gauche en haut du formulaire
• Autre modification accessoire, le bandeau des icônes de partage sur réseaux sociaux est dorénavant à gauche de l'écran sauf pour ceux de petites dimensions où il est positionné en bas

Voilà pour un premier aperçu de ce nouveau site : en attente de vos retours pour les suggestions et les erreurs que vous ne manquerez pas d'y trouver puisque la migration a demandé une remise en forme complète de TOUT le contenu...