Webpage design encoding

Abstract

A system for translating a user's activity designing an image into software useable by a computer to render the image, the system comprising: an image workspace that displays design elements that a user creates and stylizes for inclusion in the image; first graphic tool icons representing design elements that the user uses to create in the workspace design elements that the icons represent for inclusion in the image; second graphic tools that the user uses to select characterizing features that stylize the design elements the user creates in the workspace using the graphic tool icons; a first editor that recognizes the design elements represented by the first graphic tools and represents the design elements that the user creates in the workspace by symbols in a first code in accordance with syntax rules that govern how the symbols are written in the first code; a second editor that recognizes the characterizing features that the user selects for the created design elements and generates a second computer useable code that represents and associates the selected characterizing features with the design elements they characterize in accordance with syntax rules that govern how the characterizing features are written in the second code; wherein the first and second codes are generated in real time responsive to the user actions in designing the image and are useable by a computer to render the image.

Description

C321-P1788-PCT 13 -NOV-2025WEBPAGE DESIGN ENCODINGRELATED APPLICATIONS

[0001] The present application claims the benefit under 35 U.S.C. 119(e) of U.S. Provisional Application 63 / 720,209 filed on November 14, 2024, the disclosure of which is incorporated herein in its entirety by reference.FIELD

[0002] Embodiments of the disclosure relate to a method of automatically generating in real time HTML and CSS code for a webpage responsive to actions of a designer during designing the webpage.BACKGROUND

[0003] Designing a desired webpage and preparing it for rendering on a monitor is typically a complex and often tedious multidisciplinary task. The task typically involves the participation of different people with different skill sets who communicate in different technological vernaculars and contribute different information aspects and elements for configuring the webpage. For example, the task of preparing a webpage may involve user experience (UX) and user interface (UI) designers that generate the way the webpage looks and implements functional and design requirements of the webpage. A front-end developer is then employed to encode the desired display created by the UX and the UI designers into Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and as may be required JavaScript (JS), which are used by a browser to render the webpage on a display screen. HTML, CSS, and as may be required JS, are referred to collectively and / or generically as browser display code (BDC) .SUMMARY

[0004] An aspect of an embodiment of the disclosure relates to providing browser display code (BDC) construction software, optionally referred to as “Addit” or Addit software, that translates in real-time a user’s actions using Addit software to design and configure appearance and functional operation of a webpage into HTML, CSS, and as required JS code that instructs a browser how to render and operate the webpage. Software is understood to collectively and / or generically refer to computer executable instructions and / or computer useable data.

[0005] In an embodiment, Addit comprises software operable to provide a user with a webpage construction display comprising a drawing workspace and a set of design tools that the user may use to create, manipulate, and characterize webpage design elements in the workspace toC321-P1788-PCT 13-NOV-2025generate and configure desired appearance and operation of a webpage. In an embodiment the drawing workspace is flanked by HTML and Friendly CSS panels. The Friendly HTML panel displays HTML code representing design elements and their relative structural relationships in the webpage responsive to Addit identifying the user using the design tools to generate the design elements in the workspace. The CSS panel displays associated CSS code defining desired visual characterizations and relative spatial relationships of the design elements responsive to Addit identifying the user using the design tools to indicate the desired characterizations and relationships. The relative structural relationships of a webpage design element define how the element relates to other design elements of a webpage and may be referred to as logical features, of the element. The visual characterizations and relative spatial relationships of a webpage design element may be referred to as visual features of the design element. A design element of a webpage refers to any component of the webpage that operates to provide a visual or functional feature of the webpage.

[0006] In an embodiment Addit comprises an HTML editor, which Addit automatically invokes to write the HTML code for the webpage responsive to Addit identifying user action intended to include a design element in the workspace that provides a visual or functional feature of the webpage. Optionally, the HTML editor comprises a database having a vocabulary of HTML entities, also referred to as HTML names, that may be written in HTML code to identify and / or structure design elements of a webpage. By way of example, HTML entities include tags, attribute names, and referents to external resources such as CSS and JavaScript. The HTML editor comprises HTML syntax rules that govern how the HTML entities are written and appear in HTML code which Addit uses to generate the HTML code. In an embodiment Addit comprises a CSS editor, which Addit automatically invokes to write CSS code responsive to Addit identifying user action intended to determine a visual features of a design element written in HTML code. In an embodiment the CSS editor comprises a library of CSS entities designating selectors and / or executable instructions for generating CSS selectors that include the identified visual features as selector properties and associate the properties with the design element. The CSS editor comprises syntax rules that govern how the CSS selectors and properties are written and appear in CSS code which Addit uses to generate the CSS code.

[0007] In an embodiment Addit comprises and / or has access to a design system (DS) to which Addit may include references in HTML and / or CSS code, for example by linking or importing, to provide a browser with style and design data required to render webpage design elements declared in HTML and CSS code that Addit generates.C321-P1788-PCT 13-NOV-2025

[0008] This Summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.BRIEF DESCRIPTION OF THE FIGURES

[0009] Non-limiting examples of embodiments of the invention are described below with reference to figures attached hereto that are listed following this paragraph. Identical structures, elements or parts that appear in more than one figure are generally labeled with a same numeral in all the figures in which they appear. Dimensions of components and features shown in the figures are chosen for convenience and clarity of presentation and are not necessarily shown to scale.

