Writing the Web / The Story of Fluffy - PowerPoint PPT Presentation

Loading...

PPT – Writing the Web / The Story of Fluffy PowerPoint presentation | free to download - id: 1954c8-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Writing the Web / The Story of Fluffy

Description:

... means of distributing for malware (adware, spyware, etc) Server ... May be disabled (for security reasons) or not availiable on some browsers. Flash vs AJAX ... – PowerPoint PPT presentation

Number of Views:16
Avg rating:3.0/5.0
Slides: 41
Provided by: off666
Learn more at: http://www.cs.ucsb.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com