Creation of web pages through synchronization

[0002] This application receives the benefit of U.S. Provisional Application No. 60/111,999, filed Dec. 11, 1998.

[0003] The invention relates to systems and methods for generating web pages to be displayed on distributed networks, such as the World Wide Web. More particularly, the invention relates to systems and methods for providing users of a hand-held device, such as a personal digital assistant (PDA) or digital camera, with the capability to author web pages without being limited by the system resources of the hand-held device.

[0004] The distributed network known as the Internet is a global array of cooperatively interconnected computer networks. It includes the World Wide Web, which is a collection of websites defined by web servers—computers that store and retrieve computer files that represent web pages that are requested by and displayed to users of the Internet. Web pages combine text, graphic images, animation, audio and other multimedia forms for presentation to viewers. In the Web environment, client machines communicate with Web servers using Hypertext Transfer Protocol (HTTP), which uses a standard page description language known as Hypertext Markup Language (HTML). HTML provides basic document formatting and allows the developer to specify “links” to other servers and files.

[0005] It is known to provide web page authoring tools, such as “FRONTPAGE” and “FRONTPAGE EXPRESS” developed by Microsoft Corporation of Redmond Wash., which give web page authors the ability to quickly and efficiently create compelling web pages. Much of the power of these tools is derived from the use of style templates, which contain predefined HTML formatting commands for predetermined styles. With templates, a web page author avoids the tedious task of manually entering hundreds of HTML formatting commands. Because of the need to store large libraries of templates and other large files, such as background bitmaps, state-of-the-art web-authoring tools require computer platforms with relatively large amounts of system resources, i.e. memory.

[0006] There is a recent growing trend towards the use of portable hand-held computing devices that offer portability, but which provide somewhat limited computing features. Known hand-held devices, such as PDAs, provide for the storage and retrieval addresses and other information, sending and receiving of e-mail via communications link and other functionality defined by resident software applications. PDAs offer the capability of remote connectivity to a desktop computer or to the Internet using a communications link, enabling users to upload and download information, and to synchronize information stored in the PDA with information on a host computer, from virtually any geographic location. Hand-held devices also include rather specialized platforms, such as digital cameras, which provide users with the capability of instantly recording electronic images on a removable storage device, such as a floppy diskette, for later viewing on a desktop computer. From the desktop computer, users may send the image files to their friends via e-mail, post them to an existing website on the World Wide Web, or incorporate them into their own website. As the user interfaces and features of digital cameras become more sophisticated, they may tend to incorporate much of the functionality of PDAs

[0007] One consequence of the compact designs and low weights consumers desire in hand-held electronic devices is that such devices are limited in the amount of system resources, namely memory and screen size, that they provide. Although the portability of hand-held devices make them attractive as web-authoring platforms, they have not heretofore been considered as feasible platforms for web creation, primarily because of their limited system resources. It would therefore be desirable to provide a web-authoring system and method which are suitable for implementation on a hand-held device, such as a PDA or a digital camera. Such a system and method would permit users of digital cameras, for example, to create compelling web pages that incorporate digital images they have recorded “on-the-spot” and provide their own textual information for presentation to others on the World Wide Web.

[0008] The invention provides for the creation of web pages on hand-held devices such as PDAs and digital cameras. In general, the invention provides for the downloading of data from a hand-held device (client) while simultaneously, in a one-step operation, substituting user-defined data into templates stored on a larger computer platform (host). A user of the invention will be able to remotely author, on their hand-held device (client), a web page styled according to their own preference.

[0009] One aspect of the invention involves the generation of large HTML files on the host computer under control of a compact mapping file that is a generated on a hand-held client computer. The mapping file may be created using a graphic user interface on the hand-held device which allows the user to associate particular ones of a library of templates with text and images, which may be stored on the hand-held device. In a one-step synchronization operation when the hand-held device is connected to a host computer, the mapping file controls the creation of a main HTML file. Specifically, templates referenced in the mapping file are retrieved from host memory and “filled in” with the appropriate information according to the mapping file. Finally, the main HTML file and any source files (e.g. images, audio files) it points to are transferred from the host to the appropriate location on the web server to create the web page.