[0010] Fig. 1 shows a high-level flow diagram illustrating a process by which a webpage is designed, programmed, and launched, and then a browser processes the code to render a webpage, in accordance with prior art;

[0011] Fig. 2 shows a simulated schematic “floral webpage” for marketing floral bouquets;

[0012] Figs. 3A-24B schematically show an Addit construction display comprising a workspace and flanking Friendly HTML and CSS panels, and illustrate steps that a user undertakes in using the Addit construction display to automatically generate, in real-time, HTML and CSS code for rendering the floral webpage shown in Fig. 2, in accordance with an embodiment of the disclosure;

[0013] Figs. 3A schematically shows the Addit workspace and the Friendly HTML and CSS panels respectively listing design elements and characterizing features generated by user actions at an initial step in generating HTML and CSS code for the floral webpage shown in Fig. 2, in accordance with an embodiment of the disclosure;

[0014] Fig. 3B shows enlarged views of the Friendly HTML and CSS panels shown in Fig.3 A, and corresponding HTML and CSS code panels that Addit generated responsive to items created in the initial step, in accordance with an embodiment of the disclosure;

[0015] Figs. 4 and 5 A schematically illustrate user actions in hovering over the workspace and then clicking and dragging a cursor to create a design element in the workspace in which the user intends to insert a new design element to be included in the webpage, in accordance with an embodiment of the disclosure;

[0016] Fig. 5B shows enlarged views of the Friendly HTML and CSS panels shown in Fig.5A and the HTML and CSS code that Addit generates responsive to items generated by theC321-P1788-PCT 13-NOV-2025user actions and listed in the friendly panels, in accordance with an embodiment of the disclosure;

[0017] Figs. 6A and 7A schematically illustrate user actions in renaming a div design element’ s class: changing “untitled- 1” to “bouquet-item”, in accordance with an embodiment of the disclosure;

[0018] Figs. 6B and 7B show enlarged views of the Friendly HTML and CSS panels shown in Figs. 6A and 7A and corresponding HTML and CSS code that Addit generates responsive to changing “untitled- 1” to “bouquet-item”, in accordance with an embodiment of the disclosure;

[0019] Figs. 8 and 9A schematically illustrate user actions editing the dimension of the top margin and changing the background color respectively of the div element assigned to class ‘bouquet item’ shown in Fig. 7A, in accordance with an embodiment of the disclosure;

[0020] Fig. 9B shows enlarged views of the Friendly HTML and CSS panels shown in Fig.9 A, and corresponding HTML and CSS code that Addit generates, in accordance with an embodiment of the disclosure;

[0021] Figs. 10 - 13 A schematically show user actions in selecting and creating an asset nested inside the “bouquet-item” div element shown in Fig 7A, in accordance with an embodiment of the disclosure;

[0022] Fig. 13B shows enlarged views of the Friendly HTML and CSS panels shown in Fig.13 A, and corresponding HTML and CSS code that Addit generates in accordance with an embodiment of the disclosure;

[0023] Figs. 14A & 15A schematically illustrate user actions in renaming the asset element’s class: changing “image- 1” to “product-image”, in accordance with an embodiment of the disclosure;

[0024] Fig. 14B show enlarged views Friendly HTML and CSS panels shown in Figs. 14A respectively and corresponding HTML and CSS code that Addit generates, in accordance with an embodiment of the disclosure

[0025] Fig. 15B show enlarged views of the Friendly HTML and CSS panels shown in Fig.15A and corresponding HTML and CSS code that Addit generates, in accordance with an embodiment of the disclosure;

[0026] Figs. 16 -19A schematically show user actions in adding descriptive text element for the bouquet image added to the webpage design, in accordance with an embodiment of the disclosure;C321-P1788-PCT 13-NOV-2025

[0027] Figs. 18B and 19B show enlarged views of the of the Friendly HTML and CSS panels shown in Figs. 18A and 19A respectively and corresponding HTML and CSS code that Addit generates responsive to items listed in the friendly panels, in accordance with an embodiment of the disclosure;

[0028] Figs. 20A -24A schematically show user actions in adding “Add to Cart” button in the webpage design, in accordance with an embodiment of the disclosure;

[0029] Figs. 23B and 23C show enlarged views of the Friendly HTML and CSS panels shown in Fig. 22 A and corresponding HTML and CSS code that Addit generates responsive to items listed in the friendly panels, in accordance with an embodiment of the disclosure;

[0030] Fig. 24B shows enlarged views of the Friendly HTML and CSS panels shown in Fig.24A and corresponding HTML code that Addit generates responsive to items listed in the friendly panels, in accordance with an embodiment of the disclosure;

[0031] Fig. 25 shows a flow diagram that schematically illustrates cooperation of the Addit modules during use of Addit to design a webpage and automatically generate HTML and CSS code in real time for rendering a webpage, in accordance with an embodiment of the disclosure;

[0032] Fig. 26 schematically show a user equipment that a user uses to interact with an Addit system to generate HTML and CSS code, in accordance with an embodiment of the disclosure.DETAILED DESCRIPTION

