Chapter 1

viraginitysplashInternet and Web Development

Nov 10, 2013 (3 years and 5 months ago)

113 views

Chapter 1
Hi ghl i ghts

CSIS
-
390


A graduate of Oxford
University


wrote
the first web
client and server in
1990.


His
specifications of
URIs, HTTP and HTML
were refined but are
still used as the
backbone of the
WWW

TIM BERNERS
-
LEE

1.
You
enter http://
server.com

i nto your browser’s address bar.


2.
Your
browser l ooks up the IP address for
server.com
.


3.
Your
browser i ssues a request for the home page at
server.com
.


4.
The
request crosses the Internet and arri ves at the
server.com

web server.


5.
The
web server, havi ng recei ved the request, l ooks for the web
page on i ts hard di sk.


6.
The
server retri eves the web page and returns i t to the browser.


7.
Your
browser di spl ays the web page.



REQUEST/RESPONSE PROCEDURE

Request/respo
nse process

BASIC

1.
You enter http://
server.com

into your browser’s address bar.


2.
Your
browser looks up the IP address for
server.com
.


3.
Your
browser issues a request to that address for the web
server’s home page.


4.
The
request crosses the Internet and arrives at the
server.com

web server.


5.
The
web server, having received the request, fetches the
home page from its
hard disk
.



REQUEST/RESPONSE PROCEDURE


6.
Wi th
the home page now i n memory, the web ser ver noti ces that i t i s
a fi l e
i ncorporati ng
PHP scri pti ng and passes the page to the PHP
i nterpreter.


7.
The
PHP i nterpreter executes the PHP code.


8.
Some
of the PHP contai ns MySQL statements, whi ch the PHP
i nterpreter
now passes
to the MySQL database engi ne.


9.
The
MySQL database returns the resul ts of the statements back to
the PHP
i nterpreter
.


10.
The
PHP i nterpreter returns the resul ts of the executed PHP code,
al ong wi th
the resul ts
from the MySQL database, to the web ser ver.


11.
The
web ser ver returns the page to the requesti ng cl i ent, whi ch
di spl ays i t.


REQUEST/RESPONSE PROCEDURE

Request/respo
nse process

DYNAMIC


Content (not really a layer)


The text, images, audio, and video


1.
Structural Layer


Semantic markup with
HTML


2.
Presentational Layer


CSS code to decorate the
HTML

elements


3.
Behavioral Layer


JavaScript

code that can make a web page dynamic by
responding to user interaction


THE LAYERS OF A WEB PAGE

1.
Client Tier


The web browser, rendering engine, web viewer.


Sometimes rendering engines/agents can be embedded in
other applications
.


Examples: Chrome, Firefox, Safari, Internet Explorer,
Opera


Responsible for displaying a web page


HTML and CSS rendering


JavaScript interpreter



TIERS OF A WEB APPLICATION

2.
Server Tier


The web server, daemon software


Examples: Apache, Microsoft IIS,
nginx
, Google’s
GWS, Java System Web Server, Node JS


Responsible for responding to HTTP requests and
server
-
side processing


Server
-
side scripting languages: PHP, ASP, JSP,
ColdFusion, Ruby, Perl, Python, etc.



TIERS OF A WEB APPLICATION

3.
Database Tier


Database server


Examples: MySQL, Microsoft’s SQL Server, Oracle 8i
or
rDB
, IBM’s DB2,
PostgreSQL
, SQLite, etc.


Responsible for content management



TIERS OF A WEB APPLICATION

H
yper
T
ext

M
arkup
L
anguage



A simple text document can be “marked
-
up” with tags to
specify how it should be interpreted
.



<
h1>Level 1 Header</h1
>


<p>This is a paragraph…</p>


HTML

SEMANTICS


HTML was supposed to be a
structural or
semantic

language,


Browser
Wars
led
to the introduction of

style
µ?RU?IRUPDWWLQJ?WDJV?


