FIELD OF THE INVENTION

The present disclosure relates in general, to the field of displaying a web page on a device.

More particularly, the present disclosure relates to methods and systems for displaying a web page on a device by automatically resizing the web page to match the size of the browser of the device. DESCRIPTION OF RELATED ART

With the proliferation of personal computers (PCs) and hand-held devices, services providers tend to include multiple web site links and/or functions in one single web page so as to meet the demand for diversified information and/or services. For example, one web page may contain various drop-down menus and links for the introduction of company logos, product list, internet shopping, carousel playing of advertisements and/or video films, connection to news articles, program files and/or services, just to name a few. Since the web page may be accessed regardless of time and/or location, hence is the perfect vehicle for advertisement, thus the design of most web pages is complicated and often includes a large amount of embedded links to various web sites.

As hand-held devices having smaller screens (i.e., smaller than 11.5 inches) trumps the conventional personal computers having larger screens (i.e., at least 12 inches) in recent years, traditional web page designed to run on PC such as desk top and laptop is no longer suitable for display on a hand- held device such as mobile phone, tablet, personal digital aid (PDA), reader and etc, for the PC-based web page would need to be resized to fit in the smaller screen of the hand-held device, thereby making the web page too small to decipher any of its content on the small screen of a hand-held device. Even though most of the modern hand-held devices are equipped with a pinch-to-zoom function, in which the displaying content on the screen may be enlarged by a pinch; however, it still require constantly moving the display content in various directions to read.

While manual adjusting the size of the display content on the screen of a hand-held device may help user deciphering the web page, most service providers tackle this problem by providing web pages specifically developed for viewing on the hand-held devices. Such web pages are usually more concise when presenting, hence are easy to read; however, the information rendered in such web page are far less abundant than the PC version. Further, specific developers need to be entrusted for the development of such web pages, thereby creates a further burden to the service providers not only in cost, but also in the man power and time to bring such web page on line for real applications, in addition to the exhaustion of IP addresses as well as the bandwidth.

Furthermore, displaying a web page on large screen such as an outdoor electronic screen at least 50 inches in diagonal still remains a hurdle to any skilled artisan in the relevant field. In view of the foregoing, there exists in this art a need of an improved method and system for displaying a web page on a device, in which the device may have a screen that is larger or smaller than the conventional computer screen, by automatically adapting a web page to the size of the browser in the device without losing the integrity of the web page.

SUMMARY OF THE INVENTION

The following presents a simplified summary of the disclosure in order to provide a basic understanding to the reader. This summary is not an extensive overview of the disclosure and it does not identify key/critical elements of the present invention or delineate the scope of the present invention. Its sole purpose is to present some concepts disclosed herein in a simplified form as a prelude to the more detailed description that is presented later.

In accordance with one aspect of the present disclosure, in a server, a computer- implemented method is provided for displaying a web page on a device by automatically adapting the web page to the size of the browser of the device, such that the integrity of the web page is preserved when viewed on the device. The web page has a pre-determined resizing width and includes a plurality of blocks; and the server includes a pre-determined page layout of the web page for the browser, in which the pre-determined page layout has a pre-designated width. The method includes steps of:

detecting the width of the browser of the device, if the width of the browser is larger than the pre-determined resizing width of the web page, then increases the number of the pixels of each blocks of the web page so as to enhance the resolution of each blocks;

locating the pre-determined page layout of the web page for the browser from the server based on the detected width of the browser of the device;

re-arranging the plurality of blocks of the web page based on the located, pre-determined page layout of the web page for the browser;

adjusting the width of each blocks of the web page to match the width of the browser; and displaying the web page on the device via using the browser.

The step of adjusting the width of each blocks of the web page further includes the step of, increasing the size of each blocks of the web page If the detected width of the browser is larger than the pre-designated width of the pre-determined page layout; or decreasing the size of each blocks of the web page if the detected width of the browser is smaller than the pre-designated width of the pre-determined page layout; wherein the pre-designated width of the pre-determined page layout has 2,560, 1,600, 1,080, 1,024, 960, 800, 720, 480 or 320 pixels.

According to one embodiment, if at least one of the plurality blocks of the web page includes a graphic file associated with a link of a web site, the present method further includes steps of, adjusting the width of the graphic file to match the width of the browser; re-associating the graphic file with the link of the web site; sending the graphic file having the re-adjusted width and the re-associated link of the web site back to the server; and displaying the graphic file in the block of the web page on the device. According to another embodiment, if at least one of the plurality of blocks of the web page includes a video file playable by a video player, the present method further includes steps of, adjusting respective widths of the video file and the video player to match the width of the browser; re- sending the video file and the video player having their widths being respectively adjusted back to the server; and displaying the video file on the device via use of the video player.

According to still another embodiment, if at least one of the plurality of blocks of the web page does not comprise a corresponding content, the method further includes steps of, hiding the block that does not comprise a corresponding content; and resizing the area of neighboring blocks (i.e., blocks adjacent to the hidden block) to include the area of the web page originally taken by the hidden block. The resizing step further includes steps of, determining the number of the neighboring blocks of the hidden block; dividing the width of the hidden block with the number of the neighboring blocks to give a first width; increasing the width of each neighboring blocks by the length of the first width; and displaying the contents associated with the neighboring blocks in the area taken by the resized neighboring blocks (i.e., neighboring blocks respectively having an increase in width by the length of the first width).

According to a further embodiment, the pre-determined page layout of the web page for the browser is generated by the steps of, establishing a plurality of blocks on a blank page layout by displaying an electronic document having a corresponding cache node link on each blocks so as to form the pre-determined page layout; and storing the pre-determined page layout of the web page on the server. The cache node link is produced by the steps of, receiving and storing the electronic document submitted by a user in the server; generating an identifying code for the submitted electronic document; and generating the cache node link by use of the identifying code and the position where the electronic document is stored in the server. The electronic document may be a PDF document, a graphic file, a text file, an acoustic file or a video file.

Accordingly, it is the second aspect of the present disclosure to provide a system for displaying a web page on a device by automatically adapting the web page to the width of the browser on the device, wherein the web page has a pre-determined resizing width and includes a plurality of blocks, and the server comprises a pre-determined page layout of the web page for the browser, in which the pre-determined page layout has a pre-designated width, the system includes,

a detecting module for detecting the width of the browser and locating from the server the pre-determined page layout of the web page for the browser;

