/ edxhtml5Learn HTML5 from W3Cmooc

Learning about HTML5 from the W3C (on edX)

I just finished up the first week of the new Learn HTML5 course, designed by the W3C for the edX platform (under the name W3Cx). It’s a collaborative effort between Michel Buffa (professor at the University of Nice, France) and Marie-Claire Forgue (head of training at the W3C), as well as quite a few others in the W3C. There are over 60000 enrollees, so there’s obviously a lot of interest in HTML5, which at its release last year was the first major update to the spec in well over a decade.

The W3C and Certification

I’ve gone through a few MOOCs, but none from such an authoritative source. If you don’t know, the W3C is the governing body that oversees the development of the HTML spec, so who better to teach the material?

Under the name of W3Cx, the W3C will develop a number of MOOCs (Massive Open Online Courses), showcasing its authority and expertise across a range of courses on core Web technologies.

“W3C’s partnership with edX expands opportunities for Web developers to take courses specifically created for them by W3C,” said Dr. Jeff Jaffe, W3C CEO. “These W3Cx courses will help them increase their skills and empower them to become the next leaders and innovators on the Web.”

They’re offering a “verified certificate”, as do most courses on edX. For a fee (price varies by course), edX will verify your identity and in general hold you to a higher level of accountability. When you pass the course, others can have a greater level of confidence that you learned the material (or so the theory goes). It brings more value to the process (in more ways than one), but it’s only worth the investment when everyone agrees that verified certificates mean something, and has confidence in the edX model.

So, what if someone saw you had a verified certificate from the W3C, indicating you’d passed their HTML5 course? Then it’s not just the reputation of edX lending credence to the certificate, but the reputation of the W3C itself. Would that mean something more? Clearly that’s what they’re hoping (they already offer badges through their W3DevCampus site), as they stated in the intro to the course, and it’ll be interesting to see how it develops.

W3C is working on plans that will make your obtainment of these (Verified) Certificates more visible to the industry. We will keep you informed as this is put in place in the coming weeks and months.

Replacing <DIV>

In the past week, we’ve learned about some new tags that replace the abused and overused <div> tag. There’s a clear pattern of people using the div tags for everything – headers and footers, navigations and side-bars, pictures with captions, etc. Tables were not meant to be used as extensively as they were, but replacing them all with div’s isn’t exactly ideal because it’s a generic container. You can easily attach CSS styles to div’s to make them look like headers, menus, whatever, but it’s nearly impossible for machines to consume them in a meaningful way (think search engines). Which div is a menu, and which is a header or footer?

A whole bunch of new tags were created to address the ambiguity (which the major browsers have already implemented), replacing the above examples with <header> and <footer><nav> and <aside><figure> and <figcaption>, and so on. Now it’s much clearer to see what a section is supposed to represent. Something in a <nav> is a navigational section, like a menu, whereas something in a <div class="menu"> is harder to interpret. So HTML5 brings clarity where it was lacking.

Microdata

The most interesting concept so far (to me) is that of microdata. I don’t why it interests me, exactly, but it seems like a neat concept. Along with the new markup tags that help machines make heads and tails of what each part of your website is doing, there’s also three new attributes called itemscope, itemtype and itemprop. You can apply these elements to a block of markup so that a machine can parse it out later and interpret it. You can pretty much add anything you want, making microdata up on the spot:

<div itemscope itemtype="Animal">
Your mother was a <span itemprop="name">hamster</span>.
</div>

Of course, that doesn’t mean anything to anything. For a system to be able to understand your microdata, it needs to have been predefined somewhere.

Google, Bing and Yahoo, for example, jointly produced schema.org. They agreed to define and recognize a set of microdata, such as a person, which you can use and set attributes for in your own markup:

<div itemscope itemtype="http://schema.org/Person">
Your <span itemprop="givenName">father</span> was an <span itemprop="jobTitle">elderberry farmer</span>.
</div>

There are tools to help you generate microdata, and, if your blog is hosted on WordPress like mine, WordPress plugins that generate microdata for you.

I settled on a highly-upvoted one named “Add Meta Tags“, which is capable of adding all kinds of meta tags to your WordPress posts (you choose which ones to include). Here’s what it added to one of my posts when I chose to include schema.org:

<!-- BEGIN Metadata added by Add-Meta-Tags WordPress plugin -->
<meta name="description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta name="keywords" content="programming, collectionviewsource, listview, textbox, wpf" />
<link rel="publisher" type="text/html" title="" href="https://plus.google.com/117394062575708039380" />
<link rel="author" type="text/html" title="Grant" href="https://plus.google.com/117394062575708039380" />
<!-- END Metadata added by Add-Meta-Tags WordPress plugin -->
 
<!-- BEGIN Schema.org microdata added by Add-Meta-Tags WordPress plugin -->
<!-- Scope BEGIN: Article -->
<div itemscope itemtype="http://schema.org/Article">
<!-- Scope BEGIN: Organization -->
<span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="" />
<meta itemprop="description" content="Learning should be fun! If it&#039;s not... what are you going to do about it?" />
<meta itemprop="url" content="http://grantwinney.com/" />
</span>
<!-- Scope END: Organization -->
 
