ComponentBased Workflow Systems for AEC Project Information

1
Web Page as User InterfaceForm and Web
ApplicationResearch Topic Presentation
Chien-Cheng Chou INF385E Information Architecture
and Design l The University of Texas at
Austin November 9, 2004
2
Outline

• Introduction
• History
• Web Widgets
• Discussion
• Conclusion
• References

3
Introduction

• Web Page as User Interface
• Definition of User Interface (Mandel, 1997)
  (IEEE, 2002)
• Hardware
• Input / output devices
• Software
• Coordinating programs
• User manual
• Online help
• Web UI Using Web Tech. as UIs Program
• More widespread use today
• Why? Portability!

4
Web Page as User Interface

• Advantage
• High portability
• Windows, Mac, Linux, PDA, Cell phone
• Easy-to-use
• Standard web widgets (9)
• Application stability
• Traditional vs. Web-based
• Disadvantage
• Lack of advanced features
• Compound Document (OpenDoc/OLE)
• Drag and drop
• Redo and undo
• Auto page break in print preview
• Solution various HTML extensions, but

5
History

• Objective to get proven technologies
• 1963 Human Computer Interaction (HCI)
• Computer side User Interface
• Human side impact on human (Hewett et al., 2004)
• 1970 Command Line Interface (CLI)
• Unix request and response model
• 1970 Graphical User Interface (GUI)
• Xerox Palo Alto Research ("wordiQ.com," 2004)
• Graphical widgets (radio, button, )
• Pointing device keyboard

6
1974 WYSIWYG

• What You See Is What You Get
• Charles Simonyi _at_ Xerox PARC
• Dynabook (IEEE, 2002)
• Kay and Goldberg
• Most modern general-purpose GUIs are derived from
  it
• Apple (IEEE, 2002)
• Commercializing GUI successfully
• 1983 Lisa with a mouse, icons, and pull down menus

7
Apples Lisa (in 1984 January, the
Macintosh is unveiled with a publicity
campaign) Xerox PARCs Dynabook is based on
Smalltalk, employs icons, graphics, and a mouse.
8
Web Widgets

• 1. Hyperlink
• 2. Button
• 3. CheckBox
• 4. File
• 5. Hidden

• 6. Radio
• 7. Text
• 8. Select
• 9. Others

9
Basic Concept Architecture
WP3
WP2
Each web form can contain button, check, file,
hidden, radio, text, select (called basic widget)
Hyperlink
Web Application
Can contain many web forms
Web Page
HTML
CSS
JavaScript
Others
Standard
Mozilla
Netscape
Opera
FireFox
IExplorer
Browser
Operating System
Windows
Linux
Mac
PDA
10
Basic Concept Browser

• Strategy
• to create another layer between the platform and
  application
• Special GUI widgets
• its own set of controls
• Non-IE Tabbed Browsing
• Favorites / Bookmarks

11
Hyperlink

• The significant role of the hyperlink in web
• depending on the hyperlink structure of the
  application, navigation within a web user
  interface displays web pages in an application
  hierarchy one page at a time in a linear or
  non-linear fashion within a single GUI window
  (Torres, 2002)
• Example
• DialogBox lta href target_newgt
• Toolbar lta href gtltimg srcgtlt/agt

12
Button

• CLI request and response model
• Button Enter
• ltinput typebuttongt
• General purpose
• ltinput typesubmitgt
• To submit a web form
• ltinput typeresetgt
• To clear a web form

13
Checkbox

• State
• Checked, unchecked, inactive
• Each checkbox acts independent of others
• Checkbox JavaScript
• Can write business rules to control input logic

• ltinput typecheckboxgt

14
File

• To upload a file to the web server
• ltinput typefilegt

Hidden

• Temporary variables in web programming
• To record a web pages state
• ltinput typehiddengt

15
Radio

• State
• On, off
• Single selection among several choices in the
  same group
• Use another button to cancel selection
• Or default value
• ltinput typeradio nametheSamegt

16
Text

• ltinput typetextgt
• Users input is one line
• ltinput typepasswordgt
• Users input is a password
• lttextarea rows"5
• cols"20"gt
• lt/textareagt

17
Select

• Single select (ComboBox)
• For too many Radio(s), save space
• ltselect size1gtltoptiongttest1lt/selectgt
• Multi-select
• Checkbox
• Ctrl left click
• ltselect size2gtltoptiongttest1 ltoptiongttest2lt/select
  gt

18
Menu

• No basic widget to show a menu inside a web page
• Must use JavaScript to create it
• Example
• Again, portability problem!
• A variation of hyperlink table

19
Others

• Dialog Box
• Open a new window to force user to answer a
  question
• window.open(url, _new, "left200 top100
  width250 height180 resizableno statusno")
• Ex Calendar
• TAB Window
• Frame / IFrame
• ltIFRAME SRC"" STYLE"displaynone"gtlt/IFRAMEgt
• Toolbar lta href gtltimg srcgtlt/agt

20
Discusion

• The more portable, the less advanced GUI features
• From an information architects perspective
• The most difficult problem does not lie in how to
  overcome the unavailability of web GUI widgets
• The problem would be how to structure the web
  applications all functions and corresponding
  requesting and responding web pages.

21
Discussion

• Integration, Integration, Integration
• Should pay attention to users' existing or legacy
  web applications and try to design the new web
  site in compatible to their overall architecture
• Next generation of Web UI
• HTML evolving into pure XML language
• Many new technologies based on XML
• SVG Scalable Vector Graphics
• XUL XML User-Interface language
• SMIL Synchronized Multimedia Integration
  Language (extension of XHTML)

22
Conclusion

• Web UI advantage / disadvantage
• GUI history
• Each web widget design and limitation
• If you work for a traditional software company
  that wants to sell a web application, be aware
  that installable software does not quickly
  convert into a web application. Nor can it
  always be converted into a successful web
  application. Your company must adopt web
  principles for design, development, testing,
  security, IT, marketing, sales, billing,
  documentation, support, and training (van Duyne
  et al., 2003, p.173)

23
References

• Hewett, Baecker, Card, Carey, Gasen, Mantei,
  Perlman, Strong, Verplank. (2004). ACM SIGCHI
  Curricula for Human-Computer Interaction.
  Retrieved October 25, 2004, from
  http//sigchi.org/cdg/cdg2.html
• IEEE Computer Society History of Computing.
  (2002). Retrieved October 25, 2004, from
  http//www.computer.org/history/index.html
• Mandel, T. (1997). The Elements of User Interface
  Design. Canada John Wiley Sons, Inc.
• Press, L. (1992). Dynabook Revisited Portable
  Computers Past, Present and Future.
  Communications of the ACM, 35(3), 25-32.
• Torres, R. J. (2002). Practitioner's Handbook for
  User Interface Design and Development. NJ
  Prentice-Hall, Inc.
• van Duyne, D. K., Landay, J. A., Hong, J. I.
  (2003). The Design of Sites. Boston, MA
  Addison-Wesley.
• wordiQ.com. (2004). Retrieved October 25, 2004,
  from http//www.wordiq.com

24
Thank you! Question?