[0010] A primary advantage provided by the invention is that HTML templates (files containing the actual and usually lengthy formatting commands that accomplish the style selected by the user) and other large files needed to create compelling web pages reside on the host computer, not on the hand-held device. Another advantage provided by the invention is that web creation may occur automatically, using a one-step synchronization operation, thereby eliminating the need for a web author to manually orchestrate the transfer of appropriate source files and text. In the case of a digital camera, the invention provides users with the capability to create web page content incorporating digital images stored in the camera and, from a location remote from the host computer, present those images in a compelling format on the World Wide Web. This solution also reduces the amount of data (bandwidth) that needs to be transferred from the hand-held device and the main PC.

[0011] The present invention is illustrated by way of example in the accompanying Figures, which should not be construed as limiting, in which:

[0012] FIG. 1 is a schematic diagram of a conventional general-purpose digital computing environment that may be used to implement various aspects of the present invention;

[0013] FIG. 2 illustrates an exemplary web page layout for permitting a user to create a web page according to the present invention;

[0014] FIG. 3 illustrates an exemplary graphical user interface (GUI) for permitting a user to select style templates for a web page layout according to the present invention;

[0015] FIG. 4 illustrates an exemplary GUI for permitting a user to enter text into a style template according to the present invention;

[0016] FIG. 5 illustrates an exemplary flow diagram for generating an HTML page layout according to the present invention;

[0017] FIG. 6 illustrates an exemplary format for a compact mapping file created on a hand-held device according to the present invention;

[0018] FIG. 7 illustrates an exemplary control flow and file transfer according to the present invention; and

[0019] FIG. 8 illustrates an exemplary flow diagram for generating an HTML page layout from a mapping file according to the present invention.

[0020] Although not required, the invention will be described in the general context of computer-executable instructions, such as program modules, being executed by a personal computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. Moreover, those skilled in the art will appreciate that the invention may be practiced with other computer system configurations, including hand-held devices, multiprocessor systems, microprocessor-based or programmable consumer electronics, network PCs, minicomputers, mainframe computers, and the like. 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. In a distributed computing environment, program modules may be located in both local and remote memory storage devices.

[0021] FIG. 1 is a schematic diagram of a conventional general-purpose digital computing environment that can be used to implement various aspects of the invention. Computer 100 includes a processing unit 110, a system memory 120 and a system bus 130 that couples various system components including the system memory to the processing unit 110. System bus 130 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. System memory 120 includes a read only memory (ROM) 140 and a random access memory (RAM) 150.

[0022] A basic input/output system (BIOS) 160 containing the basic routines that help to transfer information between elements within the computer 100, such as during start-up, is stored in ROM 140. Computer 100 also includes a hard disk drive 170 for reading from and writing to a hard disk (not shown), a magnetic disk drive 180 for reading from or writing to a removable magnetic disk 190, and an optical disk drive 191 for reading from or writing to a removable optical disk 192, such as a CD ROM or other optical media. Hard disk drive 170, magnetic disk drive 180, and optical disk drive 191 are respectively connected to the system bus 130 by a hard disk drive interface 192, a magnetic disk drive interface 193, and an optical disk drive interface 194. The drives and their associated computer-readable media provide nonvolatile storage of computer readable instructions, data structures, program modules and other data for personal computer 100. It will be appreciated by those skilled in the art that other types of computer readable media which can store data that is accessible by a computer, such as magnetic cassettes, flash memory cards, digital video disks, Bernoulli cartridges, random access memories (RAMs), read only memories (ROMs), and the like, may also be used in the exemplary operating environment.

[0023] A number of program modules can be stored on the hard disk, magnetic disk 190, optical disk 192, ROM 140 or RAM 150, including an operating system 195, one or more application programs 196, other program modules 197, and program data 198. A user can enter commands and information into computer 100 through input devices, such as a keyboard 101 and a pointing device 102. 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 110 through a serial port interface 106 that is coupled to the system bus, but may be connected by other interfaces, such as a parallel port, a game port or a universal serial bus (USB). A monitor 107 or other type of display device is also connected to system bus 130 via an interface, such as a video adapter 108. In addition to the monitor, personal computers typically include other peripheral output devices (not shown), such as speakers and printers.

