Some of the Technical Magic behind the iPhone Wins Patents
Greater Magnetometer Mapping Accuracy Coming to iOS Devices

Apple Reveals New Whiz-Bang No-Code Content Authoring Tool

1 - Apple Reveals New Whiz-Bang No-Code Content Authoring Tool
On April 12, 2012, the US Patent & Trademark Office published a patent application from Apple that reveals a new electronic content authoring tool in the works that's configured to optimize authored content for one or more intended devices. According to Apple, the existing solutions on the market today are simply not adequate to eliminate barriers between content creators and the presentation of high quality electronic content on a variety of platforms. Today's report presents you with a grand overview of Apple's new authoring tool which includes a few cool user interface elements that we're likely to see surface in the not-too-distant future.  


Apple's Patent Background on Today's Inadequate Web Authoring Tools


In many instances, computer-programming languages are a hindrance to electronic content creation and, ultimately, delivery to content consumers. Often content creators and designers simply lack the skill and the knowledge to publish their mental creations to share with the world.


To begin to bridge this gap, content creators can use some electronic-content-development tools which allow content creators to interact with a graphical user interface to design the content while an electronic-content-development tool puts the computer-programming code in place to represent the electronic content on a user's computer.


One type of such tool is a web page development tool, which allows a user to create webpages with basic features by designing the webpage graphically within the electronic-content-development tool. However, in most instances, such tools can only assist users with basic features. Users wanting customized elements must still have knowledge of one or more computer-programming languages. For example, while some web-content development tools can assist with the creation of basic hyper-text markup language (html) content, these tools have even more limited capabilities to edit cascading style sheet (CSS) elements. Often variables within the CSS code must be adjusted directly in the code. Such adjustments require knowledge of computer-programming languages, which again, many content creators lack.


Another challenge in the creation and delivery of electronic content is that the capabilities of user terminals for receiving and displaying electronic content vary greatly. Even if a content creator successfully creates his electronic content, it is unlikely that the content is optimally configured for each device on which the user will view the content. Originally, digital content was created without having to account for device capabilities. The digital content was going to be viewed on a computer or television having a display of at least a certain size, with at least a certain resolution, if not multiple resolutions. Accordingly, it was possible to generate only one version of the electronic content and that version could be expected to be presented properly by the user's device. However, more recently, smaller displays with fixed resolutions, paltry computing resources, inferior browser technologies, and inconsistent network connectivity such as associated with handheld communication devices have made it so that electronic content isn't always adequately displayed on every device for which a user is expected to view it.


Due to such diverse devices having such diverse capabilities, content must now be created not only once, but often several times so that it can be configured for multiple device types. This development has introduced a new barrier to content creation and delivery. To reduce this barrier, an early technology could create mobile versions of web content by converting a web page intended for viewing on a desktop computer or laptop. Such technology is not suitable for most purposes, because the content creator does not get to see the finished product before it is severed to the mobile device. Another problem is that such technology uses a lowest-common denominator approach, wherein the content is converted so that it can be displayed on any mobile device, despite the fact that many mobile devices can display greatly enhanced content.


A further difficulty in creation of electronic content is that assets can frequently overlap each other when developing an application's interface that includes even rudimentary animation. Since the assets can overlap, it is often difficult to work with assets, to view them unobstructed by other objects, and/or to select the assets to work with.


Accordingly, the existing solutions are not adequate to eliminate barriers between content creators and the presentation of high quality electronic content on a variety of platforms.


Apple's Advanced Content Authoring Tool Solution


Apple's invention provides technology relating to a digital content authoring tool for amateur and professional content developers alike, without the need to understand or access any computer code. Additionally, the authoring tool is further equipped with the ability to manage digital assets and configure them for distribution and viewing on a variety of electronic devices – many of which have diverse hardware capabilities. Accordingly, the presently described technology eliminates many barriers to creating and publishing deliverable electronic content.


Authoring Tool Templates


