TPR8: HTML5 Design

Christopher Schmitt: My name is Christopher Schmitt. We're going to talk about HTML5. We just have a lot of ground to cover. The HTML5 spec is 900 pages long. We can't cover it in 45 minutes, so I'm going to do what I can to get you guys a little up to speed.

But before we do that, we need to talk. Things are OK between us and XHTML. I mean, we get along...

[Laughter]

Christopher Schmitt: ... and we like stuff. However, there's a couple of problems, and some of it has to deal with reality. And the reality of the situation is that only 5% of websites are actually valid.

Opera did a survey and they only found that 5% of websites are actually coded to a valid spec. And so when you talk about XHTML, which requires more dedication to be valid, it's kind of hard in light of this reality of keeping up with XHTML. And one of the reasons that it is painful to deal with is...

[Laughter]

Audience 1: I'm sorry, we're just studying hand signals... you.

Christopher Schmitt: OK. All right.

Audience 2: Please move over.

Christopher Schmitt: Move over?

Audience 2: Yeah.

Christopher Schmitt: How about this? This way?

[Laughter]

Christopher Schmitt: All right. I know you want this picture of the hot sauce. It's pretty cool. OK.

[Cross-talk]

Christopher Schmitt: Awesome. Cool.

[Laughter]

Christopher Schmitt: All right. This good? Oh, this is a great hand signal.

Audience 1: OK. We need to move the mic. That's about it.

Christopher Schmitt: All right. Keep talking? OK.

And making websites valid is hard, too, because we're developing applications, we're developing websites, we're passing off these websites and applications to other people who input their own content and some of that, and they might not care about valid XHTML as much as we do, and it gets kind of hard.

And even when the inventor of the World Wide Web says, "We pretty much gave up because you can't really try to convince people that XML is really cool." It just didn't pan out whatsoever.

Another thing that we have deal with reality is that we still have to deal with IE6. We still have to...

[Laughter]

Christopher Schmitt: Even though IE9 has been around.

[Laughter]

Christopher Schmitt: Yeah. We still have to deal with a lot of things. And I'm glad as Angelina Jolie has adopted kids, IE6 has gone down. I think there's a correlation.

[Laughter]

Christopher Schmitt: But I was talking to a gentleman just before the talk and he still has to deal with 20% of traffic with IE6, both on campus and coming in from outside. IE6 is not the world's greatest browser, especially in light of Microsoft will tell you IE9 is the world's greatest browser now.

So we still have to deal with IE6, and we also have to deal with... reality is that HTML has a finite number of HTML elements to deal with.

How many people know how many HTML elements are there in HTML4? Anyone? How many say 20? Thirty? Thirty, all right. Forty? Fifty? I'm going to go to a million so it's OK. So I'll just do...

[Laughter]

Christopher Schmitt: All right. How many people say 50? Sixty? Seventy? Eighty?

Audience 3: Two-hundred!

Christopher Schmitt: Ninety? A hundred? No one really knows, apparently. How's that?

[Laughter]

Christopher Schmitt: It's actually about 90 HTML elements. And when you think about that, it speaks a lot about the power of the web and how much we've grown with such a finite number of HTML elements trying to do... hopefully will do semantic markup, which is like this crazy notion of using a P tag for a paragraph and a heading tag for a heading or a title. But we have a finite number.

And so our world is growing trying to put all this new content, different types of information on top of each other with these small elements. And there's been a... Did I actually push those? Yeah.

How many people know who this guy is? OK, one person in the back. This guy, his name is Tantek. He actually created microformats. How many people know what microformats are? OK, cool. A lot more people know what microformats are.

So Tantek actually created and spearheads the microformats project. If you don't know what microformats are, I suggest you check them out. It's microformats.org. And what it is is he creates design patterns or standards for creating more complex pieces of information than HTML elements can use.

And one of those is, like the vCard, you can actually create an hCard spec. You can put in common types of business card information into an HTML standard. And he has also one for a résumé, he has one for events. And this is really great because Google has also adopted this and will actually spider that content and, if it's useful, maybe also put it in the search results as well there. So it's actually beneficial, too.

