FR2962237A1

FR2962237A1 - Gadget software creating method for incorporation into web page of target web application in computer, involves constructing gadget from parameters and content, and including created gadget in widget container of target application web page

Info

Publication number: FR2962237A1
Application number: FR1055394A
Authority: FR
Inventors: Aymeric Vitte
Original assignee: Nais Inf & Telecom
Current assignee: RPX Corp
Priority date: 2010-07-02
Filing date: 2010-07-02
Publication date: 2012-01-06
Anticipated expiration: 2030-07-02
Also published as: FR2962237B1

Abstract

The method involves individualizing different objects contained in a source page, where each object is defined by a specific content and specific descriptor parameters describing an object structure. One of the objects is selected in the source page, and the parameters and the content of the object are selectively extracted for the selected object. The parameters and the content are registered in a database (16) of a management server (14). A gadget is constructed from the parameters and the content. The created gadget is included in a widget container of a target web application web page.

Description

L'invention concerne la création de mini-logiciels applicatifs de type dit "gadget" ou "widget". Plus précisément, le terme "widget", qui est une concaténation de "windows" et "gadget", est un terme générique désignant une fenêtre s'ou- vrant sur l'afficheur d'un ordinateur ou d'un mobile et contenant une application. Le terme "gadget" quant à lui désigne le contenu du widget, donc l'application incluse dans ce dernier. Les widgets permettent l'affichage dynamique et interactif d'informations variées sur un champ d'une page web (page "de la toile mondiale"), en 10 combinaison avec d'autres champs sur la même page. La création d'un gadget comprend essentiellement deux étapes : - extraction, à partir d'une page web préexistante (ci-après désignée "page web source" d'un "site d'origine") des éléments de cette page web qui seront repris dans le gadget, en isolant ces éléments des au- 15 tres éléments de la page, et construction du gadget proprement dit à partir de ces éléments, et insertion de ce gadget dans une application web, à l'intérieur d'une page qui sera dénommée ci-après "page cible" d'une " application cible". De nombreux procédés ont été proposés pour créer des gadgets, parmi 20 lesquels on peut citer les techniques suivantes : - extraction d'un contenu sélectionné du site d'origine dans un élément de type iframe ("inline frame", qui est un élément permettant de placer dans un cadre (frame) un autre élément HTML), puis dimensionnement de l'iframe avec ce contenu, et défilement de la page jusqu'à l'endroit 25 où se trouve le contenu afin de n'afficher que celui-ci (technique mise en oeuvre par des moteurs de création de gadgets tels que WebWag ou Wozaik) ; - extraction d'une page dont on a préalablement sélectionné un contenu et conservé les caractéristiques, selon le même principe que ci-dessus, 30 la page se calant ensuite sur le gadget (exemple : Firefox China Édi- tion) ; - utilisation d'un iframe, la source de l'iframe étant le gadget (exemple : iGoogle) ; saisie du code du gadget ou de son URL, puis conservation et charge-35 ment du gadget par l'intermédiaire du code conservé ou par l'intermé- diaire d'un serveur intermédiaire de type proxy (comme par exemple avec la plateforme Widgetbox) ; utilisation des fonctionnalités incorporées à certains navigateurs telles que la fonctionnalité webslice d'Internet Explorer 8 ; développement de gadgets selon un format imposé (par exemple : iGoogle, Netvibes) ; extraction de gadgets dans des portails web tels que iGoogle ou Netvibes. Les deux premières techniques sont imparfaites et ne sont pas fiables, car les pages des navigateurs évoluent, et à terme le gadget est perdu. D'autre part, ces techniques ne sont pas optimisées, car elles obligent à charger complètement la page source du site d'origine, pour n'en utiliser qu'une fraction. Les autres techniques nécessitent soit un navigateur particulier, soit une compétence en programmation pour créer les gadgets, et/ou elles imposent un contenu formaté de façon stricte, avec donc également nécessité de dupliquer le contenu qui peut déjà exister sur un site pour en faire un gadget. Le but de l'invention est de résoudre ces divers problèmes en proposant une solution universelle, accessible à tous sans compétence particulière, et présentant une fiabilité très supérieure à ce qui a pu être proposé jus-qu'à présent. Plus précisément, l'invention a pour but de proposer un procédé permet-tant : i) l'extraction de morceaux de sites web à partir de n'importe quel navigateur, dès lors que celui-ci supporte des fonctionnalités telles que JavaScriptiAJAX (Asynchronous JavaScript And XML), ce qui est le cas de la quasi-totalité des navigateurs couramment utilisés ; ii) leur stockage, avantageusement dans un format universel tel que le format UTF-8 international ; et iii) leur reconstitution en temps réel sous forme de gadgets dans une application web, également au format UTF-8 pour assurer une compatibilité internationale. The invention relates to the creation of "gadget" or "widget" type of application software. More specifically, the term "widget", which is a concatenation of "windows" and "gadget", is a generic term for a window opening on the display of a computer or mobile and containing a application. The term "gadget" refers to the content of the widget, so the application included in it. The widgets allow the dynamic and interactive display of various information on a field of a web page ("World Wide Web" page), in combination with other fields on the same page. The creation of a gadget essentially comprises two steps: - extraction, from a pre-existing web page (hereinafter referred to as "source web page" of an "original site") elements of this web page which will be included in the gadget, isolating these elements from the other elements of the page, and building the gadget itself from these elements, and inserting this gadget into a web application, inside a page that will be referred to hereinafter as the "target page" of a "target application". Numerous methods have been proposed for creating gadgets, among which the following techniques may be mentioned: extraction of a selected content from the original site into an iframe element ("inline frame", which is an element allowing to place in a frame (frame) another HTML element), then sizing the iframe with this content, and scrolling of the page until the place where the content is located in order to display only this one (technique implemented by gadget creation engines such as WebWag or Wozaik); extraction of a page whose content has previously been selected and retained the characteristics, according to the same principle as above, the page then settling on the gadget (example: Firefox China Edition); - use of an iframe, the source of the iframe being the gadget (example: iGoogle); entering the code of the gadget or its URL, then storage and loading-35 ment of the gadget through the code retained or via a proxy proxy server (as for example with the Widgetbox platform) ; use of features embedded in some browsers such as the webslice feature of Internet Explorer 8; development of gadgets according to a prescribed format (for example: iGoogle, Netvibes); extracting gadgets from web portals such as iGoogle or Netvibes. The first two techniques are flawed and unreliable because the browser pages are changing, and eventually the gadget is lost. On the other hand, these techniques are not optimized because they require to completely load the source page of the original site, to use only a fraction. Other techniques require either a particular browser or a programming skill to create the gadgets, and / or they impose strictly formatted content, and therefore also need to duplicate the content that may already exist on a site to make it gadget. The object of the invention is to solve these various problems by proposing a universal solution, accessible to all without particular expertise, and having a reliability much higher than what has been proposed so far. More precisely, the purpose of the invention is to propose a method allowing: i) the extraction of pieces of web sites from any browser, as long as it supports features such as JavaScriptiAJAX (Asynchronous JavaScript And XML), which is the case for almost all commonly used browsers; ii) their storage, advantageously in a universal format such as the international UTF-8 format; and iii) their real-time reconstruction as gadgets in a web application, also in UTF-8 format to ensure international compatibility.

L'invention a également pour but de pouvoir afficher les gadgets créés grâce à un tel procédé sur n'importe quel terminal connecté à Internet, notamment sur des terminaux mobiles. En effet, comme on le verra par la suite, l'intérêt des gadgets créés par le 5 procédé de l'invention est de ne pas avoir à charger tout le site mais seulement la partie intéressante, ce qui permet : - de gagner en rapidité, - de ne disposer que du contenu pertinent, et - de présenter un format optimisé en fonction du terminal, comme par 10 exemple pour les assistants numériques personnels et autres télépho- nes de type "smartphone" dont les capacités d'affichage sont limitées, et où un gadget sera plus lisible que l'intégralité d'un site. En particulier, le but de l'invention est de pouvoir créer un tel gadget qui puisse être intégré directement à une application, sans passer par un na- 15 vigateur pour être utilisé après avoir été créé et intégré à l'application. Le gadget créé par l'invention n'est donc pas seulement un gadget destiné à être intégré à une page web, mais il peut être directement intégré à une application. Dans le cas d'une utilisation par un mobile, il suffit de diffuser vers le mo- 20 bile le gadget pour pouvoir utiliser celui-ci de façon très simple, dès lors que ce mobile dispose d'une connexion Internet utilisable avec l'application envisagée. À cet effet, l'invention propose un procédé de création d'un tel logiciel de type gadget, caractérisé par les étapes suivantes : 25 a) individualisation des divers objets contenus dans la page source, chacun de ces objets étant défini par un contenu propre et par des para-mètres descripteurs propres décrivant une structure de l'objet ; b) sélection d'au moins un desdits objets dans cette page source ; c) extraction sélective, pour l'objet ainsi sélectionné, des paramètres 30 descripteurs et du contenu de cet objet ; d) enregistrement desdits paramètres descripteurs et dudit contenu dans une base de données d'un serveur gestionnaire ; e) construction d'un gadget à partir desdits paramètres descripteurs et dudit contenu ; et f) inclusion du gadget ainsi créé dans un conteneur de type widget de ladite page web de l'application cible. Selon diverses caractéristiques subsidiaires avantageuses : - l'étape c) comprend la recherche des objets parents de l'objet indivi- dualisé à l'étape a), et l'extraction à la fois des paramètres descripteurs propres à cet objet et des paramètres hérités desdits objets parents, lesdits paramètres descripteurs pouvant notamment décrire également des styles associés aux parents de l'objet sélectionné ; - les paramètres descripteurs décrivent également des styles associés à 10 l'objet sélectionné. Dans une première mise en oeuvre, l'étape c) d'extraction sélective comprend l'extraction du code HTML de l'objet sélectionné à l'étape b), et l'étape e) est une étape de construction d'un gadget statique, à partir des-dits paramètres descripteurs et du code HTML préalablement extrait à 15 l'étape c). Dans une seconde mise en oeuvre, l'étape c) d'extraction sélective comprend l'enregistrement d'informations comprenant un hyperlien vers le site d'origine, et l'étape e) est une étape de construction d'un gadget dynamique à partir desdits paramètres descripteurs et avec appel au serveur 20 gestionnaire via l'insertion d'un script dans l'application cible de manière à opérer le chargement, par le serveur gestionnaire, de la page source du site d'origine à partir dudit hyperlien, et l'insertion au niveau du serveur, dans la page chargée, d'un script de reconstruction du gadget de type JavaScript côté serveur, qui comprend l'extraction du code HTML de l'objet 25 ainsi que les paramètres descripteurs et qui renverra le résultat à l'application cible. Selon diverses caractéristiques subsidiaires propres à cette seconde mise en oeuvre : - l'étape e) comprend la recherche des objets parents de l'objet indivi- 30 dualisé à l'étape a), et l'extraction à la fois des paramètres descripteurs propres à cet objet et des paramètres hérités desdits objets parents, lesdits paramètres descripteurs pouvant notamment décrire également des styles associés aux parents de l'objet sélectionné ; - l'étape e) est une étape de construction d'un gadget dynamique à partir desdits paramètres descripteurs et du code HTML renvoyés par le serveur - lesdites informations enregistrées à l'étape c) comprennent : URL du site d'origine, id, nom, position et taille de l'objet sélectionné dans la page source du site d'origine, et une référence du navigateur utilisé pour l'exécution des étapes a)-c) ; - lesdites informations donnent également un identifiant d'objet désigné ; l'étape e) comprend la recherche, parmi les objets de la page web du site d'origine désignée par l'hyperlien, d'au moins un objet dont des caractéristiques intrinsèques de contenu et/ou de structure répondent à un ensemble de critères prédéterminés. Avantageusement, pour l'une ou l'autre des mises en oeuvre ci-dessus : les fichiers enregistrés à l'étape d) sont des fichiers encodés en format 15 international UTF-8 ; les paramètres descripteurs comprennent des paramètres de type : BASE, HTML, styles et taille ; - le serveur gestionnaire est un serveur distant, distinct de la plateforme mettant en oeuvre les étapes d) et e) du procédé, et l'étape d) d'enre- 20 gistrement des paramètres descripteurs et du contenu dans la base de données comprend la télétransmission de ces paramètres descripteurs et du contenu au serveur distant par une requête de type cross-domain. The invention also aims to be able to display the gadgets created by such a method on any terminal connected to the Internet, including mobile terminals. Indeed, as will be seen later, the interest of the gadgets created by the method of the invention is not to have to load the entire site but only the interesting part, which allows: - to gain speed - to have only the relevant content, and - to present a format optimized for the terminal, as for example for personal digital assistants and other "smartphone" type telephones whose display capabilities are limited, and where a gadget will be more readable than an entire site. In particular, the object of the invention is to be able to create such a gadget that can be integrated directly into an application, without going through a browser to be used after being created and integrated into the application. The gadget created by the invention is not only a gadget intended to be integrated into a web page, but it can be directly integrated into an application. In the case of use by a mobile, it is sufficient to broadcast to the mobile gadget to be able to use it in a very simple way, since this mobile has an Internet connection used with the application considered. To this end, the invention proposes a method for creating such a gadget-type software, characterized by the following steps: a) individualization of the various objects contained in the source page, each of these objects being defined by their own content and by own descriptor parameters describing a structure of the object; b) selecting at least one of said objects in this source page; c) selectively extracting, for the object thus selected, the descriptor parameters and the content of this object; d) registering said descriptor parameters and said content in a database of a management server; e) constructing a gadget from said descriptor parameters and said content; and f) inclusion of the gadget thus created in a widget-type container of said web page of the target application. According to various advantageous subsidiary characteristics: step c) comprises the search for the parent objects of the individual object in step a), and the extraction of both descriptor parameters specific to this object and inherited parameters said parent objects, said descriptor parameters being able in particular to also describe styles associated with the parents of the selected object; the descriptor parameters also describe styles associated with the selected object. In a first implementation, the selective extraction step c) comprises extracting the HTML code of the object selected in step b), and step e) is a step of building a gadget. static, from said descriptor parameters and HTML code previously extracted in step c). In a second implementation, the selective extraction step c) comprises the recording of information comprising a hyperlink to the original site, and the step e) is a step of building a dynamic gadget to from said descriptor parameters and with call to the manager server via the insertion of a script in the target application so as to operate the loading, by the managing server, of the source page of the original site from said hyperlink, and the insertion at the server, in the loaded page, of a server-side JavaScript gadget reconstruction script, which includes the extraction of the HTML code of the object 25 as well as the descriptor parameters and which will return the result to the target application. According to various subsidiary characteristics specific to this second implementation: step e) comprises the search for the parent objects of the individual object in step a), and the extraction of the own descriptor parameters at the same time to this object and parameters inherited from said parent objects, said descriptor parameters may in particular also describe styles associated with the parents of the selected object; step e) is a step of building a dynamic gadget from said descriptor parameters and the HTML code returned by the server - said information recorded in step c) comprises: URL of the originating site, id, name, position and size of the object selected in the source page of the source site, and a browser reference used to perform steps a) -c); said information also gives a designated object identifier; step e) comprises searching, among the objects of the web page of the original site designated by the hyperlink, of at least one object whose intrinsic characteristics of content and / or structure meet a set of criteria predetermined. Advantageously, for one or the other of the implementations above: the files recorded in step d) are encoded files in UTF-8 international format; descriptor parameters include parameters of type: BASE, HTML, styles and size; the management server is a remote server, distinct from the platform implementing steps d) and e) of the method, and the step d) of recording the descriptor parameters and the content in the database comprises the teletransmission of these descriptor parameters and the content to the remote server by a request of the cross-domain type.

