You searched for: 'html5'

Thursday, August 23rd, 2012

Windows 8 HTML5 WinRT RSS reader app

Category: HTML, Microsoft

WinJS is a JavaScript framework for Windows 8, and David Rousset uses it here to create a quick RSS reader. He shows how in a tutorial series. This first article shows the way to build a welcome screen that employs WinJS ListView control. Blend and CSS3 are employed. The second tutorial shows work on the detail view displayed after a click-on-item. This uses a transition animation. Time to go through the two tutorials is estimated at 30 minutes. Check out the Windows 8 HTML5 WinRT RSS reader app.

Posted by jvaughan at 9:33 pm
Comment here

+++--
3 rating from 273 votes

Thursday, June 9th, 2011

The State – Sort of – of HTML5 Audio

The State – Sort of – of HTML5 Audio

Scott Schiller discusses the high level of hype around HTML5 and CSS3. The two specs render ”many years of feature hacks redundant by replacing them with native features,” he writes in an insightful blog.

Blogging, he says:

CSS3’s border-radius, box-shadow, text-shadow and gradients, and HTML5’s <canvas>, <audio> and <video> are some of the most anticipated features we’ll see put to creative (ab)use as adoption of the ‘new shiny’ grows. Developers jumping on the cutting edge are using subsets of these features to little detriment, in most cases. The more popular CSS features are design flourishes that can degrade nicely, but the current audio and video implementations in particular suffer from a number of annoyances.

He begs the question: Are we going to see a common format across the major browsers for both audio and video?

Check it out!

Posted by jvaughan at 9:17 pm
7 Comments

+++++
5 rating from 119 votes

Friday, February 11th, 2011

Using HTML5 sensibly and multimedia on the web

It is high time developers take back HTML5 from the marketing people, says Chrisian Heilmann. “HTML5 is the evolution of our web technologies, not another flashy add-on to already badly used outdated practices,” he writes in a blog posting that includes illuminating slides.

http://www.wait-till-i.com/2011/02/09/using-html5-sensibly-and-multimedia-on-the-web-speaking-at-the-london-ajax-meetup/

Posted by jvaughan at 10:29 pm
1 Comment

++++-
4.4 rating from 45 votes

Tuesday, January 18th, 2011

HTML5 Gets a New Logo

Category: Announcements

HTML5 Logo

That’s all we needed, really, a new logo. Does anyone else feel the need to have this stitched onto a leotard with a cape? ;-)

Posted by Dietrich Kappe at 10:07 am
23 Comments

+++++
5 rating from 52 votes

Friday, January 7th, 2011

People of HTML5 – Bruce Lawson

Category: Mozilla

The Mozilla folks including Mozilla Evangelist Chris Heilmann thought it a good idea to introduce some “People of HTML5,” starting with Bruce Lawson of Opera, co-author of “Introducing HTML5” and one of the curators of HTML5 Doctor.  Among the most vivid new technologies of the moment Lawson cites:

…DAP (“Device APIs and Policy Working Group”). This thrillingly-named set of specifications is further extending the capabilities of the Web by specifying APIs that allow access to device features like camera, contact books and calendar — much like Geolocation gives browsers access to the device’s GPS capabilities.

http://hacks.mozilla.org/2011/01/people-of-html5-bruce-lawson/

Posted by jvaughan at 4:44 pm
2 Comments

+++--
3.7 rating from 10 votes

Sunday, November 28th, 2010

HTML5 Web Messaging

Cross document messaging is addressed in a recent HTML5 Web Messaging Working draft from the redoubtable W3C. The proposed messaging system is said to “allow documents to communicate with each other regardless of their source domain, in a way designed to not enable cross-site scripting attacks.” For more on the w3C draft, go to its HTML5 Web Messaging page.

Posted by jvaughan at 3:16 pm
1 Comment

++---
2.5 rating from 4 votes

Friday, November 12th, 2010

HTML5 forms validation in Firefox 4

Category: Firefox, JavaScript

