Mashup Designer for Safari on iPhone Content
 
Mashups
It’s been called the essence of Web 2.0. It’s the ability to combine pieces of different web sites to create something new, something meaningful.  Something for you and the people who have your tastes. Your social network. Not some mass market portal built by corporate programmers who think that they know you and your personal tastes.
 
Referred to as a composite web site by some and Mashup site by others, we call it amalgamating web data through the process of transcoding. Whatever. It’s about giving you the data that you want on your mobile phone or desktop browser. It’s Web 2.0. It’s about you.
 
Safari on iPhone
It's the heart of iPhone, the first Web 2.0 smart phone. It allows users to browse the internet. It fully supports internet standards while redefining the mobile internet experience through HTML extensions. It's integrated with iPhone's telephony services as well as Google Maps for location-based services (LBS).
 
Providing a superior mobile Mashup platform, Safari on iPhone users now have easy access to important information. Any piece of web data, it’s there at a glance. No need to scroll a web page to find that chunk of important data. No tapping. It’s always there. No need to refresh. It constantly updates itself. It’s your Safari on iPhone content powered by <alt> Mashup technologies and infused with a bit of AJAX.
 
Welcome to the mobile Web 2.0: Mashups and Safari on iPhone.
 
 
 
Screen Cast and PDF Version
 
A screen cast of the Mashup Designer for Safari on iPhone Content is available here:
http://altmobile.com/Screencasts/1173873451589.html
 
If you are viewing an HTML version of this document, some images may have been corrupted during the conversion process. For best viewing, a PDF version is available here:
 
http://altmobile.com/pdf/Mashup%20Designer%20for%20Safari%20on%20iPhone%20Content.pdf
 
 
Safari on iPhone Content Designer Features
 
The Mashup Designer for Safari on iPhone Content extends the reach of our Mashup development tools to include Safari on iPhone as a deployment client.
 
To understand the underlying technology of our Mashup tools—and in fact to build a Mashup application—you will use our StableDOM technology. The StableDOM product documentation is located at http://altmobile.com/pdf/StableDOM.pdf. The XML Transcoding product documentation is located at http://altmobile.com/pdf/XML%20Transcoding.pdf. Review the DOM Browser product document to understand how to create enterprise Mashups that integrate SQL data, Web Services data, and HTML content. It is located at http://altmobile.com/pdf/DOM%20Browser.pdf. And finally, our Mashup monitoring and metadata implementation is documented here:  http://altmobile.com/pdf/Mashup%20Tools.pdf.
1
 
 
Leveraging the StableDOM and code generation technologies, our Mashup Designer for Safari on iPhone Content provides the following major capabilities:
 
  1. 1.An Opera/FireFox browser-based design tool.
  2. 2.Fill-in-the-blank form to define your Mashup content properties.
  3. 3.Fill-in-the-blank form to define your page layout.
  4. 4.Fill-in-the-blank form to define your page properties.
  5. 5.Fill-in-the-blank form to define your AJAX properties.
  6. 6.Testing a prototype of your Mashup accessing live data.
  7. 7.Generation of your Mashup files.
  8. 8.Sending an SMS message or email to your iPhone-based testers with the Mashup server URL.
 
The following is a screen shot of the Mashup Designer for Safari on iPhone Content when first launched:
 
 
Defining Content Style Properties
    
The Mashup Designer for Safari on iPhone Content allows you to define the following content properties:
 
1
 
  1. 1.Background color.
  2. 2.Foreground color.
  3. 3.Background image color.
  4. 4.Font family.
  5. 5.Font size.
  6. 6.Text-To-Speech. Enable this option if you want the Mashup server to generate a .wav file of the Mashup content. Safari on iPhone will then use QuickTime to play this file.
    The following iPhone screen shot shows the embedded QuickTime control dynamically created with the Mashup content:

     

 
The following screen shot shows the content properties section of the Mashup Designer:
 
1
 
 
 
Defining Page Layout Styles
 
