MODUL DESCRIPTION

Module Name : Web Programming for Mobile Devices

Module Code : WPM
Semester :3
Category : Mandatory
Credit : 3 Credits (In Class Lecture) & 1 Credit (Project)

Overview

In this course, the students will learn to create responsive websites using HTML5, CSS3, and jQuery. The
course covers the need of creating responsive websites that adjusts their structure or layout according to
the device screen on which they are accessed. It explains the various building blocks used to create
responsive websites.

In addition, students will learn how to add interactivity to websites using jQuery. The course also covers
the Twitter Bootstrap framework that enables Web developers to create responsive websites quickly and
easily by providing readymade pieces of code. Finally, the course imparts knowledge on jQuery Mobile
that enables developers to create cross-platform Web applications.

Pre-Requisites

The students who want to take this module should :

 Having knowledge of HTLM5

 Having knowledge of CSS
 Having knowledge of JavaScript
 Having knowledge of Jquery

Objectives

After completing this module, the student will be able to:

 Identify Web designing techniques 


 Understand building blocks and the architecture of RWD 

 Identify the development environment 

 Create media queries and set viewport settings 

 Add fluidity to a website 

 Identify the different types of JavaScript libraries 

 Manipulate and traverse HTML DOM using jQuery 

 Implement jQuery events 

 Implement AJAX functionality using jQuery 

 Create websites using Twitter Bootstrap 

 Use jQuery Mobile to create cross-platform Web applications 

 Create Web workers 


CEP CCIT Fakultas Teknik Universitas Indonesia - 2018

MODUL DESCRIPTION

Program-Specific Competency

After completing this module, the student should be able to:

 Develop responsive websites that adopt their structure according to the device on which they are
accessed 

 Develop responsive websites in a shorter period of time using Twitter Bootstrap 

 Developcross-platformWebapplicationsusingjQueryMobile

Delivery Methodology

The courseware developed for this module provides you with an enriching experience in terms of content
as it includes:

 Audio and video content that help students understand the concepts in a better way.
 Animated representations of critical topics or examples

Students will have this enriching experience when they view the courseware by using appropriate tools.
In addition, faculties can give more information about the additional learning material and practices by
using the following ways:

 Reference Links: Provides links to the websites from where the students can read additional
material related to various topics covered in the Student Guide (SG) chapters.
 Animations: Provides animations to explain various concepts covered in the course.
 Recorded Lectures: Provides recorded versions of some important concepts that are covered in
the module.
 Data Files: Provides the data files that the students need to perform exercises, if required.

The learning cycle followed for delivering the content of this module is:
CRLab@HomeLab@Center
In the preceding learning cycle:

 CR: Represents class room.

 Lab@Home: Represents Personal Computer for Exercise/Assignment.
 Lab@Center: Represents Machine Room/Proctored Machine Room for Exercise/ Assignment.

Learning Tools

Below are the learning tools used during sessions of this module:

 The animations that need to be shown to the students during their classroom sessions are
embedded in the slides related with the chapters. However, if the embedded animations do not
play properly, faculty can play it from the TIRM CD.
 Animations and simulations are added as learning aids to simplify the concepts and to make
learning fun. Therefore, while conducting the sessions, ensure that the animations and
simulations allocated for the respective sessions are shown to the students.
 As a part of the learning methodology, students are also expected to perform lab exercises at
home. The exercises are provided at the end of every chapter. Please refer to the session plan
and inform students about the exercises that they need to perform at home. Each exercise

CEP CCIT Fakultas Teknik Universitas Indonesia - 2018

MODUL DESCRIPTION

contains certain hints and a final solution. Before they can access the solution, encourage the
students to complete these exercises with the help of the hints provided for the respective
exercises. The hints are available as a part of the courseware itself and are given along with
every exercise.

Topic Contents

Source Topic/Activity Name Time Reference

Objectives
Introduction to Responsive Web Design
Identifying Web Designing Techniques
Understanding Building Blocks and the Architecture of RWD Responsive Design Web
Identifying the Development Environment using HTML5 and jQuery
Chapter 1 4 Hours
NIIT Module Student
Exploring the WebMatrix IDE Guide
Activity
Exercise
Summary
Applying Styles to Selective Elements
Applying Effects to HTML Elements
Responsive Design Web
Using Custom Fonts
using HTML5 and jQuery
Chapter 2 Activity 2 Hours
NIIT Module Student
Exercise Guide

Summary
Introducing Media Queries
Introducing Viewport Responsive Design Web
Activity using HTML5 and jQuery
Chapter 3 4 Hours
NIIT Module Student
Exercise Guide
Summary
Understanding Fluid Grids