Mounir Lamouri looks at native browser-side form validation in Firefox4  – while re-iterating the need for re-validating on the server-side too. The objective of the browser-side form validation is to relieve JavaScript of the need to do a lot of basic form checking. Lanouri writes:

”All new input types introduced with HTML5 forms except search and tel benefit from internal validation.
Firefox 4 is going to support email and url and the validation will check if the value is a valid email or url respectively.”

Also discussed is added pattern matching support and a new pseudo-class that applies on submit controls when a form has an invalid element.

Posted by jvaughan at 3:20 pm
5 Comments

+++--
3.6 rating from 11 votes

Wednesday, October 6th, 2010

3D Slides Built with HTML5, CSS3, and SVG

Category: 3D, CSS, HTML, Presentation

Over on my personal blog I talk about a 3D slide deck I’ve created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to ‘zoom’ into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I’ll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can ‘accordian’ open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

Read more to learn about the 3D slide deck and how I built it.

Posted by Brad Neuberg at 1:00 am
3 Comments

+++--
3.4 rating from 25 votes

Friday, September 24th, 2010

Web Ninja Interview: Marcin Wichary — Creator of Google Pacman Logo, HTML5 Slide Deck, and More

Category: Web Ninja Interview

You know what time it is…. it’s time for another Web Ninja Interview! Huzzah! The Web Ninja Interview series focuses on people doing amazing and interesting work using JavaScript, CSS, HTML, SVG, WebGL, and more.

One of the goals behind the Web Ninja Interview series is to talk with the web gurus behind many amazing web sites and products that don’t directly blog or speak at conferences as much.

Today we talk with Marcin Wichary. I’m a huge fan of Marcin’s work. He was behind the animated and playable Google Pac-Man logo; created the initial HTML5 fancy (shmancy) slide deck that is now an open source project; and helped with Google Instant. He also has a geek love of computer history; just as artists study the masters who came before them computer scientists should know their history. Let’s begin.

Brad Neuberg: Tell us a bit about yourself, where you’re from, your background, interests, and some projects you have worked on (don’t be humble!)

Marcin Wichary: I grew up in Poland. I have a master’s in computer science, and a doctorate in human-computer interaction. I created my first HTML tag in… 1995? It was probably a <P>, but that’s just a guess.

I am proud of GUIdebook, which is (was) an online gallery of graphical user interfaces. Alas, I have not had time to update it since 2006.

At Google, which I joined in 2005 as a user experience designer, I helped with various internal tools and a number of search-related initiatives, including search options, real-time search, and most recently Google Instant.

Brad Neuberg: You built the HTML5 Pac-Man Google Doodle. What’s the story behind that? Any technical things you ran into that surprised you?

Marcin Wichary: One of the Google illustrators and a good friend of mine Ryan Germick had an idea to create a first playable doodle for Pac-Man’s birthday. Since I’ve been exposed to arcade games a lot in my childhood, he reached out to me; I built a very early prototype the same night.

The biggest surprise was how much thought went into Pac-Man’s details. You’d think it’s a very simple game, but there’s so much nuance and polish in every aspect. I had to recreate all of it from scratch, and since I personally believe that it’s the details that make or break the experience, it was inspiring to see someone thinking about all that already 30 years ago.

Technically, I was sad to witness HTML5 audio not being quite ready to be used in games. (There’s actually very little HTML5 in the Pac-Man doodle.) And the infamous background caching bug in IE6 bit me so bad that no known solutions worked; I had to introduce a separate code path that didn’t use CSS backgrounds, just regular images cropped by parent divs.

Brad Neuberg: You created the amazing HTML5/CSS3 Slide Deck over on API Rocks. What prompted you to create this initially? What are some of the technical things you used to create this?

Marcin Wichary: A colleague suggested I give a talk to my team about HTML5. I agreed, thinking “I’ll just find a nice list of what’s there in HTML5 and make a presentation out of it.” Turned out, there was no such list, so I had to poke around and construct one myself. It was actually an interesting process. I called it “archeology of the future” – I was looking at Web technologies that’ll ultimately span years 2000 to 2020, trying to figure out how they all fit together right now, in 2010.