[0024] Computer 100 can operate in a networked environment using logical connections to one or more remote computers, such as a remote computer 109. Remote computer 109, also referred to as a “client,” may be a PDA or digital camera which includes some of the elements described above relative to computer 100, although only a memory storage device 111 has been illustrated in FIG. 1. Typically, in hand-held devices, the monitor 107 would be in the form of a compact liquid crystal display (LCD) and the storage devices, for example, 170 and 191 are omitted in favor of a large internal memory or RAM. Moreover, the user input device, such as the keyboard 101 take the form of a compact keyboard interface or handwriting recognition interfaces. In the case of a digital camera, storage device in the form of a floppy disk drive may be provided. The logical connections depicted in FIG. 1 include a local area network (LAN) 112 and a wide area network (WAN) 113. Such networking environments are commonplace in offices, enterprise-wide computer networks, intranets and the Internet.

[0025] When used in a LAN networking environment, computer 100 is connected to local network 112 through a network interface or adapter 114. When used in a WAN networking environment, personal computer 100 and remote computer 109 may both include a modem 115 or other means for establishing a communications over wide area network 113, such as the Internet. Modem 115, which may be internal or external, is connected to system bus 130 via serial port interface 106. In a networked environment, program modules depicted relative to personal computer 100, or portions thereof, may be stored in the remote memory storage device.

[0026] It will be appreciated that the network connections shown are exemplary and other means of establishing a communications link between the computers can be used. The existence of any of various well-known protocols, such as TCP/IP, Ethernet, FTP, HTTP and the like, is presumed, and the system can be operated in a client-server configuration to permit a user to retrieve web pages from a web-based server. Any of various conventional web browsers can be used to display and manipulate data on web pages.

[0027] One aspect of the invention provides a method and system for generating web pages based on a compact mapping file created and stored on the hand-held device or remote computer 109. Another aspect of the invention relates to a simplified layout for a web page suitable for implementation on a hand-held device. The simplified HTML layout will first be described with reference to FIGS. 2-5 to illustrate one method of creating a template mapping file according to the invention. With reference to FIGS. 6-8, the method and system for generating a web page according to a template mapping file will then be described. It will be recognized that the simplified layout described below is intended to illustrate one possible method and user interface for creating the mapping file. Other methods of creating the mapping file will be apparent to those of ordinary skill upon a reading of this disclosure.

[0028] FIG. 2 provides a schematic overview of an exemplary web page layout scheme according to an aspect of the invention. A web page 200 is divided into horizontal rows or regions 201. Each of these horizontal regions 201a-gis associated with a particular style template, selected by a user. Exemplary style templates include templates for titles, text, audio, pictures, parallel column and navigational bars. For example, a title style template may be associated with the top horizontal region 201a. Region 201bmay be associated with a style template for presenting a centered image. Region 201cmay be associated with a style template for presenting caption text for the centered image above. Each style template includes HTML codes for the particular style of the template and blank spaces for information, such as text or pictures.

[0029] One or more source files, which may include text, image, audio or other multimedia files, are also associated with each horizontal region 201, and thus associated with the style template designated for that region. For example, a source file named “Title1.txt” that contains text for a title is associated with region 201a. Similarly, an image file “Pic1.jpg” is associated with region 201b. Style templates can also be associated with more than one source file. For example, the style template assigned to region 201daccepts both an image file and a text file and is therefore associated with text file “Text2.txt” and image file “Pic2.jpg. Similarly, the style template associated with region 201eis associated with text file “Text3.txt” and image file “Pic3.jpg.” As represented by regions 201fand 201g, style templates for audio files and navigational links may also be provided. Thus, the simplified page layout according to the invention provides for the association of one or more source files with a selected one of a plurality of style templates.

