US20150278166A1 - Flexible web page template building system and method - Google Patents

Flexible web page template building system and method Download PDF

Info

Publication number
US20150278166A1
US20150278166A1 US14/739,492 US201514739492A US2015278166A1 US 20150278166 A1 US20150278166 A1 US 20150278166A1 US 201514739492 A US201514739492 A US 201514739492A US 2015278166 A1 US2015278166 A1 US 2015278166A1
Authority
US
United States
Prior art keywords
user
content
web page
editable
container
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Abandoned
Application number
US14/739,492
Inventor
Brian D. Hanechak
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Cimpress Schweiz GmbH
Original Assignee
Cimpress Schweiz GmbH
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Priority to US12/060,254 priority Critical patent/US8225198B2/en
Priority to US13/541,280 priority patent/US9058318B2/en
Application filed by Cimpress Schweiz GmbH filed Critical Cimpress Schweiz GmbH
Priority to US14/739,492 priority patent/US20150278166A1/en
Assigned to CIMPRESS SCHWEIZ GMBH reassignment CIMPRESS SCHWEIZ GMBH CHANGE OF NAME (SEE DOCUMENT FOR DETAILS). Assignors: VISTAPRINT SCHWEIZ GMBH
Publication of US20150278166A1 publication Critical patent/US20150278166A1/en
Assigned to JPMORGAN CHASE BANK, N.A., AS ADMINISTRATIVE AGENT reassignment JPMORGAN CHASE BANK, N.A., AS ADMINISTRATIVE AGENT SECURITY INTEREST (SEE DOCUMENT FOR DETAILS). Assignors: CIMPRESS SCHWEIZ GMBH
Application status is Abandoned legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/103Formatting, i.e. changing of presentation of documents
    • G06F40/106Display of layout of documents; Previewing
    • G06F17/212
    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/26Visual data mining; Browsing structured data
    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents
    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions
    • G06F17/30896
    • G06F17/30905
    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/12Use of codes for handling textual entities
    • G06F40/131Fragmentation of text files, e.g. creating reusable text-blocks; Linking to fragments, e.g. using XInclude; Namespaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • G06F40/186Templates

Abstract

A flexible web page template and template building tool which generates templates that grow and shrink according to an amount of user content.