an enhancing module for increasing the number of pixels of each blocks when the detected width of the browser is larger than the pre-determined width of the web page;

a re-arranging module for re-arranging each blocks of the web page in accordance with the located pre-determined page layout of the web page;

a resizing module for re-adjusting the width of each blocks of the web page;

an output module for displaying the web page in the browser of the device; and

a database for storing the pre-determined page layout of the web page. According to one embodiment of this disclosure, the resizing module comprising instructions to increase the size of each blocks if the detected width of the browser is larger than the pre-designated width of the pre-determined page layout, or to decrease the size of each blocks if the detected width of the browser is smaller than the pre-designated width of the pre-determined page layout; wherein the pre-designated width of the pre-determined page layout has 2,560, 1,600, 1,080, 1,024, 960, 800, 720, 480 or 320 pixels.

According to another embodiment of this disclosure, in the case when at least one of the plurality blocks of the web page comprises a graphic file associated with a link of a web site, the system further includes a carousel module for performing steps of, adjusting the width of the graphic file; re-associating the graphic file having the re-adjusted width and the re-associated link of the web site; and re-displaying the graphic file in the at least one of the plurality blocks of the web page.

According to another embodiment, in the case when at least one of the plurality blocks of the web page comprises a video file playable by a video player, the system further includes a video module for performing steps of, adjusting respective widths of the video file and the video player to match the width of the browser; re- sending the video file and the video player having their widths being respectively adjusted back to the server; and displaying the video file playable by the video player on the device.

According to another embodiment of this disclosure, in the case when at least one of the plurality blocks of the web page does not include corresponding content, the re-arranging module of the present system further includes instructions for performing steps of, hiding the block that does not comprise the corresponding content; and resizing the neighboring blocks of the hidden block to include the area of the web page originally taken by the hidden block. In one example, the resizing instruction of the re-arranging module further includes instructions for steps of, determining the number of the neighboring blocks of the hidden block; dividing the width of the hidden block with the number of the neighboring blocks to give a first width; increasing the width of each neighboring blocks by the length of the first width; and displaying the contents associated with the neighboring blocks in the area taken by the resized neighboring blocks.

According to one embodiment of this disclosure, the pre-determined page layout of the web page is generated by instructions stored in the memory of the system that perform steps of, establishing a plurality of blocks on a blank page layout by displaying an electronic document having a corresponding cache node link on each blocks so as to form the pre-determined page layout; and storing the pre-determined page layout of the web page on the server.

According to a further embodiment of the present disclosure, the system further includes a cache module for generating the cache node link. The cache module includes instructions for performing steps of, receiving and storing the electronic document submitted by a user in the server; generating an identifying code for the submitted electronic document; and generating the cache node link by use of the identifying code and the position where the electronic document is stored in the server. The electronic document may be a PDF document, a graphic file, a text file, an acoustic file or a video file.

This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detail description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended as an aid in determining the scope of the claimed subject matter.

The details of one or more embodiments of this disclosure are set forth in the accompanying description below. Other features and advantages of the invention will be apparent from the detail descriptions, and from claims. BRIEF DESCRIPTION OF THE DRAWINGS

The accompanying drawings, which are incorporated in and constitute a part of the specification, illustrate various example systems, methods and other exemplified embodiments of various aspects of the invention. The present description will be better understood from the following detailed description read in light of the accompanying drawings, where,

FIG 1 is a block diagram illustrating the hardware layout of a computer system suitable for implementing one embodiment of the present disclosure;

FIG 2 is a block diagram illustrating a network environment implementing one embodiment of the present invention;

FIG 3 is a block diagram illustrating the sequence of actions as depicted in the flow chart of FIG 4 when implemented in the system of this invention;

FIG 4 is a flow chart depicting the steps of a method in accordance with one embodiment of this invention;

FIG 5 is a flow chart depicting steps of a preferred embodiment of the method of this invention;

FIG 6 is a block diagram illustrating a network environment implementing another embodiment of the present invention;

FIG 7 is a block diagram illustrating the sequence of actions as depicted in the flow chart of FIG 8 when implemented in the system of this invention;

FIG 8 is a flow chart depicting the steps of a method in accordance with one embodiment of this invention;

FIG 9A is a block diagram depicting a pre-determined web page layout for a browser width that is over 800 pixels in accordance with one embodiment of this invention;

FIG 9B is a block diagram depicting the layout of a web page that has been re-arranged in accordance with the pre-determined web page layout of FIG 9A in accordance with one embodiment of this invention, in which the browser of the user device has a width of 4,800 pixels;

FIG 9Cis a block diagram depicting a pre-determined web page layout for a browser width that is smaller than 300 pixels in accordance with another embodiment of this invention;

FIG 9D is a block diagram depicting the layout of a web page that has been re-arranged in accordance with the pre-determined web page layout of FIG 9CA in accordance with one embodiment of this invention, in which the browser of the user device has a width of 300 pixels;

FIG 10 is a flow chart illustrating the steps of the present method in accordance with another embodiment of this invention;

FIG 11 is a flow chart illustrating the steps of the present method in accordance with still another embodiment of this invention;

FIG 12A is a diagram illustrating the layout of blocks of a web page in accordance with one embodiment of this invention;

FIG 12B is a diagram illustrating the layout of blocks of a web page in accordance with another embodiment of this invention;

FIG 12C is a diagram illustrating the layout of blocks of a web page in accordance with a further embodiment of this invention;

FIG 12D is a diagram illustrating the layout of blocks of a web page in accordance with still another embodiment of this invention;

FIG 12E is diagram illustrating the layout of blocks of a web page in accordance with still a further embodiment of this invention;

FIG 13 is a block diagram illustrating a network environment implementing another embodiment of the present invention;

FIG 14 is a diagram depicting the arrangement of a system for generating, deleting, or modifying a pre-determined web page layout in accordance with one embodiment of the present invention;

FIG 15 is a flow chart illustrating the steps for generating a pre-determined web page layout in accordance with one embodiment of the present invention; and

FIG 16 is a diagram illustrating a pre-determined web page layout in accordance with one embodiment of the present invention.

DETAILED DESCRIPTION OF PREFERRED EMBODIMENTS