The Mashup Designer for Safari on iPhone Content allows you to define the following page layout styles:
 
  1. 1.No footer. This option will remove the CSS property border-top of the footer. The "flip" icon will remain and is unchanged.
  2. 2.Footer updated with time stamp. On each update from the Mashup server, a JavaScript will update the footer with the local time. This ensures that the user will know when the last content update took place.
  3. 3.Footer with static HTML. This will default to the following HTML:
 
<a href='http://altmobile.com'>ALT</a> mashup technologies and <a href='http://www.apple.com/iphone/'>Apple</a> iPhone
 
You should probably place your company support information or the Mashup name and version.
 
The following screen shot shows the page layout styles section of the Designer:
 
1
 
 
 
 
Defining Page Properties
    
The Mashup Designer for Safari on iPhone Content allows you to define the following page properties:
 
  1. 1.Page title.
  2. 2.Scalable. This preference corresponds to the user-scalable property of the META element and accordingly supports these options:
    1. a.yes
    2. b.no
  3. 3.Initial scale. This preference corresponds to the initial-scale property of the META element and accordingly supports these options:
    1. a.minimum-scale
    2. b.maximum-scale
  4. 4.Minimum scale. This preference corresponds to the minimum-scale property of the META element.
  5. 5.Maximum scale. This preference corresponds to the maximum-scale property of the META element.
  6. 6.text-size-adjust options. This preference corresponds to the -webkit-text-size-adjust property of the BODY element and accordingly supports these options:
    1. a.none
    2. b.auto
    3. c.Percentage. The default value of this choice is 200%.
  7. 7.Content width. This value is based on the width of the Content Viewer and corresponds to the width property of the META element.
  8. 8.Content height. This value is based on the height of the Content Viewer and corresponds to the height property of the META element.
 
1
 
 
 
The official Safari on iPhone configuration documentation is located at the following URL: http://developer.apple.com/iphone.
 
Defining AJAX Properties
 
The Mashup Designer for Safari on iPhone Content allows you to define the following AJAX properties:
 
  1. 1.Mashup server URL. This field is auto-populated with the value of the Safari on iPhone Object Server URL. This is a special Object Server as is discussed later. This specified URL is used in the JavaScript source code generation to support AJAX calls to the Mashup server.
  2. 2.Mashup content refresh specified in minutes. This field is auto-populated with the value of one minute. It is important to specify a realistic value as not to overwhelm the Mashup server’s resources and consequently the servers from which it fetches its data. This number is used in the JavaScript source code generation to support a JavaScript timer used by AJAX calls to the Mashup server.

    If you are using the text-to-speech option, it is also important to ensure that your refresh interval provides adequate time for a user to listen to the Mashup result. If the QuickTime client is still downloading or playing the Mashup result sound file and the AJAX-based content refresh occurs, Safari on iPhone will preempt the QuickTime player and return control to the HTML page.

    1
     
  3. 3.The AJAX JavaScript source code to access the Mashup Server, update the content area of the Viewport, set a JavaScript timer, and announce the Mashup result. This allows you to quickly change any of XMLHttpRequest (XHR) properties such as setting any custom headers.

 

 
Testing Your Mashup Content
 
The Mashup Designer for Safari on iPhone Content supports two types of testing:
 
  1. 1.Desktop browser-based content testing. As a Safari on iPhone Mashup may be constrained to provide a fixed size canvas, it is important to correctly size your Mashup to contain all your data. Rather than delaying testing the fit of your content until deployment, the Mashup Designer for Safari on iPhone Content provides a resizable Content Viewer which displays the Mashup content.
 
To fetch the Mashup content and place it into the Content Viewer, select the "Fetch Content" link as highlighted in this screen shot:
 
1
 

 
You can then resize the Content Viewer to ensure your content fits. The width and height data— expressed in pixels—is placed in the title bar of the Viewer for easy reference. The Content Viewer is highlighted in this screen shot:
 
And a resized Content Viewer is displayed in this screen shot:
 
