Web Design
Article rédigé le 4 octobre 2014
Comme je l'ai annoncé à la création de ce blog dans la présentation, un des objectifs du projet était de faire d'un blog Blogger un véritable site Internet sous la forme d'un magazine en ligne. Aujourd'hui, toutes les fonctionnalités nécessaires ont été implémentées bien que parfois incomplètes (multilinguisme) ou partiellement présentes (pages listant les articles). Mais aujourd'hui, le travail réalisé est suffisant pour démontrer ces fonctionnalités, exposer leur principe, avec des explications assez techniques pour ceux qui voudraient réaliser un travail similaire.
1 - look and feel
Il n'y a pas trop de traduction pour ce terme des professionnels du web, on pourrait traduire par "apparence et ambiance". C'est ce qui va donner son originalité au blog, au site. Bien sûr, Blogger offre des modèles tout faits et disponibles, mais la première chose qu'un informaticien va pouvoir faire avec Blogger, c'est programmer en HTML et CSS en partant d'un modèle existant pour avoir un blog dont l'aspect ne ressemble à aucun autre.
Ce travail comprend le changement du bandeau, la définition de la largeur des articles, les couleurs des lignes de démarcation des éléments, de leur fond, des caractères des textes, la taille et le style des police, bref, ce qu'on appelle en édition la charte graphique.
C'est aussi ce qu'il y a de plus simple à faire pour un débutant en informatique, et c'est donc par là qu'il faut commencer. Bien sûr, ce travail va durer toute la vie du Blog, son style va continuer à évoluer au fur et à mesure que les goûts en matière de web design du web designer évoluent.
Par exemple je viens seulement, au bout de deux ans, de me rendre compte à quel point les titres des articles étaient "vilains" et de changer leur apparence.
Il y a aussi une question de mode comme partout.
Le web designer va abandonner au fil du temps des choses qui ne se font plus afin que son blog ou son site ne tombe pas dans la catégorie ringard ou "has been", et d'un autre côté il va doter son site ou son blog des dernières nouveautés, comme je viens de le faire avec ma mise en page dynamique inspirée de Pinterest. Aussi il est important quand on tient un blog de beaucoup surfer la toile pour être au goût du jour....
Une chose essentielle avec Blogger est de changer l'en tête (header) et surtout de masquer la navigation Blogger. Voici les liens vers les articles qui expliquent comment faire ça.
2 - Navigation
2.1 Labels
Au départ, la navigation va être possible en utilisant les labels. Taguez vos articles avec des domaines précis pour bien séparer le contenu de votre blog en rubriques.
Par exemple, et c'est pour ça que j'ai choisi de faire de mon blog un magazine, il y a dans "a man's world" des rubriques très différentes : santé, cuisine, art, culture, humeurs... Donc j'ai un label pour chacune de ces rubriques. Et ensuite dans chaque rubrique, j'ai des sous-labels. Par exemple pour la rubrique Art, j'ai une sous rubrique "sanguine" et une autre "esquisse".
La labellisation du contenu est très importante car elle va permettre de faire ensuite une navigation plus avancée...
2.2 Menu
Le premier stade de l'amélioration de la navigation va être de faire un menu. Ce qui est génial avec Blogger, c'est que la plate forme offre des zones de Widget. Un widget est un fragment de code informatique ou de texte que vous allez pouvoir insérer à un endroit précis dans le blog. Il y a une zone prévue pour un menu horizontal.
Je suis allé chercher un fragment de code pour un menu horizontal sur Internet et je l'ai adapté au blog en faisant pointer les rubriques et sous-rubriques du menu sur mes labels principaux et secondaires. Là, le blog a commencé à ressembler à un site Internet.
Cependant, à ce stade, j'ai commis une erreur. J'ai choisi un menu déroulant... Fatale erreur ! Ce genre de menu est devenu problématique avec les écrans tactiles. Par exemple, Internet Explorer en 2013 ne gérait pas les menus déroulants en mode tactile ce qui a gravement pénalisé Microsoft dans la vente de Windows phones. Je ne sais pas s'ils ont réparé ça...
Là, par exemple, avec mon Samsung Galaxy, la navigation par menu déroulant semble prévue, mais ça ne marche pas très bien. Bref, avec l'usage de plus en plus répandu des téléphones et des tablettes pour naviguer sur le web, les menus déroulants sont devenus tout simplement un luxe. Ils facilitent beaucoup la navigation sur un ordinateur en utilisation non tactile, mais ils doivent impérativement être doublés de pages avec des boutons adaptées au mode tactile.
Cette constatation fait une magnifique transition avec ce qui va suivre, c'est à dire la navigation par pages, et l'explication de la différence entre les articles et les pages dans Blogger.
2.2 Navigation tactile
Si vous avez Windows 8 sur votre ordinateur vous avez vu que la navigation est prévue avec de gros pavés adaptés au mode tactile. C'est la fameuse interface Metro (qu'on n'a d'ailleurs plus le droit d'appeler ainsi)...
Voilà la nouvelle façon dont il faut concevoir les blogs et les sites Internet maintenant. Finis les menus avec leur petits liens difficiles à cliquer avec le bout du doigt sur un téléphone, et bienvenue aux pages qui listent les rubriques avec des gros pavés adaptés aux index de nos utilisateurs.
Ce type de page, permettant de bondir de rubriques en rubriques ou de choisir entre plusieurs pages de contenu s'appelle dans notre jargons des landing pages ou pages d'accueil.
Ce qui est génial, c'est que Blogger a prévu ce type de pages.
Supposons que vous ayez besoin d'une page sur laquelle vous allez placer plusieurs pavés tactiles pointant vers les rubriques de votre blog. Vous ne voulez pas que cette page soit envoyée automatiquement par mail aux membres de votre blog le lendemain de sa parution, et vous ne voulez pas non plus que cette page apparaisse dans la liste des articles quand les utilisateurs font une recherche sur un label dans votre blog, ou parcourent tous les articles chronologiquement.
Et bien les fameuses "pages" disponibles dans Blogger servent à ça. C'est avec ces pages que vous allez pouvoir faire les pages d'accueil de vos rubriques, mais aussi, comme dans tout site Internet qui se respecte, une Foire Aux Question, un glossaire, un plan de site, une page contact, accès, etc...
Ces pages n'apparaissent pas dans la navigation chronologique, ne sont pas labelisables, et ne sont pas envoyées par mail aux membres du blog.
Jusqu'ici, les qualités de programmeur demandées ne sont pas exceptionnelles, et c'est d'ailleurs ce que j'avais réalisé en premier au cours des deux premières années d'exploitation du blog "a man's world" à ceci près que j'avais mis en place le biliguisme sur lequel je reviendrai tout à l'heure.
Mais maintenant, nous allons passer le stade supérieur en nous attaquant aux pages listant les articles sous forme d'une succession de petites images avec un sommaire pour chaque image.
2.3 - Pages d'accueil listant les articles
Dans un blog normal, si vous voulez permettre une navigation un peu avancée, vous allez labelliser vos articles et l'utilisateur va pouvoir afficher tous les articles d'un même label. Cependant, tout le contenu de tous les articles va s'afficher et l'utilisateur sera souvent obligé de faire défiler des mètres d'écran avant de tomber sur l'article qui l'intéresse, et même de naviguer vers des pages listant des articles plus anciens
L'idéal, comme dans les magazines en ligne, est d'avoir une liste de de tous les articles avec une image significative et un petit résumé du texte. L'utilisateur pourra alors choisir l'article qui l'intéresse beaucoup plus vite et avec beaucoup moins d'effort.
J'ai réalisé ça en décembre dernier pour mes recettes de cuisine. Le principe est assez simple. Vous programmez un code qui lance des requêtes sur les flux RSS du blog. Le code met ensuite en forme le contenu reçu et génère la liste d'articles avec le petit résumé et la photo. (d'ailleurs, à cette époque, je n'avais pas compris la différence entre les articles et les pages de Blogger et j'avais programmé ça sur une page d'article !)
Si le principe est assez simple, la réalisation n'est pas facile pour autant. Question HTML, CSS et JavaScript, c'est le niveau au dessus de ce qui a été fait précédemment (à part le bilinguisme) ! Ce principe est basé sur l'Ajax, un moyen d'aller chercher du contenu et de le ramener sur une page sans avoir besoin de rafraîchir la page et surtout, sans utiliser de code serveur. Le JavaScript suffit.
L'Ajax est devenu très à la mode en 2005, bien que cette techno soit beaucoup plus ancienne. Avant 2005, elle était disponible mais était très peu utilisée et ne s'appelait pas encore Ajax...
Bref, dans ma première approche utilisant l'Ajax pour faire ma liste de résumé d'articles, j'ai ramené tout le contenu de ma rubrique sur ma page, mais j'ai utilisé les CSS pour n'afficher qu'une partie de ce contenu. C'est un peu du bricolage, mais ça a été très efficace. Le problème de cette approche est que vous ne pouvez pas faire quelque chose de très évolué au niveau de la présentation, et ça se sent bien quand on regarde cette page.
Aujourd'hui, avec ce même principe j'ai fait cette page dynamique pour la rubrique art, mais avec une mise en page beaucoup plus avancée.
Je ramène toujours tout le contenu de la rubrique en Ajax, mais ensuite, je mets ce contenu au format HTML sans l'afficher en le stockant dans un objet JavaScript, puis je vais chercher juste le contenu qui m'intéresse, c'est à dire la photo à utiliser et le sommaire, puis je mets ce contenu en forme et je l'affiche.
Pour le sommaire, je place dans chaque article du texte caché qui n'apparaît pas quand on affiche l'article, mais l'Ajax sait retrouver ce texte et l'affiche quand il s'agit de fournir à l'utilisateur la liste des articles demandée.
Et en faisant ça, j'ai eu une merveilleuse surprise. Pour retrouver le texte caché, j'ai mis une classe CSS sur la balise <p> et je l'ai appelée "summary". Normal et logique.
Et bien quelle ne fut pas mas surprise en affichant la liste des articles sur mon téléphone mais en utilisant cette fois-ci le mode mobile de Blogger qui fait très bien cette liste de m'apercevoir qu'il avait été chercher le texte caché et l'avait utilisé comme sommaire ! Comme quoi en informatique, quand on est organisé et logique, on a souvent de bonne surprises...
D'ailleurs pour faire ces listes d'articles , ça peut être une autre approche d'utiliser le mode mobile pour générer ces listes d'articles. Pour simuler le mode mobile sur Blogger, placer "?m=1" à la fin de votre Url :
Exemple : liste de mes articles de la rubrique Art en mode mobile (avec le texte caché remonté magiquement par Blogger pour le sommaire parce que j'ai eu la bonne idée de nommer la classe correctement...)
Attention ! Même si le JavaScript est de plus en plus utilisé actuellement pour ce genre d'affichage, il reste un langage beaucoup plus difficile à manier et beaucoup moins fiable que le code serveur. Des précautions sont donc à prendre.
Après quelques réflexions et pas mal d'essais je pense que cette implémentation est la plus fiable et la moins gourmande en ressources :
3 - Multilinguisme
Ça, ça a été une autre paire de manches ! Bon, d'abord, pour le multilinguisme dans un blog, aussi loin que je me sois penché sur la question, vous avez trois approches possibles. Je vais les lister par ordre de complexité croissante :
3.1 - Multilinguisme des éléments permanents du site (menu, texte de présentation, etc.)
D'abord, conformément aux usage en cours sur Internet, j'utilise l'URL de la page pour appeler la langue dans laquelle le site doit s'afficher. Je le fais en rajoutant un suffixe "lang=en" pour l'anglais et "lang=fr" pour le français. La langue de base est l'anglais, c'est à dire que s'il n'y a pas de suffixe dans l'URL, le site est censé être en anglais. Quand l'utilisateur clique sur un drapeau correspondant à une langue, un code JavaScript placé au niveau du Widget du menu regarde la langue définie par l'URL de la page avant le clic de l'utilisateur.
Si la langue choisie par l'utilisateur est différente le code javascript redirige l'utilisateur en changeant la langue dans l'URL, et stocke aussi la valeur de la langue dans un champ caché.
A l'affichage un code JavaScript placé au niveau du Widget du menu regarde la langue et si c'est du français, il affiche le menu en français. Un autre code JavaScript placé au niveau du texte de présentation fait la même chose avec le texte de présentation. Ce code regarde dans le champ caché et non dans l'URL, le code est plus simple.
Cela veut dire que j'ai dû implémenter un double menu, un en Français et l'autre en anglais. Même chose pour le texte de présentation.
Il faudrait aussi que je place un code JavaScript dans le footer du site et qui ferait la même chose avec tous les autres éléments du site qui ne sont pas traduits pour l'instant...
Ça c'est pour les éléments affichés en permanence sur le site (Menu, texte de présentation, etc.). Maintenant, regardons ce qui se passe pour un article ou une page, c'est à dire le contenu à afficher.
3.2 Traduction d'un article ou d'une page.
Précédemment, j'ai dit que le changement de langue déclenchait une redirection vers une url où est notifiée la nouvelle langue.
Pour chaque article et chaque page dans mon blog avec la solution de bilinguisme que j'ai choisie, il faut le même article ou la même page traduit dans l'autre langue. Dans l'article ou la page d'une langue, je stocke dans un champ caché l'URL de l'article ou la page correspondant à l'autre langue. Au moment de la redirection et de la redéfinition de l'URL de la nouvelle langue, le code JavaScript placé au niveau du Widget du menu regarde s'il existe une page ou une article correspondant à celle affichée avant la redirection et traduite dans l'autre langue.
Si oui, il redirige l'utilisateur vers la page ou l'article traduit, sinon, il traduit les éléments permanents du site, mais affiche la seule page existante même si elle n'est pas dans la bonne langue. Vous pouvez naviguer sur cette page et voir le bilinguisme d'un article en action.
Difficultés rencontrées dans l'implémentation de cette solution
Le JavaScript comme je l'ai dit plus haut est un langage qui reste peu fiable et extrêmement délicat à manipuler. Il suffit d'inspecter les codes sources d'applications faites par google ou Microsoft pour comprendre la complexité des solutions mise en place pour arriver à des solutions fiables avec ce langage.
Il reste pas mal de bugs à résoudre dans ma solution de multilinguisme. Entre autre :
4 - mises en pages.
J'ai beaucoup travaillé les mises en page pour avoir quelque chose qui ressemble à des magazines papier ou s'inspire des nouveautés du Web :
La maîtrise de la mise en page était aussi un des objectif de départ... Il est en passe d'être atteint aujourd'hui.
En conclusion
J'espère vous avoir démontré la possibilité de faire un site Internet sérieux avec Blogger. Ça ne coûte absolument rien, Blogger est totalement gratuit d'une part et ne vous pollue pas avec de la pub d'autre part. De plus Blogger vous fournit des données statistiques sur la fréquentation de votre blog/site. Elles peuvent être recoupées avec celle de Google analytics. Bizarrement les deux ne donnent pas des résultats exactement identiques sans que je ne sache encore très bien pourquoi...
Tout ceci complète particulièrement bien mon travail d'informaticien spécialiste du produit SharePoint en me permettant de joindre l'agréable à l'utile en révisant mes CSS, mon HTML et mon JavaScript/JQuery tout en travaillant sur le blog.
La tendance en web à l'heure actuelle est de recourir de plus en plus à ces langages aux dépens du code serveur. Et même SharePoint, pourtant réputé gourmand en code serveur prend ce virage et se met à la page de Facebook, Google et autres consommateurs d'Apps. Ce qui fait que ce travail de blogging avancé que je mène actuellement serait en ce moment où Microsoft prend ce virage, à conseiller à tout spécialiste SharePoint...
Comme je l'ai annoncé à la création de ce blog dans la présentation, un des objectifs du projet était de faire d'un blog Blogger un véritable site Internet sous la forme d'un magazine en ligne. Aujourd'hui, toutes les fonctionnalités nécessaires ont été implémentées bien que parfois incomplètes (multilinguisme) ou partiellement présentes (pages listant les articles). Mais aujourd'hui, le travail réalisé est suffisant pour démontrer ces fonctionnalités, exposer leur principe, avec des explications assez techniques pour ceux qui voudraient réaliser un travail similaire.
1 - look and feel
Il n'y a pas trop de traduction pour ce terme des professionnels du web, on pourrait traduire par "apparence et ambiance". C'est ce qui va donner son originalité au blog, au site. Bien sûr, Blogger offre des modèles tout faits et disponibles, mais la première chose qu'un informaticien va pouvoir faire avec Blogger, c'est programmer en HTML et CSS en partant d'un modèle existant pour avoir un blog dont l'aspect ne ressemble à aucun autre.
Ce travail comprend le changement du bandeau, la définition de la largeur des articles, les couleurs des lignes de démarcation des éléments, de leur fond, des caractères des textes, la taille et le style des police, bref, ce qu'on appelle en édition la charte graphique.
C'est aussi ce qu'il y a de plus simple à faire pour un débutant en informatique, et c'est donc par là qu'il faut commencer. Bien sûr, ce travail va durer toute la vie du Blog, son style va continuer à évoluer au fur et à mesure que les goûts en matière de web design du web designer évoluent.
Par exemple je viens seulement, au bout de deux ans, de me rendre compte à quel point les titres des articles étaient "vilains" et de changer leur apparence.
Il y a aussi une question de mode comme partout.
Le web designer va abandonner au fil du temps des choses qui ne se font plus afin que son blog ou son site ne tombe pas dans la catégorie ringard ou "has been", et d'un autre côté il va doter son site ou son blog des dernières nouveautés, comme je viens de le faire avec ma mise en page dynamique inspirée de Pinterest. Aussi il est important quand on tient un blog de beaucoup surfer la toile pour être au goût du jour....
Une chose essentielle avec Blogger est de changer l'en tête (header) et surtout de masquer la navigation Blogger. Voici les liens vers les articles qui expliquent comment faire ça.
2 - Navigation
2.1 Labels
Au départ, la navigation va être possible en utilisant les labels. Taguez vos articles avec des domaines précis pour bien séparer le contenu de votre blog en rubriques.
Par exemple, et c'est pour ça que j'ai choisi de faire de mon blog un magazine, il y a dans "a man's world" des rubriques très différentes : santé, cuisine, art, culture, humeurs... Donc j'ai un label pour chacune de ces rubriques. Et ensuite dans chaque rubrique, j'ai des sous-labels. Par exemple pour la rubrique Art, j'ai une sous rubrique "sanguine" et une autre "esquisse".
La labellisation du contenu est très importante car elle va permettre de faire ensuite une navigation plus avancée...
2.2 Menu
Le premier stade de l'amélioration de la navigation va être de faire un menu. Ce qui est génial avec Blogger, c'est que la plate forme offre des zones de Widget. Un widget est un fragment de code informatique ou de texte que vous allez pouvoir insérer à un endroit précis dans le blog. Il y a une zone prévue pour un menu horizontal.
Je suis allé chercher un fragment de code pour un menu horizontal sur Internet et je l'ai adapté au blog en faisant pointer les rubriques et sous-rubriques du menu sur mes labels principaux et secondaires. Là, le blog a commencé à ressembler à un site Internet.
Cependant, à ce stade, j'ai commis une erreur. J'ai choisi un menu déroulant... Fatale erreur ! Ce genre de menu est devenu problématique avec les écrans tactiles. Par exemple, Internet Explorer en 2013 ne gérait pas les menus déroulants en mode tactile ce qui a gravement pénalisé Microsoft dans la vente de Windows phones. Je ne sais pas s'ils ont réparé ça...
Là, par exemple, avec mon Samsung Galaxy, la navigation par menu déroulant semble prévue, mais ça ne marche pas très bien. Bref, avec l'usage de plus en plus répandu des téléphones et des tablettes pour naviguer sur le web, les menus déroulants sont devenus tout simplement un luxe. Ils facilitent beaucoup la navigation sur un ordinateur en utilisation non tactile, mais ils doivent impérativement être doublés de pages avec des boutons adaptées au mode tactile.
Cette constatation fait une magnifique transition avec ce qui va suivre, c'est à dire la navigation par pages, et l'explication de la différence entre les articles et les pages dans Blogger.
2.2 Navigation tactile
Si vous avez Windows 8 sur votre ordinateur vous avez vu que la navigation est prévue avec de gros pavés adaptés au mode tactile. C'est la fameuse interface Metro (qu'on n'a d'ailleurs plus le droit d'appeler ainsi)...
Voilà la nouvelle façon dont il faut concevoir les blogs et les sites Internet maintenant. Finis les menus avec leur petits liens difficiles à cliquer avec le bout du doigt sur un téléphone, et bienvenue aux pages qui listent les rubriques avec des gros pavés adaptés aux index de nos utilisateurs.
Ce type de page, permettant de bondir de rubriques en rubriques ou de choisir entre plusieurs pages de contenu s'appelle dans notre jargons des landing pages ou pages d'accueil.
Ce qui est génial, c'est que Blogger a prévu ce type de pages.
Supposons que vous ayez besoin d'une page sur laquelle vous allez placer plusieurs pavés tactiles pointant vers les rubriques de votre blog. Vous ne voulez pas que cette page soit envoyée automatiquement par mail aux membres de votre blog le lendemain de sa parution, et vous ne voulez pas non plus que cette page apparaisse dans la liste des articles quand les utilisateurs font une recherche sur un label dans votre blog, ou parcourent tous les articles chronologiquement.
Et bien les fameuses "pages" disponibles dans Blogger servent à ça. C'est avec ces pages que vous allez pouvoir faire les pages d'accueil de vos rubriques, mais aussi, comme dans tout site Internet qui se respecte, une Foire Aux Question, un glossaire, un plan de site, une page contact, accès, etc...
Ces pages n'apparaissent pas dans la navigation chronologique, ne sont pas labelisables, et ne sont pas envoyées par mail aux membres du blog.
Jusqu'ici, les qualités de programmeur demandées ne sont pas exceptionnelles, et c'est d'ailleurs ce que j'avais réalisé en premier au cours des deux premières années d'exploitation du blog "a man's world" à ceci près que j'avais mis en place le biliguisme sur lequel je reviendrai tout à l'heure.
Mais maintenant, nous allons passer le stade supérieur en nous attaquant aux pages listant les articles sous forme d'une succession de petites images avec un sommaire pour chaque image.
2.3 - Pages d'accueil listant les articles
Dans un blog normal, si vous voulez permettre une navigation un peu avancée, vous allez labelliser vos articles et l'utilisateur va pouvoir afficher tous les articles d'un même label. Cependant, tout le contenu de tous les articles va s'afficher et l'utilisateur sera souvent obligé de faire défiler des mètres d'écran avant de tomber sur l'article qui l'intéresse, et même de naviguer vers des pages listant des articles plus anciens
L'idéal, comme dans les magazines en ligne, est d'avoir une liste de de tous les articles avec une image significative et un petit résumé du texte. L'utilisateur pourra alors choisir l'article qui l'intéresse beaucoup plus vite et avec beaucoup moins d'effort.
J'ai réalisé ça en décembre dernier pour mes recettes de cuisine. Le principe est assez simple. Vous programmez un code qui lance des requêtes sur les flux RSS du blog. Le code met ensuite en forme le contenu reçu et génère la liste d'articles avec le petit résumé et la photo. (d'ailleurs, à cette époque, je n'avais pas compris la différence entre les articles et les pages de Blogger et j'avais programmé ça sur une page d'article !)
Si le principe est assez simple, la réalisation n'est pas facile pour autant. Question HTML, CSS et JavaScript, c'est le niveau au dessus de ce qui a été fait précédemment (à part le bilinguisme) ! Ce principe est basé sur l'Ajax, un moyen d'aller chercher du contenu et de le ramener sur une page sans avoir besoin de rafraîchir la page et surtout, sans utiliser de code serveur. Le JavaScript suffit.
L'Ajax est devenu très à la mode en 2005, bien que cette techno soit beaucoup plus ancienne. Avant 2005, elle était disponible mais était très peu utilisée et ne s'appelait pas encore Ajax...
Bref, dans ma première approche utilisant l'Ajax pour faire ma liste de résumé d'articles, j'ai ramené tout le contenu de ma rubrique sur ma page, mais j'ai utilisé les CSS pour n'afficher qu'une partie de ce contenu. C'est un peu du bricolage, mais ça a été très efficace. Le problème de cette approche est que vous ne pouvez pas faire quelque chose de très évolué au niveau de la présentation, et ça se sent bien quand on regarde cette page.
Aujourd'hui, avec ce même principe j'ai fait cette page dynamique pour la rubrique art, mais avec une mise en page beaucoup plus avancée.
Je ramène toujours tout le contenu de la rubrique en Ajax, mais ensuite, je mets ce contenu au format HTML sans l'afficher en le stockant dans un objet JavaScript, puis je vais chercher juste le contenu qui m'intéresse, c'est à dire la photo à utiliser et le sommaire, puis je mets ce contenu en forme et je l'affiche.
Pour le sommaire, je place dans chaque article du texte caché qui n'apparaît pas quand on affiche l'article, mais l'Ajax sait retrouver ce texte et l'affiche quand il s'agit de fournir à l'utilisateur la liste des articles demandée.
Et en faisant ça, j'ai eu une merveilleuse surprise. Pour retrouver le texte caché, j'ai mis une classe CSS sur la balise <p> et je l'ai appelée "summary". Normal et logique.
Et bien quelle ne fut pas mas surprise en affichant la liste des articles sur mon téléphone mais en utilisant cette fois-ci le mode mobile de Blogger qui fait très bien cette liste de m'apercevoir qu'il avait été chercher le texte caché et l'avait utilisé comme sommaire ! Comme quoi en informatique, quand on est organisé et logique, on a souvent de bonne surprises...
D'ailleurs pour faire ces listes d'articles , ça peut être une autre approche d'utiliser le mode mobile pour générer ces listes d'articles. Pour simuler le mode mobile sur Blogger, placer "?m=1" à la fin de votre Url :
Exemple : liste de mes articles de la rubrique Art en mode mobile (avec le texte caché remonté magiquement par Blogger pour le sommaire parce que j'ai eu la bonne idée de nommer la classe correctement...)
Attention ! Même si le JavaScript est de plus en plus utilisé actuellement pour ce genre d'affichage, il reste un langage beaucoup plus difficile à manier et beaucoup moins fiable que le code serveur. Des précautions sont donc à prendre.
Après quelques réflexions et pas mal d'essais je pense que cette implémentation est la plus fiable et la moins gourmande en ressources :
-
Après avoir récupéré le contenu à afficher avec la requête Ajax, n'injectez pas le code dans un bloc <div> avec une méthode innerHTML. utilisez plutôt le DOM avec la succession d'instructions suivante :
document.createElement
appendChild
- Posez vous toujours la question du mode synchrone ou asynchrone pour l'Ajax : Faites votre requête Ajax en mode synchrone pour éviter les mauvaises surprise d'éléments manquants ou dans le mauvais ordre. En tout cas, en présence de bugs bizarres, ou même par curiosité, faites des tests en mode asynchrone et en mode synchrone et choisissez la meilleure solution.
- Faites vos actions de mise en page dynamiques après le chargement de la page. en utilisant la méthode : $(window).load(function(){ }. Vous chargez d'abord votre contenu avec la requête Ajax, puis vous les placez ou les mettez en forme dynamiquement avec un autre morceau de code JavaScript. Au moins l'utilisateur voit la page se charger puis les éléments se placer ou prendre forme, mais il n'attend pas devant une page blanche...
3 - Multilinguisme
Ça, ça a été une autre paire de manches ! Bon, d'abord, pour le multilinguisme dans un blog, aussi loin que je me sois penché sur la question, vous avez trois approches possibles. Je vais les lister par ordre de complexité croissante :
- Pour chaque article, vous écrivez le texte dans toutes les langues de votre choix. Ça ne demande aucune connaissance en informatique, c'est jouable pour des articles au texte court, impensable quand les articles commencent à être longs, à moins de faire deux colonnes pour du biliguisme. Mais ensuite ça pose des problèmes pour la mise en page. Le fait d'utiliser deux colonnes limite fortement les possibilités de mise en page avancée.
- Vous faite un blog par langue et redirigez l'utilisateur sur le blog de sa langue avec le sélecteur de langue (les petits drapeaux). C'est un peu du bricolage et surtout ça multiplie le travail de maintenance. A chaque modification d'un blog (look and feel, charte graphique, page d'accueil ou autre), il faut systématiquement faire le travail sur chaque blog correspondant à une langue. Par contre, question programmation, ça reste très simple, il y a juste le sélecteur de langue à implémenter. Ça devient un petit peu plus complexe quand vous devez rediriger l'utilisateur sur la même page dans une autre langue et non sur la page d'accueil du site de l'autre langue.
-
Enfin, la solution la plus élégante et celle que j'ai choisie, vous faites tout sur le même blog. Vous faites un article par langue et vous redirigez l'utilisateur sur l'article correspondant à sa langue quand il en fait la demande sans oublier de changer la langue des menus, du texte de présentation, bref, de tout le texte qui est continuellement présent sur le blog quand vous naviguez.
Le seul inconvénient de cette solution est d'avoir dans le même blog autant de version de page que de langues. ça devient lourd à gérer pour les utilisateurs qui naviguent en utilisant le côté chronologique du blog parce qu'en naviguant pour trouver l'article désiré, au lieu de scroller une page à chaque fois pour arriver à cet article, ils sont obligés de scroller deux fois plus s'il y a ne serait-ce qu'une seconde langue.
En conclusion, ce type de solution pour le multilinguisme n'est envisageable qui si l'on a mis en place parallèlement une navigation avancée qui permet aux utilisateurs de trouver un article sans avoir à utiliser la navigation chronologique.
3.1 - Multilinguisme des éléments permanents du site (menu, texte de présentation, etc.)
D'abord, conformément aux usage en cours sur Internet, j'utilise l'URL de la page pour appeler la langue dans laquelle le site doit s'afficher. Je le fais en rajoutant un suffixe "lang=en" pour l'anglais et "lang=fr" pour le français. La langue de base est l'anglais, c'est à dire que s'il n'y a pas de suffixe dans l'URL, le site est censé être en anglais. Quand l'utilisateur clique sur un drapeau correspondant à une langue, un code JavaScript placé au niveau du Widget du menu regarde la langue définie par l'URL de la page avant le clic de l'utilisateur.
Si la langue choisie par l'utilisateur est différente le code javascript redirige l'utilisateur en changeant la langue dans l'URL, et stocke aussi la valeur de la langue dans un champ caché.
A l'affichage un code JavaScript placé au niveau du Widget du menu regarde la langue et si c'est du français, il affiche le menu en français. Un autre code JavaScript placé au niveau du texte de présentation fait la même chose avec le texte de présentation. Ce code regarde dans le champ caché et non dans l'URL, le code est plus simple.
Cela veut dire que j'ai dû implémenter un double menu, un en Français et l'autre en anglais. Même chose pour le texte de présentation.
Il faudrait aussi que je place un code JavaScript dans le footer du site et qui ferait la même chose avec tous les autres éléments du site qui ne sont pas traduits pour l'instant...
Ça c'est pour les éléments affichés en permanence sur le site (Menu, texte de présentation, etc.). Maintenant, regardons ce qui se passe pour un article ou une page, c'est à dire le contenu à afficher.
3.2 Traduction d'un article ou d'une page.
Précédemment, j'ai dit que le changement de langue déclenchait une redirection vers une url où est notifiée la nouvelle langue.
Pour chaque article et chaque page dans mon blog avec la solution de bilinguisme que j'ai choisie, il faut le même article ou la même page traduit dans l'autre langue. Dans l'article ou la page d'une langue, je stocke dans un champ caché l'URL de l'article ou la page correspondant à l'autre langue. Au moment de la redirection et de la redéfinition de l'URL de la nouvelle langue, le code JavaScript placé au niveau du Widget du menu regarde s'il existe une page ou une article correspondant à celle affichée avant la redirection et traduite dans l'autre langue.
Si oui, il redirige l'utilisateur vers la page ou l'article traduit, sinon, il traduit les éléments permanents du site, mais affiche la seule page existante même si elle n'est pas dans la bonne langue. Vous pouvez naviguer sur cette page et voir le bilinguisme d'un article en action.
Difficultés rencontrées dans l'implémentation de cette solution
Le JavaScript comme je l'ai dit plus haut est un langage qui reste peu fiable et extrêmement délicat à manipuler. Il suffit d'inspecter les codes sources d'applications faites par google ou Microsoft pour comprendre la complexité des solutions mise en place pour arriver à des solutions fiables avec ce langage.
Il reste pas mal de bugs à résoudre dans ma solution de multilinguisme. Entre autre :
- Quand j'ai implémenté ma solution, je ne m'étais pas rendu compte que Blogger aussi ajoute des suffixes aux URL pour gérer l'utilisation des appareils mobiles. Il faut que mes suffixes de langues puissent interagir avec ceux de Blogger. Ce n'est pas le cas actuellement.
-
Le gros problème du JavaScript est que le code s'exécute dans une chaîne continue. Si le code plante à un endroit, c'est toute la chaîne qui est perdue. Ça m'est arrivé d'écrire des milliers de lignes de code et tout d'un coup plus rien du tout ne marchait pour l'oubli d'UN point virgule !
Mélanger du code JavaScript pour gérer le multilinguisme d'un côté et gérer de l'affichage dynamique d'un autre côté augmente les risques de bugs.
Le code du multilinguisme peut faire planter l'affichage dynamique et vice versa...
Je viens de me rendre compte en testant les fonctions de traductions au fur et à mesure que j'écrivais cet article que la traduction du texte de présentation fonctionne de façon aléatoire en fonction des articles sans que je puise encore savoir pourquoi.
4 - mises en pages.
J'ai beaucoup travaillé les mises en page pour avoir quelque chose qui ressemble à des magazines papier ou s'inspire des nouveautés du Web :
- Ici, c'est une copie de la mise en page d'une rubrique récurrente de cosmopolitain
- Là, c'est quelque chose de très avancé (ça m'a pris pas mal de temps surtout pour la compatibilité cross-browser), qui s'inspire aussi des magazines de mode
- Dernièrement, j'ai poussé le concept jusqu'à mettre en ligne de véritables bandes dessinées numériques...
- Ici, j'essaie de retrouver quelque chose de similaire aux mises en page des livres d'art.
- Enfin, j'ai fait pour cette page dynamique, une mise en page qui plagie purement et simplement Pinterest
La maîtrise de la mise en page était aussi un des objectif de départ... Il est en passe d'être atteint aujourd'hui.
En conclusion
J'espère vous avoir démontré la possibilité de faire un site Internet sérieux avec Blogger. Ça ne coûte absolument rien, Blogger est totalement gratuit d'une part et ne vous pollue pas avec de la pub d'autre part. De plus Blogger vous fournit des données statistiques sur la fréquentation de votre blog/site. Elles peuvent être recoupées avec celle de Google analytics. Bizarrement les deux ne donnent pas des résultats exactement identiques sans que je ne sache encore très bien pourquoi...
Tout ceci complète particulièrement bien mon travail d'informaticien spécialiste du produit SharePoint en me permettant de joindre l'agréable à l'utile en révisant mes CSS, mon HTML et mon JavaScript/JQuery tout en travaillant sur le blog.
La tendance en web à l'heure actuelle est de recourir de plus en plus à ces langages aux dépens du code serveur. Et même SharePoint, pourtant réputé gourmand en code serveur prend ce virage et se met à la page de Facebook, Google et autres consommateurs d'Apps. Ce qui fait que ce travail de blogging avancé que je mène actuellement serait en ce moment où Microsoft prend ce virage, à conseiller à tout spécialiste SharePoint...
