Archive for January 2010
So I decided to join another mailing list. This time its the W3C Device API & Policy Working Group. Better known at the DAP WG—this group is chartered “to create client-side APIs that enable the development of Web Applications and Web Widgets that interact with devices services such as Calendar, Contacts, Camera, etc. Additionally, the group will produce a framework for the expression of security policies that govern access to security-critical APIs”
The group was created last year so I have been reading several hundred emails today. I still have about 500 left before I catch up completely. But hopefully I will have that complete by tomorrow night.
So far the group has produced some really exciting results. For an example check out the new <device> element. From the spec “The <device> element represents a device selector, to allow the user to give the page access to a device, for example a video camera.”
This is still very new and isn’t supported by any browsers. But it is very exciting to project a few years into the future and imagine the many ways in which devices of myriad types will dominate and affect our lives. The work that is being done in this group will very much affect the direction that this course takes. I very much look forward to participating in this conversation.
Feel free to follow along.
No tags
2009 was a year in which google yearned for speed like a crack addict. They released multiple tools and tips to help tweak your website to achieve it’s maximize speed. Since I have a love of all things Google and I strive to provide the quickest and smoothest user experience available I thought I would take advantage of some of these tips.
So I will be trying out a few new things here and there. If you actually notice an increase in speed please let me know. However my site already loads pretty quick so I am guessing that any improvements will be beyond human perception.
Something that I began doing yesterday that would surely make my XHTML loving teacher freak out is this:
To see how drastic this is consider the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Too Long</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
</head>
<body>
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">Contact<a></li>
</ul>
</body>
</html>
By following google’s rules as outlined in the video above. The previous markup becomes this:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Much Better</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href=".css">
<ul>
<li><a href="#">Home<a>
<li><a href="#">About<a>
<li><a href="#">Contact<a>
</ul>
I know what you are saying. “No freaking way!” But don’t dismiss is too soon. After all removing those implied closing tags and reducing the size of the doctype I reduced the file from 505 characters to 233 characters. That is a reduction of 46% characters. And that could have been reduced even further if I hadn’t emphasized the DOM structure by indenting descendant elements. (Which your not seeing because wordpress didn’t preserve it)
The file size may not be wildly different on this simple example. But imagine a page with hundreds or thousands of lines of markup and you can see how this might be a huge benefit.
No tags
Here are a couple of user interface graphics that I recently created for potential use in the Web Applications 1.0 spec. No word on whether they made the cut or not but I figured that I would post them here so that they see the light of day.
No tags
The WHATWG consists of 9 “members” from the 4 major modern browser venders (Opera, Safari, Chrome, & Firefox) and around 500 or so “contributors” (including myself).
Our charter says “Software developers are increasingly using the Web to deploy their applications. User Agents serve as front ends for server-based applications, and W3C technologies — including HTML, CSS and DOM — are often used to build user interfaces to these applications. Along with ECMAScript, these technologies provide a foundation for Web applications.
However, the aforementioned technologies were not developed with Web applications in mind, and Web applications often rely on unintended features not fully described by the specifications. The next generation of Web applications will add new requirements to the development environment — requirements these technologies are not prepared to fulfill alone. New technologies being developed by the W3C and IETF can contribute to Web applications, but these are often designed to address other needs and only consider Web Applications in a peripheral way.”
With that in mind check out Web Applications 1.0
No tags
I am overjoyed to report that I have been allowed to place 4 more screenshots into the HTML5 specification. That brings the total to 6 screenshots that I have created in Illustrator for the spec.
The additions are 2 graphics for the range-state http://www.whatwg.org/specs/web-apps/current-work/#range-state I created the 2 graphics that go along with the <input name=x type=range min=100 max=700 step=9.09090909 value=509.090909> example.
I also created the 2 sample user interfaces at http://www.whatwg.org/specs/web-apps/current-work/#sample-handler-impl
To see my other work in the HTML5 spec check out my last post http://cardonadesigns.com/wordpress/?p=60
I am really really honored to have some of my graphic work appear in the W3C/WHATWG specs. I hope that this is only the beginning of my working within the W3C/WHATWG and the Open Standards Community as a whole.
Google, Firefox, Safari, or Opera—I await your call to join the team 
No tags
I am really glad to announce that some of my Adobe Illustrator work is now live on both the W3C & WHATWG HTML5 Specs! It is really an honor to have some of my work in the spec. There will be many many people who read this spec and I hope that my work somehow makes it just a little bit clearer.
Hixie was looking for a small screenshot for the multiple attribute and I happened to be in #whatwg at the time.
Thanks to Ian for the opportunity and please let me know if you need any more graphic work for the spec.
To see my work in the W3C HTML5 spec
Here is my work in the WHATWG Current Work Spec
No tags
2010 is finally here and HTML5 is in last call! I have decided that I will be doing a set of tutorials on HTML5 and some of it’s great new features. And to start out the New Year I thought I would show everyone how to put those great New Years Eve videos online in HTML5 with the new <video> element!
First things first, the HTML5 doctype. Many of you may be familiar with HTML4 and XHTML1′s doctypes. Respectively they are:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> & <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Now if you are like me then you have likely never typed that. Traditionally this was the one part of my markup that I would copy and paste. Usually I am a stickler about machine generated code, but with HTML 4 Transitional, HTML4 Strict, XHTML1 Transitional, & XHTML1 Strict, there were too many characters for my feeble mind to remember. So I would copy and paste the doctype and be done with it. But HTML5, oh sweet sweet HTML5 has done away with all that madness. Now we have the serene <!doctype html>. So clean and fresh, like a snowy field. This doctype causes all browsers to render in standards mode! Which is reason enough for you to start using it today. It is also case insensitive, so it can be <!DOCTYPE HTML>. <!doctype HTML>, or even <!dOcTyPe HtMl> if you’re feeling crazy.
Now that we have that out of the way let’s get on with the fun stuff—HTML5 video!
Traditionally if you have wanted video on your website you needed to use some type of extension— most likely flash. This is an issue because flash isn’t native to the webpage. That meant that people needed to download an extension to make your video work. Yes it’s a given that most people have flash installed. But perhaps not everyone does. Also, many mobile devices (including the 1000 pound gorilla in the room—iPhone) don’t support flash. So all of those great videos on your site are broken when you look at them on your shiny iPhone.
HTML5 fixes that issue by introducing the <video> element. Similar to the <img> tag, the <video> tag allows you to simply point to a source file and embed video natively in your markup in a couple of lines of code. And whats even better?! Mobile devices such as the iPhone/iPod touch, android devices, palm webOS devices, and even macs/pcs can watch your video. There is no better choice!
So how do we accomplish this miracle of modern technology? Hold on to your socks….
<video src=”new-years-eve.mv4″> </video>
There it is. Don’t worry, I’ll wait while you triple take…..
Yeah, it’s that easy…..with a couple caveats of course. After all, this is the web.
So how do the browsers feel about the above markup. As always that depends on which browser you are talking about. IE as always says “Bah Humbug”—so don’t even try. Chrome, Safari, & Firefox are a different story however. And this is where it gets a bit (but not much) tricky.
One of the things that is holding HTML5 up from completion is the addition of an audio and video codec from the specification. There are a couple of choices, but there isn’t consensus. And here is why. Firefox, the bastion of open source doesn’t want to pay the outrageous royalties involved to use the h.264 codec for video and the mp3 codec for audio. They would much rather implement the “open” Ogg theora and vorbis formats for video and audio. There is some debate about whether these codecs are up to snuff for such large scale deployment by people such as Google open source program manager Chris DiBona who recently said “If [YouTube] were to switch to Theora and maintain even a semblance of the current YouTube quality it would take up most available bandwidth across the Internet.” – Ouch
So Google and Apple decided to take the route of supporting h.264 for video and mp3 for audio. My understanding is that they reason that they have already paid those royalty payments and they don’t want to expose themselves to any potential litigation from the ogg people. Sound reasoning I suppose.
But this has left the poor <video> & <audio> tag from fulfilling their grand destiny of native video/audio for all! If you encoded your video in ogg then people who access it from a webkit browser (chrome, safari, mobile safari, mobile android, and palm OS’s browser are all based on the webkit rendering engine) won’t be able to see it. But if you encode the video in H.264 then your open source brethren at Firefox won’t be able to enjoy. What to do…..
Fortunately we have the <source> element! Huh? “There is a src attribute and a <source> element?” you are asking right now. Yep, for <audio> and <video> there is a <source> element that can descend so that you can call more than one source. Example of our updated markup:
<video controls=”"> <source src=”new-years-eve.m4v” type=‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘> <source src=”new-years-eve.ogv” type=‘video/ogg; codecs=”theora, vorbis”‘> </video>
A couple of things that you might have noticed that I added without telling you. The controls attribute. This is a nice little attribute that allows for a set of browser built in controls for your video or audio. This makes it very simple to add a nice play, pause, and start button. It is a boolean (true or false) value. By default it is not even present, which represents false. So if you leave it out altogether you won’t have any controls. It’s presence represents true. So you don’t need to put controls=”true”— the correct way to write it is controls=”".
Next you will see that there is our new friend the <source> element. I added two types of video here. H.264 for webkit browsers and ogg for firefox. Regarding the type attribute, from Mark Pilgrim’s great work Dive into HTML5 “
“The type attribute looks complicated — hell, it is complicated. It’s a combination of three pieces of information: the container format, the video codec, and the audio codec. For the .ogv video file, the container format is Ogg, represented here as video/ogg. (Technically speaking, that’s the MIME type for Ogg video files.) The video codec is Theora, and the audio codec is Vorbis. That’s simple enough, except the format of the attribute value is a little screwy. The value itself has to include quotation marks, which means you’ll need to use a different kind of quotation mark to surround the entire value.
<source src="NewOrleans2006.ogv" type='video/ogg; codecs="theora, vorbis"'>type attribute.
<source src="NewOrleans2006.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>type attribute first to see if it can play a particular video file. If it decides it can’t play a particular video, it won’t download the file. Not even part of the file. You’ll save on bandwidth, and your visitors will see the video they came for, faster.”
Thanks Mark
Now that everything is cleared up. You might also want to add a height and width to you <video> tag. So the final thing looks like.
<!doctype html>
<html>
<head>
<title>HTML5 Video </title>
</head>
<body>
<video controls=”" width=”400″ height=”400″>
<source src=”new-years-eve.m4v” type=‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”new-years-eve.ogv” type=‘video/ogg; codecs=”theora, vorbis”‘>
</video>
</body>
</html>
And that’s it! If you check out your page in the most recent versions of firefox, safari, or chrome you will see beautiful HTML5 video!
Go to my website and check out this example of HTML5 video.
There is much more to know about HTML5 <video> and this is only a tiny primer. For a much much more exhaustive look at HTML5 <video> check out the video section in Mark Pilgrim’s amazing work Dive into HTML5 (yes I realize how many time’s I’ve linked to that in this article. It is really that good of an online book).
Or you can always check out what the HTML5 specification has to say about video.
As always I appreciate any feedback (please correct me if you see errors or omissions). Thanks for reading and stay tuned for more in this series of HTML5 tutorials.
No tags
The New Year is upon us. 2009 was an amazing year for both Cardona Designs & the web standards community. HTML5 has continued it’s creep into the mainstream and the real-time/mobile web erupted with the success of the iphone/android platforms and services like Twitter and Facebook.
What will 2010 bring? HTML5 is supported by all the modern browsers and is here to stay. Mobile devices are becoming as powerful as yesteryear’s supercomputers and are always with us and always connected to the web. Groundbreaking technologies and trends come out of nowhere and change the game. All I can say is expect the unexpected
You probably noticed that CardonaDesigns.com underwent a little change. We decided to launch with a new look, feel, and purpose in the new year. Cardona Designs believes strongly in web standards and in particular the HTML5 spec. We feel that HTML5 began to gain traction in 2009 and that trend will only continue and increase in 2010. So we are rebranding ourselves as HTML5 & CSS3 Website and Application development. We hope to begin the shift from developing beautiful websites to building powerful & amazing HTML5 mobile applications.
With this in mind we are happy to announce the release of our first HTML5 app! We are calling it list5.
list5 is a “To do” list that takes advantage of a couple new features of HTML5. Firstly it uses HTML5′s offline application caching and local storage capabilities so that it works even when not connected to the web. Secondly it takes advantage of some cool new CSS3 tricks that make it appear like a native application. And finally, the most exciting part is that it works on any device that supports the modern web. This app will work on your pc, your mac, your android, your iphone, your ipod touch, and your palm pre.
To download list5 to your mobile device simply press the “+” sign on your screen and add a link to the app to your desktop. Now each time you access the app from the desktop it will act like a native app
And that is just the beginning! Cardona Designs is hard at work on several other HTML5 apps that will launch in the new year. So please use list5 and give us your feedback and please check back with CardonaDesigns.com shortly to see what else we are releasing.
No tags
