Always fresh new new things!

Archive for the ‘Rich Media Design’ Category

Web Content Development primer for iPhone [Part 2] : Media

without comments

[Find the Part 1 here.]

First obstacle you will face to develop content for iPhone – there is no Java or Adobe Flash support (not yet, but we can always hope).
In videos iPhone supports .mov, .mp4, .m4v, and .3gp. iPhone uses the native video player application to playback video when video is embedded in your webpages. Video automatically expands to the size of the screen and rotates when the user changes orientation. The controls automatically hide when they are not in use and appear when the user taps the screen.

Creating Video for iPhone

In landscape orientation, the iPhone screen is 480×320 pixels. Users can switch the view-mode between scaled-to-fit (letterboxed) and full-screen (centered and cropped). You should use a size that preserves the aspect ratio of your content and fits within a 480×360 rectangle. 480×360 is a good choice for 4:3 aspect ratio content and 480×270 is a good choice for widescreen content as it keeps the video sharp in full-screen view-mode. You can also use 640×360 or anamorphic 640×480 with pixel aspectratio tagging for widescreen content.

The following compression standards are supported:

  1. H.264 Baseline Profile Level 3.0 video, upto 640×480 at 30fps. Note that B frames are not supported in the Baseline profile.
  2. MPEG-4 Part2 video (Simple Profile)
  3. AAC-LC audio, upto 48kHz

The best tool to encode optimize videos for iPhone is Quick Time Pro, the iPhone video export is set as a default option there.

Creating a Reference Movie
A reference movie contains a list of movie URLs, each of which has a list of device sniffer. When opening the reference movie, a playback device or computer chooses one of the movie URLs by finding the last one that passes all its tests. Tests can check the capabilities of the device or computer and the speed of the network connection.

If you use Quick Time Pro to export your movies for iPhone, then you already have a reference movie. Otherwise, you can use the Make Ref Movie tool (Free) to create reference movies.

Embedding Movies in Web pages

iPhone does not decode video until the user enters movie playbac kmode. Consequently, when displaying a web page with embedded video, users see a ugly gray rectangle with a Quick Time logo until they press the Play button. To avoid this, use a poster JPEG as a preview of your movie. If you use Quick Time Pro to export your movies for iPhone, then a poster image is already created for you.)
For example, if you are using an <embed> HTML element, provide a preview image that is displayed in the web page by specifying the image for src, the movie for href, the media MIME type for type, and myself as the target:
<embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1"...>

Configuring Your Server

HTTP servers hosting media files for iPhone need to support byte-range requests, which iPhone uses to per form random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests.

If you are not sure whether your media server supports byte-range requests, you can open the Terminal application in Mac OS X and use the curl command-line tool to download a short segment from a file on the server:

curl --range 0-99 -o /dev/null

If the tool reports that it downloaded 100 bytes, the media server correctly handled the byte-range request.
If it downloads the entire file, you may need to update the media server.

Ensure that your HTTP server sends the correct MIME types for the movie filename extensions shown in Table

That’s all for media. Coming up next, primer for dynamic web content on iPhone.

[Cross posted at Macchiato]

Written by anol

December 29th, 2008 at 5:38 am

Web Content Development primer for iPhone [Part 1]

with 5 comments


At GetIT we are working on a web content development project for a client. The learning curve was steep, ’cause we never did mobile content development before and the resources are scattered all over the places. Here goes a primer of web content development for iPhone.

Quick Fix

iPhone’s Safari browser able to display the ‘real’ Internet, but you can make your site more accepting of the mobile browser. as a quick fix, add a <meta> tag that lets the iPhone know how wide to display the initial page.

<meta name=”viewport” content=”width=808” />

Every browser besides MobileSafari will ignore this information, apart from iPhone, it optimizes the viewport for your content. Since the iPhone displays the entire site zoomed out, specifying a viewport width means that the iPhone will zoom by default to that size, leaving less unused space around your content. In order to find the right width for your site, you’ll need to engage in a little old-fashioned trial and error.

Design web content ‘made for iPhone’

The safest way to start is to download a framework / webkit and design/code around that. Here are few useful ones:

  1. iui : User Interface (UI) Library for Safari development on iPhone, download from Google Codes. Based on Joe Hewitt’s iPhone navigation work, iUI has the following features:

    1. Create Navigational Menus and iPhone interfaces from standard HTML
    2. Use or knowledge of JavaScript is not required to create basic iPhone pages
    3. Ability to handle phone orientation changes
    4. Provide a more “iPhone-like” experience to Web apps (on or off the iPhone)
    5. Download the 0.13 release from the Downloads page.
  2. UiUIKit (Universal iPhone UI Kit) : My favorite! It’s a collection of HTML examples of what can be done with CSS3 and Safari’s Webkit. The framework is based on 1 stylesheet and several HTML examples, also, it contains original artwork so you can edit them in Adobe Photoshop CS and adapt it to your projects. Download UiUIKit-2.1
  3. jPint : If you want your iPhone web content to look very similar to an app, use this. Only problem, everything needed to be on one page, i.e. not suitable for multi page content and not scalable. Download jPint from here.
  4. iWebKit: iWebKit is great because it is very easy to use, extremely fast, compatible & extendable. It is simple html that anyone can edit contrary to some other more complicated solutions based on ajax. Simplicity is the key! Only problem – when user press the Safari back button, the screen shows a blank page. Little bug – big consequence! Download iWebKitv 3.01

