Tutorials
iOS web apps (and iBooks Author HTML widgets)
Currently there aren't any tutorials available; however, Stark's (online) book gives a very good introduction to the development of web apps for iOS.
Syllabus for a workshop
Here are some ideas for an introductory workshop/tutorial on iOS web app development:
- contents:
- overview
- should present all possibilities to allow the development of project ideas
- present examples to illustrate these possibilities
- structure of the html file
- header
- scripts
- body with canvases and images
- development with Safari on Mac/PC
- error console
- mention: debugging
- mention: profiling
- mention: databases
- mention: error console in Safari on iPhone
- main functionality required for interactive graphical web apps:
- rendering into the canvas:
- drawImage (from image)
- mouse event handlers:
- single point events
- multiple touch events
- audio
- play, pause
- rendering into the canvas second part:
- scaling with drawImage
- copying parts of images with drawImage
- compositing mode, global alpha
- restore/save state
- (translate and) rotate an image with drawImage
- drawImage from a canvas (instead of an image)
- text rendering
- further functionality:
- local storage
- text input
- orientation events
- location information
- video and all other links
- rendering into the canvas:
- design issues
- what is different on a mobile device compared to a PC?
- guidelines for designing web apps
- structure of an offline web app
- html file
- manifest file
- additional files (images, sound)
- icon
- startup image
- hiding Safari user interface
- mention: CSS files
- overview
- possible projects:
- slide show with effects
- transitions (blend, move, blur, …)
- animations (zoom, snow, flickering stars, water reflections, …)
- paint programs
- color selection, brush, spray, smear, …
- copy region
- games
- puzzles
- multi-player board games
- arcade games
- slide show with effects
- other notes:
- animated GIFs work even with perspective transformations and drawImage
- this is remarkable because video streams cannot be rendered in a canvas nor in an HTML page; there are limitations even in native apps
- pyramid magnification allows for bilinear interpolation with drawImage by offsetting the destination area by 0.5 pixels
- apparently bilinear interpolation is not the default interpolation method; if it was, pyramid magnification would allow for biquadratic B-spline interpolation
- perspective CSS transformations don't work with Safari on Windows
- which makes it somewhat difficult to develop perspective CSS transformations with Safari on Windows; this is another reason not to discuss CSS at all in this course
- when developing avoid manifest files (because of the caching) and give every new version of the html file a different name (to avoid accessing cached, old versions)
- use low-resolution images (access to high-resolution images is significantly slower (at least when rotating and zooming))
- animated GIFs work even with perspective transformations and drawImage
page revision: 7, last edited: 08 May 2013 05:36