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))
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License