• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Writing the Web / The Story of Fluffy - Department of ...
 

Writing the Web / The Story of Fluffy - Department of ...

on

  • 844 views

 

Statistics

Views

Total Views
844
Views on SlideShare
843
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Writing the Web / The Story of Fluffy - Department of ... Writing the Web / The Story of Fluffy - Department of ... Presentation Transcript

    • 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 &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html> <head> <title>Fluffy's Web Store</title> <link href=&quot;/stylesheets/fluffy_style.css?1161474328&quot; media=&quot;all&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;store&quot;> <div id=&quot;banner&quot;> &nbsp; </div> <div id=&quot;columns&quot;> <div id=&quot;main&quot;> <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 protocol
        • GET /index.html HTTP/1.1
      • Sends back the response:
      <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html> <head> <title>Fluffy's Web Store</title> <link href=&quot;/stylesheets/fluffy_style.css?1161474328&quot; media=&quot;all&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;store&quot;> <div id=&quot;banner&quot;> &nbsp; </div> <div id=&quot;columns&quot;> <div id=&quot;main&quot;> <h1>Fluffy's Favorite Toys</h1> <div id=&quot;products&quot;> <table> <tr> <td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td class=&quot;image&quot;> <img src=&quot;http://f3c.yahoofs.com/shopping/mcid8_3238/simg_t_t71xgf4xcjpg70?rm_____DNqevM8Xz&quot;/> </td> <td> <b> Product: Dog Lips Chew Toy<br/> </b> Price: $15.00<br/> <a class=&quot;product&quot; href=&quot;http://tracking.searchmarketing.com/click.asp?aid=17263475&quot;>Buy</a><br/> </td> </tr> <tr> <td>&nbsp;</td><td>&nbsp;</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=&quot;text/javascript&quot;>
      • <!--
      • var a = 'fluffy@do';
      • var b = 'g.com';
      • document.write('<a href=&quot;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/catalogListing.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