AU2020200471A1

AU2020200471A1 - Web Application Builder

Info

Publication number: AU2020200471A1
Application number: AU2020200471A
Authority: AU
Inventors: Srimanta Bhattacharya
Original assignee: Individual
Current assignee: Individual
Priority date: 2020-01-23
Filing date: 2020-01-23
Publication date: 2021-08-12

Abstract

A system for a Web Application Builder for web page/web application file authoring, creating and editing, implemented on at least one computer device, the computer having at least one processor, memory, an invented application writer engine to create web page/web application files, cascading stylesheet files, javascript files and other related files and a web developer interface for integrated web development including: a project editor for creating and managing (i) web application projects (ii) a web page creator/editor for web developer to provide instructions in the form of "design strings" to the application writer engine to generate web application files: asp, aspx, php, jsp, cfml, html etc, cascading stylesheet files (.css) and javascript files (.js) (iii) a codeset editor for writing, editing, saving and storing reusable related blocks of code as "codeset" (iv) a web preview console: to preview web page/web application page, javascript files and cascading stylesheet files created by the invented system. SHEET 1OF 6 PROJECT INTERFACES PROJECT DATA * PAGE LIST 4 CODE SET INTERFACE 5 PAGE INTERFACE 6 CUSTOM PAGE CSS CUSTOM JAVASCRIPT DESIGN STRING 8 9 APPLICATION WRITER ENGINE FILES 10 APPLICATION FILES CSS FILES JAVASCRIPT FILES OTHER FILES FIGURE 1 WEB APPLICATION DEVELOPER WORKFLOW

Description

SHEET 1OF 6

PROJECT INTERFACES PROJECT DATA * PAGE LIST

4

CODE SET INTERFACE 5

PAGE INTERFACE 6

CUSTOM PAGE CSS CUSTOM JAVASCRIPT

DESIGN STRING 8

9

APPLICATION WRITER ENGINE

FILES 10

APPLICATION FILES CSS FILES JAVASCRIPT FILES OTHER FILES

FIGURE 1

WEB APPLICATION DEVELOPER WORKFLOW

Response to a formalities direction

AUSTRALIA PATENTS ACT 1990

COMPLETE SPECIFICATION STANDARD PATENT WEB APPLICATION BUILDER

The following statement is a full description of this invention, including the best method of performing it known to me:

WEB APPLICATION BUILDER TECHNICAL FIELD

[0001] This disclosure relates to a web application builder for the purpose of creating, editing and management of web application file(s)/web page(s), cascading stylesheet files and javascript files. More specifically, it relates to the invented system and the use of invented methods and processes to accomplish web application development/web page creation and project management tasks.

BACKGROUND (PRIOR ART)

