• View
• Edit
• History
• Print

Due to spam attacks I had to password protect editing. The password is the web standard you use to define the presentation of a web site (in uppercase).

Opera Articles

Web design with web standards: The ultimate teaching guide

bold articles are still without an author articles in italics are done

Each numbered bullet point is expected to be one article of around 1500-2000 words.

This is intended to be a web standards course comprised of several articles, aimed at pretty much anyone who wants to learn web stand-based web design from scratch. It is intended to take the reader from nothing more than a basic familiarity with web standards, to being pretty competent with the basics. and having enough knowledge to start thinking about entering the job market with confidence (obviously experience can't be taught.)

The main problem I have at the moment is that below there are listed 48 articles just in the basic section! I think I probably don't want the series to run longer than about 40 articles at the most, for the basic level stuff. I'm looking for suggestion on how it can be cut down, or what needs to be improved on.

Each article should have a "Reader exercises" section at the bottom of it, with a couple of questions aimed to get the reader thinking out of the box a bit more. The answers will be published in a separate document, which can be handed out to teachers, and students who ask really nicely.

The beginning

1. Introductory material (CHRIS MILLS) - include table of contents, credits page, note about licensing, and section on what this guide is all about, and what it's purpose is, who is it aimed at, etc.

Introduction to the world of web standards

2. (NORM) History of the web, and what web standards are. Remember to start off basic - the readers of this guide will be complete noobs - they won't necessarily know who Tim Berners Lee is, or what HTML is, or what a server is.

3. (JON LANE) How does the internet work? Cover HTTP, the client-server model, what a web browser is, and what it's relationship to your OS is, what a web server is, and what technologies go into creating web sites. Discuss the difference between static and dynamic (server-side) pages, and say what CSS, Java Script? and HTML do, very briefly. Also mention what server-side languages such as PHP do, but don't go there yet.

4. (JON LANE) The web standards model - show in a bit more detail what HTML, CSS and Java Script? do, and give a very simple application, but don't expect the reader to understand anything yet - make this clear. Talk about separation of presentation, content and behavior, and start to talk about what the advantages are, eg standards meaning easier code maintenance, accessibility, portability etc. These will be expanded on later when we get to specific stuff - the reader won't be expected to understand them yet.

5. (JON LANE) Beautiful dream, but what's the reality? In this article, talk about why the beautiful web standards picture presented above isn't actually completely accurate. Talk about bad practices, browser differences and hacks, needing to support different devices and O Ses?, and then why organizations such as the W 3 C?, Wa SP?, and why they exist. Again, just give the reader statements to believe right now, and then go into this stuff in more detail later on. This may make web development sound a bit scary, so try to reassure the reader that it is not that scary really to get into the basics.

Web Design Concepts

This section won't go into any code or markup details, and will act as an introduction to the design process before you start to create any graphics or code, as well as concepts of web design such as IA, navigation, usability etc.

6. Putting pen to paper (JON LANE) - deciding on a good web site structure. This will be the typical IA article. Show some sample information that you want to display on a web site, such as a band site, with biography, discography with lyrics, contact details, and photo gallery. Then show how to split it up and organize it nicely with a paper sketch. start the article with a "client brief" (although don't call it that) - for example "we need a site where we can show some information about our band, show our tour dates, pictures of us..bla bla.." - and finish up with final rough sketches.

7. (NORM) What does a good web page need? Here we will follow on from the previous article, showing an HTML mockup of the site we designed, and taking the reader through the main points of it to show what's important on a typical site - again, no HTML/CSS will be discussed yet. Point out the consistent navigation, the contact form, the header, footer, and body, the good heading structure, and talk about how this goes to make a usable site. Talk about what usability is, and what's necessary to achieve it. Also talk about accessibility and what it is, in high level terms. Mention that accessibility and usability will be terms that we will keep coming back to throughout the course. Make sure that article isn't about the layout or presentation of the page, just what information is needed on each page, so they can think about how structuring that in a semantic way...this is paragraphs of text, this is a heading, this is a footer...Don't need to think about actual tags/elements yet.

8. (LINDA GOIN) Colours and graphics. Here we will take the reader through the basics of graphic design for the web, including the sorts of graphics you'll need, what works and what doesn't, choosing colors for text/background etc that match your masthead graphics, colour wheels, basic colour theory. This might take more than one article.

9. (PAUL HAINE) Basic typography. Include some very basic typography rules, mention why typography sucks on the web compared to print design, say briefly what kind of fonts are available, and then say we'll get on to the actual code in the CSS section.

HTML

At this point we need to make sure all articles keep using the same basic example web site, first seen in the above section. This is where we turn our good semantics into actual HMTL tags.

10. (NORM) The basics of HTML. Give a little recap on the history of HTML, the main parts of a well-formed HTML document, what the purpose of HTML is.

11. (CHRISTIAN HEILMANN) The HTML <head>. In here, cover meta data briefly, doctypes, and how to import JS and CSS using link also talk about including CSS and JS using style and script tags, and say why linking is better.

12. (CHRISTIAN HEILMANN) More on meta data. Say what meta data is, and why you should use it - include meta tags, title, etc. Talk briefly about SEO too.

13. More on DOCTYPES (ROGER JOHANSSON). cover them in more detail - why are they necessary, what do the different ones do, what should you choose in your work? tell the reader what they should choose at this stage (strict of some kind would be best - we don't want them learning bad transitional habits,) and also mention what quirksmode is, and perhaps give a link to another resource on it?

The HTML body

14. (NORM) HTML text basics. Cover p, blockquote, pre, code, strong, em, br, hr. Explain why b and i inappropriate in most circumstances (not all - for example i is ok when used for book titles, and they should always be in italics,) and why images should not be used to represent text on web pages. Include a specific section on id and class attributes, and what they do

15. (BEN BUCHANAN, was filled in with NEIL CROSBY, but this one has already been taken - sorry.) Lists. Cover ordered, unordered, definition

16. Images (CHRISTIAN HEILMANN)

17. Links (CHRISTIAN HEILMANN) Talk about bg images in CSS as well as <img>

18. Tables (JEN HANEN)

19. Forms (JEN HANEN)

20. (NORM) Lesser-known semantics. Cover sup, sub, cite, abbr, etc.

21. (NORM) Generic containers. Cover span and div, and explain what they are used for, in time for the CSS section.

22. (CHRISTIAN HEILMANN) Creating multiple pages with navigation menus. Using images, lists, links. In this article you will link together the pages created in the previous articles using a simple HTML navigation menu. Still no CSS at this point.

23. (NORM) Validating your HTML. introduce the concept of valid HTML, say how to debug it, using the Opera tools, W 3 C? validator etc. Talk about how debugging CSS and Java Script? is the same kind of concept, and say it is covered later on.

Accessibility

24. (TOM HUGHES-CROUCHER) Accessibility basics. Talk about the basic premise of accessibility (what it is, why it is necessary) in a bit more detail than the "What does a web page need?" article - talk about the different types of disability that we are aiming to serve (these should be covered in more detail in a series of articles by Tom Hughes-Croucher,) tools they use, and summarize some of the general rules that should have been interspersed throughout the above articles, eg using alt tags for images, using proper headings in tables. Also cover Section 508, WCAG 1 and 2, and any other stuff that's worth covering. Only cover this stuff in brief, and give some quick examples of how to use some of the guidelines, so the reader can try to work the other guidelines out themselves. Show how to use the validators. There is far too much to cover here in my basic article plan.

25. (TOM HUGHES-CROUCHER/BEN) Testing techniques. Show how to use the tools, eg Bobby, Web AIM?, talk about using Lynx to emulate how a screen reader sees the text in your browser, and give tips for using real users to help with testing. Also talk about Opera's accessibility tools, such as disabling images and CSS, etc. Make it clear that guidlines and tools are only ever guides, rather than total validating tools

CSS Basics

26. (CHRISTIAN HEILMANN) Basics. Cover adding CSS to your page, basic selectors, and using shorthand for values.

27. The cascade and specificity (TOMMY OLSSON)

28. Styling text. Cover background colour, text colour, font faces, etc.

29. Borders, margins, padding; Should include a description of the box model.

30. (NICOLE SULLIVAN) Background images and colors All of the background properties, including color, position, tiling, attachment, etc., an intro to CSS sprites, negative background positions, using center, making elements expandable by combining images and colors, and the basics of testing that your code is robust (e.g. the design won't break when translated to german).

31. (CHRISTIAN HEILMANN) Styling lists and links, making nav bars

32. (CHRISTIAN HEILMANN) Styling tables

33. Styling forms

CSS Layout

34. Floats and clearing (TOMMY OLSSON)

35. Understanding z-index (TOMMY OLSSON)

36. Static and relative positioning (TOMMY OLSSON)

37. Absolute and fixed positioning (TOMMY OLSSON)

38. Liquid and elastic (TOMMY OLSSON)

39. Mastheads and footers

Java Script? basics

40. (CHRISTIAN HEILMANN) Basic programming primer. Here we will discuss the real basics of programming that you'll need to have a clue about before you go anywhere near a programming language, such as Java Script?. Keep it really simple here, and just start by talking about variables, arrays, data types operators, loops, if...then type constructs etc. Don't go anywhere near OOP, custom functions or anything like that.

41. (CHRISTIAN HEILMANN) What can you use Java Script? to do? Without going into any code, show what you can actually use Java Script? to do - talk about how you can manipulate elements on the page using classes and I Ds? as hooks, etc. Show JS as the behavior layer; the classic diagram.

42. (CHRISTIAN HEILMANN) Your first look at Java Script?. Show some really simple examples of using Java Script? to manipulate items on page. Show that JS can be included in the page using <script> in the head, or by linking to external files. Say why external files is better.

43. (PPK) The value of being unobtrusive. Talk specifically about how you should be adding Java Script? to the page unobtrusively, so that the page can still be used if Java Script? is turned off . Demonstrate this with a simple example

44. (MIKE WEST) Functions. Cover the basics of using functions.

45. (MIKE WEST) Objects, methods and properties. Your typical basic OOP stuff. Show the advantages of doing it this way, and maybe a simple example, but not much more, as I suspect OOP stuff is too advanced for a beginner's course.

46. (MIKE WEST) Java Script? best practices. Cover naming conventions, code layout, commenting, functions, not using globals; sensible scope instead.

47. (MIKE WEST) Traversing the DOM. Show an HTML document represented as a typical DOM tree, and then show how to access the different nodes using getElementById, firstChild, lastChild, nodeType etc.

48. (MIKE WEST) Creating and modifying HTML elements and attributes. Cover the basics of using Inner HTML?, and DOM methods like createElement and appendChild.

49. (CHRISTIAN HEILMANN) Modifying CSS. Cover the style property, switching stylesheets, className switching, using setAttribute.

50. (MIKE WEST) Animation. Cover position and timers, and show some basic animation examples.

Miscellaneous topics to include

(CHRISTIAN HEILMANN) Graceful degredation versus progressive enhancement. An important set of topics to learn; the distinction between the two is also important.

MORE ADVANCED TOPICS

NOT MANDATORY FOR THE BASIC WEB STANDARDS COURSE BUT WOULD BE GOOD TO PUBLISH EVENTUALLY.

• Advanced Markup techniques
• Localization (NORM)
• Internationalization (NORM)
• Microformats. We should have articles to cover µ Fs? by this point already anyhow. (BEN WARD)

More advanced CSS techniques

• important and inherit
• CSS rollovers
• Attribute selectors
• Different media types. Cover print, projection, TV, handheld etc, and say they can be made use of.
• CSS Hacks and Filters (What else should we cover here? Should this stuff be folded into the main CSS article flow?)
• Dealing with IE 5? and IE 6?
• Conditionals
• 3 pixel jog
• FOUC
• box model hack
• Images and Java Script?
• Preloading images
• Creating a slide show
• Java Script? image rollovers
• Creating accessible image captions using alt attributes

Events

• The basics. Explain the basics of how events work (event flow etc,) show a brief example, and then explain how it is not always that simple because of browser incompatibilities.
• Mouse events
• Form events
• Window events
• Keyboard events

Forms and Java Script?

• Validation with regular expressions. Cover the basics of form validation - say why you should use client-side and server-side form validation, then go on to show how to use regular expressions to validate some basic patterns such as e-mail addresses, and show how to provide basic error messages.
• Showing good error messages. Show how to use some DOM effects to produce more intuitive error messages, eg yellow fade, and also give some tips on how to write non-confusing error messages.
• More advanced event types
• Load and unload
• Resize
• Scroll
• Abort and error
• Blur and focus
• Change

Ajax

• The Basics of Ajax. Here say how it differs from a normal request-response, what Java Script? objects are involved, and what else is needed. Take the reader gently through the anatomy of an Ajax request.
• Ajax Data sources. Cover XML and JSON, how they differ, advantages and disadvantages.
• Simple examples. Go through a couple of simple Ajax examples, to show how you build up this stuff.
• What is wrong with Ajax? Look at common Ajax issues, such as breaking the back button, bookmarks, and what can be done to solve these. Also talk about the fact that Ajax is often inaccessible.
• Unobtrusive Ajax. Discuss Hijax/how to make Ajax unobtrusive, including mentioning mobile Ajax (a particular area where Ajax support can vary greatly.)
• A bigger example - Ajax powered forms. Show how you can cut down on page reloads in a form by using Ajax for a bit of validation.

3rd party Java Script?

• The basics of 3rd party Java Script?. Talk generally about how it is used in your web sites, and talk about RSS feeds and RE St? AP Is? perhaps?
• Libraries part 1. Cover the basics, and how to use libraries responsibly.
• Libraries part 2. Show some quick examples of using libraries, such as jQuery and Prototype. Give links to other resources on using libraries, such as the dev.opera.com articles on jQuery, Chris Heilmann's YUI coverage etc.
• Introduction to AP Is?. Say how AP Is? work, and what is available, eg Flickr, Google Maps, Yahoo search etc. Show a couple of quick examples then give more links to other sources.
• Other 3rd party Java Script?. Discuss other 3rd party JS, and what's available? Lightbox for example?

Debugging

• Debugging common mistakes. Cover typos and casing, trying to access undefined variables, tracing using alert, try() and catch().
• Debugging with 3rd party tools. Opera developer tools, WDTB, Firebug, MS Script debugger, JS Lint?.