In terms of choosing a medium, I’ve been making my slide decks in HTML for about a decade now. Before Keynote, it was the only way for presentations to look exactly the way I wanted (have to give credit to IE6 here for its gorgeous full-screen mode), so I felt fairly comfortable following that – but utilizing newer technologies this time around. I’ve also always enjoyed teaching by example, hence the addition of sliders that allowed direct manipulation of CSS.

I am a very hands-on, low-level kind of guy. I created my first website in FrontPage, but since then I’ve been coding everything by hand. These days it means TextMate and Safari’s excellent Web inspector. I also make a point not to reuse much of what I do, but write the same things over and over again. This allows me to learn and adapt to changing technologies. (For example, I wrote two new presentation engines since the said HTML5 presentation.)

Brad Neuberg: What is a clever hack, trick, or elegant turn of code you’ve discovered or created while working with JavaScript, HTML, CSS, etc. that you are particularly proud of? Give good details, and don’t be afraid to be technical :)

Marcin Wichary: Get an iframe, make it tiny using CSS3 translate/scale, cover with a transparent div to intercept events, and voilà – you have a nice site thumbnail without having to create an image, upload it and worry about them getting out of sync. Of course, it also comes with terrible latency, so there you go.

color: transparent and text-shadow with 0px offset means blurry text. How is that not awesome? (Not that I can think of a use for it.)

Not sure if those are particularly clever or useful – I have an attention span of a <marquee> tag and if I do anything innovative I’m usually the first to miss it – but it’s exciting to discover new uses for things that, in and of themselves, are so brand new.

Brad Neuberg: What are some of the things you are hacking on these days (that you can talk about)?

Marcin Wichary: My main project for the past several months was Google Instant, and we just launched it, so right now I’m looking around and learning about projects. I’ll be doing some internal HTML5 advocacy, teaching and workshops – hopefully some of that will surface on HTML5rocks.com.

Brad Neuberg: Tell us about a hobby, interest, or something in your background that most people wouldn’t expect or know about.

Marcin Wichary: One thing that I feel keeps me in balance is collecting (and slowly going through) books about computing history. I probably have some 800 of them by now. My apartment filled with obsolete technology talking about another obsolete technology is a good counterpoint to living in the future at work. And, as always, the best technology stories are those about people – this keeps me focused on our users in the present as well.

Brad Neuberg: Where do you see HTML5, CSS3, SVG, etc. (i.e. the new stuff on the web) going in the next year? How about the next 3 years?

Marcin Wichary: They say nothing ages faster than today’s idea of tomorrow, and I’ve never been a good futurist. :) So I’ll give you my wish list instead.

I would love to see more attention paid to nuances of typography. Computers took most of them away and sure, we reclaimed some back, but not yet very many. And lord, please, layout! We’ve all been using JavaScript crutches to do that for so long that it’s not even funny anymore – indeed, in a lot of my projects the first listener I add is “onresize.”

There’s also a number of avenues in JavaScript to build pretty crappy UIs. alert() and its brethren is the only way to reliably catch the user’s attention. Oftentimes it’s like pillow talk using a bullhorn. :hover allows only for the most rudimentary and unforgiving mouseover actions. We need better defaults for stuff like that.

Brad Neuberg: For folks that want to do the kinds of cutting edge things you’ve been doing and have done, what advice or resources would you give them?

Marcin Wichary: One of the first popular home video game consoles was 1977’s Atari VCS 2600. It was an incredibly simple piece of hardware. It didn’t even have video memory – you literally had to construct pixels just moments before they were handed to the electron gun. It was designed for very specific, trivial games: two players, some bullets and a very sparse background. All the launch games looked like that.