1
 
 
And after code generation, the Mashup HTML page will contain a META element that defines the Safari on iPhone Viewport properties:
 
 
The above screen shot is from the <alt> DOM Browser tool. To learn more about visualization you may view its documentation at http://altmobile.com/pdf/DOM%20Browser.pdf
  1. 2.On-device site testing. The Mashup Designer for Safari on iPhone Content simplifies iPhone-based testing by providing the following features:
    1. a.Deploys all of HTML, CSS, and JavaScript related Mashup files into the appropriate location of the built-in web server. This is discussed in the next section which is entitled: "Generating Your Safari on iPhone Content Files".
    2. b.Optionally sends an SMS text message to a default number containing the URL of the Mashup. Thereafter the tester will need to select the correct network interface.

      This is a screen shot of an automated SMS on the iPhone. These automated messages will contain the subject of "iPhone test URL" and will be automatically sent from an email account determined by your operating system's default mail program.

      1
       


      Since many programmers will have defined multiple network connections on their development machines, including those defined by virtual environments such as Parallels and VMWare, it is nearly impossible to determine which network interface should the automated SMS message reference as part of the Mashup server's URL. Consequently, the       Mashup Designer for Safari on iPhone Content will generate a complete list of all known network interfaces which the Mashup server may be running.

      Though the SMS message is not displayed in the easiest to read of formats, the SMS client on iPhone allows you to view a list of URLs contained in the SMS message. To view this list, tap the "Expand Arrow" icon as seen in this screen shot:



      This will lead you to a list of the URLs. As seen in the screen shot below, some URLs are obviously related to virtual environments or to non-routable IP addresses.  
      1
       


      After tapping on the correct URL, the SMS client will allow you to access the URL in Safari on iPhone as seen in this screen shot:





      To enable automated SMS notification, provide your carrier's email-to-SMS address in the       sms-test-notification attribute of the iphone-dev element in the webSdk.xml configuration file as seen here:



      Currently AT&T's email-to-SMS service is accessible at the email domain of txt.att.net  


      1
       
      Automated SMS messages is currently available only for Macintosh users of the Mashup Designer for Safari on iPhone Content.

    3. c.Optionally creates an email message with the URLs allowing you to manually add the testers' email addresses as seen in this screen shot:




      To enable or disable your default email program to be launched, set the       open-default-mail-program attribute of the iphone-dev element in the webSdk.xml configuration file as seen here:



      Launching the default email program is currently available only for Macintosh users of the Mashup Designer for Safari on iPhone Content.

Generating Your Safari on iPhone Content Files
 
The Mashup Designer for Safari on iPhone Content generates a unique directory containing:
  1. 1.Images for the "switch" button. This is used to toggle to/from the configuration controls. These are based on our cross platform look and feel and is shared with our Mashup Widget/Gadget technologies.
    1
     
  2. 2.A JavaScript file named mashupWorld.js containing the AJAX code needed to fetch, display announce the Mashup data. It also contains the behavior needed to change the configuration information.
  3. 3.A CSS file named mashupWorld.css containing rules for the generic page properties such as colors, fonts and layout.
  4. 4.A CSS file named designer-generated.css containing the size information calculated from the Content Viewer size. It also sets the body CSS properties for the font-size, font-family, color, background-color, background-image, and -webkit-text-size-adjust as specified in the Designer.
  5. 5.The index.html file containing the static portions of the Mashup content.
To compress the time between the development and test phases, the Mashup Designer for Safari on iPhone Content will generate and deploy these files and their containing directory directly to the embedded web server and optionally send an SMS message or email with the URL to access the Mashup server.
 
This screen shot shows the generated files:
 
 
 
 
This service is accessed through the "Generate Mashup Page" link as highlighted in this screen shot:

 
1
 

 
The browser will display the location of your deployment directory as seen here:
 
        
 
and launch a directory browser as seen here:
 
1
 



A screen shot of the "front" of a sample Mashup page is seen here:
1
 



And, the "back" of the Mashup page looks like this:
1
 





The "switch" to toggle to and from the Mashup configuration is seen here:
1
 

 
And, a running sample Mashup page looks like this:
 
1
 



