Mobile Design & Development Workshop Assets

Files and resources used in my mobile workshops

Melbourne Workshop

We began to create a simple event tool, but were unable to get through all of it in the time we had.

• EventApp (source-code)

Sydney Workshop

We created a simple Twitter search tool, that displays our predefined search topics.

• TwitBack (source-code)

Example Apps

Viewable on an iPhone, iPod touch or the iPhone Simulator.

• Layers App also works with Opera Mobile (source-code). Used in the cover story of the May 2009 edition of Layers Magazine.
• Mobile 2.0 App (source-code) used as an example app for the Mobile 2.0 event.
• jQTouch Demo (source-code)
• Cheep (coming soon)

Apple Examples

Viewable on an iPhone, iPod touch or the iPhone Simulator. Code and documentation available from Safari DevCenter.

• iPhoneButtons example iPhone buttons in HTML.
• iSudoku simple example of a mobile web game.
• SimpleBrowser using CSS transforms, recreate the native drill down effect.
• CardFlip a simple CSS Transform.
• PosterCircle spinning HTML elements using CSS Transforms.
• Leaves falling leaves using CSS Transforms.
• Finger Tips the beauty of CSS Transforms.

Libraries

Handy tools for creating mobile web apps.

• Mobile Design Framework mobile design toolkit I'm working on with a the folks from jQTouch, PhoneGap and others.
• jQTouch a handy iPhone Web App library built on jQuery.
• iUI an iPhone Web App library.
• PhoneGap a tool for building native app wrappers for your Mobile Web Apps.
• iPhone UI PSD a Photoshop library of common iPhone interface elements.
• iPhone CSS Tests handy matrix of what the iPhone supports.
• Fixed positioning in Mobile Safari allows for a fixed footer.
• Scrolling div on iPhone/iPod Touch a better fixed positioning script for Mobile Safari.
• Multitouch in Mobile Safari virtual light table using Javascript and CSS Transforms.

Device Detection Scripts

PHP scripts that help you detect and route devices to the right places.

• Andy Moore's Device Detection Script for PHP detect mobile user agents.
• Detecting Mobile Browsers Script appears to be a slightly better device detection script.

Device Databases

Device databases that contain a lot of user agents.

• WURFL open-source device database.
• Device Atlas premium device detection API.

Video Demos

A few video demos of some of the above I use in my talks.

• CSS Transforms using the Apple example from above.
• Fixed Positioned Footer using the Fixed footer script above.
• Multitouch Demo using the Lighttable script above.
• Building a Native iPhone app from a Web App using PhoneGap in 20 seconds.

Web Tools

A few tools to help get the job done.

• SimplePie dead simple XML parser for PHP. Allows us to create simple mobile apps from external data.
• Yahoo! Pipes useful to working with external data that we can import into a simple app.

Software Used

The software I used in my workshops.

• iPhone Simulator included in the free iPhone software development kit, but you will need a Mac. (Tip: create a sample one-click app in Dashcode, run it, which will open the Simulator. Then control+click in the dock to reveal in Finder. Add an alias to the Simulator to your Applications folder for easy launching next time.)
• Dashcode included in the free iPhone software development kit, but you will need a Mac.
• Opera using the small screen option for lowest common denominator preview.
• Safari 4 Beta for desktop preview.
• TextMate for markup and javascript.
• CSSEdit for styles.
• xScope for fine tuning.

About Me

• I'm Brian Fling, I am an author and speaker about mobile design and development.
• pinch/zoom my agency that focuses on mobile and web apps.
• O'Reilly Design & Development my book, due out in August.
• flingLog my blog where I post interesting stuff.
• Mobile Design mobile community that I manage.
• Six Sites my idea blog.
• Twitter my whatever Twitter is.
• Facebook my personal network.
• LinkedIn my professional network.
• Flickr my photos, if you are interested.
• Slideshare many of my past presentations and workshops.

• Oh, and you can call me too...