Ingredients

  • HTML5

  • JavaScript

  • JSON

  • JSONP

  • localStorage

  • navigator.geolocation

  • RSS

  • XML

  • YQL

Grades

Your work on this project will be evaluated along four primary axes.

  • Correctness. To what extent is your code consistent with our specifications and free of bugs?

  • Design. To what extent is your code written well (i.e., clearly, efficiently, elegantly, and/or logically)?

  • Scope. To what extent does your code implement the features required by our specification?

  • Style. To what extent is your code readable (i.e., commented and indented with variables aptly named)?

Getting Started

  • Let’s first dive into HTML5 by having you curl up with a free book. Spend some time with http://diveintohtml5.info/. You should find that it’s an easy read and provides a nice overview of HTML5. Rest assured that you won’t need to leverage all of HTML5’s features for this or future projects, so it’s probably okay to skim any sections that don’t really interest you!

  • Next curl up with another free book, this one at http://ofps.oreilly.com/titles/9780596805784/. (Agreed, the first book had a cooler URL.) This book focuses rather specifically on building web apps for iPhones, but you should find that its lessons apply to most any Webkit-based browser. This book, too, is worth reading (or skimming!) in its entirety, but, at a minimum, read chapters 1 through 5.

  • If new to JavaScript, you might also like to read over https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide.

  • For this project and others, it’s ideal to install on your desktop or laptop the latest versions of:

    And no worries if you don’t yet have (access to) a Mac for this project. Installing at least one of Google Chrome and Safari suffices for this project.

    Be sure, though, that your project indeed renders and behaves properly in a Webkit-based browser before you submit.

  • If you don’t already have access to a web server (locally or remotely), go ahead and install XAMPP, per the directions at http://www.apachefriends.org/en/xampp.html. After starting Apache, per XAMPP’s directions, try visiting http://localhost/. You should be greeted by XAMPP’s default home page. You can then start creating files of your own for XAMPP to serve up.

    • If running Mac OS, open the XAMPP folder in your Applications folder and then open the htdocs folder within. Create a folder called, say, project, and then open it. With your favorite text editor, create a super-simple web page (in HTML5) called index.html and save it in that project folder. (If unfamiliar, popular text editors include Sublime Text and TextWrangler. But you’re welcome to use TextEdit, which can be found in Applications; just be sure to save files as "plain text", as via Format > Make Plain Text.) You can then visit that page at http://localhost/project/index.html or, more simply, http://localhost/project/.

    • If running Linux or Windows, best to follow XAMPP’s own directions on where to create and how to access files of your own.

    Once you’ve a web server up and running on your computer, you should be able to access it via a browser on an iPhone or iPod touch as well, provided your computer and the iOS device are on the same network (without any firewalls in the way).

    • If running Mac OS, look up your computer’s IP address via System Preferences > Network; it will be of the form w.x.y.z, where each of w, x, y, and z are numbers. Then try visiting http://w.x.y.z/~username/ via your iOS device.

    • If running Linux or Windows, the steps will be a bit different. We leave it to you to explore!

RSS

YQL

  • If unfamiliar with browsers' same-origin policies, head to http://en.wikipedia.org/wiki/Same_origin_policy to read up on those. If unfamiliar with JSON or JSONP, head to http://en.wikipedia.org/wiki/JSON to read up on those subjects as well. In a nutshell, JSONP enables you to integrate data from one domain into a DOM whose HTML was served up by another domain.

  • If unfamiliar with Yahoo! Query Language (YQL), head to http://developer.yahoo.com/yql/ to read up on that subject too. In a nutshell, YQL allows you to retrieve data from Yahoo and webservers more generally in machine-readable formats, namely XML and JSON. In fact, head to YQL’s console at http://developer.yahoo.com/yql/console/, replace

    show tables

    under YOUR YQL STATEMENT with

    select * from rss where url = 'http://news.google.com/news?geo=02138&output=rss'

    and then click TEST. After retrieving that URL, Yahoo will present the items within in its own XML format. Hm, that doesn’t feel like much progress, since RSS is already XML. Let’s do one better: this time around, select JSON instead of XML (the default) to the left of TEST, then click TEST once more. Yahoo will now present that same news as JSON, padded by a callback function called cbfunc by default. In other words, it appears that you can convert RSS to JSONP via this YQL service. In fact, you don’t need the console at all. Notice that, beneath THE REST QUERY, is a long URL like the below.

    Encoded within that URL is the query you typed. If you visit that URL in a browser, you should see the raw JSONP, without the console’s GUI around it. Bit of a mess, eh? That’s because, to save bytes, the service only pretty-prints its output with indentation and whitespace when you’re using the console.

    Interesting, eh?