Test your iPhone Content

To try out your iPhone content use iPhoney. iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s the perfect 320 by 480-pixel canvas for your iPhone development. And it’s free. iPhoney is not an iPhone simulator but instead is designed for web developers who want to create 320 by 480 (or 480 by 320) websites for use with iPhone. For more accurate depiction, use iPhone Simulator by Apple, which comes free with the iPhone SDK (free, but registration required).

Redirection for iPhone Friendly version
If you want your users to be redirected without any message add this to the head section of your homepage:

<script language=javascript> <!– if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {location.replace("iphone-version.html");}–> </script>

Make an webclip-icon for the content
when you click on the + sign in safari you can bookmark your page on the homescreen of your device. To create a webclip icon you need a a square PNG file that is at least 57×57 pixels of size. You don’t need to make it rounded. It will automaticly be resized on te ipod. Call the PNG file apple-touch-icon.png and put it in the root of the website with the index.html file. If you need to override the bookmark on a specific page, Use a different icon for a specific page, it’s possible by placing a rel link between the “head” tags of that page like this:
<link rel="apple-touch-icon" href="[ICONNAME].png"/>

That’s all for this round. In Part II I will discuss about

  1. Media contents
  2. Integrating with native iPhone apps
  3. Blog for iPhone and more

Stay tuned..

More resources:

  1. CSS iPhone Gallery for iPhone design inspirations.
  2. Put Your Content in My Pocket by Craig Hockenberry at A List Apart; (Part II)
  3. Apple—Developer Section
  4.—A resource for more advanced information on the iPhone.
  5. John Allsopp’s CSS3 support on iPhone
  6. The iPhoneWebDev Google Group

[Cross posted from my company blog]

Written by anol

December 19th, 2008 at 5:28 am

Introduction to Media Design with the Adobe Creative Suite

without comments


Digital Foundations: Introduction to Media Design with the Adobe Creative Suite integrates the formal principles of the Bauhaus Basic Course into an introduction to digital media production with the Adobe Creative Suite.

Textbooks and software manuals on today’s market do not include art and design history or visual principles. This book synthesizes historical examples and traditional studio foundation exercises into smart, well-paced software exercises.

The book is in print with a Creative Commons license. This is a first for AIGA Design Press, New Riders, and Peachpit, and the result of 9 months of negotiation. The whole book was written on a wiki and that is all available for use under a CC license.
Via : BoingBoing

Written by anol

December 19th, 2008 at 3:02 am

Awesome Data visualization Aesthetics : I Want You To Want Me

without comments

Jonathan Harris’s & Sep Kamvar’s most recent visualization project "I want you to want me", explores the search for love and self in the world of online dating. Created for the Design and the Elastic Mind exhibition at MoMA.

I Want You To Want Me chronicles the world’s long-term relationship with romance, across all ages, genders, and sexualities, gathering new data from a variety of online dating sites every few hours.  The system searches these sites for certain phrases, which it then collects and stores in a database.  These phrases, taken out of context, provide partial glimpses into people’s private lives.  Simultaneously, the system forms an evolving zeitgeist of dating, tracking the most popular first dates, turn-ons, desires, self-descriptions and interests.

The data is presented as an interactive installation, displayed on a 56” high-resolution touch screen, hung vertically on a wall in a dark room.  On screen is an interactive sky, whose weather (sunny, cloudy, rainy, snowy, etc.) can be controlled by the viewer.  Through the sky float hundreds of blue (male) and pink (female) balloons, each representing a single dating profile.  The brighter balloons are younger people; the darker balloons older.  Trapped inside each balloon is one of over 500 video silhouettes, showing a solitary person, engaged in any number of activities (yoga, jumping jacks, nose-picking, air guitar, etc.).  The viewer can touch any balloon to select it, causing its photo to dangle from a string and its sentence to appear in a thought bubble overhead.  Touching any balloon a second time pops it.  The balloons move through the sky along different paths and at different speeds, bumping up against each other, sometimes traveling together for a time, but only ever getting so close, as each silhouette is ultimately confined to its own balloon.

Written by anol

April 22nd, 2008 at 7:12 am

Typography primer and more

without comments

David Chen at Always Watching complied a great post on Typography, especially usage of Typography in motion to convey complex emotions of spoken words, taking famous movie monologues and dialogues  for example.

But first a great Typography primer directed and animated by Boca and Ryan Uhrich


Watch all other ‘typography in motion’ at Always Watching

Written by anol

March 24th, 2008 at 9:25 am

Posted in Rich Media Design