However, even with this great solution where he builds upon spans, divs and attributes that are common HTML4, there are some roadblocks. Two years ago, BBC actually stopped using microformats because of an issue with screen readers.

Microformats at the time used title attributes for design pattern, and what screen readers do will actually read what's in the title attribute value rather than what's marked up with the actual content, and so people were getting longitude and latitude addresses rather than, say, Austin, Texas or Cincinnati, Ohio. So they had to stop using that. It's been fixed since then, but it shows you how fragile our current system is.

And the other reality is that we've grown. The web we use now is totally different than the one that was envisioned. There's a lot more cool stuff out there that we need to deal with.

[Laughter]

Christopher Schmitt: I didn't even go to...

[Music]

Christopher Schmitt: Maybe like... Yeah, listen to this. Am I right? Yeah, sing it. OK.

[Laughter]

Christopher Schmitt: All right. We have video on the web, we're doing online banking, we're uploading our Flickr photos and photos on Facebook. Back in the day, we usually coerce people with food to our homes and watch a slideshow of our vacations. Now we just put them on Facebook and we bore them at work.

[Laughter]

Christopher Schmitt: And then there's the whole concept of what an architect builds is going to be vastly different than what the people who come in and use the building for. And this hotel is a great example. It was built as a hotel, but it's changed over time. And just as that example, so has the web.

There's a great book called "How Buildings Learn" by Stewart Brand. It's linked there at the bottom. It's a really great book. I suggest reading it. And when you think about building and architects and stuff like that, I love the quote from Frank Lloyd Wright who says, "If you take care of the luxuries, the necessities will take care of themselves."

And I think if we would take a look at what we're actually doing on the web today and try to put that into a working spec that is sort of HTML5, all the intricate details will come out, but we'll actually have a better experience for the web as a whole.

So with that, I want to talk about what we're doing today. We're talking about HTML to go into HTML5, we're talking about building with HTML5, then we're going to talk about video, audio, and then geolocation.

Also, I do want to say, I do have prizes. There is a catch. You have to ask a good question in order to get a prize. "Interact with web Standards" is a great...

Audience 1: Where did you get that shirt?

Christopher Schmitt: I got it... I got it...

[Laughter]

Christopher Schmitt: I got it on the internet.

[Laughter]

Audience 1: Tell me more about this internet.

[Laughter]

Christopher Schmitt: All right. Maybe we'll have to meet afterwards. We'll talk about it.

"InterACT with web Standards" is a book I co-authored with Glenda Sims and a whole bunch of people from web Standards Project. This is a great book to... if you already know about the web and you're already up to speed, it's great. It's a great reviewer, a refresher. If you don't, if you already got it, if you win the book and if you go look at it, it's a great thing to give to your boss.

[Laughter]

Christopher Schmitt: For great questions, I will give you a copy of the book. But there's also another catch with that. A catch within a catch. It has to be a question I can answer.

[Laughter]

Audience 1: Where did you get that jacket?

[Laughter]

Christopher Schmitt: From the store.

[Laughter]

Christopher Schmitt: Cool. All right. Any other questions? About my clothing?

[Laughter]

Christopher Schmitt: OK. So I'll start with building with HTML5. We're going to start with the doctype.

I don't know about you, but I can never remember this, and I've been on the web since 1993 building web pages. I always have to go to a website, copy and paste it. And I teach web design as well, and it just... seeing kids actually copying everything correctly is kind of a pain, which is really weird because it's all about copy-and-pasting.

But with HTML5, this is the doctype right here. I can remember this. That's all it is right there. And they want to make sure you have the language attribute for HTML and also set the character set, and then you're done. Pretty much if you do those three things to your current website right now, you are busting out HTML5.

[Laughter]

Christopher Schmitt: You could just say, "Hey, Boss, I did it!"

[Laughter]

Christopher Schmitt: "I'm taking lunch."

[Laughter]

Christopher Schmitt: And actually, this is probably one of the world's smallest HTML5 pages. If you actually go to the validator and you put these three lines of code, it will validate.

And there is a validator for HTML5 out there. It's kind of experimental because the spec is still being written, but you can still see that you don't need a whole bunch of extra tags like a body or a closing HTML tag or whatever. So that's what you really need to do to get started.