The detailed description provided below in connection with the appended drawings is intended as a description of the present disclosure and is not intended to represent the only forms in which the present disclosure may be constructed or utilized. The description sets forth the functions of the example and the sequence of steps for constructing and operating the example. However, the same or equivalent functions and sequences may be accomplished by different examples.

Notwithstanding that the numerical ranges and parameters setting forth the broad scope of the invention are approximations, the numerical values set forth in the specific examples are reported as precisely as possible. Any numerical value, however, inherently contains certain errors necessarily resulting from the standard deviation found in the respective testing measurements. Also, as used herein, the term "about" generally means within 10%, 5%, 1%, or 0.5% of a given value or range. Alternatively, the term "about" means within an acceptable standard error of the mean when considered by one of ordinary skill in the art. Unless indicated to the contrary, the numerical parameters set forth in the present disclosure and attached claims are approximations that can vary as desired. At the very least, each numerical parameter should at least be construed in light of the number of reported significant digits and by applying ordinary rounding techniques. Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of the ordinary skill in the art to which this invention belongs. The singular forms "a", "and", and "the" are used herein to include plural referents unless the context clearly dictates otherwise.

The term "device" as used herein refers to a device having a built-in browser such as Internet Explorer (IE), FireFox, Opera, Safari, Chrome and etc. that connects to an internet environment; or a handheld device having a mobile application downloaded from any application store existed in the internet. Suitable device for use with the present invention is a displaying device such as a television, a computer, a mobile phone, a personal digital aid (PDA) and the like that includes, but is not limited to, a desk-top or a portable computer, a tablet, a smart TV, an all-in-one monitor computer, and a LCD touch screen whiteboard. The device may have been installed therein with an operating system, which includes, but is not limited to, windows, linux, iOS, Unix, Android and the like.

The term "web page" as used herein refers to a web page having a pre-determined resizing width and includes a plurality of blocks. The pre-determined resizing width of the web page is a width pre- set for the page and stored in the server for the purpose of resizing if certain limitations were met. Upon implementing the present method, if the detected width of the browser of the device is larger than the pre-determined resizing width of the web page, an enhancing step is performed to increase the pixel numbers in each blocks of the web page, so as to prevent the web page from distortion after being blown up. The pre-determined resizing width of the web page of the present disclosure may be any of 2,500, 2,560, 4,800, or 9,600 pixels. In one preferred example, the pre-determined resizing width of the web page has 2,560 pixels. The blocks are areas of the web page where various types of information are displayed; such information includes, but is not limited to, header, menu, text, picture, statement of the authorship, contact information and etc. Further, each block is classified not by types of information it renders, but by its content. For example, when descriptive texts relate to two different themes are displayed in the same web page, it is regarded as a web page having two different blocks. Each block of the web page has a plurality of pre-determined widths respectively correspond to different types of browsers, and each pre-determined width of the block matches (i.e., being smaller or equals to) the width of the browser, hence, the sum of respective widths of the blocks on the same level would equal to the width of the browser. For instance, in the case when the width of the browser has 1,200 pixels, and only one block is present on the same level, then the width of the block equals to 1,200 pixels; on the other hand, if there are 3 blocks on the same level, then the width of each block is 400 pixels.

The term "page layout" as used herein refers to the arrangement of blocks on the web page, specifically, the way how blocks on the page are arranged and presented. The pre-determined page layout as used herein refers to page layouts respectively pre-determined in accordance with the types, as well as the widths of the browsers known in the field. In other words, a plurality of pre-determined page layouts are stored in the server, they may be page layouts pre-determined by the programmers or custom-made by the users, and stored in the memories of the present system. In other words, besides the page layouts that are pre-determined by the programmers and stored in the server of the present system, users may re-arrange the blocks of a web page in accordance with his/her own desires, and then store the web page having newly arranged blocks as a custom-made page layout in the server system. Since the width of the browser may vary, hence in the present system, three ranges of the width of the browser, that is, 0-300, 301-720, and 721-1,024 pixels, are respectively associated to three pre-determined page layouts. In other words, for each type and/or width of a browser, a corresponding page layout has been associated thereto, however, only one corresponding page layout may be found for a page layout within the same width range. According to embodiments of the present disclosure, the pre-designated width of the page layout may be 2,560, 1,600, 1,080, 1,024, 960, 800, 720, 480 or 320 pixels. In one specific example, the pre-designated width has 800 pixels. In another example, the pre-designated width has 300 pixels.

FIG 1 is a block diagram illustrating the hardware layout of the system 100 of the present invention. The system 100 may be any particular type of computer system, and those skilled in the art may appreciate that the benefits and advantages of the present system apply equally to any computer system, regardless of whether the computer system is a complicated multi-user computing apparatus, a single user work station, or a handheld device. In addition, the benefits and advantages of the present system are similarly applicable regardless of whether the computer system stands alone or participates in a computer system network. As depicted in FIG 1, the system 100 comprises a processing unit 140 (e.g., a central processing unit (CPU)); a memory 110, which includes volatile memory 120 and non-volatile memory 130; a storage 150 for storing database and various electronic documents; and a communication connection 160 that allows the system 100 to be part of an internet or intranet network. Volatile memory 120 refers to the memory in which the data stored therein would disappear upon being disconnected from a power source; such memory includes, but is not limited to random access memory (RAM), such as dynamic random access memory (DRAM) (e.g., Double-Data-Rate Three Synchronous Dynamic Random Access Memory (DDR3)); and static random access memory (SRAM). By contrast, no n- volatile memory 130 refers to the memory in which the data stored therein would not disappear after being disconnected from a power source; such memory includes, but is not limited to, read-only memory (ROM) or flash memory. The storage 150 may be a hard drive, a cloud drive and the like. In one example of the present disclosure, the storage 150 is a hard drive.

