logo
backtop

HTML 5 is here. NOW WITH ADDED DIV!

(Posted 20:04:32 on 20th January 2012 by Rag)
This is a div!
So, I'm like a kid in the proverbial candy store. I have all the toys I need and they are well and truly inside the pram and I'm not about to toss them out. I've discovered HTML 5. “What is that?” I hear you say. Well, I'm not really sure and it's pretty difficult to explain. HTML 5 is really just the latest standards for hypertext markup language which is really not that exciting until you combine it with the latest standards for cascading style sheets (CSS) and JavaScript. None the wiser are you really? Just felt I needed to add some kind of description, but if you really want to know, you should probably read the details on another site.

Well, why am I so excited? I'm not really sure about that either, but I am. Basically, it allows you to develop and design stuff much easier and faster. You can also make things do things with less code, for example the rotating div that you can see. What a div is is pretty irrelevant to the readers of this blog, it's simply an object that you can apply attributes to and change those attributes dynamically through the use of some simple scripting. You can apply these same attributes to more or less any object on a web page, I just started pratting about with divs because they tend to be the most convenient to prat about with.

This is another div!
So what's going to change with this site? Actually, it's already done! I converted the entire site from XHTML to HTML 5 last night. Now, I know what you're thinking. If I did it in a night, it can't be that big of a deal. For the most part I would agree, but it does mean updating code in over a 1,000 documents. Ordinarily a big task, but I built my own tool to do this kind of stuff a while back and given that I've kept fairly strict patterns (not really standards) in my coding, it wasn't that difficult. I have added some of the new tags throughout, but these are mostly invisible to the users. One change where you may notice something is in the video section if you try to play a video online. The site was embedding Microsoft's Media Player which, I found last night was not actually working in Microsoft Internet Explorer 9 (worked fine in 6, 7 & 8, but seemed to not work in the latest version). Anyway, the site now uses the new <video> tag which works in all new browsers including mobile.

This means we're making a statement. We've gone for cross platform compatibility at the expense of legacy support. I can't be bothered to code in support for anyone on an older browser. Upgrade or ... well, fuck off really. It might be nostalgic of you to have some obscure version of an obsolete Netscape browser and more power to you. There's a place for everyone, but the place for you ain't here.

Div behind a div
Yet another div!


The thing is, the initial excitement I got when I started reading about HTML 5 (and yes, I know I'm over a year behind, but I do have a day job you know) was all the wonderful things it could do more easily. The problem, I find as I start doing my little examples is that the specific coding and support is different for each browser, so you have to write something different for Mozilla's Firefox to Microsoft's Internet Explorer to Apple's Safari to Google's Chrome to Opera. This is painful enough without then having to figure out what version of said browser you're using and adding code for that. If I can do my bit and code for each of these, you can do your bit and upgrade to the latest version.

Not a div. Fooled Ya!
Rather odd that it's called a “standard” when there are so many interpretations of it.

I will take the time to add my bragging rights in that I have my video working under this new model ... in one night .... and Google's still working on getting YouTube up to date. They're beta testing an HTML 5 site to get the same level of functionality I have. Which just goes to show one thing ... they have a hell of a lot more videos to convert than I do. As I mentioned above, although you can use the same tag to invoke a video player, each browser requires the file to be provided in a different format. Not each browser, but you have to provide a version of the video in .mp4, .webm and .ogg. a quick plug to Miro Video Converter that I found very handy for the job. The thing that makes me laugh in that sad thing that passes as my mind is that I sat there and converted about 20 videos one at a time, three times each, watching a green progress bar go up and then a couple of clicks and onto the next. (I was actually working working whilst I was doing this ... such a multi-tasker!). The one at a time is on the basis that the free software I'm using doesn't have a multi-file selection option. I just have this image that somewhere in the YouTube offices there was a meeting to figure out the best way to decide how to convert a gazillion videos. And you just know someone wrote on a flip chart the options of getting someone to develop a script versus hiring a bunch of interns to do the job one at a time.

And the next day, someone was tasked with renting premises to house a thousand interns whist they sit there day after day watching green progress bars.
This div spins me right round baby.


1 comment
Mr O
11:03:48
23rd January 2012
I obviously had to test the video theory and randomly picked hoghorn, I presume this is now installed on the boat?

 

This is a Website Blog entry.