FR3053138B1 - METHOD FOR AUTOMATICALLY EDITING A BLOCK OF A COMPUTER TEMPLATE - Google Patents

Description

TECHNICAL FIELD OF THE INVENTION

The field of the invention is that of computing.

More specifically, the invention relates to a method of automated editing of a computer template. The invention finds particular applications in the field of e-mailing and pages in HTML (acronym for "Hyper Text Markup Language"). In particular, the invention must be able to be used by a user who has no specific knowledge in the HTML language.

STATE OF THE ART

Computer templates, also known as layout templates or file templates, are layout templates that define the location of page elements such as images, text, buttons, videos, and so on. The computer templates used to send transactional emails or to display web pages are quite complex. The computer templates include many blocks configured according to a chosen presentation. In addition, especially for emails, the result obtained must be consistent regardless of the computer tool displaying the templates, the computer tool may be a web browser, a messaging software or a template editing software. There exists in the prior art computer software for editing and modifying a computer template. The major disadvantage of these techniques is that the modification of several computer templates requires modifying each of the templates, one by one, which is long and tedious for a user.

In addition, most existing template editors require the user to have a thorough knowledge of HTML, which is rarely the case for marketing or communication people as a designer. Indeed, most of the known techniques consist of editing an e-mail directly in the HTML language. This is the case for many online tools allowing campaign emails. In addition, these tools are limited to the e-mail and do not allow the editing of HTML pages.

None of the current systems can simultaneously meet all the required needs, namely to propose a technique of automated editing of several computer templates that is fast, easy to use.

OBJECT OF THE INVENTION

The present invention aims to remedy all or part of the disadvantages of the state of the art mentioned above. For this purpose, the present invention aims a method of automated editing of a computer template comprising at least one block.

The computer template, also called file template, can correspond to an email or a web page. The block may include one or more elements that may be text, an image, a game, or even a button to click. The configuration of the blocks of the template depends on the desired rendering.

According to the invention, the method comprises the following steps: identification of at least one modifiable block of the template; - reading the editing parameters of the modifiable block; displaying the template by associating the modifiable block with an editing form adapted to the editing parameters of said associated block; selection by a user of an editable block from the identified block or blocks and display of the editing form associated with said block; modifying said block by means of said editing form; - Display of the template comprising said modified block.

Thus, the method that is the subject of the invention makes it possible to modify a block identified in any computer template whose block configuration has been previously established. The reading of the editing parameters can be done on some or all of the blocks identified. The selection of the block to be modified can be done by clicking on it, which makes it possible to display an edition form adapted to the block to be modified. A simple definition of each block automatically generates the corresponding edition forms, simplifying both the work of the designers and the editing by the end users.

In particular implementations of the invention, the computer template is in HTML format (acronym for "Hyper Text Markup Language").

In particular implementations of the invention, a block is identified via a class and / or at least one attribute.

Thus, the attribute makes it possible to identify blocks having the same class. The attribute can be, for example, the type of the block, the position of the block in the template or any other value making it possible to sing each block.

In particular implementations of the invention, the computer template includes elements of the open-source Ember framework.

Advantageously, the step of identifying the modifiable blocks comprises for each of said blocks the following substeps: recognition of a block having an "ember-block" class in the computer template; identification of said block by means of the "data-ember-type" and / or "data-ember-context" data associated with said block.

In particular embodiments of the invention, the editing parameters associated with each of said blocks are extracted from a configuration file associated with the computer template.

In particular implementations of the invention, the display of the template is adapted to the size of the screen.

Thus, the display of the template is responsive, that is to say adapted to different screen sizes: computer screen (generally greater than 11 inches), touch screen screen (generally between 7 and 11 inch), smartphone screen (usually between 4 and 7 inches).

In particular implementations of the invention, the modifiable block comprises either: at least one image; at least one text; at least one icon and at least one text. The invention also relates to a computer program product comprising program code instructions for executing the steps of an automated editing method, when said program is executed on a computer, a tablet or a smartphone.

