INFR 3120 Web Programming

Lecture 1 Introduction
Prof. Richard W. Pazzi

Administrative Details
Course Preliminaries
- Instructor: Prof. Richard W. Pazzi
- Email: [email protected] (Please add [INFR3120] to the subject)
- Office Hours: TBA (room ERC 2023)
- TA: Khaled Malahfji ([email protected])

- Course Outline
- Available online (Blackboard)
- Lets take a closer look at the syllabus

INFR3120 Prof. Richard W. Pazzi

Course Preliminaries (1)

Course Description:
In this course, students will learn the fundamental web development
principles and techniques.
This course is an introduction to web technologies, including HTML and
CSS. Students will learn how to code web pages from scratch according
to W3C standards using HTML, style text and content with CSS, and
connect to databases using MySQL.

It also covers JavaScript and PHP for the design of dynamic web
applications following good web design practices.

INFR3120 Prof. Richard W. Pazzi

Course Preliminaries (2)

Course Outcomes

On the successful completion of the course, students will be able to:

Understand the client / server model as it pertains to Web Servers and
Browsers
Code web pages from scratch according to W3C standards (HTML and
CSS)

Design and develop dynamic web applications (JavaScript / PHP)

Use client side scripting tools to connect to a MySQL database
Select appropriate development tools and programming languages for a
given task

INFR3120 Prof. Richard W. Pazzi

Course Preliminaries (3)

This course includes formal lecture and tutorial sessions.
Tutorial (LAB)
Wednesday 3:40 5:00 pm, ERC 2026
Your Tutorial / Lab TA is Khaled Malahfji who will be present to provide
you with help with programming languages and web server installation.
Students are expected to have a fully functional laptop for the purpose of
installing the tools required in this course.

INFR3120 Prof. Richard W. Pazzi

IT SKILLS WORKSHOP
The IT Skills Workshop (ITSW) is a mandatory part of your education at
UOIT
Each course you take this semester is integrated within the ITSW project
with its own requirements for each course.
There are 1.5 workshop hours per week for your cohort (student year),
of which you must attend.
ITSW workshop hours September 17th December 3rd (inclusive) on
Thursdays from 2:10pm 3:30pm in UA3220.
The workshop coordinator for this year is Garrett Hayes
([email protected]).
In this workshop you will apply your knowledge learned in each course to
analyze and/or implement pieces of a semester long project, depending
on the context.
Workshop timeslots will be distributed to you via Blackboard at the
beginning of the semester.
INFR3120 Prof. Richard W. Pazzi

IT SKILLS WORKSHOP (Project Scenario)

The International Travel Agency (ITA) is a multinational corporation that
provides packaged travel services for small to medium enterprises
(SMEs) around the world.
Thousands of customers and hundreds of employees
Currently their centralized data center is connected to multiple regional
offices in order to centralize their IT resources.
The ITA has contracted your team to monitor and troubleshoot any
network-related issues occurring between their core network and Travel
Data Provider (TDP) endpoints.
Working together as a team, you are responsible for implementing a
web-based product that can be used to ease the difficulties of
troubleshooting their complex network topology.
Valid software solutions could streamline a variety of issues, including
(but not limited to): remote device monitoring, ticket management,
automating known troubleshooting methodologies, collecting real time
routing information, automated log parsing and classification, etc.

INFR3120 Prof. Richard W. Pazzi

IT SKILLS WORKSHOP (Project Scenario)

Each included courses assignment or final project will be implementing
some aspect of this project scenario.
Each instructor will define a deliverable that relates to the scenario
above while meeting the evaluation and metric requirements for the
completion of their course. For example, in your Advanced Networking III
course, you will be responsible for identifying ways software automation
can be used to automate or facilitate network troubleshooting
In your Web Programming course you will be developing a web
interface (and underlying software) that can be used to help automate
the troubleshooting process.
Each course instructor will be providing you with specific details
regarding the portion of the project included in their course (deliverables,
completion requirements, metrics, etc.). Instructors will set their own
deadlines for their portion of the IT Skills Workshop. You will be
responsible for meeting their requirements in each course.

INFR3120 Prof. Richard W. Pazzi

IT SKILLS WORKSHOP (Project Scenario)

Students identify interesting projects (groups of 4)
Requirements:
- Make use of HTML, CSS, Javascript. PHP, mySQL (all topics covered in class)
- Should access a DB (mySQL + PHP)
- Should use at least one API not covered in class (examples, no limited to:)
- https://developers.google.com/maps/web/?hl=en (google maps)
- https://developers.google.com/youtube/ (youtube)
- Integration to social networks (facebook, twitter, pinterest, etc..)
- http://www.programmableweb.com/api/accuweather (AccuWeather)

Please submit your project proposal (blackboard) by Friday Sep 17,

2015.

INFR3120 Prof. Richard W. Pazzi

