Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

Content List

This is a list of all the existing content that has been donated to the webplatform.org project. I (CHRIS MILLS) have broken it into batches, of roughly the same size. For each batch, we need someone to take ownership of it, and then:

See https://docs.google.com/a/chromium.org/spreadsheet/ccc?key=0AkRs-89PKiZpdHBqN2poNnJjV1c0N1FCYlN3ZUtpZ3c#gid=0 for our work tracking sheet

  1. As you do these steps, update them to make them more concrete so people who follow in your footsteps won’t have to figure it all out from scratch.
  2. Make sure your pages are covered by the existing page types and doesn’t require new ones. If you find ones you need, e-mail the list and propose it.
  3. Check the content structure for the subject you are currently dealing with. For anything that doesn’t make sense, or needs adding, modifying or deleting, make changes as necessary.
  4. Fit existing articles into the content structure as well as you can and document your work. TODO: where should you do this?
  5. Think through the best migration strategy. Assume that writing each import script will take ~5 hours and need to be tweaked for every small difference it encounters. Is it faster to do your batch by hand or with an import script? That is, how diverse/messy is your content?
  6. Look at the list of page types WPD/New_Page and figure out which page types will be appropriate for each article. Then, for each applicable page type, look at the template. What additional fields should be there? Look at Template:CSS_Property and others for inspiration.

First week: stop here

  1. Check that all the existing articles listed have been imported into the Wiki. Most of these will be done automatically using a batch import, but you may need to import some of them manually.

  2. Create new pages/stubs for articles that are yet to be written.

  3. Make sure all articles have the correct URLs and tags.

  4. Go through the list of items that must be added to each article before publishing (NEEDS FINISHING) and make sure they are added:

    1. browser compatibility
    2. flags
    3. license
    4. ??

  5. also need to proof/edit articles at some point

Tutorials

ARTICLE BATCH 1

OWNER: CHRIS MILLS

Notes: There is some good material in this section, but a lot of it probably needs to be rejigged or trimmed, and a lot needs to be added. I don’t think this section is as high a priority as the raw technology stuff, but we should still add stubs and leave it for the community to pick up, in the immediacy?

Introduction to the world of web standards

Web Design Concepts

ARTICLE BATCH 2

OWNER: CHRIS MILLS

HTML beginnings

The HTML body

ARTICLE BATCH 3

OWNER: Eliot

Notes: Someone with a good knowledge of accessibility should handle this section, preferably someone from WAI, like Shawn. The WAI should at least be consulted, as I believe they have done some work on working out a11y content for webplatform.org already.

Accessibility

We’ve already got

  1. Accessibility basics (Opera)
  2. Accessibility testing (Opera)

But 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. }

Accessibility sources

ARTICLE BATCH 4

OWNER: CHRIS MILLS (Lea to help)

CSS

ARTICLE BATCH 5

OWNER: CHRIS MILLS (Lea to help)

Notes: the owner of this batch should checkout the Adobe http://beta.theexpressiveweb.com/ resource, to see what tutorials we can use from there. They are willing to donate those to the project/

CSS

  1. NEW CHAPTER - CSS3 TRANSFORMS
  2. NEW CHAPTER - CSS3 TRANSITIONS
  3. NEW CHAPTER - CSS3 ANIMATIONS
  4. NEW CHAPTER - MEDIA QUERIES
  5. NEW CHAPTER - VIEWPORT
  6. NEW CHAPTER - CREATING AN ADAPTIVE DESIGN, USING MEDIA QUERIES, VIEWPORT, MULTI-COL, ETC.
  7. NEW CHAPTER - OBJECT FIT/OBJECT POSITION
  8. NEW CHAPTER - OPTIMIZING CSS (INCLUDE IDEAS FOR OPTIMIZING FOR MOBILE ETC.)
  9. NEW CHAPTER - State in CSS (Lea)

Sources

Adobe are willing to donate the great tutorials available at http://beta.theexpressiveweb.com/.

ARTICLE BATCH 6

OWNER: PAUL IRISH

Notes: This batch may seem like a lot, but it is in fact not that big - many of these are just stubs.