Formatting tags have been removed
from the HTML standards (called
deprecation
).

CSS

C
ascading
S
tyle
S
heets


Used to specify the style/appearance of
structural elements (HTML tags).


CSS was part of the original design of
the web,


but its use was
abandoned
between
1996
and
2004.


CSS

p {


text
-
indent: 16px;


margins: 12px 0px;


padding: 0px;

}


table {


border: 1px solid black;

}


…nothing to do with the Java programming languages


Originally called
LiveScript



developed by Netscape in 1994


In 1996, Microsoft developed Jscript for IE


In 1996, a standard called
ECMAScript

was
proposed.


In 1999, most major web browsers started to follow
the ECMA standard, even though we still use the
term JavaScript



JAVASCRIPT

<!DOCTYPE html>

<html>

<head>

<script>

function
displayDate
()

{



document.getElementById
("demo").
innerHTML
=Date();

}

</script>

</head>

<body>


<h1>My First JavaScript</h1>

<p id="demo">This is a paragraph.</p>


<button type="button"
onclick
="
displayDate
()">Display
Date</button>


</body>

</html>

HTML &
JAVASCRIPT


A somewhat popul ar server
-
si de scri pti ng l anguage


http://php.net



Comes wi th Apache (popul ar free web server software)



Exampl e:
http
://www.w3school s.com/php/showphp.asp?fi l ename
=
demo_l oop_for



PHP
stands for
P
HP
H
ypertext
P
re
-
pr oc es s or, wher e

ƒ
PHP
s t ands f or
P
HP
H
y per t ex t
P
re
-
pr oc es s or, wher e

ƒ
PHP
s t ands f or
P
HP
H
y per t ex t
P
re
-
pr oc es s or, wher e

ƒ
PHP
s t ands f or
P
HP
H
y per t ex t
P
re
-
pr oc es s or, wher e


….

PHP

SEMANTIC VS STYLE

Semantic
=

Has Meani ng


St yl e
=

Speci f i es
Appear ance



SEMANTIC VS STYLE

Semantic


Meani ng


<i mg sr c=“
t i ger.j pg
”>


<span class=“
caption
”>

This is a picture of a
tiger

</span>


A caption is meaningful.

Images typically have a
caption that describes
the image.

Style




Appearance



<img src=“
tiger.jpg
”>


<font type=“
Arial

style=“
italic

size=“
10pt
”>


This is a picture of a
tiger

</font>


Here, we specify how to
display the caption but
not the fact that it’s
actually a caption.

SEMANTICS + CSS IS BETTER!

<span class=“
caption
”>
Figure 1
</span>

<span class=“
caption
”>
Figure 2
</span>

<span class=“
caption
”>
Figure 3
</span>



<span class=“
caption
”>
Figure 99
</span>


.caption

{


font
-
size:
10pt;


font
-
style:
italic;

}

THIS IS WHY THE FONT TAG SUCKS!

(IT’S A STYLE TAG)

<font type=“
Arial
” style=“
italic
” size=“
10pt
”>

Figure 1
</font>

<font type=“
Arial
” style=“
italic
” size=“
10pt
”>

Figure 2
</font>

<font type=“
Arial
” style=“
italic
” size=“
10pt
”>

Figure 3
</font>



<font type=“
Arial
” style=“
italic
” size=“
10pt
”>

Figure 999
</font>

<font type=“
Arial
” style=“
bold
” size=“
10pt
”>

Sub
-
title
</font>


Imaging if you wanted to change the font size to 12pt
for all image captions?


Good luck!

HISTORY LESSON: THE GOOD
TIMES


Standardization was very important in the
initial design of HTML (1991
-
1994)


HTML was meant to be only
structural
/semantic


The presentation of web pages
depended on the
device.


Netscape & Microsoft created
style tags
(
<font>

for example) so that
web page
designers

could control the presentation of
their web pages.