Apple's authoring tool receives a collection of assets and other files collectively making up deliverable electronic content. In some instances, the authoring tool provides one or more templates, such as a menu navigation template or one of the pre-defined objects referenced above, as starting points for the creation of electronic content. The templates can include containers configured to receive digital assets so a content creator can modify the templates according to his or her vision. In some embodiments, the authoring tool is configured to receive digital assets by importing those assets into the authoring tools asset library. The assets can be imported through a menu interface or through drag and drop functionality. The assets then may be added to the templates by, for example, dragging the asset onto the desired container on the template or through a menu interface.


2 - Example of Apple's Authoring Tool Templates

Inspector Widget for Modifying CSS


In addition to assets, Apple states that the finished content is created by modifying formatting elements using a widget such as an inspector for modifying Cascading Style Sheet variables and by applying JavaScript elements from a JavaScript library. Custom styles and JavaScript elements can also be created as plug-ins to create highly customized content.


Relating Actions to a Time Axis


Apple further states that the assets can also be modified with animation. Each animation can be controlled by an action, and the actions can be tied to a time axis for execution. In some embodiments the actions associated with the assets can be visibly displayed in a menu; in some embodiments the menu can be a sidebar though any graphical user interface element for displaying the actions should be considered within the scope of the present technology. The action can be displayed along a visible time axis, however, throughout this description a time axis can refer to both a visual time axis, or time axis maintained by a computing device and used to relate the relative start and stop times of the associated actions. By relating actions to a time axis, animations based on the actions can be more easily viewed and reviewed.


Easier to Focus on the Design of a Single Element or Asset


In some embodiments, Apple states that the system can clear a page of all but a selected asset so that it may be more easily worked with. This can be true in embodiments wherein many assets overlap during the duration of the full time axis needed to portray all animations associated with all assets on a given page. In such embodiments, all assets except for the selected asset can be hidden so that the user can more easily view or work with the selected asset. In some embodiments, not all assets need be hidden, for example, a background asset might remain visible along with the selected asset.


A Graphical User Interface Inspector Tool


Apple's technology utilizes an additional layer of abstraction between the graphical elements represented in the graphical user interface and the code that represents them. Specifically, the present technology utilizes a common scheme to identify variables and to modify those variables using a widget such as a graphical user interface inspector rather than having to modify the variables in the underlying code. The present technology additionally utilizes a JavaScript library to implement additional code to perform a variety of features including alternate implementations of an object, event handling behaviors, error handling, etc.


Whether a particular code element (written in HMTL, CSS, JavaScript, etc.) is provided by way of a template within the authoring tool, or is created by the user, the code element conforms to the common scheme within the layer of abstraction. Variable elements can be defined, and identified, either within the code or within a related properties file, which associates the defined variable elements with adjustable user interface elements in an inspector. The type of user interface element, the range of possible values for the defined variable are all identified in the code or properties file accompanying the basic code element. Because of the common scheme, even a custom created element can be adjusted within the user interface because the custom created element also identifies variable elements, the accepted values for the variable elements, and the type of inspector needed to appropriately adjust the variable elements. Further because the extra code defining the ability to modify the variable elements conforms to the common scheme it can easily be identified and removed once it is no longer needed, i.e., after the content is created and ready for upload to a server.


Apple's JavaScript Library


Apple's authoring tool also leverages a JavaScript library running in the background to enhance the code elements, by writing additional code that facilitates the smooth functioning of the objects defined by the code elements, even when those objects are implemented on diverse devices. The JavaScript library instantiates the objects specified by the user using the authoring tool and generates additional code (HTML/CSS/JavaScript) as needed to display the content. This allows the authoring tool to substitute alternate implementations for various situations, such as diverse devices, as needed.


As an example of the functioning of this abstraction layer, a code for a "Button" defines its user-modifiable parameters (size, position, color, etc.), and required parameters that may be managed by the system without the users knowledge (event handling behaviors, error handling, etc.). The application outputs the information required to construct a "Button", and simulates this in the application user-interface, possibly using the same implementation that will be used at runtime, but there is a possibility that a modified or entirely different implementation will be provided at runtime.


Because the code defining the object meets the common scheme defining user-modifiable objects in the authoring tool, this extra functionality required only at authoring time (user input validation, special handling of authoring environment preview functionality, etc.) is removed when the content is published.


