Keynote by Sheve Hayman
- Talk about some demo iphone native web apps.
- iPhone capabilities:
1. Flipping (is hardware accelerated transformation)
2. Location sensing capabilities
3. In HTML5, browsers can figure this out
4. You can now write apps that work in airplane mode (i.e., offline mode). This is because of cache features in HTML5. This reduces the difference between native and web apps
5. Dashcode provides capabilities for building powerful iphone based webapps. Though you could Vim and emacs for the same. It provides some blank project templates.
- The widgets displayed are a combination of HTML and javascript.
- One of the great things in Dashcode is the concept of datasource, using which you can read data from a url (xml, text or anything else) and it presents it
- The beauty of Dashcode is that, you can build a desktop version of the same app you make for iPhone using Dashcode.
- Reference: Watch the developer conference video (45 mins) of Apple developer connection, where a guy builds a desktop app using Dashcode.
- Making of mobile safari web app to display a list of movies present at a remote url. Display of a premade app with lots of other details
- Making of mobile safari web app for Wolfram Alpha search engine using Dashcode, how to plugin some js to send a query text to wolfram and how to display the results(from the remote xml datasource).
6. Example of well made web apps for iPhone
- m.mit.edu (mit mobile web app even shows where the bus actually is on a webapp by using the GPS of the bus).
- m.uiowa.edu (speaker's favorite) - you even get the live status of the laundry after picking the dorm you live in. They linked the coin placed status with their xml api.
6. Examples of Native apps
- Stanford university has it's native web app called iStanford (apps.stanford.edu). Could be downloaded from AppStore. Stanford even has a class on iPhone programming. This course material is available on iPhoneU.
7. Native applications how to build
- Xcode and InterfaceBuilder is the primary tool
- Note: You cannot use the iPhone simulator to run something on the AppStore.
- Libraries that accelerate the iPhone app development - iPhone SDK, 3.0 is the latest.
- Example App; ZipCar rents cars in SanFrancisco.
- Push notifications - gives a server to send notifications and then receive on an update that the end user has received it. It tracks down the user's phone and sends the notification.
- New Features in 3.0 SDK and iPhone capabilities
- cut, copy and paste
- camera
- Silver ring around the camera lens is the GPS
- 4 radios
- Accelerometer (device that detects force). It can provide updates on the iphone's orientation 30 times a second. Demo: an app that shows the amount of time the phone is in the air, when you throw it in the air, games that use tilting the device to drive vehicles, throw/move balls etc.
- Demo of an app(Sudoku Grab) using which you take a pic of the sudoku puzzle on the newspaper using the camera. It uses the OCR capabilities of iphone SDK to read the letters. It provides you with buttons which provide hints to solve the puzzle by filling in some letters, much better it provide a 'solve' button on clicking it the sudoku is solved for you.
- Core location: returns information on where you are located.
- There is a compass/magnetometer in the new iphone 3GS, which gives you capabilities to detect which way you are facing. Using this you can change the view based on which way your iphone is pointed.
- Making of an iPhone app which acts as a flash light. It's an object-C program with a single window, which turns on the display to show light(a window with white color), adding a method called turn off, using which you can turn off(close the app or turn the background to black).
- There are 2 files - a header file with the .h extension and a .m extension file which has the methods.
- Events that you can use (on tap, on double click etc)
- Ball State University has an app which makes the typical ball state sound(bird sound) on tap and when you shake it. So you can use it make sounds at the game, for fun. They have some buttons to play the ballstate university song, behind the app there is a way to see a list of games
- Making of an iPhone native app using Xcode - to show the iU logo, title song lyrics and play the IU song on the click of a button. On clicking the button it sends a message to the delegate object to play the sound.
- Create an object of type AVAudio and an object of type AVAudioPlayer which plays the mp3 song.
- MapKit framework - you can add a map to your app using this.
- You need a special digital certificate from Apple, in order to make an app installable on your phone. (costs about 99$).
Track 2: Web Development
Making your web sites iPhone friendly by Chris Patterson, LaViaz, LLC
- Worldwide there are 1.6 billion with mobile web devices compared to 1.1 billion people with connected desktop computers
- Mobile Safari accounts for 50% of all mobile web traffic.
- 2 strategies (depending on your situation)
- adapt the existing site by applyng css specific to mobile safari
- create an entirely new site.
Adapting an existing site
Do
- ensure your site is valid (x)html
- use css for styles and layout
- use column based layouts instead of tables
- Stick to basic fonts. MobileSafari has some basic font set currently
- Use large tap targets -- 44px min. Finger is not a pointer, so don't make a site full of linksDont
- Use Flash, Java applets or browser plugins (HTML5 is in the future)
- Use <font>,<b>,<i> tage for style or <br> <table> tags for layout.
- Use iframes or scrolling divs. Instead let the whole page roll
- Use rollovers. On desktop they make the site more interactive but on mobile they don't. Fingers don't roll.Targeting mobile safari
- Use the viewport meta tag to tell MobileSafari to fit the page width to screen
<meta name='viewport' content='width-device-width' />
- Use css3 media selector to target MobileSafari
<link media='only screen and (max-device-width: 480px)' href='iphone.css' type='tex/css' rel='stylesheet' />
or you could use:
@media only screen and max-device-width: 480px)
- Lots of options see Apple Documentation.
- Detect MobileSafari User-Agent value: test for both 'mobile' and 'safari'
Creating a Custom Site
Pros:
- Provides the most iphone-like experience
- Great tools are available
Cons:
- You have to maintain 2 sites
- Targeting a specific mobile device may be limiting.
Redirect to mobilesafari
-on the server detect mobilesafari user-agent and then redirect the browser to the iphone url.
- again check for both 'mobile' and 'safari' in the server user-agent information.
Free tools
- Dashcode
- Safari Web inspector
-Firefox, firebug
- IUI (provides a small javascript library about 20kb)
- jQuery + jQTouch (author likes it)
Image editing tools
- Photoshop
- Fireworks
- OmniGraffle with iPhone stencils
- iPhone_GUI.psd (photoshop template that has the iPhone elements)
- Gimp, Gimpshop, Seashore
- Pixelmator
Dashcode for MobileSafari
- Full-featured drag and drop IDE
* Demo of MobileSafari app development using Dashcode.
- Stack layout object does most of heavy lifting. Instead of using the javascript datasource, you can use a javascript method to read content or data from a remote datasource.
Comments (0)
Leave a comment...