Course Preliminaries (4) - Schedule

Lecture #

Date

Topics

Week 1

Sept 10, 2015

Sept 14, 2015

Introduction, Course Overview, Intro to Web Development,

Tools, Resources, HTML Part 1

Sept 17, 2015

Sept 21, 2015
Sept 24, 2015
Sept 28, 2015
Oct 1, 2015
Oct 5, 2015
Oct 08, 2015
Oct 12, 2015
Oct 15, 2015
Oct 19, 2015
Oct 22, 2015
Oct 26, 2015
Oct 29, 2015
Nov 02, 2015
Nov 05, 2015
Nov 09, 2015
Nov 12, 2015
Nov 16, 2015
Nov 19, 2015
Nov 23, 2015
Nov 26, 2015
Nov 30, 2015

HTML Part 2, CSS

Project Presentation/Demo

Dec 03, 2015

Project Presentation/Demo

Week 2

Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
Week 12
Week 13

HTML Part 3, HTML5, CSS3

JavaScript Part 1
JavaScript Part 2
JQuery
PHP Part 1
Midterm
SQL, MySQL
PHP + MySQL
PHP with XML

INFR3120 Prof. Richard W. Pazzi

10

Course Preliminaries (5) - Schedule

- Course Schedule:
- Note that given the dynamic nature of university courses, the schedule is
tentative and could be modified at any point during the term. Should that
happen, announcements will be made.

INFR3120 Prof. Richard W. Pazzi

11

Resources
High-quality online resources are freely available for much of the content
covered in this course. For each class, online references will be given
that students can refer to. Links to online resources will be posted in
Blackboard for each class as required. Any sample code or presentation
materials used during class will also be made available for students to
keep as a reference.
Online Resources
- www.CodeCademy.com - Each student will need to sign-up for a free
account on this site.
- www.w3Schools.com - We will use the HTML, CSS, PHP, and JavaScript
learning sections.

* Additional readings and/or online resources may be assigned or

recommended during the course.

INFR3120 Prof. Richard W. Pazzi

12

Evaluation
Evaluation method
There will be pop quizzes throughout the term as well as 6-8 Labs. All
quizzes and labs are to be completed individually. The project can be
completed in pairs. Students are welcome to discuss their work with their
classmates however it is expected that each students work is unique
and demonstrates their individual thought process. There will also be a
midterm for this course.
Activity

Weight

Tentative Dates (may change)

Project

30%

Dec 3rd, 2015

Labs

15%

Throughout the term

Midterm

40%

Participation (Quizzes,
Hands-on exercises)
Project
Presentation/Demo

5%

Oct 29, 2015 Theory

Nov 2, 2015 - Practical
Throughout the term

10%

Last 2 weeks of classes (Nov 26 Dec 3)

INFR3120 Prof. Richard W. Pazzi

13

Quizzes (Hands-on exercises)

Quizzes
This course will include a number of quizzes or hands-on activities
throughout the semester which may be administered at any point during
the lecture.
Missing a quiz/inclass assignment will result in a grade of 0 (this applies
even if you arrive to the lecture late, after the quiz has been completed)
unless proper documentation is provided.
The purpose of the quizzes/inclass assignments is to promote
attendance and typically they will be easy enough to complete and
obtain a good mark provided you attend the lecture.
Depending on the number of these activities, one or two lowest mark(s)
will be dropped.

INFR3120 Prof. Richard W. Pazzi

14

Course Preliminaries (12)

Mid-term
Missing the mid-term exam will result in a grade of 0 (this applies even if
you arrive late, after the exam has been started) unless proper
documentation is provided.
Provided valid documentation is presented, you may apply for a deferred
exam.

INFR3120 Prof. Richard W. Pazzi

15

Lets test TurningPoint and ResponseWare

ICE-BREAKER
Please go to:

www.rwpoll.com
Session ID: will be given in class

INFR3120 Prof. Richard W. Pazzi

16

What does HTML stand for?

A. High Temperature Materials La

boratory
B. Hey Thats My Lunch
C. Hippies Think Marijuanas
Legal
D. How To Make Laughs
E. HyperText Markup Language

0%
A.

INFR3120 Prof. Richard W. Pazzi

0%

0%

B.

C.

0%

0%

D.

E.

17

Fastest Responders

Seconds

Participant

Seconds

INFR3120 Prof. Richard W. Pazzi

Participant

18

Professor Richards best office hours?

A.
B.
C.
D.

Mon 11:00 1:00 PM

Wed 10:00 noon
Thu 2:00 4:00 PM
Other??

0%
A.
INFR3120 Prof. Richard W. Pazzi

0%
B.

0%
C.

0%
D.

19

INFR3120 Prof. Richard W. Pazzi

20

Vehicular Networks
Wireless Sensor Networks
Remote Rendering and Streaming of Interactive VEs