[0002] Typically, a web page or a web application file may contain: meta tags, html tags and elements, application code written in a web application language (vbscript, c#, cfml, php, xml, ruby, html etc), sql code, javascript code, cascading stylesheet code, links to cascading stylesheet code stored in seperate files with (.css extension), and import directives for import of font files etc. In most cases, except for the cascading stylesheet code andjavascript code, all code are written on the same web page/web application file (.html, .asp, .aspx; .cfm, .php, .jsp etc).

[0003] Typically, a web developer works on a web application file by creating a new file or opening an existing web application file in a web editor of her/his choice. The web developer then writes html code and web application code using a web application language (vbscript, c#, cfml, php, xil, ruby, html or any other language) directly into the web application file. The web developer may also use copy and paste or drag and drop functionality provided by the web editor to re-use and add previously written and stored code (snippets) on the file itself.

[0004] In order to edit the web application file(s), the web developer has to open the file in a web editor, make changes and save it.

[0005] Typically, existing web editors require opening of individual web application files for editing. When a web application developer needs to edit or replace a block or section of code with another, he/she has to first locate and select the section of the block of code that needs to be replaced and then replace it with a different set of block of code, by either typing directly into the web application file or by copying and pasting code from another web application file or by dragging and dropping previously stored code blocks (snippets), thus making the task of finding and replacing tedious and time consuming.

[0006] The task becomes even more tedious where numerous files have to be altered and edited. Using editing tools such as "find & replace" across multiple files does not always provide a safe solution and can lead to irrevocable errors.

[0007] It is recommended that page content be kept seperate from layout and presentation. Html is a markup language to present content and not meant for styling. Cascading stylesheets provide "layout and styling" instructions to the browser. Thus, along side a web application file, one or more cascading stylesheet files may be created and used for rendering and styling a web page.

[0008] When a web developer wishes to reuse application code or layout code (html tags: div etc) written on a file, he/she first has to find the relevant code on the source file. The relevant code block can then be, copied and pasted or dragged and dropped in the destination file. The web developer then has to also locate the file where the stylesheet declarations are written and then find the cascading stylesheet code related to the previously copied html section and copy and paste it in the destination cascading stylesheet file.

[0009] Multiple manual actions are therefore required to accomplish simple tasks such as page editing. Mundane tasks like these, consume time and attention of the web developer and constitutes inefficient usage of the computer/computing device.

[0010] Where a web developer wishes to modify another block of code or replace a snippet with another, for the same or a different project, the time consuming processes described above has to be repeated.

[0011] Over a period of time a web developer will have created a large number of web application files. While the web editors assist in creating the web application files, no records are kept by the web editors about its contents. Thus in order to find a block of code written on a web application file, the file needs to be manually opened in an editor and searched. Thus without looking at web page(s)/web application files, it would be impossible to identify blocks of code and the snippets used in the web application file(s) /web page(s) unless the web developer specifically notes it on a document or the files are opened in an editor and the code blocks are manually searched and identified in the source code. This is a cumbersome process requiring time, attention and effort and therefore again constitutes inefficient utilisation of a computing device.

[0012] Where there are a large number of web pages/web application files, the task of finding specific code used in different pages is difficult and tedious under normal circumstances and even more so when a new developer is entrusted with the tasks.

[0013] Other than the html code, web application code, javascript code or cascading stylesheet code being stored in the respective files: html files, web application files (cfm, php etc), cascading stylesheet files (.css) or javascript files (.js), there is no mapping feature/tool provided by web editors to identify and/or list blocks of code that are used in a web application file and their exact location within the web application file or html file.

[0014] Storing blocks of code only in web application files/web pages is a problem in so far as code re-use, replacement, modification and editing is concerned.

[0015] Some online website building system providers allow web developers to select one or more pre-designed page(s)/template(s) and then make changes using drop downs, drag and drop, copy & paste, text editing tools.

[0016] Website building systems provide a narrower scope and functionality than website editors. Website editors provide freedom, choice and independence and enable web developers to build web applications of all types using an application language of the web developer's choice.

[0017] Most website building systems are limited by the tools and features provided by the respective system(s).

[0018] Web content management systems like Wordpress, Jumla, Magento etc enable web developer to use theme based web template(s) within the respective content management system's framework.

[0019] The reliance on some "framework" based platforms can create many problems for the website owners, being permanently "locked in" being just one of them.

[0020] The reliance on web page/web templates has resulted in many web pages and websites that look very similar and/or are limited in functionality.

[0021] Many such page templates depend on javascript libraries to render in the browser. Turning off javascript in the browser or using third party browser add-ons such as "noscript" results in broken pages or pages that does not render at all in the popular browsers.

[0022] Javascript libraries can be large, often containing thousand of lines of code, increasing page load time and consumes significant bandwidth. It can also be a security risk as malicious code can be injected using javascript, especially if the code script is obtained from unscrupulous third party sources.

[0023] Most web developers do not have the time to manually check through thousands of lines of client side javascript code(s) to detect malware (spyware, keyloggers, dns poisoning scripts etc).

[0024] The recent trend amongst web developers is to buy or otherwise acquire page template(s) from external sources and then write application code to meet a customer's requirement(s).

[0025] In cases where a custom page layout is desired, the time taken to code the new html layout code and cascading stylesheets using existing tools can be significant. In addition, any changes to the page layout could mean complete re-writing of the cascading stylesheet code.

[0026] Developing custom page layouts for web applications therefore costs significantly more than template based solutions.

[0027] It is also recommended that web pages be reponsive, that is: page contents are automatically resized and/or re-arranged and displayed appropriately in all browsers, in all devices and screen sizes.

[0028] Newer css layout models such as flex box model and grid models enable creation of complex web layouts. Grid model enables creation of two dimensional page layouts, something not possible with any other page layout models such as float model or flex box model.

[0029] Most modem browsers implement the Grid Model.

[0030] Thus, the problems identified for web development tasks relate to: (i) Tedious nature of locating blocks of code on web application files. (ii) Tedious nature of replacing code written on web application files.

(iii) Tedious nature of replacing block of code across multiple web application files and across multiple web application projects. (iii) Tedious nature reusing blocks of code across web application files and across multiple web application projects. (iv) Absence of a centralised interface/dashboard to view and identify blocks of code used in specific web application files and across web application projects without having to manually open each file(s) in a web editor and locate them manually. (v) Identifying the layout structure and content of a web page without having to open the file in a web editor and manually read through numerous lines of source code. (vi) Altering the layout structure and content of a web page without having to open the file in a web editor, and then search, locate and manually alter numerous lines of source code. (vii) Time consuming and expensive nature of web page templates specially where the layout is a custom layout. (viii) Lack of methods and processes to quickly generate structural html code and cascading stylesheet code for custom web page layouts. (ix) Lack of methods and processes to quickly generate/edit/alter structural html page layout code in web application files. (x) Various problems with web page templates sourced from third party vendors.

[0031] The invented system solves various limitations stated above.

INVENTION: SUMMARY

[0031] In the context of issues discussed earlier, it is clear that what should change is the method and process of: (i) creating, generating and editing of web application files, cascading stylesheet files, javascript files and other related files and (ii) storage, use, re-use and management of html code, web application code, javascript code, cascading stylesheet code and other related code and (iii) management of web application projects.

[0032] The invented system provides various graphical user interface(s) (GUIs) to web developers to be able to: (i) quickly create and generate web application files and web pages, auto generate html layout code, auto generate cascading stylesheet code by creating, using or modifying: (a) one or more alphanumeric strings hereinafter referred to as "design string(s)" (b) creating, using or modifying one or more reusable related blocks of code hereinafter referred to as "codeset(s)".

[0033] Using the invented system, the web developer retain the freedom of choice of using any web application language, layouts, source code, application code, database, hosting platform etc.

[0034] Therefore, there is provided in accordance with a preferred embodiment of the present invention, tools for website development, management and editing, including a database, various web developer interface(s), an application writer engine that uses and implements invented methods and processes (hereinafter referred to as the "design string method") consisting of: (i) Design Strings (Alphanumeric string) (ii) Codesets (Related blocks of code).

BRIEF DESCRIPTION OF THE DRAWINGS

In order to explain the invention further and put into practical effect, reference will now be made to the various figures (6 in total) attached with this document:

Figure 1 shows in schematic view the work flow in the invented Web Application Developer system.

Figure 2 shows in schematic view of the work flow in the codeset creation and storage process.

Figure 3 is a screenshot of the project interface of the invented Web Application Developer system.

Figure 4 is a screenshot of the page interface of the invented Web Application Developer system.

Figure 5 is a screenshot of the codeset interface of the invented Web Application Developer system.

Figure 6 is a screenshot of a Web Application file (cmshomepage.cfm) developed using the design string displayed in Figure 4.

INVENTION: DESCRIPTION

[0035] Therefore, there is provided with the invented web application builder tools, methods, processes and a system comprising: (i) A project interface (Figure 3) to create, edit, save (Item 2 in Figure 3) and manage web application projects (Item 9 in Figure 3) and web application files (Item 9 in Figure 3). (ii) A page interface (Figure 4) to: (a) Create, edit and view the design strings used in the web application file. (Item marked as 2 in Figure 4) (b) View, add and/or alter and list codeset(s) used in the web application file. (Item marked as 1 in Figure 4) (c) View and edit custom css styles used in the web application file. (Item marked as 8 in Figure 4) (iii) A codeset interface (Items 1, 2, 3, 4, 5, 6 & 7 of Figure 5) to create, edit view, update and save related blocks of code stored as codeset. (iv) A preview interface to view the web application file and the entire source code contained in the file. (Link(s) to preview interface: Items 4 & 7 in Figure 3).

(v) Web application writer engine (Item 9 in Figure 1) to analyze, interpret, error check, debug and implement the instructions contained in the "design strings" (Item 2 in Figure 4) to create: (a) Web application files (b) Cascading stylesheet files (c) Javascript files. (d) Other files.

[0036] Furthermore, it is to be understood that in the embodiments of the invented system, the design string(s) determine the layout of a web page/web application file to be generated, the codeset(s) to be used, cascading stylesheet code that is to be automatically generated and custom cascading stylesheet styles to be incorporated and javascript code that is to be used.

[0037] The web application writer engine (Item 9 in Figure 1) interprets the web developer provided "design strings" and incorporates the codeset(s) defined in the design string(s) and creates/generates the web application files, automatically creates/generates the cascading stylesheet files and javascript files as per instructions contained in the design strings.

[0038] The "design strings" (Item 2 in Figure 4) also provide to the web developer an overall view of: (i) structure and layout of the web application file/web page (ii) codeset(s) used in the file/page to be created and the abilty to quickly edit/modify the page layout and style by modifying the design strings and/or adding cascading stylesheet classes and/or editing custom stylesheet code, and adding, altering or deleting one or more codeset(s) used in the design strings.

[0039] It must be appreciated that web application page layouts and its contents can be created and quickly modified using the Page Interface (Figure 4) without the need to open any web application file/web page or any other related file (cascading stylesheet, javascript etc).

[0040] It is to be understood that in various embodiments, the design strings consist of a set of instructions provided by the web developer in a specific format and include instructions that relate to media queries and media sizes, page layout and desired layout models (flex box model, grid box model etc), class names, target codeset for incorporation at specific location(s) on the application file(s)/web page(s) that is to be created.

[0041] Attention should now drawn to the form, structure and function of the "design strings" as disclosed herein.

[0042] That, in all embodiments design strings are comprised of alphanumeric characters, special characters, empty space(s) and is rules based.

[0043] Various examples of the design strings are presented in the description section of this document.

[0044] In accordance with a preferred embodiment of the present invention, when a file name (Item 9 in Figure 3) is provided by the web developer it will be added to the list of files in the current project (Item 5 in Figure 3) with links (Item 3 and Item 6 in Figure 3) to the Page interface (Figure 4) where the design string(s) (Item 2 in Figure 4) will be required to be added by the web developer and thereafter upon clicking the "Create Page" button (Item 4 in Figure 4), the invented system will implement the underlying application writer engine, to analyze, interpret and error check the design string(s) and generate the (Item 10 in Figure 1). (i)web application file(s)/web page(s) (ii) cascading stylesheet files (iii) Other files.

[0045] Use of codeset for storing code (Items 3, 5, 6 & 7 in Figure ) and using design strings (Item 2 in Figure 4) to create layouts and incorporate codeset in the application file(s) makes it possible to make changes across multiple web application files by making alteration to the design string(s) and/or codeset(s) in a single place.

[0046] The invented system enables the web developer to create, label, describe, add code and content and store a codeset. A codeset contsists of blocks of data stored as structures with multiple attributes: codeset name, id (auto), data type, data, usage, platform etc. One data type is "text" which could be anything including application code, logic, sql queries, html tags and html elements. The second data type is "custom css". This is the web developer written custom css statements. The third data type is "design string". The fourth data type is "layout css" and is auto generated using the design strings and written to cascading stylesheet file(s) for layout purposes. The fifth data type is "html layout tags" and is auto generated from the design strings.

[0047] Codeset(s) with datatype "text" are web developer defined meaning they can be anything the web developer wants. A simple codeset of datatype "text" can be: <div class="hello"> Hello World! </div>

[0048] A relevant codeset of datatype "custom css" can be: .hello {background-color: red; }

[0049] The codeset with the above two datatypes can be labelled and stored as a single entity "hello-world" or any other name the web developer choses.

[0050] The above created codeset "hello-world" can then be used in creating a web page (TestPage.php) using the invented system's page interface by simply using the design string below:

[+hello-world somecssstylename] This will generate 3 files: 1. TestPage.php (web application file) 2. TestPage.css (css file with auto generated cascading stylesheet code) 3. TestPage-CustomCss.css (css file containing custom css classes: .hello {background-color: red; } .somecssstylename {width: 100%; }

Where the "design string" is bare minimal and does not contain media instructions, a developer defined default media instruction will be used.

[0051] Examples of design strings:

Example 1 (This example uses default css flexbox layout):

+metaheadcommon +bodystart [ 100 sborder +lorem-ipsum ][100 [ 100 sbordertop [ head-space-line-top 30 +ogocmss ] [ head-space-line-top 20 ][40 bgconsole-space +cmstoplinks ][10 bgconsolel-whitedrop2 ]]][80 [85 jcsa +wcategory][ 15 jcsa aifs acfs +graybox ]][70 [ 100 jcsa +citylinks ]][70[ 100 jcsa +departmentlinks ]][100 footer-box [ mt5Op mb10p pt10p commonfooterl-box [ 40 aifs jcc commonfooterl-clistlinkbox +commonfooterlogocms] [ 60 aifs jcc commonfooterl-clistlinkbox +commonfooterlinks1 ] ] +bodyend

Example 2 (Uses css Grid layout with media declaration):

@media (orientation: landscape) +metaheadcommon +IsValidurlSearchPage +bodystart [ 100 repeat (auto-fit, minmax (100%, lfr) ) [ 100 sborder [ 100 [ 100 minh80px [ head-space ] [ 30 bgconsolel-logobox +bgconsolellogo ] [ 25 bgconsolel-whitedrop5 ] [ 25 bgconsolel-whitedrop2 ] [ xlO bgconsolel whitedrop3 ] ] ] ] ] [ 75 repeat (auto-fit, minmax (300px, auto) ) [ 100 jcsa +adgrouplinks ] ] [ 85 repeat (auto-fit, minmax (100%, lfr) ) [ 100 aifs rr [ 75 +searchboxH +searchpage beeline ] [ 25 minh500 aifsjcfs +searchboxvlinks +bannerbox ] ] ] [ 75 repeat (auto-fit, minmax (300px, auto) ) [ 100 jcsa +adgrouplinks ] ] [ 100 repeat (auto-fit, minmax (300px, auto) )[mt50p mbl0p pt10p [ 40jcc +cfl ][x60 aic jcc +commonfooterlinks l]]] +bodyend @media

(orientation: portrait) +metaheadcommon +IsValidurlSearchPage +bodystart[ 100 repeat (auto-fit, minmax (100%, lfr) ) [ 100 sborder [100 [ 100 minh80px[ head-space ][30 bgconsolel-logobox +bgconsolellogo ][25 bgconsolel whitedrop5 ][25 bgconsolel-whitedrop2 ][10 bgconsolel-whitedrop3]]]]]

[75 repeat (auto-fit, minmax (300px, auto) )[100jcsa +adgrouplinks ]][85 repeat (auto-fit, minmax (100%, lfr) ) [ 100 aifs rr [ 75 +searchboxH +searchpage beeline ][25 minh500 aifsjcfs +searchboxvlinks +bannerbox1]] ][75 repeat (auto-fit, minmax (300px, auto) )[100jcsa +adgrouplinks ]][100 repeat (auto-fit, minmax (300px, auto) )[mt50p mbl0p ptl0p [ 40icc +cfl][ aic jcc +commonfooterlinks 1] ] ] +bodyend

Note 1: Html web page layout structure will be automatically generated from the above displayed design strings.

Note 2: Flex box layout is the default layout. Grid Layout is used when grid layout instruction is included in the design string.

Note 3: Structural css class declarations will be automatically generated from the class names contained in the design string(s):

will generate a css declaration ".x70 { width: 70%;}"

400px will generate a css declaration ".x400px { width: 400px;}"

Note 4: codeset names start with"-" in the preferred embodiment.

Note 5: Custom css classes and class id's declared by the web developer using the page interface for any web application file will be incorporated into the cascading stylesheet classes when the .css files are generated.

Note 6: Cascading stylesheet declarations stored in the codeset(s) used in a web application file will be automatically incorporated into the cascading stylesheet files when they are created.

[0052] The structure and function of a "codeset" is disclosed herein.

[0053] A codeset is different from traditional code "snippets".

[0054] In all embodiments, codeset are multi-dimensional structures with multiple attributes: data types (text, application code, cascading stylesheet code, javascript code etc), data (the actual code), name, id etc and are stored as one single entity identified by its name but are multiple items specified by different data types. This is in contrast to traditional code snippets or simply "snippets" where there is no defined data type and all data is stored in single block of code as a single item identified by the snippet's name. This is an important distinction.

[0055] How the web application file/web page code are broken down and stored as separate codeset(s) depend entirely on the web developer.

[0056] Unlike the method(s) or process(es) provided in existing web editors, and in particular in relation to use of snippets, with the invented system a change in codeset name within a design string will also automatically incorporate all attributes (data types, data, cascading stylesheet code, javascript code) of the newly selected codeset: text, custom css, application code, design string, cascading stylesheet code, etc in a single action without requiring any copying and pasting actions by the web developer.

[0057] Two illustrate an example that may be useful herein: a web developer may have used the invented system's page interface to create a design string and use codeset named "A" for the web application page 100 but later decides to use codeset named "B" instead of "A". This change made in a single place will result in changes to the (i) codeset used (ii) web application code (iii) web application file/web page generated (iv) cascading stylesheet code that is automatically created. (v) custom cascading stylesheet files that is associated with codeset "B" (iii) javascript code (if used). The new files will overwrite the old files and incorporate codeset code for codeset "B" instead of codeset "A"

[0058] Now, disclosed hereunder is various embodiments of codeset(s).

[0059] In one embodiment, codeset may include another codeset.

[0060] In one embodiment, codeset may have its own html tags and layout instructions defined by its own design strings.

[0061] In one embodiment, codeset may have its own cascading stylesheet classes.

[0062] In one embodiment, codeset may include web application code.

[0063] In one embodiment, codeset may contain content(s) including images, videos, pdf and or other files.

[0064] In one embodiment, codeset may contain meta tags.

[0065] In one embodiment, codeset may contain sql code and database queries.

[0066] Multiple codesets can be used on a single web page/web application file.

[0067] The same codeset can be included multiple times on a single web application page.

[0068] The same codeset can be used in multiple web pages/web application files in the same project or across multiple projects.

[0069] A codeset can be edited and saved as a new codeset.

[0070] A few benefits of the invented web application builder is highlighted hereunder:

[0071] Auto generation of complex cascading stylesheet instructions saves time for the web developer.

[0072] The web developer is not required to open the web application file in an editor to directly write, copy or paste, drag and drop code on the web application file(s) or cascading stylesheet (css) files.

[0073] The web developer is in control of every aspect of the website development process and not limited by the tools provided by a proprietory website building system.

[0074] Page layouts are created according to the specifications provided by the web developer and can be changed by altering the design string(s) used in the page layout.

[0075] There are no "site templates" or "page templates" involved as each web application file is created from scratch, based on the specifications in the design strings and the codeset(s) used.

[0076] In all embodiments, modification of a design string will result in creation of a page with a different layout and/or include different codeset.

[0077] In all embodiments, the design strings used in the invented system enables generation of time consuming complex layout stylesheet instructions for various web developer defined media sizes with minimal instructions from the web developer(s).

[0078] In one embodiment, codeset can be seamlessly used across multiple web application file(s) / web page(s) and projects.

[0079] In one embodiment, the created cascading stylesheets include media queries as specified by the web developer(s).

[0080] In all embodiments, custom css rules provided by the web developer are automatically incorporated in the cascading stylesheet (css) files generated.

[0081] In all embodiments, a codeset created with the invented system can be saved as another codeset and thereafter modified.

[0082] In all embodiments, a web application project created with the invented system can be saved as another web application project and thereafter modified.

[0083] In all embodiments, a web application file created with the invented system can be saved as another web application file and thereafter modified.

[0084] In all embodiments, design strings enable complex page layouts to be created with minimal effort.

[0085] In one embodiment, page layouts can be altered or modified as easily.

[0086] In one embodiment, any part of a web page can be altered or modified to display a different content.

[0087] Herein disclosed is various ways / methods / tools a web developer can use to provide the "design strings" in the invented system:

[0088] In one embodiment, the invented system provides an interface consisting of one or more forms containing one or more input text box(es) wherein the design string(s) can be typed in or copied and pasted by the web developer(s).

[0089] In one embodiment, design strings are generated from drop downs/combo boxes included with the invented system.

[0090] In one embodiment, design strings are generated from drag and drop feature/tool included in the invented system.

[0091] In one embodiment, the invented system includes a visual design interface wherein design strings can be created using drag and drop, copy and paste or simply typed in.

[0092] In one embodiment, the web developer interface is a centralized dash board for the web developer to create and edit the design string(s) to generate a web application file.

[0093] In one embodiment, the invented system requires a web application file/web page to be broken down into smaller parts or sections (codeset). The stored codeset then can be used in one or more web application file(s)/web pages, in one or more web application project(s).

[0094] In this manner, the invented system enables generation of web application file(s)/web page(s) and provides solutions to various issues identified and discussed earlier.

[0095] While certain features of the invention have been illustrated and described herein, many alternatives, modifications, substitutions, alterations, changes and equivalents will now occur to those with ordinary technical knowledge or skill in the art. Therefore, it is to be understood that the claims stated herein are intended to cover all modifications and changes as they fall within the true spirit of the invention.

[0096] It is to be understood that throughout the specification, discussions and usage of terms such as "processor", "computer", "computing device", "database" or the like, refer to all computing systems, or similar electronic devices that is able to store, manipulate and/or transform data stored in electronic or digital form or display devices to perform the function(s) of the invention stated herein.

[0097] Further more, embodiments of the present invention are not described with reference to any particular programming language. It is to be understood that a variety of programming languages may be used to implement the methods and processes of the invention described herein.

[0098] In addition, it is to be appreciated that all embodiments of the present invention may be implemented over a local network or over the internet as well as on a standalone computer or computing device.

Claims

CLAIMS What is claimed is:

1. A computer-implemented method for a web application builder for creating, developing, storing and managing of web application file(s)/web page(s), cascading stylesheet (css) files and javascript files, the method comprising:

(a) a website builder application on a computing device, the website builder application comprising an interface (the first interface: the project interface) configured to receive and process web developer provided instructions to create web applications / website projects,

(b) rendering to the web developer tools to add web application projects using the project interface,

(c) rendering to the web developer selection tools to select a web application project using the project interface,

(d) rendering to the web developer tools to add web application files within the selected project using the project interface,

(e) rendering to the web developer list of web application file names within a selected project using the project interface,

(f) rendering to the web developer links to navigate to the project interface, page interface, codeset interface and the preview interface.

(g) rendering to the web developer tools to select a web application language (platform) for the web application using the project interface,

(h) rendering to the web developer tools to add publishing details for uploading files to a local and/or remote web server using the project interface.

(i) rendering to the web developer tools to save the project data in a database or in the computer's file system.

(j) rendering to the web developer tools to save the project data in a database or in the computer's file system for another web application project.

(k) the web application builder application comprising of a second interface( the page interface ) for (i) receiving, processing and storing web developer provided instructions in the form of "design strings.

(1) rendering to the web developer tools to add/edit custom cascading stylesheet code for the web application file using the page interface.

(in) rendering to the web developer tools to save the design string and custom

cascading stylesheet declarations in a database and/or in the computer's file system using the page interface.

(n) rendering to the web developer tools to save the design string(s) and custom cascading stylesheet declarations for a different web application file.

(o) rendering to the web developer tools to provide instruction to enable the web application files to connect to one or more databases using the page interface;

(p) rendering, to the web developer, data entry forms using a third web developer interface ( the codeset interface ) for (i) creating, editing and storing sets of related code (codeset).

(q) rendering to the web developer tools to add/edit, update and save codeset code: html code, application code, cascading stylesheet code, javascript code, design strings, and content .

(r) rendering to the web developer tools to save codeset(s).

(s) rendering to the web developer tools to save a codeset as another codeset.

(t) rendering to the web developer tools to rename a codeset.

(u) the web application builder application comprising of an application writer engine to analyze and implement the design strings provided by the web developer and (i) automatically generate html tags (ii) incorporate content and code: including html code, web application code, cascading stylesheet code, javascript code, database code (sql syntax), code stored as codeset(s) (iii) generate web application files/web pages, (iv) automatically generate cascading stylesheet (.css) files, (v) incorporate javascript (.js) files, (vi) incorporate custom cascading stylesheet code provided by the web developer.

(v) rendering a preview of the generated web application file/web page to the web developer using a fourth web developer interface (the preview interface);

2. The method of claim 1, wherein the web developer can create, edit or delete projects.

3. The method of claim 1, wherein the web developer can create, edit or delete web pages / web application codes and file names to a project.

4. The method of claim 1, wherein the web developer can select an application language (platform) for a web project.

5. The method of claim 1, wherein the web developer can select one or more database(s) for use by the web application file(s).

6. The method of claim 1, wherein the web developer can create, edit or delete, save and save-as blocks of related code as codeset.

7. The method according to claim 1 said database to also store web application builder data related to web developer, web developer projects, web developer created application files and pages, web developer provided code and design strings.

8. The method of claim 1, enabling error checking and debugging when a web developer submits (i) design strings using the page interface for a web application file. (ii) during using tools for creating, saving, saving as: a project, web application file, and codeset.

9. The method of claim 1, wherein codeset(s) are used to store related blocks of code.

10. The method of claim 1, wherein: (i) design strings are used to create web application files, web pages, cascading stylesheet files andjavascript files. (ii) design strings are used to create cascading stylesheet files for custom defined media sizes and platforms. (iii) design strings are used to incorporate codeset(s). (iv) design strings are used to create html tags. (v) design strings are used to generate layout code.

11. The method of claim 1, wherein different sets of alphanumeric and special characters can be used to compose and use in the "design strings" to accomplish various tasks for: (a) auto generating cascading stylesheet code and files, (b) auto generating html layout tags, (c) creating web application files and web pages, (d) incorporating codeset(s) in the web application files to be created.

12. The method of claim 1, wherein the web developer can preview the web application file and related files including the source code created with the invented web application builder.

13. A computer-implemented system for a web application builder for creating, developing, storing and managing of web application file(s)/web page(s), cascading stylesheet (css) files and javascript files, the system comprising:

(1) rendering to the web developer tools to add/edit custom cascading stylesheet code for the web application file using the page interface. (in) rendering to the web developer tools to save the design string and custom

(r) rendering to the web developer tools to save codeset(s).

(s) rendering to the web developer tools to save a codeset as another codeset.

(t) rendering to the web developer tools to rename a codeset.

2. The system of claim 13, further comprising computer program logic for enabling the web developer to create, edit or delete projects.

3. The system of claim 13, further comprising computer program logic for enabling the web developer to create, edit or delete web pages / web application codes and file names to a project.

4 The system of claim 13, further comprising computer program logic for enabling the web developer to select an application language (platform) for a web project.

5. The system of claim 13, further comprising computer program logic for enabling the web developer to select one or more database(s) for use by the web application file(s).

6. The system of claim 13, further comprising computer program logic for enabling the web developer to create, edit or delete, save and save-as blocks of related code as codeset.

7. The system of claim 13, further comprising computer program logic for enabling the said database to also store web application builder data related to web developer, web developer projects, web developer created application files and pages, web developer provided code and design strings.

8. The system of claim 13, further comprising computer program logic for enabling error checking and debugging when a web developer submits (i) design strings using the page interface for a web application file. (ii) during using tools for creating, saving, saving as: a project, web application file, and codeset.

9. The system of claim 13, further comprising computer program logic for enabling the codeset(s) to store related blocks of code.

10. The system of claim 13, further comprising computer program logic for enabling: (i) design strings to be used to create web application files, web pages, cascading stylesheet files and javascript files. (ii) design strings to be used to create cascading stylesheet files for custom defined media sizes and platforms. (iii) design strings to be used to incorporate codeset(s). (iv) design strings to be used to create html tags. (v) design strings to be used to generate layout code.

11. The system of claim 13, further comprising computer program logic for enabling different sets of alphanumeric and special characters to be used to compose and use in the "design strings" to accomplish various tasks for:

(a) auto generating cascading stylesheet code and files, (b) auto generating html layout tags, (c) creating web application files and web pages, (d) incorporating codeset(s) in the web application files to be created.

12. The system of claim 13, further comprising computer program logic for enabling the web developer to preview the web application file and related files including the source code, created with the invented web application builder.

SHEET 1 OF 6 23 Jan 2020

1 PROJECT INTERFACE 2 PROJECT DATA 3

PAGE LIST 2020200471

4

CODE SET INTERFACE 5

PAGE INTERFACE 6

CUSTOM PAGE CSS

7 CUSTOM JAVASCRIPT

DESIGN STRING 8

9

APPLICATION WRITER ENGINE

FILES 10

APPLICATION FILES

CSS FILES

JAVASCRIPT FILES

OTHER FILES

FIGURE 1

WEB APPLICATION DEVELOPER WORKFLOW

SHEET 2 OF 6 23 Jan 2020

CODESET INTERFACE 1

2 SELECTED CODE SET 2020200471

3 CUSTOM CSS 4 DESIGN STRING 5

6 AUTO GENERATED HTML

7 AUTO GENERATED CSS

8

APPLICATION / HTML CODES 9 JAVASCRIPT CODES

10 OTHER CODES

SAVE CODESET

11

CODE SET STORAGE 12

FIGURE 2

CODESET CREATION & STORAGE WORKFLOW

SHEET 3 OF 6 23 Jan 2020 2020200471

4 6 8 2 9 1 7 3 5

FIGURE 3

SCREENSHOT OF PROJECT INTERFACE

SHEET 4 OF 6 23 Jan 2020 2020200471

5 6 1 3 4 7 8 2 FIGURE 4

SCREENSHOT OF PAGE INTERFACE

SHEET 5 OF 6 1 23 Jan 2020

2 2020200471

6 3 4 5 7

FIGURE 5

SCREENSHOT OF CODESET INTERFACE

SHEET 6 OF 6 23 Jan 2020 2020200471

FIGURE 6

SCREENSHOT OF A WEB APPLICATION FILE DEVELOPED WITH THE INVENTED

WEB APPLICATION DEVELOPER USING THE DESIGN STRING DISPLAYED IN FIGURE 4