Drumbeat/p2pu/courses/html5

DRAFT Proposed by Dennis Riedel

HTML5*

• A course about HTML5 and related specifications.

The course targets experienced Web and Online Content Developers who are experienced using HTML and its elements to give plain text documents a structure and context in form of hypertext. The candidates should also know CSS and be able to layout and beautify their HTML documents. A general knowledge of XML and its derivates as practical experience in DOM Scripting (JavaScript) is of advantage when working with SVG and animations

Storyline

As reporters, analysts and programmers the participants will take part in the ongoing "HTML5 Browser Tournament" and create a report (website) on the state of HTML5 implementation at the time of Fall 2010.

During the week they will work on research and implementation of HTML5 features in different browsers. At the end of each week the team gathers together for a final review of results and achievements and a kick-off for the next assignement.

While working on their assignments they use agreed upon communication tools to exchange status, to help each other on problems and share experiences.

A central and open repository will contain the code that will be developed.

Entry assignment

Each interested individual is asked to provide a small HTML5 page with his avatar. This includes a picture (real, comic, abstract, ...), a name and a short bio about your web development experience. Tell us about the scars you obtained when writing HTML and CSS for different browsers and what you expect from HTML5 in the future.

What you should know

• (X)HTML Web Development
  • Why: We do not cover the basic structure of HTML documents, existing HTML 4 (XHTML 1.1) elements and attributes and how to use them to organize content.
  • How: You have created websites as part of your job or private hobby, are used to write your code in a code editor together with a version control system like Git or Subversion.

• Scripting
  • Why: Different aspects of HTML5 we want to cover will require JavaScript
  • How: You have experience in DOM Scripting using JavaScript (jQuery, Prototype, ...)
  • Note: Client-side oder server-side scripst can be provided by the course organizer.

• Browsers
  • Why: We will have a look into the different browsers on the market, especially Mozilla Firefox, Google Chrome, Opera and Safari. We want to see what they can do and what not.
  • How: You have worked on browser optimization for your websites regarding HTML and CSS interpretation. Therefore you are not surprised anymore when your page looks and behaves different in another browser or version of the same brand.

• Research
  • Why: The concept of informal peer-to-peer learning asks every participant to learn from and to teach each other. The course organizer is not an expert on the subject, he wants to learn through out the course, too, but provides initial materials and guidance for each week. Provided resources give you an idea on the week´s subject and the next steps to take. From there on you search, write and code your own contributions and share them with the other participants.
  • How: You are used to search for information through search engines, mailing lists, blogs and other social media. You have books from subject matter experts which you consult regularly. You join IRC channels and use Twitter lists to find and consult with people in your area of interest.

• Writing
  • Why: You will be asked to give your own opinion, research a subject and report on it or comment and discuss other participant´s contributions.
  • How: You already write your own blog, share links and experiences on Twitter or your job activity includes documenting code and project Wikis.

What you can expect to learn

In general we will try and experiment with every week´s assignment in the major browsers. It therefore is also necessary to install beta versions and nightly builds.

• HTML5
  • Some history, facts and introduction to HTML(5)
    • Why: To get some background information on the history of HTML and the organizations, groups and individuals behind the scences.
    • How: Reading assignment, Discussion.
  • New elements and attributes
    • Why: We will create a website using HTML5.
    • How: Together we code a HTML5 page using elements to structure and organize text and images.
  • Forms
    • Why: We need to gather information for later use in our website.
    • How: Design and implement forms using HTML5 form elements.
  • User Interaction and Web Applications
    • Why: We want to try the cool stuff.
    • How: We will build on top of the previous week and amplify the survey forms with interactive elements and make states persistent throughout pages and sessions.
  • Audio and Video
  • Related specifications
    • Geolocation
    • Communication: WebSocket, Messaging
    • Storage

What you might learn if you work hard

• CSS3
  • Why: The pages we code should look nice.
  • How: You will want to look up some new features to make your pages look better.
• SVG
  • Why: We will be working with forms and need to present the collected data in an engaging and interesting way.
  • How: You already know JavaScript and code some nice graphs or animations. And/Or you are a fast and have more time to learn more stuff.
• JavaScript
  • Why: We may need to code something for our project till the end of the course.
  • How: Depending on how we will come through the first weeks and the knowledge level of the participants we will have time and skill to do more.

Things we won't cover

• WebGL
  • Why: This should be a course of its own.
• Microdata
  • Why: No independent implementations in browsers so far. **Chrome?**
• Local devices
  • Why: No independent implementations in browsers so far. **ANY?**
• Files
  • Why: No independent implementations in browsers so far. **Firefox?**