Finally, the invention also provides a computer system for automated editing of a computer template comprising a plurality of blocks, said computer system comprising means for: identifying at least one modifiable block of the template; - read editing parameters of each modifiable block; displaying the template by associating each modifiable block with an editing form adapted to the editing parameters of said associated block; selecting an modifiable block from the identified block or blocks and displaying the editing form associated with said block; modifying said block by means of said editing form; - display the template including the modified block.

LIST OF FIGURES Other advantages, aims and particular characteristics of the present invention will emerge from the following nonlimiting description of at least one particular embodiment of the device and method forming the subject of the present invention, with reference to the accompanying drawings, in which: which: - Figure 1 is a display of an object template of the modification by an automated editing method; FIG. 2 illustrates in the form of a block diagram an embodiment of a method of automated editing of the template with reference to FIG. 1; FIG. 3 represents three editing forms used by the editing method with reference to FIG. 2.

DETAILED DESCRIPTION OF THE INVENTION

This description is given in a nonlimiting manner, each feature of an embodiment being able to be combined with any other feature of any other embodiment in an advantageous manner.

As of now, we note that the figures are not to scale.

Example of a particular embodiment of the invention

Figure 1 shows the on-screen display of a template 100 of an electronic message, commonly referred to as an HTML page, for use in a promotional campaign to promote the presence of an electronic lottery on a merchant site.

The template 100, of which an excerpt of the computer code in HTML format is included in the appendix of the present description, is processed by a computer system that can be a computer or a portable terminal such as a smartphone or a tablet.

In the present non-limiting example of the invention, the template 100 is configured using elements of the Ember framework well known to those skilled in the art, using in particular the Handlebars framework, also well known to those skilled in the art. The Ember open-source framework allows IT developers to create HTML-based pages. The open-source framework Handlebars is a template engine for generating computer templates.

In the present example, the template 100 comprises a matrix of seven blocks 110 of the same width forming a column. The seven blocks 110 are aligned vertically and contiguous two by two.

In variants of this particular embodiment of the invention, the matrix of blocks 110 forms a line, a rectangle or a square.

The blocks 110 of the template 100 comprise: two image blocks 111 each comprising a zone capable of receiving an image; three text blocks 112 each comprising an area adapted to receive a text; a mixed block 113 comprising a zone capable of receiving four icons 114 aligned horizontally. Each icon includes a title 115 and a descriptive text 116; and a game block 117 including an area adapted to receive a game developed in HTML and JavaScript.

The configuration of the matrix of blocks 110 makes it possible to display from top to bottom: a picture block 111 1 in the header; a text block 112-i; a mixed block 113; a text block 1122; a game block 117; a text block 1123; and an image block 1112 in the foot.

Each block 110 corresponds to an "ember-block" class, associated with two attributes: a "data-ember-type" block type and a "data-ember-context" context. Block type and context identify each block in the template.

For example, for the image blocks 111, the data-ember-type block type is equal to "image" and the "data-ember-context" context is equal to "images.header" or "images.footer" following the position of the image, respectively in the header (block 111i), and in the foot (block 1112). The context thus makes it possible to distinguish the two image blocks 111.

The computer template 100 is modified by a user via an automated editing computer system comprising means for implementing an automated publishing method 200.

The method 200, illustrated in the form of a block diagram in FIG. 2, comprises a first step 210 of identification of the modifiable blocks 110 of the template 100.

In the present example, the modifiable blocks 110 are the image blocks 111, the text blocks 112 and the mixed block 113. The modifiable blocks 110 are identified during the first step 210 by means of the data-ember block type. -type "and / or" data-ember-context "context.

For image blocks 111, the block type is equal to "image".

For text blocks 112, the block type is equal to "text". It should be emphasized that when multiple blocks include the same block type, the blocks are differentiated through the context.

In the case of a non-generic block, such as for example the mixed block 113, only the value of the context "data-ember-context" makes it possible to identify this block.

For each modifiable block, the method 200 reads during a second step 220 the editing parameters associated with each of the blocks 110 in a configuration file associated with the template 100.

