About this course: In this course, we will show you exciting examples of collaborative, interactive web applications that use various types of media including sound, images and big data. We will show you how to build sites that provide precisely this functionality, using Meteor. We will also provide fully working example application code that you can use for your own commercial web projects. The course also provides a range of advice and suggestions about how to develop bespoke web applications which match the requirements of clients, where clients are people who commission the product or people who use the product. We will take you through the development of the following applications: 1. A portfolio website with collaborative blogging functionality. 2. An interactive, realtime, multi user music remixing system. 3. An interactive, online graffiti wall where users can collaborate to create graphics. 4. An interactive data visualisation platform for exploring and plotting big data in exciting ways. At the end of this course, you will be able to: • Implement animated data visualisations and graphics using advanced user interface libraries such as vis.js • Work with external data sources • Create multi user, realtime, collaborative environments • Use media APIs such as the Web Audio API Participation in or completion of this online course will not confer academic credit for University of London programmes

Created by: University of London, Goldsmiths, University of London

Taught by: Dr Matthew Yee-King, Lecturer
Computing Department, Goldsmiths, University of London
Taught by: Dr Mick Grierson, Reader
Computing Department, Goldsmiths, University of London

Basic Info	Course 5 of 6 in the Responsive Website Development and Design Specialization
Commitment	4 weeks of study, 1-2 hours/week
Language	English
How To Pass	Pass all graded assignments to complete the course.
User Ratings	4.2 stars Average User Rating 4.2See what learners said

Syllabus

WEEK 1

Responsive Website Tutorials and Examples outline: Course overview

1 video, 2 readings, 1 practice quiz

Reading: Course outline
Video: Course overview
Reading: Grading and assessment information
Practice Quiz: Prerequisite quiz

Creating a Portfolio Website with a Blog

Welcome to the first module of 'Responsive Website Tutorial and Examples!'. In this session we will be exploring a real-world web development task based on a common brief that web developers have to respond to every day – producing a portfolio website with both static and dynamic content features. I hope you enjoy the module! -Mick

6 videos, 5 readings, 5 practice quizzes

Video: Introduction
Practice Quiz: Introduction
Reading: Source code
Reading: Slides for this module
Video: Recap
Practice Quiz: Recap
Reading: Getting started: learning outcomes
Video: Getting started
Practice Quiz: Getting started
Reading: Adding a page: learning outcomes
Video: Adding a page
Practice Quiz: Adding a page
Reading: Administrating the blog and making it responsive: learning outcomes
Video: Administrating the blog and making it responsive
Practice Quiz: Administration
Video: Creating A Portfolio Website with Blog summary

Graded: Creating A Portfolio Website with Blog summary quiz

Graded: Customise the portfolio site

WEEK 2

Collaborative Apps 1 : Music Machine

Welcome to the second module of 'Responsive Website Tutorial and Examples!'. Meteor is great at making collaboration simple. You can make collaborative sites in a day or so that work across many devices including mobile. By the end of this session you will understand how to structure and build collaborative, real-time applications, how to integrate the web audio API, and how to specifically set and get variables stored in the database using basic interface elements.

7 videos, 7 readings, 5 practice quizzes

Video: Module introduction
Video: Introduction: Music Machine
Practice Quiz: Introduction
Reading: Source code
Reading: Slides for this module
Reading: Project structure: learning outcomes
Video: Project structure
Practice Quiz: Project structure
Reading: Adding sound: learning outcomes
Video: Adding sound
Practice Quiz: Adding sound
Reading: Adding interaction : learning outcomes
Video: Adding interaction
Practice Quiz: Adding interaction
Reading: Making it collaborative: learning outcomes
Reading: URL in lecture video
Video: Collaboration
Practice Quiz: Making it collaborative
Video: Collaborative Apps 1 : Music Machine 2015 summary

Graded: Collaborative Apps 1 : Music Machine 2015 summary quiz

Graded: Customise the music machine

WEEK 3

Collaborative Apps 2 : Drawing Machine

Welcome to the third module of 'Responsive Website Tutorial and Examples!'.Meteor allows us to make creative, collaborative apps that work in real-time. Both the Client and the Server can insert information into a Mongo collection. Ordinary web users can do this interactively, without having to program the database manually. In this session we will look at this approach through the lens of collaborative drawing. You will learn how to create a canvas using d3.js, change attributes of the canvas, create client code for inserting data into the database and how to render database entries as a drawing.

7 videos, 6 readings, 5 practice quizzes

Video: Module introduction
Video: Drawing machine
Practice Quiz: Drawing machine introduction
Reading: Source code
Reading: Slides for this module
Reading: Drawing machine example: learning outcomes
Video: Drawing machine: worked example
Practice Quiz: Drawing machine- worked example
Reading: Creating the application: learning outcomes
Video: Creating the application
Practice Quiz: Creating the application
Reading: Creating and serving data: learning outcomes
Video: Creating and serving data
Practice Quiz: Creating and serving data
Reading: Review: learning outcomes
Video: Review
Practice Quiz: Review
Video: Collaborative Apps 2 : Drawing Machine summary

Graded: Collaborative Apps 2 : Drawing Machine summary quiz

Graded: Customise the drawing machine

WEEK 4

Creating a Data Visualisation Application

Welcome to the final module of 'Responsive Website Tutorial and Examples!'.In this session we will be looking at how to use data from external sources to create interactive visualisations for the purposes of creating an interactive data visualisation web app.

7 videos, 6 readings, 5 practice quizzes

Video: Recap of previous modules
Video: Module introduction
Practice Quiz: Introduction
Reading: Source code
Reading: Slides for this module
Reading: Setting up the interface: learning outcomes
Video: Setting up the interface
Practice Quiz: Setting up the interface
Reading: Getting data: learning outcomes
Video: Getting data
Practice Quiz: Getting data
Reading: Rendering data on the page: learning outcomes
Video: Rendering data on the page
Practice Quiz: Rendering data on the page
Reading: Review: learning outcomes
Video: Review
Practice Quiz: Review
Video: Creating a Data Visualisation Application summary

Graded: Creating a Data Visualisation Application summary quiz

Graded: Customise the data visualisation

FAQs

How It Works

Coursework

Each course is like an interactive textbook, featuring pre-recorded videos, quizzes and projects.

Help from Your Peers

Connect with thousands of other learners and debate ideas, discuss course material, and get help mastering concepts.

Certificates

Earn official recognition for your work, and share your success with friends, colleagues, and employers.

Creators

University of London

The University of London is a federal University which includes 17 world leading Colleges. Our International Programmes were founded in 1858 and have enriched the lives of thousands of students, delivering high quality University of London degrees wherever our students are across the globe. Our alumni include 7 Nobel Prize winners. Today, we are a global leader in distance and flexible study, offering degree programmes to over 50,000 students in over 180 countries. To find out more about studying for one of our degrees where you are, search for 'London International'.

Goldsmiths, University of London

Pricing

	Audit	Purchase Course
Access to course materials	Available	Available
Access to graded materials	Not available	Available
Receive a final grade	Not available	Available
Earn a shareable Course Certificate	Not available	Available

Ratings and Reviews

Rated 4.2 out of 5 of 202 ratings

It is very practical

Great course ! it helped me a lot

Exciting course that connects all the previous course's materials together into a professional backdrop. Very rewarding and I can't wait to take the capstone!

The contents is really good and easy to learn