Additionally, the JavaScript library can determine, that graphics processor dependent functionality such as shadows, gradients, reflections are not supported on the device and should be ignored and replaced with less processor intensive UI even if the author specified them.


3 - JavaScript menu element for carousel transforms list of links into a rotatable 3D Carousel

Apple's patent FIGS. 9A and 9B presented above illustrate a menu of JavaScript elements. Apple states that it's highly desirable to allow content-creators to introduce and adjust their content as much as possible within the user interface. As such, Apple's technology makes use of a JavaScript library listing JavaScript elements such as those presented in the JavaScript menu which is noted in the graphic as patent point #450. The JavaScript library can include primitive elements such as buttons, sliders, and switches that are used standalone; and more complex "composite" elements such as carousels, scroll views, and lists that have multiple "cells" that may contain primitives and other composite elements.


As illustrated, a user has selected the Carousel element #452 and dragged and dropped the Carousel element onto the menu page. Such action transforms the listing of links on the menu page into a rotatable 3-D Carousel as illustrated in FIG. 9B.


In some embodiments, widgets or inspectors can also be provided for adjusting known variables within the JavaScript code. For example, in the case of the rotatable 3-D Carousel, the shape of the menu items, the speed and direction of rotation, spacing, number of containers on the menu can be adjusted using an inspector. Additionally, the number of containers can be increased by just dragging additional assets onto the carousel.


Apple's JavaScript Library Includes Complex "Composite" Elements