[0033] In the discussion, unless otherwise stated, adjectives such as “substantially” and “about” modifying a condition or relationship characteristic of a feature or features of an embodiment of the disclosure, are understood to mean that the condition or characteristic is defined to within tolerances that are acceptable for operation of the embodiment for an application for which it is intended. Wherever a general term in the disclosure is illustrated by reference to an example instance or a list of example instances, the instance or instances referred to are by way of nonlimiting example instances of the general term, and the general term is not intended to be limited to the specific example instance or instances referred to. The phrase “in an embodiment”, whether or not associated with a permissive, such as “may”, “optionally”, or “by way of example”, is used to introduce for consideration an example, but not necessarily a required configuration of possible embodiments of the disclosure. Unless otherwise indicated, the word “or” in the description and claims is considered to be the inclusive “or” rather than the exclusive or, and indicates at least one of, or any combination of more than one of items it conjoins. Whereas features and actions of flow diagrams shown in the figures and discussed in the specification are presented and discussed substantially in an ordered sequence of flowC321-P1788-PCT 13-NOV-2025diagram blocks, the features and actions in a given flow diagram may be undertaken in an order other than that presented in the flow diagram and may comprises blocks additional to those shown.

[0034] Fig. 1 shows a high-level flow diagram 200 comprising steps for generating a webpage design required by a browser to render the webpage and steps of a process by which a browser processes the files to render the webpage, in accordance with prior art;

[0035] Fig. 2 shows a simulated schematic “floral webpage” 18 for marketing floral bouquets for which Figs. 3 A-24B illustrate using Addit to generate HTML and CSS code that a browser may use to produce the webpage, in accordance with an embodiment of the disclosure;

[0036] Fig. 3 A schematically shows an Addit webpage construction display 20 that a user may use to design and generate HTML and CSS code for rendering a webpage, such as webpage 18, in accordance with an embodiment of the disclosure. A user interacts with Addit and Addit features via any of various interface devices such as a mouse, keyboard, touch screen, or a visual and / or voice gesture recognition system. Hereinafter, for convenience of presentation it is assumed that a user operates Addit via a mouse and keyboard.

[0037] Construction display 20 optionally comprises a Workspace 30, associated with a tool bar 40 in the header, a Friendly HTML display panel 32, and a Friendly CSS display panel 34. Tool bar 40 comprises a set of tools optionally comprising a plurality of design element tools, and an Addit cursor. Each element tool represents a particular webpage design element or a set of design elements sharing a common characteristic. The user may use the Addit cursor to select a design element tool and place and position the design element that the tool represents in Workspace 30 to include the design element in the webpage - for example as a parent, child, or sibling design element. Optionally, in response to selecting a given design element tool, the cursor changes shape to a predetermined icon representing the design element or is associated with an icon representing the design element. For an element tool that represents a set of more than one design element, selecting the tool presents the user with a default design element that belongs to the set of design elements represented by the design element tool that the user may place and manipulate in Workspace 30. If the user desires to include a particular design element in the webpage other than the default element, optionally after placing the default design element in Workspace 30, clicking on the default element generates a drop down menu display from which the user can select the other design element. Responsive to placement of a design element in Workspace 30 the HTML editor (not shown) lists an HTML tag that references the element in the Friendly HTML panel 32.C321-P1788-PCT 13-NOV-2025

[0038] By way of example, tool bar 40 as shown in Fig. 3 A comprises a a cursor 41, an HTML native element tool 42, an asset element tool 43, a type element tool 44, and component element tool 45 represented by their respective icons. Native element tool 42 may be used to add to a webpage a non-asset design element selected from a set of native design element natively definable and supported by conventional HTML syntax. A native design element may be represented by an HTML entity referred to as a binary tag that includes a pair of start and end tags, such as by way of example and , and and , , which delimit a container comprising design element content. A native design element may be represented by an HTML entity referred to as a unitary, self-containing tag such as , <input> or <link>. Asset tool 43 may be used to select and add an external digital resource from a plurality of accessible resources to a webpage design. The external resource may be added by embedding the resource content into the HTML code, or by coding HTML to link to the resource or cause a browser to retrieve the resource via a URL (Uniform Resource Locator) during rendering. Type element tool 44 is used to include a design element nested in a parent element so that display of the nested element is governed by display parameters defined for the parent. Clickable element tool 45 may be used to include a user interface component, such as an action button, that triggers a specific user action and / or executes a particular user intention.

[0039] Addit tracks and lists webpage design elements that are included in a webpage, such as webpage 18 in Friendly HTML panel 32, which provides a simple “friendly” version of renderable HTML code that Addit generates responsive to a user using Addit to design webpage 18. Friendly HTML panel 32 optionally displays small icons to represent HTML tags for design elements that Addit determines are to be included in webpage 18 responsive to user actions in Workspace 30. The friendly panel may associate the icons with basic elucidating text. In an embodiment, Addit is configured to display in response to a user prompt an HTML code panel 33, (not shown in Fig. 3A, shown in Fig. 3B and a selection of figures following Fig. 3 A) that presents the full, renderable ready HTML code corresponding to the friendly code.