0 25 On va maintenant décrire un exemple détaillé de mise en oeuvre de l'invention, en référence aux dessins annexés. La Figure 1 illustre schématiquement, sous forme de blocs fonctionnels, les divers éléments impliqués par le procédé de création du gadget selon 30 l'invention. Les Figures 2a et 2b illustrent deux manière possibles d'isoler sur l'écran présenté à l'utilisateur les champs de la page d'origine destinés à être ex-traits pour créer le widget. 0 On va maintenant décrire un exemple détaillé de création d'un gadget selon le procédé de l'invention. Comme illustré Figure 1, ce procédé peut être mis en oeuvre par un utilisateur (ci-après désigné "concepteur" pour le distinguer de l'utilisateur fi- nal du gadget) à partir d'un ordinateur 10 susceptible de se connecter via un navigateur à un site web d'origine 12, pour extraire à partir d'une page source les éléments nécessaires à la création du widget. Le procédé implique également l'intervention d'un serveur gestionnaire 14 qui stockera les éléments ainsi extraits dans une base de données 16. Le 10 widget créé par le concepteur est destiné à être intégré à une application web cible 18 destinée à être chargé par un terminal 20, notamment un ter- minal mobile. La création du gadget implique essentiellement deux phases : l'extraction, à partir de la page source du site d'origine, des éléments 15 nécessaires à la création du gadget, et la construction du gadget à partir des éléments ainsi extraits, et leur intégration dans l'application web cible. A detailed example of implementation of the invention will now be described with reference to the accompanying drawings. Figure 1 illustrates schematically, in the form of functional blocks, the various elements involved in the method of creating the gadget according to the invention. Figures 2a and 2b illustrate two possible ways to isolate on the screen presented to the user the fields of the original page to be ex-strokes to create the widget. We will now describe a detailed example of creation of a gadget according to the method of the invention. As illustrated in Figure 1, this method may be implemented by a user (hereinafter referred to as "designer" to distinguish him from the end user of the gadget) from a computer 10 capable of connecting via a browser. to an original website 12, to extract from a source page the elements necessary for the creation of the widget. The method also involves the intervention of a management server 14 which will store the elements thus extracted in a database 16. The widget created by the designer is intended to be integrated into a target web application 18 intended to be loaded by a user. terminal 20, in particular a mobile terminal. The creation of the gadget essentially involves two phases: the extraction, from the source page of the original site, of the elements necessary for the creation of the gadget, and the construction of the gadget from the elements thus extracted, and their integration. in the target web application.

Extraction des éléments du gadget 20 Cette étape est mise en oeuvre par exécution d'un script, par exemple de type JavaScript/AJAX. Le concepteur du gadget commence par accéder au site d'origine d'où il veut extraire les éléments du gadget, jusqu'à la page pertinente (page 25 source) de celui-ci. Il appelle alors l'outil de création du gadget, par exemple en cliquant sur un signet qui aura été installé en tant que bouton dans la barre personnelle du navigateur. Cette action aura pour effet d'insérer le script d'extraction dans la page du navigateur dans laquelle il se trouve. L'exécution de ce script donnera le 30 choix au concepteur, par affichage d'un champ de sélection, de commencer la capture du contenu dans la page source qui reste affichée en arrière plan, ou bien de saisir manuellement le code ou le texte de son gadget. Extraction of the elements of the gadget This step is implemented by execution of a script, for example of the JavaScript / AJAX type. The designer of the gadget begins by accessing the original site where he wants to extract the elements of the gadget, up to the relevant page (page 25 source) thereof. He then calls the gadget creation tool, for example by clicking on a bookmark that has been installed as a button in the browser's personal bar. This action will insert the extraction script into the browser page in which it is located. Running this script will give the designer the choice, by displaying a selection field, to begin capturing the content in the source page that remains displayed in the background, or to manually enter the code or text of the script. his gadget.

La capture du contenu pertinent est opérée en sélectionnant le champ pertinent, identifié par une bordure qui apparaît ou disparaît en fonction du survol du pointeur de la souris. La phase initiale de cette capture comprend le traitement consistant à 5 scanner tous les objets de la page et pour chaque objet : - ajouter un événement sur mouseover ou mouseout (ou, plus précisé- ment, implémenter un mécanisme identique à mouseenter ou mouse- leave non supporté par tous les navigateurs) pour ajouter, ou respecti- vement enlever, une bordure à l'objet afin de désigner celui qui est ac-10 tif - ajouter un événement sur mousedown pour lancer la création du gad- get quand on clique sur l'objet sélectionné, et stopper la propagation de l'événement mousedown dans le DOM (structure Document Object Model) aux objets placés avant lui dans la hiérarchie ; 15 enlever et conserver tous les target des liens, afin de ne pas sortir de la page quand on clique ; - mettre pour tous les objets où cela est applicable wmode à 'transparent' afin que ces objets ne se retrouvent pas par-dessus la boite de dialogue du script d'extraction du gadget ; et 20 supprimer les fonctions qui pourraient exister sur onmousedown aux objets, pour ne pas avoir de conflit avec le mousedown de création du gadget. Ensuite, en balayant avec la souris la page source affichée, le concepteur va faire apparaître des bordures désignant tel ou tel champ de la page. 25 Lorsqu'il aura trouvé le champ pertinent, il lui suffira de cliquer pour dési- gner ce champ à l'outil de création du gadget. Avantageusement, il est prévu deux modes de capture, illustrés respectivement Figures 2a et 2b. Dans le premier mode, la bordure est ajoutée au seul élément HTML qui 30 se trouve sous la souris (comme en A sur la Figure 2a). Le second mode procède de même, mais ajoute également une bordure à tous les parents de l'élément sélectionné (comme en A et B sur la Figure 2b). En effet, si l'on se contente d'ajouter une bordure au seul élément se trouvant sous la souris, ceci peut amener les objets à se décaler 35 dans la page, provoquant parfois l'impossibilité d'accéder à l'objet voulu, celui-ci se décalant constamment au moment où la souris arrive dessus (succession de détections d'événements mousenter et mouseleave quand l'objet se décale). Le second mode de capture permet de résoudre ce problème, car en ajoutant une bordure à tous les parents le décalage s'appliquera à l'ensemble de la page, éliminant l'effet de "clignotement" d'objet sous la souris et permet au concepteur de désigner exactement l'objet pertinent. Une fois que le concepteur a choisi le contenu qu'il souhaite extraire, il clique pour déclencher l'extraction des éléments par exécution du script. The capture of relevant content is done by selecting the relevant field, identified by a border that appears or disappears depending on the mouse pointer. The initial phase of this capture includes the process of scanning all objects on the page and for each object: - add an event to mouseover or mouseout (or, more precisely, implement a mechanism similar to mouseenter or mouse-leave not supported by all browsers) to add or remove a border to the object to designate which one is active - add an event to mousedown to start the gadget creation when clicking on the selected object, and stop the propagation of the mousedown event in the DOM (Document Object Model structure) to objects placed before it in the hierarchy; 15 remove and keep all target links, so as not to leave the page when clicked; - set for all objects where this is applicable wmode to 'transparent' so that these objects are not found over the gadget extraction script dialog box; and 20 remove the functions that might exist on objects onmousedown, so as not to have conflict with the mousedown of the gadget's creation. Then, by swiping the displayed source page with the mouse, the designer will display borders indicating this or that field of the page. Once he has found the relevant field, he will only have to click to designate this field to the gadget creation tool. Advantageously, two capture modes are provided, illustrated respectively in FIGS. 2a and 2b. In the first mode, the border is added to the only HTML element that is under the mouse (as in A in Figure 2a). The second mode does the same, but also adds a border to all parents of the selected element (as in A and B in Figure 2b). Indeed, if we just add a border to the only element under the mouse, this can cause the objects to shift in the page, sometimes causing the impossibility to access the desired object, the latter constantly shifting when the mouse arrives on it (succession of detections of events mousenter and mouseleave when the object shifts). The second capture mode solves this problem because by adding a border to all parents the offset will apply to the entire page, eliminating the effect of "blinking" object under the mouse and allowing the designer to designate exactly the relevant object. Once the designer has chosen the content he wants to extract, he clicks to trigger the extraction of the elements by running the script.

Ce script lui offre alors deux options : création d'un gadget statique ou d'un gadget dynamique : - le gadget statique permettra de capturer le code HTML du contenu sélectionné, ce qui permettra de reconstituer ce contenu à l'identique : le code du gadget en lui-même ne changera plus, mais les éventuels ob- jets qu'il contient tels qu'images, animations Flash, séquences vidéo ou autres ressources liées automatiquement accédées depuis la page web, continueront à se mettre à jour en fonction du site d'où proviennent ces ressources ; le gadget dynamique, quant à lui, permettra de capturer un contenu qui 20 sera reconstruit à l'identique dynamiquement à partir du site d'origine, au moment de l'utilisation. Par exemple, si l'on souhaite créer un gadget à partir d'un site contenant une carte évolutive (carte météo, carte de zones d'alerte, de propagation d'un phénomène, etc.) : 25 - si l'on décide de faire un gadget statique de cette carte, le code HTML contiendra une image de la carte à l'instant de la création du gadget, et lorsque ce dernier sera utilisé c'est toujours la même carte qui sera affichée ; si en revanche l'on décide de créer un gadget dynamique de cette 30 même carte, le contenu de ce gadget sera la carte mise à jour en temps réel au moment de l'utilisation du gadget. Pour une séquence vidéo ou un animation de type objet Flash, le code HTML de l'objet se mettra en tout état de cause à jour dynamiquement en fonction du site d'origine, et dans ce cas il sera préférable de créer un 35 gadget statique. This script then offers him two options: creation of a static gadget or a dynamic gadget: - the static gadget will allow to capture the HTML code of the selected content, which will allow reconstituting this content to the identical: the code of the gadget itself will not change anymore, but any objects it contains such as images, flash animations, video sequences or other related resources automatically accessed from the web page, will continue to update depending on the site. where do these resources come from; the dynamic gadget, meanwhile, will capture content that will be dynamically reconstructed from the original site at the time of use. For example, if you want to create a gadget from a site containing an evolutionary map (weather map, map of warning zones, propagation of a phenomenon, etc.): 25 - if you decide to make a static gadget of this card, the HTML code will contain an image of the card at the moment of the creation of the gadget, and when this one will be used it is always the same card which will be displayed; if on the other hand it is decided to create a dynamic gadget of this same card, the content of this gadget will be the map updated in real time at the time of use of the gadget. For a video clip or animation of Flash object type, the HTML code of the object will in any case update dynamically according to the original site, and in this case it will be better to create a static gadget. .

Des exemples en métalangage d'algorithmes de création de gadgets statiques et dynamiques sont donnés en ANNEXES A et B, respectivement, à la fin de la présente description. Les éléments qui ont été extraits par ce procédé sont envoyés au serveur 5 gestionnaire 14 via une requête qui utilise la fonction postMessage définie par le standard HTML5, permettant une requête "POST cross-domain" cryptée en SSL. Dans le cas d'un gadget statique deux fichiers sont créés avec, encodés en format international UTF-8 pour permettre une compatibilité maximale : 10 - un fichier .html avec comme contenu mtchtml (pour ouvrir le gadget il suffira d'appeler l'url du .html) ; et un fichier json (JavaScript Object Notation) qui renvoie : var gadget = {base: la base du site source, html: le contenu de json} (pour la recons- truction dans une application web le .json sera inséré comme script Ja-15 vaScript et instanciera la variable globale gadget). L'accès au serveur sera opéré après authentification du concepteur via un identifiant et un mot de passe. Les éléments suivants sont stockés dans la base de données 16 du serveur 14: 20 - le fichier .html, - le fichier json, - les références au gadget ainsi que ses dimensions largeur/hauteur ; et - une capture d'écran du gadget. La capture d'écran du gadget est une capture asynchrone créée en re-25 construisant le gadget sur le serveur gestionnaire 14 et en prenant un aperçu du rendu. Dans le cas d'un gadget dynamique, le processus est le même, les informations stockées étant : - URL, id, nom, position et taille de l'objet sélectionné dans la page 30 source, et - référence du navigateur utilisé. Metalanguage examples of algorithms for creating static and dynamic gadgets are given in APPENDICES A and B, respectively, at the end of the present description. The elements that were extracted by this method are sent to the manager server 14 via a request that uses the postMessage function defined by the HTML5 standard, allowing a SSL encrypted "POST cross-domain" request. In the case of a static gadget two files are created with, encoded in UTF-8 international format to allow maximum compatibility: 10 - an .html file with as content mtchtml (to open the gadget simply call the url of .html); and a json (JavaScript Object Notation) file that returns: var gadget = {base: source site database, html: json content} (for reconstruction in a web application the .json will be inserted as a JavaScript script 15 vaScript and instantiate the gadget global variable). Access to the server will be operated after authentication of the designer via an identifier and a password. The following items are stored in server database 14: 20 - the .html file, - the json file, - the gadget references and its width / height dimensions; and - a screenshot of the gadget. The gadget screenshot is an asynchronous capture created by re-building the gadget on the manager server 14 and taking a preview of the rendering. In the case of a dynamic gadget, the process is the same, the stored information being: - URL, id, name, position and size of the object selected in the source page, and - reference of the browser used.

Reconstruction des gadgets statiques et dynamiques Reconstruction of static and dynamic gadgets

Les gadgets statiques peuvent être reconstruits en appelant directement leur URL. Toutefois, le but de l'invention est de permettre la reconstruction 5 des gadgets directement dans une application web. Pour ce faire, l'application web va insérer un script dont la source est, pour un gadget statique, le .json du gadget mémorisé dans la base de données 16 du serveur gestionnaire 14 (on notera incidemment que la technique est "cross-domain", le site de l'application web cible 18 pouvant 10 être différent de celui du serveur gestionnaire 14 servant à l'extraction des paramètres du gadget). A la fin de l'exécution de ce script, l'application cible 18 aura à disposition les valeurs : - gadget.base, qui contient la base du site du gadget statique, et 15 - gadget.html, qui contient le code HTML du gadget formaté pour pouvoir être injecté dans directement la page web de l'application cible (donc sans balises <HEAD> ni <BODY>). L'application crée alors une balise <BASE>, avec comme source gadget.base comme premier fils du <HEAD>, ce qui permet de changer la 20 propriété baseURl de tous les objets. Les objets du gadget seront ainsi invoqués avec l'URL du site d'origine et apparaîtront donc correctement. L'application insère ensuite le code HTML du gadget là où elle le souhaite (par exemple : mon_div gadget. innerHTML=gadget.html). 25 Ainsi, la page aura toujours pour elle-même ses propres styles appliqués à ses propres éléments tandis que les styles du gadget, présents dans gadget.html, seront appliqués au gadget, permettant ainsi sa reconstitution parfaite. Dans le cas d'un gadget dynamique, la reconstruction est opérée de la 30 manière suivante. Les méthodes JavaScript sont mises en oeuvre côté application cible et côté serveur : l'application cible insère un script qui va invoquer le serveur gestionnaire 14 en lui demandant de charger I'URL du site d'origine avec le user agent du navigateur avec lequel le site a été créé. Static gadgets can be rebuilt by directly calling their URL. However, the object of the invention is to allow the reconstruction of gadgets directly in a web application. To do this, the web application will insert a script whose source is, for a static gadget, the .json of the gadget stored in the database 16 of the managing server 14 (it will be noted incidentally that the technique is "cross-domain" "the site of the target web application 18 may be different from that of the manager server 14 for extracting the parameters of the gadget). At the end of the execution of this script, the target application 18 will have at disposal the values: - gadget.base, which contains the base of the site of the static gadget, and 15 - gadget.html, which contains the HTML code of the gadget formatted to be able to be injected directly into the web page of the target application (thus without <HEAD> or <BODY> tags). The application then creates a <BASE> tag, with gadget.base as the first child of the <HEAD>, which makes it possible to change the baseURL property of all the objects. The objects of the gadget will be invoked with the URL of the original site and will appear correctly. The application then inserts the widget's HTML code where it wants (for example: my_div gadget.internalHTML = gadget.html). 25 Thus, the page will always have for itself its own styles applied to its own elements while the styles of the gadget, present in gadget.html, will be applied to the gadget, thus allowing its perfect reconstitution. In the case of a dynamic gadget, the reconstruction is carried out as follows. The JavaScript methods are implemented on the target application side and server side: the target application inserts a script that will invoke the management server 14 by asking it to load the URL of the original site with the user agent of the browser with which the site has been created.

Ceci permet de disposer d'une page identique à la page source dont pro-viennent les éléments du widget, en évitant notamment une adaptation du site en fonction du format du terminal qui consulte le gadget, comme ce la est par exemple le cas avec certains sites qui détectent tel ou tel type de téléphone portable et renvoient une page spécifique qui n'est pas celle qui avait servi pour la création du gadget. Le serveur introduit alors dans la page chargée un script qui va effectuer les traitements suivants : si le gadget avait un id ou un nom, on récupère obj par son nom ou son id, sinon on scanne tous les objets de body et on récupère le plus probable selon sa position et ses dimensions (obj) ; on applique la même transformation de conservation des styles à obj que pour la création des gadgets statiques (cf. ANNEXE A mentionnée ci-dessus) ; on attache les balises LINK et STYLE à obj ; on supprime tous les scripts de obj. L'application cible insère alors le gadget dans la page en insérant une balise BASE avec la valeur de base retournée par le serveur comme premier fils du head, et en utilisant le code HTML retourné par le serveur là où il sera nécessaire (par ex. : mon div gadget.innerHTML=obj.outerHTML). L'avantage d'utiliser JavaScript côté serveur est que le chargement de la page ainsi que la reconstruction du gadget sont beaucoup plus rapides que sur un terminal de type mobile, compte tenu de la puissance du serveur et compte tenu du fait que celui-ci est connecté à internet via des connexions à beaucoup plus haut débit, donc avec une très nette optimisation par rapport au chargement d'un iframe sur le terminal du concepteur. On notera que l'utilisation courante de bandeaux publicitaires qui chan-gent de taille rend difficile une identification exacte de la place de l'objet, de sorte que la méthode consistant à retourner l'objet "le plus probable" (en fonction d'une batterie de critères tels que présence d'une image, d'un mot dans le texte, d'un symbole monétaire, de la taille du cadre, etc.) est plus fiable que celle consistant par exemple à faire défiler un iframe sur son emplacement présumé. This makes it possible to have a page identical to the source page from which the elements of the widget come from, in particular avoiding an adaptation of the site according to the format of the terminal which consults the gadget, as it is for example the case with certain sites that detect this or that type of mobile phone and return a specific page that is not the one that was used for the creation of the gadget. The server then introduces in the page loaded a script that will perform the following treatments: if the gadget had an id or a name, we get obj by its name or id, otherwise we scan all the body objects and we get the most likely according to its position and dimensions (obj); the same style conservation transformation is applied to the creation of static widgets (see ANNEX A mentioned above); LINK and STYLE tags are attached to obj; we delete all the obj scripts. The target application then inserts the gadget into the page by inserting a BASE tag with the base value returned by the server as the first child of the head, and using the HTML code returned by the server where it is needed (eg. : my div gadget.innerHTML = obj.outerHTML). The advantage of using server-side JavaScript is that the loading of the page as well as the reconstruction of the gadget are much faster than on a mobile-type terminal, given the power of the server and taking into account the fact that it is connected to the internet via connections at much higher speed, so with a very clear optimization compared to the loading of an iframe on the terminal of the designer. It will be noted that the current use of size-changing advertising banners makes it difficult to accurately identify the place of the object, so that the method of returning the object "most likely" (depending on a battery of criteria such as the presence of an image, a word in the text, a currency symbol, the size of the frame, etc.) is more reliable than that consisting for example in scrolling an iframe on its presumed location.

Le principe de reconstruction peut être résumé par les arbres de document donnés en ANNEXE C ci-après, qui schématisent la structure de la page web cible avant et après la reconstruction du gadget. The principle of reconstruction can be summarized by the document trees given in APPENDIX C below, which schematize the structure of the target web page before and after the reconstruction of the gadget.

ANNEXE A : création d'un gadget statique Soit obj l'objet sélectionné. APPENDIX A: Creating a static gadget Let obj the selected object.

On restaure les liens target de obj s'ils existent. 1°) Si obj initial différent de BODY : We restore target links of obj if they exist. 1 °) If initial obj different from BODY:

Si obj différent de BODY : on crée un div où les styles de body sont clonés, on met ce div aux dimensions width et height de 20 obj. Pour le calcul de width et height on prend en compte aussi le placement de obj par rapport à son parent (offsettop et offsetleft). On clone ici les styles de la balise body seulement et non pas les styles appliqués au body par des pro- 25 priétés CSS, car ces propriétés seront présentes dans le gadget au final et donc appliquées au gadget lors de la reconstruction. On applique ensuite les traitements détaillés ci-dessous (si obj=body). 30 On rattache obj et ses parents les uns aux autres, le div parent de l'ensemble est donc le div mentionné ci-dessous, ce div devient obj. If obj different from BODY: we create a div where the body styles are cloned, we put this div to width and height dimensions of 20 obj. For the calculation of width and height we also take into account the placement of obj with respect to its parent (offsettop and offsetleft). Here we clone the styles of the body tag only and not the styles applied to the body by CSS properties, because these properties will be present in the gadget in the end and thus applied to the gadget during the reconstruction. We then apply the treatments detailed below (if obj = body). 30 We link obj and his parents to each other, so the parent div of the set is the div mentioned below, this div becomes obj.

Si obj=BODY: 35 On garde obj. On sauve les balises LINK et STYLE de BODY. On ajoute la balise <BASE> dans le <HEAD> (ici nous sommes sur le site source donc les liens pointent au bon endroit, 40 quand on reconstruira le gadget il faudra donner à la balise base la référence du site afin que les liens pointent toujours sur le site). On met les balises LINK et STYLE dans HEAD. On ajoute la balise META UTE-8 si elle est absente. image de fond transparent afin de images de fond des parents et ne obj, on les positionne padding O. Arrivé au body On scanne tous les parents de obj afin de garder l'héritage des styles. On les met en taille width/height 100%, on applique une supprimer les éventuelles conserver que le fond de relatif top 0, left 0, margin 0, en On enlève toutes les balises <SCRIPT> <NOSCRIPT>. (en effet pour les gadgets statiques elles deviennent inutiles, et surtout gênantes dans le cas de scripts affichant des publicités. If obj = BODY: 35 We keep obj. We save LINK and STYLE tags from BODY. We add the tag <BASE> in the <HEAD> (here we are on the source site so the links point to the right place, 40 when we rebuild the gadget it will be necessary to give the base tag the reference of the site so that the links point always on the site). We put the LINK and STYLE tags in HEAD. The META UTE-8 tag is added if it is absent. Transparent background image in order to background images of the parents and obj, we position them padding O. Arrived at the body One scans all the parents of obj in order to keep the inheritance of the styles. We put them in size width / height 100%, we apply a delete the possible to keep that the bottom of relative top 0, left 0, margin 0, in On removes all the tags <SCRIPT> <NOSCRIPT>. (indeed for the static gadgets they become useless, and especially troublesome in the case of scripts displaying advertisements.

On applique à obj une fonction qui transforme les liens en absolu (cas de défaillance changement dynamique balise <BASE> dans certains navigateurs), et on applique un traitement spécifique aux balises de type OBJECT, EMBED afin que leur code soit correctement récupéré quand on prendra le outerHTML de obj (notamment par exemple pour récupérer les flashvar qui nécessitent un traitement particulier sur certains navigateurs). We apply to a function that transforms links into absolute (case of failure dynamic change <BASE> tag in some browsers), and we apply a specific treatment to the OBJECT, EMBED type tags so that their code is correctly recovered when we take the outerHTML of obj (especially for example to recover the flashvar which require a particular treatment on some browsers).

2°) Si obj initial = BODY : 2 °) If initial obj = BODY:

