iPhoneized » How-To

Building iPhone Apps with HTML, CSS, and JavaScript

Chris — Mon, 12 Oct 2009 17:01:53 +0000

Jonathan Stark, a mobile and web application developer, has released his book titled ‘Building iPhone Apps with HTML, CSS, and JavaScript’, online under Creative Commons Attribution-Noncommercial license.

Book Description:

Now web designers and developers can join the iPhone app party without having to learn Cocoa’s Objective-C programming language. It’s true: You can write iPhone apps quickly and efficiently using your existing skills with HTML, CSS, and JavaScript. This book shows you how with lots of detailed examples, step-by-step instructions, and hands-on exercises.

Learn how to build iPhone apps with standard web tools
Refactor a traditional website into an iPhone web app
Hook into advanced iPhone features (e.g. accelerometer, geolocation, vibration, and sound) with JavaScript
Do most of your development with the operating system of your choice

You can read the entire book online or purchase pre-order it at Oreilly.com

3D Cube using CSS transformations

Chris — Fri, 08 May 2009 17:58:01 +0000

Paul Hayes shows us how to create three dimensional cubes without javascript, Canvas or SVG. Using straight CSS, he’s designed some pretty slick 3D cubes.

The method is only supported in recent WebKit and Gecko based browsers, but here’s a comparison:

In unsupported browser:

In a supported browser:

Check out the full post here

iPhone Optimized Video from FLV Fast with Freeway

Chris — Thu, 09 Apr 2009 01:21:00 +0000

With just a few clicks you can easily convert flash video to iPhone optimized video using Freeway.

This tool will do the conversion for you on the fly, gives you the choice between Edge and/or WiFi-3G versions, and even generates the poster board for you.

You start by either purchasing Freeway, or download a free trial first. The software is Mac only, and is a very popular WYSIWYG for web designers.

Step 1: After you’ve got Freeway up and running, open a page and embed a flash movie. Do this by choosing the actions menu, then FLV player.

Step 2: With the FLV player object selected, choose Window>Actions from the file menu.

Step 3: Choose your flash video file to embed, then select the iPhone compatibility checkbox.

Step 4: At this point you have the option to generate either .m4v (for WiFi and 3G networks) or .3GP for the slightly slower Edge network. You can also generate both!

Step 5: The last step is choosing the poster frame. By default the poster frame select is set to Automatic. Change this to select and go to the same folder where your newly generated video is stored. Select the png that was generated for the video.

Now all that’s left is to test it in a mobile safari browser. Either use your iPhone/iPod touch, or use one of the other methods mentioned here and here.

Source: Softpress

Tip: Embed iPhone Optimized Video on Your Website

Chris — Fri, 03 Apr 2009 01:42:50 +0000

If you ever wanted to know how to embed iPhone optimized video on your site, Creative Tech Tips has a great post that shows you just how easy it is. With a copy of QuickTime Pro ($30) and a little HTML knowledge you can have iPhone optimized video on your site in 5 easy steps.

Check out the post here

Get QuickTime Pro here

Helpful Tip: Use Safari to Render Sites as iPhone Agent

Chris — Fri, 20 Mar 2009 00:22:09 +0000

Testing iPhone specific websites as you design them has always been sort of a pain. You had to either use an iPhone emulator or FTP the files and test it on your own iPhone. Well those days are over.

Thanks to the guys over at CreativeTechTips.com, I can now use Safari to render any site as an iPhone. You can do this in 4 easy steps.

Step 1

Open the site you wish to see iPhoneized

Step 2

Open Safari Preferences, go to the Advanced Tab, Check Show Develop menu

Step 3

open File Menu>Develop>User Agent>iPhone

Step 4

Check out how sites will render in an iPhone

Original Post here

Create a Very Cool RSS Reader for the iPhone

Chris — Fri, 06 Mar 2009 14:15:17 +0000

Chris Coyier has posted a very cool how-to over on CSS-Tricks that walks you through the creation of a simple and very cool RSS reader optimized for the iPhone. Using some simple CSS, jQuery and SimplePie (an RSS “grabber”), you can grab any feed (or multiple feeds) and present them to your iPhone readers.

View the DEMO

Read the ARTICLE