System and process for delivering and rendering scalable web pages

• US 20040177327A1
• Filed: 08/23/2003
• Published: 09/09/2004
• Est. Priority Date: 02/04/2000
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: AOL LLC (Apollo Global Management, Inc.)
• Inventors: Kieffer, Robert
• Granted Patent: US 7,412,644 B2
• Time in Patent Office: Days
• US Class Current: 707/102
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 40/143 Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]

Abstract

A system and process for displaying and redisplaying an HTML document that conforms to the limitations of a viewer'"'"'s browser. The system comprises a browser, a script, and a document object model (DOM). The script comprises a data structure and an interpretation code. The DOM is a document model representing a Web page'"'"'s elements, such as text, images, URL links, etc. The process includes using the script to create a document data structure that describes the essential information in the document and using the interpretation code to interpret the data structure in a fashion that allows it to manipulate the DOM for the purpose of rendering the document in the browser. The data structure can be modified and the corresponding HTML can be subsequently regenerated in response to user events so that after initially being created, the document can be updated to reflect changes to the viewer'"'"'s browser. if the viewer resizes the browser, the page elements can be automatically resized.

Claims

1. A system for delivering and rendering scalable Web pages, said system comprising:

a browser;

a script, which is associated with an interpretation code; and

a document object model;

wherein said script, when executed, creates a data structure that describes a document created by a page author; and

wherein said interpretation code interprets said data structure in a fashion that allows said data structure manipulate said document object model for the purpose of rendering said document to said browser.

2. The system of claim 1, wherein said browser may be any kind of Web browser that supports a scripting language with a means of modifying the contents of the displayed Web pages.

3. The system of claim 1, wherein said data structure can be optimized to include only the essential information of said document.

4. The system of claim 1, wherein said data structure and said interpretation code may be contained in a single file.

5. The system of claim 1, wherein said data structure may be separated out from said interpretation code.

6. The system of claim 1, wherein said data structure comprises:

a root object;

wherein said root object comprises an array of slides and each said slide is an object representing a single slide in a presentation; and

wherein each said slide comprises a plurality of content entities and each said content entity has a variety of properties.

7. The system of claim 6, wherein said root object further comprises:

an array of strings that contains the titles of each said slide in said presentation.

8. The system of claim 6, wherein said root object further comprises:

a first attribute, which is an index of the current slide in said presentation;

a second attribute, which is true for sample presentations;

a third attribute, which is true for style presentations;

a fourth attribute, which is true for template presentations;

a fifth attribute, which indicates the database ID of said presentation;

a sixth attribute, which indicates the total number of slides in said presentation; and

a seventh attribute, which indicates the type to which said object belongs.

9. The system of claim 6, wherein each said slide further comprises:

a first attribute, which indicates the type of effect to use when showing said slide;

a second attribute, which indicates the name of the layout that said presentation is based on;

a third attribute, which is a set of user supplied notes for said slide;

a fourth attribute, which indicates the title of said slide; and

a fifth attribute, which indicates the type to which said slide belongs.

10. The system of claim 9, wherein said first attribute comprises:

a first value, which is a set of slide elements to slide in from the right;

a second value, which is a set of slide elements to slide in from the left;

a third value, which is a set of slide elements to slide in from the bottom;

a fourth value, which is a set of slide elements to indicate slide in from the top;

a fifth value, which is a set of slide elements to flash briefly; and

a sixth value, which is a set of slide elements that reveals progressively on each mouse click.

11. The system of claim 6, wherein said content entities comprise:

a text entity;

an outline entity;

and an image entity;

wherein each said content entity comprises;

a plurality of attributes which collectively define the rectangle occupied by each said content entity;

an attribute to store each said content entity;

an attribute to indicate the name of each said content entity; and

an attribute to indicate the z-ordering of the layer entities in said slide.

12. The system of claim 11, wherein said text entity further comprises:

an attribute to define font point size;

an attribute to define font style;

an attribute to define font family;

an attribute to define font weight;

an attribute to define text color;

an attribute to define background color;

an attribute to define horizontal alignment;

an attribute to define vertical alignment; and

an attribute to define URL to navigate.

13. The system of claim 11, wherein said outline entity inherits all the attributes of said text entity and further comprises:

an attribute to define the type of bullet;

an attribute to define the value specifying how said bullet should look like; and

an attribute to define an array of sub-outlines.

14. The system of claim 11, wherein said image entity further comprises:

an attribute to define horizontal alignment;

an attribute to define background color;

an attribute to define the scaling mode to use when displaying said image;

an attribute to define URL of the image to display;

an attribute to define URL to navigate; and

an attribute to define vertical alignment.

15. The system of claim 14, wherein said attribute to define the scaling mode to use when displaying said image comprises:

a fit value, with which said image is scaled to fit exactly within the bounds of said slide;

a width value, with which said image is scaled, retaining the aspect ratio, so that the width of said image fits exactly in the bounds of said slide;

a height value, with which said image is scaled, retaining the aspect ratio, so that the height of said image fits exactly in the bounds of said slide; and