[0030] FIG. 3 shows an exemplary graphical user interface (GUI) 300 for permitting a user to associate selected style templates with one or more source files. GUI 300 may be implemented on a small consumer electronic device having limited memory and display area, such as a Windows® CE-based digital camera or a Windows® CE-based personal digital assistant (PDA). In FIG. 3, GUI 300 is shown divided into two display regions 310 and 320. Display region 310 includes a library of exemplary style icons 311 that are selectable by a user using a user interface selection device, such as a mouse, a trackball, a joystick or other well-known cursor-control/entry-selection device. As shown in FIG. 3, a library of exemplary style icons 311a-311lare displayed when layout tab 312 is selected.

[0031] Each style icon 311 is a recognizable graphical image that represents a particular style template. For example, style icon 311ais a graphical image representing a banner or a title style template. Style icon 311bis a graphical image for text-only style template. Style icon 311cis a graphical image for a single photographic or graphical image style template. Style icons 311d-311frepresent combinations of textual and/or image style templates. Style icons 311g-311irepresent different exemplary textual style templates. Of course, other recognizable icons can be displayed that represent other style templates that are not described.

[0032] Display region 320 includes a graphical image 321 representing a current web page that is being created. As different style templates are selected, web page image 321 changes to reflect the relative position of the selected templates. As shown, image 321 includes a title style template at the top of image 321 with a text-only, a picture w/right text and a picture w/left text style templates in order below the title style template. Display region 320 also includes command buttons 322a-322c, which are used for performing selected operations in a well-known manner.

[0033] A particular horizontal region 201 (FIG. 2) is laid out by selecting a horizontal portion of image 321 in a well-known manner using the user interface selection device. A particular style for the selected horizontal portion of image 321 is also selected from style icons 311 in a well-known manner using the user interface selection device. Each template includes HTML codes for the particular style of the template and blank spaces for information, such as text or pictures, depending upon the particular style of the template.

[0034] When a selected style template includes a blank space for textual information, text tab 314 will be available to permit a user to input text. Text tab displays a library of textual formats, attributes and editing functions, such as centering, paragraphing, margins, fonts, sizes, colors, deletion and undo functions, for the text that is entered into the corresponding blank space. FIG. 4 shows an exemplary GUI 400 for entering textual information into a style template according to the present invention. Like GUI 300 of FIG. 3, GUI 400 is preferably displayed on a small consumer electronic device having limited memory and display area. Alternatively, GUI 400 can be displayed on a personal computer (PC) or a workstation.

[0035] In FIG. 4, GUI 400 is shown divided into two display regions 410 and 420. Display region 410 includes a library of exemplary formatting and editing icons 411 that are selectable by a user in a well-known manner using the user interface selection device. As shown in FIG. 4, display region 410 includes a text entry field 412 in which textual information for a particular style template is entered. Alternatively, a pointer to a file containing the desired textual information can be entered. Display region 420 is the same as display region 320 of FIG. 3.

[0036] When a selected style template includes a blank space for pictorial or graphical information, image tab 313 is available to display a library of pictorial/graphical formats, attributes and editing functions for the picture or graphical image that is entered into the corresponding blank space. Pictorial/image information can be entered as a pointer to a locally stored image, which is uploaded with the completed page layout, or as a point to a remotely located image that is retrieved and merged with the completed page layout after uploading. Alternatively, when a selected style template does not require text, the text tab 313 may be deactivated, i.e., be appearing faded or otherwise indicated as not available to the user.

[0037] FIG. 5 shows an exemplary flow diagram 500 for generating an HTML page layout according to the present invention. At step 501, it is determined whether a user desires to create a web page layout from a previously stored macro style template or create a new page layout. If a new web page layout is desired, flow continues to step 502 where a library of style templates and a default page layout image (i.e., an icon like icon 321, but is only a page outline) are displayed (FIG. 3). Flow continues to step 503 where a particular horizontal region of the displayed page layout is selected using a user interface selection device. Flow continues to step 504 where a particular style template is selected using the user interface selection device. When the selected style template has a space for entering associated information, such as a title, text and/or an image, flow continues to step 505. When no information is to be associated with the selected style template, step 505 is bypassed and flow continues to step 506.