HISTORY LESSON: BROWSER WARS


Netscape & Microsoft added many proprietary
enhancements to HTML (1994
-
1999)


Proprietary
== Only works for a specific browser


Proprietary == Not Open == Not standard


Web authors would use HTML tags to control
the visual presentation, but pages would look
completely different on different browsers.


In 1998, the web development community and
W3C

said “Enough is enough”


www.webstandards.org

was formed

W3C


WHAT IS IT ANYWAY?


The
World Wide Web Consortium

(W3C)


international consortium of web developers


sub
-
organizations, full
-
time staff, and regular people


Work together to develop Web
standards


http://validator.w3.org
/



Web Hypertext Application Technology
Working Group


Pioneers of HTML5, which better supports web
applications, and the idea of a
living standard
.


founded
by individuals of Apple, the Mozilla
Foundation, and Opera Software in
2004

who
were increasingly
concerned about the W3C’s
direction with XHTML, lack of interest in HTML
and apparent disregard for the needs of real
-
world authors.

HTML5 AND WHATWG

Fixed


Example HTML 3.0



Once the rules are
established, they cannot
be changed.



After a period of time, all
the new ideas that are
considered good are
implemented in a new
standard


HTML 4.0


Living


Example HTML 5



Initial rules are
established based on
previous work



Good changes can be
immediately adopted into
the living standard, i.e.,
progressive improvement

rather than incremental.






FIXED VS. LIVING STANDARD

Fixed


Vendors
devel op
browsers and
tool s
for a speci fi c standard
(HTML 4.01
)



Desi gners can devel op web
pages and appl i cati ons for the
same speci fi c standard (HTML
4.01).



Si nce the standard won’ t
change, ever ythi ng wi l l work
forever, ri ght?


Living


Vendors devel op and update
browsers based on the current
l i ve standard, whi ch i s al ways
addi ng new i nnovati ons.



Thus, desi gners can devel op a
web appl i cati ons usi ng the
l atest i nnovati ons, i.e., they
don

t have to settl e on a
speci fi c versi on, i.e. 4.01.



Si nce the standard i s constantl y
changi ng, ol d websi tes mi ght
break or become obsol ete as
browsers evol ve wi th the l i vi ng
standard.






FIXED VS. LIVING STANDARD

Fixed


Web browsers need to be
backward compatible
with old standards, i.e.,
HTML 1.0, 2.0, 3.0, etc.


Or, the have to specify
that the old standards
are no longer supported.


Designers get trapped in
an old standard that may
no longer be supported.


Websites will still break,
eventually!


Living


Web browsers only need to
support the current living
standard.


But, the current standard
always tries to be backward
compatible.


If an element gets dropped
from the standard it is for
good reason, and designers
shouldn’t expect it to work
in the future.


Websites break, but for
good reasons.







FIXED VS. LIVING STANDARD

WHY STANDARDS?

Advantages

1.
Accessibility

2.
Forward Compatibility

3.
Simpler and Faster Development

4.
Faster Download & Display

WHY STANDARDS?

1.
Ac cess i bi l i t y

2.
For ward Compati bi l i ty

3.
Si mpl er and Faster
Devel opment

4.
Faster Downl oad &
Di spl ay


Standardized web pages
look good on all browsers.


And on all different types
of devices.


Cell phones


Handheld computers


Screen readers for the
visually impaired

WHY STANDARDS?

1.
Accessi bi l i ty

2.
For war d
Compat i bi l i t y

3.
Si mpl er and Faster
Devel opment

4.
Faster Downl oad &
Di spl ay


Future standards are built
on top of current standards


Thus, Web pages made
today will work in the
future


Unless there is a really
good reason to make them
break.

WHY STANDARDS?

1.
Accessi bi l i ty

2.
For ward Compati bi l i ty

3.
Si mpl er and Fas t er
Dev el opment