[0040] Addit tracks and lists visual features (as noted above, visual characterizations and relative spatial relationships) that the user determines to characterize webpage design elements that the user introduces to webpage 18 in Friendly CSS panel 34. The Friendly CSS panel optionally displays values of layout properties - which belong to spatial relationships - of a webpage design element selected for characterization in a box model. Below the box model Friendly CSS panel 34 displays values for optionally a full list of visual features determined by the user for the selected design element, grouped by feature types. A CSS code panel 35 (shown in Fig. 3B and in a selection of figures following Fig. 3B), displays renderable CSSC321-P1788-PCT 13-NOV-2025code that affects how the selected HTML design element is rendered as CSS declarations following a CSS selector, which associates the declarations with the selected design element.

[0041] In an embodiment, to determine and / or modify a value of a visual feature characterizing a design element in workspace 30 the user may select the design element by hovering cursor 41 over the design element. Selecting the design element may cause the cursor icon to change to or associate with, generically referred to as morphing to, an icon representing the feature, and Friendly CSS panel 34 to display a list of visual features and their respective values that are relevant for characterizing the design element. A value for a listed feature may be determined or edited by clicking on the value displayed in friendly CSS panel and using a keyboard to edit the value. Spatial relationships, such as layout features, of the design element may be determined by dragging the design element or an element of the design element shown in Workspace 30 to a desired location or position. Relevant visual features for a given design element may include color. For such design elements, Friendly CSS panel may display a color palette from which a desired color for the given element may be selected for the given element by clicking on the color in the palette.

[0042] Fig. 3 A shows construction display 20 after the user using Addit to generate webpage 18 shown in Fig. 2 has opened an HTML file and a linked CSS file for the webpage to initiate the design process for webpage 18 and used component tool 45 to insert a placeholder internal header for receiving a header to be determined by the user. The Friendly HTML panel 32 lists the internal header placeholder alongside the icon of clickable element 45. Since at the design stage assumed for Fig. 3 A, the user has not yet selected a particular header, Friendly CSS panel 34 is empty. Fig. 3B shows enlarged images of Friendly HTML and CSS panels 32 and 34 and corresponding HTML and CSS code shown in HTML and CSS panels 33 and 35 respectively adjacent to panels 32 and 34.

[0043] Figs. 4 and 5A illustrate user actions in creating an HTML div design element that the user intends to stylize and include in webpage 18. In Fig. 4 the user (not shown) has used Addit cursor 41 to select and click on design element tool 42 and hover cursor 41 over workspace 30. In response, Addit displays a set of guidelines 36 at initial left and top margins relative to an area of workspace 30 for a new div element, and a crosshair cursor 72 at a junction of the guidelines. In Fig. 5A the user clicks to create the new HTML div element as a div design element 50 and then drags cursor 72 to the right and down to determine desired dimension for element 50 and create an ‘untitled-1” class for the element. The margins and desired dimensions of element 50 are written in the “untitled- 1” class as well as a default backgroundcolor, optionally as defined in a design system (DS, not shown), which Addit uses in designingC321-P1788-PCT 13-NOV-2025webpage 18. Friendly HTML panel 32, represents new div element 50 by the icon for tool 42 alongside “untitled-1”. Friendly CSS panel 34 shows the style declarations that currently affect the appearance of element 50: margins, dimensions of the element’s layout, and color of the element as a default color E6E6E.

[0044] Fig. 5B shows the Friendly HTML and CSS codes in Friendly HTML and Friendly Panels 32 and 34 enlarged for improved legibility. Adjacent to HTML and Friendly Panels 32 and 34, Fig. 5B shows corresponding HTML and CSS code that Addit generates responsive to the data shown in the Friendly panels in HTML and CSS Panels 33 and 35 respectively.

[0045] In Fig. 6A after the user releases the drag with cursor 72 shown in Fig. 5A, Addit displays a dialog window 37 in dive design element 50 that allows the user to change the “untitled-1” class name of the element to a desired name or replace it with an existing class. The content of panels shown enlarged in Fig. 6B has not yet changed and is the same as the content in Fig. 5B. Fig. 7A shows Addit construction display 20 after the user has replaced the name “untitled- 1” to “bouquet-item” by typing bouquet-item in dialog window 37 and Addit has replaces “untitled-1” everywhere with the selected name as shown in Fig. 7B.

[0046] In Fig. 8 the user hovers cursor over the new element 50 top margin 51. In response Addit changes the cursor to a margin resize cursor 73 and the margin-top area of the element appears colored in a half transparent predetermined arbitrary color to indicate it is in an editable state. Clicking and dragging cursor 73 allows the user to change the width of the top margin. Friendly CSS Panel 34 in Fig. 8 shows that the user has moved cursor 73 to increase the size of the top margin from 24px shown in the Friendly CSS panel 34 in Figs. 7A and 7B to 40px.

[0047] In Fig. 9A, while the div element 50 is still selected, the user clicks on the “backgroundcolor” declaration line 61 in an Appearance panel 60 to cause Addit to display a color palette 62 displaying a color picker 63 which the user may use to select a new background color for element 50. The figure shows that the user has selected a new background color to replace the default background color schematically shown in Fig. 5A to color #CED5CD shown clearly in enlarged views of Friendly CSS panel 34 and CSS code panel 35 in Fig. 9B.

