Web standards curriculum on W3C Wiki: plan for updates 2011

The beginning

Introduction to the Web Standards Curriculum by Chris Mills. { -- JUST NEEDS A GENERAL READ, AND A LITTLE BIT OF TWEAKING}

Introduction to the world of web standards

The history of the Internet and the web, and the evolution of web standards, by Mark Norman Francis. { -- NEEDS A GENERAL READ, PLUS I THINK IT COULD BENEFIT FROM A BIT MORE HISTORY BEING ADDED ABOUT THE EVOLUTION OF HTML5 AND CSS3}
How does the Internet work? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}
The web standards model - HTML CSS and JavaScript by Jonathan Lane. { -- A FEW TWEAKS NEEDED - THE HTML SECTION COULD DO WITH AN OVERHAUL TO CCOUNT FOR HTML5, AND DEAL WITH XHTML A BIT BETTER}
Beautiful dream, but what's the reality? by Jonathan Lane. { -- I THINK THIS ARTICLE COULD JUST BE REMOVED, AND A SMALL SECTION ADDED TO THE PREVIOUS ARTICLE TO COVER "THE REALITY OF IT ALL". AS IT STANDS, THIS ARTICLE IS A BIT OF A RANT, AND NOT REALLY THAT USEFUL TO EDUCATION}

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.

Information Architecture - planning out a web site, by Jonathan Lane.
What does a good web page need?, by Mark Norman Francis.
Colour Theory, by Linda Goin.
Building up a site wireframe, by Linda Goin.
Colour schemes and design mockups, by Linda Goin.
Typography on the web, by Paul Haine.

{ -- I THINK THIS WHOLE SECTION NEEDS AN OVERHAUL, AS CURRENTLY IT IS NOT VERY EFFECTIVE. THE TYPOGRAPHY AND IA SECTIONS ARE FINE, BUT I'M NOT SURE ABOUT THE OTHER STUFF. I THINK THE SECTION SHOULD BE RETITLED "PLANNING A WEB SITE", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING:

Planned New section to replace "Web Design Concepts" - to be called "Planning a web site"

Introduction to planning a web site
Scoping and user research
Information Architecture - planning out a web site. Hungarian translation | Catalan translation | Spanish translation
What does a good web page need? Hungarian translation | Catalan translation | Spanish translation
Typography on the Web. Hungarian translation | Catalan translation | Spanish translation
Colour schemes and deasign theory
Mockups and protptypes
User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?

HTML basics

The basics of HTML, by Mark Norman Francis. { -- THIS LOOKS OK, ALTHOUGH I THINK IT NEEDS A BIT OF UPDATING TO ACCOUNT FOR HTML5, THE HISTORY SECTION, ETC. THE EXAMPLES SHOULD ALSO BE UPDATED TO HTML5 SEMANTICS, WHERE APPROPRIATE, EG NO MORE DIVS FOR PAGE SECTIONS}
The HTML <head> element, by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET}
Choosing the right doctype for your HTML documents, by Roger Johansson. { -- I THINK THAT THIS NEEDS TO BE REWRITTEN TO FOCUS LESS ON DOCTYPES, AND MORE ON HTML/XHTML RULES, HOW THEY DIFFER, WHAT DOCTYPES REALLY ACHIEVED, WHAT ONES YOU MIGHT ENCOUNTER IN THE WILD, WHY WE WILL BE USING HTML5 DOCTYPE IN THIS COURSE, WHAT IT ACHIEVES, ETC.}

The HTML body

{ -- OVERALL THIS IS A REASONABLE SECTION, BUT QUITE A LOT NEEDS ADDING TO BRING IT UP TO DATE WITH HTML5, ETC. I WILL CLEARLY MARK NEW ARTICLES}

NEW ARTICLE - structural elements, section, article, etc. also including div and span
Marking up textual content in HTML, by Mark Norman Francis. { -- NEEDS UPDATING, AS SOME OF THESE ELEMENTS WILL HAVE CHANGED FUNCTION IN HTML5, AND DEPRECATED ELEMENTS HAVE BEEN REPURPOSED}
HTML Lists, by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}
Images in HTML, by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}
HTML links — let's build a web! by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}
NEW ARTICLE - HTML5 video and audio
HTML Tables, by Jen Hanen. { -- NOT MANY UPDATES NEEDED}
HTML Forms — the basics, by Jen Hanen. { -- THERE IS A LOT OF NEW HTML5 FORM STUFF TO ADD, OBVIOUSLY - I THINK THAT IN THIS CIRCUMSTANCE, BECAUSE SUPPORT FOR HTML5 FORM STUFF IS PATCHY ACROSS BROWSERS RIGHT NOW, WE SHOULD DO SMALL UPDATES ON THE EXISTING ARTICLE, THEN ADD ONE OR MORE SEPARATE ARTICLES TO COVER THE NEW HTML5 FORM ELEMENTS AND NEW ATTRIBUTES, AND THEN PERHAPS SEPARATE COVERAGE OF VALIDATION}
Lesser-known semantic elements, by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}
Generic containers — the div and span elements, by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}
Creating multiple pages with navigation menus, by Christian Heilmann.
Validating your HTML, by Mark Norman Francis. { -- I THINK THIS COULD BE REWRITTEN AND IMPROVED, AND RELOCATED TO A SECTION ABOUT DEBUGGING WEB PAGES? A MORE COMPLETE TREATMENT WOULD BE NICE}

