UMass Lowell Dept. of Computer Science
91.461 GUI Programming I
Fall 2015 Semester, Section 201
Prof. Jesse M. Heines
Course Resources
Students are invited and sincerely encouraged to email me additional links to add to this list or suggestions for improving the page itself. Also, web pages come and go and file locations change, breaking links on a reference page such as this. Therefore, please report any broken links on this page to me so that I can either correct them or remove them. Thank you.
Textbooks | References & Tutorials | Cool Stuff | Twitter Tricks | Of Interest | Tools, Utilities, IDEs, & Test Environments | Writing Resources
Textbooks and Source Code for Examples Top
Note: Titles shown in boldface are the main textbooks for this course.
CSS3: The Missing Manual, 3rd edition, by McFarland (this is the publisher’s website)
- companion website — this is the author’s website
- click the large green “Download the tutorial files” button to get the source code for all tutorials in the text
- listing on Amazon.com
- list of errata
CSS: The Missing Manual, 2nd edition, by McFarland (this is the publisher’s website)
- companion website — this is the author’s website
- click the large green “Download the tutorial files” button to get the source code for all tutorials in the text
- listing on Amazon.com
- list of errata
jQuery: Novice to Ninja by Castledine & Sharkie, SitePoint Pty., Ltd.., ISBN 978-0-980-57685-6
jQuery in Action, 2nd ed. by Bibeault & Katz, Manning Publications Co., ISBN 978-1-935-18232-0
- I like the Castledine & Sharkie text a bit better, but this is also a good book
- see the “Downloads” section for access to sample chapters (1 and 9) and a ZIP file containing the source code for all examples
Reference and Tutorial Sites Top
Cool Stuff Found By Students and Even By Me! Top
- Animated Collapsible DIV — found by 2010-2011 student Gerry Khorn
- Hack This Site — found by 2010-2011 student Chris Boutiette
- What is the maximum length of a URL? — found by 2010-2011 student Bruce Malley
- Dive Into HTML5 — found by 2012 Ph.D. graduate student Beibei Yang
- Regular Expressions Cheat Sheet — found by 2010-2011 student Bruce Malley
- “a quick reference guide for regular expressions, including symbols, ranges, grouping, assertions and some sample patterns to get you started”
- YUI — the Yahoo! User Interface Library — found by Prof. Jesse Heines
- “The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.”
- Interactive CSS Box Model Demo — found by student 2010-2011 Bruce Malley
- Scaling a Container DIV with the Contained DIV’s Height — found by 2010-2011 student Chris Adoretti
- Techniques for “fixing” old versions of Internet Explorer
- IE7.js — found by student 2010-2011 Ross West
- “IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.”
- Automatic IE6 Update Notice — found by 2010-2011 student Elad Shahar
- “IE6 Update looks like IE’s Information Bar, but instead of offering your visitors an ActiveX plugin, it offers a browser update.”
- Google Chrome Frame — found by 2010-2011 student Elad Shahar
- “Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer.”
- Tantek Çelik discusses new developments in HTML5 — found by 2010-2011 student Gerry Khorn
- CSS References
- CSS Infos: Main Index of Standard CSS Properties — found by Prof. Jesse Heines
Mozilla (Firefox) CSS Extensions — found by Prof. Jesse Heines
- CSS Infos: Webkit (Safari) CSS Properties — found by Prof. Jesse Heines
- List of Prefixes for Vendor-Specific Extensions to CSS — found by 2010-2011 student Gerry Khorn
- CSS-Tricks: treasure trove of CSS how-to posts and other valuable information — found by 2012-2013 student Mark Field
- also recommended by 2014-2015 student Tommy Leedberg, who particularly likes the Almanac page
- UMass Lowell Graphics Standards — found by Prof. Jesse Heines
- Pantone Color Conversion Chart — found by Prof. Jesse Heines — for converting Pantone colors to RGB and Hex
- HTML5 Boilerplate — found by Music Prof. Alex Ruthmann (via Google Reader) and forwarded to Prof. Jesse Heines
- this site claims to be “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site”
- site was last updated on Oct. 26, 2010
- Internet Explorer 9 Preview 7 Download and Demos — referenced by Tantek Çelik in the HTML5 Now video
- http://ie.microsoft.com/testDrive
- this URL links to a wealth of all sorts of HTML5 demos
- I only viewed these in Firefox 3.6.12
- some of them worked, and some of them told me that my browser doesn't support a required feature.
- http://ie.microsoft.com/testDrive/info/downloads/Default.html
- this is the URL from which you can download Microsoft’s IE9 Beta or Platform Preview 7 (released Nov. 17, 2010)
- I would think that at least the latest of these supports all the demos referenced at the test drive site referenced above
- 15 Useful HTML5 Tutorials and Cheat Sheets — found by 2010-2011 student Anthony Scoppa
- Google Font API — found by 2010-2011 student Anson Airoldi
- allows you to use fancy, high quality open source fonts on your web pages even thüey aren’t installed on the user’s system
- PHP listing trick — posted by 2012-2013 student David Lapointe
- a good way to show PHP source is to create a file named yourphpfilename-source.php with just the following bit of code:
<?php
highlight_file("yourphpfilename.php");
?>
- CSS3 Cheat Sheet — found by Prof. Jesse Heines on November 10, 2012
- HTML5 Cheat Sheet — found by Prof. Jesse Heines on November 10, 2012
- HTML5 Cheat Sheet — found by Prof. Jesse Heines on August 26, 2014
- Why Coding Style Matters — article found by Prof. Jesse Heines on November 10, 2012 along with a treasure trove of other articles on web programming at www.veign.com/blog
- Table of HTML Codes: Characters and Symbols — found by Prof. Jesse Heines on June 11, 2013
- Color Scheme Designer — found by 2013-2014 student John Huston, September 12, 2013
- John’s comments: I’m a good programmer, but a terrible artist. I like using this site to help me find complementary colors that I like that aren’t too clashing or distracting. This is much, much easier than having to guess hex codes for colors yourself. :)
- A List Apart — found by 2013-2014 student John Huston, September 12, 2013
- John’s comments: This is a great site with many articles on various HTML/CSS/JavaScript techniques to accomplish things the “right” way, i.e, in a semantically meaningful way while accomplishing the effects you want. One of my favorite classic A List Apart articles explains how to use lists, restyled, so that you can use semantically meaningful lists while having widely varying styles. For example, implementing a menu as “a list of links,” which is semantically more meaningful than a paragraph full of links one after the other. See http://alistapart.com/article/taminglists/.
- Named Character Code Entity Reference — found by 2014-2015 student Susan Souza
- CodeMirror Visible Tabs Viewer — found by 2014-2015 teaching assistant Curran Kelleher
- this site will show you where you have tabs in your code, which you should not
- always set your code editor to insert an appropriate number of spaces when the TAB key is pressed, not actual TAB characters
- HTMLTidy to— found by 2014-2015 teaching assistant Curran Kelleher
- this site will automatically format yoru code with proper indentation
JavaScript Libraries — contributed by T.A. Curran Keller, Octoer 3, 2013
If you want to challenge yourself and dig deeper into Web technologies, try incorporating one of the following technologies into your site or project (or at least come to know what they are):
These things will likely never be covered in any class, but they are taking the industry by storm and listing any one of these as a skill on your resume will grab people’s attention. To get a broader sense of hot topics in Web development today, check out the presentation list for Web Unleashed 2013 http://fitc.ca/event/webu2013/presentations/.
One of the most important aspects of Computer Science is being able to teach yourself things, and not wait for them to be covered in class. Go for it.
Recommended Browser Add-Ons
- when you post to Twitter put #uml91461 in your tweets so that one can search on that string to find all class tweets
- to find the full tweet history of #uml91461 quotes that Twitter does not seem to display, use Google to search for: #uml91461 site:twitter.com with the updates option:
- to get an RSS feed of all #uml91461 tweets, go to: http://search.twitter.com/search.atom?q=%23uml91461
- thank you to 2010-2011 student Gerry Khorn for teaching us about this trick
- another way to search for tweets from specific people is: http://search.twitter.com/search?q=from:jesseheines
- again thanks to 2010-2011 student Gerry Khorn, but this doesn’t seem to return the full tweet history, at least not for me
Interesting Information Related to GUI Programming Top
Tools
- Page Element Validators
- Balsamiq Mockups
— GUI design tool
- GIMP Graphic Editor
- FileZilla — for SFTP connection to weblab.cs.uml.edu
- PuTTY — for SCP connection to weblab.cs.uml.edu
- Sass — “Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin” — introduced to me by UI developer and student Nick Burns during the 2012-2013 Fall semester
- LESS — “LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions” — introduced to me by UI developer and student Nick Burns during the 2012-2013 Fall semester
- lint — the industry-standard JavaScript Code Quality Tool by Douglas Crockford
Utilities
IDEs and Test Environments
- Java Development Kit and NetBeans 7.2
- install the JDK first, then NetBeans
- Eclipse
- BlueJ
- RegexBuddy — introduced to me by 2010-2011 student Elad Shahar
- “learn, create, understand, test, use and save regular expressions”
- jsFiddle — a “playground” for web developers — introduced to me by 2012-2013 student Evan Mulawski
- CSS Desk — a “sandbox” for experimenting with CSS — introduced to me by graduate student Curran Kelleher during the Fall 2012 semester
- JSBin — another “playground” for experimenting with JavaScript and HTML that re-runs the code each time you change it — introduced to me by graduate student Curran Kelleher during the Fall 2012 semester
- “a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively”
- Curran Kelleher canvas demo
Other Resources of Interest
Writing Resources Top
