Difference between revisions of "WSC proposed updates"

From Web Education Community Group
Jump to: navigation, search
(Planned New section to replace "Web Design Concepts" - to be called "Planning a web site")
(JavaScript)
Line 107: Line 107:
  
 
== JavaScript ==
 
== JavaScript ==
 
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann
 
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann
 
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann
 
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann
 
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK
 
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West
 
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West
 
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West
 
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge
 
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter
 
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman
 
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge
 
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement 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.
 
  
 
Proposed topics, there is still much that can be added here. Wanted to get the initial posted and will continue to add/update.
 
Proposed topics, there is still much that can be added here. Wanted to get the initial posted and will continue to add/update.
Line 213: Line 197:
 
## Browser support
 
## Browser support
 
## Cover additions...
 
## Cover additions...
 +
 +
What we have so far:
 +
 +
# [http://www.w3.org/wiki/Programming_-_the_real_basics Programming - the real basics!], by Christian Heilmann
 +
# [http://www.w3.org/wiki/What_can_you_do_with_JavaScript What can you do with JavaScript?], by Christian Heilmann
 +
# [http://www.w3.org/wiki/Your_first_look_at_JavaScript Your first look at JavaScript], by Christian Heilmann
 +
# [http://www.w3.org/wiki/JavaScript_best_practices JavaScript best practices], by Christian Heilmann
 +
# [http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript The principles of unobtrusive JavaScript], by PPK
 +
# [http://www.w3.org/wiki/JavaScript_functions JavaScript functions], by Mike West
 +
# [http://www.w3.org/wiki/Objects_in_JavaScript Objects in JavaScript], by Mike West
 +
# [http://www.w3.org/wiki/Traversing_the_DOM Traversing the DOM], by Mike West
 +
# [http://www.w3.org/wiki/Creating_and_modifying_HTML Creating and modifying HTML], by Stuart Langridge
 +
# [http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript Dynamic style - manipulating CSS with JavaScript], by Greg Schechter
 +
# [http://www.w3.org/wiki/Handling_events_with_JavaScript Handling events with JavaScript], by Robert Nyman
 +
# [http://www.w3.org/wiki/JavaScript_animation JavaScript animation], by Stuart Langridge
 +
# [http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement 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.
  
 
== OTHER THINGS TO COVER ==
 
== OTHER THINGS TO COVER ==

Revision as of 17:43, 23 May 2012

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.

  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.

{ -- 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"

  1. Introduction to planning a web site
  2. Scoping and user research
  3. Information Architecture - planning out a web site. Hungarian translation | Catalan translation | Spanish translation
  4. What does a good web page need? Hungarian translation | Catalan translation | Spanish translation
  5. Typography on the Web. Hungarian translation | Catalan translation | Spanish translation
  6. Colour schemes and design theory
  7. Mockups and prototypes
  8. User interface Design
  9. The Art and Science of CSS-Layouts
  10. User experience design - INCLUDE MOBILE/ALTERNATIVE DEVICE USER EXPERIENCE. HOW DOES IT DIFFER?
  11. Optimization For Websites

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:

  1. WRITING A PLAN FOR A11Y TESTING, INCLUDING USE OF REAL USER TESTING, CONFORMANCE CRITERIA, AUTOMATED TOOLS, AND GOOD OLD COMMON SENSE
  2. THE LEGAL SIDE OF THINGS, EXPLAINED IN DETAIL
  3. DECIPHERING WCAG, AND OTHER CONFORMANCE CRITERIA SUCH AS SECTION 508
  4. ACCESSIBILITY TOOLS, WHAT TO USE AND WHAT TO AVOID. HOW FAR WILL THESE GET YOU?
  5. REAL A11Y TESTING WITH REAL PEOPLE, HOW TO PUT TOGETHER FOCUS GROUPS, WHAT TO LOOK FOR HERE
  6. 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, RADIAL 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. CSS3 2D Transforms, by Alexander Futekov { -- NEW CHAPTER}
  15. NEW CHAPTER - CSS3 3D TRANSFORMS
  16. NEW CHAPTER - CSS3 TRANSITIONS
  17. NEW CHAPTER - CSS3 ANIMATIONS
  18. NEW CHAPTER - MEDIA QUERIES
  19. NEW CHAPTER - VIEWPORT
  20. NEW CHAPTER - CREATING AN ADAPTIVE DESIGN, USING MEDIA QUERIES, VIEWPORT, MULTI-COL, ETC.
  21. NEW CHAPTER - OBJECT FIT/OBJECT POSITION
  22. NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)

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

