WSC proposed updates

From W3C Wiki
Revision as of 11:28, 15 July 2011 by Karl (Talk | contribs)

Jump to: navigation, search

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

  1. 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}
  2. How does the Internet work? by Jonathan Lane. {-- NO TWEAKING NEEDED; JUST SPIT AND POLISH}
  3. 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}
  4. 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.

{ -- 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 "DESIGN AND PLANNING", AND HAVE A STRUCTURE SOMETHING LIKE THE FOLLOWING:

  1. INTRO TO PLANNING A WEB SITE - COVER ALL THE PRELIMINARY RESEARCH AND DESIGN AT A HIGH LEVEL, AND THEN GIVE LINKS TO EACH BIT IN MORE DETAIL, WHICH WILL BE COVERED IN LATER CHAPTERS
  2. SCOPING
  3. USER RESEARCH
  4. PAGE DESIGN ELEMENTS
  5. INFORMATION ARCHITECTURE
  6. TYPOGRAPHY
  7. COLOUR SCHEMES AND DESIGN THEORY
  8. MOCKUPS/PROTOTYPES
  9. THE IDEA BEHIND UX, AND HOW TO GET YOUR SITE WORKING BETTER FOR YOUR USERS, AND FITTING WITH YOUR BRAND
  10. MAKING CHANGES, WORKING TOWARDS A DESIGN YOU CAN TAKE FORWARD TO IMPLEMENTATION}
  1. Information Architecture - planning out a web site, by Jonathan Lane.
  2. What does a good web page need?, by Mark Norman Francis.
  3. Colour Theory, by Linda Goin.
  4. Building up a site wireframe, by Linda Goin.
  5. Colour schemes and design mockups, by Linda Goin.
  6. Typography on the web, by Paul Haine.

HTML basics

  1. 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}
  2. The HTML <head> element, by Christian Heilmann. { -- NEEDS UPDATING, AND HTML5 FEATURES ADDING, SUCH AS META CHARSET}
  3. 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}

  1. NEW ARTICLE - structural elements, section, article, etc. also including div and span
  2. 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}
  3. HTML Lists, by Ben Buchanan. { -- DOESN'T NEED MANY UPDATES}
  4. Images in HTML, by Christian Heilmann. { -- NEEDS A BIT OF SPIT AND POLISH, AND NEEDS FIGURE AND FIGCAPTION ADDING}
  5. HTML links — let's build a web! by Christian Heilmann. { -- NEEDS SPIT AND POLISH, AND NEEDS THE CONCEPT OF BLOCK LEVEL LINKS ADDING}
  6. NEW ARTICLE - HTML5 video and audio
  7. HTML Tables, by Jen Hanen. { -- NOT MANY UPDATES NEEDED}
  8. 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}
  9. Lesser-known semantic elements, by Mark Norman Francis. {THIS WILL NEED UPDATING, AS A NUMBER OF THESE ELEMENTS HAVE BEEN REDEFINED}
  10. Generic containers — the div and span elements, by Mark Norman Francis. { -- REMOVE THIS ONE - THIS WILL BE COVERED IN THE STRUCTURAL ELEMENTS ARTICLE}
  11. Creating multiple pages with navigation menus, by Christian Heilmann.
  12. 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

  1. Accessibility basics, by Tom Hughes-Croucher.
  2. Accessibility testing, by Benjamin Hawkes-Lewis. {I THINK THIS NEEDS TO BE EXPANDED OUT TO SEVERAL ARTICLES, TO COVER DIFFERENT ASPECTS, SOMETHING LIKE:

A. WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE B. THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL C. DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508 D. ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU? E. REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE F. 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

  1. 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}
  2. 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.
  3. NEW CHAPTER - CSS3 SHADOWS
  4. Inheritance and Cascade, by Tommy Olsson. { -- NOT MUCH TO UPDATE HERE}
  5. 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.}
  6. The CSS layout model - boxes, borders, margins, padding, by Ben Henick. { -- AGAIN, MIGHT NEED SPLITTING, NEED TO COVER DIFFERENT LAYOUT MODELS, BORDER-RADIUS ETC.}
  7. CSS background images, by Nicole Sullivan. { -- NEED TO UPDATE TO COVER MULTIPLE BACKGROUND IMAGES, BORDER-IMAGE, LINEAR GRADIENTS, MIGHT NEED MULTIPLE CHAPTERS}
  8. Styling lists and links, by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }
  9. Styling tables, by Ben Buchanan. { -- DOESN'T NEED THAT MUCH }
  10. Styling forms, by Ben Henick. { -- NEED TO ADD CSS3 FORM-RELATED PSEUDO CLASSES, AND DISCUSSION OF STYLING ERRORS AND STUFF}
  11. 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}
  12. CSS static and relative positioning, by Tommy Olsson.
  13. CSS absolute and fixed positioning, by Tommy Olsson. { -- THE POSITIONING CHAPTERS NEED SOME WORK, BUT NOT THAT MUCH}
  14. NEW CHAPTER - CSS3 TRANSFORMS
  15. NEW CHAPTER - CSS3 TRANSITIONS
  16. NEW CHAPTER - CSS3 ANIMATIONS
  17. NEW CHAPTER - ADAPTIVE WEB DESIGN FOR MOBILE - MEDIA QUERIES, VIEWPORT.
  18. NEW CHAPTER - OBJECT FIT/OBJECT POSITION

