View
213
Download
0
Category
Preview:
Citation preview
Dynamic Web Sites
Chris North
cs3724: HCI
Presentations
• matt ketner, • sam altman, • mike gordon
• Vote: UI Hall of Fame/Shame?
Next
• Apr 4: Proj 2, final implementation
Presentations: UI critique or HW2 results
• Next Tues: karen molye, steve kovalak
• Next Thurs: demos?
Review
• What are independent variables?• The stuff that you vary: UI
• What are dependent variables?• The stuff that you measure: user perf time
• How do you analyze the results?• Stats: t-test, anova
• 95%, 99%
• < nothing: redesign
GUIs vs WUIs
• Standard GUIs• E.g. Visual Basic, Java• Single user, location• Portability is less critical• Power dynamics• Targeted audience
• Webpage UIs• broad user class• Supports low power clients• Avoids installation, updates, backups• Enables One time users, quick, simple• Lightweight• Collect info from users, permission unneseary
WUIs
Client
(Browser)
Server
(Web server)
URL request
html page
•Server side scripting•Dynamically generated pages
•Client side scripting•Interactive pages
• why?• faster feedback•Saves server•animation
• why?• customized pages for users•Security•Business logic•Data-driven, data intensive•collaborative
WUI Technologies
• Client side:• Javascript
• VBscript (MS)
• DHTML
• Html, forms, components (java applets, activeX)
• Server side:• CGI: perl, shell scripts …
• ASP (MS)
• Cold fusion
• Jsp, Php
• Servlets: java, activeX
Client side
• Javascript:
<a href=“http: URL here”>click here</a>
<a href=“javascript: code here”>click here</a>
• http://yugop.com/ver3/stuff/03/fla.html
Document Object Model
<form name=“myform”>
<input type=“button” name=“mybutton” value=“OK”
onclick=“document.myform.mybutton.color=red”>
</form>
document
myform
mybutton
…
…
Server Side
• http://www.myserver.com/myscript.exe• Prints an html file (+header) to stdout:print “Content-type: text/html \n”print “\n”print “<html><body>”print “The time is “, time( )print “</body></html>”
• Client browser receives:<html><body>The time is 2:00pm, March 28, 2002</body></html>
Processing Forms
• GET, querystring• <form action=“myscript.exe” method=get>
• http://myserver.com/myscript.exe?widget=value&…
• Myscript.exe reads data from URL string
• POST• <form action=“myscript.exe” method=post>
• Myscript.exe reads data from stdin
Example
Books.exe Cart.exe Purchase.exe
•Shows books list•Add to cart
•View cart button
•Displays cart contents•Delete items
•Purchase button
•Charges credit card•Displays ‘thankyou’
•Link back to books
Amazon.com server
Problems
• Many simultaneous users
• No state data maintained
• Client not in sync with server (e.g. back button)
Books.exe Cart.exe Purchase.exe
…
Different than GUI programming!
• One user (per executable)
• ‘Global’ state data
• Client = server
Shopping.exe
Books windowCart window
Purchase window
Problems
• Myscript.exe starts from scratch each time• Each page request is completely independent
• No state data maintained between requests» Who is the user?
» What is his data?
» Where is he in the ‘application’?
• How to maintain state info across page accesses?• Pile all state data into hidden form items
• Cookies
• Store state data in a database, index by unique user id
ASP
• Provides ‘session’ awareness
• Maintains state info for each user• Scripts access global storage
• Visual Basic language
• Mix code and html output
html + Code• New tags <% %> and <%= %>• Myscript.asp:<html><body>The time is <%= time() %><% if time() < noon %>
<p>Good morning<% else %>
<p>Good afternoon<% end if %></body></html>
• Client receives:<html><body>The time is 2:00pmGood afternoon</body></html>
Session Data
• Global object: session<html><body>
Hello, <%= session(“username”) %>
</body></html>
• Client receives:<html><body>
Hello, Chris
</body></html>
Processing form input
• Global object: request.form
<% session(“username”) = request.form(“UserName”) %>
<html><body>
Thanks for giving us your name, <%= session(“username”) %>
</body></html>
Recommended