Writing the Web / The Story of Fluffy

Download Report

Transcript Writing the Web / The Story of Fluffy 

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">
&nbsp;
</div>
<div id="columns">
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 protocol
GET /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">
&nbsp;
</div>
<div id="columns">
<div id="main">
<h1>Fluffy's Favorite Toys</h1>
<div id="products">
<table>
<tr>
<td>&nbsp;</td><td>&nbsp;</td>
</tr>
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:


Advantages:




Free: http://www.doteasy.com
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 Windowsbased 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 nontrusted 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)
–
•
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?




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