Accessibility specifics

Accessibility basics, by Tom Hughes-Croucher.
Accessibility testing, by Benjamin Hawkes-Lewis.

I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:

WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE
THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL
DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508
ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?
REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE
COMMON SENSE - SOLUTIONS FOR COMMON ACCESSIBILITY ISSUES - A ROADMAP FOR FIXING ISSUES. START WITH SEMANTIC HTML, THEN GO TO VIDEO AND AUDIO CONTENT, JAVASCRIPT, AJAX, ALTERNATIVES. }

CSS

CSS basics, by Christian Heilmann. { -- NEEDS A BIT OF SPRUCING UP, TO TALK ABOUT NEW STUFF, PLUS WE NEED TO ADD SOME STUFF ABOUT ALL THE NEW CSS SELECTORS. OF DO WE? MAYBE WE COULD JUST COVER THE BASIC SELECTORS HERE, AND THEN COVER SOME OF THE MORE ADVANCED ONES IN APPROPRIATE PLACES, EG FORM RELATED ONES, AND OTHER ADVANCED ONES IN AN ARTICLE OF THEIR OWN - SEE NEXT ARTICLE}
NEW ARTICLE - ADVANCED SELECTORS - cover all the advanced selectors that we didn't cover in the previous chapter - last nth of type, valid, invalid, nth child, etc.
NEW CHAPTER - CSS3 SHADOWS
Inheritance and Cascade, by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}
Text styling with CSS, by Ben Henick. { -- THIS IS A VERY WEIGHTY CHAPTER, AND COULD DO WITH SLIMMING DOWN A BIT, AND MAKING MORE GRANULAR, PERHAPS EVEN SPLITTING IT. ALSO ADD WEB FONTS, AND TALK ABOUT SOME OF THE MORE OBSCURE TEXT STYLING STUFF, LIKE TEXT-OVERFLOW, GENERATED CONTENT FOR QUOTES, WORD WRAP, ETC.}
The CSS layout model - boxes, borders, margins, padding, by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}
CSS background images, by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, RADIAL GRADIENTS MIGHT NEED MULTIPLE CHAPTERS}
Styling lists and links, by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }
Styling tables, by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }
Styling forms, by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}
Floats and clearing, by Tommy Olsson. { - NOT THAT MUCH NEEDED, ALTHOUGH I NEED TO BE CAREFUL TO SEPARATE OUT MULTIPLE COLUMN LAYOUTS, AND COVER MULTI-COL THERE}
CSS static and relative positioning, by Tommy Olsson.
CSS absolute and fixed positioning, by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}
NEW CHAPTER - CSS3 TRANSFORMS
NEW CHAPTER - CSS3 TRANSITIONS
NEW CHAPTER - CSS3 ANIMATIONS
NEW CHAPTER - MEDIA QUERIES
NEW CHAPTER - VIEWPORT
NEW CHAPTER - CREATING AN ADAPTIVE DESIGN, USING MEDIA QUERIES, VIEWPORT, MULTI-COL, ETC.
NEW CHAPTER - OBJECT FIT/OBJECT POSITION
NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)

Advanced CSS study

Headers, footers, columns, and templates, by Ben Henick { -- NOT SURE HOW USEFUL THIS IS, MAYBE DISSECT IT, PUT THE USEFUL STUFF IN OTHER CHAPTERS. A BIT TOO LONG WINDED. }

JavaScript

