Web Development

Module 1 - Introduction
Contents
• What is the Internet?
• What is the World Wide Web?
• What else is there apart from the Web?
• Understanding Web Development
• Language versions
• Getting Started.

2
WHAT IS THE INTERNET?
Internet – The Network
It is a massive network of networks
Server
Client Internet:
Interconnected
network of
computers and
IP Address network devices IP Address
136.186.5.30 74.125.237.215
TCP/IP
google.com.au
In simple terms:
Message interception
possible!!! TCP handles the messages
IP handles the delivery
Question: Do cell phones have IP addresses?
4
Internet – Protocols
• To help understand how information travels over
the Internet, a knowledge of the Internet protocol
suite is needed.
• The Internet protocol suite is the networking
model and a set of communication protocols used
for the Internet and similar networks.
• It is commonly known as TCP/IP, because of its
most important protocols: Transmission Control
Protocol(TCP) and Internet Protocol (IP).
• The Internet has four abstraction layers which are
used to sort all Internet protocols according to the
scope of networking provided.

5
Internet – Layers and Protocols
Application
• DHCP DHCPv6 DNS FTP HTTP IMAP IRC LDAP MGCP NNTP BGP NTP POP RPC
RTP RTSP RIP SIP SMTP SNMP SOCKS SSH Telnet TLS/SSL XMPP and more

Transport
• TCP UDP DCCP SCTP RSVPand more

Internet
• IP (IPv4 IPv6) ICMP ICMPv6 ECN IGMP IPSEand more

Link
• ARP/InARP NDP OSPF Tunnels (L2TP) PPP
Media access control (Ethernet DSL ISDN FDDI) and more

6
Internet – Domain Name System (DNS)
DNS, URLs
Server
Client Internet:
google.com.au Interconnected
network of
computers and
IP Address network devices IP Address
136.186.5.30 TCP/IP 74.125.237.120

URLs
DNS
Internet Addresses Look up Addresses
google.com.au => 74.125.237.120

7
Questions

How do you spy on

people over the Internet?

8
Question

Are www.google.com.auand
www.google.com.hkasamew
eb site or two different web
sites?

9
THAT WAS THE INTERNET.

BUT …
WHAT IS THE WORLD WIDE WEB
OR THE WEB?

10
The Web – The Method
A way of accessing information over the Internet.

Client HTTP Request Server

Browser Web
Internet:
Interconnected
network of
HTTP Response
computers
IP Address TCP/IP IP Address
HTML
Web pages

Uses the HTTP Protocol

The Web – Its History
• In 1990 Tim Berners-Lee
authored a document
outlining fundamentals of
the web
– The ability of links to
crossmachine boundaries
(URLs)
– “A simple,
commonprotocol for
exchanging hypertext
documents”
(HTTP)
– A common
documentmark-up
language (HTML)
– Web Browsers
 – HTTP Servers
http://www.w3.org/History.html
12
The Web – Its History (continued)
• In late 1990 and early 1991,Tim Berners-Lee
created the World Wide Web at the European
Laboratory for Particle Physics (CERN) in
Geneva, Switzerland
• The original purpose of the World Wide Web
(WWW) was to provide easy access to cross-
referenced documents that existed on the
CERN computer network
• Hypertext allows you to quickly link to and open
other pages.
• Hypertext Transfer Protocol (HTTP)
enabledHTTP requests / responses over the
Internet
http://www.w3.org/History.html
13
The Web – Its History (continued)
• “Web 1.0” (1990 to early 2000)
forPresentationgeneric term used to describe
the web as it was, with governments,
companies and advertisers producing web
content for users to access
– brochures, reports, lectures(content display)
• “Web 2.0” (Since 2000)
forCommunicationgeneric term involves the
users, users create content, and they also
help organise, share, remix, critique, and
update. It embraces the architecture of
participation
– conversations, collaborations, creativity,
sharing(userinteraction)
14
Web 2.0
Web 2.0 tools and sites, users essentially publish
content directly to the Internet for access by
other users.

15
15
The Web – Its Terminology
Websites are collections of relatedWeb
documents
put together for a specific purpose. The
location on the Internet of the Web pages and
related files
• There are many different purposes for Web sites including
scientific publication, education, ecommerce,
entertainment, social networking, political campaigns etc.

