Archive for the ‘Web Standards’ Category

File Under: Browsers, HTML5, Web Standards

Future Firefox to Bring PDF, WebCam Streams to the Browser

W.T. Monkey loves WebRTC. Image: Screenshot

Firefox 18 is out the door, which means Mozilla has bumped up all the pre-release channels, showcasing features coming soon to a final release near you.

If you’d like to try out a pre-release version of Firefox, head on over to Mozilla’s channel download page and grab either the Beta or Aurora releases. (The former is a bit more stable, but both are pre-release software so proceed with caution.)

The Beta channel contains Firefox 19, which is six weeks away from release and features a few modest improvements, including a baked-in PDF viewer based on PDF.js. It may not mean the end of those annoying (and untrue) buttons that say “you need Adobe Acrobat to view this file,” but at least you don’t, well, need Acrobat just to view a PDF.

The Aurora channel has been bumped up to Firefox 20, which contains a far more interesting new feature — support for capturing local camera and microphone streams with the getUserMedia API.

Here’s how Mozilla describes getUserMedia:

[getUserMedia] is a new HTML5 DOM API that allows the browser to capture local camera and/or microphone streams directly, and not through third party plugins. This means JavaScript developers can now quickly and easily write code to access the user’s camera or microphones (with the user’s permission, of course) without having to install anything because the support is already inside the browser.

There’s a demo page you can try out over on Mozilla’s GitHub page.

The getUserMedia API is just the first of several components that make up WebRTC, a set of APIs which enable real-time, interactive, peer-to-peer audio/video calls and data sharing. Two other pieces of the WebRTC puzzle — PeerConnection and DataChannels — can be found in the Firefox Nightly channel, for those who really enjoy living on the edge (you’ll still need to enable them in about:config, set the media.peerconnection.enabled option to true).

Firefox’s six week release cycle means that — barring unforeseen problems — the PDF viewer will arrive in final form sometime in early March, with the getUserMedia tools coming in mid April.

Simplify Responsive Design by Embracing the Flexible Nature of the Web

Some flexible foundations are better than others. Image: McPig/Flickr

If you’re using pixels as part of your responsive designs you’re probably making your life harder than it needs to be.

There’s nothing “wrong” with using pixels in an otherwise responsive layout, but if you do you’ll likely end up writing more code than you would using flexible units.

Jon Allsopp’s A Dao of Web Design predates responsive design by a decade, but its prescient advice remains perhaps the best way to approach any design, responsive or otherwise: “It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

More than just embracing the nature of the medium, building your sites atop what developer Trent Walton calls “Flexible Foundations” can go a long way to making development easier. As Walton points out in his post, using pixels often means more code since pixel-based type, margins and padding mean you need to add new values at every responsive breakpoint.

“In many ways,” writes Walton, “every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

Stick with percentages, ems or the newer rem units and your designs can scale simply by changing the body font size. Embracing the flexibility of the medium means you can adapt as well — no need to panic when a client wants to make the logo bigger at the last minute, you can scale the whole layout up (or down) with a few lines of code. For Walton’s design firm, Paravel, the flexible approach has already proved its worth in just this way:

This paid off a few weeks ago, when a client wanted to make significant changes to the layout for his site. Type, imagery, buttons, etc. needed to be smaller and overall width & spacing (margins / padding) needed to be reduced. Thankfully, this was as simple as adjusting the body font-size at wide views. Years ago, however, this could have set the project weeks beyond scoped timeline and budget.

As developer Brad Frost has said, “Get your content ready to go anywhere because it’s going to go everywhere.” Pixels may work today, but they make for a rigid site that might well break on new devices. As Walton concludes “the sites we’ve built to display on a desktop, smartphone, or a tablet today could be on a TV screen, coffee table display, or mega space yacht projection system tomorrow.” Start with a flexible foundation and your site should handle just about any hardware that tries to load it.

File Under: HTML5, Web Standards

HTML5 Inches Closer to the Finish Line

Image: Screenshot/Webmonkey.

The W3C has an early Christmas present for web developers: The standards body that oversees the lingua franca of the web has published the complete definition of the HTML5 specification.

HTML5 isn’t an official standard yet, but the move to what the W3C calls “Candidate Recommendation” (CR) status means that the spec is largely stable, features are frozen, and testing can begin. In other words, the W3C is on track to publish the final version of HTML5 by 2014.

While developers targeting modern web browsers are already using HTML5 and many of its accompanying APIs, the move to CR status is nevertheless important because it marks the beginning of the interoperability and testing phase. Testing helps ensure that HTML5 can be implemented compatibly across browsers, servers, authoring tools and the dozens, if not hundreds, of other potential HTML5 clients — think your television, your car, your refrigerator and beyond.

HTML5 will likely be the language of the fabled Internet of Things and the lengthy testing period — the W3C plans for testing to last through 2014 — is designed to make sure that everything in the web of the future plays nicely together.

To go along with HTML5′s progress, the W3C has also published the First Public Working Draft of HTML5′s successor — HTML5.1. Although the W3C has “modularized” much of HTML5 over the years, spinning off sections like Web Workers, WebSockets, Microdata and half a dozen others, which are all now separate specifications at the W3C, the group plans to continue with versioned releases as well.