On remplace dans le outerHTML de obj <BODY ....</BODY> par <DIV> ...</DIV> qui devient obj, ceci afin de garder les styles de body. Cette transformation est utile dans la mesure où le gadget se reconstruira dans une page web qui a déjà elle même un body. We replace in the outerHTML of obj <BODY .... </ BODY> by <DIV> ... </ DIV> which becomes obj, this in order to keep the body styles. This transformation is useful because the gadget will be rebuilt in a web page that already has a body itself.

3°) Dans les deux cas, en sortie : json : contenu de <HEAD> sans META, TITLE et BASE + outerHTML de obj 3) In both cases, output: json: content of <HEAD> without META, TITLE and BASE + obj outerHTML

mtchtml : <HTML><HEAD><BODY> 30 + outerHTML de obj</BODY></HTML>25 15 ANNEXE B : création d'un gadget dynamique Soit obj l'objet sélectionné. On cherche si obj ou ses parents dont il est le seul fils et consécutifs ont un id ou un nom. mtchtml: <HTML> <HEAD> <BODY> 30 + outerHTML of obj </ BODY> </ HTML> 25 15 APPENDIX B: Creating a dynamic gadget Let obj the selected object. One seeks if obj or his parents of which he is the only son and consecutive have an id or a name.

Si oui, on conserve le nom (ainsi que son index dans la chaine 10 retournée par getElementsByTagName) ou l'id. If so, keep the name (as well as its index in the string 10 returned by getElementsByTagName) or id.