The editing parameters include all the parameters for displaying the elements of the block 110.

For example, the edit parameters associated with image block 1111 include: the location of the source image file. The source file can be in jpeg, png, gif, and so on. ; horizontal alignment of the image in block 1111, such as "centered"; the number of pixels pxTop to leave above the image; the number of pxLeft pixels to leave on the left of the image; the number of pixels pxBottom to leave below the image; the number of pxRight pixels to leave on the right side of the image; the number of pixels pxBorder to leave at the edge of the image; the color of the colorBorder pixels of the border of the image; the size of the image in width pxMaxWidth; the link of the html page associated with the image.

An extract of the configuration file linked to template 100 is included in the appendix of this description.

The template 100 is then displayed on the screen during the third step 230 of the editing method 200, by associating each editable block 110 with an editing form adapted to the editing parameters of said block. It should be emphasized that the display of template 100 is consistent and adapts to the size of the screen. It is also possible to simulate the display on a screen having a different size, such as for example the display on a smartphone.

The editing forms are illustrated in Figures 3, 4 and 5.

Figure 3 shows the editing form 310 for an image block 111.

The editing form 310 includes a field 311 for selecting the image or images to be displayed in the image block 111.

The editing form 310 also includes a drop-down menu 312 for selecting the type of horizontal alignment among "center", "right" or "left".

The upper and lower margins of the image can be modified thanks to the fields 313 and 314 of the editing form 310.

Finally, the editing form 310 makes it possible to enter the size by a field 315 and the color of the border surrounding the image block 111 by means of a color palette 316.

Figure 4 shows the editing form 320 for a text block 112.

The editing form 320 thus includes a field 321 for writing text and a toolbar 322 for formatting the text or a selection of the text written in the field 321. The toolbar 322 includes the standard tools of a word processor well known to those skilled in the art.

The editing form 320 further includes a drop-down menu 323 for selecting a keyword, commonly called a tag, to be inserted into the text. The use of the tag thus makes it possible to supplement the displayed text with dynamic campaign values.

FIG. 5 represents the editing form 330 for a mixed block 113 comprising at least one icon and at least one text. For this purpose, the editing form 330 includes a zone 331 for entering the size, font, color and alignment of each title 115 relative to the corresponding icon 114. The editing form 330 also includes a field 332 for entering the size, font, color and alignment of each descriptive text 116 relative to the corresponding icon 114.

The dominant color of the icons 114 can be selected through the color palette 333 of the editing form 330.

The editing form 330 also includes four zones 334 each having two fields 335. Each zone 334 is associated with a separate icon 114. The field 335i makes it possible to edit the title 115 of the icon 114. While the field 3352 makes it possible to edit the descriptive text 116 associated with the corresponding icon 114.

In the fourth step 240 of the editing method 200 illustrated in FIG. 2, a user selects one of the modifiable blocks 110, for example the block 1111, by clicking on it. The editing form 310 corresponding to the image block 111i is then displayed on the screen. The user modifies the contents of the block 111Ί via the editing form 310 during the fifth step 250.

The template comprising the modified block 1111 is then displayed during the sixth step 260 of the editing process 200.

NOTES

Excerpt from the HTML template computer code 100 <tr class = "ember-block" data-ember-type = "image" data-ember-context = "images.header"> <td align = "{{config.images .header.alignHz}} "> <a href="{{config.images.header.link.href}}" target="_blank"> <img src =" {{config.images.header.file}} " alt = "{{config.images.header.link.alt}}" style = "display: block; vertical-align: middle; border-width: {{config.images.header.pxBorder}}; border-color: {{config.images.header.colorBorder}}; border-style: self; margin-left: {{config.images.header.pxLeft}}; max-width: {{config.images.header.pxMaxWidth}}; margin-top: {{config.images.header.pxTop}}; margin-bottom: {{config.images.header.pxBottom}}; " /> </a> </ td> </ tr> <tr class = 'ember-block' data-ember-type = 'text' data-ember-context = 'text'> <td style = "text-align : left; padding: Opx 20px "> {{{config.text.html}}} </ td> </ tr> [] <tr class =" ember-block "data-ember-type =" image "data- ember-context = "images.footer"> <td align = "{{config.images.footer.alignHz}}"> <a href = "{{config.images.footer.link.href}}" target = " _blank "> <img src =" {{config.images.footer.file}} "alt =" {{config.images.footer.link.alt}} "style =" display: block; vertical-align: middle; border-width: {{config.images.footer.pxBorder}}; border-color: {{config.images.footer.colorBorder}}; border-style: self; margin-left: {{config.images.footer. pxLeft}}; max-width: {{config.images.footer.pxMaxWidth}}; margin-top: {{config.images.footer.pxTop}}; margin-bottom: {{config.images.footer.pxBottom} }; " /> </a> </ td> </ tr>