MY RESEARCH WORK

INFR3120 Prof. Richard W. Pazzi

people
by 2050

Introduction

7B
people

INFR3120 Prof. Richard W. Pazzi

Page 22

Introduction
What will happen when the number of vehicles on our
roads doubles or triples?

1B
cars

Source: wardsauto.com

INFR3120 Prof. Richard W. Pazzi

Page 23

Introduction

INFR3120 Prof. Richard W. Pazzi

Page 24

Introduction
Annual Traffic Accident Fatalities

230K

1.2 million

Americas

die in road accidents

every year

50 million
are injured

INFR3120 Prof. Richard W. Pazzi

Page 25

Introduction
Other traffic-related problems

people take hours to commute

Increased cost of food and freight transport
Increase in CO2 emission.

INFR3120 Prof. Richard W. Pazzi

Page 26

Initiatives (1/2)
Smart Cars
greener technologies
alternative fuel
Googles driverless car

autonomous driving

electric cars

INFR3120 Prof. Richard W. Pazzi

Abu Dhabi PRT

Personal Rapid Transport
Page 27

Initiatives (2/2)
Integrated Transport
Systems

INFR3120 Prof. Richard W. Pazzi

Page 28

Vehicular ad hoc and Sensor Networks

Vehicles talking to each other

Caution: slow
traffic ahead

Warning!
slowing down

Safe to
change lane

Finding
alternative route

INFR3120 Prof. Richard W. Pazzi

Page 29

Vehicular ad hoc and Sensor Networks

Some envisioned applications
Collision avoidance at intersections
Traffic light status
Traffic information
Safety warnings
Detailed accident information for first responders
Ambulance/police approach warnings and routing
Advertising of roadside nearby businesses
Car-to-car applications
Automatic tolls
On-board gaming (passengers, of course )
Local area information
...
INFR3120 Prof. Richard W. Pazzi

Page 30

Vehicular ad hoc and Sensor Networks

Challenges
High mobility
- Short duration of connections
- Frequent topology changes

Lack of infrastructure
- Cell phone base stations are not always appropriated

Security
- Open nature of wireless communication
- Safety-critical messages
- Secure localization systems

Service Discovery
Different mobility models than MANETs
- Platoons; restricted to maps...

Data mining and fusion

INFR3120 Prof. Richard W. Pazzi

Page 31

My Research Work 1

Mobility management in IEEE802.11 (9/12)

AP2

Waives scanning
process

AP1

AP3

INFR3120 Prof. Richard W. Pazzi

Page 32

My Research Work 2
A WSN consists of a large number of power-constrained sensor nodes

Can be used for a number of applications (surveillance, health, military

operations, etc)
Sensor nodes collaborate to relay data to a base station (sink)
Most previous works employ static sinks

INFR3120 Prof. Richard W. Pazzi

Page 33

My Research Work 2
Trail Setup
The mobile sink creates a cluster

CLU_CFG

INFR3120 Prof. Richard W. Pazzi

Page 34

My Research Work 2
Trail Setup
And leaves a trail as it moves

BEACON

BEACON

INFR3120 Prof. Richard W. Pazzi

Page 35

MY RESEARCH WORK III

Remote 3D Rendering and Streaming for Mobile Devices

INFR3120 Prof. Richard W. Pazzi

Page 36

My Research Work 3
Brief Overview

Image-based Rendering (IBR)

- represents a 3D scene using images instead of geometry
- uses reference images to reconstruct intermediate views
- Example - cubic panorama:
a 3600 view can be reconstructed by 6
images

IBR offers a simple way to render

complex 3D scenes

A cubic panorama/map
INFR3120 Prof. Richard W. Pazzi

Page 37

My Research Work 3
Brief Overview
Remote 3D
Rendering

Streaming

Image-based
Rendering

Complex 3D environments on
graphics constrained hardware

Network

Rendering server

Interactive Streaming
Protocol
INFR3120 Prof. Richard W. Pazzi

Page 38

My Research Work 3
Brief Overview

Experimental Setup
1 8 client nodes;
One rendering server;
Clients are wirelessly connected
No cross traffic;
Image format: PNG;
Image resolution: 240x268;
Image size: ~90KB
10 FPS
uncompressed

INFR3120 Prof. Richard W. Pazzi

Page 39

Future Research Directions (1/3)

For the long term...

Vehicular Ad hoc Networks

1) Opportunistic ad hoc communication
mechanisms
- take into consideration high mobility and QoS
- speed, type of message, quality of communication
- To allocate channel times more efficiently

2) Cluster-based mobility management

- Objective: reduce network overhead, handoff
latency (in platoons)
- one car in a platoon will act as a cluster-head
- Clusters formed based on GPS and speed
- Only cluster-head associates with access point
- Other cars use the cluster-head as gateway.
- Objective: reduce network overhead, handoff
latency.