[0048] Figs. 10-13A schematically show user actions in selecting an asset and creating an Asset element - in this scenario, an image of a bouquet - inside design element 50 shown in Friendly HTML panels 32 in the figures, in accordance with an embodiment of the disclosure.

[0049] In Fig. 10 the user uses Addit cursor 41 to select Asset tool 43 which causes Addit to open a dialog window 38 shown in Fig. 11 that displays a menu of images from which the user may select an image for including as an asset design element as a child element nested in designC321-P1788-PCT 13-NOV-2025element 50 as parent in webpage 18. In the figure a circle indicates that the user has selected an image 52.

[0050] In Fig. 12, following the selection of image 52, and responsive to the user hovering Addit cursor 41 over element 50, Addit changes the cursor to a cross hair 72 located at a junction of default guide lines 36 at default margins defined in the design system (DS) used for generating code for webpage 18. Cross hair 72 is optionally associated with an adjacent thumbnail of image 52 that was selected as shown in Fig. 11.

[0051] Fig. 13 A, shows design element 50 after the user has clicked on and dragged cursor 72 to determine a desired size for the image in webpage 18 as a design element having a class attribute ‘image-1’ defined by the DS. Friendly HTML panel 32 lists asset image 52 as an “image-1” class design element adjacent the icon representing asset tool 43. CSS code shown in Friendly CSS panel 34 includes location and size declarations for asset element 52 in webpage 18. Fig. 13B shows enlarged views of Friendly HTML and CSS panels 32 and 34 and associated HTML and CSS Panels 33 and 35 showing code and data generated by the user actions shown in Figs. 10-13A in accordance with an embodiment of the disclosure.

[0052] Figs. 14 -15B illustrate user steps in renaming the class applied to image 52 from the default class image- 1 to “product-image”. In Fig. 14 user action in moving and releasing the drag of cursor 72 shown in Fig. 13 A determines a final position and size of the asset element 52 in webpage 18. Upon releasing the drag of cursor 72 Addit displays a dialog window 38 in which the user may change the class of asset design element 52. Fig. 15 A shows Addit construction display 20 after the user has changed the class of asset 52 from “image-1” to “product-image”. Fig. 15B shows enlarged views of the panels showing data generated responsive to user actions shown in Fig. 14 and 15 A. Fig. 15B shows Friendly HTML and CSS panels 32 and 34 and associated HTML and CSS Panels 33 and 35 showing code and data generated by the user actions shown in Figs. 14-15B in accordance with an embodiment of the disclosure.

[0053] Figs. 16 -19A schematically show user actions in adding descriptive text for the asset element 52 in webpage 18 and corresponding changes that Addit generates to HTML and CSS code, in accordance with an embodiment of the disclosure.

[0054] In Fig. 16 the user uses Addit cursor 41 to select type element tool 44 and in Fig. 17 hovers over the div element 50 next to asset element 52. Addit recognizes the user’s choice of tool 44 and manipulation of Addit cursor 41, and in response changes the Addit cursor to cross hair cursor 72 at an intersection of guidelines 36, to introduce a type design element as a child element governed by display parameters of the parent div design element 50. Since the childC321-P1788-PCT 13-NOV-2025element is to be governed by display parameters of div element 50, Addit generates a display:flex declaration for element 50. And since the default design element that tool element 44 represents is, optionally a text box, Addit assumes that the child element that the user intends to nest in div element 50 is a text box. Furthermore, since the position at which Addit cursor 41 was hovered before Addit morphed it to cross hairs 72 indicated that the text box is to be located adjacent to and to the right of asset 52, Addit recognizes that the text box is a sibling to asset 52. To create the text box as a design element to be included in webpage 18 the user drags cross hair cursor 72 to the right and down and clicks the cursor to establish an area footprint for the text box inside div design element 50 and to the right of sibling asset element 52.

[0055] Fig. 18A shows the textbox as a design element 54 having a default “babel” text, class “text-1”, dimensions and visual formatting determined by location from the position of cross hair 72 when clicked and data in the DS that Addit uses for webpage 18. Friendly HTML and CSS panels 32 and 34 display additions to HTML and CSS code that Addit generates responsive to user actions shown in Figs. 16-18A in the friendly format that Addit uses in accordance with an embodiment of the disclosure. Fig. 18B shows enlarged views of the Friendly panels adjacent to HTML and CSS Panels 33 and 35. After releasing the drag and using a dialog window (not shown) to change the class of design element 54 from “text-1” to “info-text”. The design state of webpage 18 after changing the class to info-text is shown in Figs. 19A-19B.

[0056] Figs. 20 -24A schematically show user actions in using the component instance tool 45 to add a component instance of a button in the webpage design, to complete design of webpage 18, in accordance with an embodiment of the disclosure.

[0057] Fig. 20 schematically illustrates the user using Addit cursor 41 to select component tool 45 to place a component instance - an action button - from the DS into webpage 18. In response to the selection, as shown in Fig. 21 Addit opens a dialog window 39 for an action button having class “flora-button”. Fig. 22 shows reactions of Addit to user choice of “flora-button” in dialog window 39: morphing Addit cursor 41 to cross hair 73 for use in placing and establishing a presence footprint, that is a size, for flora-button; recognizing flora-button as a sibling in design element 54; and determining margins for flora-button.

