WO2011067531A1 - Procede de modification dynamique du rendu d'une page web - Google Patents

Procede de modification dynamique du rendu d'une page web Download PDF

Info

Publication number
WO2011067531A1
WO2011067531A1 PCT/FR2010/052573 FR2010052573W WO2011067531A1 WO 2011067531 A1 WO2011067531 A1 WO 2011067531A1 FR 2010052573 W FR2010052573 W FR 2010052573W WO 2011067531 A1 WO2011067531 A1 WO 2011067531A1
Authority
WO
WIPO (PCT)
Prior art keywords
web page
style data
application server
style
elements
Prior art date
Application number
PCT/FR2010/052573
Other languages
English (en)
Inventor
Jean-Noel Rivasseau
Original Assignee
Shoopz
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shoopz filed Critical Shoopz
Publication of WO2011067531A1 publication Critical patent/WO2011067531A1/fr

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Definitions

  • the present invention relates to a method for dynamically modifying the rendering of a web page generated by a target server.
  • the traditional method of creating a web design for a website involves making models in the form of images by a web designer or artist. Then, a web integrator converts these layouts into corresponding HTML, CSS, and images that are then deployed to the server hosting the Web site.
  • Cascading Style Sheets is a computer language for off-paper stylization. This makes it possible to separate the contents of a document from its rendering (presentation style). It is thus possible to describe the structure of a document in HTML then its presentation in a separate CSS style sheet. Styles are applied at the last moment in a web browser.
  • This method allows a total freedom but is not adapted in the case where an entity develops automatic solutions, intended for example to the general public.
  • a blog engine a blog is automatically created when a user registers. Since this user does not control the server hosting the blog, he can not modify the CSS or HTML code of his blog. In addition, even if he could access the hosting server, the technicality of the HTML and CSS languages would not allow the majority of users to properly make changes.
  • the present invention aims a method allowing dynamic personalization of web pages, and can be applied to any target server generating a web page with an HTML structure. Another objective of the invention is to allow in a simple way a customization very technically accomplished and rich in graphic effects.
  • At least one of the above-mentioned objectives is achieved with a method for modifying the rendering of a web page generated by a target server and viewed by a browser; which method comprises an editing mode in which:
  • the web page is analyzed so as to identify elements of said web page that may be modified in their rendering;
  • the application server generates, using an analysis of the HTML structure and style sheets of the original web page, CSS style data (Cascading Style Sheets) in response to instructions from a user via the modification graphical interface, these style data being saved remotely;
  • the presentation or the rendering of the HTML structure of a web page is modified dynamically, in real time, without modifying the source code of this web page, this source code being saved within the target server. In this way, we do not alter the original Web page.
  • the method according to the present invention allows users, in editing mode, to modify a web page according to their inspiration, with infinite possibilities, without ever distorting the original source code of this page. Web. Therefore, this is a generic system that can be applied to any target server, it is sufficient that the web pages and / or this target server are set to use the application server in edit mode and in mode of consultation.
  • the method further comprises a consultation mode in which, at each consultation of said web page generated by the target server, is downloaded and applied from a web server said style data so as to display the items as modified during the editing mode.
  • a browser equipped with a JavaScript engine is used so that, at each consultation of said web page, a JavaScript consultation module is downloaded from the application server to the JavaScript engine and able to apply the said style data to display items as modified during edit mode. It is also possible to set the target server to dispense with the JavaScript consultation module in consultation mode.
  • the editing mode may correspond to a mode limited to certain users, while the consultation mode is open to any user.
  • the invention may for example apply to the management of a blog where the owner has access to the editing mode and the visitors to the consultation mode.
  • the generated web page has a dynamic link to access the edit mode after identification of the user. This is the type of setting that can be inserted into all "modifiable" pages of the target server. A normal "editable" page will open by default in consultation mode.
  • the backup server can contain CSS files for different pages of the target server and different pages of other servers.
  • the detection analysis of modifiable elements may consist of - detect HTML structure, attributes of HTML tags, and style data according to the CSS language of all or part of the Web page,
  • the Web page generated by the target server includes these parameters from the beginning.
  • the style data generated by the application server includes priority style data relative to equivalent style data of the web page generated by the target server.
  • the style data that modifies the elements of the web page take precedence over the original style data.
  • the web page includes additional HTML tags called decoration tags intended to allow the realization of complex graphic effects, not attainable solely by changes in CSS data.
  • the style data generated by the application server may include style data capable of modifying the graphic rendering of these decoration HTML tags.
  • decoration HTML tags may include tags originally generated by the target server and / or tags generated by the editing JavaScript module when parsing the web page in edit mode, and by the module JavaScript consultation in consultation mode.
  • the method according to the invention makes it possible to create graphic elements inaccessible only by the style sheets. according to the CSS language.
  • the invention proposes to insert, for example, invisible tags around the elements identified as modifiable, then to activate them according to the instructions of the user. This activation can consist of applying style data relating to the coloring or insertion of an image for the background of these initially invisible tags.
  • decorating HTM tags L can include invisible tags that the graphic style data is able to render visible to create a graphic effect.
  • the decoration HTML tags are tags of the type ⁇ DIV>, ⁇ SPAN>, ⁇ IMG>, or other.
  • the method further comprises a step in editing mode during which the application server:
  • These graphic elements may comprise at least one of the elements among borders of any shape, of any color in degraded mode or not, with or without shadow effect.
  • Figure 1 is a schematic view illustrating the call of a JavaScript editing module on a web page according to the invention in edit mode;
  • FIG. 2 is a schematic view illustrating the sending of the modification instructions to the application server according to the invention in edit mode;
  • Figure 3 is a schematic view illustrating the implementation of the modifications according to the invention in editing mode;
  • Figure 4 is a schematic view illustrating the display of the web page according to the invention in consultation mode
  • FIG. 1 is a diagrammatic view on which the target server A producing the source code of a Web page F is distinguished which is accessible from an Internet type communication network by means of a browser B equipped with a JavaScript engine C
  • Browser B is that of a user having, for example, been previously identified within the target server A. The identification allows the user to access the edit mode when accessing the Web page F. More precisely when the user accesses the web page F via his browser B, the opening of this web page F, according to step 1 of FIG. 1, activates an link L towards an application server D according to step 2 of Figure 1.
  • the application server D is a remote server accessible via the Internet.
  • the application server D transmits to the Web page F a JavaScript editing module that will be executed by the JavaScript engine C.
  • the JavaScript editing module has set up an H modification graphical interface that will allow the user to modify certain elements of the web page F.
  • the editing JavaScript module analyzes and identifies the elements of the web page F that can be modified. to be modified according to the invention.
  • the editable element on this Web page F is the paragraph P and the outline of this paragraph P.
  • the JavaScript editing module has introduced HTML tags additional but invisible, these are HTML decoration tags that are very schematically represented in Figure 2 by sets J. With the modification graphical interface, the user can set and highlight all or part of these sets I so as to constitute graphic elements.
  • step 4 instructions that are sent to the application server D. These instructions are interpreted and then processed so as to generate in step 5 style data that is saved within the backup server E.
  • This data CSS style codes include style data relating to the font of paragraph P, as well as style data for "filling" HTML tags J to form a graphic element.
  • the backup server E therefore contains information on the HTML tags introduced by the JavaScript editing module and which are parameterized.
  • the generation of style data by the application server can be done by means of a generation analysis during which the application server uses the original style sheets of the web page as well as the structure HTML transmitted by the editing module so as to:
  • At least part of the detection and / or generation analyzes is performed by the application server.
  • all or a large part of this analysis is performed by the application server. This makes it possible to use all the available power of the application server to carry out a thorough and thorough analysis. But we can also consider that at least part of the detection and / or generation analysis is performed by the JavaScript editing module.
  • the application server D dynamically creates instructions that it sends in step 51 to an engine graph G.
  • the latter generates a graphic image which is then sent to the backup server E in step 52 in the PNG, JPEG or SVG format.
  • step 6 the style data relating to the font of the paragraph P is transmitted from the backup server E to the web page F.
  • This style data or CSS codes have a priority that is greater than the original CSS priority for paragraph P. In this way, the browser applies the style data to display paragraph P in italics rather than in bold as originally.
  • step 7 transfer from the backup server E to the web page F style data to "fill" the HTML tags J to form a contour with rounded edges around the paragraph P.
  • steps 6 and 7 are performed simultaneously.
  • step 53 the image I is transmitted from the backup server E to the web page F which has been generated on the fly by the graphic engine G. It may advantageously be an image representing a rounded edge .
  • Figure 4 shows the display of the web page in consultation mode according to the invention.
  • the link L uses the consultation JavaScript module and not the editing JavaScript module.
  • step 8 the target server generates the web page F which is identical to the web page generated in step 1. But when this web page F is displayed, the link L uses the step 9 to the application server D which transmits in step 10 a JavaScript module consultation.
  • This JavaScript lookup module generates HTML tags J as in FIG. 2, then accesses the backup server E so as to download and then apply the style data in accordance with steps 6, 7 and 53 of FIG. edition.
  • the user therefore observes almost instantaneously a Web page F modified according to the instructions in edit mode. This modification is made without modification of the source code of the Web page within the target server.
  • the application server and the backup server can be used for other web pages of the target server, but also for other web pages of other servers.

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