Programming - the real basics!, by Christian Heilmann
What can you do with JavaScript?, by Christian Heilmann
Your first look at JavaScript, by Christian Heilmann
JavaScript best practices, by Christian Heilmann
The principles of unobtrusive JavaScript, by PPK
JavaScript functions, by Mike West
Objects in JavaScript, by Mike West
Traversing the DOM, by Mike West
Creating and modifying HTML, by Stuart Langridge
Dynamic style - manipulating CSS with JavaScript, by Greg Schechter
Handling events with JavaScript, by Robert Nyman
JavaScript animation, by Stuart Langridge
Graceful degredation versus progressive enhancement, by Christian Heilmann
NEW CHAPTER - OPTIMIZING JAVASCRIPT (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)
NEW CHAPTER - TOUCH EVENTS. THESE DEFINITELY NEED COVERAGE, AS THEY ARE GETTING VERY BIG THESE DAYS. TOUCH DEVICES ARE IMPORTANT.

HTML5 APIS

PROBABLY NEED TO INTERSPERSE THESE IN THE ABOVE SECTION, OR PUT NEW SECTIONS IN, EG "OFFLINE WEB APPLICATIONS" WOULD WORK WELL AS A DISTINCT SECTION.

MEDIA API
GEOLOCATION (YEAH, NOT HTML5, BUT HEY)
WEB WORKERS
WEB SOCKETS
APPCACHE
WEBSQL/INDEXEDDB
WEB STORAGE
CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)
HTML5 HISTORY API
DATASETS

OTHER THINGS TO COVER

SVG (REALLY NEEDS ITS OWN COURSE, See the following proposal)
WAI-ARIA

SVG

Source of inspiration :

SVG BASICS

History and usage : As for HTML, it could be good to start by giving some context: What is it, Where does it come, What is it made for, How is it different than HTML?
Syntax and deployment : This part would introduce the basic syntax, the concept of viewport and absolute positioning and finally how to embed an SVG document inside other language (basically HTML and CSS)
Basic shapes : This part will be dedicated to the basic shapes available in SVG
Position and transformation : To go deeper inside the viewport thing and to explain the role of the transformations.
Using text in SVG
Styling SVG : This is where we would detailed how to use presentation attributes and their CSS counterpart.
Scripting SVG : Where we could introduce the SVG DOM API.

Part 2 : SVG ADVANCED

How to build Pathes : To dig into the syntax of the d attribute on path elements
Animating the web with SVG Animations : How to use SVG Animations
SVG Filters : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)
Clipping and Masking
Patterns
Gradients
Dealing with the external : This part would be dedicated to the foreignObject element but also to links and images elements.

SVG article drafts we could use

SVG Primer (written by David Storey, but unused)
SVG Links (written by David Storey, but unused)

Adaptive design and development for Mobile and other alternative browsing devices

PROPOSED STRUCTURE

Mobile beginnings: An introduction to the mobile web (include history of mobiles, how mobile networks work, what the hardware looks like, what the software looks like)
What do the devices look like? (a fairly detailed reference showing the types of devices you are likely to need to support when building cross device adaptive apps. Include data such as screen resolution, espect ratio and dpi of the different devices. This kid of reference material will be very useful to developers.)
Mobile constraints and advantages (what are the specific constraints you need to work around for mobile and alternative browsing devices? What are the advantages, eg the context specific technologies you can take advantage of?)
Mobile friendly: web design and development Overview (start with a basis of semantic HTML, accessibility best practices are Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile? A brief introduction to Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, geolocation, multimedia, offline apps, don't use browser sniffing!) A lot of this will be covered elsewhere.
Feature detection, polyfilling, graceful degredation, etc. An article on this would be good, maybe something which showed how to detect for all different features. Kind of like Mark Pilgrims' No bullshit guide to detecting everything. Before he took it all down.
MOBILE/DEVICE TESTING

OTHER THINGS TO ADD ELSEWHERE IN THE MATERIAL

WE SHOULD WRITE AN ARTICLE TITLED "ONE WEB, MANY DEVICES", PLACED INSIDE http://www.w3.org/wiki/Web_Standards_Curriculum#Introduction_to_the_world_of_web_standards
WE SHOULD ALSO SAY SOMETHING ABOUT SEMANTICS AND DIVERSE DEVICES IN http://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript

Supplementary articles

Getting your content online, by Craig Grannell. { -- DOESN'T NEED CHANGES }
More about the document <head>, by Chris Heilmann. { -- PROBABLY DOESN'T NEED CHANGES, ALTHOUGH IT WOULD BE NICE TO MOVE IT INTO THE MAIN HTML SECTION, AS IT GETS LOST OUT HERE }
Common HTML entities used for typography, by Ben Henick. { -- DOESN'T NEED MANY CHANGES }
The Opera Web Standards Curriculum glossary, by various authors. This is incomplete, and will be added to as time goes by. { -- NEEDS A LOT OF TERMS ADDING, IF IT IS TO BE USEFUL }

Deprecated articles: removeed from original WSC