1 / 40

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.

blue
Download Presentation

Writing the Web / The Story of Fluffy

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Writing the Web / The Story of Fluffy Alon Levi Anders Smestad Dominic Metzger

  2. Overview / Who is Fluffy • Fluffy is Joe Shmo’s 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 <!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> 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 --> 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: <!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> <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>&nbsp;</td><td>&nbsp;</td> </tr> </table> </div>

  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: • Don’t 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 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

  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 … <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>

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

  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

More Related