dynamic web sites chris north cs3724: hci. presentations matt ketner, sam altman, mike gordon vote:...
TRANSCRIPT
![Page 1: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/1.jpg)
Dynamic Web Sites
Chris North
cs3724: HCI
![Page 2: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/2.jpg)
Presentations
• matt ketner, • sam altman, • mike gordon
• Vote: UI Hall of Fame/Shame?
![Page 3: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/3.jpg)
Next
• Apr 4: Proj 2, final implementation
Presentations: UI critique or HW2 results
• Next Tues: karen molye, steve kovalak
• Next Thurs: demos?
![Page 4: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/4.jpg)
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
![Page 5: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/5.jpg)
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
![Page 6: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/6.jpg)
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
![Page 7: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/7.jpg)
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
![Page 8: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/8.jpg)
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
![Page 9: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/9.jpg)
Document Object Model
<form name=“myform”>
<input type=“button” name=“mybutton” value=“OK”
onclick=“document.myform.mybutton.color=red”>
</form>
document
myform
mybutton
…
…
![Page 10: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/10.jpg)
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>
![Page 11: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/11.jpg)
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
![Page 12: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/12.jpg)
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
![Page 13: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/13.jpg)
Problems
• Many simultaneous users
• No state data maintained
• Client not in sync with server (e.g. back button)
Books.exe Cart.exe Purchase.exe
…
![Page 14: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/14.jpg)
Different than GUI programming!
• One user (per executable)
• ‘Global’ state data
• Client = server
Shopping.exe
Books windowCart window
Purchase window
![Page 15: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/15.jpg)
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
![Page 16: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/16.jpg)
ASP
• Provides ‘session’ awareness
• Maintains state info for each user• Scripts access global storage
• Visual Basic language
• Mix code and html output
![Page 17: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/17.jpg)
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>
![Page 18: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/18.jpg)
Session Data
• Global object: session<html><body>
Hello, <%= session(“username”) %>
</body></html>
• Client receives:<html><body>
Hello, Chris
</body></html>
![Page 19: Dynamic Web Sites Chris North cs3724: HCI. Presentations matt ketner, sam altman, mike gordon Vote: UI Hall of Fame/Shame?](https://reader036.vdocument.in/reader036/viewer/2022083009/56649e235503460f94b11578/html5/thumbnails/19.jpg)
Processing form input
• Global object: request.form
<% session(“username”) = request.form(“UserName”) %>
<html><body>
Thanks for giving us your name, <%= session(“username”) %>
</body></html>