L'invention concerne 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 accessible par un moteur JavaScript dans lequel; on télécharge depuis un serveur applicatif vers le 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 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 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.

Description

" 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 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 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 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 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 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 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 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 :
- 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 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 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 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 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 œuvre 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, 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 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 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 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 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.
L'analyse de détection des éléments modifiables peut consister à - 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 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 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 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 à 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 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.
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.
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 HTM L 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 fait que les tags HTML de décoration soient des tags de type <DIV>, <SPAN >, <IMG>, 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 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
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 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 à 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 modification vers le serveur applicatif selon l'invention en mode d'édition ; 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.
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 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 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. 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. 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 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 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 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 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 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 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 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 à 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.
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.
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.
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 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 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 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 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.

Claims

REVENDICATIONS
1. 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 ;
- 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 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.
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.
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 à 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 à :
- 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
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.
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 à :
- 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 en fonction des consignes de l'utilisateur, 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 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 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.
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 CSS.
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 3, 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 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 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 que les tags HTML de décoration comprennent des tags de type <DIV>, <SPAN> ou <IMG> .
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 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
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 graphiques comprennent 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.
PCT/FR2010/052573 2009-12-01 2010-11-30 Procede de modification dynamique du rendu d'une page web WO2011067531A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
FR0958557 2009-12-01
FR0958557A FR2953311B1 (fr) 2009-12-01 2009-12-01 Procede de modification dynamique du rendu d'une page web.