Geocoding

  • Whereas geolocating involves finding a real-world object’s geographic coordinates, geocoding involves converting a string (e.g., a zip code or city and state) to geographic coordinates. Exactly where in the world is a place like Cambridge, MA? The Google Geocoding API knows! If unfamiliar, read up on the service at https://developers.google.com/maps/documentation/geocoding/. Notice that the API can return answers to you as XML or JSON (though not JSONP). And the API can also reverse-geocode, in case you have some coordinates and want to find out the corresponding zip code or city and state.

    Also interesting, eh? So many interesting (and free!) services out thereā€¦

Specification

Your mission for this project is to implement Mobile Local, a mobile web app with which users can check local news and weather. The overall design and aesthetics of this app are ultimately up to you, but we require that your app meet some requirements. All other details are left to your own creativity and interpretation.

Features

  • Your app’s UI should be designed for an iPhone or iPod touch whose width is defined by device-width; its actual resolution might be anywhere from 320×480 to 640×1136.

  • Your app must present users with an HTML form into which they can input a zip code or a city and state. Upon submitting that form, users should be shown a weather forecast for that locale as well as a list of links to recent news articles about that locale. For each link, it suffices to display the article’s title, though you may also include its description or a portion thereof. Exactly how many links to show is up to you to decide.

  • Your app must provide users with a button or link via which they can provide a locale via geolocation so that they can see weather and news for their current location without typing anything.

  • Your app must remind users of their most recent searches, if any, by way of a list of clickable buttons or links so that they can re-check some locale’s weather and news with a single touch. Exactly how many searches to show is up to you to decide, as is whether to include searches triggered by geolocation.

Implementation Details

  • The entry point to your app should be a file called index.html. Code that you write may live within that file or external JavaScript and/or CSS files.

  • You must use Google News for your news.

  • You must use YQL to convert RSS from Google News to JSONP.

  • You must use the Google Geocoding API as needed to convert geographic coordinates to zip codes or cities and states.

  • We leave it to you to find a weather service whose data you can integrate into your app. You are welcome to discuss options with classmates.

  • You may not embed weather and news in your app via iframes; you must integrate services' data into your app’s own DOM.

  • Your app must depend only on third-party services, not on any server-side scripts of your own. Any code that you yourself write must be client-side JavaScript. Accordingly, you must intercept submissions of your app’s form and handle users' input with Ajax.

  • You must use localStorage to store users' recent locales.

  • You are encouraged, but not required, to integrate jQuery into your app, particularly since it facilitates use of JSONP, per http://api.jquery.com/jQuery.getJSON/. You are encouraged, but not required, to integrate jQuery Mobile or Sencha Touch into your app. Use of any other JavaScript libraries must be approved by a member of the staff via email.

  • Your HTML must be valid HTML5 per http://validator.w3.org/, but your CSS does not need to be valid per http://jigsaw.w3.org/css-validator/.

  • Your CSS and JavaScript must not be minified.

  • Under no circumstances should we be able to trigger runtime errors in your JavaScript code. Be sure that you handle unwanted inputs and HTTP failures elegantly, as by reporting such errors or silently handling. Under no circumstances should your code trigger errors in Webkit’s own console.