[0038] At step 506, it is determined whether the page layout is complete. If so, flow continues to step 507 where it is determined whether a macro style template for the newly-created page layout should be stored for later use. If so, flow continues to step 508 where the newly-created page layout is stored. If not, flow continues to step 509 where the page layout is uploaded to a server.

[0039] If at step 501, a macro style template is desired, flow continues to step 510 where a library of previously stored macro style layouts are displayed. At step 511, a particular macro style layout is selected and a page layout image for the selected macro style template is displayed, similar to FIG. 3. Flow continues to step 512 where a particular horizontal region of the displayed macro style template is selected using the user interface selection device. Flow continues to step 513 where any information associated with the selected horizontal region, such as a title, text and/or an image, is entered. At step 514, it is determined whether the page layout using the selected style template is complete. If so, flow continues to step 509 where the page layout is uploaded to a server.

[0040] FIG. 6 illustrates an exemplary format of a template mapping file generated according to the process described above. The template mapping file associates a selected one of a plurality of style templates with one or more source files to be merged into the selected template. This association may be accomplished with the use of delimited pointers, including a style template pointer 610 and one or more source file pointers 612, as shown in FIG. 6, where the delimiter is a comma “,”. The first template pointer is designated “6” corresponding to a style selected by the user and associated with a source file, in this case a text file “Titlel.txt”. Similarly, the second referenced style pointer is designated “12” and is associated with an image file, “Pic1.jpg”. Some style sheets may be formatted to be merged with more than one source file, as is the case with the style sheet designated “5” which may be, for example, a style sheet for a right justified image with adjacent text, and is to be merged with two source files: “Text2.txt” and “Pic2.jpg”. Those of ordinary skill will recognize that the template mapping file according to the present invention requires only minimal storage because of its compact size and therefore its creation and storage are suitable for implementation on a device with limited memory, such as a hand-held device.

[0041] FIG. 7 provides an overview of the control and data flow of an exemplary system and process for generating mark-up language file based on the above-described exemplary mapping file according to the invention. The single line arrows used in FIG. 7 represent the flow of control within the process illustrated, while the wider arrows represent the flow of files or data. Client computer 109, which may be a hand-held device, includes a storage, which may include RAM and magnetic storage components, containing image and audio files 710 generated by the audio and imaging devices of a digital camera, for example. Text files 712 are generated as described above by the user and may comprise, for example, captions that the user inputs in association with the images files 710. Also stored on client computer 109 are the template mapping file 714 and a template listing file 716. Template listing file representing listing of templates used in the template mapping file 714 and is generated using a known procedure by analyzing the template mapping file 714.

[0042] Operably connected to the client computer 109, via communications interface is a host computer 100 which includes a storage containing a template library module 720, storing a number of predefined style templates, and a background bitmap library, storing a number of background bitmap patterns. Also residing on the host computer 100 is a merger module 724 in the form of a series of computer-executable instructions stored on a computer readable medium, for execution to accomplish the file transfer and control flow that will be described below. A web server 726 is operably connected to the host computer 100, or alternatively, may be implemented on the host computer 100 with appropriate instructions for accomplishing server functionality.

[0043] As may be seen from FIG. 7, the larger files residing on the client computer 109, for example the image and audio files 710, may be transferred directly to the Web server 726 as represented by the file transfer arrow 728. As represented by arrow 730, the text files 712, which may include captions input by the user of the hand-held device, are transferred into memory designated by the merger module 724.

[0044] During a synchronization operation, template mapping file 714 controls, as represented by control arrow 732, the merger of the text files 730 or the information representing the image or audio files such as the pointers required for retrieving the source file, in the case of image or audio files, for example, with templates selected from the template library 720 on the host computer 100. As represented by control flow arrow 734, template listing file 716 controls the transfer of templates from template library 720 into a memory associated with merger module 724, the transfer represented by file transfer arrow 731. Thus, each template referenced by the template mapping file 714 is loaded from the template library 720 into the merger module 724, where the appropriate ones of text files 712 and/or the pointers required for retrieving the image and audio files 710 are merged into the loaded template according to mapping information represented in the template mapping file 714. As described, source files in the form of text are merged into a respective template by placing the actual text file contents into the template, whereas source files in the form of image or audio files are merged by inserting the pointer, i.e., filename and path, into the template such that the web server may determine where to retrieve the image or audio file. The process results in a series of“filled-in” templates, which are concatenated to form a main HTML stream that is transferred to the web server as represented by file arrow 735.

