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