CS2550 Web Programming I
Study Guide for Test 3

The third (and last) test will cover the topics listed below. The format will be similar to the first two tests, with about thirty to forty multiple-choice, true/false, and fill-in-the-blank questions.

To study for the test you should review the lesson notes and the reading assignments for each lesson. Below is a list of topics that you should know for the test. This list is meant to be helpful, but it isn't an exhaustive list.

Lesson 9--Ajax

Lesson 10--Web Storage and Cookies

Lesson 11--XML and JSON

Wikipedia XML article
json.org
The last part of my Ajax demo (Synchronous POST) shows an example of using JSON.parse(), and Assignment 6 has a link to a short XML example based on sample code from the 5th edition of JS:TDG.

Lesson 12--HTML5 Media

about.com on HTML5 video formats
http://webdesign.about.com/od/video/a/html5-video-formats.htm
--According to this web page, Chrome and Android are the only browsers that can use all three of the codecs that are most commonly used with HTML5 media), but recent versions of Chrome (and probably Android) will not play H.264 video without a plug-in.
--This page also has some good comments about Flash video (FLV) versus HTML5 video.

diveintohtml5.info Video on the Web
http://diveintohtml5.info/video.html
This chapter of Dive into HTML 5 has information about the various containers and codecs, including software that can be used to convert from one format to another.

Lesson 12--Canvas graphics

Canvas tutorial
http://developer.mozilla.org/en/Canvas_tutorial
This is a very good tutorial on using the HTML 5 canvas element. It also includes some links to other good web sites.

http://www.canvasdemos.com/
This is a good web site for seeing what is possible with HTML 5 and the canvas element.

http://visitmix.com/labs/ai2canvas/
This is a web site where you can download a plug-in that exports Adobe Illustrator documents to code that can be used with an HTML 5 canvas element.

Section 21.3 of JS:TDG talks about SVG. The only thing you need to know about SVG for this term (Fall 2011) is the difference between vector graphics and bitmap images.

Lesson 13--Mobile Browsing and offline web applications

Rethinking the Mobile Web by Yiibu

Some of the main points from "Rethinking the Mobile Web":

• number of mobile Internet users today: 1.3 billion
• 1/3 of global Internet users access the Internet only via mobile devices
• iPhones (and smart phones) are not the only phones used to access the Internet
• Webkit is not the only browser used on phones: Opera Mini, Nokia, UC (China), NetFront, Fennec (Firefox), ovi, etc.
• proxy browsers
• The "first @media query" is lack of support for media queries. In other words, using @media queries is not helpful for phones that don't support them. You should assume that they are not supported, and then adjust if they are.

Options for designing web sites to accomodate mobile browsers:
Guidelines from "Rethinking the Mobile Web"
  1. "mobile first" http://www.lukew.com/ff/entry.asp?933
    traditional: full desktop site + @media queries = mobile site
    problem: @media queries fail on many phones
    mobile first: mobile site + @media queries = full desktop site
  2. "Use well structured, meaningful markup"
    Examples:
    well-sructured: li vs. div
    meaningful: descriptive id attributes
  3. "the absence of support for @media queries is in fact the first @media query"
  4. "progressively enhance using JavaScript and @media queries"
    "use CSS instead of JavaScript for animations"
  5. "adapt content (especially images) appropriately for each device"
  6. "compress content where possible, and avoid sending unnecessary data"
    "display:none still loads resources"

Make sure you understand what media queries are and how they relate to CSS and mobile browsers.

Application cache for offline web-apps
http://diveintohtml5.info/offline.html
This part of Dive into HTML 5 has information about offline applications.

Lesson 14--Frameworks

Lesson 15--Server-Side Scripts and Databases