INFR3120 Prof. Richard W. Pazzi

Page 40

Future Research Directions (2/3)

Vehicular Sensor Networks
Investigate new mobility models for mobile sinks (vehicles)
- Platooning, map-based

Design new data dissemination schemes

- Taking into consideration position information
- Partitioned networks
- Frequent density changes

Applications
- Wildlife collision avoidance
- Precision Agriculture
- Road condition information system

Simulation models
- ns-2, OMNeT++, SUMO, TRANS
INFR3120 Prof. Richard W. Pazzi

Page 41

Future Research Directions (3/3)

Networked 3D Virtual Environments
Vehicular and Sensor Network Simulator
- To test protocols, HCI and applications in a larger scale
- To assess driver behavior/attention

INFR3120 Prof. Richard W. Pazzi

Page 42

Future Research Directions (3/3)

INFR3120 Prof. Richard W. Pazzi

Page 43

Future Research Directions (3/3)

Networked 3D Virtual Environments
Vehicular and Sensor Network Simulator
- To test protocols, HCI and applications in a larger scale
- To assess driver behavior/attention
- Intelligent Transportation Incident Management Training

INFR3120 Prof. Richard W. Pazzi

Page 44

INTRODUCTION

INFR3120 Prof. Richard W. Pazzi

45

The World Wide Web

Affectionately called The Web
It is a collection of information stored on the networked computers over
the world.

The WWW was proposed in 1991 by

Tim Berners-Lee at CERN.

INFR3120 Prof. Richard W. Pazzi

Web or Internet?

They are not the same thing!

The Internet is a collection of computers or
networking devices connected together.
- They have communication between each other.
- Decentralized design that there is no centralized body
controls how the Internet functions.

The Web is a collection of documents that are

interconnected by hyper-links.
- These documents are accessed by web browsers and
provided by web servers.
INFR3120 Prof. Richard W. Pazzi

Internet Terminology

Client
- Any computer on the network that requests services from
another computer on the network.

Server
- Any computer that receives requests from client
computers, processes and sends the output.

Web Page
- Any page that is hosted on the Internet.

Web Development
- The process of creating, modifying web pages.

INFR3120 Prof. Richard W. Pazzi

Web Browser (Web Client)

It is a program that retrieves information from the Web.

INFR3120 Prof. Richard W. Pazzi

All
CSC172
copyrights

Market Share (2014)

INFR3120 Prof. Richard W. Pazzi

50

Web-servers
A web browser is a software application for retrieving, presenting and
traversing information resources on the World Wide Web.
An information resource is identified by a Uniform Resource Identifier
(URI/URL) and may be a web page, image, video or other piece of
content.
Hyperlinks present in resources enable users easily to navigate their
browsers to related resources.

INFR3120 Prof. Richard W. Pazzi

51

Web server Market Share (2014)

INFR3120 Prof. Richard W. Pazzi

52

Introduction

HTML

INFR3120 Prof. Richard W. Pazzi

53

HTML Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page
content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph

INFR3120 Prof. Richard W. Pazzi

What is HTML?
HTML is a standard language for describing web pages.
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
TAGS

<tagname>content</tagname>

HTML tags are keywords surrounded by angle brackets

HTML tags normally come in pairs like <p> and </p>
The end tag is written like the start tag, with a slash before the tag name
Start and end tags are also called opening tags and closing tags

INFR3120 Prof. Richard W. Pazzi

55

HTML Page Structure

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

INFR3120 Prof. Richard W. Pazzi

56

The <!DOCTYPE> Declaration

A browser can only display an HTML page 100% correctly if it knows the
HTML version and type used. (there are many different documents on
the web)
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd">

INFR3120 Prof. Richard W. Pazzi

57

Writing HTML code

Use Notepad (or any simple text editor)
AVOID:
- Adobe Dreamweaver,
- Microsoft Expression Web
- CoffeeCup HTML Editor

WHY?? For learning purposes

INFR3120 Prof. Richard W. Pazzi

58

Your first HTML page

Write or copy the following code into Notepad
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Save as .htm (or .html)

Double click your HTML file to see the results

INFR3120 Prof. Richard W. Pazzi

59

HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag *

Element content

End tag *

<p>

This is a paragraph

</p>

<a href="default.htm">

This is a link

</a>

<br>

Some HTML elements have empty content

Empty elements are closed in the start tag
Most HTML elements can have attributes

INFR3120 Prof. Richard W. Pazzi

60

Nested HTML Elements

HTML documents consist of nested HTML elements.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).

INFR3120 Prof. Richard W. Pazzi

HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
<a href="http://www.w3schools.com">This is a link</a>
Links are defined with <a>
The link address is specified in the href attribute
*Attribute values should always be enclosed in quotes

INFR3120 Prof. Richard W. Pazzi

62