Transcript Introduction to web development

Chapter 1
1
Learning Outcomes

Load a web page from the Internet or an intranet
into a web browser.
View the source code for a web page in a web
browser.
Describe the components of a web application.
Describe HTTP requests and responses.
Distinguish between the way a web server
processes static web pages and dynamic web
pages.
Name the five major web browsers.
Describe the use of JavaScript.
Distinguish between HTML and CSS.


Explain how you deploy a website on the Internet.
Describe the components of an HTTP URL.







2
The Evolution of the Internet

Internet
 Interconnected network of computer networks
 ARPAnet
○ Advanced Research Project Agency
○ 1969 – four computers connected
 NSFnet
○ National Science Foundation
 Use of the Internet was originally limited to
government, research and academic use
 1991 Commercial ban lifted
3
Growth of the Internet
https://dazeinfo.com/wp-content/uploads/2014/11/Internet-users-in-the-world.jpg
4
Internet Usage-June 2016
5
Top 10 Internet
(usage in millions June 2016)
China, 721.4
2. India, 462.1
3. United States, 286.9
4. Brazil, 139.1
5. Indonesia, 132.7
6. Japan, 115.1
7. Russia, 103.1
8. Nigeria, 97.2
9. Germany, 71.7
10. Mexico, 69.0
1.
http://www.internetworldstats.com/top20.htm
6
Reasons for Internet Growth
that began in the 1990s
Removal of the ban on commercial activity
 Development of the World Wide Web by Tim
Berners-Lee at CERN (physics lab in Geneva,
Switzerland) beginning in 1989
 Development of Mosaic, the first graphicsbased web browser at NCSA
 Convergence of technologies:

 Affordable personal computers with GUI Operating
Systems
 Affordable Internet service providers
7
The World Wide Web
The graphical user interface to information
stored on some of the computers
connected to the Internet.
8
Web Standards
and the W3C Consortium
W3C – World Wide Web Consortium



http://www.w3.org
Develops recommendations and prototype
technologies related to the Web
Produces specifications, called Recommendations,
in an effort to standardize web technologies
 WAI – Web Accessibility Initiative
9
Web Accessibility
“The power of the Web is in its universality. Access by
everyone regardless of disability is an essential
aspect.” – Tim Berners-Lee
Accessible
Websites
provide accommodations that help individuals
to individuals with visual, auditory, physical, and
neurological disabilities overcome barriers
WAI – Web Accessibility Initiative
 Develops accessibility recommendations
 WCAG 2.0
 Web Content Accessibility Guidelines
http://www.w3.org/WAI/WCAG20/quickref/
10
Web Accessibility
Section 508 of the Rehabilitation Act
Requires that government agencies must give
individuals with disabilities access to information
technology that is comparable to the access
available to others
11
Universal Design
“The design of products and
environments to be usable by all people,
to the greatest extent possible, without
the need for adaptation or specialized
design.”
– The Center for Universal Design
http://www.design.ncsu.edu/cud/about_ud/about_ud.htm
12
Components of a Web Application
Desktop
Computer
Web Server
The
Internet
Tablet
Smart Phone
The Client is anywhere your users are viewing your
site: mobile devices, laptops, or desktop computers.
13
Architecture of the Internet
LAN
LAN
LAN
LAN
LAN
WAN
WAN
WAN
IXP
IXP
IXP
WAN
LAN
LAN
LAN
LAN
LAN
LAN
LAN
14
Static versus Dynamic Web
Pages

Static
 content changes only when web developer uploads new
content
 consists of a series of HTML files, each one representing
a physical page of a website
 each page is a separate HTML file

Dynamic
 content changes dynamically, sometimes based on user
input
 uses server technologies to dynamically build a webpage
right when a user visits the page
 the server finds a bunch of different pieces of information
that it writes into a single cohesive web page, which is
what you see
15
Web server delivering static web page
HTTP request
HTML
file
HTTP response
(with HTML)
Client
Web Server
(web browser)
Web server delivering dynamic web page
HTTP request
HTTP response
(with HTML)
Client
(web browser)
Web Server
Application Server
Database Server
16
Web Browsers:
software used to view web content
Firefox
 Chrome
 Internet Explorer
 Opera
 Safari

17
File Transfer Programs:
software used to upload (or download) content to
a web server
FileZilla
 WS_FTP
 SmartFTP (Windows only)
 CoreFTP
 FireFTP
 CyberDuck
 Fetch (Mac only)

18
FileZilla
Web Programmer’s Computer
Web Server Computer
19
Web Programming Languages
Server-side: executed on
the server side by the web
server
Client-Side: executed on
the client side by web
browser
ASP.NET
 PHP
 JSP
 ColdFusion
 Ruby
 Perl
 Python



JavaScript
JavaScript Frameworks
 Ajax
 jQuery
 Node.js
 Bootstrap
