Writing the Web / The Story of Fluffy Alon Levi Anders Smestad Dominic Metzger.

Writing the Web / The Story of Fluffy

Alon Levi

Anders Smestad

Dominic Metzger

Overview / Who is Fluffy

Fluffy is Joe Shmo’s dog

Goal

Joe Schmo wants to create a website for his dog, Fluffy.

So, what are his options? How would you do it?

Post Online

Wikis, Blogs, Forums, SAKAI, Myspace etc… Advantages:

Easy to use Quick return

Disadvantages / Limitations: Low control Lack of dynamic content Lack of flexibility Format is fixed (set of options at best)

Create Online

• Building web pages online in your browser• Advantages:

– A bit more control over format– Simple to use– Quick turnaround– Get your own URL

• Disadvantages: Low control Lack of dynamic content Lack of flexibility Format is limited to certain options

Example

Fluffy on pages.google.com: http://fluffy.schmo.googlepages.com/home

Create From Scratch

Design: Photoshop / ImageReady GIMPShop

WYSIWYG: Dreamweaver Frontpage Nvu

Create From Scratch

Advantages: WYSIWYG Existing tools

Disadvantages: Ugly code Less flexibility Limited dynamic content Tweaking can be difficult

Write From Scratch

Writing the code Advantage:

Flexible Complete Control

Disadvantages More difficult Have to know programming concepts Cross platform compatibility Time consuming

Client-side Scripting

• Code is embedded into HTML pages using the SCRIPT tag and storing the code in comments [1]

client-side scripts are run by the viewing web browser

Client Side - Examples

CSS ActiveX JavaScript Adobe Flash Ajax (Google Web Toolkit) GWT

Server Side Scripting [1]

Scripts are run on the web server Generate dynamic HTML pages Interactions with database highly customizable responses based on

the user's requirements, access rights, or queries into data stores.

Server Side

CGI Ruby on Rails, PHP, ASP, JSP

Behind the scenes

In your browser, you type:

“fluffy.is-a-geek.org”

You see:

What just happened?

Browser sends a request to the server named fluffy.is-a-geek.org