[0058] Fig. 23 A shows the design state of webpage 18 in Workspace 30 after the user has dragged cross hair 72 to establish presence of flora-button as an instance 56 having a class “#button001” element in design element 54, having a default text "Label" adjacent the icon for component tool 45 in Friendly HTML Panel 32. Addit links instance 56 to display features forC321-P1788-PCT 13-NOV-2025layout and appearance in the CSS file associated with HTML as shown in Friendly Panel 34. Figs. 23B and 23C shows enlarged views respectively of the Friendly panels 32 and 34 and in HTML and CSS Panels 33 and 35 HTML and CSS code respectively that Addit generates responsive to user actions shown in Fig. 23 A.

[0059] In Fig. 24 the user has clicked on button design element 56. In response Addit allows the user to edit the default text “Label” and change it to “Add to Cart”. Addit displays the change in declarations shown in Friendly HTML Panel 32 and in Friendly CSS Panel 34. Fig.24B show an enlarged view Friendly panel 32 and in HTML Panel 33 HTML code that Addit generates responsive to user actions shown in Fig. 23 A.

[0060] In an embodiment, to implement and facilitate operation of Addit for automatically generating HTML and CSS code usable to render a webpage, Addit optionally comprises and / or has access to computer executable instructions and data, “software”, for instantiating and providing functionalities for a set of Addit modules. In an embodiment the set of computer modules comprises HTML and CSS editors, a design system (DS), an event detector, and a display manager.

[0061] When a user operates user equipment (UE), to open and use Addit to automatically generate HTML and CSS codes for rendering a website, Addit invokes Addit’ s display manager to generate on the UE screen an Addit website construction display (WCD). Optionally the WCD is similar to WCD 20 shown in Figs 3A-24B, comprising by way of example a workspace optionally flanked by Friendly HTML and CSS panels. Addit creates and links HTML and CSS files and links the HTML file to a design system. Addit instantiates and couples the event detector to human interface (HI) devices of the UE such as a keyboard, mouse, and computer display, to receive HI signals from the devices that the user generates by operating the devices to design a webpage using Addit. The event detector is configured to process an HI signal it receives to detect if the signal is a presentation event signal or a coding event signal. A presentation event signal indicates that an addition or change, hereinafter referred to as an update, is required to be made to the WCD. A coding event signal indicates that an addition or change, an update, is required to be made to HTML and / or CSS code provided by Addit. A signal may be a compound event signal indicating that an update to the WCD and coding are required. If the signal is a WCD presentation event signal, Addit evokes the display manager, which is configured to dynamically control display features of the WCD, to determine and implement the required update to the WCD. If the signal is an HTML and / or CSS coding event signal, Addit evokes the HTML and / or CSS editor / s to determine and implement the code update. Addit optionally stores detected WCD and coding events and userC321-P1788-PCT 13-NOV-2025actions that generate the WCD and coding events in an event history file. The HTML and CSS editors generate HTML and CSS code responsive to detected coding events and store the code in HTML and CSS files.

[0062] Fig. 25 shows a flow diagram 100 that schematically illustrates cooperation of the Addit modules during use of Addit to design a webpage and automatically generate in real time HTML and CSS code for rendering the webpage.

[0063] A block 102 shows a set of modules optionally comprising HTML and CSS editors, a design system (DS), a display manager, and an event detector that Addit instantiates when a user opens Addit to automatically generate code for rendering a webpage. The modules comprise executable software that the user’s UE uses to provide functionalities that Addit provides responsive to the user operating HI devices of the UE,

[0064] In a block 104 Addit evokes the display manager module to generate an interactive Addit WCD on the user’s UE display screen. In a block 106 Addit receives human interface (HI) signals from HI devices of the user’s UE that the user uses to interact with the Addit WCD. By way of example, an HI signal may be a signal generated responsive to clicking a mouse to select a design element tool, hovering a cursor over a website design element shown in the WCD workspace, typing data in a text box, or moving a cursor to amend a design element shown in the WCD workspace. Optionally, in a block 108 Addit logs HI signals with respective time stamps for times at which the signals were generated into the Event History File.

[0065] In an embodiment in a block 110 the event module processes an HI signal to determine a signal type for the signal: presentation event signal; coding event signal; or compound signal and proceeds to a decision block 112. If the HI signal is coding or compound event signal Addit optionally proceed to a block 114. In block 114 Addit evokes the HTML and / or CSS editor / s to update HTML and / or CSS code provided by Addit and optionally proceeds to a decision block 116. If the signal is a presentation or compound signal, decision block 116 directs Addit to a block 118. In block 118 Addit evokes the display manager to update the Addit WCD and if requested by the user to display HTML and / or CSS code provided by Addit. Optionally Addit determines that from block 118 Addit proceeds to a block 120 which returns Addit to block 110 to process another HI signal.

