Patent Application
20150269271
The present disclosure relates to information processing techniques and to a method and an apparatus for displaying a webpage.
This section provides background information related to the present disclosure which is not necessarily prior art.
Presently, there are two main webpage displaying methods in smart terminal browser fields. In one method, a webpage processing engine (e.g., Webkit, Presto, etc.) is configured in a smart terminal to retrieve and parse a webpage and arrange the layout. This method simplifies the development of the smart terminal, but the smart terminal requires a strong hardware processing ability, e.g., high speed CPU, large memory, and high network speed, etc. In another method, a “thin client technique” is adopted. The webpage processing engine is configured at a server. Operations such as webpage retrieving, parsing, and layout arrangement are implemented by a series of background servers. The smart terminal merely needs to receive and display a webpage of which the layout has been arranged. This displaying mode is challenging to develop, but the terminal requires less hardware resources to display the webpage, e.g., less CPU, less memory, and less network resources.
This section provides a general summary of the disclosure, and is not a comprehensive disclosure of its full scope or all of its features.
According to various embodiments, a method for displaying a webpage is provided. The method includes:
receiving, by a server, a webpage request from a terminal;
obtaining, by the server, a webpage according to the webpage request;
arranging, by the server, a vector layout for webpage elements in the webpage; and
transmitting, by the server, the webpage after the vector layout arrangement to the terminal, such that the terminal displays the webpage and zooms in or zooms out the webpage elements in the webpage according to a webpage zooming instruction.
According to various embodiments, an apparatus for displaying a webpage is provided. The apparatus includes:
one or more processors;
a memory; and
one or more program modules stored in the memory and to be executed by the one or more processors, the one or more program units comprise:
a webpage request receiving unit, adapted to receive a webpage request from a terminal and obtain a webpage according to the webpage request;
a vector layout arranging unit, adapted to arrange a vector layout for webpage elements in the webpage; and
a webpage transmitting unit, adapted to transmit the webpage after the vector layout arrangement to the terminal, such that the terminal displays the webpage and zooms in or zooms out the webpage elements in the webpage according to a webpage zooming instruction.
According to various embodiments, a non-transitory computer-readable storage medium comprising a set of instructions for displaying a webpage is provided, the set of instructions to direct at least one processor to perform various acts of:
receiving a webpage request from a terminal;
obtaining a webpage according to the webpage request;
arranging a vector layout for webpage elements in the webpage; and
transmitting the webpage after the vector layout arrangement to the terminal, such that the terminal displays the webpage and zooms in or zooms out the webpage elements in the webpage according to a webpage zooming instruction.
Other aspects or embodiments of the present disclosure will be recognized by those skilled in the art in view of the description, the claims, and the drawings herein.
Further areas of applicability will become apparent from the description provided herein. The description and specific examples in this summary are intended for purposes of illustration and are not intended to limit the scope of the present disclosure.
The drawings described herein are for illustrative purposes of various embodiments and not all possible implementations, and are not intended to limit the scope of the present disclosure.
Features of the present disclosure are illustrated by way of example and are not limited in the following figures, in which like numerals indicate like elements.
Corresponding reference numerals indicate corresponding parts throughout the several views of the drawings.
Example embodiments will now be described more fully with reference to the accompanying drawings.
The preset disclosure will be described in further detail hereinafter with reference to accompanying drawings and examples to make the technical methods and qualities therein clearer.
For simplicity and illustrative purposes, the present disclosure is described by referring to various embodiments. In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present disclosure. It will be readily apparent however, that the present disclosure may be practiced without limitation to these specific details. In other instances, some methods and structures have not been described in detail so as not to unnecessarily obscure the present disclosure. As used herein, the term “includes” means includes but not limited to, the term “including” means including but not limited to. The term “based on” means based at least in part on. In addition, the terms “a” and “an” are intended to denote at least one of a particular element.
Conventionally, smart terminals using the thin client technique adopt single-touch screens. The smart terminals display webpages whose layouts have been arranged by a background server. Users cannot zoom in or zoom out of the webpages freely. In contrast, various embodiments provide a method for displaying a webpage, such that a user can zoom in or zoom out the webpage displayed in a browser of a smart terminal with a multi-touch screen.
The server 110 may vary in terms of capabilities or features. Claimed subject matter is intended to cover a wide range of potential variations. For example, the server 110 may include and execute a variety of operating systems 141 and a variety of possible applications 142, such as a webpage displaying application 145. The server 110 may include one or more non-transitory processor-readable storage media 130 and one or more processors 122 in communication with the non-transitory processor-readable storage media 130. For example, the non-transitory processor-readable storage media 130 may be a RAM memory, flash memory, ROM memory, EPROM memory, EEPROM memory, registers, hard disk, a removable disk, a CD-ROM, or any other form of non-transitory storage medium known in the art. The one or more non-transitory processor-readable storage media 130 may store sets of instructions or units and/or modules that comprise the sets of instructions, for conducting operations described in the present disclosure. The one or more processors may be configured to execute the sets of instructions and perform the operations according to various embodiments.
Block 201: A server receives a webpage request from a terminal and obtains a webpage according to the webpage request. Herein, the server may obtain the webpage from a third party website according to the webpage request or obtain the webpage from a cache of the server itself according to the webpage request.
Block 202: The server obtains webpage elements in the webpage and arranges a vector layout for the webpage elements. In block 202, the server retrieves webpage elements (e.g., text, pictures, controllers, etc.) from the webpage, configures rendering attribute information for each webpage element, and encapsulates the webpage element and its rendering attribute information into a webpage element layout packet. The process of encapsulating the webpage element and its rendering attribute information into the webpage element layout packet is referred to as vector layout arrangement.
According to various embodiments, each webpage element may be arranged in a rectangle area which includes a content area (i.e., contents of the webpage element). The content area may include text, picture or controller (e.g., icon, input box, and list box), etc. The rectangle area and the content area may have different rendering attributes, e.g., color, margin width, etc. This information is determined by the rendering attribute information. Although the rectangle area is taken as an example to describe the encapsulation of the webpage element, those with ordinary skill in the art will recognize that the webpage element may also encapsulate other shapes.
According to various embodiments, a common attribute may include the following:
X: denotes X coordinate of a webpage element layout packet in a webpage document.
Y: denotes Y coordinate of the webpage element layout packet in the webpage document.
WIDTH: denotes the width of the webpage element layout packet.
HEIGHT: denotes the height of the webpage element layout packet.
BG_COLOR: denotes a background color of the webpage element layout packet.
PADDING_LEFT: denotes a left margin of the contents in the webpage element layout packet to the webpage element layout packet.
PADDING_TOP: denotes a top margin of the contents in the webpage element layout packet to the webpage element layout packet.
PADDING_RIGHT: denotes a right margin of the contents in the webpage element layout packet to the webpage element layout packet.
PADDING_BOTTOM: denotes a bottom margin of the contents in the webpage element layout packet to the webpage element layout packet.
According to various embodiments, if the webpage element is text, the rendering attribute information may further include at least one of: FONT_SIZE: size of text; FONT_STYLE: style of text (traditional, bold, Italic); FONT_COLOR: color of text; URL: link in text; VALUE: content of text. If the webpage element is a picture, the rendering attribute information of the webpage element may further include a link or a replacement text if the picture is not available. If the webpage element is a controller, the rendering attribute information of the webpage element further includes a controller type. The controller may be any one of an icon controller, a list box controller, a single-line text/password inputting box controller, a multi-line text inputting box controller, a file upload controller, a drawer controller, a single selection controller, or a multi-selection controller. The text may be traditional text or text with a hyperlink. If the attributes include a valid URL attribute, the text is hyperlink text and can be clicked; otherwise, the text is traditional text. The two kinds of texts may be displayed by different colors. For a picture, if its attribute includes a valid URL attribute, the picture is a hyperlink picture; otherwise, the picture is a traditional picture. A picture with a hyperlink may be clicked to open a new link.
Block 203: The server transmits the webpage after the vector layout arrangement to the terminal for display. In this block, the server transmits the element layout packet to the terminal which obtains the webpage elements and their rendering attribute information from the webpage element layout packet and renders the webpage elements according to the rendering attribute information to display the webpage.
In block 203, the terminal may display the shape of the webpage element layout packet as invisible.
When a user's fingers executes a zoom-in/zoom-out operation on the multi-touch screen of the terminal, the terminal detects a webpage zooming instruction and determines a zooming proportion according to the webpage zooming instruction. According to the zooming proportion, the terminal performs a vector zooming operation to the webpage element layout packet and the webpage elements, wherein the webpage element layout packet is configured as invisible.
As shown in
As shown in
A1*1.5, area coordinates of A1 are (0, 0, 60, 30);
A2*1.5, area coordinates of A2 are (0, 30, 60, 60);
B1*1.5, area coordinates of B1 are (60, 0, 120, 30);
B2*1.5, area coordinates of B2 are (60, 30, 120, 60);
C1*1.5, area coordinates of C1 are (120, 0, 180, 30); and
C2*1.5, area coordinates of C2 are (120, 30, 180, 60).
The rendering attribute value of the area content of each area should also be multiplied by the corresponding enlarge times. According to various embodiments, the top margin of the text area in packet A1 changes from 4 to 4*1.5=6; the bottom margin of the text area in packet A1 changes from 4 to 41.5=6, the left margin of the text area in packet A1 changes from 4 to 4*1.5=6; the right margin of the text area in packet A1 changes from 4 to 41.5=6. Similarly, the multiplying operation is also performed to content areas in other packets. It can be seen from
Various embodiments further provide an apparatus for displaying a webpage. As shown in
The webpage request receiving unit 601 is adapted to receive a webpage request from a terminal and obtain a webpage according to the webpage request. The vector layout arranging unit 602 is adapted to arrange a vector layout for webpage elements in the webpage. The webpage transmitting unit 603 is adapted to transmit the webpage after the vector layout is arranged, such that the terminal displays the webpage elements in the webpage according to the webpage received. In particular, the webpage request receiving unit 601 may obtain the webpage from a third party website or from a cache of the server itself.
The rendering attribute information of the webpage element includes at least one of a position of the webpage element layout packet in the webpage, width of the webpage element layout packet, background color of the webpage element layout packet, height of the webpage element layout packet, and a position of a webpage element in the webpage element layout packet. If the webpage element includes text, the rendering attribute information may further include at least one of font size, font style, font color, and a hyperlink in the text. If the webpage element includes a picture, the rendering attribute information of the webpage element may further include a link or a replacement text if the picture is not available. If the webpage element includes a controller, the rendering attribute information of the webpage element further includes a controller type. The controller may be any one of an icon controller, a list box controller, a single-line text/password inputting box controller, a multi-line text inputting box controller, a file upload controller, a drawer controller, a single selection controller, or a multi-selection controller.
The webpage displaying method and apparatus are provided by the various embodiments. For example, the webpage displaying method may be implemented as a plug-in program installed in the terminal or as an application which can be downloaded by the user. If the method is implemented as the plug-in program, any one of the plug-in formats of ocx, dll, cab, flash plug-in, RealPlayer plug-in, MMS plug-in, MIDI plug-in, ActiveX plug-in may be selected.
In view of the above, according to various embodiments, the server receives a webpage request from the terminal, obtains a webpage according to the webpage request, arranges a vector layout for webpage elements in the webpage, and transmits the webpage whose layout is arranged to the terminal. Thus, after receiving the webpage whose layout is arranged, the terminal can zoom in/out the webpage elements in the webpage according to a webpage zooming instruction. When a user's fingers operate on a multi-touch screen, the webpage zooming instruction may be generated according to the operation of the user's fingers. According to the webpage zooming instruction, the terminal zooms in/out the webpage after the vector layout arrangement following a proportion and renders the webpage in real-time, so as to achieve a vector zooming effect. Thus, zooming of the webpage in the browser of the terminal is implemented.
What has been described and illustrated herein is a preferred example of the disclosure along with some of its variations. The terms, descriptions and figures used herein are set forth by way of illustration and are not meant as limitations. Many variations are possible within the spirit and scope of the disclosure, which is intended to be defined by the following claims—and their equivalents—in which all terms are meant in their broadest reasonable sense unless otherwise indicated.
The foregoing description of the embodiments has been provided for purposes of illustration and description. It is not intended to be exhaustive or to limit the disclosure. Individual elements or features of a particular embodiment are generally not limited to that particular embodiment, but, where applicable, are interchangeable and can be used in a selected embodiment, even if not specifically shown or described. The same may also be varied in many ways. Such variations are not to be regarded as a departure from the disclosure, and all such modifications are intended to be included within the scope of the disclosure.
Reference throughout this specification to “one embodiment,” “an embodiment,” “specific embodiment,” or the like in the singular or plural means that one or more particular features, structures, or characteristics described in connection with an embodiment is included in at least one embodiment of the present disclosure. Thus, the appearances of the phrases “in one embodiment” or “in an embodiment,” “in a specific embodiment,” or the like in the singular or plural in various places throughout this specification are not necessarily all referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments.
| Number | Date | Country | Kind |
|---|---|---|---|
| 201210549940.7 | Dec 2012 | CN | national |
This application is a continuation of International Application No. PCT/CN2013/088133, filed Nov. 29, 2013. This application claims the benefit and priority of Chinese Application No. 201210549940.7, filed Dec. 18, 2012. The entire disclosures of each of the above applications are incorporated herein by reference.
| Number | Date | Country | |
|---|---|---|---|
| Parent | PCT/CN2013/088133 | Nov 2013 | US |
| Child | 14734008 | US |