The embodiments of the present invention may be implemented as logical operations in a network environment having a user's device 1, la, and the server system 200, as depicted in FIG 2. In the user-server environment as illustrated in FIG 2, the user's device 1 (e.g., person computer) or la (e.g., a mobile phone) runs a browser module (herein after browser) as part of operating system on the device 1, la for retrieving or browsing a web page from a remote server system 200 via internet connection 5. Upon receiving a request from the device 1, la for browsing a web page, the system 200 will locate and send back the requested web page that is automatically resized to match the size of the browser of the device 1, la, so that the integrity of the web page is preserved regardless the type, version and/or size of the built-in browser of the user device 1, 1a. Further, as described above, in addition to the well known browser such as IE, Firefox, Chrome, Opera, and Safari; the browser in the device may be an application suitable for running on a handheld device. For example, the browser in the device la may be a mobile application connected to the present system 200. Once the mobile application receives the web page information requested by the user, the mobile application will automatically connect the device la with the present system 200 via internet, thereby allows the system 200 to detect the width of the application ran on the device la and subsequently resizes and re-arranges the requested web page before sending it back to the mobile application for rendering on the device la. The advantage in having a mobile application on the user's device is that the width of the mobile application would be the same as that of the device (e.g., the device la), hence the requested web page after being processed (i.e., resizing and rearranging) by the system 200 will have the same width as the device.

The logical operations of the present invention are implemented as a sequence of computer implemented steps running locally on a computer and/or as interconnected machine modules within the network server system, such as the system 200 of the present invention. Accordingly, the logical operations executed by the system of the present invention as described herein are referred to as acts, steps, or modules. It will be recognized by one of skilled in the art that these operations, acts, or modules may be implemented in software, in firmware, in special purpose digital logic, and any combination thereof without deviating from the spirit and scope of the present invention as recited in the claims attached hereto. In the illustrated example in FIG 2, the system 200 includes two servers, which are web page server 210 and SQL server 230, respectively; and a database 250. The web page server 210 includes at least, a detecting module 212, an enhancing module 216, a re-arranging module 218, a resizing module 220, an output module 221, and optionally, a cache module 214; whereas the SQI module includes at least, a comparing module 232, an insertion module 234, and a deletion module 236. Web page server suitable for used in the present system 200 includes, but is not limited to, the Apache web server or the internet information service (IIS) server.

The detecting module 212 of the web page server 210 comprises instructions for performing steps of, detecting the type, version and/or width of the browser of device 1, la; and locating a pre-determined web page layout that corresponds to the detected type, version, and/or width of the browser from the server. As indicated above, each type, version and/or width of the browser has been pre-associated with a pre-determined web page layout, hence upon receiving a request from the user device 1, la for browsing a web page, the detecting module 212 will determine whether the system 200 supports the detected type, version and/or width of the browser of the device 1, la; once the detected type, version and/or width of the browser of the device 1, la is confirmed, the pre-determined web page layout that has been associated with the detected type, version and/or width of the browser is located from the database 250. The plurality blocks of the requested web page are re-arranged in accordance with the located, pre-determined web page layout before being displayed on the user device 1, la using the built-in browser. Relevant modules for re-arranging the blocks of the web page and displaying the web page on the user device are explained in details in text below.

To accelerate the process of the present invention, the web page server 210 may optionally includes a cache module 214 for generating a cache node link for an electronic document, or for locating from the server 210 a cache node link of the corresponding electronic document, and if the cache node link matches the detected type, version and/or width of the browser of the device 1, la, the cache node link is sent back to the browser and the corresponding electronic document is displayed on the device 1, la via the browser. However, if the cache node link of the corresponding electronic document that matches the detected type, version and/or width of the browser of the device 1, la is absent from the server 210, then the resizing module 220 will be call upon to resize the requested web page before rendering the contents of the resized web page on the user device 1, 1a via the built-in browser.

In the case when the detected width of the browser of the device 1, la is larger than the width of the requested web page, the web page would need to be enlarged or blown up before being rendering on the device 1, la. While the web page is being blown up, the area of each block may be increased, yet the number of pixels stays the same, hence would result in a decrease in the resolution of the web page. To prevent the web page from losing its resolution, an enhancing module 216 is included in the present system 200, if the width of the browser of device 1, 1a exceeded a pre-determined resizing width of the web page, then the number of pixels in each block of the web page is increased and thereby prevents the web page from losing its resolution after each blocks of the page are enlarged or being blown up. In one preferred example, the pre-determined resizing width of the web page has 2,560 pixels.

To adapt to various types or sizes of the browsers the user device 1, la might be equipped, the re-arranging module 218 may re-arrange the layout of each blocks on the web page in accordance with a pre-determined web page layout located from the server based on the type and width of the browser detected by the detecting module 212. As indicated above, regardless the detected width of the browser is larger or smaller than the pre-determined resizing width of the web page, as long as it remains in the same pre-designated range, then the same pre-determined web page layout will be located by the detecting module 212, so that the re-arranging module 218 may proceed to re-arrange each blocks of the web page based on the located web page layout. The resizing module 220 then proceeds to resize the width of each blocks of the web page so that it matches the width of the browser (i.e., the width of each block after resizing would be smaller or equal to the width of the browser). According to one embodiment of the present disclosure, the resizing module 220 comprises instructions for, comparing the width of the browser and the width of the web page, in which the blocks of the web page have been re-arranged by the re-arranging module 218, and increasing or decreasing the size of each blocks based on results from the comparison step. If the width of the browser is larger than that of the web page, then each block of the web page is enlarged (i.e., the width of each blocks of the web page is increased). Conversely, if the width of the browser is smaller than that of the web page, then each block of the web page is reduced (i.e., the width of each blocks of the web page is decreased). The web page having its blocks rearranged and/or resized is then sent back to the browser by the output module 222 for displaying on the user device 1, 1a.

The SQL server 230 includes at least, a comparison module 232, an insertion module 234, and a deletion module 236, for receiving and executing instructions received from the server for performing searching, inserting and/or deleting tasks in the database 250. For example, upon detecting the width of the browser of device 1, la, detecting module 212 would generate instructions to instruct the comparing module 232 to search and locate a pre-determined web page layout for the detected browser from the server. As to the function of the insertion module 234 and the deletion module 236, they will be further explained in details in paragraphs bellowed. Suitable SQL server 230 includes, but is not limited to, MySQL server, Oracle server, and the like.