20
How JavaScript is implemented
HTTP request
HTML
files
HTTP response
(with HTML and
JavaScript)
Client
(web browser)
JavaScript
Files
Web Server
Common uses of JavaScript




Form Data Validation
Image swaps and image rollovers
Accordions
Dropdown menus
21
Internet Protocols

Protocols
› Rules that describe the methods used for
clients and servers to communicate with
each other over a network.

There is no single protocol that makes the
Internet and Web work.

A number of protocols with specific
functions are needed.
22
Common Internet Protocols

Official Communication Protocol: TCP/IP

Specialized Protocols:
 File Transfer: FTP
 E-mail: SMTP, POP3, IMAP
 Websites: HTTP
23
HTTP
Hypertext Transfer Protocol

A set of rules for exchanging files such as text,
graphic images, sound, video, and other
multimedia files on the Web.
HTTP Request
HTTP Response

Web browsers send HTTP requests for web pages and
their associated files.

Web servers send HTTP responses back to the web
browsers.
24
IP Address

Each device connected to the Internet has a
unique numeric IP address.

These addresses consist of a set of four groups
of numbers, called octets.
74.125.73.106 will get you Google!

An IP address may correspond to a domain
name.
25
Domain Name

Locates an organization or other entity on the
Internet

Domain Name System
◦ Divides the Internet into logical groups and
understandable names
◦ Associates unique computer IP Addresses with the
text-based domain names you type into a web
browser
◦
◦
Browser: http://google.com
IP Address: 74.125.73.106
26
URL: Uniform Resource Locator
Represents the address of a resource on the Internet.
What happens if the user omits
part of the URL


If you omit the protocol, the default of http:// will be used
If you omit the filename, the default document name for
the web server will be used
 This is typically index.html (or default.html)
 This is why we ALWAYS name our website’s Home Page
index.html in CPT 162
27
TLD: Top-Level Domain Name

A top-level domain (TLD) identifies the rightmost part of the domain name.
 Some generic TLDs:
.com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat,
.jobs, .name, .biz, .museum, .info, .coop, .pro, .travel
 Country Code TLDs are 2 character codes intended to
indicate the geographical location (country) of the web
site:
.tv, .ws, .au, .jp, .uk
28
Domain Name System
The Domain Name System (DNS) associates
Domain Names with IP addresses.
 How does it work?

 End User types domain name into Web Browser




address bar
DNS returns ip address of that domain
Web Browser sends HTTP request to that ip address
HTTP request is received by Web Server (whose ip
address matches) where content is stored
Web Server sends file(s) back to Web Browser using
HTTP response
29
29
Page Requests
PAGE
REQUEST
Domain Name
IP Address DNS
Web Browser
requests web page
PAGE
RESPONSE
Web Browser
displays web page
Use TPC/IP
to send HTTP Request
Web Server
Use TCP/IP
to send HTTP Responses
with web page files & images
30
30
HTML – Hypertext Markup Language
Used to identify/describe the structure of the
content in the web page
 The set of markup symbols or codes placed in a
file intended for display on a web browser.

 Element or tag – individual markup code
 Attribute – modifies the purpose of a tag

Examples
○ <head></head>
○ <body></body>
○ <h1></h1>
○ <p></p>
31
CSS – Cascading Style Sheets
Used to describe how the HTML elements are
to be displayed (formatted) on screen, paper, or
in other media
 A CSS rule-set consists of a selector and a
declaration block

 Declaration blocks are made up of property value pairs

Examples
○ h1 {color:blue;margin-top:10px}
○ p {text-align:left; line-height:1.25}
32
Your First HTML5 Web Page:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
33
Under the Hood of a Web Page
DTD – describes the markup language syntax
HTML element– contains the web page document
Head element – contains the head section
The head section contains information that describes the
web page document
Title element– Text displays in title bar of window
Meta element – describes the character encoding
Body element – contains the body section
The body section contains the text and elements that
display in the browser viewport.
34
Name, Save and Test Your
Web Page

Create a root folder for your website

Create your file in a text editor and save as
index.html, if it is the home page for the website
 Text Editors Windows: Notepad, Notepad++
 Text Editors Mac: TextEdit, TextMate, BBEdit

Launch a web browser and open your file
 Web Browsers: Internet Explorer, FireFox, Chrome, Opera,
Safari
35
Cross Browser Compatibility



“Compatibility” is not a term which means “looks
and behaves identically” — instead, it may be
better described as “performs equivalently under
alternative conditions.”
Test your web pages on all of the major browsers,
including older versions of Internet Explorer that
are still in common use.
Use the HTML5 and CSS3 features that are
supported by most modern browsers, which are
the features that are presented in this book. But
use the workarounds so those features will work in
all browsers still in use.
36
Responsive Web Design (RWD)
RWD refers to websites that are
designed to adapt gracefully to the
screen size.
 Typically, the overall look-and-feel of a
website will remain consistent from one
screen size to the next.
 Media queries, scalable images, and
flexible layouts are the backbone of
RWD.

37