Chapter 1 Highlights CSIS-390. A graduate of Oxford University wrote the first web client and...

Chapter 1 HighlightsCSIS-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 into your browser’s address bar.

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

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

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

5. The web server, having received the request, looks for the web page on its hard disk.

6. The server retrieves the web page and returns it to the browser.

7. Your browser displays the web page.

REQUEST/RESPONSE PROCEDURE

Request/response 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.


6. With the home page now in memory, the web server notices that it is a fi le incorporating PHP scripting and passes the page to the PHP interpreter.

7. The PHP interpreter executes the PHP code.

8. Some of the PHP contains MySQL statements, which the PHP interpreter now passes to the MySQL database engine.

9. The MySQL database returns the results of the statements back to the PHP interpreter.

10. The PHP interpreter returns the results of the executed PHP code, along with the results from the MySQL database, to the web server.

11. The web server returns the page to the requesting cl ient, which displays it.


Request/response 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 TierThe 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 pageHTML and CSS rendering JavaScript interpreter

TIERS OF A WEB APPLICATION

2. Server TierThe web server, daemon softwareExamples: 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.


3. Database TierDatabase serverExamples: MySQL, Microsoft’s SQL Server, Oracle 8i or rDB, IBM’s DB2, PostgreSQL, SQLite, etc.

Responsible for content management


HyperText Markup Language

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” or formatting tags.

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

CSS

Cascading Style SheetsUsed 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 IEIn 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 popular server-side scripting language http://php.net

Comes with Apache (popular free web server software)

Example:http://www.w3schools.com/php/showphp.asp?fi lename=demo_loop_for

PHP stands for PHP Hypertext Pre-processor, where



PHP stands for PHP Hypertext Pre-processor, where ….

PHP

http://php.net/

http://www.w3schools.com/php/showphp.asp?filename=demo_loop_for



SEMANTIC VS STYLE

Semantic = Has Meaning

Style =Specifies Appearance

SEMANTIC VS STYLE

Semantic Meaning

<img src=“tiger.jpg”>

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

http://www.webstandards.org/

W3C – WHAT IS IT ANYWAY?

The World Wide Web Consortium (W3C) international consortium of web developerssub-organizations, full-time staff, and regular people

Work together to develop Web standards

http://validator.w3.org/

http://www.w3.org/



Web Hypertext Application Technology Working GroupPioneers 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

FixedExample 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

LivingExample 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 develop browsers

and tools for a specifi c standard (HTML 4.01)

Designers can develop web pages and applications for the same specifi c standard (HTML 4.01).

Since the standard won’t change, everything will work forever, right?

Living Vendors develop and update

browsers based on the current l ive standard, which is always adding new innovations.

Thus, designers can develop a web applications using the latest innovations, i .e., they don’t have to settle on a specifi c version, i .e. 4.01.

Since the standard is constantly changing, old websites might break or become obsolete as browsers evolve with the l iving standard.


FixedWeb 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!

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


WHY STANDARDS?

Advantages1. Accessibility2. Forward Compatibility3. Simpler and Faster Development4. Faster Download & Display

WHY STANDARDS?

1. Accessibility2. Forward Compatibil ity3. Simpler and Faster

Development4. Faster Download &

Display

Standardized web pages look good on all browsers.

And on all different types of devices.Cell phonesHandheld computersScreen readers for the visually impaired

WHY STANDARDS?

1. Accessibil ity

2. Forward Compatibility

3. Simpler and Faster Development

4. Faster Download & Display

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. Accessibil ity2. Forward

Compatibility

3. Simpler and Faster Development


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. Accessibil ity2. Forward Compatibil ity3. Simpler and Faster

Development


Style/Appearance tags are bloated

Rather than load bloated HTML for every page, just load one style sheet for an entire website

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

More 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


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

Chapter 1 Highlights CSIS-390. A graduate of Oxford University wrote the first web client and...

Documents

Transcript of Chapter 1 Highlights CSIS-390. A graduate of Oxford University wrote the first web client and...