<!-- Scope BEGIN: Person -->
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Grant" />
<meta itemprop="image" content="http://0.gravatar.com/avatar/919003b5767665e865f7b9cb63fbbfd9?s=128&#038;d=identicon&#038;r=g" />
<meta itemprop="url" content="http://grantwinney.com/author/grant/" />
<meta itemprop="sameAs" content="https://plus.google.com/117394062575708039380" />
<meta itemprop="sameAs" content="https://twitter.com/GrantWinney" />
<meta itemprop="sameAs" content="http://grantwinney.com" />
</span>
<!-- Scope END: Person -->
 
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/" />
<meta itemprop="datePublished" content="2014-12-07T09:13:17+00:00" />
<meta itemprop="dateModified" content="2015-06-02T16:44:02+00:00" />
<meta itemprop="copyrightYear" content="2014" />
<meta itemprop="inLanguage" content="en_US" />
<meta itemprop="name" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta itemprop="headline" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta itemprop="description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta itemprop="articleSection" content="Programming" />
<meta itemprop="keywords" content="programming, collectionviewsource, listview, textbox, wpf" />
<meta itemprop="thumbnailUrl" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=150%2C150" />
 
<!-- Scope BEGIN: ImageObject -->
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="name" content="arrmatey" />
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/arrmatey-2/#main" />
<meta itemprop="thumbnailUrl" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=150%2C150" />
<meta itemprop="contentUrl" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=287%2C337" />
<meta itemprop="width" content="" />
<meta itemprop="height" content="" />
<meta itemprop="encodingFormat" content="image/gif" />
</span>
<!-- Scope END: ImageObject -->
 
<!-- Scope BEGIN: ImageObject -->
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="name" content="winforms combobox filter" />
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/winforms-combobox-filter/#main" />
<meta itemprop="thumbnailUrl" content="http://i1.wp.com/grantwinney.com/wp-content/uploads/2014/12/winforms-combobox-filter.png?resize=150%2C82" />
<meta itemprop="contentUrl" content="http://i1.wp.com/grantwinney.com/wp-content/uploads/2014/12/winforms-combobox-filter.png?resize=275%2C82" />
<meta itemprop="width" content="" />
<meta itemprop="height" content="" />
<meta itemprop="encodingFormat" content="image/png" />
</span>
<!-- Scope END: ImageObject -->
 
<!-- Scope BEGIN: ImageObject -->
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="name" content="arrmatey" />
<meta itemprop="url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/arrmatey/#main" />
<meta itemprop="thumbnailUrl" content="http://i2.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey.gif?resize=150%2C150" />
<meta itemprop="contentUrl" content="http://i2.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey.gif?resize=343%2C340" />
<meta itemprop="width" content="" />
<meta itemprop="height" content="" />
<meta itemprop="encodingFormat" content="image/gif" />
</span>
<!-- Scope END: ImageObject -->

data-rel="lightbox-0" title="">Here’s the data it added to support Twitter:

<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@GrantWinney" />
<meta name="twitter:site" content="@GrantWinney" />
<meta name="twitter:title" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta name="twitter:description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta name="twitter:image:src" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=287%2C337" />
<meta name="twitter:image:width" content="" />
<meta name="twitter:image:height" content="" />

And the Open Graph Protocol, which was designed by Facebook:

<meta property="og:site_name" content="" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Using a TextBox and CollectionViewSource to Filter a ListView in WPF" />
<meta property="og:url" content="http://grantwinney.com/using-a-textbox-and-collectionviewsource-to-filter-a-listview-in-wpf/" />
<meta property="og:description" content="The code in this post is also available on Github. I had a requirement recently, to provide users with a field they could type in, in order to filter a ListView that could potentially hold a couple hundred names. Now, on the old WinForms platform, filtering used to be easier." />
<meta property="og:locale" content="en_US" />
<meta property="og:updated_time" content="2015-06-02T16:44:02+00:00" />
<meta property="og:image" content="http://i0.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey1.gif?resize=287%2C337" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:image:type" content="image/gif" />
<meta property="og:image" content="http://i1.wp.com/grantwinney.com/wp-content/uploads/2014/12/winforms-combobox-filter.png?resize=275%2C82" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image" content="http://i2.wp.com/grantwinney.com/wp-content/uploads/2014/12/arrmatey.gif?resize=343%2C340" />
<meta property="og:image:width" content="" />
<meta property="og:image:height" content="" />
<meta property="og:image:type" content="image/gif" />
<meta property="article:published_time" content="2014-12-07T09:13:17+00:00" />
<meta property="article:modified_time" content="2015-06-02T16:44:02+00:00" />
<meta property="article:author" content="http://grantwinney.com/author/grant/" />
<meta property="article:publisher" content="http://grantwinney.com/" />
<meta property="article:section" content="Programming" />
<meta property="article:tag" content="collectionviewsource" />
<meta property="article:tag" content="listview" />
<meta property="article:tag" content="textbox" />
<meta property="article:tag" content="wpf" />

The benefit here is that major sites around the web can now interpret your content and display more meaningful information about it.

The caveat is extra bloat, in the form of extra markup that may affect mobile devices with limited/restricted bandwidth. At least one person already raised the issue in the course forums.

I’m excited to see what we learn next. You can still enroll in the course and catch up fairly easily. They just posted material for weeks 2 and 3. Depending on your personal experience, I’d say you could run through a “week” of material in an evening… two at the most. Previous HTML experience recommended (it’s not a beginner course).


Grant Winney

Grant Winney

I write when I've got something to share - a personal project, a solution to a difficult problem, or just an idea. We learn by doing and sharing. We've all got something to contribute.

Read More