But now we're going to take a look at a little bit of syntax. So we started talking about the doctype, now let's talk about how to encode HTML5.

Well, the thing is, with HTML5... with XHTML, we had to make sure every attribute value had quotes. HTML5 says, 'Nah, you don't need to worry about that anymore.' You can still use them if you want to, but you don't have to put them in there.

Another thing is that you can use all caps again. You can also use image source if you want to. And in fact, if you want to, you can do it in camel case. If you want to.

[Laughter]

Christopher Schmitt: Go crazy with it. And to a benefit to my students, they won't have to use a slash for empty elements like BR, whatever like that. They can just get rid of slash. You can still use it if you want to, but you don't have to use the slash like an image tag.

Also, with XHTML, if you had video controls, you would have to put controls="controls" for certain elements. Like the DL compact, you have to put compact="compact", which is kind of weird. Why don't you just say 'compact'? With HTML5, you don't need to use this at all. You can just get rid of this and just use the attribute name.

So basically, in summation, everything that was bad in 1999...

[Laughter]

Christopher Schmitt: ... is good again.

[Laughter]

Christopher Schmitt: Now we talked about how we can code with syntax, we talked about the doctype. Let's just talk about how we would do a basic marking up of a page.

Well, this is how we did it in the past. We used a whole bunch of divs: div id="header", div id="nav", div id="section", div id="article", div id="side-column", div id="footer". Just a whole bunch of divs. Well, HTML5 says... well, I said earlier, we took a look at what we're really doing and creating HTML5 elements for that purpose.

So now we have HTML5 elements 'header', 'nav', 'section', 'article', 'aside', and 'footer'. Now we don't have to worry using so many divs. WE can still use divs if we want to, but we can rely on more semantically rich, if you will, HTML elements.

But a common question is, what is an article in comparison to a section and to aside? What are the meanings behind these? Because then we want to make sure we use these HTML elements correctly.

So I went around and asked some experts in the HTML5 world. How many people know Molly Hozschlag? All right. Molly is awesome. She's an evangelist for standards for Opera browser right now. I asked her, "Hey, what would you say is... Can you clarify 'section', 'article' and 'aside'?"

So in bullet-proof-point form, she said, "Section clarifies div, so every time you think you need a div, you're going to do section. Article replaces div id content, so every time you have unique content to the page, you want to make sure you use the article once and around that content that makes that page unique. And then you also want to use asides for replacing the sidebar content, the content that supports the content, the page, the article that you can do without if you need it to."

And then Chris Mills, who also works for Opera, but he's more of an educational evangelist. He does a great curriculum series on dev.opera.com. I asked him, and he played it safe. He actually told me to go read someone else's blog post. So you can go read that one in the slides later on.

And so I was like, "Well, we got rid of a whole bunch of divs. What does that mean?" So I asked Marc Grabanski. He's a great jQuery expert and he's an HTML5 guy, too. He was just like, "Divs don't have any meaning." And I asked Bruce Lawson, who's also an Opera employee. Opera's been doing a lot of work with HTML5. Basically you just use divs when you need to group a bunch of things, and the other HTML5 elements, they'll come into play. So use divs like you would normally if you don't have another HTML element to work with.

And so this is how a basic page would look like. We have header, we have nav, we have section, we have article, we have an aside, and we have footer.

And so if we just put it in a browser, this is how it looks. I just color-coded this. When you use HTML5, your page will not automatically become a rainbow.

[Laughter]

Christopher Schmitt: Yeah. It doesn't even come with double rainbow, I checked.

[Laughter]

Christopher Schmitt: And I just used color coding so you can see the different sections of heading, nav and stuff like that like there, and also because I wanted to make a point like if you try to use HTML5 in older IE browsers, this is what happens. The CSS does not get applied because what happens is IE does not recognize those new elements.

So what we would need to do is actually trick the browser, or actually just basically tell the browser, 'Hey, these elements are here. Please respect them.' And so what we do is use what's called a 'shim'. Actually, this is John Resig who made jQuery. He actually calls it a 'shiv', which is a little bit different than a shim.

[Laughter]

