CSCI 4140: Open-Source Software Project Development (Spring 2015)
Tutorial Resource Page

Responsive Web Design with Bootstrap 3
  • Assignment 2 overview – Layout design
  • CSS (Cascading Style Sheets)
  • Font Awesome
  • Responsive web design (RWD)
  • CSS media queries
  • Bootstrap 3
  • Setting up the development environment for Node.js and Express

Recommendation: CSS Diner

Tags: layoutcssfont awesomeresponsive web designmedia queriesbootstrap

Note: Please refer to the tutorial notes of Week #7 for the requirements of the layout of Assignment 2.

Installing Node.js and Express on Windows
Installing Node.js and Express on Linux or Mac

Note: [20 February] Page 21 updated.

Last modified: 20 February

Students can start implementing the UI of Assignment 2

Assignment 2 Overview (Client Side) & Hints on Front-end Development
  • Demonstration
  • Client side: Layout design, QR code display, Playlist management & YouTube player control

Recommendation: A Hilarious Collection of CSS Puns & Jokes

Tags: QR codeDOM scriptinglocalStorageHTML5client

Last modified: 24 February

YouTube IFrame Player API
  • Overview
  • Requirements
  • Getting started
  • Operations: Play, Pause, Stop, Mute, Unmute, Fast Forward, Rewind, Next Video, Previous Video
  • The onStateChange event
  • Destroying the player
  • Reference

Last modified: 24 February

Students can start implementing the player and control logic of Assignment 2 (locally)

Assignment 2 Overview (Server Side)
  • Work flow
  • Server side: Routing, Message forwarding, Retrieving video title

Tags: serverwork flowroutingmessage forwarding

Last modified: 24 February

Learning the Basics of Node.js
  • What is Node.js?
  • Learning the basics of Node.js: Non-blocking I/O, HTTP

Recommendation: Are all JavaScript callbacks asynchronous?, Control flow in Node.js, nodeschool.io

Tags: eventsasynchronous I/Ocallbackmodulenpmclosure

Note: Page 17 updated.

Last modified: 6 March

Students can start implementing the back-end of Assignment 2

Learning the Basics of Node.js

Note: Continued...Please find the downloa'' in Week #8.

Express Web Framework

Last modified: 24 February

WebSocket and Socket.IO

Recommendation: N-Mario, GitHub (Client Side), GitHub (Server Side), Video

Note: Updated pp. 7, 8; added p. 14.

Last modified: 17 March

Deploying Node.js Applications on OpenShift

Note: Added p. 15.

Last modified: 17 March

Students should complete Assignment 2 after this tutorial

Express Web Framework

Note: Continued...Please find the downloa'' in Week #9.

Remote debugging on Android or iOS devices
  • Why remote debugging?
  • Requirements
  • Remote debugging on Android
  • Remote debugging on iOS

Tags: iOSAndroidSafariChromeFirefoxUSB debugging

Last modified: 9 March

Debugging WebSocket in Chrome or Firefox
Assignment 2 Final Checklist

Note: Read this page carefully before you submit your assignment!

Submission Guideline

Deadline of Assignment 2: 23:59, 2015 March 29 (Sun)

Please go to the course homepage for the tutorial notes.

Symfony: PHP framework for web projects

Note: During the tutorial, I will select some of the important topics in Symfony and go through the development process with you. You are assumed to have a good background of PHP.

The matrials are optional and may be useful for your projects :-)