Introduction

There are two major ways of consuming content on the web: you either use your browser to visit a website or you can directly "talk" to the site and ask for specific information using something called API (application programming interfaces).

This teaching activity is a part of the Creating for the Modern Web Teaching Kit and it will explore the second method to guide learners through a process of creating a complete web app that talks to other websites and combines the information it receives to create a web mashup. Learners will achieve this by using HTML, CSS, JavaScript and external web APIs.

Screenshot of the finished web app
The finished web app

The activity can take up to an hour and a half and requires basic overview of HTML, CSS and JavaScript. Quite a few concepts will be covered:

  • Some basic HTML and CSS
  • JavaScript and AJAX (which is pretty much just HTML, CSS and JavaScript working together)
  • JSON -- a format used for transferring information on the web
  • Signing up for an API key (which you need to be able to make an API call)
  • And of course -- making API calls

Becasue of its length, the activity is broken up into three parts:

  • In this part, learners will create basic layout for the app with HTML and CSS.
  • In the second part, they will learn about and sign up for API keys.
  • And finally, in the third part they will write the code powering the app.

Steps for the Activity

  1. Before you begin working on the web app, ask the participants what they think is the difference between a website and a web app. Write down some examples on the board and separate them into two columns -- one for websites and one for web apps. Are there any sites where it's hard to decide to which column they belong?

    The best example of a website would be any news site. Google Docs is a good example of a web app. What about Facebook? It is a website, but it has many dynamic functions and can sometimes feel like an app.

  2. In the first part of this activity the participants will create a basic layout for their web app.

    If your learners have a good overview of CSS, you can make this an open ended task so that the participants can themselves decide how the app will be structured.

    It is a good idea then to sketch out a wireframe with pen and paper first. Participants can use the finished app as an inspiration for the layout and functionality.

  3. When the learners are ready, ask them to open a new thimble. They can start by changing the title to something descriptive

    <title>Weather Web App</title>
  4. Next they can replace the content of the <body> with:

    <section>
      <h1>Weather Web App</h1>      
      <p>by LEARNERSNAME</p>
    </section>
  5. The h1 header will hold the name of the city in which the user is located. The paragraph underneath will show the current temperature and weather conditions. To let JavaScript do these changes, we will need to mark parts of the documents with IDs.

    <section>
      <h1 id="city">Weather Web App</h1>      
      <p><a id="temperature" href="#"></a><span id="weather">by LEARNERSNAME</span></p>
    </section>
  6. We are going to make the part that shows the temperature into a link so that we can add an on-click conversion between °C and °F.

    We need to add an onclick event to the anchor tag (<a>) which will run the JavaScript function that will handle the conversion. Let's call this function switchUnits().

    You also need to add return false; after calling this function. This basically makes the browser ignore the href="#" part which would cause the window to jump back to top. The href attribute is required and when using links to trigger JavaScript functions it is common to use # as a value where you would normaly use a URL.

  7. Now our "link" should look like this:

    <a id="temperature" href="#" onclick="switchUnits(); return false;" title="Click to switch between metric and imperial units"></a>
  8. Next, let's add a footer after our <section> tag. In it we can show useful information and links.

    <footer>
      <p>Powered by <a href="http://flickr.com/services/api/">Flickr</a> and <a href="http://openweathermap.org">Openweathermap.org</a>. Created by <a href="https://twitter.com/fourtonfish">@fourtonfish</a>. <a id="image-source" href="#">Image source</a>.</p>
    </footer>

    I am adding links to the APIs we will be using as well as a link to my Twitter account -- feel free to add a link to your own website or Twitter or just put your name here. I am also going to add a link to the image that will be loaded for the background from Flickr so that the author can get some credit too.

  9. Now your code inside the <body> tags should look like this

    <section>
      <h1 id="city">Weather Web App</h1>      
      <p><a id="temperature" href="#" onclick="switchUnits(); return false;" title="Click to switch between metric and imperial units"></a><span id="weather">by @fourtonfish</span></p>
    </section>
    <footer>
      <p>Powered by <a href="http://flickr.com/services/api/">Flickr</a> and <a href="http://openweathermap.org">Openweathermap.org</a>. Created by <a href="https://twitter.com/fourtonfish">@fourtonfish</a>. <a id="image-source" href="#">Image source</a>.</p>
    </footer>
  10. Next we will do a little bit of styling with CSS.

  11. Start by adding a <style> tag inside your <head> tags.

  12. First we will add CSS for the body:

    body{
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      font-size: 2em;
      text-shadow: 0 0 10px #000;
      color: #fff;
      background: #888;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }

    Let's pause for a moment to see what this is going to do. We want the background image to fill the entire screen. We also want to make the text bigger and easy to read no matter what the background will look like. Inspect each property and figure out how it helps us achieve our goals.

  13. Moving on, the rest of our CSS will look like this:

    section{
      min-height: 100%;
    }
    
    h1{
      font-size: 2em;
      padding: 0 0.3em;
      line-height: 1em;
    }
    
    p{
      padding: 0 1em;
    }
    
    a{
      color: #fff;
    }
    
    footer{
      position: absolute;
      bottom: 0;
      font-size: 0.5em;
    }
    
    #temperature{
      text-decoration: none;
      border-bottom: 0.05em dotted white;
    }
  14. Again, have a look at each rule to see what we're trying to achieve. You can see that I am making the <section> element fill out the whole window as well (I could have easily set the Flickr image to be the background here, it doesn't really make a difference, but we still want the content of our page to be full width and height).

  15. We also want the <footer> to stay at the bottom of the page and we want it to have a smaller font. Most of the styling I'm using is a personal preference. For example, I am making the text white and adding some shadow to it. I find this to be the best solution for making the text stand out from a photo in the background when you don't know what the photo will look like -- and we will be loading images from Flickr dynamically. Feel free to experiment with the styles -- use bigger font size, different colors, you can center the text, move it to the right, you can also find a plugin that automatically changes the text color depending on what's in the background. Whatever makes your web app look good.

  16. This concludes the HTML and CSS part of the activity. In part two we will sign up for a few online services so we can use them in our app.

Materials

  • Drawing board or blackboard
  • Pens
  • Paper
  • Computer
  • Web Access

Discussion

After the learners complete their web app, ask them what other web mashups they would be interested in creating. You might want to visit programmableweb.com -- a site full of (mostly) free APIs and mashups that can serve as an inspiration.

Related Activities