But within five years, companies figured out how to make games like Pitfall, which were much, much cooler and more sophisticated. Here’s the kicker: if you were to take those games, go back in time, and show them even to the *creators* of VCS, I bet they would tell you “Naah, it’s impossible to do that. The hardware we just put together won’t ever be able to handle this.” Likewise, if you were to take Google Maps or iPhone Web apps, take your deLorean to 1991 and show them to Tim Berners-Lee, he’d be all like “get the hell out of here.”

What I’m trying to say is: Assume nothing is impossible. It’s actually easier this way. So many times people asked me if something is doable in HTML, and my initial instinct was to say “no.” But you look around, ask around, *think* around, and there’s always a way.

Something else that took me a while to internalize: you have to accept that with Web development, anything that’s worth anything will be a hack. Not just prototyping; production code as well. That’s hard to swallow when you’re used to proper, clean, sterile programming. I’d go as far as to say if you’re working on something and you never think “what I did here is terrible; hopefully one day there will be a nicer, better way to do it,” you’ve already fallen behind.

And eventually that battery of hacks in your sleeve might make you stand above. My crude and jaded metaphor of Web development is button mashing when playing video games. Everyone hates button mashers, but working with cutting-edge Web really is flying blind a lot of the time – you’re trying out all sorts of things that sometimes don’t logically make a lot of sense. But they somehow work. If you get used to that mentality and you get familiar with those hacks, you will train your instincts to know which buttons to mash first, and give yourself more buttons as well.

Lastly, if you ask a “what if?” question and leave it unanswered, you should be ashamed. :)

Brad Neuberg: Thanks Marcin!

What kinds of questions do you have for Marcin? Ask them below!

Posted by Brad Neuberg at 6:00 am
6 Comments

++---
2.9 rating from 8 votes

Wednesday, September 22nd, 2010

HTML5 Link Prefetching

Category: HTML, Performance

From David Walsh comes a good writeup on the HTML5 link prefetch tag:

  1. <!-- full page -->
  2. <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />
  3.  
  4. <!-- just an image -->
  5. <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

You use the link tag to do prefetching, setting the rel to “prefetch” and giving the URL to the resource to prefetch. When should you use link prefetching?

Whether prefetching is right for your website is up to you.  Here are a few ideas:

  • When a series of pages is much like a slideshow, load the next 1-3 pages, previous 1-3 pages (assuming they aren’t massive).
  • Loading images to be used on most pages throughout the website.
  • Loading the next page of the search results on your website.

Some things to know about link prefetching though:

A few more notes about link prefetching:

  • Prefetching does work across domains, including pulling cookies from those sites.
  • Prefetching can throw off website statistics as the user doesn’t technically visit a given page.
  • Mozilla Firefox, currently the only browser to support prefetching, has actually supported prefetching since 2003.

Posted by Brad Neuberg at 6:00 am
4 Comments

+++--
3.7 rating from 9 votes

Monday, September 20th, 2010

Video Conferencing with the HTML5 Device Element

Category: HTML, Standards, Video

Did you know that work is being done to enable videoconferencing from HTML5 applications? Ian Hickson has been doing work on the element in a separate draft to make this possible.

The element will be used to allow the user to give permission to a page to use a device, such as a video camera. A type attribute can be used for the page to give more specificity on what kind of device they want access to. Right now this could be ‘media’ for access to an audio or visual device; ‘fs’ to access the file system, such as a USB connected media player; or ‘rs232’ or ‘usb’ to access devices connected in this manner.

Example usage:

  1. <p>To start chatting, select a video camera: <device type=media onchange="update(this.data)"></device></p>
  2. <video autoplay></video>
  3. <script>
  4.  function update(stream) {
  5.    document.getElementsByTagName('video')[0].src = stream.url;
  6.  }
  7. </script>

The spec includes a way to work with Stream objects for the data coming from the device and to record Streams. It also includes an API for working with peer-to-peer connections, such as sendBitmap() or sendFile() to send data between a peer connection. The entire standard is still being baked but here is what a P2P connection might look like in pseudo-code:

javascript

  1. var serverConfig = ...; // configuration string obtained from server
  2. // contains details such as the IP address of a server that can speak some
  3. // protocol to help the client determine its public IP address, route packets
  4. // if necessary, etc.
  5.  
  6. var local = new ConnectionPeer(serverConfig);
  7. local.getLocalConfiguration(function (configuration) {
  8.   if (configuration != '') {
  9.     ...; // send configuration to other peer using out-of-band mechanism
  10.   } else {
  11.     // we've exhausted our options; wait for connection
  12.   }
  13. });
  14.  
  15. function ... (configuration) {
  16.   // called whenever we get configuration information out-of-band
  17.   local.addRemoteConfiguration(configuration);
  18. }
  19.  
  20. local.onconnect = function (event) {
  21.   // we are connected!
  22.   local.sendText('Hello');
  23.   local.addStream(...); // send video
  24.   local.onstream = function (event) {
  25.     // receive video
  26.     // (videoElement is some <video> element)
  27.     if (local.remoteStreams.length > 0)
  28.       videoElement.src = local.remoteStreams[0].url;
  29.   };
  30. };

[via Aditya Mani]

Posted by Brad Neuberg at 6:00 am
7 Comments

+++--
3 rating from 8 votes

Sunday, September 12th, 2010

Adobe Announces HTML5/CSS3/SVG Pack for Illustrator

Category: Adobe, CSS, SVG

Exciting news from Adobe; they’ve announced a new HTML5 Pack on Adobe Labs with support for HTML5, CSS3, and SVG:

Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.

While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.

Some of the benefits of the HTML5 Pack:

  • Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
  • Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
  • Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
  • Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

Greg Rewis discusses it more in the video below:

Mordy Golding has a good description of some of the new features in this lab pack:

Parameterized SVG

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art. You can even create global variables.

Multi-screen SVG

You can create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

Mark objects as canvas in SVG

You can select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

Export named character styles as CSS

You can define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

Export artwork appearances as CSS

You can select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position and Dimensions.

Include selected Graphic Styles as CSS in SVG

You can select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What’s really cool is that you can include styles even if they aren’t applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

Great work Adobe!

Posted by Brad Neuberg at 5:15 am
4 Comments

++++-
4.5 rating from 8 votes

Friday, September 10th, 2010

HTML5 Canvas Image Effects: Black & White

Category: Canvas

Marco Lisci has written a tutorial on creating a black and white image effect using the Canvas tag.

The heart of his tutorial is using getImageData() and looping through the red, green, blue, and alpha values of each pixel to change it’s luminance:

So, what can we use to make an image black and white? The luminance. The luminance is how much a color is luminous to the human eye and it’s used to measure the clipping white in video editing systems, for example. In video editing system a white color that “break” the screen is a white that is too white to be represented on a common TV.

This is important because by calculating the average number between red, green and blue values we could obtain a value for every pixel that represent a static mathematical representation of the color luminance.

But there’s a problem, an human eye see colors dynamically. For example, if we take similar shades of blue and green, our eyes will detect the green color more luminous than the blue. In our algorithm we could use the static average formula, but our image will be too flat, and we’ll lose a lot of color depth.

So, let’s introduce the luminance formula: red x 0.3 + green x 0.59 + blue x 0.11.

This formula calculates the luminance of a color as it’s perceived by the human eye, so the green channel has more importance than the red and the blue. In our Javascript code we calculate for every pixel the grayscale number, by using exactly this formula. Then we assign this value to the red, green and blue channels of our pixel. By doing this for every pixel we are able to get a black and white version of our original image. There are obviously other more complex methods to calculate the correct grayscale value, but they could be too heavy to be used in an HTML5 canvas element, and we can say that for an everyday use, the luminance algorithm is good.

Resulting in code that looks as follows:

var imgd = context.getImageData(0, 0, 500, 300);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) { var grayscale = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11; pix[i] = grayscale; // red pix[i+1] = grayscale; // green pix[i+2] = grayscale; // blue // alpha } context.putImageData(imgd, 0, 0); [/javascript] It would be cool to see this combined as a kind of filter that can be applied to do black and white roll-over effects of elements, similar to what you can do with SVG filters. [via Mark Mildner]

Posted by Brad Neuberg at 5:30 am
4 Comments

+++--
3 rating from 3 votes

Thursday, September 9th, 2010

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

Category: CSS, Tutorial

Our very own Christian Heilmann has posted a tutorial on creating a fancy sticky note effect using CSS3 and HTML5:

He breaks it down in five easy steps to produce the final following demo:

Posted by Brad Neuberg at 5:30 am
Comment here

+++--
3.2 rating from 6 votes

Monday, September 6th, 2010

Searching for the HTML5 Search Input

Category: HTML

I recently saw the new HTML5 Search input element and wondered what the heck it does:

  1. <input name="s" type="search" />

Chris Coyier has posted an in-depth article going into this new HTML5 input type to appease your curiosity. The HTML5 spec actually says you don’t have to do much with it, but Webkit actually has a range of options.

First, it visually distinguishes the input field with an inset border, rounded corners, and typographic controls:

Chris has discovered that you actually can’t override the following visual properties on a search input with CSS:

  1. input[type=search] {
  2.   padding: 30px;            /* Overridden by padding: 1px; */
  3.   font-family: Georgia;     /* Overridden by font: -webkit-small-control; */
  4.   border: 5px solid black;  /* Overridden by border: 2px inset; */
  5.   background: red;          /* Overridden by background-color: white; */
  6.   line-height: 3;           /* Irrelevant, I guess */
  7. }

However, the following can be styled in an HTML5 search input:

  1. input[type=search] {
  2.   color: red;
  3.   text-align: right;
  4.   cursor: pointer;
  5.   display: block;
  6.   width: 100%;
  7.   letter-spacing: 4px;
  8.   text-shadow: 0 0 2px black;
  9.   word-spacing: 20px;
  10. }

Chris (via Mike Taylor) also discovered a ‘results’ parameter that can be used on Webkit but is not in the HTML5 spec:

  1. <input name="s" type="search" results="5" />

which gives a drop down with the number of results requested:

Posted by Brad Neuberg at 5:30 am
9 Comments

++---
2.8 rating from 5 votes

Wednesday, September 1st, 2010

Extending HTML5

Category: Tutorial


Google Rich Snippet
Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this?

While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn’t an element with the right meaning. What we want are ways to extend what we’ve got, to add extra semantics that are machine-readable — data that a browser, script, or robot can use.

First, he starts with the options HTML4 gave us and what options we now have with HTML5:

There were five fundamental ways we could extend HTML 4:

  • <meta> element
  • class attribute
  • rel attribute
  • rev attribute
  • profile attribute

In HTML5, rev has fallen by the wayside, becoming obsolete since hardly anyone used it correctly, and because it can be replaced by relprofile is also obsolete, and there is no support for namespaces in HTML5. However,<meta>class, and rel are all in HTML5. In fact, <meta> now has spec-defined names and a way to submit newname values, and rel has several new link types defined in the HTML5 specification and a way to submit more too.

Even better, WAIARIA’s role and aria-* attributes are allowed in HTML5, and HTML5 validators can check HTML5+ ARIA. Other new methods of extending HTML5 include custom data attributes (data-*), microdata, and RDFa. Guest doctor Chris Bewick introduced us to HTML5’s new data-* attribute system, which is perfect for adding private custom data for JavaScript, and we’ll no doubt meet microdata and RDFa sooner or later.

Finally there are microformats. As Dr. Bruce touched on microformats in his article on the <time> element, let’s delve a little deeper into what microformats are and how to use them in HTML5.

Oli then does a great deep dive of microformats, going over the different ones defined by the community to date (there are 33 microformat specifications!) and covering some of the common patterns that you can use if you need to roll your own microformat. If you’ve been wondering how to use things like hCard, hCalendar, XHTML Friends Network (XFN), etc. in your own systems then definitely give this article a gander.

[via John Allsop]

Posted by Brad Neuberg at 5:30 am
3 Comments

+++--
3.8 rating from 5 votes