Implementing Fluidity in a Web page

Responsive Design Web
Adding Fluidity to the FoodHub Website using HTML5 and jQuery
Chapter 4 3 Hours
Activity NIIT Module Student
Guide
Exercise
Summary
Using AngularJS
Creating ToDo List and Storing it in Local Storage Using AngularJS
Responsive Design Web
Using KnockOut
using HTML5 and jQuery
Chapter 5 3 Hours
Creating Shopping Cart Web Page Using Knockout NIIT Module Student
Guide
Exercise
Summary

CEP CCIT Fakultas Teknik Universitas Indonesia - 2018

MODUL DESCRIPTION

Manipulating HTML Elements

Performing Client-Side Validation in a Login Form
Responsive Design Web
Traversing the DOM
using HTML5 and jQuery
Chapter 6 4 Hours
Traversing Nodes Using jQuery NIIT Module Student
Exercise Guide

Summary
Implementing jQuery Events
Implementing jQuery Events on HTML Elements
Implementing AJAX Functionality Using jQuery Responsive Design Web
Chapter 7 Implementing AJAX with jQuery using HTML5 and jQuery
3 Hours
NIIT Module Student
Using AJAX to Load Content Without Reloading the Entire Page Guide
Exercise
Summary
Introducing Bootstrap
Creating and Executing Basic Bootstrap Template
Responsive Design Web
Creating PlanUrTrip Website Using Twitter Bootstrap
using HTML5 and jQuery
Chapter 8 3 Hours
Creating the Fashion Fiesta Website Using Twitter Bootstrap NIIT Module Student
Exercise Guide

Summary
Creating a jQuery Mobile Application
Identifying Features of jQuery Mobile
Getting Started with jQuery Mobile
Creating a Basic jQuery Mobile Application
Responsive Design Web
Implementing Page Navigation in a jQuery Mobile Application
using HTML5 and jQuery
Chapter 9 4 Hours
Enhancing a jQuery Mobile Application NIIT Module Student
Using Forms in a jQuery Mobile Application Guide

Applying Themes in a jQuery Mobile Application

Exercise
Summary
Working with Listviews
Creating Listviews
Formatting a Listview
Adding Icons and Thumbnail Images in a Listview
Responsive Design Web
Using Themes in a Listview
using HTML5 and jQuery
Chapter 10 3 Hours
Adding Form Elements to a Listview NIIT Module Student
Implementing Touch and Scroll Events Guide

Handling Touch and Scroll Events in a jQuery Mobile Application

Exercise
Summary
Chapter 11 Using Web Workers in Web Pages 4 Hours Responsive Design Web

CEP CCIT Fakultas Teknik Universitas Indonesia - 2018

MODUL DESCRIPTION

Creating Web Workers using HTML5 and jQuery

Handling Errors NIIT Module Student
Guide
Loading Scripts
Creating a Quiz Page Using Web Workers
Creating a Dedicated Web Worker to Perform the Computation on
the Background of the Web Page
Creating a Quiz Page Using Web Workers
Creating a Dedicated Web Worker to Perform the Computation on
the Background of the Web Page
Exercise
Summary

Learning Evaluation

Theory

1. Module Test (NIIT) 60%

2. Assignment & Exercise 40%

Project

1. Project Report 50%

2. Project Presentation 50%
100%

Assignment and Project

1. Assignment & Exercise

These assignment and exercise were given to help students comprehend every chapter they
studied in the class room.

2. Project
This project assignment helps students to demonstrate the skills that they have acquired on the
module to provide a solution in a given scenario. In addition, the students will analyze, design and
create a Responsive Web Design Using HTML5 and jQuery

Books and Reference

 Responsive Web Design with jQuery – Gilberto Crespo

 Html and css: design and build websites, by jon duckett
 Javascript and jquery: interactive front-end web development, by jon duckett
 Learning web design: a beginner’s guide to html, css, javascript, and web graphics, by jennifer
niederst robbins
 Communicating design: developing web site documentation for design and planning, by dan m.
Brown

CEP CCIT Fakultas Teknik Universitas Indonesia - 2018

MODUL DESCRIPTION

Minimum Requirements

Processor: 2 GHz processor with SSE2 support

Memory: 4 GB RAM

Hard disk: 3 GB available disk space

Display: 1280 x 800 screen resolution

Graphics: Graphics hardware acceleration requires a DirectX 10 graphics card.

Operating system:

 Windows 7 SP1 to Windows 10, 32-bit or 64-bit OS only

 Internet access. Fees may apply.

Software Requirements

 HTML Editor
 Web Browser

CEP CCIT Fakultas Teknik Universitas Indonesia - 2018