On conserve la position et les dimensions du gadget. On conserve la référence du navigateur utilisé.5 ANNEXE C : structure de la page web cible avant et après reconstruction du gadget. Avant reconstruction du gadget : Doctype We keep the position and dimensions of the gadget. The reference of the navigator used is retained.5 APPENDIX C: structure of the target web page before and after reconstruction of the gadget. Before rebuilding the gadget: Doctype

Code de l'application <IDIV> Après reconstruction du gadget : Doctype <HTML> <HEAD> <BASE href=base du gadget> <META> <TITLE> <LINK> <SCRIPT> <MHEAD> <BODY> Application code <IDIV> After rebuilding the gadget: Doctype <HTML> <HEAD> <BASE href = gadget base> <META> <TITLE> <LINK> <SCRIPT> <MHEAD> <BODY>

Code de l'application Code of the application

Code du gadget Gadget code

Claims

REVENDICATIONS1. A method of creating a gadget-type software from a source web page of an originating site (12), for embedding in a web page of a target web application (18), characterized by the following steps : a) individualization of the various objects contained in the source page, each of these objects being defined by their own content and by their own descriptor parameters describing a structure of the object; b) selecting at least one of said objects in this source page; c) selective extraction, for the object thus selected, of the descriptor parameters and the content of this object; d) recording said descriptor parameters and said content in a database (16) of a manager server (14); e) constructing a gadget from said descriptor parameters and said content; and f) including the gadget thus created in a widget-like container of said target application web page.