[0045] The HTML formatting codes being merged in merger module 724 may contain references to background bitmap images stored in the background bitmap image library 722. As represented by control flow arrow 733, the merger module 724 controls the transfer of referenced background bitmaps from the background bitmap library 722 to the web server 726 as represented by file transfer arrow 737.

[0046] It will be recognized that a key aspect of the invention is the control of the merger module using the template mapping file 714, which may reside on the client computer throughout the generation of the HTML stream. In that case, while the hand-held device is operably coupled to the host computer, the hand-held device generates signals representing the template mapping file 714, stored in the hand-held device, to control the host computer to effectuate merger of data representing the source file or files, text files or pointers to image or audio files, with the selected template or templates. Alternatively, the template mapping file 714 may itself be transferred from the client computer to the host computer prior to controlling the merger operation and used by the host computer to perform a merger operation. Similarly, the template listing file does not necessarily have to be transferred or uploaded to the host computer 100 since control, as represented by arrow 734, and the merging operation may occur while template listing file 716 resides on the client computer 109, operably connected to the host computer 100.

[0047] Referring additionally to FIG. 8, the steps of an exemplary process associated with the control and file transfer described above with reference to FIG. 7, are illustrated in a flow diagram. At step 810, the mapping file is generated according to the procedure outlined above with reference to FIGS. 2-6. After the mapping file is generated in step 810, the system generates a template list at step 812. Here, the templates used in the mapping file are generated and stored on the client computer. The system then proceeds to step 814 where the source files used in the Web page are determined. At step 816, the system uploads any needed image and audio files to the Web server.

[0048] Generation of the HTML file to create the Web page begins at step 818. Here, the process determines which template appears first in the template mapping file. The process then performs step 820 where the merger module 724 loads the referenced template into memory. Merger module 724 then receives control commands from the template mapping file 714 to determine which source files have been associated with the referenced template. Referring back to FIG. 6, for example, the template pointer “6” is associated with the file pointer “Title1.txt”. In this case, the merger module 724 will load in the template associated in with the style template pointer “6” into the merger module and will merge the text stored in file “Title1.txt” into the template. Merging of the source file may occur are using regular expression mapping, wherein a generic operator embedded in the HTML formatting codes is replaced with the actual text stored in the source file.

[0049] At steps 822, the source files associated with the template are determined. In the case of source files in the form of text, the actual text is merged into the template at step 824. In the case of source files in the form of -image and audio files, a file pointer including the filename and path are merged into the template at step 826. At step 828, background patterns and logos are merged in the appropriate place in the selected template. At step 830, the HTML string resulting from the merger of the selected template with the appropriate source filed is added to a main HTML file.

[0050] At step 832, the merger module 724 determines if more templates are referenced in the mapping file. This may be accomplished by the use of a delimiting character in the mapping file itself to determine when the end file has been reached. If more templates are determined to be represent mapping file, the system returns to step 818 where the next template referenced in the mapping file is determined. Again, at step 820 the next template referenced in the template mapping file is loaded into host memory by the merger module 724 and the appropriate source files are merged with the template. The process thus continues until the end of the mapping file is reached and at steps 834, the main HTML stream is copied to the web server. Those of ordinary skill the art will recognize that step 816 where the image and audio files are uploaded to the server need not occur before the merger steps 818 through 832, but may occur after or simultaneously with those steps in a synchronization operation.

[0051] Although the invention has been described above, it should be appreciated that a variety of modifications will be readily available to persons utilizing the invention. The foregoing description is not intended to be limiting, but is merely illustrative of an exemplary adaptation of the invention. Other products, apparatus and methods which incorporate modifications or changes to that which has been described herein are equally included within this application.