Brevet FR2953311A1 — publié le 20110603

- 1- " Procédé de modification dynamique du rendu d'une page Web." La présente invention se rapporte à un procédé de modification dynamique du rendu d'une page Web générée par un serveur cible. La méthode traditionnelle de réalisation d'un design Web pour un site Web fait intervenir la réalisation de maquettes sous forme d'images par un designer ou artiste Web. Puis, un intégrateur Web convertit ces maquettes dans des fichiers HTML, CSS et images correspondants qui sont ensuite io déployés sur le serveur hébergeant le site Web. Le CSS (« Cascading Style Sheets » en anglais, feuilles de style en cascade en français) est un langage informatique permettant la stylisation hors document. Cela permet de séparer le contenu d'un document de son rendu (style de présentation). On peut ainsi décrire la structure d'un 15 document en HTML puis sa présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment dans un navigateur Web. Cette méthode permet une liberté totale mais n'est pas adaptée dans le cas où une entité développe des solutions automatiques, destinées par 20 exemple au grand public. Ainsi, dans le cas d'un moteur de blog, un blog est automatiquement créé lorsqu'un utilisateur s'inscrit. Comme cet utilisateur ne contrôle pas le serveur hébergeant le blog, il ne peut donc pas modifier le code CSS ou HTML de son blog. De plus, même s'il pouvait accéder au serveur hébergeant, la technicité des langages HTML et CSS ne permettrait 25 pas à la majorité des utilisateurs de réaliser convenablement des modifications. On connaît des systèmes permettant de modifier le rendu d'une page Web au moyen de gabarits ou « templates » en anglais. L'utilisateur a le 30 choix parmi un catalogue de styles prédéfinis, et réalisés au préalable par des développeurs d'une solution globale intégrant le site Web. On connaît également des solutions globales intégrant le serveur hébergeant le site Web en question et permettant à l'utilisateur de choisir lui même certains éléments du design (par exemple taille de police, couleur du 35 texte, couleur de fond d'un élément...). Cependant, de tels systèmes présentent des solutions où l'interface permettant de réaliser des modifications est complètement intégrée au serveur hébergeant le site Web en question. La solution reste donc très spécifique à chaque serveur de pages Web. Une autre limitation est le fait que les modifications possibles sont limitées à des modifications de base selon le langage CSS. La présente invention a pour objectif un procédé autorisant une personnalisation dynamique de pages Web, et pouvant s'appliquer à tout serveur cible générant une page Web avec une structure HTML. Un autre io objectif de l'invention est de permettre de manière simple une personnalisation très aboutie techniquement et riche en effets graphiques. On atteint au moins l'un des objectifs précités avec un procédé pour modifier le rendu d'une page Web générée par un serveur cible et visualisée par un navigateur ; lequel procédé comprend un mode d'édition dans lequel : 15 - on télécharge depuis un serveur applicatif vers un navigateur comprenant un moteur JavaScript un module JavaScript d'édition apte à afficher une interface graphique de modification, le serveur applicatif étant un serveur distant accessible via un réseau de communication de type Internet ; - on analyse ladite page Web de façon à identifier des éléments de 20 ladite page Web susceptibles d'être modifiés dans leur rendue ; - le serveur applicatif génère, grâce à une analyse de la structure HTML et des feuilles de style de la page Web d'origine, des données de style selon le langage CSS (« Cascading Style Sheets », feuilles de style en cascade) en réponse à des consignes d'un utilisateur via l'interface graphique de 25 modification, ces données de style étant sauvegardées à distance ; - on affiche des éléments modifiés dans ladite page Web conformément auxdites données de style. Avec le procédé selon l'invention, on modifie de façon dynamique, en 30 temps réel, la présentation ou le rendu de la structure HTML d'une page Web sans modifier le code source de cette page Web, ce code source étant sauvegardé au sein du serveur cible. De cette façon, on n'altère pas la page Web originelle. Contrairement aux dispositifs de l'art antérieur, le procédé selon la présente invention permet à des utilisateurs, en mode d'édition, de 35 modifier une page Web selon leur inspiration, avec des possibilités infinies, sans jamais dénaturer le code source originel de cette page Web. Par conséquent, il s'agit d'un système générique qui peut s'appliquer à tout serveur cible, il suffit que les pages Web et/ou ce serveur cible soient paramétrés pour faire appel au serveur application en mode d'édition et en mode de consultation. En effet, selon un mode de mise en oeuvre avantageux de l'invention, le procédé comprend en outre un mode de consultation dans lequel, à chaque consultation de ladite page Web générée par le serveur cible, on télécharge et on applique depuis un serveur Web lesdites données de style de façon à afficher les éléments tels que modifiés lors du mode d'édition. De préférence, io on utilise un navigateur équipé d'un moteur JavaScript de telle sorte qu'à chaque consultation de ladite page Web, on télécharge depuis le serveur applicatif vers le moteur JavaScript un module JavaScript de consultation apte à appliquer lesdites données de style de façon à afficher les éléments tels que modifiés lors du mode d'édition. Il est également possible de 15 paramétrer le serveur cible pour se passer du module JavaScript de consultation en mode de consultation. Ainsi, le mode d'édition peut correspondre à un mode limité à certains utilisateurs, alors que le mode de consultation est ouvert à tout utilisateur. L'invention peut par exemple s'appliquer à la gestion d'un blog où le 20 propriétaire a accès au mode d'édition et les visiteurs au mode de consultation. Pour fournir l'accès au mode d'édition, on peut avantageusement prévoir que la page Web générée comporte un lien dynamique permettant d'accéder au mode d'édition après identification de l'utilisateur. C'est ce type de paramétrage qui peut être inséré dans toutes les 25 pages « modifiables » du serveur cible. Une page normale « modifiable » s'ouvrira par défaut en mode de consultation. Par ailleurs, pour une même page Web générée par le serveur cible, il peut exister différents rendus, différents styles de présentation, chaque style étant concrétisé par un fichier CSS. Le contenu du serveur cible générant la 30 page Web n'est pas modifié. Le serveur de sauvegarde peut contenir des fichiers CSS pour différentes pages du serveur cible et différentes pages d'autres serveurs. 35 L'analyse de détection des éléments modifiables peut consister à : 2953311 - 4- - détecter la structure HTML, les attributs des tags HTML, et les données de style selon le langage CSS de tout ou partie de la page Web, - identifier les données de style prises en compte par le navigateur, et - identifier les éléments de la page Web susceptibles d'être modifiés 5 graphiquement, en fonction du résultat des deux étapes précédentes. On peut ainsi parcourir toute la page Web et identifier les éléments susceptibles d'être modifiés graphiquement. Cela consiste notamment à décomposer la page Web selon sa structure HTML, ses feuilles de style et ses io images. Selon un autre mode avantageux de l'invention, on peut considérer uniquement les éléments de la page Web comportant un paramètre prédéfini par le serveur cible. Ce paramètre peut être un tag ou un symbole invisible pour le navigateur mais détectable par le module JavaScript d'édition et le serveur applicatif lors de l'analyse. Dans ce cas, la page Web générée par le 15 serveur cible comporte dès l'origine ces paramètres. Avantageusement, pour que le navigateur tienne compte des modifications et les fasse apparaître, les données de style générées par le serveur applicatif comprennent des données de style prioritaires par rapport 20 à des données de style équivalentes de la page Web générée par le serveur cible. En d'autres termes, les données de style modifiant les éléments de la page Web sont prioritaires aux données de style d'origine. Selon une caractéristique avantageuse de l'invention, la page Web 25 comprend des tags HTML supplémentaires dits tags de décoration destinés à permettre la réalisation d'effets graphiques complexes, non atteignables uniquement par des modifications de données CSS. Les données de style générées par le serveur applicatif peuvent comprendre des données de style aptes à modifier le rendu graphique de ces tags HTML de décoration. 30 Ces tags HTML de décoration peuvent comprendre des tags générés dès l'origine par le serveur cible et/ou des tags générés par le module JavaScript d'édition lors de l'analyse de la page Web en mode d'édition, et par le module JavaScript de consultation en mode de consultation. 35 Avec une telle réalisation, le procédé selon l'invention permet de créer des éléments graphiques inaccessibles uniquement par les feuilles de style selon le langage CSS. Pour ce faire, l'invention propose d'insérer par exemple des tags invisibles autour des éléments identifiés comme modifiables, puis de les activer en fonction des consignes de l'utilisateur. Cette activation peut consister à appliquer des données de style relatives à la mise en couleur ou à l'insertion d'une image pour le fond de ces tags initialement invisibles. En d'autres termes, les tags HTML de décoration peuvent comprendre des tags invisibles que les données de style graphiques sont aptes à rendre visibles de façon à créer un effet graphique. On peut notamment envisager le io fait que les tags HTML de décoration soient des tags de type , , , ou autre. Selon un autre mode de réalisation avantageux de l'invention, le procédé comprend en outre une étape en mode d'édition au cours de laquelle 15 le serveur applicatif : - génère des instructions de création d'éléments graphiques en temps réel en réponse à des consignes d'un utilisateur via l'interface de modification, - transmet ces instructions vers un moteur graphique qui génère ces 20 éléments graphiques sous la forme d'images au format PNG, GIF, JPEG ou SVG, - génère des données de style spécifiques ayant pour fonction d'activer l'affichage de ces éléments graphiques sur la page Web. Ce mode de réalisation permet de créer à la volée des images que l'on 25 peut insérer dans la page Web. Ces éléments graphiques peuvent comprendre au moins l'un des éléments parmi des bordures de toute forme, de toute couleur en mode dégradé ou non, avec ou sans effet d'ombre. D'autres avantages et caractéristiques de l'invention apparaîtront à 30 l'examen de la description détaillée d'un mode de mise en ?uvre nullement limitatif, et des dessins annexés, sur lesquels : La figure 1 est une vue schématique illustrant l'appel d'un module JavaScript d'édition sur une page Web selon l'invention en mode d'édition ; La figure 2 est une vue schématique illustrant l'envoi des consignes de 35 modification vers le serveur applicatif selon l'invention en mode d'édition ; 5 La figure 3 est une vue schématique illustrant la mise en place des modifications selon l'invention en mode d'édition ; et La figure 4 est une vue schématique illustrant l'affichage de la page Web selon l'invention en mode de consultation ; Bien que l'invention n'y soit pas limitée, on voit décrire un exemple de réalisation du procédé selon l'invention appliqué à la modification d'un paragraphe sur une page Web à travers des figures schématiques où seuls quelques éléments principaux sont représentés d'une figure à l'autre. i0 La figure 1 est une vue schématique sur laquelle on distingue le serveur cible A produisant le code source d'une page Web F qui est accessible depuis un réseau de communication de type Internet au moyen d'un navigateur B équipé d'un moteur JavaScript C. Le navigateur B est celui d'un 15 utilisateur ayant par exemple été préalablement identifié au sein du serveur cible A. L'identification permet à l'utilisateur d'accéder au mode édition lors de l'accès à la page Web F. Plus précisément, lorsque l'utilisateur accède à la page Web F via son navigateur B, l'ouverture de cette page Web F, selon l'étape 1 de la figure 1, active un lien L vers un serveur applicatif D selon 20 l'étape 2 de la figure 1. Le serveur applicatif D est un serveur distant accessible via Internet. À l'étape 3, le serveur applicatif D transmet vers la page Web F un module JavaScript d'édition qui va être exécuté par le moteur JavaScript C. 25 Sur la figure 2, on voit que le module JavaScript d'édition a mis en place une interface graphique de modification H qui va permettre à l'utilisateur de modifier certains éléments de la page Web F. Le module JavaScript d'édition, avec l'aide du serveur applicatif, analyse et identifie les éléments de la page Web F susceptibles d'être modifiés selon l'invention. 30 Dans le cas présent, l'élément modifiable sur cette page Web F est le paragraphe P ainsi que le contour de ce paragraphe P. En fait, à partir du résultat de l'analyse, le module JavaScript d'édition a introduit des tags HTML supplémentaires mais invisibles, il s'agit de tags HTML de décoration qui sont très schématiquement représentés sur la figure 2 par les ensembles J. Avec 35 l'interface graphique de modification, l'utilisateur peut paramétrer et mettre en évidence tout ou partie de ces ensembles I de façon à constituer des éléments graphiques. Supposons que l'utilisateur souhaite modifier le paragraphe P écrit en gras vers une écriture en italique avec un contour tout autour de ce paragraphe P. Pour ce faire, il spécifie ces modifications au moyen notamment d'une souris via l'interface graphique de modification H. Ce dernier, génère à étape 4 des consignes qui sont envoyées vers le serveur applicatif D. Ces consignes sont interprétées puis traitées de façon à générer à l'étape 5 des données de style qui sont sauvegardés au sein du serveur de sauvegarde E. Ces données de style sont des codes CSS comprenant des données de style relatives à la police du paragraphe P, ainsi que des données io de style permettant de « remplir » les tags HTML J de façon à constituer un élément graphique. Le serveur de sauvegarde E renferme donc une information sur les tags HTML introduits par le module JavaScript d'édition et qui sont paramétrés. D'une façon générale, la génération des données de style par le 15 serveur applicatif peut se faire au moyen d'une analyse de génération au cours de laquelle le serveur applicatif utilise les feuilles de style d'origine de la page Web ainsi que la structure HTML transmises par le module d'édition de façon à : - identifier quelles sont les parties des feuilles de style d'origine et/ou 20 de la structure HTML qui doivent être modifiées en fonction des consignes de l'utilisateur, - élaborer des données de style aptes à permettre ces modifications, en tenant compte de la structure HTML et des feuilles de style d'origine, et - affecter à ces données de style une priorité qui est supérieure aux 25 feuilles de style d'origine. En mode d'édition, au moins une partie des analyses de détection et/ou de génération est réalisée par le serveur applicatif. De préférence, tout ou une grande partie de cette analyse est réalisée par le serveur applicatif. Cela permet de mettre à profit toute la puissance disponible du serveur applicatif 30 pour mener à bien une analyse poussée et approfondie. Mais on peut également envisager qu'au moins une partie des analyses de détection et/ou de génération est réalisée par le module JavaScript d'édition. En complément de ce qui précède, lorsque les consignes de l'utilisateur 35 nécessitent la création d'une image graphique, le serveur applicatif D crée de façon dynamique des instructions qu'il envoie à l'étape 51 vers un moteur graphique G. Ce dernier génère une image graphique qui est ensuite envoyée vers le serveur de sauvegarde E à l'étape 52 sous le format PNG, JPEG ou SVG. Sur la figure 3, on voit qu'à l'étape 6 les données de style relatives à la police du paragraphe P sont transmises depuis le serveur de sauvegarde E vers la page Web F. Ces données de style ou codes CSS possèdent une priorité qui est supérieure à la priorité des codes CSS d'origine pour le paragraphe P. De cette façon, le navigateur applique les données de style permettant d'afficher le paragraphe P en italique et non en gras comme à io l'origine. A l'étape 7, on transmet depuis le serveur de sauvegarde E vers la page Web F des données de style permettant de « remplir » les tags HTML J de façon à constituer un contour avec des bords arrondis tout autour du paragraphe P. 15 De préférence, les étapes 6 et 7 sont réalisées simultanément. A l'étape 53, on transmet depuis le serveur de sauvegarde E vers la page Web F l'image I qui a été élaborée à la volée par le moteur graphique G. Il peut avantageusement s'agir d'une image représentant un bord arrondi. 20 La figure 4 représente l'affichage de la page Web en mode consultation selon l'invention. Dans ce mode de consultation, l'utilisateur n'étant pas identifié, le lien L fait appel au module JavaScript de consultation et non au module JavaScript d'édition. 25 A l'étape 8, le serveur cible génère la page Web F qui est identique à la page Web générée lors de l'étape 1. Mais lors de l'affichage de cette page Web F, le lien L fait appel à l'étape 9 au serveur applicatif D qui transmet à l'étape 10 un module JavaScript de consultation. Ce module JavaScript de consultation génère des tags HTML J comme sur la figure 2, puis accède au 30 serveur de sauvegarde E de façon à télécharger puis appliquer les données de style conformément aux étapes 6, 7 et 53 de la figure 3 relative au mode d'édition. L'utilisateur observe donc de façon quasi instantanée une page Web F modifiée conformément aux consignes en mode d'édition. Cette modification est faite sans modification du code source de la page Web au 35 sein du serveur cible. Le serveur applicatif et le serveur de sauvegarde peuvent servir pour d'autres pages Web du serveur cible, mais également pour d'autres pages Web d'autres serveurs. A la place d'un serveur applicatif et d'un serveur de sauvegarde, on 5 peut prévoir un seul serveur applicatif qui sauvegarde également l'ensemble des données de style. Bien sûr, l'invention n'est pas limitée aux exemples qui viennent d'être décrits et de nombreux aménagements peuvent être apportés à ces exemples io sans sortir du cadre de l'invention. On peut envisager différents processus permettant d'accéder au mode d'édition. On peut par ailleurs prévoir un serveur applicatif scindé en deux serveurs, un premier pour distribuer des modules JavaScript, et un second pour générer les données de style. REVENDICATIONS1. Procédé pour modifier le rendu d'une page Web générée par un serveur cible et visualisée par un navigateur; lequel procédé comprend un mode d'édition dans lequel : - on télécharge depuis un serveur applicatif vers un moteur JavaScript un module JavaScript d'édition apte à afficher une interface graphique de modification, le serveur applicatif étant un serveur distant accessible via un réseau de communication de type Internet ; io - on analyse ladite page Web de façon à identifier des éléments de ladite page Web susceptibles d'être modifiés dans leur rendu ; - le serveur applicatif génère, grâce à une analyse de la structure HTML et des feuilles de style de la page Web d'origine, des données de style selon le langage CSS (« Cascading Style Sheets », feuilles de style en cascade) en 15 réponse à des consignes d'un utilisateur via l'interface graphique de modification, ces données de style étant sauvegardées à distance; - on affiche des éléments modifiés dans ladite page Web conformément auxdites données de style. 20 2. Procédé selon la revendication 1, caractérisé en ce qu'il comprend en outre un mode de consultation dans lequel, à chaque consultation de ladite page Web générée par le serveur cible, on télécharge et on applique depuis le serveur applicatif lesdites données de style de façon à afficher les éléments tels que modifiés lors du mode d'édition. 25 3. Procédé selon la revendication 2, caractérisé en ce qu'on utilise un navigateur équipé d'un moteur JavaScript de telle sorte qu'à chaque consultation de ladite page Web, on télécharge depuis le serveur applicatif vers le moteur JavaScript un module JavaScript de consultation apte à 30 appliquer lesdites données de style de façon à afficher les éléments tels que modifiés lors du mode d'édition. 4. Procédé selon l'une quelconque des revendications précédentes, caractérisé en ce que l'analyse de détection consiste à : 35 - détecter la structure HTML, les attributs des tags HTML, et les données de style selon le langage CSS de tout ou partie de la page Web, 11 - identifier les données de style prises en compte par le navigateur, et - identifier les éléments de la page Web susceptibles d'être modifiés graphiquement, en fonction du résultat des deux étapes précédentes. 5. Procédé selon l'une quelconque des revendications précédentes, caractérisé en ce qu'au cours de l'analyse de détection, on considère uniquement les éléments de la page Web comportant un paramètre prédéfini par le serveur cible. io 6. Procédé selon l'une quelconque des revendications précédentes, caractérisé en ce que lors de la génération des données de style par le serveur applicatif, on réalise une analyse de génération au cours de laquelle le serveur applicatif utilise les feuilles de style d'origine de la page Web ainsi que la structure HTML transmises par le module d'édition de façon à : 15 - identifier quelles sont les parties des feuilles de style d'origine et/ou de la structure HTML qui doivent être modifiées en fonction des consignes de l'utilisateur, - élaborer des données de style aptes à permettre ces modifications, en tenant compte de la structure HTML et des feuilles de style d'origine, et 20 - affecter à ces données de style une priorité qui est supérieure aux feuilles de style d'origine. 7. Procédé selon la revendication 6, caractérisé en ce qu'au moins une partie des analyses de détection et/ou de génération est réalisée par le serveur 25 applicatif. 8. Procédé selon l'une quelconque des revendications précédentes, caractérisé en ce qu'au moins une partie des analyses de détection et/ou de génération est réalisée par le module JavaScript d'édition. 30 9. Procédé selon l'une quelconque des revendications précédentes, caractérisé en ce que la page Web comprend des tags HTML supplémentaires dits tags de décoration destinés à permettre la réalisation d'effets graphiques complexes, non atteignables uniquement par des modifications de données 35 CSS. 12 10. Procédé selon la revendication 9, caractérisé en ce que les tags HTML de décoration comprennent des tags générés dès l'origine par le serveur cible. 11. Procédé selon les revendications 9 ou 10, et 2, caractérisé en ce que les tags HTML de décoration comprennent des tags générés par le module JavaScript d'édition lors de l'analyse de la page Web en mode d'édition, et par le module JavaScript de consultation en mode de consultation. 12. Procédé selon l'une quelconque des revendications 9-11, caractérisé en ce io que les données de style générées par le serveur applicatif comprennent des données de style aptes à modifier le rendu graphique des tags HTML de décoration. 13. Procédé selon l'une quelconque des revendications 9-12, caractérisé en ce 15 que les tags HTML de décoration comprennent des tags invisibles que les données de style graphiques sont aptes à rendre visibles de façon à créer un effet graphique. 14. Procédé selon l'une quelconque des revendications 9-11, caractérisé en ce 20 que les tags HTML de décoration comprennent des tags de type , ou . 15. Procédé selon l'une quelconque des revendications précédentes, caractérisé en ce qu'il comprend en outre une étape en mode d'édition au 25 cours de laquelle le serveur applicatif : - génère des instructions de création d'éléments graphiques en temps réel en réponse à des consignes d'un utilisateur via l'interface de modification, - transmet ces instructions vers un moteur graphique qui génère ces éléments graphiques sous la forme d'images au format PNG, GIF, JPEG ou 30 SVG, - génère des données de style spécifiques ayant pour fonction d'activer l'affichage de ces éléments graphiques sur la page Web. 16. Procédé selon la revendication 15, caractérisé en ce que les éléments 35 graphiques comprennent au moins l'un des éléments parmi des bordures detoute forme, de toute couleur en mode dégradé ou non, avec ou sans effet d'ombre.