According to Apple, their JavaScript library can include complex "composite" elements. As noted in patent FIG. 15A below, we see a perspective wall JavaScript element. The perspective wall JavaScript element is a virtual wall with one or more rows (#806) of files or items (#808), where the wall is set at an angle from a user such that the row or rows stretch into the distance. The items can be pictures, logos, text, etc.


Above the wall, there can be pictures or logos (#802) and text (#840) for informational, descriptive, branding, etc. purposes. Below the wall, there can be intriguing visual effects, such as virtual mirror reflections (#810) of the row or rows, or descriptive text (#812) on wall "floor. A user can use a swiping gesture to "scroll" and navigate along the wall to different files or items. Furthermore, the row or rows can optionally wrap around to form a virtual infinite loop of items for the user to scroll through.


4 - Apple's JavaScript Library Includes Complex Composite Elements

In Apple's patent FIG. 15B we see how a user can tap or select an item to cause it to "pop out" or "fly out" and enlarge (#814) to show more details (#816) about it. Moreover, additional pictures (i.e. album cover art # 818), data (i.e. song titles), or links (i.e. to an online digital content store such as Apple's iTunes) can be provided to give information to the user or to enable the user to directly purchase the file or item without having to go to an online store to search for it.


An Example JavaScript Based Pinwheel Menu


In Apple's patent FIG. 16 noted above we see a pinwheel menu JavaScript element. The pinwheel menu JavaScript element is a virtual wheel functioning as a circular menu allowing a user to select from a multitude of items or files. The user can use his/her thumb or finger to rotate the pinwheel until the item he/she wishes to select is at the "selected" position. The "selected" position can be defined by an arrow and can be any position in the pinwheel.


Apple notes that the pinwheel can also be spun, so that a random item is chosen. This allows for an interactive and engaging way for the user to choose a random item. There can also be a detail portion on the screen that displays more information about the selected item. Tapping the selected item again or pressing a button on the screen can bring the user to a new page with even more detailed information.


Editing Functions for a Multi-Image 3-D Zoetrope


Apple's development tool can also include an interesting editing function for multi-image displays such as a zoetrope. Apple's patent FIG. 33 shown below illustrates an exemplary multi-image display wherein an image of a smart phone is shown being rotated to in a simulator. The 3-D view can be created by displaying multiple views in sequence, just as frames in a movie or a zoetrope.


5 - Apple Illustrates Editing Functions for a Multi-Image 3-D Zeotrope

Apple's patent FIGS. 34a and 34b illustrate exemplary editing embodiments. Patent FIG. 34a illustrates several of the images used by the zoetrope, with the highlighted image being available for editing. Each of the images used in the zoetrope can be selected and edited. Additionally we see an embodiment wherein an image can be added or removed from the collection of images used by the zoetrope. FIG. 34b illustrates an additional cell added to the zoetrope wherein an additional image can be added.


Apple's Publishing & Validation Tools


The finished product can be validated for distribution to one or more known devices that are intended targets for the deliverable content. The publishing tool can determine device criteria associated with each of the devices that are intended to receive the deliverable content from a library of devices or known device criteria. In some embodiments, the device criteria comprises of hardware capabilities of a given device. For example, the device criteria can include screen size, resolution, memory, general processing capabilities, graphics processing, etc.


The validation comprising analyzing assets and files for compatibility with the device criteria and, in some instances, expected network connection states, including connection types such as cellular connections or Wi-Fi, connection reliability, and measured connection speeds.


Once validated, the deliverable content that is compatible with the device criteria can be compiled into a content package for delivery to content consumers using one of the known devices.


A Content Delivery Server


And lastly, Apple notes that a content delivery server can store a collection of versions of assets, each being compatible with different device or network criteria. In such embodiments, the content delivery server can be configured to select an appropriate version of the asset based on run-time network conditions and the device criteria associated with the device that is requesting the content from the content delivery server.


Patent Credits & Cover Graphic Information


Apple's patent application was filed in Q4 2011. The inventors include Senior UI Designer Genevieve Garand, UX designer Steve Marmon, Director of Engineering – Apple Online Store Ralph Zazula and Design Manager (Pro Apps) Michael Stern.


Our Cover Graphic includes patent FIG. 17C illustrates an exemplary transition effect on an iPhone while patent FIG. 19 illustrates an exemplary menu of potential actions for modifying content.


Notice: Patently Apple presents a detailed summary of patent applications with associated graphics for journalistic news purposes as each such patent application is revealed by the U.S. Patent & Trade Office. Readers are cautioned that the full text of any patent application should be read in its entirety for full and accurate details. Revelations found in patent applications shouldn't be interpreted as rumor or fast-tracked according to rumor timetables. Apple's patent applications have provided the Mac community with a clear heads-up on some of Apple's greatest product trends including the iPod, iPhone, iPad, iOS cameras, LED displays, iCloud services for iTunes and more. About Comments: Patently Apple reserves the right to post, dismiss or edit comments.


T5 - Patent Bolt  Current Promo


Check out Our Latest Report on Patent Bolt Titled:

Microsoft Invents Ruggedized Displays for "Surface" Devices


Here are a Few Sites covering our Original Report

MacSurfer, Tech Whirl (About Technical Communications),Twitter, Facebook, Apple Investor News, Google Reader, Macnews, iPhone World Canada, MarketWatch, 9to5 Mac, Mac Life Germany,  Forbes, MacDailyNews, AppleCaffe Italy, TUAW, Macgasm, Techmeme, and more. 





@ Jordan, blah, Michael - thanks guys will check these out!


"Will you only be able to use it to publish content to Apple devices, as with their ebook tool?"

Tess, that's the point for *any* company building a tool. They're focused on making their users part of the content creation ecosystem.

This is a brilliant strategy by Apple. If they deliver something as simple and aesthetically amazing as iDVD, iMovie, Garageband and Keynote, this will be stunning.

Michael D.

@John: Check out Handheld Designer at (Full disclosure: that's my app.) Free trial available at the site.


Oh, how I want this so badly. Looking at the examples above, the nightmare that is Objective-C to code and create this would be intolerable. I've given Objective-C a go on several projects, but I just do not have the time to nor the patience to sit and code, besides that I keep forgetting the commands and form.

I was always under the impression that the Widgets on the desktop were going to be able to be transferred as apps to the iOS. I guess that we are finally getting there.


@John HyperCard

Jordan Stolper

@John: Try StoryDesk


Will you only be able to use it to publish content to Apple devices, as with their ebook tool?


Thanks for the info, this looks great and exactly what I would need to create basic apps without having to understand code. Until it arrives, can anyone recommend another tool like this?

The comments to this entry are closed.