1 / 31

Engaging Computing Students in Human Factors through Web Programming

Engaging Computing Students in Human Factors through Web Programming. Jesse M. Heines Dept. of Computer Science University of Massachusetts Lowell. Adam Mickiewicz University Poznań, Poland. May 22, 2012. GUI Programming Traditional Components. “WIMP Interface”

vivian
Download Presentation

Engaging Computing Students in Human Factors through 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. Engaging Computing Students in Human Factors through Web Programming Jesse M. Heines Dept. of Computer Science University of Massachusetts Lowell Adam Mickiewicz University Poznań, Poland May 22, 2012

  2. 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”

  3. 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.

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

  5. 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)

  6. 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

  7. 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>

  8. 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

  9. GUI ProgrammingCSS3 Examples

  10. 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">

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

  12. 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 */ ...

  13. 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>

  14. GUI ProgrammingFirebug Demo

  15. 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

  16. 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

  17. 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

  18. 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)

  19. 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

  20. 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)

  21. 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

  22. 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

  23. 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

  24. GUI ProgrammingRecommended Books

  25. GUI ProgrammingRecommended Books

  26. GUI ProgrammingRecommended Books

  27. Thank You to My UAM Hosts • Prof. dr. habil. Roman Murawski • Faculty of Mathematics and Computer Science • dr. Jacek Marciniak • Faculty of Mathematicsand Computer Science • Prof. dr. habil. Jacek Witkoś • Deputy President for Research and International Cooperation

  28. Jesse M. Heines heines@cs.uml.edu http://teaching.cs.uml.edu Adam Mickiewicz University Poznań, Poland May 22, 2012

More Related