Proposed topics, there is still much that can be added here. Wanted to get the initial posted and will continue to add/update.

  1. A Short History of JavaScript
  2. Variables
    1. Defining variables
    2. Variable scope
    3. Don’t pollute the global object
    4. The single var ‘pattern’
  3. Basic operations
    1. JavaScript data types
      1. Floats and Integers
      2. Booleans
      3. Strings
      4. Arrays
      5. Objects
    2. Operators
    3. Conditions
    4. Loops
  4. Functions
    1. Declaring functions
    2. Functions as Objects
    3. Anonymous functions
    4. Recursion
    5. Context
    6. The callback pattern
  5. Animation
    1. Animation loops with setInterval
    2. Other...
    3. could use some of JavaScript animation, by Stuart Langridge
  6. Objects in JavaScript, by Mike West
  7. Traversing the DOM, by Mike West
  8. Creating and modifying HTML, by Stuart Langridge
  9. Dynamic style - manipulating CSS with JavaScript, by Greg Schechter
  10. Handling events with JavaScript, by Robert Nyman
    1. Probably needs expanding
  11. User interaction
    1. Clicking buttons
    2. Interacting with mouse movements
    3. Keyboard controls
    4. touch events/gestures
  12. Tool Chest
    1. Testing and Debugging
      1. Tools for testing and debugging
      2. Unit testing with QUnit
      3. Cross browser JavaScript (Ouch ;))
    2. Code Quality
      1. JSLint and JSHint
    3. Production ready
      1. Google Closure Compiler
  13. Closures
  14. JavaScript Libraries
    1. jQuery
    2. jQuery UI
    3. Modernizr
    4. Yepnope
  15. JavaScript Polyfils
    1. When to use and when not to
  16. JavaScript on the Server
    1. Nodejs - There is a lot to discuss here, we can break this down as we progress
  17. JavaScript for Mobile
    1. The frameworks
    2. Considerations for mobile JavaScript (This can have many ‘subdivisions’)
    3. Best practices when writing for mobile
  18. JavaScript Gotcha’s
    1. Why eval() is evil
    2. Use === not ==
    3. Don’t forget the ;
    4. The problem with using typeof for testing for null
    5. Avoid built in Object wrappers for primitives (This of course is for the most part)
  19. APIs
    1. The basics of using an API
    2. HTML5 APIs
      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
    3. Popular 3rd party APIs
      1. Google Maps
      2. Twitter
      3. Flickr
  20. ECMAScript 5
    1. Browser support
    2. Cover additions...

What we have so far:

  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
  14. NEW CHAPTER - OPTIMIZING JAVASCRIPT (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)
  15. NEW CHAPTER - TOUCH EVENTS. THESE DEFINITELY NEED COVERAGE, AS THEY ARE GETTING VERY BIG THESE DAYS. TOUCH DEVICES ARE IMPORTANT.

OTHER THINGS TO COVER

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

SVG

Source of inspiration :

SVG BASICS

  1. 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?
  2. 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)
  3. Basic shapes : This part will be dedicated to the basic shapes available in SVG
  4. Position and transformation : To go deeper inside the viewport thing and to explain the role of the transformations.
  5. Using text in SVG
  6. Styling SVG : This is where we would detailed how to use presentation attributes and their CSS counterpart.
  7. Scripting SVG : Where we could introduce the SVG DOM API.

Part 2 : SVG ADVANCED

  1. How to build Pathes : To dig into the syntax of the d attribute on path elements
  2. Animating the web with SVG Animations : How to use SVG Animations
  3. SVG Filters : This would be an introduction to filters but each filters could have it's own article (Filters a really hard things)
  4. Clipping and Masking
  5. Patterns
  6. Gradients
  7. 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

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

Adaptive design and development for Mobile and other alternative browsing devices

PROPOSED STRUCTURE

  1. 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)
  2. 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.)
  3. 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?)
  4. 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.
  5. 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.
  6. MOBILE/DEVICE TESTING

OTHER THINGS TO ADD ELSEWHERE IN THE MATERIAL

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

Deprecated articles: removed from original WSC