At the moment there isn’t much to see in the HTML5.1 spec, but look for the HTML5.1 draft to grow as new ideas are proposed.

It’s worth noting that, while the CR publication is generally a good thing, there are still over 100 known bugs and not everyone is happy with the decision to move HTML5 forward. But moving forward it is. After the CR stage is finished, the next step for HTML5 will be “proposed recommendation” status. From there HTML5 will become a final standard — if all goes according to plan — in 2014.

Forget ‘Do Not Track’ — Protect Your Privacy Today With ‘DoNotTrackMe’ Add-On

The World Wide Web Consortium is currently working to standardize a “Do Not Track” mechanism to stop advertisers from following your every move around the web. Unfortunately, while the DNT tools are already supported in most web browsers, hardly any advertisers actually honor it. In fact, some advertisers seriously proposed an exception be made to DNT to allow web tracking.

If you’re serious about online privacy you’re going to have to do more than hope that advertisers voluntarily stop tracking you, you’re going to have to actively block them.

There are several tools that make it easy to stop the tracking. One of the best, DoNotTrackPlus, was recently renamed DoNotTrackMe (DNTMe). The new name arrives alongside a major upgrade that blocks more trackers, adds some nice analytics and offers per-site tracking reports.

The DNTMe add-on is available for Chrome, IE, Firefox and Safari. You can grab a copy for your browser from Abine’s download page. Once installed you’ll see a new “cross hairs” icon in your browser’s menu bar, which you can use to access DNTMe’s settings and any blocking info about the current page.

The DoNotTrackMe add-on for Chrome. Image: Screenshot/Webmonkey

DNTMe is easy to set up and defaults to blocking nearly everything. You can customize that by going through and allowing sites you don’t mind setting cookies. For example, I generally allow analytics packages like Mint or Piwik. You can also customize tracking on a per-site basis, allowing, for example, a site you trust to run analytics packages, but not every site you visit.

I currently use Ghostery to block online tracking, and it stacks up well next to DNTMe, though DNTMe does have one feature that might be an advantage for some users — blocking suggestions. That is, DNTMe suggests not blocking certain sites if blocking them has a high probability of breaking something on the page — say, Brightcove for example, which sets tracking cookies, but without which the site’s videos won’t work.

If you don’t mind enabling sites by hand and troubleshooting any potential problems yourself then either add-on will work. But if you’re installing a tracking blocker in someone else’s browser (who may not realize why a video suddenly doesn’t work) then DNTMe might be the better choice.

File Under: HTML, Web Standards

Proposed ‘Main’ Element Would Help Your HTML Get to the Point

Photo: Horia Varlan/Flickr

HTML5 has several new tags designed to make HTML more semantic — there’s <nav> for navigation elements, <header> for headers, <footer> for footers and now there just might be <main> to wrap around, well, the main content on a page.

The W3C’s HTML Working Group, which is charged with creating HTML, has accepted a proposal to add a draft specification for the <main> tag to HTML. The actual HTML spec hasn’t been updated yet, but you can read through the earlier, unofficial <main> docs.

The proposal has been around for some time, but former W3C HTML editor Ian Hickson opposed it on the grounds that its use case was too close to <article>. Since then the mailing list discussion has turned up enough supporters and use cases for a <main> element — including for a “reader” mode like that offered by Apple’s Safari, or to exclude non-main content from a search — that it looks like it will make the cut (Update: check out this W3C wiki page for more use cases).

It’s unlikely that <main> will make it into HTML5, which is about to reach the stable stage after which no new elements can be added, but it could make it to HTML 5.1, due to be finalized by 2016.

As Mozilla WHAT WG member Henri Sivonen writes on that group’s mailing list, “I think it was unfortunate that didn’t make it to the same round of added elements as <header>, <footer>, <nav> and <aside>… but it’s not too late to add it — browsers update faster than they used to.”

The purpose behind <main> is to give web authors a more semantic way to indicate a page’s main content. In many ways it mirrors what WAI-ARIA does with the “main” role.

In fact, because a <main> element would more or less bring the semantic power of ARIA’s role=main to HTML proper, you can get most of the benefits of the proposed <main> tag today, by just adding the “main” role to your primary content wrapper, something like:

<div role="main">
    <article>
        <h1>Top 10 Linkbait Headlines for Hacker News</h1>
        <time datetime="2012-12-11T03:21:22">December 11th, 2012</time>
        <p>... etc </p>
    </article>
    <div id="comments">
        <article>
            <h5>Comment Title</h5>
            <p>Comment body</p>
        </article>
    </div>
</div>

In this bit of pseudocode the main role tells the user agent — a web browser, search engine spider, etc. — that the primary content of the page is the article and the ensuing discussion in the comments.

So if you can do it already with ARIA why add <main>? The simple truth is that hardly any sites use ARIA roles. Because <main> is simple to use, web developers are more likely to use it and use it correctly (try searching for tutorials on how and when to use <article> and <section> to see the opposite effect), which in turn makes it a more reliable indicator for search engine spiders.