4.
Faster Downl oad &
Di spl ay


Faster
: You don’t have to
build separate websites
for separate
browsers/devices


Concurrent Development
:

Content and style can be
developed separately by
different teams.

WHY STANDARDS?

1.
Accessi bi l i ty

2.
For ward Compati bi l i ty

3.
Si mpl er and Faster
Devel opment

4.
Fas t er Downl oad &
Di s pl ay


Styl e/Appearance tags
are
bl oated


Rather than l oad bl oated
HTML for ever y page, j ust
l oad one styl e sheet for
an enti re websi te

RENDERING ENGINES


Some web browsers
actually have different
rendering engines for parsing
different
versions of HTML.


The <!
doctype
>

and <
html>

tag
can tell a
browser
which engine to use.


<!DOCTYPE html PUBLIC "
-
//W3C//DTD
XHTML 1.0
Strict
//EN
"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">


<html
xmlns
="http://www.w3.org/1999/
xhtml
"
xml:lang
="en"
lang="en">

RENDERING ENGINES


Standard, validated HTML code can be
rendered faster.


Rendering engine doesn’t have to handle
special cases and errors


Most web browsers can display Non
-
standard HTML,


but a more complex rendering engine must be
used


More complex mean slower rendering.

WHO CARES IF THE RENDERING
ENGINE IS A LITTLE SLOW?


True, on modern
devices
you won’t notice
the difference.


However, consider that the device
rendering the web page could be

an old
cellphone
with a

133
MHz processor.


STANDARDS: BIG MOTIVATION


M
ore
and more people are browsing on
different
types of devices


Tablets, phones, iPods, and now watches.


W3C wants the web to fully work on any kind
of device.


Many non
-
standard websites
won’t display properly
on certain devices.

VALIDATE VALIDATE VALIDATE


http://validator.w3.org/



It’s a pain but…


At least you know that your web page will
display properly on
hundreds of different
browser
variations that now support HTML5.

WEB BROWSER HISTORY


1991
:
TBL

makes the first web browser in his
physics labs. Dr. B gets his braces off and
discovers Clearasil.


1993
:
Mosaic

(the first real graphical browser)
is built.
Free, open source, works
for Mac’s,
Windows, and UNIX. The birth of free porn.


1994
:
Netscape

forms, they develop a browser
and immediately start adding proprietary
stuff.


1995
:
Microsoft

wakes up, makes a browser,
and decides
to add even more proprietary
stuff.

BROWSER HISTORY


1996
-
1999
:
Browser

Wars
…different versions
of
JavaScript, CSS
, and
HTML

emerge. While
standards go down the toilet…at least a lot
cool
S
was developed.


1998
:
Netscape

screws Microsoft
by
making
its code
Open Source
.

Microsoft

fights back by
integrating

its
browser into the Windows 98 and 2000.


2000
:
Microsoft

wins! Netscape gets bought
by AOL. The
.com Bust happens!


Dr. B contemplates becoming a pop star but
then decides to be a professor.

BROWSER HISTORY


2002
:
Kelly Clarkson (not Dr. B) wi ns American Idol!


2003
: Some

programmers who
once worked for Netscape
form the
Mozilla

Foundation


2005
:
Mozilla’s
Firefox

busts out on the scene. First browser
to make a serious dent in Microsoft’s monopoly.


2006
: Standards become important; Developers really start
to make web pages the correct way as TBL envisioned in
1991.


2012: W3C finally aggress that a living HTML5 standard is
the way to go.

Google’s Chrome finally unseats IE as the #1
browser. Life is good again.


SUMMARY


Originally HTML was meant to be a
standard
structural
/semantic language


The Browser wars lead to the de
-
standardization of
HTML,
CSS, and JavaScript.


Proprietary
code and technology (Flash) become popular.


Standardization
has made
a
comeback and HTML5 + CSS +
JavaScript is all you need on the client tier to make web
applications.