Introduction to HTML 5

Introduction to HTML 5


>>NEUBERG: My name is Brad Neuberg. Today,
I’m going to be talking to you about HTML 5 and giving you an introduction to the interesting
aspects of the new standard. I’m at Google’s Developer Programs specifically a group called
Open Web Advocacy. Our group is focused on helping through outreach, education, JavaScript
tool kits that help really increase the rate at which developers can use interesting new
Web technologies like HTML 5, SVG, CSS3 and more. Before jumping into HTML 5, I want to
set the context of where we are on the Web today. The last two years, we’ve really seen
the Web platform accelerate. In this graph, you see, at the bottom, sort of the Web capabilities.
And at the top you see the capabilities of native applications which have stayed roughly
the same the last few years. What’s really interesting is the last two years, we’ve seen
an acceleration of what you can do on the Web that’s starting to get close to the abilities
of native applications. We see the iPhone was a real game changer. Safari 4 really increased
capabilities. Opera has always been a leader. The Android device really opened things up
and so on with the introduction of Chrome, Firefox 3.5. And we see that over time, the
Web is getting better and better and better at having a greater degree of fidelity of
things that you want to do on the Web. And what’s really unique is that as the Web the
last few years has really accelerated with modern browsers, it’s solving real developer
challenges. And that, when we get into HTML 5, we’ll see how some of these solutions play
into these challenges. But things like, having improved graphic support in the base platform
of the Web. Being able to tie location into your Web applications. Storage means actually
being able to use the abilities of a desktop machine to do storage, so that we can treat
it as more than like a Commodore 64. We have these very powerful machines. Let’s start
using them on the Web. And finally, speed, that’s been a really key change. JavaScript
has gotten much faster and that’s a game changer. Along with this has been something that’s
really surprising. You know, when Firefox really helped create the idea of a consumer
driven open-source application, that was a new untested idea. People didn’t know it could
open-source scale into the consumer market. But I think, at this point, that’s a done
experiment. We know that it’s true, that it can happen. If you look at this, you’ll see
that it is an increasing accelerating number of developers contributing to open-source
projects, to open-source Web browsers including Chrome, Firefox, WebKit. So that’s really
going to help accelerate even more what we have. And at the same time you see a roughly
linear trend in terms of the number of users. Here we see millions of open-source browser
users that is increasing overtime. At the same time, and sort of setting the context
of where we are today, we see a tremendous improvement in JavaScript performance and
we are only at the beginning of that trend. The last two years, we’ve begun to see that.
We’ve already seen a roughly 100x improvement in JavaScript performance, really, pretty
much within about the last sort of year and a half. We’re only at the beginning of the
optimizations that are possible when you treat JavaScript as something that you can really
crank a lot of performance out of. So these trends come together, you know, the increasing
fidelity of Web applications, a greater number of open source browsers, faster JavaScript.
These come together to really kind of create the stage at which HTML 5 can really do much
more than HTML 4 which was the last major iteration of HTML, which was really in the
late ë90s. So it’s really time for a new version of HTML because we are in a different
world at this point than we were then. And this time around, I just want to sort of make
a point that let’s do it differently. One of really surprising things is most people
don’t realize that AJAX, the idea was invented by Microsoft in the late ë90s, Outlook
Web Express in 1997 was the first app to use AJAX, which at that time was the XML HTTP
request object and it really took until about 2005 for Firefox to also support that and
the other browsers, and people just sort of wake up to the fact that, ìHey, you can
combine server–background server talking to support with things like more advanced
CSS, HTML and that kind of gave us the world that we have today. But it took something
like eight years to really gain enough awareness and gain enough support for people to really
start paying attention. You know, this time around, I think people are going to notice
a lot sooner the capabilities of HTML 5, the capabilities of SVG, CSS3, faster JavaScript.
Let’s not wait us long as we did then to start really doing amazing things. And I think we’re
going to–we’re actually going to see that shift. So people are already jumping on these
things. So let’s do things differently this time around. So the structure of the talk
I’m going to do today is I want to talk about five major sections. I’m going to talk about
vector graphics on the Web including canvass and SVG, Scable Vector Graphics. I’m going
to talk about video within the HTML 5 standard. I’ll talk about geolocation. I’ll talk about
the application cache in the database and then I’ll talk about Web Workers. The HTML
5 spec includes more than this. These are five aspects of the spec that are very exciting
and very useful. We could spend the whole day talking about these aspects. There are
so many interesting things in there including new tags, sort of cleaning up, describing
how you render older content and so on. We’re going to focus on these aspects today. Each
one of the sections, I’m going to give you an introduction. I’m going to give you some
sample code and some demos. And also to talk about how this fits in to what you’re doing.
So let’s get started. Let’s jump in to vector graphics. So until recently, you really couldn’t
draw on the Web. The Web itself didn’t really provide primitives to help you actually draw
things on the screen. And the graphics–if you could, you know, kind of get some graphics
out there, they weren’t very interactive. They didn’t interface very well with JavaScript.
Now, you could sort of rely on other sort of aspects of the Web to do this, things like
Flash, Silverlight, VML which was an early vector graphics language from Microsoft. So
a lot of people would sort of do clever tricks in order to do some drawing on the Web. But
what’s really cool is if, if we can get graphics to be an intrinsic part of the Web, what you
get is things interact really well with each other and that’s what so cool about Canvas
and SVG, which I’ll talk about both of them, is they embed themselves into the Web platform.
They are part of HTML. They’re a part of the document object model. They can fit into CSS
and HTTP. And that gets really powerful. As you’ll see that lets them break out of the
box and do really cool stuff using existing Web skills. So let’s talk about both. Let’s
jump into SVG. So SVG is a, is an acronym that stands for Scalable Vector Graphics.
Really, they just give you new HTML-like tags for drawing. So to do a rectangle, you get
a rectangle tag. You can say where on the screen to put it. Here we’re putting it at
x=0, y=0. You can set a width and the height. You can add a fill and a stroke if you’re
changing the width. You know, how many crazy hacks people have done to do rounded corners?
Well, it’s really easy with SVG. There we are making some rounded corners. We say, round
the x side, round the y side by 8. Boom! You know, one line for rounded corners. That’s
nice. And then finally, you know, we–I talked about how this stuff is native to the Web
stack. So we can add an ID that will allow JavaScript to grab this. We can add a CSS
class which lets you style this with CSS if you want to control in a centralized way how
aspects of your drawing are displayed. And there, right there, is what that particular
tag would get rendered as. A blue square with some rounded corners and red outline. Now,
what you just saw surround this is at the very top, that is the HTML 5 doc type. That’s
the thing that you drop at the top of your page. And that tells the browser, ìHey,
this is HTML 5.î Now SVG is a Web standard that predates HTML 5. One of the things that’s
really unique about HTML 5 is it now says, here’s how you drop SVG right into a normal
HTML page. So it really makes SVG a core part of HTML. So right here, we see, we’ve got
some normal HTML. You say SVG and then you drop your mark up in. So that’s one of the
really cool new aspects of HTML 5 that hasn’t got as much attention as it should, ’cause
it’s something that’s really unique. We now have HTML-like tags that do drawing right
inside of HTML. Now, I mentioned that one of the unique things about these things is
they integrate well. So these aren’t just static graphics. These are graphics that you
can animate, you can interact with. Here we are using the normal document object model.
We grab our rectangle. We can use sort of the exact same way that we change the style
of HTML. There we are changing the fill to “green.” We can add interactivity, again,
the same way. There we are doing an onclick. So when you click on the rectangle, it says,
“Hello.” And that’s it, interactivity is really straight forward. This shows sort of one of
the nice benefits of what it means to have scalable graphics. On the left you see a normal
bitmap. When we change the size, it distorts. It pixelates. On the right, whether you’re
looking at an SVG image on a 40-inch monitor, or a small iphone screen which supports SVG,
it still stays beautiful and legible. That’s one of the benefits of this technology. So
let’s jump into the Canvas API. The Canvas API is–I like to think it as a scriptable
image tag. As opposed to SVG which is mark up, it’s a tree inside of your HTML. The Canvas
API is more like an image tag that you can create JavaScript that directly scripts and
draws your own custom image. So, the first thing you do to use the Canvas tag is you
drop a simple tag that say’s, “canvas” into your page, give it a width and height and
you give it an ID. Then, your JavaScript grabs that canvas tag, and gets what’s known as
the context. So we get a context which is a drawing surface area. Right here, we say
a 2D context. This is really interesting. It opens up the door to say 3D in the future
so you could possibly do a 3D drawing context. We just saw something called WebGL which landed
in Firefox 3.6 recently, which is a 3D Canvas API based on OpenGL. And that’s really exciting
work. That stuff is not formally a part of HTML 5, but it’s experimental, interesting
things that’s happening out on the edges that started to gain interaction. Once you’ve got
your contexts, you can set the fill style. Here we are saying, make anything that we’re
going to draw, fill it as red. Here we are drawing a rectangle. That’s the X, the Y,
the width and the height. Here we are adding opacity. So we say RGBA, that’s going to make
50% shaded blue rectangle. There we are drawing the rectangle. And there you go. There on
the right, you see the two things that we just drew. You see a red rectangle with the
partially opaque blue rectangle on top. So, I want to show you some demos. A lot of people
ask, how do SVG and Canvas fit together. But what’s interesting is they both fulfill different
use cases. I will touch on that. But I want to show you something really unique, a really
great way that they integrate together. This is the Mozilla Firefox download page. What
you see on this page, you see a map of the world. That map is drawn using SVG, it’s markup.
And then you’ll see occasionally a little yellow boom, dot show up in a specific location.
Those are drawn with Canvas. This page keeps the connection open to the server, so that
it has streaming events, and it records whenever anyone downloads Firefox 3.5, where in the
world are they downloading them. The thing I love about this page is it really shows
when to use either technology, and when it’s appropriate. SVG is great when you’ve got
graphical assets like a map of the world or maps in general or a drawing of a tiger for
example. That’s a really appropriate thing. And you can bring that in. Canvas is really
good when you want to add drawings on top. SVG is good for interactivity. So you can
play these things together in order to use their strengths where appropriate. This is a really cool demo of Canvas. Everyone’s
played Doom. This is not a first person player, it’s a first person gifter, as we walk around.
So this entire thing is drawn with Canvas. And you can’t see, but I’m using my keyboard
to walk around. Again, this is a really good use case that shows Canvas. It doesn’t have
mouse interactivity. Canvas is really good if you want to create games that are keyboard
driven. SVG is good if you want to create interactive mouse driven things. So Canvas
is great for creating a side-scrolling game for example. This is an interesting population demo. Over
here, we see sort of demographic information showing the sort of the number of men and
women in Germany. Now, this right here is SVG. This is normal HTML. This shows them
integrated together. The SVG is right in the page using HTML 5. What’s really cool is what
makes this, and you see as we run over, this is just using JavaScript that adds itself,
just like you saw with the samples on mouse over, to show further information there going
in. What’s interesting that makes this unique is in real time we can change the language
of the image. So if you were to push down a static image, you couldn’t dynamically change
the language of the page and the data. And you also couldn’t do the interactivity. So
this shows one of the strengths of SVG, you can think of them as, as, information-dense
data that you can push down. That, those are really a unique way to use SVG. Another great
example of Canvas
is Bespin. This is a graphical developer’s editor created from Mozilla that allows you
to do all sorts of interesting collaboration, social sharing right within. The whole thing
does all of its drawing through Bespin. A really, really cool use case. And finally,
I want to show you one last demo of these two technologies. This is an atlas that shows all of the results
of the German election. It’s information dense. We can drag it around. We can zoom in. Again,
on the right here is HTML, on the left here is SVG, that’s natively integrated. Of course,
as we go over it, we can update what’s going on in the HTML. We can break this down by
different political parties. So here you go. You get kind of a sense of both technologies.
So a really natural question is when Canvas or SVG? When should you use one or the other?
So SVG is actually what’s known as a retained-mode API. In graphics, you have retained-mode APIs
and immediate-mode APIs. And you need both for different situations. SVG is higher level.
You want to use it when you need import and export, like I said, of graphical assets.
You can load in the Illustrator and the Inkscape. Whenever you want to create easy user interfaces,
because SVG is a retained-mode API, that means there’s a tree of everything that you’ve added
to the screen. So it’s really easy to do hit detection and adding events to things ’cause
you can just add your listeners somewhere in the tree. It’s interactive. It’s good for
medium animation and it gives you a tree of objects. So when should you use Canvas? Well,
Canvas is a lower level and depending on your project, that’s a strength or a weakness.
It’s really good when you don’t need that tree; when you don’t have mouse interaction;
when you have just keyboard interaction like with a game. When you have a tremendous amount
of high animation, especially if it’s not interactive, Canvas is a really good choice
because the tree just gets in your way. You don’t need collision detection. It’s JavaScriptcentric.
It requires some more bookkeeping in order to do what you need to do, but that can be
a strength depending on your application, and it’s really pixel-oriented. So really
depending on your application, you need to ask yourself, what am I trying to do, and
you need to use the right one. If you have something that’s sort of mark-up appointed,
that it needs to be interactive and you end up using it on Canvas, you’re going to rebuild
the lot of infrastructure that SVG gives you and vice versa. If you try to do a thousand
bouncing balls that aren’t interactive or a side-scrolling game with SVG, you’re going
to fail. So choose the right one. We need both. So where is this supported? Well, both
Canvas and SVG have excellence support across all the modern open-source browsers. And something
that’s really cool. I want to briefly touch on over at Google, we’re working with others
in open-source community to create a drop in JavaScript Library called SVG Web that
brings SVG to Internet Explorer so that you can now deploy SVG to close to 100 percent
of the installed base. I want to play a very short video that sort of shows you SVG Web.
It’s one minute. I just want to mention, actually, in just about two weeks, the SVG Open Conference
will be talking more about SVG Web. We’re working with Wikipedia. They’re doing some
very cool SVG work. They’ll also be using SVG Web Toolkit to have these images work
on IE. And so keep this in your radar, some interesting things, we’re doing some interesting
things there. So let’s talk about HTML 5 video. So currently video is complicated and it’s
outside your control. So at this point, I like to say in 2009, video really should be
a part of the browser. You know, multimedia is obviously here to stay on the web. It’s
an integral part. It needs to be a part of the basic web platform at this point. What’s
so cool is that HTML 5 now gives you a video tag that really works very similar to the
image tag. You don’t have to have really complicated objects or plug-ins; video just works. So
let’s look at some example markup and what that looks like. So you have a new video tag
and there you point to your video file and you can add attributes. There we’ve added
the controls attribute, which will cause the browser to give a nice little sort of control
bar with play and stop. You can drop fallback content on the inside if your, if that browser
doesn’t support the video tag. Now, what’s really interesting is, oh, one second. Technical
difficulty. Lights went out in this room. What’s really interesting is the different
browsers that support HTML 5 video support different codecs. So at this time, you generally
need to provide an Ogg [ph] version and what’s called an H.264 version and that’s straightforward.
You just drop in what are called two different source files, and you can give the type. What’s
really cool is that again this stuff is a native part of the browser. To script it is
really straightforward. There we are grabbing the video tag from the page and playing it.
And there’s a whole host of APIs around video. You can have call backs when different events
happen. You can draw on to the video element in order to add your own custom interactivity.
You can do all sorts of cool stuff. And I will show you some of that. This shows right there, you see there’s the
browser control that it added. This is an Ogg video showing a FireFox promotional video
that’s in Ogg using the video tag. Now what’s really cool. as I said, this stuff jumps outside
the box. So as it’s playing, we can use JavaScript to rotate and change what’s going on. That’s
what’s cool when things are a part of the browser. This is a mockup of YouTube using
the video tag, the HTML 5 video tag. Now, what’s cool is right here, this is HTML 5
video. It’s not any other plug-ins. And each of these little thumbnails is the HTML 5 video
tag as well. And what’s cool is they just have some little JavaScript on them that says,
“On mouse over, play,” like you saw; “On mouse out, stop.” So we have some small thumbnails.
And if, and I actually like to crack open this page because I think it’s a great example
of a lot of different HTML 5 things going on. So let’s look at the source of this page.
At the top, we see the HTML 5 doc type. We see the HTML 5 header tag. This actually allows
you to define a header, sort of something at the top of your page. Here we are just
sort of saying what the page is. We’ve got the new HTML 5 nav element. This says that
the following things are navigation and so we fill that out. And then we’ve got the HTML
5 article tag. The article tag says that here is where the real content of the page starts.
So that helps search engines. That can help anyone who wants to script a page and sort
of understand it. So the article tag surrounds where the real content is and then the header,
the nav, that allows you to say, “Oh, that’s the chrome of the page.” Within an article
you can have various sections. So here’s the HTML 5 section tag. So our main video on the
page is one section. Our list of thumbnails is another section. Here we are, we see the
HTML 5 progress tag. That allows you to show as you’re loading something how much is loaded.
Here’s the meter tag. So that helps with the common use case of having little stars to
rate something, which we you see all over the web. So that’s a way to actually do that
with less scripting and less custom code. And let’s find one of these video tags. Here’s
one of our thumbnails. So auto buffer says, “Hey, start loading this in the background
even if we don’t play it, that’s going to make the performance better when you run the
mouse over.” Loop says, “Just keep playing this over and over, and over in a loop.” There
we are providing the source and so on. So this is the, I just like this page, they’re
just using a lot of different HTML 5 elements, it’s a good showcase. And I think they use
the footer tag as well at the bottom. So just like the header tag, the footer tag is where
you can put copyright information, other aspects of things that aren’t part of the article.
So the video tag is well supported, it shows up in Firefox 3.5; it’s in Chrome; it starts
in Safari 4; it’s in Opera. The one thing right now is there’s essentially two codecs.
Let’s put this one known as the Ogg, sort of Vorbis codec. And then there is H264. At
this time the safest thing is just produce both videos in both formats. There’s open
tools that can easily do that, it’s a pretty straight forward process. So let’s look at
the Geolocation. So Geolocation, this is one of the things I’m really excited about. On
this page, you see all sorts of things that are possible once you have Geolocation. You
can do CRM systems, social applications become really, really interesting with the location.
Ads of course, games, people haven’t really tapped into that one yet. That one is going
to be really amazing especially when you combine augmented reality, photos, and so on. Now,
what’s interesting is, most of the HTML 5 Geolocation back ends don’t just use GPS and
don’t just use IP. They also tend to try to grab the Cell ID and the WIFI to bring in
more data. So having all three of these, you only need one really to get location. They
help you kind of trade off different design constraints to get the location. But that
actually happens in the background, you don’t have to be as concerned about that. So what’s
really cool is we now finally have browsers that are location enabled. The latest rev
of the iPhone OS has geolocation, Firefox does and so on. It’s now in enough places
to do some really cool stuff. So let’s look at the API. I love this API. It’s so straight
forward. You get a new object called geolocation that lives in the navigator object. And you
call get current position, and you give it a call back that will receive the location
when it’s ready and you get a position object, and this object is really straightforward.
You can grab the coordinates. There we grab the latitude. We grab the longitude. And then
you can pass that to some method that can do something with that. Here we have a show
location method that might show it on a map for example. Now what’s really cool is there’s
actually lots of other things on here, you can find out, you know, what’s the degree
of reliability of that, sort of what’s the resolution so you could draw a circle, depending
on how well you know the location and so on, but the basic use is really straightforward.
I want to show you a prototype of Google Maps that uses this API. Here at the top, here’s
how we see how it becomes secure. No website obviously should be able to reach your location
unless you give permission. So it says, “Hey, this website wants to show your location.”
You can give permission or not and you can remember it. It thinks a little while and
boom, it figures out where I am and that is where I am, I’m downtown in San Francisco
right now. So where is this supported? It’s in all the browsers. For Safari, it’s on the
iPhone currently but it’s not yet on Safari desktop. Now, let’s look at the app cache
in the database. So Web apps, if we really want to keep them evolving, they really need
to be able to work everywhere. You don’t want to use your web-based word processor or web-based
address book only when you have a network connection. It’s important to be able to use
it on airplanes, when you have a spotty internet connection, perhaps you’re overseas. Maybe
you’re in a dead zone where there’s no WIFI or cellular connection. So when you really
critically need your Web App, it needs to be available. The HTML 5 database and app
cache work together to help provide offline Web access. So before I show the code, I want
to show you a cool demo of both of these together. Here are some old messages, actually, they
were already saved. We can add messages. We can make new notes and delete notes. And then,
if we quit the browser and come back, we will see our latest data. And that is all being
saved into the local database.
So let’s look at this. So the first aspect is what’s known as the application cache.
This is what I like to call, it’s a super browser cache. We can’t depend on the browser
cache to have everything we need for our web application for a number of reasons. One,
things may have timed out and there may not be stuff in there that we need. Maybe the
user never went to some aspect of an application, but you still want to go to it when you’re
offline. So the application cache, think of it as a super browser cache that you control
as the application writer, and it’s really straight forward to use. The first thing is
you create a special file where the first line says cache manifest and then you provide
all of the resources, the HTML, the CSS, the images that you want to take offline. And
here we have all the things for that sticky notes demo you saw. Then, in your HTML on
the body tag, you add a new attribute, you say manifest equals and then you point to
your cache manifest. The one other thing that’s not shown here is on your web server, you
make sure to have the cache manifest have a certain mind type that’s unique, that just,
that’s for this offline app cache manifest. And that’s it, that’s really straight forward.
At that point, when the browser first sees this, it will take those resources, bring
them locally, and then automatically in the background, periodically see if they’ve updated
to pull down the fresh version. And now they are available for the user to actually see
your user interface because the files are available locally. So let’s look at the database.
That’s the other major aspect of the HTML 5 offline abilities. What’s really cool is,
this is a real relational database so you can do some cool stuff with it. To use, the
first thing is you open a database. So here we see, you give a database a name, you give
it a version so that you can know what version you’re working with if you need to migrate
data. You give it a title. Here we say, “Example database.” This would be shown to a user if,
in Safari 4 for example, a user can go and pull up a list of all their databases through
the preferences or through the developer tools. And then, you provide an estimated size at
the very beginning of how big your database is, and here we say 200K. When that happens
by the way, the first time, a user will be prompted, do you want to allow this website
to store up to 200K of data and they’ll give permission or not. Then, let’s look at an
example sort of save-me method. Here we are, we’re taking, sort of, everything we need
to save in one of these nodes. So we take an ID, some texts, a time stamp of when it
was made, where it is on the screen, and the z-index of how it’s stacked. So the first
thing is, once you’ve opened your database, you get a database object, you need to do
everything as a transaction. And you call a db dot transaction, and you give it a call
back function that will be called when the transaction is ready to go. The reason you
need to do this is because the web is a very unforgiving environment. Users could quit
your application right in the middle. They could crash their browser. This isn’t–this
is a tougher environment than a traditional desktop application. If you put everything
into a transaction, you’re already set up to make things more reliable. Once you’re
inside the transaction, then you can actually execute SQL by calling the execute SQL method,
and you provide normal SQL. Here we are, we are saying insert into a table called WebKitStickyNotes
we made. There’s the columns, and then we provide the values. One of the–you provide
all your values where you want them to plug-in, you put a question mark, and then you provide
an array that will fill in any of the new values, and there we go. One of the other
things I should mention is not only are the transactions asynchronous in order to help
in a more unforgiving environment, it also helps performance. It means that the browser
can execute the sequel away from the user interface thread to keep things from locking
up, and really give a better experience. And this one is in all the modern open-source
browsers. It’s currently only on Opera mobiles, not the desktop edition yet. Now, Web Workers–so,
sort of, using all this JavaScript, it’s kind of a double-edged sword, right? We can do
more but that also means we can end up not writing apps great that end up, sort of, freezing
the browser, causing it to run slowly. If you have a lot of JavaScript,JavaScript runs
in the same thread as the user interface of the browser. So as it’s sitting there running,
the browser won’t respond to the user clicking around or if they want to go to another tab.
So as things get more powerful, we can end up hosing the browser. So what’s really cool
is HTML 5 gives you something called Web Workers, and this lets you run JavaScript in the background
in such a way that it won’t hose or kill the browser. I want to show you an example that
really illustrates this. Nothing really shows us more than trying to find prime numbers.
The field of cryptography is really based on the fact that prime numbers are hard and
computationally intensive. I want to show a sample that tries to find prime numbers
using traditional JavaScript without Web Workers. We click “Go”, and you’ll see that the browser
is totally locked up. As a matter of fact, it doesn’t even report a prime number yet,
it’s still working. Things are bad. And I literally, have to kill the browser. That’s
bad. We don’t want to do that. Let’s look at good primes; this is using the HTML 5 Web
Workers API. We click “Go” and we see primes coming in, things are still responsive, we
can still interact with the browser, and it’s very fast and responsive. Very cool! Now,
all these pieces come together, again, that’s what’s so cool. You’re going to see these
things don’t just live in a box. You’re going to–I want to show a really cool sample that
brings together HTML 5 video, and the Canvas tag, and Web Workers to do something that
literally, a year ago, if you’d ask me, “Would people do this on the web?” I’d say, “You’re
crazy.” But someone did it on the web and it works well. Okay. So what you’re looking
at here, is I’m going to play some video in JavaScript running on a Web Worker, is going
to get the pixels from the HTML 5 video; process where people are moving; and then use the
Canvas tag to draw bounding boxes over them. So you’re going to see someone walk across.
And you see the green and red, that is doing bounding box calculations. It’s figuring out
where people are. I just think that’s amazing. As someone moves, it’s been motion-tracking.
And of course, it could stay responsive as the video comes through by using Web Workers.
All right, so now that you’ve seen this being used, let’s actually look at using Web Workers
in your code. So the first thing is, you have to put all of your Workers into a separate
file, and you ìinstantiateî a new Worker like this. The thing to know about Workers
is they need to be siloed from the rest of your JavaScript because they will run in a
different context. They can’t access the screen. So they can just do work. They can–they actually
can do XML HTTP request calls. They can access the database, and you actually pass the data
back and forth for them to work with, and they hand you the data back. And the way you
do that is you set on message events. So over on the browser side, you see worker.onmessage
and you give a function that will get called when the worker talks back to you. And here
we are grabbing the event and I’ll put in the data. You could imagine taking that data,
such as, from that video tracking, and that data may be, here are the coordinates of where
the person is. And you could use–and then use the Canvas tag to draw on the video. Over
on the Worker side, you just provide JavaScript. Here we are, we have a find primes method.
We would plug a prime number algorithm in here. And once we found a prime number, we’re
going to send the message over to the JavaScript side, and post message is a magic method that
lives, that allows you to send something over to the browser. So it’s really straightforward.
You just sort of toss these events back and forth. And this one is well-supported as well
on Opera, and it’s only on the mobile edition, but Web Workers are already across Chrome,
Firefox, and Safari. So that brings us to the end of our training today. This is really
just–just the start. Like I said, HTML 5 has all sorts of interesting things. You got
a taste of that with seeing some of the mark-up of the YouTube prototype. And so I encourage
you to begin working with these things, create really cool demos and sites. And thank you
so much for your time.

