Writing the Web / The Story of Fluffy - Department of ...
40
Writing the Web / The Story of Fluffy Alon Levi Anders Smestad Dominic Metzger
-
Upload
sampetruda -
Category
Documents
-
view
959 -
download
0
description
Transcript of Writing the Web / The Story of Fluffy - Department of ...
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">
<!--
var a = 'fluffy@do';
var b = 'g.com';
document.write('<a href="mailto:'+a+b+'>'+a+b+' <\/a>');
//-->
</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
