Product Page
App Store

Most visual effects on web pages are today created in a graphic editor such as Photoshop and implemented on the page as rendered graphics. This is all well and good for users on speedy DSL connections, but the bandwidth eaten up by these graphics can really effect the load times of your content on our favorite new mobile device.

Luckily, the iPhone supports both canvas and SVG for handling your drawing in the browser. Using these formats will allow you to create much more visually appealing content at a fraction of the bandwidth. Both canvas and SVG are specified using plain text. Instead of supplying the artwork, you supply instructions for generating the artwork.

In the example that follows, I’ll compare using a transparent PNG to create a reflection effect with the same effect in SVG. The SVG version uses only a few lines of code to produce what is a near identical effect.

Note: You’ll need the latest version of Safari to view most of these examples. It is available for both Windows and Mac.

PNG (64KB)	SVG (16KB)

Here is the source for the SVG file. You’ll see that it references JPG representation of our screenshot.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" onload="window.startup(evt);">
    <g widht="200" height="355">
        <image id="P"  x="0" y="0" width="200" height="224" xlink:href="screenshot.jpg" />
        <image mask="url(#reflection_mask)" id="P"  x="0" y="224" width="200" height="224" xlink:href="screenshot.jpg" transform="matrix(1 0 0 -1 0 671)" />
    </g>

    <defs>
        <mask id="reflection_mask" height="100%" width="100%" x="0" y="0">
            <rect x="0" y="0" width="100%" height="224" fill="url(#reflection_grad)"/>
        </mask>
        <linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="reflection_grad" gradientSpace="userSpaceOnUse">
            <stop offset="5%" stop-color="white" stop-opacity="1" />
            <stop offset="95%" stop-color="white" stop-opacity="0" />
        </linearGradient>
    </defs>
</svg>

And here is the code put into the HTML to draw the SVG:

    <object data="screenshot.svg" type="image/svg+xml" height="355" width="200">
        <img src="screenshot.jpg" height="355" width="200" alt="Application Screenshot" />
    </object>

All it takes is a simple object tag. If you like, you can include another image inside as a fallback if the user’s browser does not support SVG. On top of all this, you can include JavaScript in your SVG files, for adding in capabilities such as dynamic image loading and animation.

Lastly, don’t forget that you can create SVG graphics with Adobe Illustrator or other similar programs. These images are vector based, so the file sizes are especially small and they scale well for any environment.

See details on their announcement post.

Here’s what you do:

• Go signup for a Yahoo mail account.
• Setup filters in your GMail account to forward mail to your Yahoo account
• Create a new IMAP email account on your iPhone with the following settings:
  • EMail address: your gmail email address
  • Incoming server: imap.apple.mail.yahoo.com
  • Incoming user/pass: your yahoo username and password
  • Outgoing server: smtp.gmail.com
  • Outgoing user/pass: your gmail username and password

Here’s the idea. By forwarding to Yahoo mail with a filter, you’re able to weed out sent messages as well as any mailing lists or other email you don’t want going to your phone. Hint: you can negate items with a minus sign (From: -”my_mailing_list”). By using your gmail server as your SMTP server, your outgoing mail will still go through gmail, which means it will be from the proper address as well as being stored in your sent mail folder on you gmail account. Enjoy.

I’ve come up with a simple way to send anything you can print straight over to your iPhone. By harnessing Automator and OS X’s build in support for print workflows, we can automate the process of creating a PDF, compressing it, and emailing directly to our mobile devices.

The Workflow: Read on iPhone workflow

To install:

• Download and unzip the package linked above
• Double click the Read on iPhone.workflow file to open it in Automator
• Enter an email address you can access from your iPhone
• Choose File > Save as Plug-in…
• Choose a name for your workflow and choose Print Workflow from the pulldown
• Click save

That’s it. Now, to send something to your phone:

• Choose File > Print… from whatever app your document is in
• From the PDF pulldown at the bottom of the print dialog, choose your new print workflow

There are a lot of reasons to complain about their choice to not let us put “real” apps on the phone. But let’s try to get beyond that. Even if Apple will give us no more than lemons, let’s at least try to make the best lemonade possible.

I’ve been playing with some of the more unique aspects of Safari 3 for the last few days. It is a very capable browser. The JavaScript support is much improved over the last version. It can handle the canvas element, as well as SVG. It’s fully ACID2 compliant, and it’s really, really fast. I have no double that, even though we’re restricted to the browser, the community will be coming up with some really brilliant apps.

The biggest limitation, even more than the lack of Flash, seems to be the notoriously slow EDGE network Apple chose for it’s first generation of handsets. The biggest challenge when programming for this device, in my opinion, is going to be to make our apps as responsive as possible when the user is reaching them over the EDGE network.

On top of all that, I got through all my work email before I reached my office. I walked in, aware of what’s gone on this morning and ready to start working. My morning is much smoother, and I’m a very happy iPhone user.