Christopher Schmitt: But basically he used a set of JavaScript to tell the IE browser, 'Hey, respect the new HTML elements header, nav, section, article, and all of the other ones.' So you put that JavaScript in your browser and then IE will actually start playing nicely.

However, just one tidbit is that if you want to style your HTML5 elements in IE, you also have to make sure that you apply 'display:block' to those elements in your CSS rules, because IE is just going to assume that they are 'display:inline' in their own box. So just a little forewarning there.

You can actually put that shim into your web pages, but I also want to tell you another technique that you can do, another useful aid in making HTML5 pages, and one of that is Modernizr. How many people use Modernizr? OK.

Modernizr is an awesome, awesome, awesome tool. It's created in part by Paul Irish, who just became a Google evangelist. And what Modernizr does is it's a JavaScript file library, if you will.

You put it at the top of your web page, and what it will do is go through your browser support for various HTML5 and CSS3 features support, and what it will do is actually go through and actually put in class attribute values in the HTML element of your page.

And then you're thinking, 'Well, that's great, Chris. I've got all of this extra code on my page injected by JavaScript. What does this mean?' Well, what this means is that you can actually use CSS rules and do specific CSS rules for specific features that are supported in your browser.

If your browser doesn't support geolocation, you can just render a certain area of your page just like it doesn't. However if it does, you can use a descendant selector to just do specific CSS rules for that geolocation area. And that includes also other CSS3 support like RGBA values, rounded corners, and all that sort of stuff like that, as well as the HTML5 features like geolocation. So it's a really great tool.

You can also use it this way with CSS. I'm a big CSS guy, so I like this aspect of it. But you also probe with JavaScript and see if a browser supports it based off the code from Modernizr. So I really, really suggest checking out Modernizr if you can.

Any questions so far? OK. Cool.

All right. So now we talked big-picture type of stuff. We talked about the doctype, syntax, and generic HTML5 elements that we can use for laying out pages. What we're going to do is take a closer look at HTML5 elements.

One of them is the audio element. And this is how easy it is to get audio into your web pages. It's an audio HTML5 element. Do source and put to your file 'autoplay', which means it's going to play it automatically when the browser loads, 'controls', which means the controls will be visible to the user when they see it, and that's all you need to do. 

And then what we can do also is if your site visitors' browsers does not support audio, you can actually put a link to the audio file in between the audio tag, and so they'll see this link right here and they can download it. It's not like an alternative, but it's a great means that they can decide whether they can download the audio and play it on their personal computer. Possible.

So I think I have a simple demo, if I can pull it up.

[Music]

Christopher Schmitt: I didn't go to 'view source'. Beach ball, beach ball, beach ball. There, sorry.

Christopher Schmitt: All right. That's awesome.

[Laughter]

Christopher Schmitt: Awesome. All right. You saw it, it happened.

[Laughter]

Christopher Schmitt: All right. So with HTML5 audio, you can use attributes of 'source', 'autobuffer', 'autoplay', 'loop' and 'controls'. If you don't have controls listed as a value in your attribute, the player will be invisible. And it will be really annoying if you have autoplay and no controls because people will load your web page and they're like, "Oh my God, where is this audio coming from?" So if you want to be highly annoying, I suggest you do that.

[Laughter]

Christopher Schmitt: But we have support issues with the actual audio file formats. Let's take a look at this table of what file formats are supported. Firefox supports Ogg Vorbis and WAV. Safari supports MP3 and WAV. Chrome supports Ogg Vorbis and MP3. IE9 just came out and they only support MP3.

[Laughter]

Christopher Schmitt: I'm like, "OK. Whatever." I was like, "You don't even support WAV?"

[Laughter]

Christopher Schmitt: I was like, "Are you serious?"

But I will say, I would totally avoid using WAV file formats because the compression is not that great. You might as well just send the CD to your user.

[Laughter]

Christopher Schmitt: So what we can do with that is actually do audio elements and do source HTML elements and say, OK, well, hopefully you can put MP3 file first. If you can't find that, go use a .ogg file format. If you can't do that, we'll just fall back on Flash and put the 'embed an object' code in here, and so that way we have a good fallback and be able to enhance with our audio.