The sample Mashup page demonstrates several important concepts and provides the skeleton needed for you to create aesthetically pleasing Mashup sites:
 
  1. 1.The segmentation of the page into two visual areas: the content area and the status/control area.  
In the sample Mashup page, the status/control area contains marketing information and the configuration "switch". Rather than static marketing information, e-commerce pages might fetch a banner ad. The web advertisement association or Google/Yahoo will probably define a special banner ad size for iPhone content much as they have done for mobile ads.
1
 
More importantly it’s best to specify Mashup related data such as the last time data was fetched, for example, or perhaps the Mashup title or version.
  1. 2.A configuration "panel". Enterprise users will want to define a standard configuration look and feel.
  2. 3.A start and stop capability. The generic Mashup page internally uses a JavaScript timer to invoke the AJAX code to fetch the Mashup data. The generated JavaScript code will remove any previously set timers.
  3. 4.The URL of the Mashup server providing content to this page. Internally, the generated Mashup page will store this URL in a JavaScript variable.
  4. 5.The interval to refresh the content. As mentioned earlier, it is important to fetch at reasonable intervals. Internally, the generated Mashup page will store the refresh increment in a JavaScript variable.
 
 
Launching the Mashup Designer for Safari on iPhone Content
    
As mentioned earlier, the Mashup Designer for Safari on iPhone Content extends the reach of our Mashup development tools to include Safari on iPhone as deployment clients. To launch the Designer, you should have already created a Mashup and generated the Dynamic XSL.
 
The StableDOM HTML transcoding product documentation is located at http://altmobile.com/pdf/StableDOM.pdf. The XML Transcoding product documentation is located at http://altmobile.com/pdf/XML%20Transcoding.pdf. Review the DOM Browser product document to understand how to create enterprise Mashups that integrate SQL data, Web Services data, and HTML content. It is located at http://altmobile.com/pdf/DOM%20Browser.pdf. And finally, our Mashup monitoring and metadata implementation is documented here:  http://altmobile.com/pdf/Mashup%20Tools.pdf.
 
Once a Dynamic XSL has been created, you should launch a Safari on iPhone Object Server by selecting the menu item "Safari on iPhone Object Server…" from the popup menu as seen in the following screen shot:
 
1
 
    

Much like a normal Object Server provides a micro web server enabling remote access to the XML or XSL content of the text editor—transcoding as needed from remote sites—the Safari on iPhone Object Server also allows you to launch a micro web server. This is seen in this screen shot:
 
 
 
1
 
In the above screen shot, you see how to launch an Object Server on a specific port. Unix users will be alerted about using restricted ports.
 
Review the DOM Browser product document to understand how to use the Object Server functionality: http://altmobile.com/pdf/DOM%20Browser.pdf.
 
 
In addition to all the features, HTTP debugging/monitoring, and manageability of a standard Object Server, the Safari on iPhone Object Server provides the following additional capabilities:
 
  1. 1.Generates the Mashup Designer for Safari on iPhone Content web page customized to support Application development.
  2. 2.Launches Opera 9—which should be your default web browser—to view the Mashup Designer web page using the Opera command line API.
  3. 3.Implements the previously described "Fetch Content" service which is accessible through the Mashup Designer for Safari on iPhone Content. The Fetch Content service returns the first child element of the BODY element generated by the Dynamic XSL. As such, it is important that your deployment Mashup server performs a similar element stripping or your JavaScript client does this. This is also a concern for any global CSS rules that your Mashup defines.
 
To reinforce this concept, let’s visualize a hypothetical XHTML document that was generated by a Dynamic XSL Mashup:
 
 
 
 
Since we want to dynamically update just the application’s content area and not the entire canvas, the Safari on iPhone Object Server will just return the highlighted elements. Also note that the table element defines its border explicitly rather than defining a global CSS rule. This is highlighted in this screen shot:
 
 
Of course, an inline CSS rule would also work.
 
1
 
  1. 4.Implements the previously described "Generate Mashup Page" service which is accessible through the Mashup Designer for Safari on iPhone Content.
The Mashup Development Process for Safari on iPhone Content
 
To create Mashup Appl