Extract from the configuration file associated with template 100 "images": {"header": {"file": "http://static.luckycart.com/sources/saas/mails/images/header.jpg", "placeholder" : "config.images.header.file", "alignHz": "center", "pxTop": "0", "pxLeft": "0", "pxBottom": "20px", "pxBorder": "0" , "colorBorder": "# c9c9c9", "pxMaxWidth": "600px", "link": {"short"; - "have": "XXX game"}}, "footer": {"file": "http://static.luckycart.com/sources/saas/mails/images/footer.jpg", "placeholder": " config.images.footer.file "," alignHz ":" center "," pxTop ":" 20px "," pxBottom ":" 0 "," pxLeft ":" 0 "," pxBorder ":" 0 "," colorBorder ":" # 6f6f6f "," pxMaxWidth ":" 600px "," link ": {" short "; - "have": "Game XXX"}}}, "win": {"params": {"subject": "Congratulations [First Name], you won!", "compiledSub": "Congratulations <% - getStr (\ "cust.name.first \")! == undefined? cust.name.first: \ "\"%>, you have won! "," colorText ":" # 000 "}," text ": { "colorText": "# 555555", "colorLinks": "# 004da0", "placeholder": "config.text.html", "html":}},

Claims (9)

1. A method of automated editing (200) of a computer template (100) comprising at least one block (110), characterized in that it comprises the following steps: - identification (210) of at least one modifiable block the template via a class and / or at least one attribute; reading (220) the editing parameters of the modifiable block; - Display (230) of the template by associating the modifiable block with an editing form adapted to the editing parameters of said block; selection (240) by a user of an editable block from the identified block or blocks and display of the editing form associated with said block; modification (250) by the user of said block via said editing form; - Display (260) of the template comprising said modified block. 2. Method according to claim 1, characterized in that the computer template is in HTML format (acronym for "Hyper Text Markup Language"). 3. Method according to claim 2, characterized in that the computer template comprises elements of the open-source Ember framework. 4. Method according to claim 3, characterized in that the step of identifying the modifiable block or blocks comprises for each of said blocks the following substeps: - recognition of a block having an "ember-block" class in the computer template; identification of said block by means of the "data-ember-type" and / or "data-ember-context" data associated with said block. 5. Method according to any one of claims 1 to 4, characterized in that the editing parameters associated with each of said blocks are extracted from a configuration file associated with the computer template. 6. Method according to any one of claims 1 to 5, characterized in that the display of the template is adapted to the size of the screen. 7. Method according to any one of claims 1 to 6, characterized in that the modifiable block comprises either: - at least one image; - at least one text; at least one icon and at least one text. A computer program product comprising program code instructions for executing the steps of a method as claimed in any one of claims 1 to 7, when said program is run on a computer, tablet or smartphone. Computerized system for automated edition of a computer template comprising at least one block, characterized in that it comprises means for: identifying at least one modifiable block of the template via a class and / or at least one attribute; - read editing parameters of the modifiable block; displaying the template by associating the modifiable block with an editing form adapted to the editing parameters of said block; selecting an modifiable block from the identified block or blocks and displaying the editing form associated with said block; modifying said block by means of said editing form; - display the template including the modified block.