2. The method of claim 1, wherein step c) comprises the search of the parent objects of the individualized object in step a), and the ex traction of both descriptor parameters specific to this object. and parameters inherited from said parent objects.

The method of claim 1, wherein said descriptor parameters also describe styles associated with the selected object. 25

The method of claim 2, wherein said descriptor parameters also describe styles associated with the parents of the selected object.

The method of claim 1, wherein: the selective extraction step c) comprises extracting the HTML code of the object selected in step b), and step e) is a step of building a static gadget, from said descriptor parameters and HTML code previously ex-trait in step c).

The method of claim 1, wherein: step c) selectively retrieving includes recording information including a hyperlink to the origin site, and step e) is a step of constructing a dynamic gadget from said descriptor parameters and with call to the managing server via the insertion of a script in the target application so as to operate: the loading, by the managing server, of the source page of the site of origin from said hyperlink, and the insertion at the server level, in the loaded page, of a server-side JavaScript gadget reconstruction script, which involves the extraction of the HTML code of the object as well as the descriptor parameters and that will return the result to the target application.

7. The method of claim 6, wherein step e) includes searching for parent objects of the individualized object in step a), and removing both descriptor parameters specific to that object. and parameters inherited from said parent objects.

The method of claim 7, wherein said descriptor parameters also describe styles associated with the parents of the selected object.

9. The method of claim 6, wherein step e) is a step of building a dynamic gadget from said descriptor parameters and HTML returned by the server.

The method of claim 6, wherein said information recorded in step c) comprises: URL of the originating site, id, name, position and size of the selected object in the source page of the originating site. , and a browser reference used for performing steps a) -c). 35

The method of claim 6, wherein said information also provides a designated object identifier.

12. The method of claim 6, wherein step e) comprises searching, among the objects of the web page of the origin site designated by the hyperlink, of at least one object whose intrinsic characteristics of content. and / or of structure respond to a set of predetermined criteria.

The method of claim 1, wherein the files recorded in step d) are encoded files in UTF-8 international format.

The method of claim 1, wherein said descriptor parameters comprise parameters of the type: BASE, HTML, styles and size.

The method of claim 1, wherein the manager server (14) is a remote server, distinct from the platform (10) implementing steps d) and e) of the method, and step d) of recording the descriptor parameters and the content in the database includes the teletransmission of these descriptor parameters and the content to the remote server by a request of the cross-domain type.