|Publication number||US7996780 B1|
|Application number||US 11/140,582|
|Publication date||Aug 9, 2011|
|Filing date||May 27, 2005|
|Priority date||May 27, 2005|
|Publication number||11140582, 140582, US 7996780 B1, US 7996780B1, US-B1-7996780, US7996780 B1, US7996780B1|
|Original Assignee||Adobe Systems Incorporated|
|Export Citation||BiBTeX, EndNote, RefMan|
|Patent Citations (37), Non-Patent Citations (2), Referenced by (2), Classifications (6), Legal Events (4)|
|External Links: USPTO, USPTO Assignment, Espacenet|
The present invention relates, in general, to graphical editing environments and, more specifically, to enhanced visualization of block layouts.
Over the last decade, the World Wide Web (WWW) has grown from simple graphics and hyperlinks into rich and complex multimedia sites and presentations. Hypertext Markup Language (HTML) is a tag-based markup language that describes the visible format of data. It was one of the first and remains a widely used computer language used to build Web pages and Websites. Web designers typically use Web development environments that include HTML code view editing, in which the designer may write out the HTML script; and/or graphical design view editing, in which the development environment displays the graphical rendering of the HTML as it will appear in a Web browser and allows the designer to graphically manipulate the Web page under design. Using visual editing typically allows the designer to produce a more-refined and visually pleasing result. Web development environments that include such graphical-based editing includes MACROMEDIA INC.'s DREAMWEAVER™, ADOBE SYSTEMS, INC.'s GO LIVE™, MICROSOFT CORPORATION's FRONTPAGE™, and the like. Some Web editing environments, such as DREAMWEAVER™, include both graphical-based and text-based editing views that may be simultaneously displayed to the user and automatically show changes to the other view as a user makes edits in the opposite view.
As technology has advanced, there has been a growth in the use and development of rich Internet applications (RIAs), which are generally Internet-based interactive multimedia applications that operate more-complex logic on the accessing client computer. Many RIA use an interactive multimedia application environment (iMAE), such as MACROMEDIA INC.'s FLASH™ or the like, as the platform to develop the RIA that will be executed using an interactive multimedia runtime container (iMRC), such as MACROMEDIA INC.'s FLASH PLAYER™, running on the accessing client. Application development environments (ADE) have been developed specifically for RIA applications. For example, MACROMEDIA INC.'s FLEX™ server and FLEX BUILDER™ integrated development environment (IDE), are used to design and develop RIA that result in small web file (SWF) formatted files that are natively run using the FLASH PLAYER™.
In both Web pages and RIA, the visual interface is an integral part of the presentation of the information and the user experience. Therefore, the design of the interface is an important part of the overall design of the Web page and/or RIA interface. Graphical interfaces are usually developed by segregating the display canvas into a series of layout blocks or divisions. These blocks are defined in layout elements, such as tables, lists, divisions (DIV), and the like, in HTML, and other block elements, such as HBoxes, VBoxes, and the like in RIA, such as those designed in FLEX BUILDER™. Layout blocks may be nested or imbedded into other layout blocks in order to create a specific design of the interface. As a part of the design process, designers and developers benefit by easily viewing the basic block layout of the interface. However, current ADEs generally provide only an outline of the various layout blocks on the design view canvas. These outlines, while instructive of the division of the interface, do not give the designer much information concerning how the layout blocks are actually set up. For example, the grid of outlines does not give the designer any information on whether the layout blocks are nested or adjacent or imbedded, or the like, or whether the divisions are part of the same block or are, themselves, a different block or blocks. Moreover, within each block, the current outlining features do not instruct the designers about the size or appearance of key parameters, such as the box model parameters supporting the margin, border, padding areas, and the like. Thus, the designer is not able to easily see how the interface is laid out.
The present invention is directed to a system and method that provides an enhanced visualization of the block layout of an electronic graphical interface. In application, on viewing the interface in a design view of an application development environment (ADE), the ADE renders outlines of each block defined on the interface canvas and adds a fill color for each outlined block. The color selected for filling the block is selected to contrast against any adjacent colors of adjacent blocks. The developer is, therefore, able to easily visualize the block layout of the interface.
The ADE also adds visual representations showing the box model parameters of the blocks making up the interface. The box model parameters of any block or container are the standard parameters that define the basic form of the “box” of the block. These parameters include block height, width, outline, border, margin, and padding. Thus, the developer is not only able to more easily see the visual block layout of the interface, he or she is also able to more easily see the basic layout of any of the individual blocks, whether the block is nested or independent.
The foregoing has outlined rather broadly the features and technical advantages of the present invention in order that the detailed description of the invention that follows may be better understood. Additional features and advantages of the invention will be described hereinafter which form the subject of the claims of the invention. It should be appreciated by those skilled in the art that the conception and specific embodiment disclosed may be readily utilized as a basis for modifying or designing other structures for carrying out the same purposes of the present invention. It should also be realized by those skilled in the art that such equivalent constructions do not depart from the spirit and scope of the invention as set forth in the appended claims. The novel features which are believed to be characteristic of the invention, both as to its organization and method of operation, together with further objects and advantages will be better understood from the following description when considered in connection with the accompanying figures. It is to be expressly understood, however, that each of the figures is provided for the purpose of illustration and description only and is not intended as a definition of the limits of the present invention.
For a more complete understanding of the present invention, reference is now made to the following descriptions taken in conjunction with the accompanying drawing, in which:
It should be noted that colors 205, 207, and 209 are selected to provide visual contrast between adjacent or consecutive blocks. While any underlying color selection algorithm that might be used by development environment 20 would not need to preclude reusing colors, colors are selected in an attempt to provide good visual differentiations.
In the example depicted in
It should be noted that while
While providing visual indication of the various box model parameters assists the developer or designer in creating the interface, it may also be helpful to provide the actual parameter values. One method of providing such information is displayed in tool-tip 215. As the designer hovers cursor 216 over right margin 212, tool-tip 215 pops up with the parameter information on right margin 212. In the example, tool-tip 215 states that right margin 212 has a margin of 34% or 462 pixels. This information may be important to the designer in modifying the sizes of any of the margins, padding, or the like.
It should be noted that in additional and/or alternative embodiments of the present invention, the box model parameters may be displayed in various manners. For example, all box model visualizations may appear for each block displayed on the interface canvas. The designer may selectively choose to turn or toggle such box model displays on or off as desired. An alternative means for displaying the box model visualization would be to display the box model parameters only in the blocks that the user selects. Thus, at the initial screen, only the major blocks are differentiated through the block visualization feature. Once the designer selects one of the blocks, the development environment would render the box model parameters onto the selected box. Any variation of such means may be utilized by the different embodiments of the present invention.
Negative parameters may also be illustrated in the block layout visualization of the described embodiment. Margins 302, 305, 306, and 307 generally define the space between border 301 and outline 303. Left margin 305 is much smaller than right margin 306. However, bottom margin 307 is a negative space, which is shown overlapping into bottom padding 309. Therefore, while bottom padding 309 now appears to be smaller than top padding 308, it is being overlapped by bottom margin 307 because of the margin's negative size.
The block visualization feature may also be useful in editing the values of the parameters making up the block. Instead of requiring a designer to use a property inspector window or a separate operational view, additional and/or alternative embodiments of the present invention allow the designer to graphically manipulate the block by position the cursor at various locations and dragging-and-dropping the parameter edge to the desired location. For example, in
It should be noted that in additional and/or alternative embodiments of the present invention, a separate interface may be provided to the designer to modify the values of the various parameters making up the block. For example, property inspector 217 (
It should be noted that in additional and/or alternative embodiments of the present invention, a designer may customize the types of blocks to be included in the block visualization feature along with the specific colors or number of colors to use in implementing the feature. For example, while, in HTML, a paragraph tag defines a block of text, it may not be desirable to automatically include all paragraphs as separately identified blocks in the block visualization features. The typical large number of paragraphs may, therefore, clutter the edit interface for the designer. However, a designer may determine that he or she wants to block off paragraphs. In such instances, the customizing interface would allow the designer to designate paragraph structures for block visualizing.
It should be noted that the layout elements listed in
Color Palette 708 also allows the designer to select the color set that will be used to highlight the various blocks. The designer can search for the desired color through color well 709 and use Assign Color button 710 to place the selected color into the color set. Current Color Palette 711 displays the color swatches for each of the colors that are currently in the set of colors for use in the feature. Hatching check box 712 allows the user to determine whether the system also uses hatching in visually rendering the layout elements.
It should be noted that in additional and/or alternative embodiments of the present invention, the development environment may limit the total number of colors in the color set to a specific number. Depending on the memory resources that the development environment desires to affect, it may limit the feature to 4, 8, 10, 16, 32, or any other such number of colors.
In general operation of selected embodiments of the present invention, the development environment reads the code, tags, or other metadata that describes the structural or stylistic layout of the interface. Certain such structures and formats have been pre-coded into the development environment for display in the block visualization feature. For example, while a paragraph tag in HTML represents a structural block, the development environment may not include paragraph tags for enhanced display. DIV constructs, however, also represent block layout elements and may be included in the enhancement feature. Any number of different combinations of block layout elements may be pre-coded into the development environment for enhanced display.
Various embodiments of the present invention may also be used in conjunction with style sheets to provide a level of customization to designers. Using CSS, developers are typically able to separate the style of a Web document from its structure and content. Thus, developers are generally able to define the style of an entire Web document by defining styles and applying those styles to the content and structure of the document. Because the style is applied to the content, one style may be applied to multiple sections of the document, reducing the size of the resulting Web page. Moreover, developers may change the entire appearance of a Web page by changing the CSS without effecting the content of the page.
CSS uses rules to define how a document should appear. These rules may be included within the same Web document, whether in a single location (such as the HTML <head> element) or inline with the element to be changed or in a separate, linked style document. A style may also be defined by name and then, subsequently, be applied to a particular element using a spanning tag around that element that calls and/or identifies the named style. A CSS rule typically includes a selector portion that defines to which elements or classes a rule will be applied, and a declaration that indicates the particular properties of an element that is to be changed, such as its typeface, font, color, and the like, and a value for the change to the particular property. One of the powerful features of CSS is that many of the properties that have been applied to a particular element may be inherited by child elements. If a more-specific rule is placed within the document, the more-specific rule will usually override any of the properties associated with the general rule. Therefore, the rules may cascade through the document.
Selected embodiments of the present invention may leverage CSS to assist in determining which layout elements to include in the enhanced visualization. The development environments configured according to such embodiments may read the CSS rules to determine whether or not the particular style/format of the interface element should enhanced visually. The designer may, therefore, use CSS rules to force certain objects to be enhanced where they might not ordinarily be pre-coded for enhancement or may use CSS rules to prevent a typically enhanced block from being enhanced. For example, one development environment configured according to one embodiment of the present invention may not automatically enhance paragraph blocks. However, in this example, the designer would like to enhance certain paragraph blocks. The designer may include CSS rules that describe these certain paragraph blocks as blocks to be enhanced. Similarly, by writing CSS rules to designate enhanced blocks to be left alone, the designer may prevent the enhancement from being applied. Thus, using CSS rules, the designer may create a customized performance for the enhanced visualization of the various layout blocks.
The program or code segments making up the various embodiments of the present invention may be stored in a computer readable medium. The “computer readable medium” may include any medium that can store information. Examples of the computer readable medium include an electronic circuit, a semiconductor memory device, a ROM, a flash memory, an erasable ROM (EROM), a floppy diskette, a compact disk CD-ROM, an optical disk, a hard disk, a fiber optic medium, and the like. The code segments may be downloaded via computer networks such as the Internet, Intranet, and the like.
Bus 1002 is also coupled to input/output (I/O) controller card 1005, communications adapter card 1011, user interface card 1008, and display card 1009. The I/O adapter card 1005 connects storage devices 1006, such as one or more of a hard drive, a CD drive, a floppy disk drive, a tape drive, to computer system 1000. The I/O adapter 1005 is also connected to a printer (not shown), which would allow the system to print paper copies of information such as documents, photographs, articles, and the like. Note that the printer may be a printer (e.g., dot matrix, laser, and the like), a fax machine, scanner, or a copier machine. Communications card 1011 is adapted to couple the computer system 1000 to a network 1012, which may be one or more of a telephone network, a local (LAN) and/or a wide-area (WAN) network, an Ethernet network, and/or the Internet network. User interface card 1008 couples user input devices, such as keyboard 1013, pointing device 1007, and the like, to the computer system 1000. The display card 1009 is driven by CPU 1001 to control the display on display device 1010.
Although the present invention and its advantages have been described in detail, it should be understood that various changes, substitutions and alterations can be made herein without departing from the spirit and scope of the invention as defined by the appended claims. Moreover, the scope of the present application is not intended to be limited to the particular embodiments of the process, machine, manufacture, composition of matter, means, methods and steps described in the specification. As one of ordinary skill in the art will readily appreciate from the disclosure of the present invention, processes, machines, manufacture, compositions of matter, means, methods, or steps, presently existing or later to be developed that perform substantially the same function or achieve substantially the same result as the corresponding embodiments described herein may be utilized according to the present invention. Accordingly, the appended claims are intended to include within their scope such processes, machines, manufacture, compositions of matter, means, methods, or steps.
|Cited Patent||Filing date||Publication date||Applicant||Title|
|US4872167 *||Dec 9, 1988||Oct 3, 1989||Hitachi, Ltd.||Method for displaying program executing circumstances and an apparatus using the same|
|US5204947 *||Oct 31, 1990||Apr 20, 1993||International Business Machines Corporation||Application independent (open) hypermedia enablement services|
|US5734915 *||Oct 31, 1994||Mar 31, 1998||Eastman Kodak Company||Method and apparatus for composing digital medical imagery|
|US5784056 *||Dec 29, 1995||Jul 21, 1998||Sun Microsystems, Inc.||System and method for temporally varying pointer icons|
|US6313835 *||Apr 9, 1999||Nov 6, 2001||Zapa Digital Arts Ltd.||Simplified on-line preparation of dynamic web sites|
|US6321370 *||Sep 17, 1996||Nov 20, 2001||Hitachi, Ltd.||Method of supporting arrangement of semiconductor integrated circuit|
|US6332212 *||Oct 2, 1997||Dec 18, 2001||Ltx Corporation||Capturing and displaying computer program execution timing|
|US6546397 *||Dec 2, 1999||Apr 8, 2003||Steven H. Rempell||Browser based web site generation tool and run time engine|
|US6546543 *||Sep 9, 1999||Apr 8, 2003||Fujitsu Limited||Method of displaying, inspecting and modifying pattern for exposure|
|US6601057 *||Oct 30, 2000||Jul 29, 2003||Decentrix Inc.||Method and apparatus for generating and modifying multiple instances of an element of a web site|
|US6613099 *||Aug 20, 1999||Sep 2, 2003||Apple Computer, Inc.||Process and system for providing a table view of a form layout for a database|
|US6721713 *||May 27, 1999||Apr 13, 2004||Andersen Consulting Llp||Business alliance identification in a web architecture framework|
|US6822663 *||Jan 24, 2001||Nov 23, 2004||Adaptview, Inc.||Transform rule generator for web-based markup languages|
|US6850808 *||Oct 18, 2002||Feb 1, 2005||Rockwell Software Inc.||Method and system for developing a software program using compound templates|
|US7054870 *||May 16, 2005||May 30, 2006||Kooltorch, Llc||Apparatus and methods for organizing and/or presenting data|
|US7143344 *||Jun 12, 2002||Nov 28, 2006||Microsoft Corporation||Transformation stylesheet editor|
|US7152207 *||Aug 30, 2000||Dec 19, 2006||Decentrix Inc.||Method and apparatus for providing conditional customization for generating a web site|
|US7174031 *||May 17, 2005||Feb 6, 2007||Digimarc Corporation||Methods for using wireless phones having optical capabilities|
|US7246306 *||Jun 21, 2002||Jul 17, 2007||Microsoft Corporation||Web information presentation structure for web page authoring|
|US20020067380 *||Jan 16, 2002||Jun 6, 2002||Jamey Graham||Method and system for organizing document information|
|US20020165881 *||Mar 15, 2001||Nov 7, 2002||Imation Corp.||Web page color accuracy using color-customized style sheets|
|US20020166109 *||Jun 26, 2002||Nov 7, 2002||Dupont Photomasks, Inc., A Delaware Corporation||Photomask and integrated circuit manufactured by automatically eliminating design rule violations during construction of a mask layout block|
|US20030005159 *||Jun 7, 2001||Jan 2, 2003||International Business Machines Corporation||Method and system for generating and serving multilingual web pages|
|US20030120686 *||Dec 20, 2002||Jun 26, 2003||Xmlcities, Inc.||Extensible stylesheet designs using meta-tag and/or associated meta-tag information|
|US20030210267 *||May 13, 2002||Nov 13, 2003||Kylberg Robert Lee||Systems and methods for providing asynchronous client rendering in a graphical user interface (GUI) environment|
|US20030221162 *||Dec 14, 2001||Nov 27, 2003||Sridhar Mandayam Andampillai||Meta-templates in website development and methods therefor|
|US20040103371 *||Nov 27, 2002||May 27, 2004||Yu Chen||Small form factor web browsing|
|US20040179213 *||Mar 1, 2004||Sep 16, 2004||Tadashi Oba||Computer supported plate making method|
|US20050005266 *||Mar 26, 2004||Jan 6, 2005||Datig William E.||Method of and apparatus for realizing synthetic knowledge processes in devices for useful applications|
|US20050050454 *||Aug 29, 2003||Mar 3, 2005||International Business Machines Corporation||Controlling the look and feel of a web|
|US20050094206 *||Jul 15, 2004||May 5, 2005||Canon Kabushiki Kaisha||Document layout method|
|US20050138559 *||Dec 19, 2003||Jun 23, 2005||International Business Machines Corporation||Method, system and computer program for providing interactive assistance in a computer application program|
|US20050188322 *||Jan 10, 2005||Aug 25, 2005||Suzanne Napoleon||Method and apparatus for producing structured SGML/XML student compositions|
|US20060010374 *||Jul 9, 2004||Jan 12, 2006||Microsoft Corporation||Defining the visual appearance of user-interface controls|
|US20060161845 *||Mar 7, 2006||Jul 20, 2006||Jessica Kahn||Platform for feeds|
|US20060236231 *||Jan 23, 2006||Oct 19, 2006||Quark, Inc.||Systems and methods for developing dynamic media productions|
|US20090262130 *||Apr 21, 2008||Oct 22, 2009||Vistaprint Technologies Limited||System and method for automatically generating color scheme variations|
|1||*||2D design (v2), software Tutrials, Falcon et al.; Copyright 1995-2010; 74 pages; http://msc-ks4technology.wikispaces.com/file/view/Techsoft+Tutorials.pdf.|
|2||*||Screen shot Microsoft PowerPoint; ("MS"; Microsoft Corporation; Copyright © 1987-2003.|
|Citing Patent||Filing date||Publication date||Applicant||Title|
|US20100309512 *||Dec 9, 2010||Atsushi Onoda||Display control apparatus and information processing system|
|US20130047065 *||Feb 21, 2013||Sangseok Lee||Display device and method for providing content using the same|
|U.S. Classification||715/762, 715/761, 715/760, 715/763|
|Jul 21, 2005||AS||Assignment|
Owner name: MACROMEDIA, INC., CALIFORNIA
Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:MITNICK, VICTOR;REEL/FRAME:016799/0287
Effective date: 20050714
|Jan 19, 2006||AS||Assignment|
Owner name: ADOBE SYSTEMS INCORPORATED, CALIFORNIA
Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:MACROMEDIA, INC.;REEL/FRAME:017034/0263
Effective date: 20051207
|Dec 20, 2011||CC||Certificate of correction|
|Jan 21, 2015||FPAY||Fee payment|
Year of fee payment: 4