Category Archives: Web Design

Opera Web Standards Curriculum released!

Just released!

I haven’t the time to delve deeply, but I imagine that this will be quite excellent. The parent company – Opera – makes the Opera browser and was instrumental in the development of Cascading Stylesheets and their subsequent encapsulation as a web standard.

http://www.opera.com/wsc/

Advertisements

Advancing your Web Site: Tackling the Joys and Jitters of Javascript

Career-Technical Education Summer Conference 2008
Business & Information Technology Education
Pre-Conference Sessions
Monday, July 21, 2008; 9:00 AM – 3:00 PM
The Joseph S. Koury Convention Center, Grandover East
Room
The Sheraton Greensboro Hotel at Four Seasons, Greensboro, NC, USA

Description

Ready to take the next step in web site development? A full 14% of the North Carolina e-Commerce curriculum is devoted to including JavaScript, Cascading Stylesheets, Multimedia, and Java Applets in web sites. Furthermore, students love adding pop and sizzle to their web sites, so why be afraid to add them? This workshop will gently lead teachers into an understanding of JavaScript, what it is, how to work with it, and how to include it both effectively and safely in a web site.

References

Download

The Document Object Model (DOM)

This is a simplified view of the Document Object Model (DOM). Each box represents an object in the DOM tree structure. There are additional objects in the DOM that are not listed here. I hope to add them to an expanded image later.

The Document Object Model (DOM)

The Document Object Model (DOM)

HTML Event Handlers

This is a brief listing of HTML Event Handlers which are used to trigger JavaScript code in web pages:

onAbort The loading of an image has been canceled
onBlur A page element loses focus
onChange The user changes the content of a form field
onClick The user uses the mouse to click on a page element
onDblClick The user uses the mouse to double-click on a page element
onError An error occurs when loading a page or an image
onFocus A page element gets focus (selected)
onKeyDown The user presses a keyboard key
onKeyPress The user presses or holds down a keyboard key
onKeyUp The user releases a previously pressed keyboard key
onLoad A page or an image finishes loading
onMouseDown The user presses a mouse button
onMouseMove The mouse cursor moves
onMouseOut The mouse cursor moves off of a page element
onMouseOver The mouse cursor moves over a page element
onMouseUp The user releases a previously pressed mouse button
onReset The form is reset; the reset button is clicked
onResize A window or frame is resized
onSelect The user selects some text on the page
onSubmit The form is submitted; the submit button is clicked or the enter key is pressed
onUnload The user leaves the current page

Note: Event Handlers that are device-non-specific are preferred to those that are device-specific. So, for example, use onFocus and onBlur instead of onMouseUp and onMouseDown since the latter are triggered specifically by using the mouse. Keyboard presses will not trigger such an event. Using onFocus and onBlur will make the event device neutral and will be triggered by both the keyboard and the mouse.

Remember, the above event handlers are actually part of XHTML (since HTML 4) not JavaScript. JavaScript now boasts an extended list of event handlers. See http://www.java2s.com/Code/JavaScript/Event-onMethod/CatalogEvent-onMethod.htm for details.

So You Want To Develop An Advanced Web Site, Huh?

Career-Technical Education Summer Conference 2007
Business & Information Technology Education
Pre-Conference Sessions
Tuesday, July 24, 2007; 8:00 a.m. – 2:30 p.m.
The Joseph S. Koury Convention Center
The Sheraton
Greensboro Hotel at Four Seasons, Greensboro, NC, USA

Topics

References

Downloads

From HTML to XHTML and Beyond: XHTML Coding for e-Commerce I Teachers

Career-Technical Education Summer Conference 2006
Business & Information Technology Education
Pre-Conference Sessions
Monday, July 17, 2006; 8:30 a.m. – 5:00 p.m.
The Joseph S. Koury Convention Center
The Sheraton Greensboro Hotel at Four Seasons, Greensboro, NC, USA

