object(WP_Query)#66 (49) { ["query_vars"]=> array(61) { ["tag"]=> string(5) "html5" ["error"]=> string(0) "" ["m"]=> string(0) "" ["p"]=> int(0) ["post_parent"]=> string(0) "" ["subpost"]=> string(0) "" ["subpost_id"]=> string(0) "" ["attachment"]=> string(0) "" ["attachment_id"]=> int(0) ["name"]=> string(0) "" ["static"]=> string(0) "" ["pagename"]=> string(0) "" ["page_id"]=> int(0) ["second"]=> string(0) "" ["minute"]=> string(0) "" ["hour"]=> string(0) "" ["day"]=> int(0) ["monthnum"]=> int(0) ["year"]=> int(0) ["w"]=> int(0) ["category_name"]=> string(0) "" ["cat"]=> string(0) "" ["tag_id"]=> int(126) ["author"]=> string(0) "" ["author_name"]=> string(0) "" ["feed"]=> string(0) "" ["tb"]=> string(0) "" ["paged"]=> int(0) ["comments_popup"]=> string(0) "" ["meta_key"]=> string(0) "" ["meta_value"]=> string(0) "" ["preview"]=> string(0) "" ["s"]=> string(0) "" ["sentence"]=> string(0) "" ["fields"]=> string(0) "" ["menu_order"]=> string(0) "" ["category__in"]=> array(0) { } ["category__not_in"]=> array(0) { } ["category__and"]=> array(0) { } ["post__in"]=> array(0) { } ["post__not_in"]=> array(0) { } ["tag__in"]=> array(0) { } ["tag__not_in"]=> array(0) { } ["tag__and"]=> array(0) { } ["tag_slug__in"]=> array(1) { [0]=> string(5) "html5" } ["tag_slug__and"]=> array(0) { } ["post_parent__in"]=> array(0) { } ["post_parent__not_in"]=> array(0) { } ["author__in"]=> array(0) { } ["author__not_in"]=> array(0) { } ["ignore_sticky_posts"]=> bool(false) ["suppress_filters"]=> bool(false) ["cache_results"]=> bool(false) ["update_post_term_cache"]=> bool(true) ["update_post_meta_cache"]=> bool(true) ["post_type"]=> string(0) "" ["posts_per_page"]=> int(15) ["nopaging"]=> bool(false) ["comments_per_page"]=> string(2) "50" ["no_found_rows"]=> bool(false) ["order"]=> string(4) "DESC" } ["tax_query"]=> object(WP_Tax_Query)#261 (2) { ["queries"]=> array(1) { [0]=> array(5) { ["taxonomy"]=> string(8) "post_tag" ["terms"]=> array(1) { [0]=> string(5) "html5" } ["include_children"]=> bool(true) ["field"]=> string(4) "slug" ["operator"]=> string(2) "IN" } } ["relation"]=> string(3) "AND" } ["meta_query"]=> object(WP_Meta_Query)#260 (2) { ["queries"]=> array(0) { } ["relation"]=> NULL } ["date_query"]=> bool(false) ["post_count"]=> int(15) ["current_post"]=> int(-1) ["in_the_loop"]=> bool(false) ["comment_count"]=> int(0) ["current_comment"]=> int(-1) ["found_posts"]=> string(2) "39" ["max_num_pages"]=> float(3) ["max_num_comment_pages"]=> int(0) ["is_single"]=> bool(false) ["is_preview"]=> bool(false) ["is_page"]=> bool(false) ["is_archive"]=> bool(true) ["is_date"]=> bool(false) ["is_year"]=> bool(false) ["is_month"]=> bool(false) ["is_day"]=> bool(false) ["is_time"]=> bool(false) ["is_author"]=> bool(false) ["is_category"]=> bool(false) ["is_tag"]=> bool(true) ["is_tax"]=> bool(false) ["is_search"]=> bool(false) ["is_feed"]=> bool(false) ["is_comment_feed"]=> bool(false) ["is_trackback"]=> bool(false) ["is_home"]=> bool(false) ["is_404"]=> bool(false) ["is_comments_popup"]=> bool(false) ["is_paged"]=> bool(false) ["is_admin"]=> bool(false) ["is_attachment"]=> bool(false) ["is_singular"]=> bool(false) ["is_robots"]=> bool(false) ["is_posts_page"]=> bool(false) ["is_post_type_archive"]=> bool(false) ["query_vars_hash":"WP_Query":private]=> string(32) "3d8b89a5817ceb9020651c224445862f" ["query_vars_changed":"WP_Query":private]=> bool(false) ["thumbnails_cached"]=> bool(false) ["stopwords":"WP_Query":private]=> NULL ["query"]=> array(1) { ["tag"]=> string(5) "html5" } ["request"]=> string(342) "SELECT SQL_CALC_FOUND_ROWS wp_posts.ID FROM wp_posts INNER JOIN wp_term_relationships ON (wp_posts.ID = wp_term_relationships.object_id) WHERE 1=1 AND ( wp_term_relationships.term_taxonomy_id IN (127) ) AND wp_posts.post_type = 'post' AND (wp_posts.post_status = 'publish') GROUP BY wp_posts.ID ORDER BY wp_posts.post_date DESC LIMIT 0, 15" ["posts"]=> &array(15) { [0]=> object(WP_Post)#278 (25) { ["ID"]=> int(5927) ["post_author"]=> string(1) "2" ["post_date"]=> string(19) "2014-08-14 10:20:51" ["post_date_gmt"]=> string(19) "2014-08-14 00:20:51" ["post_content"]=> string(516) "

