Lecture 1 - Introduction

download Lecture 1 - Introduction

of 62

description

awe

Transcript of Lecture 1 - Introduction

  • INFR 3120 Web Programming

    Lecture 1 Introduction

    Prof. Richard W. Pazzi

  • INFR3120 Prof. Richard W. Pazzi

    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

    2

    Administrative Details

  • INFR3120 Prof. Richard W. Pazzi

    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.

    3

    Course Preliminaries (1)

  • INFR3120 Prof. Richard W. Pazzi

    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

    4

    Course Preliminaries (2)

  • INFR3120 Prof. Richard W. Pazzi

    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.

    5

    Course Preliminaries (3)

  • 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.

    6

  • 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.

    7

  • 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.

    8

  • 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.

    9

  • INFR3120 Prof. Richard W. Pazzi

    Course Preliminaries (4) - Schedule

    10

    Lecture # Date Topics

    Week 1 Sept 10, 2015 Sept 14, 2015

    Introduction, Course Overview, Intro to Web Development, Tools, Resources, HTML Part 1

    Week 2 Sept 17, 2015 Sept 21, 2015 HTML Part 2, CSS

    Week 3 Sept 24, 2015 Sept 28, 2015 HTML Part 3, HTML5, CSS3

    Week 4 Oct 1, 2015 Oct 5, 2015 JavaScript Part 1

    Week 5 Oct 08, 2015 Oct 12, 2015 JavaScript Part 2

    Week 6 Oct 15, 2015 Oct 19, 2015 JQuery

    Week 7 Oct 22, 2015 Oct 26, 2015 PHP Part 1

    Week 8 Oct 29, 2015 Nov 02, 2015 Midterm

    Week 9 Nov 05, 2015 Nov 09, 2015 SQL, MySQL

    Week 10 Nov 12, 2015 Nov 16, 2015 PHP + MySQL

    Week 11 Nov 19, 2015 Nov 23, 2015 PHP with XML

    Week 12 Nov 26, 2015 Nov 30, 2015 Project Presentation/Demo

    Week 13 Dec 03, 2015 Project Presentation/Demo

  • INFR3120 Prof. Richard W. Pazzi

    - 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.

    11

    Course Preliminaries (5) - Schedule

  • INFR3120 Prof. Richard W. Pazzi

    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.

    12

  • INFR3120 Prof. Richard W. Pazzi

    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.

    13

    Evaluation

    Activity Weight Tentative Dates (may change)

    Project 30% Dec 3rd, 2015

    Labs 15% Throughout the term

    Midterm 40% Oct 29, 2015 Theory Nov 2, 2015 - Practical

    Participation (Quizzes, Hands-on exercises)

    5% Throughout the term

    Project Presentation/Demo

    10% Last 2 weeks of classes (Nov 26 Dec 3)

  • INFR3120 Prof. Richard W. Pazzi

    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.

    14

    Quizzes (Hands-on exercises)

  • INFR3120 Prof. Richard W. Pazzi

    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.

    15

    Course Preliminaries (12)

  • INFR3120 Prof. Richard W. Pazzi

    ICE-BREAKER

    Please go to:

    www.rwpoll.com

    Session ID: will be given in class

    16

    Lets test TurningPoint and ResponseWare

  • INFR3120 Prof. Richard W. Pazzi

    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

    17

    A. B. C. D. E.

    0% 0% 0%0%0%

  • INFR3120 Prof. Richard W. Pazzi

    Fastest Responders

    18

    Seconds Participant Seconds Participant

  • INFR3120 Prof. Richard W. Pazzi

    Professor Richards best office hours?

    A. Mon 11:00 1:00 PM

    B. Wed 10:00 noon

    C. Thu 2:00 4:00 PM

    D. Other??

    19

    A. B. C. D.

    0% 0%0%0%

  • INFR3120 Prof. Richard W. Pazzi

    20

  • INFR3120 Prof. Richard W. Pazzi

    MY RESEARCH WORK

    Vehicular Networks

    Wireless Sensor Networks

    Remote Rendering and Streaming of Interactive VEs

  • INFR3120 Prof. Richard W. Pazzi Page 22

    Introduction

    7B people

    9B people

    by 2050

  • INFR3120 Prof. Richard W. Pazzi Page 23

    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 24

    Introduction

  • INFR3120 Prof. Richard W. Pazzi Page 25

    Introduction

    Annual Traffic Accident Fatalities

    230K Americas

    1.2 million die in road accidents every year

    50 million are injured

  • INFR3120 Prof. Richard W. Pazzi Page 26

    Introduction

    people take hours to commute

    Other traffic-related problems

    Increased cost of food and freight transport

    Increase in CO2 emission.

  • INFR3120 Prof. Richard W. Pazzi Page 27

    Initiatives (1/2)

    greener technologies

    alternative fuel

    autonomous driving

    Smart Cars

    Googles driverless car

    electric cars Abu Dhabi PRT Personal Rapid Transport

  • INFR3120 Prof. Richard W. Pazzi Page 28

    Initiatives (2/2)

    Integrated Transport

    Systems

  • INFR3120 Prof. Richard W. Pazzi Page 29

    Vehicular ad hoc and Sensor Networks

    Vehicles talking to each other

    Caution: slow

    traffic ahead

    Safe to

    change lane

    Warning!

    slowing down

    Finding

    alternative route

  • INFR3120 Prof. Richard W. Pazzi Page 30

    Vehicular ad hoc and Sensor Networks

    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

    ...

    Some envisioned applications

  • INFR3120 Prof. Richard W. Pazzi Page 31

    Vehicular ad hoc and Sensor Networks

    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

    Challenges

  • INFR3120 Prof. Richard W. Pazzi Page 32

    My Research Work 1

    Mobility management in IEEE802.11 (9/12)

    AP1

    AP2

    AP3

    Waives scanning

    process

  • INFR3120 Prof. Richard W. Pazzi

    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

    Page 33

  • INFR3120 Prof. Richard W. Pazzi

    My Research Work 2

    Trail Setup

    The mobile sink creates a cluster

    CLU_CFG

    Page 34

  • INFR3120 Prof. Richard W. Pazzi

    My Research Work 2

    Trail Setup

    And leaves a trail as it moves

    BEACON

    BEACON

    Page 35

  • INFR3120 Prof. Richard W. Pazzi

    MY RESEARCH WORK III Remote 3D Rendering and Streaming for Mobile Devices

    Page 36

  • INFR3120 Prof. Richard W. Pazzi

    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

    My Research Work 3

    Brief Overview

    Page 37

  • INFR3120 Prof. Richard W. Pazzi

    Remote 3D Rendering

    + Streaming + Image-based Rendering

    = Complex 3D environments on graphics constrained hardware

    Interactive Streaming Protocol

    Network

    Rendering server

    My Research Work 3

    Brief Overview

    Page 38

  • INFR3120 Prof. Richard W. Pazzi

    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

    Page 39

  • INFR3120 Prof. Richard W. Pazzi Page 40

    Future Research Directions (1/3) For the long term...

    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.

    Vehicular Ad hoc Networks

  • INFR3120 Prof. Richard W. Pazzi Page 41

    Future Research Directions (2/3)

    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

    Vehicular Sensor Networks

  • INFR3120 Prof. Richard W. Pazzi Page 42

    Future Research Directions (3/3)

    Vehicular and Sensor Network Simulator

    - To test protocols, HCI and applications in a larger scale

    - To assess driver behavior/attention

    Networked 3D Virtual Environments

  • INFR3120 Prof. Richard W. Pazzi Page 43

    Future Research Directions (3/3)

  • INFR3120 Prof. Richard W. Pazzi Page 44

    Future Research Directions (3/3)

    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

    Networked 3D Virtual Environments

  • INFR3120 Prof. Richard W. Pazzi

    INTRODUCTION

    45

  • INFR3120 Prof. Richard W. Pazzi

    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.

    All

    copyrights

    reserved by

    C.C. Cheung

    2003.

    CSC172

    0 Introduc

    tion to

    Internet

    49

  • INFR3120 Prof. Richard W. Pazzi

    Market Share (2014)

    50

  • INFR3120 Prof. Richard W. Pazzi

    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.

    51

  • INFR3120 Prof. Richard W. Pazzi

    Web server Market Share (2014)

    52

  • INFR3120 Prof. Richard W. Pazzi

    HTML

    Introduction

    53

  • INFR3120 Prof. Richard W. Pazzi

    HTML Example

    My First Heading

    My first paragraph.

    The DOCTYPE declaration defines the document type

    The text between and describes the web page

    The text between and is the visible page

    content

    The text between and is displayed as a heading

    The text between and 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 content

    HTML tags are keywords surrounded by angle brackets

    HTML tags normally come in pairs like and

    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

    55

  • INFR3120 Prof. Richard W. Pazzi

    HTML Page Structure

    My First Heading

    My first paragraph.

    56

  • INFR3120 Prof. Richard W. Pazzi

    The 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

    HTML 4.01

    XHTML 1.0

    57

  • INFR3120 Prof. Richard W. Pazzi

    Writing HTML code

    Use Notepad (or any simple text editor)

    AVOID:

    - Adobe Dreamweaver,

    - Microsoft Expression Web

    - CoffeeCup HTML Editor

    WHY?? For learning purposes

    58

  • INFR3120 Prof. Richard W. Pazzi

    Your first HTML page

    Write or copy the following code into Notepad

    My First Heading

    My first paragraph.

    Save as .htm (or .html)

    Double click your HTML file to see the results

    59

  • INFR3120 Prof. Richard W. Pazzi

    HTML Elements

    Start tag * Element content End tag *

    This is a paragraph

    This is a link

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

    Some HTML elements have empty content

    Empty elements are closed in the start tag

    Most HTML elements can have attributes

    60

  • INFR3120 Prof. Richard W. Pazzi

    Nested HTML Elements

    HTML documents consist of nested HTML elements.

    My First Heading

    My first paragraph.

    The element defines the whole HTML document.

    The element has a start tag and an end tag .

    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"

    This is a link

    Links are defined with

    The link address is specified in the href attribute *Attribute values should always be enclosed in quotes

    62