The next step, HTML5 video. So this is how we'll do it right now. We talked a little bit about Flash, but here's how we deal with Flash right now. Here's our video. We have the object and embed elements in there. Of course, the user will need to have a plugin in order to view it. And now here's the same type of video if you want to use it with HTML5. This is how we would code it. All right.

[Murmur]

Christopher Schmitt: So we have video source, HTML5 test, width and height, controls. We actually include a poster frame. We actually create a custom poster frame for our video. And then, again, we also have a fallback, a link that people can download the video if they wanted to between the video.

I did have a demo. Apparently it crashed. But it plays.

[Laughter]

Christopher Schmitt: It works. Trust me on this one. I want to do another demo earlier.

OK. So with HTML5 video, width and height. You don't need to put width and height attributes in the video. If you don't do that, the browser will just choose the aspect ratio as inherent with the movie file size. But I would suggest putting in the width and height in there.

Also, some video formats do have their own poster frame, so they might actually show up in the video if you don't cite one in the actual video element. So you might as well just go the extra step and actually put a poster frame that you want in there. And make sure you want to use controls when you use that video element so people can stop it.

And again, video can store automatically if we use 'autoplay=1'. We also loop it, too. But the main issue is codec support. This whole warning about licensing issues, and all that, it used to be on the spec. I actually leave it because I love how verbose it is and how politically easy it is, especially for spec writers.

But the issue is that the spec writers aren't going to say which spec should be supported. But basically the browsers should support any spec it can, pretty much, for the most part.

And so these are the three main web formats that are out there. Ogg Vorbis, which is really cool. You don't really need to worry about patents. It's an open-sourced file format. H.264 is created by the MPEG group. If you have a Blu-ray player, it actually uses this file format, so it's kind of cool.

And there's a new video file format that just came out called WebM, and it's a wrapper for VP8 and Ogg. It comes from Google, and they tried to make a good effort of making it open-source, but there could be some little bit of patent issues still there so I think Opera is still not going to pick it up just yet. But it just came out a few months ago.

Here's a support chart right here. Firefox 3.6 supports Ogg, Chrome 5 plus does, Opera 10.6 and higher does. H.264 is supported in Safari, Chrome, and even IE9, which is weird. WebM, which I told you just came out, it's got support in Firefox beginning with 4.02 for Windows... no word on Mac, but I'm pretty sure it will be coming along... Chrome 6 and Opera 10.6. So that's coming along very well.

But if you want to actually start using video and you only have a little bit of video that you want to convert, here's some tools that you can use. If you want to convert to .ogg file format, this is a free Firefox extension. You just include it into your browser and it will use your users' computer's resources to convert a video file into a .ogg file format for you. So it's a really great, easy thing to do.

Another thing you can do is actually VLC. How many people use VLC? VLC is a great free video player for Mac, Windows. I tell everyone in my family to just go use it and don't worry about everything else. But there's actually a great converter in VLC that can actually convert files within it. So go and check it out.

For H.264, there's an application called HandBrake, which allows you to convert files at H.264. This is doing it on the cheap. If you have a couple of videos, it might not be great for doing a wholesale bunch of videos. You might want to just still rely on YouTube for doing that, if you want to do that.

I tried to do a couple of things like... I told you about if you really want to learn more about HTML5 video, diveintohtml.org. It's a great overall dive into HTML5 by Marc Pilgrim. He has a great Web page about video. And also people at Opera have written a good primer, if you will, on HTML5 video, too.

And people who are still using HTML5 video, they really want it to work. You actually opt into HTML5 video for YouTube. There's a page right here you can just click to join HTML5 Beta. So when you're surfing YouTube, if there's an HTML5 video, it will actually serve that up rather than the Flash file for you. So it's actually cool.

And actually, before, they used to have the HTML5 little logo right there, but they've since gotten rid of it. But this is just a screenshot of them actually using HTML5. Right there.

What we did now is with HTML5 video, we did something really cool. Instead of having our video embedded in a plugin, we put it inline with the web page browser. So it's actually in the document object model of the page. You know what that means: we can use JavaScript to control the video. 

We can actually do a simple play/pause button with JavaScript, and we actually use on-click play/pause. So we actually create our own buttons for it. And if my demo actually worked, I'd show you. Let me just pull it up real fast. Let me just do this real fast here.