Topics

  • Introduction to XHTML including step-by-step instructions from the ground up
  • XHTML compared and contrasted with HTML
  • Brief History of Markup Languages including SGML, HTML, XML
  • Common mistakes
  • Summary of Coding Rules for both HTML and XHTML
  • The use of helper programs including Notepad, Textpad, Microsoft Word, Microsoft Publisher, and Macromedia Dreamweaver
  • Books, Reference Materials, etc.
  • Brief summary of Firefox Features and Extensions including Web Developer and Color-Coded Page Source
  • The basic structure of a web page
  • Tags, RGB Hexadecimal Color Codes, Entities, and Extensions including JavaScript and Stylesheets
  • Standards, Accessibility, www.usability.gov Guidelines, and Browser Wars
  • Lots and lots of hands-on examples

Downloads

Common Web Design Mistakes

Introduction

Too often I visit web sites that are, well, not well-made. They suffer from common design mistakes that make the sites look amateurish. It’s all too common. If the designers of those sites followed the Research-Based Web Design and Usability Guidelines as developed by the National Cancer Institute, they wouldn’t have so many problems. The following are excerpts from those guidelines plus a few of my own recommendations thrown in:

General

  • Type all HTML tags using lowercase letters. Although HTML is not case-sensitive, XML is. XML requires all HTML tags to be lowercase. Thus, if there is even the slightest chance you will be upgrading your pages in the future you DEFINITELY want your pages to be ready.

Colors

  • Include the pound sign (#) at the beginning of all RGB Hexadecimal Color Codes. Some versions of the Netscape browser require this in order to display the color.
  • NEVER use blue (#0000FF) or purple (#660099) as a text color. Since these are the default colors for hyperlinks, visitors to your site can become confused when they mistake blue or purple text for a hyperlink.
  • Use a lighter colored background with darker colored text so it’s easier to print your pages. When a browser prepares a page for printing, the background is omitted by default. Thus, if your text is a light color like, say, yellow, then YELLOW text might print out on your WHITE paper.
  • Use a lighter colored background with darker colored text so it’s easier to read your pages. (Seriously, it’s actually been tested! It’s easier to read darker print on a lighter background.)
  • NEVER use blue (#0000FF) or purple (#660099) as a background color. Since these are the default colors for hyperlinks and visitors to your site can override your colors, it is possible for hyperlinks to be invisible against the background.

Images

  • Use only GIF or JPG images in your web pages. Only these two image types are widely supported as a web standard although the PNG file type is rapidly becoming a third.
  • NEVER use a photograph for a background. Background images on web pages MUST tile and most photographs don’t tile well. Furthermore, it is often difficult to read text on a page with a photograph for a background.
  • NEVER insert a large image into a web page and then resize the appearance of the image in the page by manipulating the width and height attributes. Instead, resize the image itself in an external editor to be the intended size for your web page and save it that way. Then insert. This will cut down on wasted bandwidth and slow loading times for visitors.
  • ALWAYS use relative referencing to insert images into your web sites. Check your work on another computer to make sure your images load properly.
  • ALWAYS include ALT text for images that are part of your content. (Ignore this rule for images that are part of the site theme like bullets, horizontal bars, etc.) – Thanks to SEO Gal in Toronto

Navigation

  • Include the World Wide Web moniker (www.) at the beginning of all web site URLs. Some versions of the Firefox browser and some incorrectly certified web sites require this in order to be displayed.
  • Navigational hyperlinks should be grouped together in an organized way. Usually, this means they should line up either horizontally across the page or vertically down the left side.
  • Your navigation should ALWAYS be located near the top of each page.
  • A link to your home page should ALWAYS be the first hyperlink in your navigation.
  • AVOID including anything in your navigation that is not a hyperlink. Better to link to a page that says “Under Construction” or “Coming Soon” than not be a hyperlink at all. Visitors to your site may become confused when they assume text is clickable because it is found near other hyperlinks.

Text

  • NEVER underline text on a web page. Since hyperlinks are underlined by default, users can become confused when they mistake underlined text for a hyperlink.
  • NEVER set the size attribute of the font tag. Since visitors to your site can override your sizes, it is possible for your site to display incorrectly. Use the Heading tags instead.