[0066] If on the other hand in block 110 the HI signal has been found to be neither a coding or compound event signal, in decision block 112 Addit is directed to skip block 114 and proceed to block 116. And if in block 116 the signal was found in block 110 not be a presentation or compound event signal Addit proceeds to a block 120 which returns Addit to block 110 to process another HI signal.C321-P1788-PCT 13-NOV-2025

[0067] Fig. 26 schematically show a UE 300 that a user uses to interact with an Addit system 400 to generate HTML and CSS code, in accordance with an embodiment of the disclosure.

[0068] UE 300 comprise HI devices 302, such for example a mouse, keyboard, and camera and a computer screen 304 which, whereas it is considered a HI is shown separate from HI 302 fort convenience of presentation. Addit System 400 optionally comprises an event detector module 202, HTML and CSS editor modules 404, and 406 respectively, a display manager 408, and a memory 410 optionally having separate HTML and CSS files 411 and 412 respectively. Arrows 500 schematically represent direction of signal and information flow in accordance with an embodiment of the disclosure.

[0069] As indicated by arrows 500, HI signals generated by user activity are transmitted to event detector 402 which process the signals and transmits processed presentation event signals to display manager 408, HTML code event signals to HTML editor 404 and CSS code event signals to CSS editor 406. In an embodiment HTML editor 404 and CSS editor 406 process the signals they receive to generate HTML and CSS code respectively, which they forward to for storage in HTML file 411 and CSS file 412 respectively. The editors may also transmit code they generate to display manager 408 for use in displaying code in Friendly HTML panel 32, HTML panel 33, Friendly CSS panel 34 and CSS panel 35.

[0070] It is noted that whereas embodiments of the disclosure are described with reference to providing HTML and CSS software that may be used by a computer to render and operate a webpage, inventions in accordance with an embodiment of the disclosure are not limited to webpages and HTML and CSS code for webpages. For example, Addit may be configured to generate code for other platforms, such as SwiftUI, UIKit, Compose or XML.

[0071] There is therefore provided in accordance with an embodiment of the disclosure A system for translating a user’s activity using user equipment (UE) to design an image into software useable by a computer to render the image, the system comprising: a display manager comprising software useable by a computer to generate an image construction display on a user equipment (UE) screen, the construction display comprising: an image workspace that displays design elements that the user creates and stylizes for inclusion in the image; first graphic design tool icons representing design elements that the user uses to create in the workspace design elements that the icons represent for inclusion in the image; second graphic design tools that the user uses to select visual features that stylize the design elements that the user creates in the workspace using the graphic design tool icons; a first code editor comprising software that recognizes the design elements that the user creates in the workspace and generates a first code that declares the design elements and their logical features in accordanceC321-P1788-PCT 13-NOV-2025with syntax rules that govern how the the declarations are written in the first code; a second code editor comprising software that recognizes the visual features that the user selects for the created design elements and generates a second code that represents and associates the selected visual features with the design elements they characterize in accordance with syntax rules that govern how the visual features are written in the second code; wherein the first and second codes are generated in real time responsive to the user actions in designing the image and are useable by a computer to render the image.

[0072] Optionally, the construction display comprises a first panel that displays the first code in simplified form. Optionally the simplified form represents the recognized design elements by icons. In an embodiment design elements in the simplified form are labeled by mnemonics. In an embodiment the construction display comprises a second panel that displays for the user the visual features that the user selects for the design elements. In an embodiment the display manager is configured to display responsive to a user request, the first code in computer renderable form. In an embodiment the display manager is configured to display responsive to a user request, the second code in computer renderable form.

[0073] In an embodiment the system comprises an event detector having software configured to receive and process signals generated by human interface (HI) devices that the UE includes responsive to the user using the HI devices to interact with the system and design the image. Optionally, the event detector processes the HI signals to determine if an HI signal indicates an event that requires that the system respond to generate first or second code. Optionally, the event detector processes the HI signal indicating an event to determine for the signal an event signal type from at least one or any combination of more than one of a set of event signal types.

[0074] Optionally, the set of event signal types comprises a presentation event signal, a coding event signal, and a compound event event signal. In an embodiment responsive to a presentation event signal the display manager modifies or adds an image displayed on the screen. In an embodiment responsive to a coding event signal the first and / or second code editor / s generates and / or modifies first and / or second code respectively. In an embodiment responsive to a compounding event signal the display manager modifies an image on the UE screen and the first and / or second code editor / s generates and / or modifies first and / or second code respectively.

[0075] In an embodiment the first code is HTML code. In an embodiment the second code is CSS code.

[0076] There is further provided in accordance with an embodiment of the disclosure system for translating a user’s activity designing an image into software useable by a computer toC321-P1788-PCT 13-NOV-2025render the image, the system comprising: an image workspace that displays design elements that a user creates and stylizes for inclusion in the image; first graphic tool icons representing design elements that the user uses to create in the workspace design elements that the icons represent for inclusion in the image; second graphic tools that the user uses to select characterizing features that stylize the design elements the user creates in the workspace using the graphic tool icons; a first editor that recognizes the design elements represented by the first graphic tools and represents the design elements that the user creates in the workspace by symbols in a first code in accordance with syntax rules that govern how the symbols are written in the first code; a second editor that recognizes the characterizing features that the user selects for the created design elements and generates a second computer useable code that represents and associates the selected characterizing features with the design elements they characterize in accordance with syntax rules that govern how the characterizing features are written in the second code; wherein the first and second codes are generated in real time responsive to the user actions in designing the image and are useable by a computer to render the image. Optionally the system comprises a first panel that displays for the user a list of the design elements that the user creates in the workspace. In an embodiment the system comprises a second panel that displays for the user the characterizing features that the user selects for the design elements.