[Pause]

Christopher Schmitt: All right. OK, last night it worked. I'm going to save all demos until the end then. All right. OK.

[Pause]

Christopher Schmitt: All right. And then I do want to take a second to talk about captioning. So now that we have the video in the browser, we can control it with JavaScript, we can actually insert our own captions for our file.

And captioning is awesome. I love it, especially... I don't want to listen to the TV, I'll just put on captioning and it's really great. But also captioning has been shown to improve reading skills among adults who are non-readers. It's also great for people who... it just improves your vocabulary, so I really love the captioning, even for people who don't have a learning disability.

And so I went out there and I looked. I wanted to compare captioning for HTML5 video and captioning for Flash. How many people use captioning for Flash? All right. What tool do you use for it?

Audience 4: [29:52 Unintelligible]

Christopher Schmitt: It's a pain, right? All right. Does someone in the back also use it? Raise your hand. Pain. All right, so we've got two pains.

[Laughter]

Christopher Schmitt: Anyone not have a pain with Flash captioning? OK. I think we're sold on pain with Flash.

And so I went looking. I said, "OK, I want an easy tutorial on Flash captioning." And I found this thing from June 4th, 2007 for Flash CS3. And it's a long tutorial, and I didn't see anything easy about it whatsoever. So if I had this demo here, which I could show you later. But you actually do toggle captions. Switch subtitles off, show you the whole transcript. And you actually do different languages, too. So it's really quick.

And I want to show you just a quick and dirty way of doing captioning is first you want to get the jQuery plugin. It's called jCaps. It's on GitHub. Just do a Google search for 'jCaps' and 'GitHub' and it will come up. It's a great plugin.

What we want to do is take your video to upload it to YouTube and click on 'English: Machine Transcription'. And honestly, it's going to be the worst transcription. It's not going to be awesome, it's not going to be great. But what it does for you is that it gives you the time codes for your video, which are just a total pain to code by hand, let me tell you from firsthand experience.

But you get the time codes from that. You're going to fix the transcription that YouTube gives you. And what you want to do is save that transcription as a .srt file. And .srt files are the same that was used in DVD players for captioning. It's that, too.

And you want to save your file as 'yourmoviename-english'... if it's with English captioning... '.srt', if it's German or whatever language that you have. And then you want to make sure you have this file format. I think this is the standard way of doing captioning doing time codes. You want to convert it from what YouTube gives you and then you can do 1, 2, 3, 4 and just set this file into your browser.

And then set up your jQuery. Make sure you're referencing jQuery. Make sure you're referencing the jQuery captioning. And then make sure you have your video set correctly, video ID, and have buffer controls.

And then you're going to use the track element in HTML5 and link to your transcript files, so if you have one for English, you have one for German, and then you automatically will have the ability to have your buttons for the video as well as the ability to have your captioning play with the video as it's going through.

So the captioning, automatic instant captions with this jQuery plugin, and that's just with a quick and dirty way of utilizing YouTube for machine translations. So it's a really great tool. I really highly support it.

Any questions so far? OK. This better be good. All right.

Audience 5: I was kind of curious...

Christopher Schmitt: Can you take the mic, sir?

Audience 5: Sure.

Christopher Schmitt: Because you're two feet away from it.

Audience 5: Yeah, well...

[Laughter]

Audience 5: I've had my coffee today.

I'm just kind of curious on your thoughts of using this sort of thing with mobile phones, and is there anything extra that we need to be thinking about, especially with the doctype and the HTML tag?

Just recently we've had experiences where we're developing a mobile-friendly site, we're using the iPhone to test, and we're using just plain old doctype for HTML5 and it looks great. And then we look at it on Android and on Palm and it's just text.

Christopher Schmitt: Are those phones or something that you told me about?

Audience 5: Yeah. So, I don't know, just your thoughts on that process.

Christopher Schmitt: Yeah. Apple products are by far leading the charge with that. I think they're going to catch up with where Apple is in terms of support for that, but it's just going to be a while before it happens. But if it's mission critical, maybe you want to look at other alternatives besides that.