Silos like Twitter and Facebook pose huge challenges for the longevity, integrity, and ultimately ownership of the content we create. If you care about these things, you need to checkout the IndieWeb.

And if this floats your boat, you need to get along to the Engineering Track at Web Directions 2014.

" ["post_title"]=> string(44) "Tantek Çelik - The Once and Future IndieWeb" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(28) "tantek-celik-future-indieweb" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2014-11-19 08:45:39" ["post_modified_gmt"]=> string(19) "2014-11-18 22:45:39" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=5927" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [1]=> object(WP_Post)#279 (25) { ["ID"]=> int(5879) ["post_author"]=> string(1) "2" ["post_date"]=> string(19) "2014-07-18 10:54:33" ["post_date_gmt"]=> string(19) "2014-07-18 00:54:33" ["post_content"]=> string(360) "

Faster, more robust and more fun (web) apps.

And if this floats your boat, you need to get along to the Engineering Track at Web Directions 2014.

" ["post_title"]=> string(28) "Alex Feyerke - Offline First" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(26) "alex-feyerke-offline-first" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2014-11-19 08:45:40" ["post_modified_gmt"]=> string(19) "2014-11-18 22:45:40" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=5879" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [2]=> object(WP_Post)#280 (25) { ["ID"]=> int(5757) ["post_author"]=> string(1) "2" ["post_date"]=> string(19) "2014-05-22 10:23:05" ["post_date_gmt"]=> string(19) "2014-05-22 00:23:05" ["post_content"]=> string(393) "

Get up to speed with Web Components and see how you can start using them today.

And if this floats your boat, you need to get along to the Engineering Track at Web Directions 2014.

" ["post_title"]=> string(59) "Ryan Seddon - Web Components, The Future of Web Development" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(56) "ryan-seddon-web-components-the-future-of-web-development" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2014-11-19 08:45:41" ["post_modified_gmt"]=> string(19) "2014-11-18 22:45:41" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=5757" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [3]=> object(WP_Post)#281 (25) { ["ID"]=> int(5471) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2013-12-03 16:25:04" ["post_date_gmt"]=> string(19) "2013-12-03 06:25:04" ["post_content"]=> string(683) "

