1 / 29

Human Factors in Web Programming

Human Factors in Web Programming. Prof. Jesse M. Heines Dept. of Computer Science University of Massachusetts Lowell. Adam Mickiewicz University Poznań, Poland. November 21, 2012. What are Human Factors?. What are Human Factors?.

brosh
Download Presentation

Human Factors in Web Programming

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. Human Factors in Web Programming Prof. Jesse M. Heines Dept. of Computer Science University of Massachusetts Lowell Adam Mickiewicz University Poznań, Poland November 21, 2012

  2. What areHuman Factors?

  3. What areHuman Factors? • What characteristics make a program (or web application) “easy-to-use”? • Don’t confuse “easy-to-use” with “easy” or “simple” or “elementary” • Some very sophisticated programs (and machines) are relatively easy to use

  4. What areHuman Factors? • What characteristics make a program (or web application) “easy-to-use”? • Don’t confuse “easy-to-use” with “easy” or “simple” or “elementary” • Some very sophisticated programs (and machines) are relatively easy to use • What do we have to do as designers, engineers, and programmers to make a program “easy-to-use”? • How do we have to think?

  5. What isWeb Programming?

  6. What isWeb Programming? • Static vs. dynamic web pages • The roles of HTML, CSS, JavaScript, and libraries such as jQuery • The role of the web server • So if we add all these components together, what do we really have?

  7. Human FactorsTerms and Acronyms • UI = User Interface • GUI = Graphical User Interface • UX = User Experience • SME = Subject Matter Expert • Rapid Prototyping • Iterative Design • Usability Testing • Revision Cycle • sum=the full range of software engineering

  8. GUI ProgrammingTraditional Components • “WIMP Interface” • Windows – Icons – Menus – Pointers • “Widgets” • Using widgets effectively requires facility with navigating an “API” • API = Application Programming Interface • Virtually all APIs are built on object libraries • Using a API effectively therefore requires facility with underlying OOP principles • GUI programming helps “overcome the mental fog”

  9. GUI Programming... and Computer Games • “The game industry wants graduates with a strong background in computer science. It does not want graduates with watered-down computer science degrees, but rather an enhanced set of skills.” • Zyda, Michael (2009). Computer Science in the Conceptual Age. Communications of the ACM 52(12):66-72, December 2009.

  10. Components of a Networked Computer Game • Zyda, Michael (2009)

  11. GUI ProgrammingWeb Components • HTML 5 • HyperText Markup Language • CSS 3 • Cascading Style Sheets • JavaScript (ECMAScript 5) • European Computer Manufacturers Association • JavaScript Libraries • jQuery • YUI (Yahoo! User Interface)

  12. GUI ProgrammingHTML5 Developments • Move from page layout to content structure • New semantic tags • New tags augment <div> and <span> • Examples: <nav> <header> <footer> <figure> <section> <article> • These are defined in terms of what they represent, not how they appear on a web page • Virtually all formatting attributes are decrementedin favor of CSS • New attributes to enhance user experience

  13. GUI ProgrammingHTML5 Examples • <input autofocus> • Boolean attribute, no value is needed • Mere presence is implies “=true” • <input type="email"> • <select name="color" required> <option value="">Choose One <option>Red<option>Green<option>Blue</select>

  14. GUI ProgrammingCSS3 Developments • New properties • Border Color, Border Image, Border Radius • Border and Text Shadows • Transitions • Opacity • Virtually all HTML formatting attributes have been decremented in favor of CSS • The trick to using CSS (and jQuery) is to master selectors

  15. GUI ProgrammingCSS3 Examples • The essence of the HTML code needed to display the OK and Cancel buttons is: <input type="button" id="ok" name="ok" value="OK"> <input type="button" id="cancel" name="cancel" value="Cancel">

  16. GUI ProgrammingCSS3 Examples <style type="text/css"> input { font-weight: bold ; width: 400px ; height: 150px ; font-size: 80px ; text-shadow: darkgray 3px 3px 6px ; ...

  17. GUI ProgrammingCSS3 Examples ... -moz-border-radius: 30px ; -webkit-border-radius: 30px ; border-radius: 30px ; box-shadow: rgba(0, 0, 0, 1.0) 0px 0px 24px; } /* last rgba parameter is opacity */ ...

  18. GUI ProgrammingCSS3 Examples ... #ok { background-image: -moz-linear-gradient( left,#A00000 0%, #FF0000 100% ) ; } #cancel { background-image: -moz-linear-gradient( left, #035E00 0%, #00FF00 100% ) ; } </style>

  19. GUI ProgrammingFirebug Demo

  20. GUI ProgrammingCSS3 Selectors: Basics • Apply to all elements of a specific type • p { font-family: Verdana } • Define classes • .indent { margin-left: 30px } • <p class="indent">...</p> • Apply to elements with a specific id • #first { margin-left: 60px } • <p id="first">...</p> • Note how such capabilities reinforce the need to close all tags hierarchically

  21. GUI ProgrammingCSS3 Selectors: The DOM • li a { ... } • applies to all a tags that are descendants(at any level) of all li elements • li > a { ... } • applies to all a tags that are children (that is, direct or first generation descendants of) all li elements • h2 + p { ... } • applies to all p tags that are adjacentsiblings (that is, directlyfollow) all h2elements

  22. GUI ProgrammingCSS3 Selectors: Filters • a[href^="https://"] • applies to all a tags with hrefattributes that beginwithhttps:// • a[href$=".xml"] • applies to all a tags with href attributes that endwith.xml • a[href*="uml.edu"] • applies to all a tags with href attributes that containuml.edu

  23. GUI ProgrammingCSS3 Selectors: Pseudo Classes • :link :visited :hover :active • :first-letter :first-line • used for graphic effects such as drop caps and bold first lines • :before :after • for generated content, used with classes • example:p.note:before{content: "NOTE!"} • :first-child • selects just the first of a set of elements, such as <li> • :focus (complement to :hover)

  24. GUI ProgrammingCSS3 Selectors: Examples • #menu >:first-child • #menu > li > :hover • #menu li ul:hover • #menu li ul#WorkshopMenu • #menu li ulli • #menu li ulli:first-child • #menu li ulli:last-child • #menu li ul li a • #menu > li > ul > li > :hover

  25. GUI ProgrammingJavaScript Developments • Scripting language of choice for all browsers • Has come into its own as a real language and development tool • Sophisticated JavaScript libraries available • These libraries deal with most (but not all) cross-browser incompatibilities • Facilities for dealing with browser DOMs • Client-side “Web SQLite Databases” to replace cookies (except in Firefox)

  26. GUI ProgrammingJavaScript Characteristics • Functions are first class objects • Can be defined programmatically • Can be assigned to variables and passed as parameters • Provide scope (closure) • Highly object-oriented, but without class definitions • Object literal definitions and JSON • Now supported by powerful debuggers

  27. GUI ProgrammingjQuery • Sophisticated JavaScript library • Others exist, but jQuery dominates • Adopted by Google and other major players • Uses CSS selectors to navigate the DOM • Provides desktop application-like capabilities • Amazingly fast and powerful • www.jquery.org / www.jqueryui.com • jqueryui.com provides powerful pre-built widgets, all free

  28. GUI ProgrammingExamples • http://jqueryui.com/demos • jqueryui.com/demos/datepicker • Performamatics website • Components • Multilevel menus • Animation • Accordion panes • Form validation • Adaption to latest course websites

  29. Jesse M. Heines heines@cs.uml.edu http://teaching.cs.uml.edu Adam Mickiewicz University Poznań, Poland November 21, 2012

More Related