FIG 3 is a block diagram illustrating the sequence of actions as depicted in the flow chart of FIG 4 when implemented in the system 300 of this invention. Attention is now turned to both FIGs 3 and 4, as depicted in FIG 3, in a network environment, upon connecting to the system 300 of this invention, detecting module 312 performs acts of detecting the type, version and/or width of the browser of the user device 1, so as to determine whether the system 300 supports the detected browser (S410 of FIG 4) while generating instructions to instruct the comparing module 332 in SQL server 330 to locate a corresponding pre-determined web page layout (S430 of FIG 4) from the server. Further, before the corresponding pre-determined web page layout is located by the comparing module 332, the width of the browser of the user device 1 is compared with a pre-determined resizing width of the web page 360 stored in the web page server 310 (S420 of FIG 4), if the width of the browser is larger than the width of the pre-determined resizing width of the web page, then the enhancing module 310 will be called upon to generate instructions for performing acts of increasing the number of pixels of each blocks of the web page 360 (S422 of FIG 4) so as to prevent the web page from losing its resolution after resizing, which will take place in subsequent acts (S450 of FIG 4). Conversely, if the width of the browser is smaller than the width of the pre-determined resizing width of the web page 360, then the enhancing module 310 will not take further action, and the process proceeds to subsequent acts, that is S430 of FIG 4. Once the pre-determined web page layout is located by the comparing module 332 (S430 of FIG 4), then the blocks of the web page 360 are re-arranged under the instructions of re-arranging module 318 based on the pre-determined web page layout located in previous step (S440 of FIG 4). In S450 of FIG 4, the web page 360 having its blocks being re-arranged by re-arranging module 318 in S430, is now under instructions of the resizing module 320, in which the width of each blocks of the web page 360 is adjusted until it matches with the width of the browser, meaning the width of each block is smaller or equal to the width of the browser. In S460 of FIG 4, the web page 360 having being resized to adapt to the size of the browser is then sent via output module 321 to device 1, and re-displayed on device 1 using the built-in browser.

Optionally, the system 300 of FIG 3 may further include a cache module 314, which is depicted as the block in dash line in FIG 3, for determining if a corresponding cache node link for the pre-determined web page layout is present in the system. The corresponding cache node link can be sent to the browser of the device via the cache module 314 to reduce the time and burden of the system 300 for executing the displaying request. In other words, the system 300 may not require performing instructions respectively included in the enhancing module 316, the re-arranging module 318, and the resizing module 320, if a corresponding cache node link for the pre-determined web page layout is present in the system 300.

Referring back to FIG 4 again, in step S410, detecting module 312 would determine the type, version and width of the built-in browser of device 1. The purpose of step S410 is to determine whether the environment the browser is in, may support the program language of the present system; if yes, the process proceeds to step S420; if not, a pop-up window would appear and the user device is directed to another web page to update the browser to a version that is supported by the system 300.

In step S420, the width of the browser detected in S410 is compared with a pre-determined resizing width of the web page 360 stored in the system 300. If the detected width of the browser in S410 is larger than the pre-determined resizing width of the web page 360, than an optional step, i.e., step S422, is performed. In this optional step S422, the enhancing module 316 is called, and the number of pixels in each blocks of the web page 360 is increased so that the resolution in each blocks of the web page 360 increases accordingly. In step S422, the number of pixels is increased by replicating each and every pixel in the block, so that the integrity of the web page 360 is preserved after the blocks of the web page 360 are blown up in the subsequent step, such as in step S450. In one example, the pre-determined resizing width of the web page 360 has 2,048 pixels.

In step S430, a pre-determined web page layout corresponding to the browser detected in step S410 is located from the database 350. As indicated in relevant paragraphs above, various pre-determined web page layouts respectively correspond to pre-designated width ranges of browser have been stored in the database 350, hence upon determining the width of the browser in S410, a corresponding web page layout may be located from the database 350.

In step S440, the corresponding pre-determined web page layout identified in S430 is used as the template for re-arranging the layout of the blocks of the web page. Then, in step S450, the width of each of the re-arranged blocks is adjusted, so that it matches the width of the web page 360. The term "match" as used herein refers to the width of the block being smaller or equal to the width of the browser. The width adjusting step or S440 is governed by the instructions in the resizing module 318, once the size of each blocks of the web page 360 has been adjusted to match the size of the browser, the web page 360 can then be displayed in the user device 1 using its built-in browser (step S460).

FIG 5 is a flow chart depicting steps of a preferred embodiment of the method of this invention. The method steps as depicted in FIG 5 are similar to those in FIG 4, except additional steps S512, S514, S552, S554, and S556 are included, in which optional steps S512 and S514 are included for determining if a corresponding cache node link for a pre-determined web page layout is present in the system; and steps S552, S554, and S556 are included for resizing the web page 360.

In step S512 and S514, if a corresponding cache node link for the pre-determined web page layout is present in the system, then the corresponding cache node link can be sent to the browser of the device via the cache module 314, and skip the subsequent steps of S520 to S560, so as to reduce the time and burden of the present system for executing the task of displaying the requested web page 360 on the user device. In other words, the present system may not require performing instructions respectively included in the enhancing module 316, the re-arranging module 318, and the resizing module 320, if a corresponding cache node link for the pre-determined web page layout is present in the system. By contrast, if a corresponding cache node link for the pre-determined web page layout is not present in the system, then the process will proceed as plan to the next step. In this embodiment, steps S520 to S540 are similar to steps S420 to S440 of FIG 4, whereas step S450 of FIG 4 is broken down to steps S552, S554 and S556. Particularly, in step S552, the width of the pre-determined page layout (or the width of the web page 360 having its blocks re-arranged in accordance with the pre-determined page layout) is compared with the width of the browser detected in S510. If the width of the browser detected in S510 is larger than the width of the pre-determined page layout, then the size of each blocks of the web page 360 is increase until it matches the size of the browser (S554); by contrast, if the width of the browser detected in S510 is smaller than the width of the pre-determined page layout, then the size of each blocks of the web page 360 is reduce accordingly or until it matches the size of the browser (S556). If the width of the browser detected in S510 equals to the width of the pre-determined page layout, then the process proceeds to the next step (S560), i.e., displaying the web page on the user device by use of the browser.

FIG 6 is a block diagram illustrating the implementation of the present system 600 in a network environment having a user device 1, la in accordance with another preferred embodiment of this invention. The arrangement of the system 600 is similar to that of the system 200 as depicted in FIG 2, except the web page server 610 further includes a carousel module 622 and a video module 624.

