Drumbeat/p2pu/courses/html5

DRAFT Proposed by Dennis Riedel

HTML5*

A course is build around a theme/story to create a website for a specific purpose. Participants will learn the application of HTML5, CSS3 (and JavaScript) to present different forms of content (theme/story related) on a website.

The creation of the website should be the result a collaborative effort through research on the theme/story, decision and compromise on form of structure and visualization of the content.

Technical aspects:

• HTML elements (what do we have, with what do we work)
• Accessibility
• Document/content structuring
• Openness (Cross-Browser compatibility vs. Browser specific features)

Other:

• Today´s state of HTML5, CSS3
• HTML or XHTML

The course targets experienced Web and Online Content Developers (Writers) 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.

A first assignment will be given to anybody who wants to participate in the course.

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.

• 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

• 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 to 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?**