JavaScript

The following is a list of proposed topics: there is still much that can be added here, but we wanted to get the initial idea posted and will continue to add/update.

  1. Hello world! in JavaScript

  2. Variables (Values, variables, and literals - Mozilla)

    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 (Working with objects - Mozilla; Objects in JavaScript - Opera - duplicate of batch 8)
      6. Predefined core objects - Mozilla

    2. Statements - Mozilla

    3. Operators (Expressions and operators - Mozilla)

    4. Conditions

    5. Loops

  4. Functions (Functions - Mozilla; JavaScript functions - Opera - duplicate of batch 8)

    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 (Opera)

  6. Objects in JavaScript (Opera) - duplicate of batch 8

  7. Details of the JavaScript object model (Mozilla)

  8. Iterators and generators (Mozilla)

  9. Traversing the DOM (Opera) - duplicate of batch 8

  10. Creating and modifying HTML (Opera) - duplicate of batch 8

  11. Dynamic style - manipulating CSS with JavaScript (Opera) - duplicate of batch 8

  12. Handling events with JavaScript (Opera) - duplicate of batch 8

    1. Probably needs expanding

ARTICLE BATCH 7

OWNER: ELIOT GRAFF (maybe break off the Canvas pieces)

Notes: This batch may seem like a lot, but it is in fact not that big - many of these are just stubs.

JavaScript

  1. User interaction

    1. Clicking buttons
    2. Interacting with mouse movements
    3. Keyboard controls
    4. touch events/gestures

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

  3. Closures (Closures - Mozilla)

  4. JavaScript Libraries

    1. jQuery
    2. jQuery UI
    3. Modernizr
    4. Yepnope

  5. JavaScript Polyfils

    1. When to use and when not to

  6. JavaScript on the Server

    1. Nodejs - There is a lot to discuss here, we can break this down as we progress

  7. JavaScript for Mobile

    1. The frameworks
    2. Considerations for mobile JavaScript (This can have many ‘subdivisions’)
    3. Best practices when writing for mobile

  8. 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)

  9. 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)

Canvas tutorial (Mozilla)

  1. Basic usage

  2. Drawing shapes

  3. Using images

  4. Applying styles and colors

  5. Transformations

  6. Compositing

  7. Basic animations

  8. Optimizing canvas (incomplete)

      1. HTML5 HISTORY API
      2. DATASETS

  10. Sidebar: A Short History of JavaScript

    1. Popular 3rd party APIs
      1. Google Maps
      2. Twitter
      3. Flickr

  12. ECMAScript 5

    1. Browser support
    2. Cover additions…

ARTICLE BATCH 8

OWNER: CHRIS MILLS (to likely find someone from Opera)

Notes: Most of these will have been added in as part of one of the previous JS batches, but just give this a quick check to see if anything has been missed.

JavaScript

Opera has the following available:

  1. Programming - the real basics! (Opera)
  2. What can you do with JavaScript? (Opera)
  3. Your first look at JavaScript (Opera)
  4. JavaScript best practices (Opera)
  5. The principles of unobtrusive JavaScript (Opera)
  6. JavaScript functions (Opera)
  7. Objects in JavaScript (Opera)
  8. Traversing the DOM (Opera)
  9. Creating and modifying HTML (Opera)
  10. Dynamic style - manipulating CSS with JavaScript (Opera)
  11. Handling events with JavaScript (Opera)
  12. JavaScript animation (Opera)
  13. Graceful degredation versus progressive enhancement (Opera)
  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.

ARTICLE BATCH 9

OWNER: JANET SWISHER

Notes: Some of these will have been added in as part of one of the previous JS batches, but give this a check to see if some of these have been missed, and think about where they might go in the JavaScript article structure.

These are available from Mozilla:

ARTICLE BATCH 10

OWNER: TOBIE LANGEL

Facebook HTML5 API content

ARTICLE BATCH 11

OWNER: SCOTT ROWE

Google HTML5 API content

Donated from http://www.html5rocks.com/en/tutorials/

ARTICLE BATCH 12

OWNER: SCOTT ROWE