The carousel module 622 comprises instructions for displaying at least one graphic file in a block of the web page, in which each graphic file is associated with a link to a web site. According to some embodiments of the present invention, the carousel module 622 may display at least 2, 3, 4, 5, 6, 7, 8, 9, or 10 graphic files in one block of the web page according to a pre-determined playing list or sequence stored in the system, or a list or sequence determined by the user. For example, in the case when one block of a web page 660 includes two graphic files respectively associated with a link to a web site to be display, then when the resizing module 620 of the present system 600 merely resizes the area of the block of the web page in accordance with a pre-determined web page layout without re-associating the respective links to the web sites to the graphic files to be displayed, then the graphic files wound remain control by their respective program codes, hence when one graphic file is to be displayed in the block, its program code would ignore the instructions given by the resizing module 620 and thereby results in the display of the graphic file being out of sync with the size of the block, that is, the size of the display graphic file being either too large or too small than the size of the block. To solve the afore-mentioned problem, the carousel module 622 comprises instructions for performing the steps of, adjusting the width of each graphic file so that it matches the width of the browser of the device 1 ; re-associating the graphic file with its link to the web site; and sending the graphic file back to the block for displaying.

As to the video module 624, it comprises instructions for displaying at least one video files in a block of the web page. According to some embodiments of the present invention, the video module 624 may display at least 2, 3, 4, 5, 6, 7, 8, 9, or 10 video files in one block of the web page. Specifically, the video files are played by a video player in the block according to a pre-determined playing list or sequence stored in the system, or a list or sequence determined by the user. According to some embodiments of the present invention, the video module 624 comprises instructions for performing steps of, adjusting the respective widths of the video file and the video player so that they respectively matches the width of the browser of the device 1 ; and sending the video file and the video player back to the block so that the video file may be displayed in the block using the video player without out of sync with the browser of the device. In other words, the width of the video file as well as the width of the video player remain sync (i.e., equal to or smaller) with the width the browser of the device. According to embodiments of the present invention, the video player must be able to adapt to the size of the browser, that is, the video player must be able to resize in accordance with the size of the browser. Further, when the present system is constructed using hyper text markup language (HTML), then the width of the video player would be limited to the width prescribed in DIV language of HTML. Examples for the video player that may be used in the present system include, but are not limited to, the video players developed using JavaScript or JavaQuery language. Conversely, examples for the video player that may not be used in the present system include, but are not limited to, the video players developed using flash or Java language.

FIG 7 is a block diagram illustrating the sequence of actions as depicted in the flow chart of FIG 8 when implemented in the system 700 of this invention. The system 700 is a slight modification of the system 300 as depicted in FIG 3, with the addition of the carousel module 722 and the video module 724. Attention is now turned to both FIGs 7 and 8, particularly to the carousel module 722 that comprises instructions for performing steps S832, S8320, S8322, and S8324; and video module 724 that comprises instructions for performing steps S834, S8340, and S8342. As depicted in FIG 8, prior to step S840, in which each blocks of the web page is re-arranged in accordance with the pre-determined web page layout located from the server in step S830; step S832 is performed to determine whether the block includes at least one graphic file, in which each graphic file is associated with a link to a web site. If the block comprises at least one graphic files, then the carousel module 722 will be called upon to perform acts or steps of, adjusting the width of each graphic file so that it matches the width of the browser as detected in S810 (S8320); re-associating the graphic file with its link to the web site (S8322); and sending the graphic file back to the block for displaying (S8324). On the other hand, if the block comprises at least one video files playable by a video player, then the video module 724 will be called upon to perform acts or steps of, adjusting the respective widths of the video file and the video player so that they respectively matches the width of the browser as detected in S810 (S8340); and sending the video file and the video player back to the block so that the video file may be displayed in the block using the video player without out of sync with the browser of the device (S8342). Further, the step of adjusting the width of the graphic file (i.e., S832, S8320, S8322, and S8324) and the step of adjusting the width of the video file and the video player (i.e., S834, S8340, and S8342) may be perform in any order, although in the flow chart of FIG 8, the step S832 is performed before the step S834, yet this invention is not limited to the sequence as depicted.

FIGs 9A and 9B are block diagrams depicted a pre-determined web page layout in accordance with one embodiment of this invention. In this particular embodiment, the pre-determined web page layout as depicted in FIG 9A is termed herein "the first web page layout," and is suitable for web page having a width greater than 800 pixels. According to methods and/or systems as described above in FIGs 1 to 8, the detecting module will provide instructions for detecting and determining the width of the browser of the device, which has 4,800 pixels in this example. Since this detected width, 4,800 pixels, is larger than the pre-determined resizing width of the web page of this invention (i.e., 2,560 pixels), the enhancing module will be called upon to perform the acts of increasing the numbers of pixels in each block of the web page to prevent the web page from losing its resolution in subsequent steps. Next, the pre-determined web page layout corresponding to the width of 4,800 pixels, that is, the web page layout of FIG 9A, will be located from the server, and the re-arranging module is called upon to re-arrange the blocks of the web page in accordance with the web page layout of FIG 9A, followed by calling upon the re-sizing module to adjust the width of each block to match the width of the browser or 4,800 pixels. The web page having the width of each blocks being adjusted to match 4,800 pixels and as depicted in FIG 9B, is then output by the output module for displaying on the device using the detected module.

FIGs 9C and 9D are block diagrams depicted a pre-determined web page layout in accordance with another embodiment of this invention. In this particular embodiment, the pre-determined web page layout as depicted in FIG 9C is termed herein "the second web page layout," and is suitable for web page having a width smaller than 800 pixels. According to methods and/or systems as described above in FIGs 1 to 8, the detecting module will provide instructions for detecting and determining the width of the browser of the device, which has 300 pixels in this example. Since this detected width, 300 pixels, is smaller than the pre-determined resizing width of the web page of this invention (i.e., 2,560 pixels), the enhancing module will not be called upon, but proceed to locate a pre-determined web page layout corresponding to the width of 300 pixels, that is, the web page layout of FIG 9C, from the server. Then, the re-arranging module is called upon to re-arrange the blocks of the web page in accordance with the web page layout of FIG 9C; followed by the re-sizing module to adjust the width of each blocks to match the width of the browser, that is, 300 pixels The web page having the width of each blocks being adjusted to match 300 pixels and as depicted in FIG 9D, is then output by t he output module for displaying on the device using the detected module.