Audience 6: Should we be going back to HTML4 or XHTML or... ?

Christopher Schmitt: No. I think you can still use HTML5 for it.

Audience 5: For the JavaScript replacements?

Christopher Schmitt: Yeah.

Audience 5: OK.

Christopher Schmitt: Question over here?

Audience 6: Yes. I don't want to stand up so can I just get the mic over here?

Christopher Schmitt: All right. Oh, I can repeat the question, too, if you just tell me what the question is.

Audience 6: OK. My question is that with all of these new improvements in HTML5, it sounds to me like Flash is on its way out. Do you think we should still support Flash? I mean, what are your predictions for the future regarding Flash?

Christopher Schmitt: OK, the question is, it looks like HTML5 is a Flash killer.

[Laughter]

Christopher Schmitt: Do we still need to support Flash? How do you use Flash right now?

Audience 6: Just for video events, pretty much.

Christopher Schmitt: How many videos do you use? How many events do you have?

Audience 6: It depends. I mean, my Campus Day, like, "Oh, it's the pep rally." Uhh.

[Laughter]

Christopher Schmitt: Sounds like a really peppy place.

[Laughter]

Audience 6: Not a whole lot of school spirit.

Christopher Schmitt: Not a whole lot of school spirit, man.

I would say, if you're doing one-off videos here and there, you may want to just try converting to HTML5 videos and see how it goes with that, and then also you could fall back on Flash if you wanted to.

I think about 10 years from now, you won't really need to use Flash as much as you need to use now, and the reason is because Flash has had a 10-year head start on HTML5. HTML5 just pretty much has started.

So it's been 10 years that Flash has been the domain of rich internet applications and video just plays with that. So I would say about 10 years. I would say sooner than that, but I want to give myself plenty of time. No point in predictions.

Audience 6: So don't drop it right now.

Christopher Schmitt: Yeah. I would not drop it right now if it's mission critical. If it's a pep really and you're not really into school spirit, you can just do it anyway.

[Laughter]

Christopher Schmitt: Question at the back?

Audience 7: Yeah, just a follow-up on the first question. Android is a very... We had actually solved the iPhone, the Android, all browsers [36:05 Unintelligible].

Christopher Schmitt: OK.

Audience 8: And so [36:11 Unintelligible].

Christopher Schmitt: OK. Cool. So basically, the gentleman in the back said he's solved the problem with video on other smartphones. And they can go to OmniUpdate website. Is that right?

Audience 8: OmniUpdate website at Houston. So there's UMD, there's...

Christopher Schmitt: COMD.

Audience 8: [36:52 Unintelligible]

Christopher Schmitt: OK. Cool. Awesome. So that's a great tool. Anyone else have a question or a follow-up on that? Yes, ma'am?

Audience 9: Are there any pitfalls that you've seen if somebody has [37:08 Unintelligible]?

Christopher Schmitt: Well, actually... The question is, are there any pitfalls if they disable JavaScript?

And I don't really see a lot of people turning off JavaScript. I actually went to Accessibility Conference and talked to a lot of accessibility gurus who were like, well, do people turn off JavaScript? And even people with different types of readers for the Web, they still have JavaScript turned on. So I haven't really seen a lot of people turn off JavaScript out of spite.

Yeah. Well, even when I was having an issue with JavaScript not being on mobile phones, I mean, I think we'll just give everyone an iPhone. That's just my bias.

[Laughter]

Christopher Schmitt: All right.

Audience 10: [37:44 Unintelligible]

Christopher Schmitt: Yeah.

[Laughter]

Christopher Schmitt: OK. I have one more thing to talk about. And those are really good questions. So since I can't answer that mobile one, you don't get a book. But I'll answer your question, though. You'll get a book, too. You both will get books, sorry.

Audience 11: Can I ask one question? Back on video? It's really short.

Christopher Schmitt: All right.

Audience 11: So how do you think... We have a lot of video and everything is on our Flash server now. We're trying to migrate everything over to just using MP4, and we have an HTML5 player to fall back with Flash so it does all things.

But what we're having the issue with is the streaming and the buffering, because the Flash server does really well and really large files of kind of pulling it across out to the users. And we're not seeing it as well on the HTML5 and we don't know if that's our new storage of the MP4, since you can't obviously use Flash on your server with an HTML5.

