Question:

a) The following is a description of the navigation options in a mobile web site which provides public bus time slots for a city. It is an interesting service for mobile web users who need to take buses especially when they are not sure when they will arrive.

When you first enter the site, a welcome page appears with a Begin link. After that, you have to choose from a list which bus line you want to query. Then you see a list of final stops for that line, to select your orientation. After selecting your orientation, you have to choose the stop or station where you want to get on the bus. There is a list of around 100 addresses, ordered alphabetically. If you don't know the street name for the stop you want, you will need to make an average of 25 clicks to find the right one.

Once you have found your stop, you need to select whether you want a normal bus or a bus with air-conditioning support. Finally, the service informs you when the next two buses will be arriving. You have to navigate through six pages and choose from a 100 item list to get the result. i) Identify any two navigation problems in this mobile web site, and also propose appropriate solution(s) for each.

ii) In the city for which this system is provided, during peak hours, the buses have a short delay time. Then, what could be the context of this web site?

b) You have been asked to adapt this system for the Mauritian context, and it shall be available on smartphones and tablets. Answer the following questions:

i) Which Web layout pattern would you consider to be more appropriate? Justify your answer.

ii) How are you going to provide automatic size adaptation using CSS3 media queries? You may write down the skeleton css stylesheet for media queries. Clearly mark any assumptions you make.

iii) Write the javascript code you can use to get the location of the user through the W3C geolocation API.

iv) How are you going to display the map centered on the user's location, with a marker (label:X) at a given coordinate assigned to the variables ‘marker_lat' and ‘marker_long'. You may consider using the Google Map API V2.