HTML5 Video Converter
May 30, 2012 at 12:48 am in Uncategorized
The trickiest part of using HTML5 video is getting the video converted. Check out Easy HTML5 Video Converter if you need to make your videos available on multiple devices easily.
The Mimimal HTML5 page.
February 19, 2012 at 3:28 pm in HTML5
According to this very informative article, the amount of code you need for a valid HTML5 page is quite small. In fact, it’s as simple as
<!DOCTYPE html> Smallest HTML file!
Modern web browsers will actually automatically fill in the rest the details for you. I believe it’s still good practice to include all of the proper HTML markup in your document. Just because browsers can rewrite your document for you doesn’t mean you should let them.
HTML5 Canvas Cheat Sheet
September 22, 2011 at 2:34 pm in Canvas, HTML5, Javascript
This amazing cheat sheet does a wonderful job of showing you how to do stuff on the canvas.
Revenge of the self-closing tags!
Developers who’ve been working with XHTML for a long time tend to feel a little awkward when they first notice the lack of self-closing tags in HTML5 markup. But HTML5 isn’t derived from XML, so it’s not going to conform to the same rules that XHTML did. However, the sepcification says it’s fine to have self-closing tags in our HTML5 markup.
The problem with self-closing tags in documents served with the text/html mimetype is that browsers start stripping off those self-closing tags. After all, HTML documents never had self-closing tags, and XHTML documents are supposed to be served with a different MIME type which is unfortunately incompatible with IE 6,7, and 8.
But because of browser inconsistencies, we’re starting to see some self-closing tags make their way into valid HTML5 documents again. One placei n particular is the source element in HTML5 video.
<source src="http://video-js.zencoder.com/oceans-clip.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />It seems that due to some strange parsing bugs, the video element doesn’t load properly unless the source tag is self-closed.
It’s an unfortunate side-effect of ten years of exceptions upon hacks upon exceptions.
More than half of web users can use HTML5 video?
January 7, 2011 at 6:44 pm in video
A great article over at the VideoJS blog states:
As we roll into 2011, HTML5 video hits a major milestone. 50.5% of web users now support HTML5 video playback. This number was gathered by comparing browser versions that support HTML5 video with StatCounter’s world-wide browser version statistics.
You can read more at http://videojs.com/2011/01/html5-video-statistics/
I’m exceptionally excited about this, and you should be too. We’re a step closer to being able to provide video to end users without them having to worry about plugins or codecs. There’s a long way to go, but this is certainly an improvement from the days where Internet Explorer 6 had 80% of the marketshare.
You can find more detailed information on incorporating HTML5 video with appropriate fallbacks in the book.
Audio.js – Cross-browser Audio Support
December 13, 2010 at 3:36 pm in audio, Javascript
In the book, we talked about supporting video and audio across multiple platforms, but we didn’t talk about a Flash-based fallback; we instead just let the visitor download the file.
The Audio.js project provides a simple API to create a cross-browser audio experience very similar to the many video solitions we talked about tin the book. I’ve played with this a little bit and it’s pretty handy.
Using localStorage to Persist Form Data
November 29, 2010 at 8:20 pm in HTML5, Javascript, Web Storage
Shane Riley has a wonderful example of how jQuery and localStorage can help improve your forms.
iOS 4.2 and HTML5, Sitting In A Tree…
November 29, 2010 at 8:17 pm in CSS3, HTML5, Uncategorized
Devices running iOS 4.2 now support Web Sockets in Mobile Safari. This is great news for services that want to use Web Sockets and can’t rely on a Flash fallback.
iOS 4.2 also now supports TrueType Fonts and they look pretty snazzy.
The iOS devices have had great HTML5 and CSS3 support. LocalStorage works quite well, as do things like CSS3 transformations, pseudoclasses, and multi-column layouts. Offline support works great too, so it fou’yre looking for a neat way to build an offline mobile app for the iPad, you’ve got all the tools you need.
The “Death” of Web SQL Databases?
November 22, 2010 at 10:31 pm in HTML5, Mobile, Offline, Web SQL
Recently, the W3C’s working group announced that it will no longer advance the specification for Web SQL Databases. Mozilla has taken the stance that they won’t implement the specification mainly because they don’t like the fact that it relies on SQLite’s implementation of SQL. So does this mean that Web SQL Databases are dead?
Hardly. All of the WebKit-based browsers have implemented this technology, and no current browsers implement the proposed IndexedDB solution which the W3C is now focusing on. Mozilla won’t ever implement Web SQL Databases, it’s unlikely that Opera and Microsoft ever will either, but considering that all iPhones, iPods, iPads, and Android devices currently do support this specification, it’s not going away any time soon.
Building an offline application for the iPad? Web SQL Storage is pretty nice stuff, especially when you combine it with HTML5′s offline browsing capabilities. In the book, we focus on that very example.
It’s far from dead. In fact it’s quite stable. The specification even provides transactions, so it’s good enough. Far better than some of the other specifications that many browser makers actually “agree” on.
Ultimate CSS Gradient Generator
November 2, 2010 at 1:34 pm in CSS3
The Colorzilla extention for Firefox is a handy companion for developers, and the folks behind it have just made things easier when it comes to creating nice-looking CSS3 gradients. Check out the Ultimate CSS Gradient Generator. With just a few mouse movements, you can create gradients that easily work across browsers, like this:
background: #f2f6f8; /* old browsers */ background: -moz-linear-gradient( top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* firefox */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9) ); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0 ); /* ie */
While it’s important to understand how gradients work, tools like this are great because they do the grunt work for us.