(actually http://fluffy.is-a-geek.org/index.html)

The server sends back content corresponding to the request to be displayed in the browser

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Fluffy's Web Store</title> <link href="/stylesheets/fluffy_style.css?1161474328" media="all" rel="Stylesheet" type="text/css" /></head> <body id="store"> <div id="banner"> </div> <div id="columns"> <div id="main"> <h1>Fluffy's Favorite Toys</h1>

etc...

Where is the server? All computers online identified by IP IP is the address of the computer

http://66.102.7.147/ DNS, the domain name to IP directory fluffy.is-a-geek.org --> 169.231.15.203

What is a webserver? A program that runs on a computer Designed to answer requests and send

responses, according to the http protocolGET /index.html HTTP/1.1

Sends back the response:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Fluffy's Web Store</title> <link href="/stylesheets/fluffy_style.css?1161474328" media="all" rel="Stylesheet" type="text/css" /></head> <body id="store"> <div id="banner"> </div> <div id="columns"> <div id="main"> <h1>Fluffy's Favorite Toys</h1> <div id="products"> <table> <tr> <td> </td><td> </td> </tr> <tr> <td class="image"> <img src="http://f3c.yahoofs.com/shopping/mcid8_3238/simg_t_t71xgf4xcjpg70?rm_____DNqevM8Xz"/> </td> <td> <b> Product: Dog Lips Chew Toy<br/> </b> Price: $15.00<br/> <a class="product" href="http://tracking.searchmarketing.com/click.asp?aid=17263475">Buy</a><br/> </td> </tr> <tr> <td> </td><td> </td> </tr> </table> </div>

Webserver extensions

when you want serverside dynamic content cgi php asp coldfusion java ... (postgres mySQL, MSSQL, Oracle ...) application server or a webserver module important when choosing hoster or

installing

Hosting your Content

Considerations. What do you want? static or (server) dynamic? technology preferences? disk space traffic load speed

Someone else hosts it

Various hosting services available: Free: http://www.doteasy.com

Advantages: Don’t worry about maintenance Automatic backups Accessibility – HIGH speed connections

Disadvantages: Costs Limitations

Hosting it yourself Advantages:

Flexible utilize old hardware extra disk space is cheap

Disadvantages: Accessibility Maintenance is your responsibility, backup,

upgrades, power failures line speed is expensive legal issues?

Your domain name Buy one, get what you want ... Get one for free,

fluffynet.tk (Tokelau) Changing ip address

dyndns.org fluffy.dyndns.org fluffy.is-a-geek.net fluffy.shacknet.com

Client Side Scripting

CSS ActiveX JavaScript

Cascading Style Sheets [1]

Describe rules of how HTML documents should be rendered

Rules consist of property:value pairs Embedded or in a separate file Identified by DIV (blocks, defining logical

divisions), SPAN (inline content) elements and the “class,” “id,” “style” attributes

• CSS rules used to modify elements

Examples

Simple Fluffy example Fancier examples:

http://www.csszengarden.com

JavaScript [1]

Java != JavaScript Scripting languages used to implement

dynamic behavior in web pages Introduced by NetScape Interpreted and executed by Web Browser Restricted to browser

Example

…

<body>

<script type="text/javascript">



</script>

</body>

</html>

ActiveX Controls [1]

ActiveX controls are binary programs that are downloaded and executed in the context of a web page

ActiveX controls are supported only by Windows-based browsers

The code is signed using the Authenticode mechanism

ActiveX controls are similar to Java Applets but: ActiveX controls have full access to the Windows

operating system Applets run in the context of the web browser

Problems with ActiveX Controls

Users authorize ActiveX control from non-trusted web page

Common means of distributing for malware (adware, spyware, etc)

Server Side Examples

Ruby on Rails CGI Ajax

Server Side Scripting Example

Ruby on Rails using Yahoo’s Web Service http://developer.yahoo.com/shopping/V1/catal

ogListing.html Web Services Software system to support interoperable

machine-to-machine interaction over a network

Often use: REST (Representational State Transfer) Is a architecture style of networked systems Calling a remote service by passing parameters

using a URL

Examples:

http://www.programmableweb.com/apilist Facebook, eBay, Amazon, Yahoo, Flickr, SecondLife,

…

Common Gateway Interface (CGI) [1]• Mechanism to invoke programs on the

server side– Program output is returned to the client– Input parameters can be passed

• Using the URL (GET method)– Advantage: The query can be stored as a URL

• Using the request body (POST method)– Advantage: Input parameters can be of any size

– Example:• http://www.foo.com/cgi-bin/prog.pl/add/info?

query=bar

CGI Programs [1]

• Can be written in any language• Input to the program piped to the process’

stdin• Parameters are passed by setting

environment variables

What is AJAX?

Asynchronous JavaScript + XML XMLHttpRequest Object A marketing term Rich Internet Applications with JavaScript

Why is it popular?

Google helped popularize, and legitimize it in GMail

Increase Usability of Web Applications Rich Internet Applications without Flash Save Bandwidth Download only data you need Faster interfaces (sometimes)

Why is it bad?

Breaks back button support URL's don't change as state changes Cross Browser Issues can be a pain JavaScript may tax older machines CPU Can't access domains other than the

calling domain May be disabled (for security reasons) or

not availiable on some browsers

Flash vs AJAX

No plugin for AJAX Flash development tools cost money Flash typically has slower page load time Flash can work on older browsers ActionScript doesn't havea cross browser

issues Flash can access other domains if there is

a crossdomain.xml file

References

[1] Giovanni Vigna. “Web Applications.” Slides for CS176b, UCSB, Spring 2005.

[2] Pete Freitag. “Ajax Presentation Outline.” http://www.petefreitag.com/item/514.cfm

Writing the Web / The Story of Fluffy Alon Levi Anders Smestad Dominic Metzger.

Documents

Transcript of Writing the Web / The Story of Fluffy Alon Levi Anders Smestad Dominic Metzger.