16
The Web – Its Terminology
Web Pages (Web documents) are files
createdusing
• HyperText Markup Language (HTML)
used to mark-up page structure and content
• Cascading Style Sheets (CSS)
used to mark-up page presentation
• JavaScript (for client-side
scripting)used to enhance web user
interaction.
17
The Web – Its Terminology
Web Documents –are Hypertext documents.
Hypertext is text that can act as a link (or hyperlink)
to another document location.
• With hypertext you can skip from one topic to another
in any order that suits you and your objectives
• Hyperlinks may point to another part of the
samedocument, or point to another entirely
different document (on the same computer or on
anothercomputer). Clickto see a web page with two
types of links.
• Hyperlinks can trigger specific functions provided
by the website.

18
The Web – Its Terminology
Uniform Resource Locators (URLs) are strings
used to identify the locations of unique
resources on the web, e.g., web pages
and image files.
• To complete the URL, we include the protocol
at the start of the URL value.
http://mercury.ict.swin.edu.au/cos10005/qhe/lab01/info.html#ex01
protocol server path filename id

19
The Web – Its Software
• Web Browsers (on apersonal deviceas a client)
– Send HTTP requests
– Receive HTTP responses
– Interpret and render/display completed Web Documents
– Popular Browsers:Chrome,Firefox, Safari, Internet Explorer, Opera

• Web Servers/HTTP Servers (on a remote computer as a

server)
– Receive HTTP requests
– Retrieve or create Web Documents (Clickfordemo)
– Manage and make HTTP responses
– The most popular Web server software is
Apache HTTP Server (Apache)
– The second most popular Web server is
Microsoft Internet Information Services (IIS) for Windows

20
The Web – Its Protocol
• Hypertext Transfer Protocol (HTTP)
– The key “protocol” that manages
therequest/response exchange between
browsers and servers
• Hypertext Transfer Protocol Secure (HTTPS)
– HTTP secured with data encryption

21
The Web – Popular Applications
• Search Engine - essential to sift through and index
themassive amount of content on the web, e.g.,
google.comandbing.com.
• Social Applications - communication tools
andinteractive tools often based on the Web,
e.g., facebook.comandtwitter.com.
• Media Streaming - audio and video that are
accessedonline via browsers, e.g., Youtubeand Netflix.
• Web Services - a software system designed to
supportinteroperable machine-to-machine
interaction over a network, e.g., Google Maps
(http://www.fortiusflooring.com.au/find-a-store/).

22
WHAT ELSE IS THERE IN THE
INTERNET APART FROM THE WEB?

23
What else? – Email
• is a way of doing email over the Internet
SMTP
Client Server
Email Email
Internet:
Interconnected
network of
IMAP/Pop
computers
IP Address IP Address
10.56.36.18 TCP/IP 102.30.2.25

• Uses the SMTP and IMAP/POP Protocols

• Popular applications: gmail.comand outlook.com
24
What else? – Online Storage
• is a way of transferring files over the Internet.
Client FTP/SCP Server
File File
Internet:
Interconnected
network of
FTP/SCP
computers
IP Address TCP/IP IP Address

• Protocols: FTP andSCP

• Popular applications: Dropbox, Google Driveand
OneDrive(formerlySkyDrive)
25
What else? – Remote Access
• is a way of controlling another machine
over the Internet.

Client Telnet/SSH Server

Terminal OS
Internet:
Interconnected
network of Telnet/SSH
computers
IP Address TCP/IP IP Address

• Uses the Telnet or SSH Protocols

• Popular applications: LogMeIn, Microsoft Remote Desktopand
Chrome Remote Desktop

26
UNDERSTANDING WEB DEVELOPMENT
WHO SHOULD I BECOME?
WHAT HARDWARE SHOULD I HAVE?
WHAT SOFTWARE SHOULD I INSTALL?
WHAT LANGUAGE SHOULD I LEARN?
Web Development
• The People
• The Hardware
• The Software
• The Languages

28
Web Development – The People
• Web developers are a programmers
whospecialise in the development of websites.
Their focuses are:
– Robust backbone
– Satisfactory performance
– Technically sound code
• Web Designers are people that has knowledge
ofdesigning visually appealing websites. There
focuses are:
– Layout
– Color scheme
– User-friendliness

29
Web Development
• The People
• The Hardware
• The Software
• The Languages

30
Web Development – The Hardware
• Server (“back end”) Local vs. Cloud

– Responsible for data storage and management,

oftenhas a database from which a client requests
information
– Fulfills a request for information by managing
therequest or serving the requested information to
the client
• Client (“front end”)
– Presents an interface to the user
– Gathers information from the user, submits it to
aserver, then receives, formats, and presents the
results returned from the server

31
Web Development – The Hardware
• A system consisting of a client and a server
is known as a two-tier system

The design of a two-tier client/server system

• Note the client and server are referring to

the physical machine in this illustration

32
 Web Development – The Hardware

Client request

Server
response

IP usually dynamically Fixed public IP Fixed public IP

assigned by ISP, e.g., Telstra, 136.186.123.37 136.186.123.38
Optus and TPG mercury.ict.swin.edu.au mysql.ict.swin.edu.au

The design of a three-tier client/server system

Safety, Consistency and Cost

33
Web Development
• The People
• The Hardware
• The Software
• The Languages

34
Web Development – The Software
• Client software refers to the software the
runson the client machines to communicates
with a server, examples are
– OS– (Windows, Linux, OSX)’s telnet, FTP
• Third party – putty, WinSCP, CyberDuck
– Web Browsers–Internet Explorer, Firefox, Chrome,
Opera, Safari

35
Web Development – The Software
• Server software refers to software that run
onthe server machines, including:
– OS: Windows Server, Linux Server
– Web:Apache, Microsoft Internet
InformationServices
– Database:MS SQL SERVER, ORACLE, MySQL
– Script Support:NodeJS (JavaScript), Apache Tomcat
(Java Server Pages (JSP)), Microsoft ASP (Active Server
Pages), Adobe ColdFusion, Perl, PHP, Python, Ruby

36
Web Development
• The People
• The Hardware
• The Software
• The Languages

37
Web Development – The Languages
• HyperText Markup Language (HTML)is a
markup language designed to specify
Content
structure and content of a web page
• Cascading Style Sheets (CSS) a style
sheetlanguage for describing the look and
formatting (e.g., fonts, colors, spacing) of Web
documents.
Presentation

• Client-side scripting (JavaScript) is a

languageoften used to allow web pages to
interact with
users.
Interactivity
38
Web Development – The Languages
• JavaScript is aclient-sidescripting
languagethat is primarily used to add
interactivity ito web pages.
• JavaScript allows you to:
– Turn static Web pages into applications, such
asgames or calculators. Change the contents of
a Web page after a browser has rendered it
– Create visual effects such as animation
– Control the Web browser window itself

39
Web Development – The Process
Behaviour / Interactivity
Use scripting to control content behaviour

Separate
Presentation
Use CSS to present the content

Separate
Structured Content
Use HTML / XHTML to describe the content
Click hereto see the benefit of separation!
40
LANGUAGE VERSIONS
Which HTML?
Timeline HTML XHTML
1995 2.0
1997 3.2
1997-1998 4.0 Strict, Transitional, Frameset)
1999 4.01
2000 1.0
2001 1.1
2008 5.0 (Draft)
2009 2.0 (abandoned ,
incompatible with 1.x)
2014 5.0
2016 5.1