a tile value, with which said image is tiled at said image'"'"'s native size to exactly fill the image bounds.

16. The system of claim 14, wherein said image entity comprises a background element, and wherein said background element always keeps its bounds corresponding to the bounds of said slide;

17. The system of claim 16, wherein said background element always maintains its z-index at zero.

18. A process for delivering and rendering scalable Web pages, said process comprises the steps of:

creating, by executing a script, a data structure that describes a document;

interpreting, by an interpretation code, said data structure in a fashion that allows said data structure to manipulate a document object model for the purpose of rendering said document to a browser;

wherein said document is automatically updated to reflect changes to said browser whenever said browser is resized.

19. The process of claim 18, wherein said data structure can be optimized to include only the essential information of said document.

20. The process of claim 18, wherein said data structure and said interpretation code may be contained in a single file.

21. The process of claim 18, wherein said data structure maybe separated out from said interpretation code.

22. A process for creating a document data structure includes the steps of:

using a web server to respond to a viewer'"'"'s browser'"'"'s request for a document;

retrieving or creating the content of said document in an appropriate fashion;

translating the content of said document into a block of script code;

embedding said script code into an HTML document which is returned to the viewer; and

in the viewer'"'"'s browser, executing said block of script code.

23. The process of claim 22 and further comprising the step of:

performing, by said data structure, any necessary data validation.

24. The process of claim 22, wherein said step of executing a block of script code comprises the sub-steps of:

setting the background color;

creating a slide layer for presentation;

enabling the display of said slide layer;

initializing the address of said presentation and said slide;

initializing various slide elements inside said slide;

setting up the resize handler, and

rendering said slide into HTML and displaying said presentation in said browser.

25. The process of claim 22, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises,

setting up address for said text entities;

creating a layer for said text entities; and

enabling the display of said layer.

26. The process of claim 22, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:

setting up address for said image entities;

creating a layer for said image entities; and

enabling the display of said layer.

27. The process of claim 22, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:

setting up address for said outline entities; and

initializing outline nodes for said outline entities.

28. The process of claim 22, wherein said sub-step of rendering said slide into HTML and displaying said presentation in said browser further comprises the sub-sub-steps of:

getting the client screen sizes;

setting the clipping region of said slide layer;

rendering various slide elements inside said slide; and

flushing the output to said layer.

29. The process of claim 28, wherein one or more slide elements are text entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:

setting layer color and alignment;

generating the text to be displayed;

writing the URL start tag;

writing the style and said text; and

writing the URL end tag.

30. The process of claim 28 wherein one or more slide elements are image entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:

setting layer background color;

wring empty content string if slide is editable;

getting the URL of image source;

writing the URL start tag;

rendering said image; and

writing the URL end tag.

31. The process of claim 28, wherein one or more slide elements are outline entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:

setting up default properties;

creating and initializing a rendering context;

setting origin and available width;

rendering outline nodes with said rendering context; and

hiding unused layers.

32. A process for interpreting a document data structure, said process comprises the steps of:

identifying objects in said document data structure that needs to be rendered in the viewer'"'"'s browser.

locating or creating the elements of the browser document object model, wherein said elements are used for rendering said document;

applying any transformations or other changes needed to accommodate the viewer'"'"'s specific browser configuration to the elements of the browser document object model or the document data structure;

generating HTML needed to render said objects; and

applying said HTML into the elements of the browser document object model so that said document is displayed in said browser.

33. The process of claim 32, wherein said step of applying any transformations or other changes comprises the sub-steps of:

setting the background color;

creating a slide layer for presentation;

enabling the display of said slide layer;

initializing the address of said presentation and said slide;

initializing various slide elements inside said slide; and

setting up the resize handler.

34. The process of claim 33, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:

setting up address for said text entities;

creating a layer for said text entities; and

enabling the display of said layer.

35. The process of claim 33, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:

setting up address for said image entities;

creating a layer for said image entities; and

enabling the display of said layer.

36. The process of claim 33, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:

setting up address for said outline entities; and

initializing outline nodes for said outline entities.

37. The process of claim 32, wherein said step of generating HTML needed to render said objects comprises the sub-steps of:

getting the client screen sizes;

setting the clipping region of said slide layer;

rendering various slide elements inside said slide; and

flushing the output to said layer.

38. The process of claim 37, wherein one or more slide elements are text entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:

setting layer color and alignment;

generating the text to be displayed;

writing the URL start tag;

writing the style and said text; and

writing the URL end tag.

39. The process of claim 37 wherein one or more slide elements are image entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:

setting layer background color;

wring empty content string if slide is editable;

getting the URL of image source;

writing the URL start tag;

rendering said image; and

writing the URL end tag.

40. The process of 37, wherein one or more slide elements are outline entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:

setting up default properties;

creating and initializing a rendering context;

setting origin and available width;

rendering outline nodes with said rendering context; and

hiding unused layers.

41. A method for delivering and rendering scalable Web pages, said method comprises the steps of:

creating, by executing a script, a data structure that describes a document;

interpreting, by an interpretation code, said data structure in a fashion that allows said data structure to manipulate a document object model for the purpose of rendering said document to a browser;

wherein said document is automatically updated to reflect changes to said browser whenever said browser is resized.

42. The method of claim 41, wherein said data structure can be optimized to include only the essential information of said document.

43. The method of claim 41, wherein said data structure and said interpretation code may be contained in a single file.

44. The method of claim 41, wherein said data structure may be separated out from said interpretation code.

45. A method for creating a document data structure includes the steps of:

using a web server to respond to a viewer'"'"'s browser'"'"'s request for a document;

retrieving or creating the content of said document in an appropriate fashion;

translating the content of said document into a block of script code;

embedding said script code into an HTML document which is returned to the viewer; and

in the viewer'"'"'s browser, executing said block of script code.

46. The method of claim 45 and further comprising the step of:

performing, by said data structure, any necessary data validation.

47. The method of claim 45, wherein said step of executing a block of script code comprises the sub-steps of:

setting the background color;

creating a slide layer for presentation;

is enabling the display of said slide layer;

initializing the address of said presentation and said slide;

initializing various slide elements inside said slide;

setting up the resize handler, and

rendering said slide into HTML and displaying said presentation in said browser.

48. The method of claim 45, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:

setting up address for said text entities;

creating a layer for said text entities; and

enabling the display of said layer.

49. The method of claim 45, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:

setting up address for said image entities;

creating a layer for said image entities; and

enabling the display of said layer.

50. The method of claim 47, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:

setting up address for said outline entities; and

initializing outline nodes for said outline entities.

51. The method of claim 47, wherein said sub-step of rendering said slide into HTML and displaying said presentation in said browser further comprises the sub-sub-steps of:

getting the client screen sizes;

setting the clipping region of said slide layer;

rendering various slide elements inside said slide; and

flushing the output to said layer.

52. The method of claim 51, wherein one or more slide elements are text entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:

setting layer color and alignment;

generating the text to be displayed;

writing the URL start tag;

writing the style and said text; and

writing the URL end tag.

53. The method of claim 51 wherein one or more slide elements are image entities, and wherein said sub-sub step of rendering. various slide elements inside said slide comprises the sub-sub-sub-steps of:

setting layer background color;

wring empty content string if slide is editable;

getting the URL of image source;

writing the URL start tag;

rendering said image; and

writing the URL end tag.

54. The method of claim 51, wherein one or more slide elements are outline entities, and wherein said sub-sub step of rendering various slide elements inside said slide comprises the sub-sub-sub-steps of:

setting up default properties;

creating and initializing a rendering context;

setting origin and available width;

rendering outline nodes with said rendering context; and

hiding unused layers.

55. A method for interpreting a document data structure, said method comprises the steps of:

identifying objects in said document data structure that needs to be rendered in the viewer'"'"'s browser.

locating or creating the elements of the browser document object model, wherein said elements are used for rendering said document;

applying any transformations or other changes needed to accommodate the viewer'"'"'s specific browser configuration to the elements of the browser document object model or the document data structure;

generating HTML needed to render said objects; and

applying said HTML into the elements of the browser document object model so that said document is displayed in said browser.

56. The method of claim 55, wherein said step of applying any transformations or other changes comprises the sub-steps of:

setting the background color;

creating a slide layer for presentation;

enabling the display of said slide layer;

initializing the address of said presentation and said slide;

initializing various slide elements inside said slide; and

setting up the resize handler.

57. The method of claim 56, wherein one or more said slide elements are text entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:

setting up address for said text entities;

creating a layer for said text entities; and

enabling the display of said layer.

58. The method of claim 56, wherein one or more said slide elements are image entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises:

setting up address for said image entities;

creating a layer for said image entities; and

enabling the display of said layer.

59. The method of claim 56, wherein one or more said slide elements are outline entities, and wherein said sub-step of initializing various slide elements inside said slide further comprises the sub-sub-steps of:

setting up address for said outline entities; and

initializing outline nodes for said outline entities.

60. The method of claim 55, wherein said step of generating HTML needed to render said objects comprises the sub-steps of:

getting the client screen sizes;

setting the clipping region of said slide layer;

rendering various slide elements inside said slide; and

flushing the output to said layer.

61. The method of claim 60, wherein one or more slide elements are text entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:

setting layer color and alignment;

generating the text to be displayed;

writing the URL start tag;

writing the style and said text; and

writing the URL end tag.

62. The method of claim 60 wherein one or more slide elements are image entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:

setting layer background color;

writing empty content string if slide is editable;

getting the URL of image source;

writing the URL start tag;

rendering said image; and

writing the URL end tag.

63. The method of 60, wherein one or more slide elements are outline entities, and wherein said sub step of rendering various slide elements inside said slide comprises the sub-sub-steps of:

setting up default properties;

creating and initializing a rendering context;

setting origin and available width;

rendering outline nodes with said rendering context; and

hiding unused layers.