FIG 10 is a flow chart illustrating the present method in accordance with another embodiment of this invention. In this example, the method for displaying a web page, particular, a web page in which at least one of the block does not contain any correspond content, is depicted. As depicted in FIG 10, prior to step S1040, or prior to re-arranging the blocks of a web page in accordance with the pre-determined web page layout located by the step SI 030, additional steps S1035, S10350, and S10352 are performed. In step S10350, the block, in which no corresponding content is found therein, is hided from view. Then, in step SI 0352, the neighbor blocks (i.e., blocks that are adjacent to the block that contains no corresponding content therein) is resized to include the area of the hidden block, and the content in the neighbor blocks is displayed in the area taken by the resized neighbor blocks.

FIG 11 is a flow chart illustrating the present method in accordance with still another embodiment of this invention. The method steps are similar to those as depicted in FIG 10, except step S10352 in FIG 10 are further expanded into steps S11352, S11354, and S11356. In step SI 1352, the number of the neighboring blocks or blocks that are adjacent to the block that contains no corresponding content therein (herein after "the hidden block") is determined. In step SI 1354, dividing the width of the hidden block with the number of the neighboring blocks as determined in step SI 1352 to produce a first width. In step SI 1356, increasing the width of each neighboring blocks by a length of the first width as determined in step SI 1354.

FIG 12A is a diagram illustrating the layout of blocks of a web page after being processed by the method of FIG 10 in accordance with various embodiments of this invention. As depicted in FIG 12A, in a pre-determined layout, two blocks, that is, blocks A and B (1202a, 1204a), are present on the same level (see FIG 12A, top panel). In the case when block B (1204a) does not include any corresponding content, step S10350 is performed, and block B (1204a) is hidden (see FIG 12A, middle panel); the method then proceeds to step S10352, in which the content in original block A (1202a) is now displayed in a new block A' (1202b), which occupies the area originally taken by both blocks (1202a and 1204a) (see FIG 12A, bottom panel). In other words, the content in blocks 1202a and 1202b are the same, except the width of block 1202b is larger than that of block 1202a.