Publications (1)

Publication Number Publication Date
WO2011067531A1 true WO2011067531A1 (fr) 2011-06-09

Family

ID=42106085

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/FR2010/052573 WO2011067531A1 (fr) 2009-12-01 2010-11-30 Procede de modification dynamique du rendu d'une page web

Country Status (2)

Country Link
FR (1) FR2953311B1 (fr)
WO (1) WO2011067531A1 (fr)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103064849A (zh) * 2011-10-19 2013-04-24 腾讯科技（深圳）有限公司 一种层叠样式表处理方法和装置
CN103595742A (zh) * 2012-08-14 2014-02-19 阿里巴巴集团控股有限公司 调试网页css的方法及装置
EP3693872A1 (fr) * 2019-02-08 2020-08-12 Oracle International Corporation Personnalisation et rendu côté client de contenu web
CN112130853A (zh) * 2020-08-25 2020-12-25 北京思特奇信息技术股份有限公司 一种实现前端h5业务能力开放的方法及系统
CN112364281A (zh) * 2020-10-30 2021-02-12 深圳点猫科技有限公司 一种基于浏览器的网页编辑可视化实现方法、装置及设备

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113868565B (zh) * 2021-09-23 2024-05-24 深圳市腾讯网域计算机网络有限公司 皮肤样式的文件编辑方法及装置

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060161841A1 (en) * 2004-12-02 2006-07-20 Yoshio Horiuchi Web page authoring apparatus, web page authoring method, and program
US20080141116A1 (en) * 2006-12-06 2008-06-12 Microsoft Corporation Editing web pages via a web browser

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060161841A1 (en) * 2004-12-02 2006-07-20 Yoshio Horiuchi Web page authoring apparatus, web page authoring method, and program
US20080141116A1 (en) * 2006-12-06 2008-06-12 Microsoft Corporation Editing web pages via a web browser

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
REES M J: "Implementing Responsive Lightweight In-Page Editing", 2000, AusWeb2K - The Sixth Australian World Wide Web Conference, Rihga Colonial Club Resort, Cairns., pages 1 - 15, XP002579885, Retrieved from the Internet <URL:http://web.archive.org/web/20010412091926/http://ausweb.scu.edu.au/aw2k/papers/rees/paper.html> [retrieved on 20100427] *

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103064849A (zh) * 2011-10-19 2013-04-24 腾讯科技（深圳）有限公司 一种层叠样式表处理方法和装置
CN103595742A (zh) * 2012-08-14 2014-02-19 阿里巴巴集团控股有限公司 调试网页css的方法及装置
CN103595742B (zh) * 2012-08-14 2017-01-18 阿里巴巴集团控股有限公司 调试网页css的方法及装置
EP3693872A1 (fr) * 2019-02-08 2020-08-12 Oracle International Corporation Personnalisation et rendu côté client de contenu web
US11068643B2 (en) 2019-02-08 2021-07-20 Oracle International Corporation Client-side customization and rendering of web content
CN112130853A (zh) * 2020-08-25 2020-12-25 北京思特奇信息技术股份有限公司 一种实现前端h5业务能力开放的方法及系统
CN112364281A (zh) * 2020-10-30 2021-02-12 深圳点猫科技有限公司 一种基于浏览器的网页编辑可视化实现方法、装置及设备

