Archive for the ‘Tech and Tools’ Category
Here are the contents:
1. Introduction to being a site admin
2. Changing your site defaults
3. Your blog theme options
—3a. Changing what themes are available sitewide
—3b. Changing what themes are available on a per blog basis
4.Editing your site options
—4a. Standard site options
—4b. Premium site option
5. Site admin tools
6. Working with blogs
7. Working with usernames
8. Configuring Supporter (PayPal upgrades)
Stanford University is now offering an entire course (iTunes link) in iPhone development through Apple’s iTunes store, absolutely free. The only cost will be the $99 iPhone Development Program fee (if you aren’t already a registered developer).
Tools and API’s required to build applications for the iPhone platform using the iPhone SDK. User interface designs for mobile devices and unique user interactions using multi-touch technologies. Object oriented design and using model-view-controller pattern, memory management and more…
The course, the first installment of which is available now, is aimed at students who already have a basic familiarity with programming languages like C+ and C++, so if you were hoping to go in blind and come out with a game in the same league as something from ngmoco, you might want to consider heading back to school for that CS degree you always regretted not getting. That said, the course might prove very beneficial if you already have some development experience but haven’t felt brave enough to venture into the realm of Cocoa Touch.
Via: The Apple Blog
Slides from the SXSWi presentation with Nick Finck, Donna Spencer, and Michael from KONIGI. The slides cover our introductory overview of wireframes.
Related post: Konigi and Yahoo! Web UI Wireframe Stencil Kits for Omnigraffle
[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:
- H.264 Baseline Profile Level 3.0 video, upto 640×480 at 30fps. Note that B frames are not supported in the Baseline profile.
- MPEG-4 Part2 video (Simple Profile)
- 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 http://example.com/test.mov -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]
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.
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:
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:
- Create Navigational Menus and iPhone interfaces from standard HTML
- Ability to handle phone orientation changes
- Provide a more “iPhone-like” experience to Web apps (on or off the iPhone)
- Download the 0.13 release from the Downloads page.
- 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
- 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.
- 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:
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
- Media contents
- Integrating with native iPhone apps
- Blog for iPhone and more
- CSS iPhone Gallery for iPhone design inspirations.
- Put Your Content in My Pocket by Craig Hockenberry at A List Apart; (Part II)
- Apple—Developer Section
- iPhoneWebDev.com—A resource for more advanced information on the iPhone.
- John Allsopp’s CSS3 support on iPhone
- The iPhoneWebDev Google Group
[Cross posted from my company blog]