UMass Lowell Dept. of Computer Science
91.461 GUI Programming I
Fall 2015 Semester, Section 201
Prof. Jesse M. Heines
Notes for Class No. 2
Addressing WebLab and XAMPP Issues, Human Factors in GUI Programming,
HTML5 Structure, and Basic HTML5 Elements
Thursday, September 3, 2015
A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html
Handouts and Materials
Openings / Announcements / Reminders
I am looking for a native Spanish speaker who can do a bit of translation for me for a project
- I have a small amount of money to pay for this work
Things You Were Supposed to Have Done by Today
(1) Read the Course Syllabus carefully
(2) Complete your registration for this class using the Google form posted at
https://docs.google.com/forms/d/166cx_uRhYJ24qoI-zMrs1dpWVyOw5iloQ-ojjF41lv4/viewform
- 35 students had done this as of last night at 11:00 PM
- that means that about 18 of you had not yet done so
- please do so immediately
(3) Join the class discussion forum at https://piazza.com/uml/fall2015/91461/home
- 34 students had done this as of last night at 11:00 PM
- I have posted an email discussion I had with Emily Seto on Mac OS Yosemite
- thus, if you haven’t joined the discussion forum yet you’re definitely missing out on course information
(4) Complete the Pre-Course Survey if you have not already done so
- 32 students had done this as of last night at 11:15 PM
- please complete this survey
(5) Set up your personal system for use in this course by completing Assignment No. 1
Class Notes
Related reading for this class: JSjQ:TMM pp. 4-7, w3schools.com
Introductory Things We Didn’t Touch On In Our Last Class
All classes are automatically videoed by the University Echo360 system
- see the link at the top of this page
- log in with your standard UMass Lowell credentials, the same ones you use for your @student.uml.edu email and ISIS
- videos show the front of the class and the output from the projection system
All of last year’s class notes and assignments are still online
- go to my Teaching page and click the links there for previous semesters’ course websites
Discussion: XAMPP and Mac Web Services and NetBeans Problems
What problems did you encounter and how did you work around them?
Two Important Factors in GUI Programming
Being Sensitive to Human Factors
- no program is worth anything if no one can use it
- remember that others don’t have your view of how your app is intended to work
- do things “the normal way” unless you have a good reason to do otherwise
- have others try out your code and address the places where they stumble
- minimize the number of user interactions needed to do a job, but provide options in dialog boxes or on secondary pages
- write good English (or whatever language you use) in complete sentences
- provide excellent error messages:
- state exactly what the problem is
- state precisely where the problem is
- direct users on how to solve the problem
As we discussed in our first class, the first steps in practicing human factors are
- to care about this issue
- to train yourself to notice things
Writing Maintainable Code
- good coding style is critical because all professional software development is done in teams
- professional code is elegant, it truly has beauty
- professional code is not a puzzle
- professional code should not require guessing on the part of the maintainer
- avoid esoteric shortcuts (although commonly used shortcuts are OK)
- write more code that is clearer so that it is easier to maintain
- let the compiler optimizer make your code more efficient
- efficiency isn’t a big deal anyway in user interface code
- documentation is critical because you can never remember what you did or why you did it
- programs over 100 lines are complex
- documentation is for yourself as well as for others
- document where you found things
- document what didn’t work as well as how you figured out what did
- you may have to come back and revise your code 5 years from now
What Is a Markup Language?
This material is covered in the Learnable video sections listed in Assignment No. 1
The Minimal HTML5 Document
The following code appears in our textbook, JavaScript & jQuery: The Missing Manual, at the top of page 5
What can you say about this code? (respond at http://pollev.com/heines)
The minimal HTML document
Run this code
What can you say about this code? (respond at http://pollev.com/heines)
Things to note
- the
DOCTYPE
statement
- must be the first line of the file
- this is not an HTML tag, it is a directive
- it tells the browser what’s coming down the pipe
- the
html
tag
- this should be next in our case
- sometimes other things must come first in server-side pages, but we’re not doing that
- note that the tag is lowercase
- note that the closing tag is the last line of the file
- everything in between these tags is the HTML document
- that document is an object that we will later manipulate on-the-fly with JavaScript
- the
head
and body
sections
- web browsers create multi-threaded connections to web servers
- web page elements are loaded in separate threads
- however, the
head
section is guaranteed to be fully loaded before the body
is loaded
- this will be critical when we program in JavaScript
- the
meta
tag
- notice the indentation to show the document’s hierarchical structure
- the
charset
attribute
- we speak of the attribute name and its corresponding value
- where else have you seen “name/value pairs”?
- typical value is
"utf-8"
- note that values are enclosed in quotes
- some browsers don’t require this, but you need to develop a habit of writing good code
- the tag+attribute (
meta+charset
) is required by the HTML5 specification
- it must be within the first 512 characters of the document
- therefore, it must appear before substantial comments
- note that unlike in HTML4 and XHTML, the
meta
tag is *not* closed
- comment delimiters
<!-- -->
- initial documentation components
- identify the file
- identify the author
- provide the author’s contact information
- include copyright information
- identify when the page was last updated and by whom
- state the purpose of the page
- other documentation should identify the *purpose* of each of your major sections
- do *not* document the HTML per se, document what the HTML *does*
- the title tag
- required by the HTML5 specification
- labels the browser window and/or tab
- note that the ones on my lecture notes are partially generated automatically by JavaScript
- note that the
title
tag must be closed
- we then see the closing tag for the
head
section and the opening tag for the body
section
- the body contains only a simple p (paragraph) tag at this point
- this is the only thing in the above HTML file that isn’t required
Using NetBeans
Creating an HTML5 project
- File
->
New Project...
- Category: HTML5
- Project: HTML5 Application
- click Next> repeatedly, taking all the defaults from there on
Result
What can you say about this code? (respond at http://pollev.com/heines)
Special note on the position of the <meta charset="UTF-8">
element
- must be within 512 characters of the beginning of the file
- this is why in my code, the documentation comes *after* the
<meta charset="UTF-8">
element
Validation
HTML
We will see additional validators for CSS, too
The JavaScript “validator” — actually a syntax checker — is called JSLint
Understanding What You Are To Do for Assignment No. 2