Posts Tagged ‘html5’

jQuery – Creating Elements Part II: HTML5 Data Attributes

Friday, July 13th, 2012
jQuery – Creating Elements Part II: HTML5 Data Attributes

Just when I think HTML5 sucks…

It still annoys the crap out of me, but there are some cool things in there. I just hate when people throw that word around like “We want to redo this flash to be HTML5.” What the hell does that mean exactly? And if you ask them, they have absolutely no idea. Its just a buzz word they are throwing around trying not to sound like they are out of touch. On a current project that I am working on, I came across a problem I needed to solve.

I needed to load videos on a page using the HTML5 video tag, with a flash fall back. The problem though is that there were about ten of them on the page, and the browser was reading the source tags and loading them. If this were just one video, this wouldn’t be a problem, but there were more and it was slowing things down.

The Solution

Which was to load the video on the fly when the flyout was triggered, but I needed to figure out how to get the right video to go with it. This is how I solved it.

As usual we’ll start with the HTML. First we have the link that will open the modal window. You don’t need to see the javascript that actually controls the modal, cause you can figure that out on your own. DO pay attention to the attributes on them.


How To Use HTML5 Video Tag – The Basics

Tuesday, October 5th, 2010
How To Use HTML5 Video Tag – The Basics

Not as scary as I thought

NOTE: I did have to configure my server so that the ogg MIME type would handle the .ogv extension. If you use, this is easy. Let me know if you need help.

You’ve all heard of the new HTML5 video tag, but if you are like me, you have seen an example and were like wtf? I was, until a few days ago. It is actually pretty easy, and only takes a few minutes. There are some things you need before you actually get going with it:

  • MP4 video file – for Webkit
  • ogv video file (Theora codec) – for Firefox
  • flv file – for everyone else
  • swfobject.js – for the swf


HTML5 Tags – Raise your hand if you are confused?

Monday, August 23rd, 2010
HTML5 Tags – Raise your hand if you are confused?

How to Confuse a Developer 101

As you may know, I am building an HTML5/Wordpress theme using the HTML5 Boilerplate. I have no problems with it at all. What I do have problems with, is trying to figure out what tag to use, and where to use it. I’ve talked about this before, with the ‘nav’ and ‘address’ tags. That was before I actually tried to build anything using the new HTML5 tags. Now that I am trying to use them, I find myself questioning if I am using the right tag!

HTML4 (whatever . version we are on) is not complicated. Wrap text blocks in ‘p’ tags. Links get wrapped in ‘a’ tags, and so on. All of which is easy to understand. There are no ‘ifs’ or ‘sometimes’ involved. After reading through some of the definitions for these new tags, I get the feeling that the interpretation of when to use them can be subjective.

You want to know how to confuse the hell out of all of us? Easy as pie. CHANGE THE TAG DEFINITIONS AS WE GO!


HTML5 Boilerplate, Conditional Comments, and things to come

Friday, August 20th, 2010
HTML5 Boilerplate, Conditional Comments, and things to come

The boiler room

If you haven’t at least heard of the HTML5 Boilerplate template, then you live in a dark cave as a hermit and are still using Photoshop 3. If you have, but haven’t checked it out, then you 100% need to. I downloaded the files (it comes with a few) and looked through it. Thank the gods it is commented so well, because there are a few things that I didn’t know going on.

It is an HTML 5 starting template loaded to the teeth with everything you could need…and then some. Just some of the things in it are: script tags to jQuery 1.4.2 (hosted on Google), Modernizer 1.5 js (see comment below by Paul Irish clearing things up for me on this), Google analytics code, Meyer’s reset CSS, conditional comments…this thing is PACKED with awesome.


HTML5…I am not digging it at all…

Tuesday, May 11th, 2010

For the people who read the title and are going to moan about how awesome the video/audio tags are and what not, go read the ENTIRE article of the elements of HTML5…here is the link.

Then come back and lets talk…mmmmmkay?

Is it still awesome? I’m going to give you a ‘for instance’ here. Let’s start with…the address tag. When you hear “address” tag, what do you think of? What would you put in this tag? Before you read that article, you probably thought “Well, the freakin’ address you idiot!” Guess what though? You would be wrong. Quoted from the article:

The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)”