In a fast and furious fifteen minutes, Mark Dalgleish demystifies Web Components by highlighting how, despite its complex appearance, it's actually made up of a suite of technologies providing features we're already familiar with. Once you understand what web components bring to the table, you'll wonder how we ever lived without them. Make sure you also check out the accompanying blog post for full details.

" ["post_title"]=> string(55) "Web Components - video presentation from Mark Dalgleish" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(53) "web-components-video-presentation-from-mark-dalgleish" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2014-11-19 08:46:29" ["post_modified_gmt"]=> string(19) "2014-11-18 22:46:29" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=5471" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [4]=> object(WP_Post)#282 (25) { ["ID"]=> int(5466) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2013-12-03 16:17:56" ["post_date_gmt"]=> string(19) "2013-12-03 06:17:56" ["post_content"]=> string(889) "

In the past, validating forms in the client has typically required doing some heavy lifting with JavaScript. But you may not know HTML5 changes all that. Browsers now check that the content of an input match its type (and we've got new types like email, url and number to make that even more useful). But, what you might not know about is the pattern attribute, which lets us use regular expressions directly in HTML to specify what format the user's input should have.

In this session, Chris Lienert looks at some of the common regex patterns you can use to validate user input, coupled with some of the many tricks he's learned to help users complete those forms we all love to hate.

" ["post_title"]=> string(71) "HTML, CSS and the Clientside App - Video Presentation from Garann Means" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(68) "html-css-and-the-clientside-app-video-presentation-from-garann-means" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2014-11-19 08:48:46" ["post_modified_gmt"]=> string(19) "2014-11-18 22:48:46" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=4731" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "1" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [14]=> object(WP_Post)#292 (25) { ["ID"]=> int(4693) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2013-06-07 11:43:40" ["post_date_gmt"]=> string(19) "2013-06-07 01:43:40" ["post_content"]=> string(17071) "

As a web developer, you've probably seen emerging HTML5 technologies and APIs like DeviceOrientation and WebRTC (Web Real Time Communications), and thought "wow they look cool, but they are only for hard core gaming, video conferencing, and other such stuff, not for my every day development". I'm firmly convinced that taking advantage of these capabilities is going to open up fantastic potential for developers, both for existing web sites, as well as entirely new web experiences. In this article, I want to talk about the latter.

When we first moved into the Web Directions office, we had an old iMac (I mean old) set up as a motion activated security camera. One of the guys who used to share the office with us had built a very simple app that when it detected movement (I'm assuming by analysing images) it sent a photo to a specified email address. Sadly, the Mac and app went when the guy moved out. I say sadly, because a few months back we could really have done with this to help catch whoever came by one night at 3am, smashed in our door, and took several devices.

But then it occurred to me this is something we can build in the browser. All we'd need to do was

  1. Detect motion (with the DeviceMotion API (though it's a bit more complex than this in practice as we'll see in a moment)
  2. Capture an image using WebRTC and the HTML5 canvas
  3. Send the image via email (we won't cover that today, as it is really more a server side issue, but there's all kinds of ways you could do it) to ourselves.

So, let's get started. We'll begin by detecting motion.

Detecting motion

You're probably thinking, there's an HTML API for this, DeviceMotion. Which is exactly what I thought. The problem is, while well supported in mobile and tablet browsers (these devices almost universally have gyroscopes for detecting their orientation in 3D space, and accelerometers for detecting their acceleration in 3D as well) it's not supported in any desktop browser. But, there is a related API, DeviceOrientation which reports the angle at which the device is in 3 dimensions, and which is supported in Chrome, when the laptop it is running on has the sensors to provide this data (I know that the MacBook Pro, but not Air support DeviceOrientation). DeviceMotion and DeviceOrientation work similarly. They both are events sent to the window object when something changes about the device. We can provide event listeners for these events, then respond to the data they provide.

Let's create event handlers for each of these kinds of event

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', motionHandler, false)
}

else if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', orientationHandler, false)
}

For each type of event, we make sure that the window object supports the event type, and if it does we add an event listener to the window for the type of event.

Ok, so now our Window can receive these events, let's look at what information we get from each event, and how we can detect whether the device is in motion.

As mentioned, the most logical way to do so is via DeviceMotion, but here's the complication. An ideal device for using as a security camera is an old laptop. It's powered, so the battery won't go flat, and on tablets, only Chrome for Android supports getUserMedia, for operating the device's video camera. But, we can use DeviceOrientation to detect motion as we saw on some laptops in Chrome. Let's do that first, then quickly look at how we can do the same thing for devices which support DeviceMotion events.

Here's our handler for DeviceOrientation events.

function orientationHandler (orientationData){
  var today = new Date();

  if((today.getTime() - lastMotionEvent) > motionInterval){	
    checkMotionUsingOrientation(orientationData)
    lastMotionEvent = today.getTime()
  }
}

and similarly, our handler for DeviceMotion events

motionHandler: function (motionData){
  var today = new Date();

  if((today.getTime() - lastMotionEvent) > motionInterval){	
    checkMotionUsingMotion(motionData)
    lastMotionEvent = today.getTime()
  }
}

Because DeviceMotion and DeviceOrientation events fire many many times a second, if we were to respond to every single such event, we'd have a very warm laptop, and on battery powered devices, much shorter battery life. So, here we check the current time, and only if the time since we last responded to this event is greater than some interval we respond to the event. Checking for movement a few times every second should be more than adequate.

The event listeners receive deviceOrientation events, with data about the event, including information about the device's orientation around 3 axes—alpha, beta and gamma.

  • alpha is the device's rotation around the z axis, an imaginary line extending out vertically from the middle of the device when it is lying flat on its back. In theory, alpha=0 is facing east, 90 is facing south, 180 is facing west, and 270 is facing north, but due to practical reasons, alpha is really only accurate for relative motions, not absolute directions, and so for example can't be used to create a compass.
  • beta measures the rotation around the x axis, a line horizontally through the device from left to right. 0 is when the device is flat, positive values are the number of degrees that the device is tilted forward, and negative values, the number of degrees it's tilted backwards
  • gamma measures the device's rotation around the y axis, a line horizontally along the plane of the devices keyboard (or screen). Positive values at the number of degrees it's tilted to the right, and negative values, the number of degrees it's tilted to the left
the device orientation axes
Device Orientation axes, laptop image ©umurgdk

Responding to the event

So, here's how we'll respond to the the event, and determine whether the device has moved.

function checkMotionUsingOrientation(orientationData){
  //detect motion using change in orientation
   
  var threshold = .7; //sensitivity, the lower the more sensitive
  var inMotion = false;
  
  var betaChange = orientationData.beta - lastBeta //change in beta since last orientation event
  var gammaChange = orientationData.gamma - lastGamma //change in gamma since last orientation event
      
  inMotion = (Math.abs(orientationData.beta - lastBeta) >= threshold ) || (Math.abs(orientationData.gamma - lastGamma) >= threshold)
  //if the change is greater than the threshold in either beta or gamma, we've moved 

  if (inMotion) {
    //do something because it is in motion
    }
  }
  
  lastBeta = orientationData.beta;
  lastGamma = orientationData.gamma;
  //now we remember the most recent beta and gamma readings for comparing the next time

The orientationData argument is our deviceOrientation event. Along with the sorts of information we'd expect from any event, it has 3 properties, alpha, beta and gamma, with no prizes for guessing what these contain.

What our function does is gets the beta and gamma values from the event, and subtracts the difference from the last time we measured these. If either of these differs by more than some threshold we've set (in this case a little under 1 degree) then we've detected a movement. We finish by storing the most recent beta and gamma values. We've not bothered with alpha values, because Chrome, at present the only browser to report these values on the desktop, doesn't report alpha values, and because moving a device only around one axis is extremely difficult, so if there's movement around beta or gamma, then that's good enough for our purposes. Essentially when the device is lying flat on its back, anyone walking in the vicinity will trigger this event.

How about doing the same thing when device motion events are supported? This time, instead of reporting the devices orientation in space, we get information about its acceleration in each of the same axes, x, y and z.

  • motionData.acceleration.x is the acceleration of the device, in metres per second per second (ms^2), to the right (relative to the device) (so negative values are acceleration to the left)
  • motionData.acceleration.y is the acceleration of the device, in metres per second per second (ms^2), forward (relative to the device) (negative values are acceleration "backwards")
  • motionData.acceleration.z is the acceleration of the device, in metres per second per second (ms^2), upwards (relative to the device) (negative values are downwards)

Here's how we'd use this to detect motion.

checkMotionUsingMotion: function(motionData){
  //agorithm courtesy
  //http://stackoverflow.com/questions/8310250/how-to-count-steps-using-an-accelerometer

  var threshold = 0.2;
  var inMotion = false;
  
  var acX = motionData.acceleration.x;
  var acY = motionData.acceleration.y;
  var acZ = motionData.acceleration.z;
  
  if (Math.abs(acX) > threshold) {
    inMotion = true
  }
  
  if (Math.abs(acY) > threshold) {
    inMotion = true
  }  
  
  if (Math.abs(acZ) > threshold) {
      inMotion = true
  }

  if (inMotion) {
    //do something because it is in motion

  }
}

Here we take the acceleration in each axis, and if any of these is greater than a threshold amount (to ensure we don't get false positives) then we're in motion. You can see it's a little simpler than using deviceOrientation, as we don't need to calculateany change.

Taking the photo

So now we can detect when the device is moving, we want our security camera to take a photo. How are we going to do this? Well, one feature of WebRTC is the ability to capture video with a device's video camera. At present, this is supported in Firefox and Chrome on the desktop, and the Blackberry 10 Browser (which also supports devicemotion events, so your Blackberry 10 phone or Playbook can serve as a security camera if you need it!), as well as Chrome for Android (though you need to enable it with chrome://flags). WebRTC is a very powerful API, but we're only going to need a small part of it.

We'll use the getUserMedia method of the navigator object. This takes an options object, as well as a success and a failure callback function as its arguments.

var options = {video: true};
navigator.getMedia(options, gotVideoStream, getStreamFailed);

Our options variable is a simple object, here we just set its property video to true (if we wanted audio we'd also set an audio property to true).

We've also passed it two callback functions, gotVideoStream, which will be called once a video stream is available, and getStreamFailed, which is called if we don't get a video stream (for example, if the user refuses the browser's request to use the video camera). getUserMedia uses callbacks, rather than returning a value, because it takes time for the user to choose whether to allow video to be enabled, and as JavaScript is single threaded, this would block our UI while the user waited.

Next, let's use video stream.

function gotVideoStream(stream) {
  var videoElement = document.querySelector("video");
  videoElement.src = window.URL.createObjectURL(stream);
}

OK, there's a bit going on here, so let's take it one step at a time. Navigator calls our callback function, passing an argument stream. This is a MediaStream object. We then use the createObjectURL method of the window's URL object to get a URL for the stream (this way we can then make this URL the value of the src attribute of a video element, then this video element will show the output of our camera in real time!).

So, we've now got a working video camera, that shows the video feed from our devices camera in a web page. No servers, no plugins! But we still don't quite have our security camera. What we need to do is take a snapshot from the video stream, when we detect movement. So, let's first take the snapshot

Taking a snapshot from the video element

Here we'll take a snapshot of the video element at a given time. Note this works regardless of what's playing in the video element (so you can do a screen grab of anything playing in an HTML5 video element like this). Ready?

function takeSnapshot(){
	var canvas = document.querySelector("canvas");
  var context = canvas.getContext('2d');
  var video = document.querySelector("video");
  context.drawImage(video, 0, 0);
}

Here's what we're doing

  • we get a canvas element from the page
  • we get its 2D drawing context
  • we get the video element from the page
  • we use the drawImage method of the canvas to draw the video into the canvas starting at (0, 0) (the top left of the canvas).

Yes, it really is that easy. Just as you can use canvas.drawImage with an img element, we can use it with a video element.

Now we've got all the pieces, let's put them together to create our security camera.

Remember this part of our motion detection functions?

if (inMotion) {
  //do something because it is in motion
}

This is where we call takeSnapshot, and then the current frame in the video element will be captured to a canvas element. You could also save this in localStorage, or send it via email to someone, or otherwise do something with the image. I'll leave those parts to you.

And that's really all there is to it.

I've also got a fully working version available on github. It's a little more complicated to read through than the code here, but it's copiously commented, and the basic working code is the same. Or you can see it in action here (just make sure you use Chrome with a device that supports orientation events, and has a webcam).

Notes for those following along

Note though, to make it work from your local drive, you'll need to run it through a webserver (Chrome won't enable the camera from file:// although Firefox will). You'll also need a device that supports either device orientation or device motion events, which to my knowledge currently means only a MacBook Pro (not MacBook Air).

Links for further reading

Som more reading on the various features we used to build our security camera.

" ["post_title"]=> string(84) "Build a motion activated security camera, with WebRTC, canvas and Device Orientation" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(82) "build-a-motion-activated-security-camera-with-webrtc-canvas-and-device-orientation" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-06-07 11:43:40" ["post_modified_gmt"]=> string(19) "2013-06-07 01:43:40" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=4693" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(2) "27" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } } ["post"]=> object(WP_Post)#278 (25) { ["ID"]=> int(5927) ["post_author"]=> string(1) "2" ["post_date"]=> string(19) "2014-08-14 10:20:51" ["post_date_gmt"]=> string(19) "2014-08-14 00:20:51" ["post_content"]=> string(516) "

Silos like Twitter and Facebook pose huge challenges for the longevity, integrity, and ultimately ownership of the content we create. If you care about these things, you need to checkout the IndieWeb.

And if this floats your boat, you need to get along to the Engineering Track at Web Directions 2014.

" ["post_title"]=> string(44) "Tantek Çelik - The Once and Future IndieWeb" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(28) "tantek-celik-future-indieweb" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2014-11-19 08:45:39" ["post_modified_gmt"]=> string(19) "2014-11-18 22:45:39" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(36) "http://www.webdirections.org/?p=5927" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } ["queried_object"]=> object(stdClass)#274 (11) { ["term_id"]=> int(126) ["name"]=> string(5) "html5" ["slug"]=> string(5) "html5" ["term_group"]=> int(0) ["term_order"]=> string(1) "0" ["term_taxonomy_id"]=> int(127) ["taxonomy"]=> string(8) "post_tag" ["description"]=> string(0) "" ["parent"]=> int(0) ["count"]=> int(39) ["filter"]=> string(3) "raw" } ["queried_object_id"]=> int(126) }

Presentations about html5

Podcasts, slides, videos and more

Tantek Çelik — The Once and Future IndieWeb

Silos like Twitter and Facebook pose huge challenges for the longevity, integrity, and ultimately ownership of the content we create. If you care about these things, you need to checkout the IndieWeb.

And if this floats your boat, you need to get along to the Engineering Track at Web Directions 2014.

See the slides and hear the podcast »

Alex Feyerke — Offline First

Faster, more robust and more fun (web) apps.

And if this floats your boat, you need to get along to the Engineering Track at Web Directions 2014.

See the slides and hear the podcast »

Ryan Seddon — Web Components, The Future of Web Development

Get up to speed with Web Components and see how you can start using them today.

And if this floats your boat, you need to get along to the Engineering Track at Web Directions 2014.

See the slides and hear the podcast »

Web Components — video presentation from Mark Dalgleish

In a fast and furious fifteen minutes, Mark Dalgleish demystifies Web Components by highlighting how, despite its complex appearance, it's actually made up of a suite of technologies providing features we're already familiar with. Once you understand what web components bring to the table, you'll wonder how we ever lived without them. Make sure you also check out the accompanying blog post for full details.

See the slides and hear the podcast »

Validating forms with the HTML5 pattern attribute — video presentation by Chris Lienert

In the past, validating forms in the client has typically required doing some heavy lifting with JavaScript. But you may not know HTML5 changes all that. Browsers now check that the content of an input match its type (and we've got new types like email, url and number to make that even more useful). But, what you might not know about is the pattern attribute, which lets us use regular expressions directly in HTML to specify what format the user's input should have.

In this session, Chris Lienert looks at some of the common regex patterns you can use to validate user input, coupled with some of the many tricks he's learned to help users complete those forms we all love to hate.

See the slides and hear the podcast »

Making Web Apps as Smooth as Native — video presentation by Andrew Betts

Right now creating high quality user experiences in HTML5 is very hard, and to get to where we are today we need a huge bundle of hacks and extreme techniques, many of which Andrew Betts covers in the session.

See the slides and hear the podcast »

Appcache, not so much a douchebag as a complete pain in the #$%^

A little while back, Jake Archibald wrote infamously (and anthropomorphically) that the HTML5 ApplicationCache is a “douchebag“[1]. Mindful that this is a word freighted with troubling significance, it is the term he used, so I’ll go with it.

The Urban Dictionary says the word douchebag

generally refers to a male … Read more »

WebRTC now in Chrome Beta for Android

Chrome Android Image

Following Blackberry 10’s support for WebRTC, Chrome beta or Android now supports webRTC, as do Firefox, Opera and Chrome for desktop (and Firefox for Android though not as yet Firefox OS it would seem).

A very significant milestone for what many consider a game … Read more »

More HTML5 syntax and parser quirks you may not have known

Last week we looked at one of HTML5’s syntax quirks, the fact that you don’t need to quote attribute values (unless the values contain a space or as is less well known one of a number of other characters). This time, some more about some of the subtle side … Read more »

Five reasons why you should quote attribute values in HTML5

With HTML5, you don’t have to quote attribute values. Until you do.

One of the benefits often touted for HTML5 over XHTML is what I once heard Paul Irish describe as its “loosey goosey” approach to syntax. No longer the strict taskmaster that XHTML was, we can now do all … Read more »

The iOS 7 homescreen parallax effect in the browser

A couple of weeks ago we started a series on how you might implement some of the more notable design effects in iOS 7 using purely web technologies. In the meantime, it’s been noted elsewhere that this may be difficult and perhaps impossible to do. I’m here today … Read more »

Wii Games with HTML5

Nintendo Web Framework Logo

For most of the history of what might loosely be termed computer games, dedicated consoles (and handheld gaming devices) ruled the roost. And none loomed larger on the landscape than Nintendo, with combined sales of hundreds of millions of units.

The dominance of this handful … Read more »

Towards an extensible web

Remember the X in XML, and XHTML? It of course stands for extensible, the idea that these languages allow for their users to build upon them, rather than waiting for some standards organisation to add new features.

With HTML5, extensibility of the markup language pretty much went out the window, despite … Read more »

HTML, CSS and the Clientside App — Video Presentation from Garann Means

As much as they affect JavaScript, state, event handling, and default browser behaviour also impact HTML and CSS in the choices we make, optimizations we can take advantage of, and the architecture of our applications as a whole.

Like what you see? Want a piece of the action next time around? Then get along to Web Directions South in Sydney October 24 and 25 2013.

See the slides and hear the podcast »

Build a motion activated security camera, with WebRTC, canvas and Device Orientation

As a web developer, you’ve probably seen emerging HTML5 technologies and APIs like DeviceOrientation and WebRTC (Web Real Time Communications), and thought “wow they look cool, but they are only for hard core gaming, video conferencing, and other such stuff, not for my every day development”. I’m firmly … Read more »