42
Understand HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title of
document</title></head>
<body>
</body>
</html>

43
Understand HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-
8"><title>Title of
document</title>
</head>
<body>
</body>
</html>

You can use it as a template for your web pages!

44
HTML5 vs. HTML4 vs. XHTML1.0

Source: http://blog.powermapper.com/blog/category/Web-Standards.aspx

45
Reach of HTML5 (continued)
Rank Site Type HTML Version
1 google.com Search Engine HTML5
2 facebook.com Social Media HTML5
3 youtube.com Social Media HTML5
4 yahoo.com Search Engine HTML5
5 baidu.com Search Engine HTML5
6 wikipedia.org Reference HTML5
7 qq.com Technology HTML5
8 taobao.com Shopping HTML5
9 twitter.com Social Media HTML5
10 live.com Portal and Search HTML5
Engine

46
What about CSS?
Timeline Version Capabilities

1996 CSS1 Font, Alignment, Margin, Border

1998 CSS2 Positioning, z-index

2011 CSS2.1 fixes errors in CSS 2

Media Queries, Namespaces, Selectors

2012 CSS3
Level 3, Colour

CSS4? Not yet.

47
And JavaScript?
Timeline Version
March 1996 1.0
August 1996 1.1
June 1997 1.2
October 1998 1.3
1.4 (Server side only)
November 2000 1.5
November 2005 1.6
October 2006 1.7
June 2008 1.8
February 2009 1.8.1
June 2009 1.8.2
July 2010 1.8.5

48 - Web Development, © Swinburne

GETTING STARTED
Getting Started – Software Installation
• Server Software
– Web Server(Apache) to host your web page
• University’s web server
URL: http://mercury.ict.swin.edu.au
• Client Software
– Web Browser:Mozilla FirefoxwithWeb
Developeradd-on to view the web page.
– File Transfer(WinSCPorFilezilla)to
securelytransfer the web page files to the
server
– Text Editor(Notepad++orSublime)to edit
theweb page code

50
WHAT’S NEXT?
– LEARNING HTML