[0077] In the description and claims of the present application, each of the verbs, “comprise” “include” and “have”, and conjugates thereof, are used to indicate that the object or objects of the verb are not necessarily a complete listing of components, elements or parts of the subject or subjects of the verb.

[0078] Descriptions of embodiments of the invention in the present application are provided by way of example and are not intended to limit the scope of the invention. The described embodiments comprise different features, not all of which are required in all embodiments of the invention. Some embodiments utilize only some of the features or possible combinations of the features. Variations of embodiments of the invention that are described, and embodiments of the invention comprising different combinations of features noted in the described embodiments, will occur to persons of the art. The scope of the invention is limited only by the claims.

Claims

C321-P1788-PCT 13-NOV-2025CLAIMS1. A system for translating a user’ s activity using user equipment (UE) to design an image into software useable by a computer to render the image, the system comprising:a display manager comprising software useable by a computer to generate an image construction display on a user equipment (UE) screen, the construction display comprising:an image workspace that displays design elements that the user creates and stylizes for inclusion in the image;first graphic design tool icons representing design elements that the user uses to create in the workspace design elements that the icons represent for inclusion in the image;second graphic design tools that the user uses to select visual features that stylize the design elements that the user creates in the workspace using the graphic design tool icons; a first code editor comprising software that recognizes the design elements that the user creates in the workspace and generates a first code that declares the design elements and their logical features in accordance with syntax rules that govern how the the declarations are written in the first code;a second code editor comprising software that recognizes the visual features that the user selects for the created design elements and generates a second code that represents and associates the selected visual features with the design elements they characterize in accordance with syntax rules that govern how the visual features are written in the second code;wherein the first and second codes are generated in real time responsive to the user actions in designing the image and are useable by a computer to render the image.

2. The system according to claim 1 wherein the construction display comprises a first panel that displays the first code in simplified form.

3. The system according to claim 2 wherein the simplified form represents the recognized design elements by icons.

4. The system according to claim 2 wherein the design elements in the simplified form are labeled by mnemonics.

5. The system according to claim 1 wherein the construction display comprises a second panel that displays for the user the visual features that the user selects for the design elements.C321-P1788-PCT 13-NOV-20256. The system according to claim 1 wherein the display manager is configured to display responsive to a user request, the first code in computer renderable form.

7. The system according to claim 1 wherein the display manager is configured to display responsive to a user request, the second code in computer renderable form.

8. The system according to claim 1 and comprising an event detector having software configured to receive and process signals generated by human interface (HI) devices that the UE includes responsive to the user using the HI devices to interact with the system and design the image.

9. The system according to claim 8 wherein the event detector processes the HI signals to determine if an HI signal indicates an event that requires that the system respond to generate first or second code.

10. The system according to claim 9 wherein the event detector processes the HI signal indicating an event to determine for the signal an event signal type from at least one or any combination of more than one of a set of event signal types.

11. The system according to claim 10 wherein the set of event signal types comprises a presentation event signal, a coding event signal, and a compound event event signal.

12. The system according to claim 11 wherein responsive to a presentation event signal the display manager adds or modifies an image displayed on the screen.

13. The system according to claim 11 wherein responsive to a coding event signal the first and / or second code editor / s generates and / or modifies first and / or second code respectively14. The system according to claim 11 wherein responsive to a compounding event signal the display manager modifies an image on the UE screen and the first and / or second code editor / s generates and / or modifies first and / or second code respectively.

15. The system according to claim 1 wherein the first code is HTML code.C321-P1788-PCT 13 -NOV-202516. The system according to claim 1 wherein the second code is CSS code.

17. A system for translating a user’s activity designing an image into software useable by a computer to render the image, the system comprising:an image workspace that displays design elements that a user creates and stylizes for inclusion in the image;first graphic tool icons representing design elements that the user uses to create in the workspace design elements that the icons represent for inclusion in the image;second graphic tools that the user uses to select characterizing features that stylize the design elements the user creates in the workspace using the graphic tool icons;a first editor that recognizes the design elements represented by the first graphic tools and represents the design elements that the user creates in the workspace by symbols in a first code in accordance with syntax rules that govern how the symbols are written in the first code;a second editor that recognizes the characterizing features that the user selects for the created design elements and generates a second computer useable code that represents and associates the selected characterizing features with the design elements they characterize in accordance with syntax rules that govern how the characterizing features are written in the second code;wherein the first and second codes are generated in real time responsive to the user actions in designing the image and are useable by a computer to render the image.

18. The system according to claim 17 and comprising a first panel that displays for the user a list of the design elements that the user creates in the workspace.

19. The system according to claim 17 and comprising a second panel that displays for the user the characterizing features that the user selects for the design elements.

Images