FIG 12B is a diagram illustrating the layouts of blocks of a web page after being processed by the method of FIG 11 in accordance with one embodiment of this invention. As depicted in FIG 12B, in a pre-determined layout, three blocks C, D, and E (1212a, 1214a, and 1216a) appear on the same level. In the case when block D (1214a) does not include any corresponding content, steps S11350 to S11356 are called upon. In S11350, block D (1214a) is hidden (see FIG 12B, middle panel); the method then proceeds to step S11352, in which the number of the neighboring blocks (i.e., blocks that are adjacent to block D (1214a) is determined. In this example, the number of blocks that are neighboring to block D (1214a) is two, specifically, blocks C and E (1212a and 1216a). In step S11354, the width of block D (1214a) is divided by two (i.e., the number of its neighboring blocks) to produce a first width. In step SI 1356, the widths of blocks C and E (1212a and 1216a) are respectively increased by the length of the first width, and the corresponding contents respectively in blocks C and E can then be displayed in the new block C and E (1212b and 1216b) (see FIG 12B, bottom panel).

FIG 12C illustrates the layout of blocks of a web page after being processed by the method of FIG 10 in accordance with another embodiment of this invention. There are three blocks, blocks 1222a, 1224a, and 1226a in this pre-determined layout, in which blocks 1224a and 1226a are on different level, and the height of block 1222a is larger than the respective heights of blocks 1224a and 1226a. In this example, block 1222a does not contain any corresponding content, hence block 1222a is hidden (S10350), then the widths of blocks 1224a and 1226a are respectively increased by the width of block 1222a (S10352) to be blocks 1224b and 1226b, and contents in both blocks 1224a and 1226a can then be re-displayed in blocks 1224b and 1226b.

FIG 12D is an exemplified variation of displaying the web page when one block of the page does not contain any corresponding content. In this example, the upper panel depicts the layout of three blocks, they are block 1222a, 1224a, and 1226a, in which blocks 1224a and 1226a respectively reside in different rows. In the case when block 1224a does not contain any corresponding content, then block 1224a is hidden from view (the middle panel of FIG 12D); Then, block 1222a and 1226a are resized in subsequent steps by the re-sizing module to be block 1222b and 1226b, respectively; with the size of block 1226a being enlarged; and the size of block 1222a remains the same (see the bottom panel of FIG 12D). Then, the contents respectively displayed in blocks 1222a and 1226a may be re-displayed in blocks 1222b and 1226b.

FIG 12E provides another example of displaying the web page when one block of the page does not contain any corresponding content. In this example, three blocks C, D and E (1232a, 1234a, and 1236a) are respectively on different levels. In the case when block D (1234a) does not comprise corresponding content, block 1236a is moved up to take the area originally occupied by block 1234a. In this particularly example, neither block 1232a, nor block 1236a is increased in width.

Attention is now turned to FIG 13, which illustrate a network environment that implements one embodiment of the present invention. The arrangement of the system 1300 is similar to that in the system 700 of FIG 7 except additional modules, that is, the certifying module 1326, the file module 1328, and the block module 1329, are included in the web page server 1310. The certifying module 1326 comprises instructions for performing steps of, identifying personal information of a user, identifying a pre-determined web page layout saved by the user; and thereby preventing the relevant information of the user from being tampered. Further, if the user is not a registered user, the certifying module 1326 comprises instructions for accepting the application of a user to be a registered user or a member. The file module 1328 comprises instructions for receiving an electronic document (ED) submitted by the user, and generating a corresponding identifying code for the submitted ED. In addition, the file module 1328 may also generate instructions that may be executed by the insertion module 1314 of the web page server 1310. By executing such instructions, the web page server 1310 may store ED as well as its identifying code in the database 1350. Similarly, upon the deletion of an ED, the deletion module 1328 may also generate instructions for deleting ED and its identifying code from the database 1350. In the system 1300 depicted in FIG 13, an optional cache module 1314 is included in the web page server 1310. The cache module 1314 comprises instructions for generating a cache node link by use of ED and the identifying code of the ED. The block module 1329 comprises instructions for receiving the arrangement of blocks and respective EDs for displaying in the blocks pre-determined by the user, or generating EDs that comply with the user's requirements. In the present example, ED may be a PDF document, a graphic file, a text file, an acoustic file, a video file or a combination thereof.

FIG 14 is a diagram depicting the arrangement of a system 1400 for generating, deleting, or modifying a pre-determined web page layout in accordance with one embodiment of the present invention. As illustrated in FIG 14, if a user wished to generate, delete or change a pre-determined web page layout, certifying module 1426 of web page server 1410 would generate instructions to perform necessary inquiry steps to verify the authenticity of the user. The inquiry steps include, receiving the log-in information of the user so as to identify whether the user is a registered member or not. If the log-in user is not a member, certifying module 1426 would then direct the user to relevant web page that may help the user register and thereby becomes a member. Once the authenticity of the user has been verified by the certifying module 1426, file module 1428 may then receive instructions from the user to generate, delete or change a pre-determined web page layout.

If the use wised to insert a new ED to the pre-determined web page layout, the file module 1428 will generate instructions for performing steps of, receiving and storing the newly insert ED from the user in the database; generating a corresponding identifying code for the newly inserted ED; and generating instructions that may be executed by the insertion module 1434 of SQL server 1430. Upon receiving the insertion instruction generated by the file module 1428, the insertion module 1434 will execute the insertion instruction by storing ED and its identifying code in database 1450. Optionally, the system 1400 further includes a cache module 1414 for generating and storing a cache node link of an ED based on the identifying code of the ED and the position where ED is stored. In the case when the pre-determined web page layout, which is located in response to the detected width of the browser, is same as the cache node link generated and stored in the present system 1400, then the user may directly access the cache node link generated and stored in the present system 1400, and send the accessed cache node link directly back to device, so as to enhance the efficiency of the present system.

As to block module 1429, it comprises instructions for generating a pre-determined web page layout, which include performing steps of, establishing a plurality of blocks on a blank web page, in which each block comprises a corresponding ED; displaying the corresponding ED in the block; and storing the pre-determined web page layout in the server. The user may designate EDs to be displayed in certain blocks in accordance with his/her own desire, and thereby generates a custom-made web page layout.

Further, if the user wished to delete ED from the file module 1428, file module 1428 would generate instructions that may be executed by the deletion module 1436 in the SQL server 1430 to remove ED. By executing the deletion instructions, ED and its corresponding identifying code would be deleted from the database 1450, and the cache node link of the ED would be deleted from the system 1400 as well. While at the same time, block module 1429 would remove corresponding link of the ED in the block, where the deleted ED was displayed. In other words, once the block module 1429 completes its instructions, the block in which ED was displayed would now turn into a blank area.

In the case when a user intends to updating EDs stored in the system 1400, then the file module 1428, the insertion module 1434, as well as the cache module 1414 are called upon to perform steps of, submitting new EDs, generating corresponding identifying codes of the newly submitted EDs, storing the EDs as well as their respective identifying codes in the system 1400 and the database 1450, and generating corresponding cache node links for the EDs. Optionally, block module 1429 may also be called on to receive a request from the user to change the ED in one certain block, or change the ED of that certain block based on the user's input, so as to update the requested change in the web page layout, as well as EDs to be displayed in that certain block.

It is further noted that in this example, regardless the actions took place prior to the steps of insertion, deletion, and/or changing an ED, the present system 1400 would proceed in similar manners as depicted in FIG 3 or 7 in terms of adjusting the web page layout or the size of the blocks of the web page having a newly inserted, deleted or changed ED, before rendering the modified web page on the user's device.

FIG 15 is a flow chart illustrating the steps for generating a pre-determined web page layout in the system of FIG 14 in accordance with one embodiment of the present invention. Before the method starts, a user's log-in information is received and authenticated by the certifying module 1426 (S1510). Once the user's identification has been confirmed, then file module 1428 would generate instructions for performing steps of, receiving and storing the ED submitted by the user (SI 520); generating corresponding identifying code of the ED (SI 530); generating instructions that may be executed by the SQL server for writing the identifying code of ED to the database (SI 540). Then, the cache module 1414 is called upon to provide instructions for performing steps of, generating a cache node link for the ED (S1550). The cache node link is generated by use of the identifying code of ED and the position in which the ED is stored in the database, these two information are processed by the cache module 1414 so as to produce a cache node link that is directed to the ED, so that the system 1400 may rapidly locate the ED based on the generated cache node link. Next, block module 1429 is called upon to provide instructions for performing steps of, forming a pre-determined web page layout by establishing a plurality of blocks in a blank web page (SI 560); and associating each blocks of the web page with at least one cache node link (SI 570); displaying the ED that corresponds to the cache node link in the block (S1580); and storing the pre-determined web page layout in the server (S1590). The blank web page as used herein refers to a page area that has not been designated with any block area yet.

FIG 16 is a diagram illustrating a pre-determined web page layout in accordance with one embodiment of the present invention. In this exemplified web page layout, the user may re-arrange the layout of each block and/or change the contents to be displayed in each block in accordance with his/her desire, such as by clicking a selection menu to choose the contents (e.g., ED) to be displayed from a pre-provided selections or by dragging EDs from another block and place the dragged EDs in the selected block. The custom-made web page layout may then be saved in the server as a new pre-determined web page layout. In this example, the cache node link that is associated with block 1602 is directed to the heading of the web page 1660. In other words, block 1602 is the area in which a company logo is displayed. A plurality of graphic files for advertising is displayed in block 1604, whereas an article with a specified topic is displayed in block 1606. As to blocks 1608, 1610, 1612, 1614, 1616, 1618, 1620 and 1622, contents such as musical files, selected articles, photos, video files, recommended web sites, news clips, statement of the ownership of the web site, contact information and etc. are displayed, respectively. In this exemplified web page layout, contents to be displayed in block 1602 are fixed, in other words, may not be changed by the user. As to the other blocks, which are depicted in dash lines, they may be modified or changed in accordance with the desire of the user. For example, in the original layout (i.e., left panel in FIG 16), block 1612 was pre-determined to play 4 commercial advertisements that may include a graphic file, a video file and etc, the user may change the contents to be displayed in each block by dragging the 4 commercial advertisements originally placed in block 1612 to block 1604, and thereby generating a new layout for the web page as depicted in the right panel in FIG 16, in which the block that contains the 4 commercial advertisements is now referred to as block 1604'.

It will be understood that the above description of embodiments is given by way of example only and that various modifications may be made by those with ordinary skill in the art. The above specification, examples and data provide a complete description of the structure and use of exemplary embodiments of the invention. Although various embodiments of the invention have been described above with a certain degree of particularity, or with reference to one or more individual embodiments, those with ordinary skill in the art could make numerous alterations to the disclosed embodiments without departing from the spirit or scope of the present disclosure.