Advanced CSS study

  1. 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

  1. Programming - the real basics!, by Christian Heilmann
  2. What can you do with JavaScript?, by Christian Heilmann
  3. Your first look at JavaScript, by Christian Heilmann
  4. JavaScript best practices, by Christian Heilmann
  5. The principles of unobtrusive JavaScript, by PPK
  6. JavaScript functions, by Mike West
  7. Objects in JavaScript, by Mike West
  8. Traversing the DOM, by Mike West
  9. Creating and modifying HTML, by Stuart Langridge
  10. Dynamic style - manipulating CSS with JavaScript, by Greg Schechter
  11. Handling events with JavaScript, by Robert Nyman
  12. JavaScript animation, by Stuart Langridge
  13. Graceful degredation versus progressive enhancement, by Christian Heilmann

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.

  1. MEDIA API
  2. GEOLOCATION (YEAH, NOT HTML5, BUT HEY)
  3. WEB WORKERS
  4. WEB SOCKETS
  5. APPCACHE
  6. WEBSQL/INDEXEDDB
  7. WEB STORAGE
  8. CANVAS (SHOULD PROBABLY HAVE ITS OWN SECTION ENTIRELY)
  9. HTML5 HISTORY API
  10. DATASETS

OTHER THINGS TO COVER

  1. SVG (REALLY NEEDS ITS OWN COURSE)
  2. WAI-ARIA

Mobile web development

I WANT TO CREATE AN ENTIRE NEW MOBILE COURSE, TO BE RUN INDEPENDENTLY IN ITS OWN RIGHT. I AM CURRENTLY WORKING ON THIS FOR A UNIVERSITY, BUT IT WILL BE THEN ROLLED OUT FOR ANYONE TO USE. THE ROUGH NOTES I HAVE RIGHT NOW ARE:

  1. Introduction to how mobiles work, and what features they have - hardware, browsers, networks, Wifi/GPRS/3G, etc.
  2. Mobile web is the same as the normal web, but with a few more constraints, and different UX requirements - brief summary of differences
  3. Mobile browser constraints - it isn't just about Webkit - you also have other good browsers such as Opera Mobile, and also lots of feature phones with low spec browsers to consider. Also Opera Mini, very popular, but a proxy browser. How does this work with your apps?
  4. Mobile UX - all about context, what does the user want to do in this context, how does it differ from the desktop, etc.?
  5. Making an app or site mobile friendly - do you create a different site, or do you adapt your existing site for mobile?
  6. Adaptive design - graceful degradation, progressive enhancement, using media queries and viewport to adapt layout, using feature detection to server appropriate content and services, NOT browser sniffing!
  7. Optimising for mobile - JS optimisation, size matters
  8. Accessibility for mobile - a lot of accessibility best practices come into their own on mobile, eg providing a transcript for a video can be great when you are in a noisy environment such as a pub full of football fans and can't hear the video, or if you haven't got the bandwidth to download the video at all
  9. Important new technologies for mobile - Geolocation API, Offline apps (web storage, AppCache, WebSQL), HTML5 video
  10. Tapping into physical device features - WAC
  1. Mobile 1: Introduction to mobile web, by Brian Suda

Supplementary articles