Google HTML5 API content (donated from http://www.html5rocks.com/en/tutorials/)

ARTICLE BATCH 13

OWNER: SCOTT ROWE

Google HTML5 API content (donated from http://www.html5rocks.com/en/tutorials/)

ARTICLE BATCH 14

OWNER: WAI SETO

Notes: This section will be mostly stubs, and we really need someone to think carefully about what structure our mobile and device material should have.

Mobile and devices

We already have

And the following available from Nokia:

Reusable mobile templates or components

Mobile web development shortcuts articles

(Some don’t seen to fit WPD anymore after revewing our content style/types)

PROPOSED STRUCTURE

  1. [About the mobile web] 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. [Learning what mobile devices look 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.)
  3. [Learning mobile constraints and advantages] 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. [About mobile friendly web design and development overview] 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. [Implementing mobile browser feature detection] 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. [Testing with mobile browsers] CoreMob specs, Ringmark

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

ARTICLE BATCH 15

OWNER: DOUG SCHEPERS (Doug to communicate with Jeremie, and SVG WG)

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? (Introduction from Mozilla)
  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). (Simple example, basic properties, file types from Mozilla)
  3. Basic shapes : This part will be dedicated to the basic shapes available in SVG (Basic Shapes from Mozilla)
  4. Position and transformation : To go deeper inside the viewport thing and to explain the role of the transformations. (Positions and Basic transformations from Mozilla)
  5. Using text in SVG (Texts from Mozilla)
  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 (Paths from Mozilla)
  2. Fills and strokes (Mozilla)
  3. Animating the web with SVG Animations : How to use SVG Animations
  4. SVG Filters : This would be an introduction to filters but each filters could have it’s own article (Filters a really hard things) (Filter effects – incomplete, from Mozilla)
  5. Clipping and Masking (Mozilla)
  6. Patterns (Mozilla)
  7. Gradients (Mozilla)
  8. Dealing with the external : This part would be dedicated to the foreignObject element but also to links and images elements. (Other content in SVG from Mozilla)
  9. SVG fonts (Mozilla)
  10. SVG image element (Mozilla)

Other content sources

Ex-Opera articles

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

ARTICLE BATCH 16

OWNER: DOUG SCHEPERS (Doug to communicate with Jeremie, and SVG WG)

Notes: This is basically just a list of demos, but we should go through them to see where we can use these.

SVG WOW (http://svg-wow.org/) Demos:

ARTICLE BATCH 17

OWNER: PETER LUBBERS

Supplementary articles

Internet Basics

References

ARTICLE BATCH 18

OWNER: ELIOT GRAFF

HTML

ARTICLE BATCH 19

OWNER: ELIOT GRAFF

CSS

ARTICLE BATCH 20

OWNER: ELIOT GRAFF

CSS

ARTICLE BATCH 21

OWNER: ELIOT GRAFF

Canvas

ARTICLE BATCH 22

OWNER: ELIOT GRAFF

SVG

ARTICLE BATCH 23

OWNER: ELIOT GRAFF

DOM Transversal

ARTICLE BATCH 24

OWNER: ELIOT GRAFF

DOM

ARTICLE BATCH 25

OWNER: ELIOT GRAFF

DOM Events

ARTICLE BATCH 25A

OWNER: ELIOT GRAFF

ARIA

ARTICLE BATCH 25B

OWNER: ELIOT GRAFF

Web Apps

ARTICLE BATCH 25C

OWNER: ELIOT GRAFF

Media (Audio and Video)

Curriculum structures

Seed content taken from WaSP InterACT Curriculum structures. Most recent versions kept at Overview of InterACT curriculum articles

ARTICLE BATCH 26

OWNER: DOUG SCHEPERS

Basics and “soft” skills

ARTICLE BATCH 27

OWNER: DOUG SCHEPERS

Web design

ARTICLE BATCH 28

OWNER: DOUG SCHEPERS

Web development

Miscellaneous - not sure what to do with these yet

ARTICLE BATCH 29

OWNER: DOM (Doug to followup with Dom)

Notes: low priority, but it might be nice to get someone to investigate these and see what we should do with them, where we should put them, etc.