Christopher Schmitt: Right. And that's one of the issues with Flash. That's why it's going to be a while.

The question is, we have streaming issues with HTML5 video. And that's because we're asking our browsers to do a lot more than what we did before, especially with Safari browsers and some of that. Now Adobe and Apple have made up a little bit. Adobe is now allowing Apple to do hardware acceleration in their browsers.

I think as browsers will progress and as HTML5 gets more finalized, it will get better. But, yeah, there are some little roadblocks with that.

OK. So I want to do geolocation. We use Google Maps because we need to find out where the nearest Starbucks is, right? But we can also use geolocation to just tell people the location. So Twitter, you actually add your location to tweets that you send out so people know where you are, where you're tweeting from, and it adds that level of context.

And so the way you actually use this in your browser, you get the little pop-up saying, 'Hey, dude, do you want me really to give these guys where your location is? Are you sure?' And so you say, yeah, sure, go at it. And so it's a really simple JavaScript to do it.

You need to do navigator.geolocation and then function, we do a click of function, it says 'position.coords.latitude' or 'position.coords.longtitude' and you get this nice little pop-up of 'your latitude is this, your longitude is that'.

However, I thought... as a designer, and I've worked with other designers who might want to use geolocation, I really want something that's drop-dead easy as that jQuery captioning plugin was. So I got with a bunch of Javascript gurus and we actually worked on a geolocation HTML5 plugin.

And at the very basic level, this is what it does is it actually takes a list of addresses in plain text using microformats' hCard and puts that into an ordered list. And it will automatically sort through the addresses to find out which one is closest to the user.

So basically you use a microformats' hCard, you use Creator... this is just an address for a barbecue place in Austin... and then you just write it up. You actually use the hCard Creator so you don't have to actually mainly write all this code here. And then what we're going to do is put your addresses in a big ordered list and you just put 'locations2'. I just put 'locations2' as just an example. I'll get back to it in a second.

And then you want to make sure you reference jQuery, and then you just get the plugin js/jquery-location. And then the other thing you want to do is go to Google Maps API, sign up for it, and when you sign up for it you want to make sure you put your domain name in there, so it's your .edu or .com or whatever. You want to make sure because Google will match your API key to your domain. So make you sure you get it. It's about an 80-character string.

And what you want to do is use the options. But you just leave your API key right there. And then what it will do is automatically sort through the addresses and tell you which one is closest to the user.

So here is why I did this test. This was my address right here. This is how far away I was from this restaurant, 0.4 miles, 1.5, 1.9. It actually will show you this. I just put one in western Texas, which is about 52 miles away from where it was.

And it's really good for about 10 addresses at max. Otherwise, then it's going to slow down the process. And so to help speed things up, you actually use what's called HTML5 data attributes.

You can actually include data longitude. Even the data- is a valid attribute in HTML5. So I put latitude here and data-latitude here, and so what the script is going to do is say, 'Well, instead of going to Google Maps API, Google Maps is right there, and translating, geo-encoding the address, you've already done the work for me. I'm going to just pick up the data right here and save some time in processing and sorting all of that information.'

And also, this jQuery, this plugin actually has options so you can actually change the hooks for the HTML that I've written up and make it suit your CMS or your coding structure or whatever that you have.

So XHTML. I think we should see other specs.

[Laughter]

Christopher Schmitt: My takeaway is HTML5 elements improve semantics. We're talking about audio, video, captioning and geolocation.

Here's some books. I've really liked "Design with Progressive Enhancement". They talk a lot about canvas elements in jQuery. Really great book for progressive enhancement. Microformats... if you've never used microformats, please pick up Emily Lewis' book, "Microformats Made Simple." It's a really great book. I use those.

I do have a little plug. I do online conferences, and so if you use Expression Engine, we're coming up with enginesummit.com on October 26. We're also doing the jQuery one on November 16th to 17th. And if you give me your business card, I'll pick one at random and give the minimum ticket to that person so they can share it with their organization or on campus, wherever. So that's two days of jQuery for both designers and developers.

Thank you very much.

[Applause]