Writing the Web / The Story of Fluffy

1
Writing the Web / The Story of Fluffy

• Alon Levi
• Anders Smestad
• Dominic Metzger

2
Overview / Who is Fluffy

• Fluffy is Joe Shmos dog

3
Goal

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

4
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)

5
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

6
Example

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

7
Create From Scratch

• Design
• Photoshop / ImageReady
• GIMPShop
• WYSIWYG
• Dreamweaver
• Frontpage
• Nvu

8
Create From Scratch

• Advantages
• WYSIWYG
• Existing tools
• Disadvantages
• Ugly code
• Less flexibility
• Limited dynamic content
• Tweaking can be difficult

9
Write From Scratch

• Writing the code
• Advantage
• Flexible
• Complete Control
• Disadvantages
• More difficult
• Have to know programming concepts
• Cross platform compatibility
• Time consuming

10
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

11
Client Side - Examples

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

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

13
Server Side

• CGI
• Ruby on Rails, PHP, ASP, JSP

14
Behind the scenes

• In your browser, you type
• fluffy.is-a-geek.org

15
You see
16
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

lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DT
D/xhtml1-transitional.dtd"gt lthtmlgt ltheadgt
lttitlegtFluffy's Web Storelt/titlegt ltlink
href"/stylesheets/fluffy_style.css?1161474328"
media"all" rel"Stylesheet" type"text/css"
/gt lt/headgt ltbody id"store"gt ltdiv
id"banner"gt nbsp lt/divgt
ltdiv id"columns"gt
ltdiv id"main"gt
lth1gtFluffy's Favorite Toyslt/h1gt etc...
17
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 --gt 169.231.15.203

18
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

lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DT
D/xhtml1-transitional.dtd"gt lthtmlgt ltheadgt
lttitlegtFluffy's Web Storelt/titlegt ltlink
href"/stylesheets/fluffy_style.css?1161474328"
media"all" rel"Stylesheet" type"text/css"
/gt lt/headgt ltbody id"store"gt ltdiv
id"banner"gt nbsp lt/divgt
ltdiv id"columns"gt
ltdiv id"main"gt
lth1gtFluffy's Favorite Toyslt/h1gt ltdiv
id"products"gt lttablegt lttrgt
lttdgtnbsplt/tdgtlttdgtnbsplt/tdgt
lt/trgt lttrgt lttd
class"image"gt ltimg
src"http//f3c.yahoofs.com/shopping/mcid8_3238/si
mg_t_t71xgf4xcjpg70?rm_____DNqevM8Xz"/gt
lt/tdgt lttdgt ltbgt
Product Dog Lips Chew Toyltbr/gt
lt/bgt Price
15.00ltbr/gt lta class"product"
href"http//tracking.searchmarketing.com/click.as
p?aid17263475"gtBuylt/agtltbr/gt lt/tdgt
lt/trgt lttrgt
lttdgtnbsplt/tdgtlttdgtnbsplt/tdgt
lt/trgt lt/tablegt lt/divgt
19
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

20
Hosting your Content

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

21
Someone else hosts it

• Various hosting services available
• Free http//www.doteasy.com
• Advantages
• Dont worry about maintenance
• Automatic backups
• Accessibility HIGH speed connections
• Disadvantages
• Costs
• Limitations

22
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?

23
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

24
Client Side Scripting

• CSS
• ActiveX
• JavaScript

25
Cascading Style Sheets 1

• Describe rules of how HTML documents should be
  rendered
• Rules consist of propertyvalue 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

26
Examples

• Simple Fluffy example
• Fancier examples
• http//www.csszengarden.com

27
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

28
Example

• ltbodygt
• ltscript type"text/javascript"gt
• lt!--
• var a 'fluffy_at_do'
• var b 'g.com'
• document.write('lta href"mailto'ab'gt'ab'
  lt\/agt')
• //--gt
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

29
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

30
Problems with ActiveX Controls

• Users authorize ActiveX control from non-trusted
  web page
• Common means of distributing for malware (adware,
  spyware, etc)

31
Server Side Examples

• Ruby on Rails
• CGI
• Ajax

32
Server Side Scripting Example

• Ruby on Rails using Yahoos Web Service
• http//developer.yahoo.com/shopping/V1/catalogList
  ing.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

33
Examples

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

34
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

35
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

36
What is AJAX?

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

37
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)

38
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

39
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

40
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