Comments

  1. Post
    Author
    Nick Cochran

    @domainholdings probably because the spec changes a lot and there's no point in updating the validator if HTML5 development is priority.

  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
    In_Correct

    YES!! I LOVE HTML 5 and I am actually viewing this video in HTML 5!! 😀 But this IS the first time…I have opted into the HTML 5 trial countless times, and I don't know why I keep having to opt in… I want my YouTube preferences to STAY in HTML5 …and hopefully YouTube and everything else will phase out Flash Plug In.

  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
    yoyoretro

    thanks for the transcriptions 🙂 (english is not my native language so this is very helpful!) and great video – cheers!

  10. Post
    Author
    Logan Snyder

    @GoogleDevelopers I don't know if you still make videos because this video was made in 2009 and it is currently 2011 but, I made my site using just HTML. Does this mean I have to completly recode my site with HTML5? Please reply! 🙂

  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
    Treblaine

    @ROBLOXingHabbo HTML5 is buggy?!?

    Nothing compared to flash, I've just switched to HTML5 trial for youtube, if only every video was in this format.

  14. Post
    Author
  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
  18. Post
    Author
  19. Post
    Author
  20. Post
    Author
    Bluecewe

    Its 2012 now; though HTML5, CSS3 and WebGL still lack wide-spread adoption, with key security flaws and performance gaps.

    I'm totally for HTML5 and all it's supporting standards and technologies, but right now it's safer and easier to just make an RIA in Flash, as if you tried to do so in HTML5, you'd end up having to include Flash at some point as a fallback, or even for behind the scenes processing such as socket transfer. Stage3D also appears more stable and compatible than WebGL currently.

  21. Post
    Author
    Zeljko Banovic

    Lets talk frankly . HTML5 is sh*t promoted by good marketing from big IT forces. Comon. I am a Flash and HTML5 developer. And as I can say HTML5 can do the same as Flash but whit 4 times more coding. In big IT jobs every second counts.

  22. Post
    Author
  23. Post
    Author
    DxBlack

    @gazuraz Ah, but flash has a program plopped down on top if it to ALLOW for quick development…HTML 5 is still IN development. When it's done you can bet your bacon that there are going to be tons of applications by big companies that cut out the time consumption and allow for speedy development.

  24. Post
    Author
    kelekokerupuk

    Your Video Is Very Useful Sharing Brad Neuberg has put together an educational Introduction to HTML 5 video that goes over many of the major aspects of this new standard, including:

  25. Post
    Author
  26. Post
    Author
    Zeljko Banovic

    @darkwiz666 Yes, that is correct, but it still needs strict OOP paradigm , because re usability is up to 10 times bigger and allows creating more stable MVC structures. My honest believe is "All mayor browser companies must merge there effort to create a new Language. THE whole HTMl-JavaScript-Plugin concept is OBSOLETE! World needs new solution!

  27. Post
    Author
    Zaku186

    Uh so why aren't most of the Youtube vids i used to be able to watch not working now? it just says that my browser doesn't support HTML5. i even have the newest firefox

  28. Post
    Author
    minecraftrules9000

    I FUCKING HATE HTML5, THE ONLY DIFFERENCE IT MAKES IS MAKING STUFF SLOWER AND FUCKING UP THE YOUTUBE DESIGN, DO NOT GET IT!!!!

  29. Post
    Author
  30. Post
    Author
  31. Post
    Author
  32. Post
    Author
    Brady2k10

    just finished learning html 4 and now i hear bout this… i aint no pro web designer but i used to do some html stuff with a bit of css but now i really wanna learn as much as i can, but its hard they keep changing shit around, like i remember in html you could

    <p align="center" not sure if they still use that, but then they changed that and now they are fucking changing it again its hard to learn this shit along with css, javascript and other codes

  33. Post
    Author
  34. Post
    Author
  35. Post
    Author
    Mandragoras

    I can't understand why one of my videos loads as HTML5 even though I have HTML5 disabled. All other videos load as flash. Is there an option that makes it force load as HTML5? Unfortunately Firefox does not support H.264 so HTML5 H.264 videos are not available for Firefox.

  36. Post
    Author
  37. Post
    Author
    xealit

    currently the flash lags horribly on my Ubuntu (..well maybe rebooting computer would help, but who does this kind of things with Ubuntu?) And HTML5 looks like an awesome among awesomeness!

  38. Post
    Author
  39. Post
    Author
  40. Post
    Author
  41. Post
    Author
  42. Post
    Author
  43. Post
    Author
  44. Post
    Author
    FermiToll

    Some days ago I noted very annoyed that many videos didn’t even started loading until I find out it was that stupid html5 trial, I choose to get out of the trial and return to flash and all worked again. And that’s the future?! I hope not or they fix it to work at least as good as flash.

  45. Post
    Author
  46. Post
    Author
  47. Post
    Author
  48. Post
    Author
  49. Post
    Author
  50. Post
    Author
  51. Post
    Author
    Yoannaid

    HTML5 isn't shit. its far supperior to Adobe flash just newer and as with all other new technology, it takes time to master. It has a much lower CPU/GPU usage if coded right for videos. The loading time has to do with your SHITTY internet.

  52. Post
    Author
  53. Post
    Author
  54. Post
    Author
  55. Post
    Author
  56. Post
    Author
    Cumboosuts

    Oh really. Because you could have achieved a YouTube HTML 5 player? What would that make your IQ then? A stupid goldfish? Oh no, that would be exaggerating… If you have the nerve to call a programmer stupid, at least consider making your comment longer and more intelligible, and capitalize the first letter of the sentence. I'm 11 and I can write a better comment than that, and I, in fact, am. What does that make me, a stupid turtle? Sorry, goldfish, for comparing you with this ignorant scum.

  57. Post
    Author
  58. Post
    Author
    Ernest Watson

    I really dont see how this video could have any dislikes….i mean what would be the reason? You dont like HTML5? freaking turd minded-trolls.

  59. Post
    Author
  60. Post
    Author
    Andrew Wade

    Thanks for putting me in the HTML5 trial WITHOUT ASKING.
    It's broken in firefox and the only way to fix it is to use Chrome.
    Stick it up your arse you monopolistic scum!

  61. Post
    Author
  62. Post
    Author
    JohnHardThomasMisterGame FourthEarlOfTheSandwich

    YouTube needs to fix its shit before forcing their excrement all over their users.

  63. Post
    Author
  64. Post
    Author
  65. Post
    Author
    zone8612

    can anyone tell me why my box has thicker corners on the bottom and right side, and thinner corners on the top and left side?

  66. Post
    Author
    dawesi

    HTML5 isn't a replacement for flash ATM, period.

    As for HTML5 audio and video, it's still a far way off being what flash was 5 years ago, let alone today.

    dude, it's not loading time, it's the half-baked implementation. Ask big business who they're backing… FLASH. It works, HTML5 video 'almost' works. Things are changing, but real developers have to rely on solid solutions, HTML5 in 2013 will be a lot bigger, but it's not even fully implemented in any browser but IE10!

  67. Post
    Author
    Carlos Enrique Leal Guzman

    Este es un video viejito, más sin embargo bastante informativo para nosotros los desarrolladores

  68. Post
    Author
    icysuspect

    Why is GoogleDevelopers uploading higher-quality videos to Vimeo? Anyone else catch that in the description? LOL…

  69. Post
    Author
  70. Post
    Author
  71. Post
    Author
  72. Post
    Author
  73. Post
    Author
    Arabbitatemyhat

    Are you stupid its your internet that sucks not html5 and people only get faster loading times because they have better internet and better pc's than your cheap ass pc.

  74. Post
    Author
  75. Post
    Author
  76. Post
    Author
  77. Post
    Author
    Nafaa Boutefer

    Why people still abusing IE, yes microsoft has a slow process of improving his browser, but it's not so bad to the extent that every body says, stop using IE, stop using IE, as if IE consisting the major problem of the Internet world. I actually use chrome, because I find myself comfortable with it. But I never say that IE is so bad especially IE10, if you don't want to use it, so don't, but keep your mouth closed please.

  78. Post
    Author
    DaVince21

    Sure, but there is no noticeable difference between the file size of HTML5-ready video and the video played back in Flash-based solutions. So if you couldn't play HTML5 video with that money, you couldn't play back any *other* video, either.

  79. Post
    Author
    Rancid H

    @1988Nafaa the reason people say that about IE is because its a sort of extension of Microsoft Explorer, therefore the boundaries of it are much different from say Firefox or chrome, making it far more powerful for a Trained user but very dangerous for a novice user, just imagine IE on a machine that has Java natively, or even flash…. Exploits a plenty..

  80. Post
    Author
  81. Post
    Author
    Parodist

    Man this is a long video. Dude. . .why all the extra unnecessary padding, I didn't click on this video for all that. Other videos introducing html 5 are like 5 minutes long

  82. Post
    Author
    Masticina Akicta

    I like HTML5, well the code, it is very clean. HTML4 and even XHTML had quite a bit of clutter going on. But HTML5 forces much of that clutter out of the code. And into the CSS for instance 😉

    Making easier to read code. And html5 video is awesome, a shame that different browsers support different formats but oh well.

  83. Post
    Author
    CH1CK3NxSALAD

    I'm so pissed off… I am just learning html 4 and now I come to find everything that I'm learning is obsolete because there's already a 5. Screw me screw my life.

  84. Post
    Author
    PanikGrafik

    You're wrong. Flash is far superior to Html5 in forms of animation. Flash actually lowers the CPU/GPU usage. Google it. HTML5 animation requires each and every element to be redrawn EVERY time it changes it's location – instead of simply being moved as Flash has done for years and years. Stop being an idiot.

  85. Post
    Author
  86. Post
    Author
    WellHowAboutThat

    the gpu redraws everything when flash images are altered. just a quick fyi. flash isn't magic, contrary to your belief.

  87. Post
    Author
  88. Post
    Author
    Anime Reviews

    IE10 supports everything perfectly nowadays. It even supports things that Firefox hasn't implemented yet.

  89. Post
    Author
  90. Post
    Author
  91. Post
    Author
  92. Post
    Author
  93. Post
    Author
  94. Post
    Author
  95. Post
    Author
  96. Post
    Author
  97. Post
    Author
  98. Post
    Author
  99. Post
    Author
    3m0_Wr3ck

    Although the web and HTML5 have grown since this intro video, it's simplicity is in some ways clearer than today's cluttered and over saturated library based web. Very useful, thanks:)
    BTW found the slides for this: http://www.slideshare.net/jobfan/google-html5-tutorial

  100. Post
    Author
    Spim45

    I found a website that might be useful: https://www.w3schools.com/
    the website teaches HTML, HTML5, CSS, Java, Javascript, Python, XML, and many more.

Leave a Reply

Your email address will not be published. Required fields are marked *