Writing the Web The Story of Fluffy

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

Overview / Who is Fluffy l Fluffy is Joe Shmo’s dog

Goal l l Joe Schmo wants to create a website for his dog, Fluffy. So, what are his options? How would you do it?

Post Online l l Wikis, Blogs, Forums, SAKAI, Myspace etc… Advantages: l l l Easy to use Quick return Disadvantages / Limitations: l l 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: l l Low control Lack of dynamic content Lack of flexibility Format is limited to certain options

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

Create From Scratch l Design: l l l Photoshop / Image. Ready GIMPShop WYSIWYG: l l l Dreamweaver Frontpage Nvu

Create From Scratch l Advantages: l l l WYSIWYG Existing tools Disadvantages: l l Ugly code Less flexibility Limited dynamic content Tweaking can be difficult

Write From Scratch l l Writing the code Advantage: l l l Flexible Complete Control Disadvantages l l More difficult Have to know programming concepts Cross platform compatibility Time consuming

Client-side Scripting • l 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 l l l CSS Active. X Java. Script Adobe Flash Ajax (Google Web Toolkit) GWT

Server Side Scripting [1] l l 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 l l 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? l Browser sends a request to the server named fluffy. is-a-geek. org (actually http: //fluffy. is-a-geek. org/index. html) l The server sends back content corresponding to the request to be displayed in the browser <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -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">

Where is the server? l l All computers online identified by IP IP is the address of the computer http: //66. 102. 7. 147/ l l DNS, the domain name to IP directory fluffy. is-a-geek. org --> 169. 231. 15. 203

What is a webserver? l l A program that runs on a computer Designed to answer requests and send responses, according to the http protocol GET /index. html HTTP/1. 1 l Sends back the response: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -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"> <h 1>Fluffy's Favorite Toys</h 1> <div id="products"> <table> <tr> <td> </td> </tr>

Webserver extensions l l l when you want serverside dynamic content cgi php asp coldfusion java. . . (postgres my. SQL, MSSQL, Oracle. . . ) application server or a webserver module important when choosing hoster or installing

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

Someone else hosts it l Various hosting services available: l l Advantages: l l Free: http: //www. doteasy. com Don’t worry about maintenance Automatic backups Accessibility – HIGH speed connections Disadvantages: l l Costs Limitations

Hosting it yourself l Advantages: l l Flexible utilize old hardware extra disk space is cheap Disadvantages: l l Accessibility Maintenance is your responsibility, backup, upgrades, power failures line speed is expensive legal issues?

Your domain name l l Buy one, get what you want. . . Get one for free, l l fluffynet. tk (Tokelau) Changing ip address l dyndns. org l l l fluffy. dyndns. org fluffy. is-a-geek. net fluffy. shacknet. com

Client Side Scripting l l l CSS Active. X Java. Script

Cascading Style Sheets [1] l l • 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 l l Simple Fluffy example Fancier examples: l http: //www. csszengarden. com

Java. Script [1] l l l Java != Java. Scripting languages used to implement dynamic behavior in web pages Introduced by Net. Scape Interpreted and executed by Web Browser Restricted to browser

Example … <body> <script type="text/javascript"> <!-var a = 'fluffy@do'; var b = 'g. com'; document. write('<a href="mailto: '+a+b+'>'+a+b+' </a>'); //--> </script> </body> </html>

Active. X Controls [1] l l Active. X controls are binary programs that are downloaded and executed in the context of a web page Active. X controls are supported only by Windowsbased browsers The code is signed using the Authenticode mechanism Active. X controls are similar to Java Applets but: l l Active. X controls have full access to the Windows operating system Applets run in the context of the web browser

Problems with Active. X Controls l l Users authorize Active. X control from nontrusted web page Common means of distributing for malware (adware, spyware, etc)

Server Side Examples l l l Ruby on Rails CGI Ajax

Server Side Scripting Example l Ruby on Rails using Yahoo’s Web Service l l http: //developer. yahoo. com/shopping/V 1/catal og. Listing. html Web Services Software system to support interoperable machine-to-machine interaction over a network Often use: REST (Representational State Transfer) l l Is a architecture style of networked systems Calling a remote service by passing parameters using a URL

Examples: l http: //www. programmableweb. com/apilist l Facebook, e. Bay, Amazon, Yahoo, Flickr, Second. Life, …

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) – • Using the request body (POST method) – – Advantage: The query can be stored as a URL Advantage: Input parameters can be of any size Example: • http: //www. foo. com/cgibin/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? l l Asynchronous Java. Script + XMLHttp. Request Object A marketing term Rich Internet Applications with Java. Script

Why is it popular? l l l 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? l l l Breaks back button support URL's don't change as state changes Cross Browser Issues can be a pain Java. Script 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 l l l No plugin for AJAX Flash development tools cost money Flash typically has slower page load time Flash can work on older browsers Action. Script 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 CS 176 b, UCSB, Spring 2005. [2] Pete Freitag. “Ajax Presentation Outline. ” http: //www. petefreitag. com/item/514. cfm