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
  • 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
• 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
• 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))