Also Published As

Publication number Publication date
FR2953311B1 (fr) 2018-02-09
FR2953311A1 (fr) 2011-06-03

Similar Documents

Publication Publication Date Title
WO2011067531A1 (fr) Procede de modification dynamique du rendu d&#39;une page web
US9569865B2 (en) Supporting color fonts
US20120259964A1 (en) Cloud computing method capable of hiding real file paths
US20050229101A1 (en) Remote web site editing in a web browser without external client software
US20080209311A1 (en) On-line digital image editing with wysiwyg transparency
JP2005505825A (ja) コンテキスト適応ウェブブラウザ
US20150309993A1 (en) Agile Enterprise Globalization
WO2007051784A1 (fr) Procede d&#39;optimisation de rendu d&#39;une scene multimedia, programme, signal, support de donnees, terminal et procede de reception correspondants
FR2861935A1 (fr) Procede et systeme de diffusion de documents vers des terminaux disposant de capacites d&#39;affichage limitees, tels que des terminaux mobiles
EP1866798B1 (fr) Méthode dynamique de rendu visuel de fenêtres d&#39;affichage et de saisie de données sur un écran d&#39;ordinateur
WO2008095800A1 (fr) Procede de transmission d&#39;au moins un contenu representatif d&#39;un service, depuis un serveur vers un terminal, dispositif et produit programme d&#39;ordinateur correspondants
EP2219113B1 (fr) Procédé d&#39;affichage, dispositif et produit programme d&#39;ordinateur correspondant
FR2810131A1 (fr) Systeme de publication de donnees multimedias
US8861017B2 (en) Web widget fir formatting web content
FR2800888A1 (fr) Methode et systeme pour permettre aux utilisateur de selectionner un modele a partir d&#39;un serveur web
EP1494116A1 (fr) Procédé et dispositif pour l&#39;interfaçage graphique
WO2001009763A1 (fr) Procede et systeme de creation, de gestion et de consultation de sites web
EP1194868B1 (fr) Methode et systeme de creation de documents electroniques - auto-publiants et adaptatifs
FR2913276A1 (fr) Procede et dispositif de communication.
CH715553B1 (fr) Procédé de communication d&#39;informations à travers un réseau de télécommunication.
EP3262536A1 (fr) Procédé de téléchargement accéléré d&#39;une page web vers un terminal de communication
EP1458135B1 (fr) Procédé de test de l&#39;état de connexion entre un client et un serveur sur un réseau numérique
FR2830349A1 (fr) Procede et dispositif d&#39;execution d&#39;une fonction dans un serveur informatique, ladite fonction retournant des resultats multiples selectionnables
WO2009141539A2 (fr) Procede et systeme de configuration de documents
FR2830398A1 (fr) Procede et dispositif d&#39;execution d&#39;une fonction avec selection et envoi de resultats multiples dans un environnement client-serveur

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 10801613

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 10801613

Country of ref document: EP

Kind code of ref document: A1