Canvas Animation

With a canvas you can animate your page. You can use images or draw geometric figures on the canvas. Here are some tutorials for canvas animation.

Parallax Effect ( Multilayer animation )

The following presentation is not strictly JavaScript but a sum up of a bunch of animation methods for the web:

APIs – more or less open data

APIgee - adgang til mange APIer
APIgee – adgang til mange APIer

The Instagram API is just one among many APIs. Here is a list of interesting sites:

These are just a few examples ….

Developers can access the APIs for e.g. Instagram, Twitter, Facebook, Flickr etc. ( often a developer key, token or client_id is requiered ).

A great portal to many APIs is APIgee – the interface is used by Instagram and many other providers of third part data.

  • Get Instagram image feeds – see my example on Instagram.
  • Method: find out how to format the URL, that will give you the wanted data.
  • As soon as your API sends a satisfying response, you can use the json parser.
  • The analysis of the json object will give you an idea of how to format strings for the AJAX script, such as:
    • data.data.link.url ( etc. )

APIgee

Via Instagram you can open APIgee. In the top left corner there is a drop down menu with access to many APIs. Choose one. Next to the name you’ll find a drop down menu for authentiation. Choose it. If you can work without authentiation so much the better. If not … well try to authentiate with your personal or professional user profile.

The authentiation will give you a token. Add the token to the search string. Then you’re ready to format your jsonp searchstring urls, like this one:

https://api.instagram.com/v1/users/261168726/followed-by?access_token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Workshop

In groups choose an API from a json data provider. Experiment with the API, try to get interesting results – and when you have the data you want – style it with all the arts and tricks you know from CSS and jQuery.

After lunch present your work in plenum.

Upload your work as a group.