Description

    RELATED APPLICATIONS
  • This application is a divisional of prior application Ser. No. 13/541,280, filed on Jul. 3, 2012, now U.S. Pat. No. 9,058,318, which is a divisional of application Ser. No. 12/060,254, filed Mar. 31, 2008, now U.S. Pat. No. 8,225,198, which is hereby incorporated by reference in its entirety.
  • FIELD OF THE INVENTION
  • This invention relates to creation and design of electronic documents and, more particularly, to flexible web page template building techniques and systems.
  • BACKGROUND OF THE INVENTION
  • Customizable web page templates for designing websites assist people in quickly designing web pages for publishing to a web hosting server.
  • One of the challenges in designing web page templates whose content may be customized by end users is that the size of the content or amount of text that may be inserted into the editable areas of the web page may vary from user to user. Because a web page generally provides a header area, a navigational area, and a bottom border around editable areas that may be customized by a user, the template design required some knowledge of the size of the editable areas. Previously, this has caused template providers to set a static size editable area, thereby limiting the amount of content that the user can insert in the editable areas.
  • Another challenge for the designers of web page templates is the desirability of making web page themes work in all types of browsers.
  • Accordingly, it would be desirable to provide a web page generating tool that has a simple user interface and allows a web page designer to create flexible auto-expanding editable areas which grow and shrink based on the amount of content inserted into the editable areas, and to design themes that work in a wide variety of browsers.
  • SUMMARY OF THE INVENTION
  • Embodiments of the invention are directed to flexible web page template building techniques and systems which allow web page designers to build auto-expanding web pages that grow and shrink according to an amount of user content inserted there.
  • BRIEF DESCRIPTION OF THE DRAWINGS
  • FIG. 1 is a diagrammatic representation of a web page template building plugin.
  • FIG. 2 is a block diagram illustrating a network environment in which an embodiment of the invention operates.
  • FIG. 3 is a block diagram illustrating a user computer environment in which an electronic publishing tool may operate.
  • FIG. 4 is a screen shot view of an example user interface display 400 of an example web page template building tool.
  • FIG. 5A is an example auto-expanding user-editable content container illustrating application of the guides, in particular with respect to a variation in the vertical direction of content between the guides.
  • FIG. 5B illustrates the auto-expanding user-editable content container of FIG. 5A where the guides are set to a position which comprises variation in the vertical direction of content between the guides.
  • FIG. 6A is an example auto-expanding user-editable content container illustrating application of the guides, in particular with respect to a repeating pattern.
  • FIG. 6B illustrates the auto-expanding user-editable content container of FIG. 6A where the guides are set to a position resulting in a non-repeating pattern.
  • FIG. 7A illustrates the partitioning of a vertical navigational area to grow and shrink as navigation buttons are added and removed.
  • FIG. 7B illustrates the partitioning of a horizontal navigational area to grow and shrink as navigation buttons are added and removed.
  • FIG. 8 is an exemplary table created to describe an outer and inner background of a web page template.
  • FIG. 9 is an exemplary web page template layout.
  • FIG. 10 is a diagram illustrating sections of the web page template that are rasterized into separate images.
  • FIG. 11 is an HTML table illustrating an example web page template.
  • FIG. 12 is a flowchart of an exemplary embodiment of the operation of an auto-expanding user-editable content container when content is added by an end user.
  • FIG. 13 is a flowchart of an exemplary embodiment of the operation of an auto-expanding navigational area when navigation buttons are added or removed from a navigational area by an end user.
  • DETAILED DESCRIPTION
  • Embodiments of the invention implement a flexible website template building tool. In an embodiment, an electronic document design tool used to design customized electronic designs which may be published electronically or printed to generate a printed product includes a website template builder add-in which allows a designer to customize a website template based on elements of an electronic design. For example, FIG. 1 shows diagrammatically, an electronic design tool for printed products 2 which receives or creates an electronic version of a printed product design 1. The electronic design tool 2 includes a website add-in control 3 which, when activated, generates a web page template 4 including at least one element from the printed product design 1.
  • Web page templates 4 may be valuable to website hosting service providers that provide tools to customers to build their websites. Web page templates 4 may also be valuable to designers of electronic, printed, and other types of products who wish to cross-sell a website to a customer of an electronic, printed, or other type of product while retaining some of the design features of the other product.
  • For example, FIG. 2 illustrates a networked system 10. Client System 11 represents a user's computer system, for example, a customer of a website hosting service. Client system 11 is a typically equipped modern personal computer, discussed with reference to FIG. 3, being configured to communicate over the Web and running a modern Web browser program 12. For purposes of discussion, the invention will be described in the context of a personal computer running the Microsoft Internet Explorer browser, but it will be appreciated that the invention can be applied to other browser programs that support HTML, XHTML, DHTML, XML, and other web functionality and to other intelligent devices, such as PDAs capable of running such a browser.
  • Client 11 communicates with a website hosting service server 20 to set up account information and order website hosting services via the client's browser 12. After setting up an account, the website hosting customer may then begin designing and editing their website. In an exemplary embodiment, the website hosting service provides website building tools via website building tools server 30. In an embodiment, the client 11 may download a website building tool 31 to execute in their local browser 12.
  • The website building tool 31 allows the website hosting services customer to download web page templates (stored in a web page template gallery 40) from the website building tools server 30. Website templates are electronic web page designs that include editable areas to allow the customer to customize text, image, and design content. They typically include a background with or without a design, a header area, a navigational menu area, and one or more user-editable content areas. The website hosting services customer may edit and design a number of customized web pages to form a customized website which may be published to a hosted website database 50. When a web page is published to the hosted websites database 50, a website hosting server 60 will serve web pages of the hosted customized website to other networked clients on the network, such as client 70.
  • Web page templates may be created by a content designer operating a content provider computer system 80, which may be any conventional computer system, for example, as described in reference to FIG. 3. An electronic document creation and editing application 82 executes on the content provider system 80, either locally, or remotely via a conventional networked configuration (not shown), and allows the content provider to create electronic documents, for example documents that may be printed or viewed on a display. The electronic document creation and editing application 82 may also open and edit previously designed documents. For example, the website hosting sales server 20 may also be an online printed and electronic products retailer which offers products such as business cards, postcards, brochures, etc. to customers, for example client 70. The server 20 may thus provide customizable designs or templates (stored in product template database 42) that may be edited by a customer of the online printed and electronic products retails and then ordered for printing/publishing and delivery to the customer. Customized product designs may be subsequently stored (in a customers customized products database 44) for future access by the retailer to allow the customer to return to the website and reorder the customized products.
  • The electronic document creation and editing application 82 may itself provide, or may merely provide access to, a web page template building tool 84. For example, a conventional electronic document publishing system may include an add-in or plug-in. A plugin is a computer program that interacts with a host application (for example, the electronic document creation and editing application 82) to provide a function “on demand”. Alternatively, the electronic document creation and editing application 82 may itself implement the functionality for automatically creating web page templates.
  • The web page template building tool 84 automatically generates web page templates based on electronic documents, the details of which are presented hereinafter.
  • Turning now to FIG. 3, there is presented an example of a suitable computing system environment 100 which may implement any and all of the clients 11, 70, servers 20, 30, 60, and content provider system 80. The computing system environment 100 is only one example of a suitable computing environment and is not intended to suggest any limitation as to the scope of use or functionality of the invention. Neither should the computing environment 100 be interpreted as having any dependency or requirement relating to any one or combination of components illustrated in the exemplary operating environment 100.
  • Embodiments of the invention are operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known computing systems, environments, and/or configurations that may be suitable for use with the invention include, but are not limited to, personal computers, server computers, hand-held or laptop devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like.
  • Embodiments of the invention, and in particular, the website building tool 31 and its target-alignment-and-drop control 32 integrated therein, may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. Embodiments of the invention may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network or other data transmission medium. In a distributed computing environment, program modules and other data may be located in both local and remote computer storage media including memory storage devices.
  • With reference to FIG. 3, an exemplary system for implementing the invention includes a general purpose computing device in the form of a computer 110. Components of computer 110 may include, but are not limited to, a processing unit 120, a system memory 130, and a system bus 121 that couples various system components including the system memory to the processing unit 120. The system bus 121 may be any of several types of bus structures including a memory bus or memory controller, a peripheral bus, and a local bus using any of a variety of bus architectures.
  • Computer 110 typically includes a variety of computer readable media. Computer readable media can be any available media that can be accessed by computer 110 and includes both volatile and nonvolatile media, removable and non-removable media. By way of example, and not limitation, computer readable media may comprise computer storage media and communication media. Computer storage media includes volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CDROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by computer 110. Communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport button and includes any information delivery media.
  • The system memory 130 includes computer storage media in the form of volatile and/or nonvolatile memory such as read only memory (ROM) 131 and random access memory (RAM) 132. A basic input/output system 133 (BIOS), containing the basic routines that help to transfer information between elements within computer 110, such as during start-up, is typically stored in ROM 131. RAM 132 typically contains data and/or program modules that are immediately accessible to and/or presently being operated on by processing unit 120. By way of example, and not limitation, FIG. 3 illustrates operating system 134, application programs 135, other program modules 136, and program data 137.
  • The computer 110 may also include other removable/non-removable, volatile/nonvolatile computer storage media. By way of example only, FIG. 3 illustrates a hard disk drive 140 that reads from or writes to non-removable, nonvolatile magnetic media, a magnetic disk drive 151 that reads from or writes to a removable, nonvolatile magnetic disk 152, and an optical disk drive 155 that reads from or writes to a removable, nonvolatile optical disk 156, such as a CD ROM or other optical media. Other removable/non-removable, volatile/nonvolatile computer storage media that can be used in the exemplary operating environment include, but are not limited to, magnetic tape cassettes, flash memory cards, digital versatile disks, digital video tape, solid state RAM, solid state ROM, and the like. The hard disk drive 141 is typically connected to the system bus 121 through a non-removable memory interface such as interface 140, and magnetic disk drive 151 and optical disk drive 155 are typically connected to the system bus 121 by a removable memory interface, such as interface 150.
  • The drives and their associated computer storage media discussed above and illustrated in FIG. 3, provide storage of computer readable instructions, data structures, program modules and other data for the computer 110. In FIG. 3, for example, hard disk drive 141 is illustrated as storing operating system 144, application programs 145, other program modules 146, and program data 147. Note that these components can either be the same as or different from operating system 134, application programs 135, other program modules 136, and program data 137. Operating system 144, application programs 145, other program modules 146, and program data 147 are given different numbers here to illustrate that, at a minimum, they are different copies. A user may enter commands and information into the computer 20 through input devices such as a keyboard 162 and pointing device 161, commonly referred to as a mouse, trackball or touch pad. Other input devices (not shown) may include a microphone, joystick, game pad, satellite dish, scanner, or the like. These and other input devices are often connected to the processing unit 120 through a user input interface 160 that is coupled to the system bus, but may be connected by other interface and bus structures, such as a parallel port, game port or a universal serial bus (USB). A monitor 191 or other type of display device is also connected to the system bus 121 via an interface, such as a video interface 190. In addition to the monitor, computers may also include other peripheral output devices such as speakers 197 and printer 196, which may be connected through an output peripheral interface 190.
  • The computer 110 may operate in a networked environment using logical connections to one or more remote computers, such as a remote computer 180. The remote computer 180 may be a personal computer, a server, a router, a network PC, a peer device or other common network node, and typically includes many or all of the elements described above relative to the computer 110, although only a memory storage device 181 has been illustrated in FIG. 3. The logical connections depicted in FIG. 3 include a local area network (LAN) 171 and a wide area network (WAN) 173, but may also include other networks. Such networking environments are commonplace in offices, enterprise-wide computer networks, intranets and the Internet.
  • When used in a LAN networking environment, the computer 110 is connected to the LAN 171 through a network interface or adapter 170. When used in a WAN networking environment, the computer 110 typically includes a modem 172 or other means for establishing communications over the WAN 173, such as the Internet. The modem 172, which may be internal or external, may be connected to the system bus 121 via the user input interface 160, or other appropriate button. In a networked environment, program modules depicted relative to the computer 110, or portions thereof, may be stored in the remote memory storage device. By way of example, and not limitation, FIG. 3 illustrates remote application programs 185 as residing on memory device 181. It will be appreciated that the network connections shown are exemplary and other means of establishing a communications link between the computers may be used.
  • Referring back to FIG. 2, each web page template in the web page template gallery 40 represents a thematic design of a single page of a website. As previously explained, in order for the website building tool 122 to offer web page templates, such templates must first be created.
  • In one embodiment, electronic document creation and editing application 82, such as Adobe® InDesign, which are intended for design of products to be printed, are utilized to take advantage of content developed for printed products. In an embodiment, the electronic document and editing application 82 is configured with a website plugin which, in accordance with the invention described herein, assists the customer in generating a website template based on a printed or electronic product design.
  • FIG. 4 is a screen shot view of an example user interface display 400 of an example web page template building tool. For example, the web page template building tool may exist as a standalone application, may be integrated into an electronic document creation and editing application, or may be a plugin to such an application. As illustrated in FIG. 4, the user interface display 400 includes editing controls 401 known and standardly used within electronic document creation and editing applications, and a workspace 402 for designing a web page template 410.
  • The web page template 410 assumes an 800-wide-pixel displayable page area, but of course it is to be understood that this number may be varied depending on the intended browser and display types, and on future advances in the display technology. The web page template 410 includes an outer background 411 which represents what should appear on a display outside of the 800-wide-pixel displayable page area, and inner background 412 which covers the outer background within the 800-pixel-wide area, a header area 415, a navigational area 420, and at least one auto-expanding user-editable content container 430. In the exemplary embodiment, the header area 415 includes two “headline” areas of text: one for “Company Name” 416 and one for “Company Message” 417. Preferably, while the auto-expanding user-editable content container allows only web-safe fonts, the header area 415 can support non-web-safe fonts, for example fonts that are used in the customer's logo or business cards.
  • In order to maximize the size of text entered in the headline areas 416, 417, the current size of the text entered in the text area is determined using a Rich Text Editor, and the web page template building tool 82 automatically determines an amount to scale the current sized text to make the text the full width of the available text area, and then determines an amount to scale the current sized text to make the text the full height of the available text area. The web page template building tool 82 then selects the smaller of the horizontal scale and vertical scale, scales the user-input text by the smaller selected scale, and replaces the user-input text in the text area with the scaled text.
  • In order to support growing and shrinking of content in the auto-expanding user-editable content container(s) 430, there are certain rules which must be applied in the design of the web page template. For example, the outer background may only contain a solid color, vertical gradient, or repeated pattern so that as the auto-expanding user-editable content container(s) grow, any visible outer background area on a user's display will appear continuous. Furthermore, if a gradient is used and the page is long, the color at the bottom of the gradient is preferably used as a solid color below where the gradient is specified. The inner background preferably may only comprise a solid color.
  • The auto-expanding user-editable content container 430 is displayed with a pair of horizontal guides—an upper horizontal guide 431 and a lower horizontal guide 432. The user content must intersect with both the upper guide and the lower guide. Preferably, a few lines of sample text are inserted in the auto-expanding user-editable content container to illustrate to the user the default styles and fonts. In an embodiment, the user content sample text may only comprises web-safe fonts (restricted list of about eight fonts) that are known to be supported by most web browsers.
  • In an embodiment, artwork can extend into the user content area, and is rendered behind the user content.
  • The upper guide 431 must be above the lower guide 432. Any elements which cross the upper guide 431 or the lower guide 432 must cross both guides. Any elements which cross the guides 431, 432 must be “growable”. To be growable, either: the element is a repeating pattern, or there is no variation in the vertical directions between the two guides 431, 432 (that is, every row of pixels between the guides is the same as every other row.)
  • To illustrate the rules pertaining to the guides 431, 432, FIG. 5A depicts content inserted in an auto-expanding user-editable content container 500 that complies with the above rules. That is, there is no variation in the vertical direction in the parts of the frame 510 inserted in the auto-expanding user-editable content container 500 between the two guides 531, 532. FIG. 5B depicts content inserted in an auto-expanding user-editable content container 500 that violates the user content rules. In this embodiment, the center pointed portions 515 a, 515 b of the frame 511 have variation in the vertical direction between the two guides 531, 532. If desired, the “bad” design in FIG. 5B could be brought into compliance with the rules by simply moving the upper guide 531 below the pointed portions 515 a, 515 b of the frame 511. However, by doing so, since the bottom half of the frame 511 may be expanded to fit more user content, the pointed portions 515 a, 515 b of the frame 511 will not remain vertically centered with respect to the top and bottom of the frame 511.
  • In elements in the auto-expanding user-editable content container 400 that span both guides 431, 432, if there are multiple repeated patterns, the repeated frequency in the vertical direction must be the same, and the repeat should be as small as possible. This is because, in the final webpage, any patterns which cross the bottom guide must be matched up with the artwork below the bottom guide.
  • FIGS. 6A and 6B further illustrate the rules pertaining to the guides, in particular with respect to a repeating pattern. As shown in FIG. 6A, an auto-expanding user-editable content container 600 includes a repeating pattern of circles. If the guides 631, 632 are placed as shown, the pattern between the guides may be grown, as shown. In FIG. 6B, the guides are placed so that the pattern between the guides 631, 632 is not a repeating pattern. Thus, when the auto-expanding user-editable content container is grown by adding an instance of the pattern between the guides, the result is undesirable.
  • The content placed in an auto-expanding user-editable content container while using the web page template building tool is content that will appear as a background layer in the final template. Thus, in the final template, any content in the auto-expanding user-editable content container is flattened into a background layer. Thus, when an end user utilizes the template as a starting point in designing a web page, the end user will insert text and other content in the auto-expanding user-editable content container, which will appear over the flattened content inserted by the web page template designer.
  • Turning now to the navigation area 420 of FIG. 4, the navigation area 420 comprises two layers designated for navigation items—the first is a navigation button layer and the second is a navigation background layer. The navigation button layer includes six structural items: two for each “state” of button (regular, currently active page, and “hover”). For each state, there is an item that represents the button background and a text frame item that represents the button text.
  • When designing a website template, the designer will preferably keep the three buttons in order, equally spaced, and aligned on a point boundary. The buttons should be aligned horizontally or vertically, depending on the orientation of the navigation area. Artwork can be added to the button items, or be drawn on the navigation button layer in the same space. Any artwork in the navigation button layer outside of the boundaries of the button background objects are ignored.
  • The navigation background layer contains the structural item that represents the entire navigational area. This area must be above the upper guide, and to the left of the content area. The amount of spacing around it determines how much space is added to the navigational area in each direction, beyond the size of the buttons.
  • Preferably, the web page template supports two orientations for the navigational area: horizontal and vertical. In both cases, the buttons are always set to a fixed size, determined by the designer. In an embodiment, only a single row or a single column of buttons is supported.
  • Vertical navigational areas are always grown downward. Horizontal navigational areas grow as follows: If the navigational area is near the left edge of the page, the navigational area will grow to the right; if the navigational area is near the right edge of the page, the navigational area will grow to the left; otherwise, the navigational area will grow to the left and the right (from the center).
  • To support growing and shrinking of the navigation buttons, a navigational area 700 is automatically split into three “sections”, illustrated in FIG. 7A. The sections include the area 712 a from the top (or left 712 b, for horizontal navigational areas, shown in FIG. 7B) of the navigational area to the middle of the top button, the area 714 a from the middle of the top button to the middle of the second button (or middle of the left button to the middle of the second button, shown in FIG. 7B), and the area 716 a from the middle of the last button to the bottom (or right 716 b, for horizontal navigational areas, shown in FIG. 7B) of the navigational area.
  • When the navigational area is rendered, the second section 714 a (or 714 b) is repeated as many times as necessary to accommodate all buttons 705.
  • In an exemplary embodiment, the web page template building tool configures the navigational area 420 with a control that allows an end user of the template to select between a horizontal or vertical navigation menu orientation, and select and edit names of the selected navigation buttons. Further, the control may be configured to automatically detect a condition in which the navigation area cannot be fully displayed in the horizontal orientation and generates a request to the customer to change the navigation menu orientation to a vertical orientation. Alternatively, the control may simply automatically change the navigation menu orientation to a vertical orientation when this condition occurs.
  • The navigational area control may be configured to automatically size the navigation buttons identically and automatically determines and sizes the navigation button names with identically sized font. In an exemplary implementation, the navigational area control performs the steps of: for each respective navigation button, automatically determining a size of text used for the navigation button name, determining an amount to scale the current sized text to make the text the full width of the navigation button, determining an amount to scale the current sized text to make the text the full height of the navigation button, selecting the smaller of the horizontal scale and vertical scale; selecting the smallest of each of the selected scales over all of the navigation buttons as the global navigation button scale; and scaling each of the navigation button names to the global navigation button scale. Web page template building tool 84 creates HTML pages that handle a variable amount of customer text, growing the page as necessary and uses HTML that renders reliably in a wide variety of browsers.
  • In an embodiment, the web page template building tool 84 creates an outermost table, illustrated in FIG. 8, to describe the outer and inner background. A “body” tag is used to describe the outer background, so that the outer background can also extend below the theme content. In either case, the rest of the content goes in the main content cell.
  • FIG. 9 shows the elements of the web page template. As illustrated, the template 900 includes an outer background 901, an inner background, 902, and an auto-expanding user-editable content container 930 with upper and lower guides 931, 932. The section between the two horizontal guides 931, 932 is the “growable section”.
  • To create the web page template, all of the artwork that appears in the theme is rasterized into 11 images, shown in FIG. 10 as 1, 2 a, 2 b, 2 c, 3 a, 3 b, 3 c, 4 a, 4 b, 4 c, 5. The images 3 a, 3 b, 3 c are patterns that repeat vertically (and so may be rendered at less than the whole height indicated.) After rasterizing the page into the aforementioned images, the web page template building tool then constructs an HTML table with the cells illustrated in FIG. 11 labeled Top, Left, Body, Right, and Bottom.
  • The “top” cell in FIG. 11 contains only image 1 (and so the cell is exactly the same size as the image.) The “left” cell in FIG. 1 contains image 3 a as a background image. It also contains a div with “position=relative”, and inside that div, image 2 a with “position=absolute”. The “middle” cell in FIG. 11 is similar; it contains image 3 b as a background image. It also contains a div with “postition=relative”. Inside that div is image 2 b with “position=absolute”, and also all of the user-entered site content. The “right” cell in FIG. 11 is exactly analogous to the “left” cell (image 3 c and 2 c, accordingly). The “bottom” cell in FIG. 11 contains a div with “position=relative”. Inside that div, images 4 a, 4 b, and 4 c are positioned absolutely (with a negative ‘top’ coordinate) to put them at the bottom of the previous table cells. The div also contains image 5 with “position=absolute”. The middle row has a height specified, so that it is guaranteed to be sufficiently tall enough to contain images 2 a, 2 b, 2 c and images 4 a, 4 b, 4 c. Additionally, if images 3 a, 3 b, and 3 c are taller than one pixel, a JavaScript executes to increase the height of the middle row so that, once the text is added, it is a multiple of the pattern repeat—this allows patterns to be repeated across the entire website.
  • The navigation buttons are rendered in the “left” table cell, but uses absolute positioning for the buttons so they may appear in other cells as necessary. The navigational area can also include background imagery that grows or shrinks depending on the number of buttons on the site. Vertically-oriented navigational areas can grow vertically. The upper guide may be automatically moved down the page so that the entire navigational area appears above the growable section of the page. This means the navigational area background will always be in images 1, 2 a, 2 b, and 2 c only.
  • The images and controls that make up a theme are specified in absolute coordinates. For each of the images (1, 2 a, 2 b, . . . , 4 c, 5) a bitmap of the appropriate size is created, and portions of the theme images are copied into them using GDI+. For example, if the “lower guide” is at vertical position 700; the “body content rectangle” has its bottom at position 800 and it's left-edge at position 200, then for image 4 a an image 200 pixels wide by 100 pixels tall is created, and all of the theme imagery that occurs in the rectangle (0,700)-(200,800) is flattened.
  • The result is a web page template that grows and shrinks according to the amount of content inserted in the auto-expanding user-editable content containers by an end user and that is reliably displayable in a multitude of different browsers and display types.
  • Preferably, the web page template building tool 82 retrieves at least one graphical element (for example a customer's logo) from an electronic design editable by the document design tool and inserts the at least one graphical element into the website template. In an exemplary embodiment, the web page template building tool 82 pre-populates the web page template with content retrieved from an electronic design of a product designed to be printed which is open in the document design tool.
  • FIG. 12 is a flowchart of an exemplary embodiment of the operation of an auto-expanding user-editable content container when content is added by an end user. As illustrated, user selection of the auto-expanding user-editable content container is monitored (step 1201), and the amount of text or other content added to the container is monitored (step 1202). If it is detected that the size of the content exceeds the current sized of the container (step 1203), then the container is expanded by vertically repeating the repeatable area (defined as the area between the horizontal guides 432, 433) (step 1204). If it is detected that the size of the content is such that an instance of the repeatable area can be removed from the container and still fit the content therein (step 1205), then one or more repeatable areas are removed from the container (step 1206). The container and user content is rerendered on the user's display (step 1207). Thus, the content between the guides is repeated or removed to most efficiently match the amount of text (and/or other user-inserted content) in the auto-expanding user-editable content container. The implementation of the auto-expanding user-editable content container is preferably implemented using JavaScript.
  • FIG. 13 is a flowchart of an exemplary embodiment of the operation of an auto-expanding navigational area when navigation buttons are added or removed from a navigational area by an end user. As illustrated, user selection of the auto-expanding navigational area is monitored (step 1301). User requests are monitored (step 1302). If a user request to add a navigation button is detected (step 1303), the navigational area is partitioned into three sections, including a top or left section, a repeatable middle section, and bottom or right section (step 1304), as previously discussed with respect to FIGS. 7A and 7B. The repeatable middle section is repeated once (as illustrated in FIGS. 7A and 7B) to add the button (step 1305). If a user request to remove a navigation button is detected (step 1306), if there is only one button, the action is prevented. If there is at least two buttons, then an instance of the repeatable middle section is removed from the navigational area and the remaining sections joined (step 1307). The navigational area is then re-rendered on the user's display (step 1308).
  • While exemplary embodiments of the invention have been discussed, the described embodiment is to be considered as illustrative rather than restrictive. The scope of the invention is as indicated in the following claims and all equivalent methods and systems.

Claims (4)

What is claimed:
1. A flexible editable web page template, the web page template being displayed on a user display by a web building tool executing on one or more computers, the flexible editable web page template comprising:
a web page rendered on the display, the web page comprising
an auto-expanding user-editable content container, the container comprising a predefined top portion comprising only non-editable content, a pre-defined bottom portion comprising only non-editable content, and a repeatable middle portion comprising user-editable content, and
a control associated with the auto-expanding user-editable content container, the control operable to monitor the size of the user-editable content and to automatically adjust the size of the content container to fit the user-provided content, by
inserting an instance of the middle portion of the content container to vertically expand the size of the content container upon detection that the size of the user-provided content exceeds the content container size, and
removing an instance of the middle portion of the content container to vertically shrink the size of the content container upon detection that the content container can accommodate the user-provided content upon removal of an instance of the middle portion of the content container.
2. A method for allowing a user to customize a web page, comprising:
displaying, by one or more processors, an editable web page template on a user display,
providing within the editable web page template, by one or more processors, an auto-expanding user-editable content container which automatically expands and shrinks to fit content inserted by a user therein, the container comprising a pre-defined top portion, a pre-defined bottom portion, and a repeatable middle portion,
receiving, by one or more processors, user-provided content and inserting the user-provided content into the auto-expanding user-editable content container;
monitoring, by one or more processors, a size of user-provided content therein relative to a current size of the auto-expanding user-editable content container, and if the size of user-provided content exceeds the container size, repeating an instance of the middle portion of the content container to expand the size of the content container, and if the size of user-provided content is such that the user-provided content will still fit within the content container if an instance of the middle portion of the content container is removed, removing an instance of the middle portion of the content container to vertically shrink the size of the content container.
3. The method of claim 2, further comprising:
providing within the editable web page template, by one or more processors, an auto-expanding navigational area which expands and contracts to render a number of identically sized navigational buttons specified by the user;
receiving, by one or more processors, a user-selected number of desired navigation buttons; and
rendering the selected number of identically sized navigational buttons in the web page template.
4. The method of claim 3, further comprising:
receiving, by one or more processors, user-selected names of the navigation buttons; and
automatically determining and sizing, by one or more processors, the navigation names with identically sized font so that each name fits within, and is positioned within, its respective identically sized navigation button.
US14/739,492 2008-03-31 2015-06-15 Flexible web page template building system and method Abandoned US20150278166A1 (en)

Priority Applications (3)

Application Number Priority Date Filing Date Title
US12/060,254 US8225198B2 (en) 2008-03-31 2008-03-31 Flexible web page template building system and method
US13/541,280 US9058318B2 (en) 2008-03-31 2012-07-03 Flexible web page template building system and method
US14/739,492 US20150278166A1 (en) 2008-03-31 2015-06-15 Flexible web page template building system and method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
US14/739,492 US20150278166A1 (en) 2008-03-31 2015-06-15 Flexible web page template building system and method

Related Parent Applications (1)

Application Number Title Priority Date Filing Date
US13/541,280 Division US9058318B2 (en) 2008-03-31 2012-07-03 Flexible web page template building system and method

Publications (1)

Publication Number Publication Date
US20150278166A1 true US20150278166A1 (en) 2015-10-01

Family

ID=41119016

Family Applications (4)

Application Number Title Priority Date Filing Date
US12/060,254 Active 2031-05-17 US8225198B2 (en) 2008-03-31 2008-03-31 Flexible web page template building system and method
US13/541,368 Abandoned US20120272141A1 (en) 2008-03-31 2012-07-03 Flexible web page template building system and method
US13/541,280 Active 2029-06-02 US9058318B2 (en) 2008-03-31 2012-07-03 Flexible web page template building system and method
US14/739,492 Abandoned US20150278166A1 (en) 2008-03-31 2015-06-15 Flexible web page template building system and method

Family Applications Before (3)

Application Number Title Priority Date Filing Date
US12/060,254 Active 2031-05-17 US8225198B2 (en) 2008-03-31 2008-03-31 Flexible web page template building system and method
US13/541,368 Abandoned US20120272141A1 (en) 2008-03-31 2012-07-03 Flexible web page template building system and method
US13/541,280 Active 2029-06-02 US9058318B2 (en) 2008-03-31 2012-07-03 Flexible web page template building system and method

Country Status (6)

Country Link
US (4) US8225198B2 (en)
EP (1) EP2272007A2 (en)
CN (1) CN102047247B (en)
AU (1) AU2009231790A1 (en)
CA (1) CA2720114A1 (en)
WO (1) WO2009124050A2 (en)

Families Citing this family (41)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090031213A1 (en) * 2007-06-01 2009-01-29 Myevent.Com Inc. System and method for website colorization
JP2009258795A (en) * 2008-04-11 2009-11-05 Canon Inc Table generating apparatus, table generating method and program
US20100146428A1 (en) * 2008-10-08 2010-06-10 Research In Motion Limited Content-Dynamic Touch Screen Activity Bar
US20100235411A1 (en) * 2009-03-16 2010-09-16 Bray Carne Robert Gordon Systems and methods for creating a customized website
US9195365B2 (en) * 2009-03-25 2015-11-24 Honeywell International Inc. Automatic configurator of display objects
US20130104082A1 (en) * 2009-11-06 2013-04-25 Benjamin D. Burge Audio/visual device applications graphical user interface
WO2012006567A1 (en) * 2010-07-08 2012-01-12 Fisher Printing, Inc. Dynamic website building system
US8451489B1 (en) 2010-08-03 2013-05-28 Adobe Systems Incorporated Content-aware method for saving paper and ink while printing a PDF document
US8773712B2 (en) 2010-08-03 2014-07-08 Adobe Systems Incorporated Repurposing a word processing document to save paper and ink
US8705092B2 (en) 2010-08-03 2014-04-22 Adobe Systems Incorporated Method and system for repurposing E-mail correspondence to save paper and ink
US8799761B2 (en) 2010-08-03 2014-08-05 Adobe Systems Incorporated Method and system for repurposing a spreadsheet to save paper and ink
US9032284B2 (en) 2010-08-03 2015-05-12 Adobe Systems Incorporated Green printing: re-purposing a document to save ink and paper
US9658997B2 (en) 2010-08-03 2017-05-23 Adobe Systems Incorporated Portable page template
CN102378049A (en) * 2010-08-19 2012-03-14 中兴保全股份有限公司 Intelligent network television playing platform
WO2012074521A1 (en) * 2010-12-01 2012-06-07 Empire Technology Development Llc Reshaping interfaces using content-preserving warps
CN102298625B (en) * 2011-08-23 2015-02-25 百度在线网络技术(北京)有限公司 Method, arrangement and equipment for updating display template
US8761543B2 (en) * 2011-08-30 2014-06-24 Microsoft Corporation Image processing using bounds adjustment
US9639614B2 (en) 2011-10-04 2017-05-02 Microsoft Technology Licensing, Llc Maximizing content item information on a search engine results page
CN103198074A (en) * 2012-01-09 2013-07-10 北大方正集团有限公司 Page design method and system for dynamic publishing website
DE102013203831A1 (en) * 2012-03-06 2013-09-12 Wixpress Ltd Method and system for master page based integrated editing and dynamic layout activation
CN102662672B (en) * 2012-04-05 2015-04-29 广州市动景计算机科技有限公司 Method and device for conducting skin changing process to webpages as well as mobile terminal
WO2014014431A1 (en) * 2012-07-20 2014-01-23 Google, Inc. Serving expandable content items
US20140067556A1 (en) * 2012-08-30 2014-03-06 Sharon Burt Methods and systems for establishing a mobile-optimized web presence and a mobile-optimized marketing campaign
US9147004B2 (en) * 2012-09-07 2015-09-29 Cimpress Schweiz Gmbh Website builder systems and methods with device detection to adapt rendering behavior based on device type
US9922020B2 (en) * 2013-02-13 2018-03-20 International Business Machines Corporation Providing content using dynamic action templates
US20140281915A1 (en) * 2013-03-12 2014-09-18 Minds and Machines, LLC Method and system for background generation using guides
MX361586B (en) * 2013-03-14 2018-12-11 Wix Com Ltd A system and method for dialog customization.
USD745049S1 (en) 2013-06-09 2015-12-08 Apple Inc. Display screen or portion thereof with graphical user interface
CN103631865B (en) * 2013-11-01 2017-09-22 北京奇虎科技有限公司 Webpage generating method and equipment
CN103617222A (en) * 2013-11-22 2014-03-05 北京奇虎科技有限公司 Browser and method for preloading in webpages
KR20150066883A (en) * 2013-12-09 2015-06-17 삼성전자주식회사 Image processing method and device
US9785650B2 (en) 2014-02-27 2017-10-10 Microsoft Technology Licensing, Llc Flexible content display
CN105022616B (en) * 2014-04-23 2019-12-03 腾讯科技(北京)有限公司 A kind of method and device generating Webpage
USD791814S1 (en) 2014-06-06 2017-07-11 Apple Inc. Display screen or portion thereof with animated graphical user interface
CN104050275A (en) * 2014-06-25 2014-09-17 国家电网公司 Method and system for reviewing project
US20160062960A1 (en) * 2014-09-02 2016-03-03 Widespider, LLC Systems and methods of publishing content from one or more sources
CN104391920B (en) * 2014-11-19 2018-04-27 沈文策 A kind of method of web page template Style Design
CN104850402B (en) * 2015-05-15 2018-06-19 无锡天脉聚源传媒科技有限公司 The pattern method of adjustment and device of a kind of content of pages
CN106649299A (en) * 2015-07-28 2017-05-10 阿里巴巴集团控股有限公司 Method and device for lazy loading of webpage block
CN105242926A (en) * 2015-09-30 2016-01-13 北京锐安科技有限公司 Web front-end development platform
EP3427188A4 (en) 2016-03-09 2020-02-12 Pti Marketing Tech Inc Ganged imposition sort system

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030025737A1 (en) * 2001-08-02 2003-02-06 Breinberg Steven Adam System and method for automatic and dynamic layout of resizable dialog type windows
US6546397B1 (en) * 1999-12-02 2003-04-08 Steven H. Rempell Browser based web site generation tool and run time engine
US20060193008A1 (en) * 2005-02-28 2006-08-31 Hitoshi Osaka Document processing apparatus, document processing method and computer program

Family Cites Families (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5586242A (en) * 1994-04-01 1996-12-17 Hewlett-Packard Company Font manager with selective access of installed fonts
US5909678A (en) * 1996-09-13 1999-06-01 International Business Machines Corporation Computer systems, method and program for constructing statements by dragging and dropping iconic representations of subcomponent statements onto a phrase template
US6256650B1 (en) * 1998-05-18 2001-07-03 Microsoft Corporation Method and system for automatically causing editable text to substantially occupy a text frame
US6738059B1 (en) * 1998-12-18 2004-05-18 Kabushiki Kaisha Sega Enterprises Apparatus and methods for image processing using mixed display objects
US6456305B1 (en) * 1999-03-18 2002-09-24 Microsoft Corporation Method and system for automatically fitting a graphical display of objects to the dimensions of a display window
JP4256543B2 (en) 1999-08-17 2009-04-22 インターナショナル・ビジネス・マシーンズ・コーポレーションInternational Business Maschines Corporation Display information determination method and apparatus, and storage medium storing software product for display information determination
US6448986B1 (en) * 1999-09-07 2002-09-10 Spotware Technologies Llc Method and system for displaying graphical objects on a display screen
GB0028434D0 (en) 2000-11-22 2001-01-10 Decision Curve Ltd Methods and apparatus for automatically producing spreadsheet-based models
AU2002316067A1 (en) * 2001-05-02 2002-11-11 Bitstream Inc. Methods, systems, and programming for producing and displaying subpixel-optimized font bitmaps using non-linear color balancing
JPWO2004034278A1 (en) * 2002-09-27 2006-02-09 ブラザー工業株式会社 Text editing apparatus and program
US7747941B2 (en) * 2002-12-18 2010-06-29 International Business Machines Corporation Webpage generation tool and method
JP4082351B2 (en) * 2003-03-12 2008-04-30 セイコーエプソン株式会社 Layout system, layout program, and layout method
CN1702651A (en) * 2004-05-24 2005-11-30 富士通株式会社 Recognition method and apparatus for information files of specific types
US7996759B2 (en) 2004-09-14 2011-08-09 Oracle Internatonal Corporation Data insertion from a database into a fixed electronic template form that supports overflow data
US7516402B2 (en) * 2005-02-28 2009-04-07 Nokia Corporation Presentation of large objects on small displays
CN1794239A (en) * 2005-12-30 2006-06-28 张天山 Automatic generating system of template network station possessing searching function and its method
US8078955B1 (en) * 2006-05-02 2011-12-13 Adobe Systems Incorportaed Method and apparatus for defining table styles
CN101071433B (en) * 2007-05-10 2010-08-18 腾讯科技(深圳)有限公司 Picture download system and method
US8707173B2 (en) * 2007-05-31 2014-04-22 Visan Industries Systems and methods for rendering media

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6546397B1 (en) * 1999-12-02 2003-04-08 Steven H. Rempell Browser based web site generation tool and run time engine
US20030025737A1 (en) * 2001-08-02 2003-02-06 Breinberg Steven Adam System and method for automatic and dynamic layout of resizable dialog type windows
US20060193008A1 (en) * 2005-02-28 2006-08-31 Hitoshi Osaka Document processing apparatus, document processing method and computer program

Also Published As

Publication number Publication date
AU2009231790A1 (en) 2009-10-08
EP2272007A2 (en) 2011-01-12
US9058318B2 (en) 2015-06-16
CN102047247B (en) 2013-07-10
CA2720114A1 (en) 2009-10-08
US20090249193A1 (en) 2009-10-01
WO2009124050A2 (en) 2009-10-08
CN102047247A (en) 2011-05-04
US20120272141A1 (en) 2012-10-25
US20120272140A1 (en) 2012-10-25
US8225198B2 (en) 2012-07-17
WO2009124050A3 (en) 2010-02-25

Similar Documents

Publication Publication Date Title
US20150317289A1 (en) Method and apparatus for utilizing an extensible markup language schema for managing specific types of content in an electronic document
US20180131680A1 (en) System, method and apparatus for selecting content from web sources and posting content to web logs
US9053076B2 (en) Autoflow in photobook development
Kottwitz LaTeX Cookbook
US9317491B2 (en) Methods and systems of generating and editing adaptable and interactive network documents
US9043698B2 (en) Method for users to create and edit web page layouts
US9020790B2 (en) System and method for custom product design
DE102013202782A1 (en) Server-based web page design system that integrates dynamic layout and dynamic content
US7430711B2 (en) Systems and methods for editing XML documents
EP0173123B1 (en) Implicit creation of a superblock structure in a multiple data editor
US6266684B1 (en) Creating and saving multi-frame web pages
US20160062707A1 (en) Information processing apparatus, and print control method
US7020838B2 (en) System and method for identifying line breaks
KR100716084B1 (en) Layout adjustment method and apparatus
US8516365B2 (en) Dynamically laying out images and associated text using pre-defined layouts
US7735004B2 (en) Layout control method, layout control apparatus, and layout control program
EP2293187B1 (en) Image cropping system and method
CN101128826B (en) Presentation method of large objects on small displays
US20170046864A1 (en) Method and system for personalizing images rendered in scenes for personalized customer experience
CA2660840C (en) Automated product layout
US6691281B1 (en) Publishing/republishing data tables in HTML documents while maintaining formatting and functionality for restoring back the data tables
US4723210A (en) Superblock structure in a multiple in a data editor
US7644356B2 (en) Constraint-based albuming of graphic elements
RU2419856C2 (en) Various types of formatting with harmonic layout for dynamically aggregated documents
JP6037041B2 (en) Character string display device

Legal Events

Date Code Title Description
AS Assignment

Owner name: CIMPRESS SCHWEIZ GMBH, SWITZERLAND

Free format text: CHANGE OF NAME;ASSIGNOR:VISTAPRINT SCHWEIZ GMBH;REEL/FRAME:036277/0592

Effective date: 20150619

AS Assignment

Owner name: JPMORGAN CHASE BANK, N.A., AS ADMINISTRATIVE AGENT

Free format text: SECURITY INTEREST;ASSIGNOR:CIMPRESS SCHWEIZ GMBH;REEL/FRAME:042999/0992

Effective date: 20170713

STCB Information on status: application discontinuation

Free format text: ABANDONED -- FAILURE TO RESPOND TO AN OFFICE ACTION