Learn About HTML5 and the Future of the Web

Learn About HTML5 and the Future of the Web

>>NEUBERG: Today, I’m going to talk about
HTML5, but kind of in the larger sense. It’s not going to just be strictly the HTML5, those
standard; we’re talking about CSS3, will be talking about some of the new JavaScripts,
APIs; there’ll be a little smidgen of WebGL and SVG, just to kind of throw things in.
And the structure of this presentation is there’s a lot going on, and I wanted to kind
of give a sense of a lot of the different things that are happening. In this slide deck,
it’s actually built using HTML5 and CSS3, and a lot of it–there’ll be interactive portions
in the slide that will show you in effect some of these things. And thee slides are
actually have been created collaboratively by an open-source community. So, it’s been
an ongoing open-source project to kind of create this educational slide deck. So, let’s
get started. Where do widgets come from? So in the ’90s, there was sort of a lot of progress
on the web with a lot of exciting things. And then the last 10 years, things kind of
slow down for a little bit. Big thing and sort of–2001–2002, was throw away tables,
use CSS; people embrace that. And in 2005, Ajax started taking off. the web kind of–sort
of coming back to life. The last few years, has been kind of the age of JavaScript toolkits.
Things like jQuery, prototype, Dojo, script.aculo.us. Who here uses jQuery, for example? It has
really take in world by storm and people really using that. And a lot of those were attempts
to kind of make the web an easier place to develop for and kind of–sort of iron over
its issues. And what’s really exciting is starting in about 2009; we’re starting to
really see the browsers themselves catch backup. So the development of HTML5, browsers are
actually starting to implement things like SVG. We’re seeing new experiments in CSS3
and WebGL, so it’s an exciting time. It’s a great time to be a web developer. So the
next five years is going to be very exciting. And like I said, strictly, we’re going to
be talking about things that are a little larger than just the HTML5 standard. We’ll
be talking about CSS, which you need to get your job done, especially CSS3. And a lot
of this new JavaScript APIs that come along in HTML5, like geolocation. So let’s start
with the JavaScript APIs. One of the things that is coming along is everyone uses sort
of “getElementById” and “getElementByTagname.” But we–a new method is coming along called
“getElementsByClassName.” And jQuery, again, really showed how powerful it is when you
can use CSS selectors in order to grab things from your page. So now, you could add the
class name business cards or events and get all of the elements on the page with this
new method. But you can go beyond this, a new method is coming along called “querySelectorAll.”
And, again, a sort of like what jQuery gives you. And you can put an arbitrary CSS selector
in there. So right here, for example, we’re saying, I’ve got an unordered list. Grab me
each of the list items. And then the nth-child, just give me the odd ones. So, you might imagine
using that to make a strapping pattern on a table for example or in a list. Here, we
have another one “querySelectorAll.” We’re saying, give me the table that has the class
name test, then give me its immediate table row, and then it’s immediate, all of the table
elements. So, that one line will return you back a lot of things that in the old style
of having to use the document object model would have taken a lot of code. So, another
cool thing coming along is something called web storage. And let me show you the demo
first. So in this form–this form is being tied in the local storage. It’s storing little
bits of data in your browser. If we restart, you saw that it stayed there. And if I restarted
the browser or the browser crashed it would still be there. So, the first thing you get
is you get a new thing called local storage, “window.localStorage.” So, right here we say,
add an event listener when you’ve taken your hands off the keyboard in the text area. The
localStorage object is just like a hash table. You put key value pairs into it. So there
we are, we use value and we set it to the value of the text area. And on the next line
localStorage timestamp–there we are giving a timestamp. So, it was really easy to use
and it just persists. In getting the value it’s just a straightforward, “window.localStorage”,
give me my value. Now, when simple key value pair isn’t enough, another part of HTML5 is
a real SQL database. Now, gears had this, and it was really fun–offline Gmail, for
example, uses the SQL storage inside of gears. And the HTML5 SQL storage is very similar,
it was inspired by it. And once you have a real SQL engine on the client side, you can
do all sorts of interesting things. Like sorting on a complex table that has a lot of data
or searching along different things. Let’s look at the demo first. This is like a simple
little to do list. Well, throw me some to do lists like some items, like, you know,
shave yaks, learn HTML5. Anyone else have a task? It doesn’t have to make any sense.
>>More pizza.>>NEUBERG: More pizza, good one. One more.
More chairs. More beer, we’ll have that one too. So the cool thing is in Safari and in
Chrome, you can actually go into a new view where you can actually see all of your–what’s
stored. And you can actually give SQL expressions against what’s in your data which is really
powerful. And here is some code that shows how to use this. The first thing you do is
you open your database and you give your database a name and you give it a version. Why do you
think you want a version of these client-side databases? Synchronization, uh-huh, and migration,
people may go out of date. See, I might want to push some JavaScript that would update
a Schema, for example. When you open your database, it’s on it. The next thing you want
to do is you want to do everything inside of a transaction. And HTML5 had you do all
your calls in a database inside of a transaction because the web is a very unforgiving environment
and it wants to make sure that all of your calls went through or they didn’t in a solid
way. You know, browsers crash, users leave the page. So, the first thing you do, is you
say, give me your transaction, “tx”, and once you have that you could execute your SQL.
And there we are executing some SQL there, select star from our test table. And then
you can provide arguments which we don’t have. And actually results come back in another
callback, a successCallback and an errorCallback. Why do you think you would want to have your
results come back asynchronously? What’s that?>>Non-blocking.
>>NEUBERG: Exactly. So it’s non-blocking. What if you’re querying a monstrous SQL table,
the browser will freeze. So if that doesn’t happen, all results come back asynchronously
so it wouldn’t be blocking the browser. So these different kinds of storage go hand-in-hand
with an application cache so you can take your browsers offline. To use this, the first
thing is you add a new attribute to your HTML tag, “manifest=”, and then you give it a file
name, and in that file name, you provide a pointer to a file. And we have an example
file right down here. The first line of this file–you always say the word “cache-manifest.”
Another important thing is this file needs to be served up with a special mind type.
So you have to configure your server. If you’re running into weird stuff, that’s an important
little thing to look for. You can give all sorts of options in here, we’re going to keep
it simple. You can say what you want to cache. When you say “cache:” and then it’ll provide
a list of resources. We’re grabbing some ping files, some JavaScripts, some CSS. You can
actually give other kinds of things; you can kind of give whitelists of things that you
don’t want to cache. Maybe when you’re online, you had a server-side PHP script, but you
obviously want to do something else when you’re offline. Two important things, one is that,
the way that the browser works with this is the browser grabs the cache manifest file
and it sees if anything–it sees if the file itself ever changed. If the file itself is
changed, it goes and downloads each of the files inside of it. And it only succeeds if
every single file successfully is downloaded. So that you’re not in a weird in between state,
right? So you don’t have half of what you need offline. So it’s all works or all fails.
So the one thing to note is that the browser doesn’t check to see whether the individual
files have changed, it only looks if the manifest file has changed. So, as a trick, if you want
to version your resources, you can just give a comment, like version one, and as soon as
you change that to, like, version two, the file signature will change and the browser
goes, “oh, okay, I need to download more resources.” There’s a whole slew of events that you can
subscribe to in order to give a nice user interface. So, you see up there “addEventListener(‘checking'”
so that you can provide some UI. And there’s a whole bunch of these events that you can
subscribe to. Web Workers. Web Workers allow you to run code that won’t that won’t block
the browser. They’re not threads but they kind of act like them. Let me show you a demo
first. So right here we have sort of Google Maps, and let’s say, we want to find routes
between a bunch of different cities. Something that’s really computationally intensive. If
we don’t use workers and we try to drag–notice how it froze up there. I’m running my mouse;
it doesn’t do anything–bad user experience. If we use workers, while it’s thinking, the
browser can stay responsive. So, why would you want that? Well, there are demos showing,
you know, workers doing real-time image analysis of video in order to do, sort of tracking,
real time OCR, all sorts of interesting things moving to the client side to take advantage
of these machines. And let’s look at some code using these. The first thing is you get
a new object called worker. So, you say, new worker, and you put the JavaScript that you
want to run inside that worker in another file. So, we say, “extra_work.js,” and workers
communicate back with the page that called them by using messaging, right. So you, you
know, you send it a message, it sends you back a message. By the way, that’s one of
the patterns, if you look to an HTML5 in a lot of the JavaScript APIs, they choose asynchronous
type calling most of the time. And they choose kind of a message style most of the time,
if you’re looking for a common pattern. So, once we make our worker, in order to get results
back, we say “worker.onmessage.” You give it a function that will get called and here
we are, we say, “{ alert(event.data); }.” That would be the data that the worker has
sent me, right. You could imagine the workers calculating prime numbers for example. Inside
of the “extra_work.js” file, you could imagine we’re doing some work. You have a new magic
method called post message. And you can post message with some data. It could be arbitrary
JavaScript, so JavaScript can get sent back and forth like JSON. I want to briefly talk
about notifications. This is actually not formally a part of HTML5. It’s an experimental
part of Chrome. It’s one of the things being proposed. And it allows you to do a little
pop-up style, tossed messages. So at first you have to give a site permission, we don’t
want sites being all annoying, so we’re allowing. And… [PAUSE] Yeah, there we go. So we have
nice little notification that appeared. To use this, again, lets look at some sample
code. The first thing, you get a new object called “window.webkitNotifications.” You want
to make sure that object is there. And you call “checkPermission” and “checkPermission”
will return zero if it’s been allowed permission. It’s actually constant, if the user has allowed
it before. If they have, we create a notification. We say, “webkitNotifications.createNotification.”
And you’ll see up here, we can pass a picture in. So we pass a URL to an image. We can pass
a title in. We can pass text and so on. You can get pretty fancy. And then finally, if
the users never given it, we say “webkitNotifications.requestPermission ()” and that will do that little gold bar
you saw at the top. You know, asking, “Hey, can the site do this?” Are there any quick
questions before we continue? So the question is what happens to the method get on us by
name? Most people didn’t about this, there’s an older method where you can enumerate things
by name. It’s an older method. It’s predated even having IDs on elements. It doesn’t always
were consistently across everything on a page. It’s essentially deprecated. So it’s dangerous
to use unless you really know what you’re doing, maybe a weird JavaScript hacker.
>>How do we get the collections for radio boxes and check boxes?
>>NEUBERG: So you would give a query–how do you get collections for radio boxes and
check boxes? One of the things you’ll see when I go into see CSS3 is you can get pretty
fancy with your CSS selectors. So you could say, “Give me now the input of a check.” And
so you would pass into “querySelectorAll” to get all the check radio buttons. So let’s
move on unfortunately, because we have a fair amount of material left. One of the things
about HTML5 is drag and drop. And, again, we could spend the whole talk just talking
about drag and drop. There’s a lot of stuff in here. But just to show you some sample
code and some demos, the first thing you do is you say, “document.addEventListener” and
you subscribe to the “dragstart” event. Tell me when dragging has started. Inside of there,
you get an event object with a special data transfer member, so you can say, “event.dataTransfer.setData”
so you could override the data that’s actually being, you know, you could clean it up, you
could do some special things to it, and then you can actually do what’s called an effect.
So you could say–actually copy the data rather than have a reference. We’re actually going
to control how things are shown to the user. And there’s a lot of different options, a
lot of configuration. It’s a little bit of a hard API to use unfortunately but it’s fairly
powerful. As an example, I’m dragging this image. If I drop it into the drop area, over
here you see what some code would get. You can get your results and essentially different
kinds of flavors. So here we are grabbing a URI list and here we are grabbing a URL
which is just the reference to the image. Here I am selecting some text and I’m dragging
out over here. And in this, we’re making the original text so it’s actually–it’s exactly
the same text that was dragged. But you could get fancy. Let’s say I grab this text and
drag it. What is on the–but drag and drop is different. So we’ve added some HTML into
it. I know people can see that so it’s a strong overwritten consent and strong. So basically,
you can kind of hook in a different levels and do some very powerful things. The last
of our JavaScript APIs for now is geolocation. This is one of my favorite ones because I
find it really easy to use and I think that it opens up something that you couldn’t do
on the web before. Let’s start with the demo. So we have a Google Map and I drop the little
location here showing us on Market Street. To do that, the first thing is you look for
the “navigator.geolocation” object. If it’s there, there’s a great method, it’s a simple
method, “getCurrentPosition” which you give it a callback and you get back a position
object and it’s really straightforward. Once you have that, you can grab the latitude and
the longitude and you could pass those two numbers into an API for maps because those
generally take those as an input. You could pass that into a social networking App. You
could do all sorts of interesting things. One thing to mention is the first time you
do this the browser will prompt the user saying, “Hey, this site wants to know your position.
Do you give them permission?” Because obviously, again, we want the user to be in control of
this; so the question is the fact that you’re being asked for geolocation that are built
in the browser. Yes, that’s totally built into the browser. And, you know, actually,
the iPhone will prompt you if a website uses it. Different–Chrome or Firefox will prompt
you as well because we don’t want sites being able to know your location without your permission.
So that rounds out the JavaScript APIs. Obviously, a lot of really cool new things, being able
to build the desktop experience with things like notifications, drag and drop; client-side
storage let’s you actually get better performance by actually using these computers. I like
to say the old web treated our machines like they are Commodore 64s. We’ve got these amazing
machines now with so much storage and power. And HTML5 really uses the CPU on these machines
with things like workers. Really uses the hard drives on these things. I mean, we have
100 of gigabytes and the web has not been able to use this with a user’s permission.
So really expanding what the client site can do. Let’s look at some of the new tags that
come along. It’s like Christmas time. There’s all these nice new tags. Again, I’m just going
to briefly touch on them, but you get some new semantic tags. One of them is a header
that just says, “Hey, this is a header at the top of my page.” Age group lets you have
different little portions of that header. You’ve got “nav” which is what it sounds like.
It says, “Hey, this is a navigation section.” We’ve got a section element which just says–when
you look at a page, you can say, “Hey, these are different sections, right?” So now you
can tell the browser, “Hey, this is the section where my ads are. This is the section where
my articles are and so on.” There’s an article tag. And then inside of these, you can actually
group these. So an article could itself have a header and a footer. A side is actually
for things that are not part of the normal flow. So you’ve never read an article and
you seem like a little blow out, right, with a quote, that would be in the side. Or maybe
you’re reading an article on scientific American and there’s an info graphic; that would be
in a side. What’s nice about these–these don’t give you necessarily anything that you
couldn’t do by setting a CSS class name. But the nice thing is it keeps your markup, it’s
more semantic. It helps search engines. If you want your page to be screen scraped especially
when we get to micro data, which I’ll talk about, you are helping other machines understand
your page in a better way and you’re also making your page more maintainable. One of
the things an HTML5, one of the big philosophies is to codify what people are already doing.
One of the ideas is called, you know, pave the cow paths. There’s a famous story of a
cow. They didn’t know where they wanted to make the paths so they made everything grass.
And they saw where the grass was, you know, was sort of lower because everyone walk there
and then that’s why they made the sidewalks. That’s especially true with things like this
link relations. These have all existed. HTML5 just says, “Hey, it’s okay to use them. You
don’t have to feel guilty about using them.” So I’m not going to explain them all, but
like “rel=icon” gives you a little “favicon,” you know, over in the browser bar. Pingback
is interesting. Pingback–a page can say, “Here’s a URL if another page links to me,
whether it’s a comment. Ping this URL and tell me,” and then that page can maintain
all of the links that point in. WordPress, for example, does this. Prefetch, I think
Firefox innovated this one. Prefetch says, tells the browser, “Hey, it might be a really
good idea to grab this page or these collection of pages because it will improve the user
performance, because they’ll probably click on IT.” Son on things like archives points
to archives and so on. Microdata, I’m really excited about this one. Microdata gives you
a way to sprinkle a little bit of extra information in your page or metadata to help, again, search
engines, third party tools. And the thing I love about it is it doesn’t try to boil
the ocean, it’s not trying to be, you know, artificial intelligence markup language. And
it’s learning from a lot of the lessons of the last 15 years from things like micro formats,
which showed, hey, you want to mix your data into your HTML because people are actually
going to do things there, you want to keep it simple. It learned some of the lessons
you’ve already have, you know, a little bit of a sophisticated but it doesn’t go overboard.
And–first of all, I’ll give the benefit. Right now, Google will actually see some microdata
markups for like events, reviews in order to give better search results. So down here,
there’s a rich snippets testing tool. We’re giving like a URL to let’s say, like a pizza
shop. And down here you’ll see a result where it knows, for example, the name of the pizza
place, the location. It has ratings because there were some microdata that said, “Hey,
here’s how many stars that was given and so on.” Let’s quickly look our example, microdata.
The first thing is that you should know is, again, you mix this in your HTML. Let’s say
we have an event, you would mix it into the HTML, and generally it should be things that
are visible to the user. Like a review, or in this case, information about a band. The
first thing you do is you say, “itemtype” and you give the URL that’s arbitrary, that
just says, that points to your–whatever you’re–it doesn’t actually point to anything it can.
But it can be, you know, anything that starts with this “itemtype” will be event or will
in events, or will be a resume. And then you give “itemscope”, so you say, this is where
my band information starts. This is where my event information starts. And then you
give each of the item properties. So, there, we say, “itemprop=’name'”. So we’re giving
the name of one of the members of the band, Neil. We’re giving “itemprop=’band'”. The
name is Four Parts Water and then we’re giving the nationality for example of the band, which
is British. So, really straightforward and you can–there’s already a number of these
sorts of very simple markups that you can annotate your pages with. So, ARIA is actually
again, not necessarily part of HTML file but some thing is finally arriving. How many of
you use like jQuery UI or Dojo UI? Right, you might use these JavaScript widgets that
give you a “tree” or give you sort of like a data control, things like that. One problem
with those is screen readers can’t work with it. So ARIA, which I’m really impressed by,
is a way to kind of overlay a little bit of extra information. So screen readers know
that, that jQuery UI component that was a “tree”–is a “tree,” right? And most of these
widgets produce HTML. So they just annotate the HTML that they produce which the screen
readers can see. Which accessibility tool can see? So, here’s an example, here’s let’s
say, some of the HTML of a “tree.” We have an unordered list, and we say, “role=tree”.
So were saying, this one in unordered list, it’s not an unordered list. It’s actually
a tree control. And then we can give special thing “aria-labelledby” which gives a nice
label to maybe present or say, or showed magnified so that a user can know what it is. And then
on each of the little list items we give the “role”. So we’re saying that first list item,
that’s actually a tree item. And we’re seeing “aria-expanded=’true'”. So, you could imagine
that if your JavaScript widgets says, “aria-expanded=’false'” the screen reader will know that and be able
to interact with it. And then, here we have a group. So we say, “role=group” we give them
a tree items. So it’s a pretty straightforward standard. It gives you a lot of bang for the
buck. Again, but the basic idea is you give the role of things and you kind of say, what
things are a little bit to help the screen readers. Another part of HTML which is just
arriving, which I think is going really make an impact, is this new form field types. So,
right here for example, here’s a range. We didn’t have to make that with JavaScripts.
We just have a new input type, “type=’range.'” We give the minimum, the maximum and the defaults
and the browser gave it to us. There’s a nice new attribute on input controls called “autofocus”
which just says, “Hey, when the page loads, give that field “autofocus””. Probably like,
90% of the JavaScript out there is to do that. So, a lot of HTML5 is, again, pave the cow
paths, get things out of JavaScript that don’t really belong there, get them back in the
browser so we can have a more reliable web and continue moving forward. Another simple
one, we have a new attribute called “placeholder”. So here I’ve input “side=text” at text field
and “placeholder” will give you some nice fancy little grayed out text when I go inside.
Little things, but things like this if you are a web developer is a pain in the butt,
you have to do it yourself. Now, you get an attribute to do it. Like I said there’s all
sorts of other cool input controls that are not widely implemented yet. Opera gets a gold
star. They actually implement most of them I think. Things like menu for a menu, progress
bar. So you can show progress, time and so what. Those are going to be nice if they start
showing up. So I think HTML5 video has gotten a lot of press lately. Let’s start with audio.
Let me show you the demos first. Let’s start with the French’s national anthem. And of
course, this control right here is all given by the browser and JavaScript can interact
with it. Audio, it’s pretty simple, we seen audio tag. Control just says, “Hey, let the
browser to give me controls.” You could not do that and do your own custom funky controls
if you want to. And, of course, we get a JavaScript API, so there we are. We grab the audio tag
and we said “.muted=’false'” which mutes it. Again, there’s a whole bunch of options here.
You can nest multiple content types and so on. Let’s look at the video. So, again, when I hover over I get–the browser
gives me a control, and this is really a part of the browser. So we’re adding CSS reflection.
That’s one of the interesting things. It gets this out of a black box, and you can actually
start applying. Think of all–that’s what’s so cool about HTML5, they’re like little tools,
like many little pieces that you can hook together in interesting ways. You can, you
know, style SVG with CSS3. So, you can do vector graphics that uses cascading style
sheets. You can add animations on top of HTML5 video. So there’s this cool interlocking pieces,
they get us outside of a little box on the page. And again, very similar of the audio
tag, we have a video tag. When we say auto-play which means, “Hey, start this when page is,
you know, loaded.” Controls, we’ll give you those controls. And we have, you know, simple
methods like play. And again, for both of these there’s a whole slew of events you can
listen to, to know where, you know, is it buffering, is it done, if you want those hooks
to give a nice interface to your users. So canvas; canvas is like an easy way to draw
on the page. It gives you a really straight forward JavaScript API. Right down there is
actually the results of the code that you see up there. And the first thing you have
is you set–you have a canvas tag, you give it an ID. Think of it like a little paintable
area, give it a width and height. And then inside your JavaScript, you grab a reference
to the canvas, you say, “getContext(“2D”)” and I’ll show you the hooks, that opens up
having a 3D context which we’ll see with WebGL. And then once you have that you make calls
on it. So there we are, we’ll make a fill rectangle, there’s our black rectangle, we
begin a path, we make an arc, we set a width, we make the ends rounded, we set the stroke
style. And I’ll be talking about this. You may have seen RGB, but one of the new things
is RGBA, which just allows you to give opacity on colors. You can do nice effects with that.
And then finally we say “.stroke” to actually draw the thing. Here’s a canvas example to
interact with things. Canvas is–the way–people always ask me how should I think of canvas
in SVJ? Canvas is really good essentially as sort of bitmap operations. If you want
to make something that’s like Photoshop, then you would be using canvas they’re pixels.
So, look, I just exported this to JPEG, it was one of the things that you can do with
canvas. I exported this to ping what you see here. SVG is vectors. If you were doing something
like illustrator, which is type illustration, that’s when you would use that technology.
So, pixels or vectors, and they both have different uses in your tool kit. One of the
cool things in HTML5 is it says that you can now natively use SVG. People ask what is SVG?
SVG, just like HTML it gives you bunch of tags like form and table. SVG just gives you
bunch of extra new tags like circle, rectangle, that you can mix in. And HTML5 says you can
now drop this tags into normal HTML. The people had followed this in the past. You had used
something called XHTML, you had to jump there some hoops, so it kind of streamlines SVG
a little bit. Here we are in some HTML, we just say this SVG, and we’re doing a couple
of different things in the circle. The nice thing about this is it’s just like HTML. We
can give them IDs, we can give them classes so we can have common styles. Here I am putting
the center of the circle right here, 50% of the way in the page and then down 25%, I’m
putting a radius. One of the cool things is you could do gradient fills. So, here I am
referencing a fill that I’ve defined which is not on the page here. And then again, you
can use all your JavaScript skills. So, on mouse down, says, hello. Here’s a nice SVG
example to show. Here we have the tiger; a classic illustrated tiger. And as we zoom
in, things still stay nice. Canvas 3D, or WebGL; now, this is still kind of being baked
but it’s a very exciting thing. What you’re seeing down there is being rendered right
now, that’s not a movie. Those are 3D graphics being drawn by JavaScript. And WebGL looks
and feels like the standard HTML5 canvas. You have a canvas tag up there, you get it.
When you do something magically you say, “getContext”, and from now you say, “(“experimental-webgl”)”,
and that hands you back an object that is a simply open GL with the JavaScript wrapper.
And then we are making a viewport which just says, we’re in the 3D space, you know, it
kind of–where’s my sizing. Now these things all start coming together. With workers in
faster JavaScript and web browsers, you can imagine doing lots of scene graph protection
and powerful things on a worker not to block the browser, passing messages back over, that’s
drawing to a WebGL context, that’s maybe showing like cool readouts on your game with canvas
that might be bringing in graphical resources as SVG. So, again, remember, think about this,
you know, many pieces that work together. So, the final thing is CSS3. One of the first
thing that CSS3 brings you are more of these selectors, so what are these selectors? CSS
binds on to the thing on your page using selectors, and CSS3 gives you more of them based on what
people have asked for. The first one, we say, “.row:nth-child(even)” will give me the even
version of the list, and then you could do the odd. And why would you want to do that?
Well, it used to be so hard to have a list of data, and to make something more readable
you generally want to make it, you know, every other color right, the eye can follow it like
that little row there. That was really hard to do. You had to do like server-side processing
to write out different classes. Now, you can do it with just a little bit of CSS. Something
called “inline-block.” This one’s hard to describe but it’s really cool. How many of
you have ever tried to use CSS trying to replace tables? And you want like some images to go
right next to each other, you want them to line up, and when the width of the page changes,
you wanted to kind of go down. Yeah, basically, something that you really need to kind of
replace tables. Inline block kind of gives you a midway between a block level elements
and an inline level element; it kind of gives you qualities of both. And I encourage you
to take a look more at it, we don’t have time to go deep into it. But it’s one of these
CSS properties that allows you to do tasks that really use to require tables in a straightforward
way. You’ll see that when we get to columns, by the way, as well. Someone had asked about
specific attributes; well, now, you can actually match “[type=”text”]” for example, so you
can actually match on attributes. Well, you could imagine putting this with microdata,
saying this is an event, or some of these new semantic tags. So, you might say article,
bracket, item type or sort of item prop equals importance. You know, you could start working
at higher level in your CSS and that’ where those attributes start coming in. Negation;
this is interesting. You had “:not.” So we’re saying “:not” if you have something as the
class name box, or saying if something is not a span, so you kind of do an inverse.
And finally, we can do more specific targeting. We get like that “:first-child,” which we
get–let’s say, we’ve got a header element. And let’s say we’ve got a nice image as the
first thing, well, that will grab us the first child and when we can do fancy stuff on it.
And then, other ones–look what was in the bracket, the “+” is adjacency. So it says
if I have an h2 element right next 2 a header element, then do this. So these selectors
might seem kind of drive but they allow you to do a lot of common tasks and grab things
on your page. One of the cool things–this is actually CSS 2.1, but it’s finally arriving.
It’s taking my 10, 15 years for web fonts to arrive and they’re finally arriving. To
use them you say, “@font-face,” you give your font a name like we have “font-family: ‘Leaguegothic’,”
and you point it to a font file. There’s a lot and discussions about which font files–personally,
I believe, that open type has sort of arrive as the de facto thing that folks can use,
but other browsers have other standards which you can kind to patch over. But there, we’ve
got a grabbing “LeagueGothic.otf.” And then, you can use it like any other font. So we
say, header, “font-family: ‘LeagueGothic’,” and here’s a little font down here and it’s
not an image. So you can treat it as little text. I can print it. A search engine can
work of it better. If I change the size of the browser, if I zoom in because I need accessibility,
it still stays a font. Here’s another one with those nice little things that you don’t
know you want it until you need it. Something called the ellipsis, it’s something like a
bunch of texts and it doesn’t know how to squeeze in the page. I want to be able to
add three little dots if the size changes. You have no idea how many people–how much
pain people have gone through having to do server-side solutions to calculate these things.
Make it a nice “text-overflow: ellipsis.” We see up here, it doesn’t have it but right
here it does. So, as we change the width, you see those three little dots, it gives
the ellipsis. You’ll see this with the boarder like the rounded corners too; people used
stuff to go through for these things. Here we are with columns; again, some of it was
used to be a pain in the butt to do. We say, give me two columns, here we do–making a
little rule and we put a gap and we are changing the number of columns. People [INDISTINCT].
So to do this in the past, you had to make like weird wrappers and do funky stuff in
your markup and like do negative margins and, we’re like, you know, a lot of us in the community,
we say that you shouldn’t have to be a wizard with HTML or JavaScript or CSS to do things
that everyone needs to do. So a lot of the stuff is about–you don’t have to be a wizard,
you can just get your job done. Text stroke is a pretty simple. Here I am changing the
width. You have more control now over stroking. So here we are, saying photos are black, make
the stroke, which is the outside red, and then change the width. I talked about RGBA.
It’s a little letter but it makes a big difference. In the past, you could just get red, green,
blue. Now, you can give fourth channel which is opacity, letting you do some nice effects.
So here we have red, green, blue and then the opacity, so we’re saying 75%; and if I’ll
change that, there’s the text and then on my background it has one of these two. This
used to require–you’d have to like custom-make images for every single permutation and push
them down to the client. Now, you can just–again, this go–this could be a web font. There could
be SVG and, yeah, these things go together. So now, you can use the client like it’s more
than a Commodore 64. This has kind of settle–there’s a whole another color model called hue/saturation/luminance,
HSL. And the reason that matters is humans don’t think of colors in terms of how RGB
asks you to think of colors. Artists, graphic designers think of colors in terms of hue,
which is like the color of something, saturation which is like how grey it is, luminance which
how bright it is. So, this allows graphic designers and so on to make colors the way
that people more naturally think about colors. So here we are changing these different things.
This is one of things showing up in more browsers, then, of course, we have the opacity. Rounded
corners, I know. I love it, it’s great; easy, a pain in the butt to make the rounded corners.
It’s amazing how just the common things used to be so hard. We had now a border-radius;
you look at the outside, changes it.
Gradients; again, this could be a deep subject. I’m not going to go into all of them. But
CSS3 gives you gradients. We have linear gradient at the top. We just say, start at the top,
go down to the bottom, and then we get stops, so you can give multiple stops. There we are
going between two different colors. And we have radial gradients, which obviously gives
you a radial and you give like an arc and you give a radius. Here we are just changing
that. And again, you can have again have an opacity channel so there could be on top or
something. With great power comes great responsibility. Shadows, again, text-shadows there we are
controlling the horizontal, the vertical, they offset. Unfortunately, box-shadows not
working right now, I can’t show that one. So I love this one. Instant Web 2.0–so, here’s
our logo. We add a text-shadow first and then we add a linear gradient. And we put some
little round on the sides and then we add the reflection. Simple things around CSS3 give you background
enhancements. So it used to be in a lot of control, if you made a background image. Now,
you have a new background-size. So you can say, “always make sure if something’s in a
box that contains it.” You can say, “It’s okay if you clip the corners of me, or always
cut the corners of me.” And then, you could say, always, you know, “Scale me, 100%.” So
just more control and you can now have multiple backgrounds. Again, so you don’t have to spend
all your time at Photoshop. Here we have–thanks. Here we have two backgrounds. A little toggle
here and some nice little… So transitions, again, a deep subject. We could spend a lot
of time talking about this, but now you have the CSS3 animations. So here we have, you
know, here’s the old school left and right. We’re just changing the class name of this
little box and nothing quite happens. But now, we change–we’ve got a Webkit transition
where we’re saying change the margin over one second ease-in and then ease-out, and
you’ll see what I mean. So we say, “Oh.” It’s all kind of accelerated and stacks are ease-in
and ease-out and it’s changing the margin. And it’s going against this, we changed the
margin left right here. So we’re saying go to what its definition should be over one
second, so a really simple, straightforward animation. Transition this can go together.
Here we have using a colon hover which is a great pseudo-class which is–it can replace
a lot of JavaScript, were you just say, you know, when I’m hovered over apply this rule
and here we are applying this simple transform to rotate and scale and, its also 3D. So we
can actually rotate across the Z axis. Doing fancy. That would [INDISTINCT] kind of iTune
style, sort of shuffle type of things. CSS animations, again, it could be a deep subject
but from a high level you define your keyframes, you say “This should be here and then this
should be here” and then you can define new animations over certain amount of time and
we’re getting this. So you could remake the blink tag if you want. So were these things
supported? That can be a complicated subject because it’s really fast changing these days,
you know, Firefox 3.0, 3.5, 3.6, Chrome, IE8 actually has a number of HTML5 things in it;
IE9, congrats to them, it has a lot of really cool stuff in it. You know, new versions of
Chrome are always kind of being pushed to you that have new things implemented. One
just got sent pretty recently, Safari. So, a lot of this thing to be use today, I’ll
briefly mentioned Chrome frame, one thing that’s interesting about it is this page itself
is actually could be viewed in IE6, 7 and 8 if Chrome frame is present. And you just
drop a simple metatag and–I don’t have my virtual machine set up, unfortunately. But
this whole presentation would run exactly as you see it inside of Internet Explorer.
So, that can be a good sort of a temporary way to help you deploy what you’re doing.
So we have time for a few questions. Just about five minutes? Is that right? So the
question is, are there any limits on workers? And are we seeing–basically, how are we seeing
people use–oh, distribute to workers? So the first question, to be honest, I’m not
completely sure. I know that Gears used to have a 256 worker limit. I’m not sure what
the browsers themselves are doing. By the way, a lot of parts of HTML5 sort of Gears,
sort of got re-factored in so workers was one of those. And the second question is,
I’ve always had–would have been–it’d be really cool, you know if someone had a bit
of JavaScript that they, you know, have a distributed network, you know, steady at home
using workers, it’ll be kind of crazy. Yes. So the question is can you inject ads into
an HTML5 video like you can do with Flash? I’m not going to–so HTML5 video gives you
a number of events. So you could imagine reusing the video surface to queue up and have control
and have a number of video resources that you’ve queued up. That you’re just–just like
you dynamically changed the source of an image, you could say you get timeline events, so
I could say five seconds in or at the very beginning, you know. Say, the source equals
my ad and then when that’s done, you say the source equals, you know, the content. That
would be one way to do it. So yes, you can do it. Yeah, but not with action script. What
about development tools? That’s a great question. Someone could make a lot of money making great
development tools for the stuff. Go do it now before someone else does it. Hopefully,
Adobe will because they make great tools, they make great tools. I actually worked at
Flash as well and I–the tools are amazing. So I’d love to see it. Yeah. So the question
is I mentioned two features that asked for permission geolocation and notifications and
what other features use this and is there a common wave that they ask? Yeah. Other things
do ask, offline will ask, local storage, SQL storage will ask–I might be missing some
others. They all tend to do the butter bar approach which is you get a little butter
bar at the top. Browsers can choose to determine how they want to ask you, but most I believe
have been doing the butter bar approach like–since IE8, they’ve been doing a similar to butter
bar approach. So that’s the level of consistency. So the question is do you have the ability
to style the browser’s native or default controls? I don’t believe that there’s anything in the
spec that says that you can do that and I don’t believe any browsers necessarily expose
that. I could be wrong if someone knows about that. I think it’s an all or nothing type
of situation. So if you–you would just leave the controls tag off. And, again, you can
imagine just say on mouse hover, then you could use these different things to use that,
you know, the opacity now. Get a little CSS3 animation, you know, say, you know, show dev,
position it, and you can, you know, relatively absolute over the video or down. So you could–you
just have to recreate it yourself. But, again, you use these pieces together. That why, again,
I like to say if a browser just chooses to implement HTML5 video the stuff goes together
and then your buttons, for example, would be a little less 3G resources. So they look
good on a giant media screen or on a small–so the resolution is independent. And so the
question is, for text at the slider tag which has no representation older browsers, how
do you handle degradation? So degradation can be done in a variety of ways. Most browsers
will keep those customs tags in the markup. And there are tricks for IE to force it to
see unknown tags and then you could do capabilities detection and then shim in some JavaScript.
You know, I mean we’re doing–I mean I’m doing crazy shimming on for SVG and SVG Web. We
have the browser natively supports SVG, it’s, you know, its beautiful. But if its not I’m
doing crazy JavaScript tricks. I’m shimming in Flash. So it depends on what you’re trying
to do with an emulation that it brings it in and stuff. So you’d have to shim. All right;
well, thank you, everyone.


  1. Post
  2. Post
  3. Post
  4. Post
    Der Chris

    Microsoft desk, Apple Computer, Google Conference. If they really unite on HTML 5, the web could become really good. #FTW

  5. Post

    @stanlyong haha, I know right…I mean Microsoft, they hardly do anything that is up to date, I mean look at Windows 7, some of the "aero" features have been available for years in Ubuntu Compiz Configurations.

  6. Post
  7. Post
  8. Post
  9. Post
  10. Post
    Mark Bailey

    What's the syntax for soundrate (pitch) using an audio element? I've been looking everywhere for it. I've tried rate, soundrate, playrate.

    Also, perspective is abit slow on the uptake within CSS3. My maze only works on Safari 🙁

  11. Post
  12. Post

    bahahahahahaha … now if Microsoft could only come out with a modern browser to support it w/o numerous code hacks … bahahahahahaha

  13. Post
  14. Post
  15. Post
  16. Post
  17. Post
  18. Post
  19. Post

    They must have hired some guy overseas to do the transcription of this video.
    "Mind type" indeed. I believe the correct transcription would read, "MIME type" (as in, Multipurpose Internet Mail Extensions)

  20. Post
  21. Post
  22. Post
    Jonathan Lawton

    All I can say is AWESOME! I can't believe my eyes. To quote "David After Dentist", "Is this real life? …Is this going to be forever?" Please do not wake me if it's only a dream.

  23. Post

    I love microdata? is this the same as: I don't get RDFa? And html5? When will 80% of users' browsers support it? IE9 is now in BETA, when will 80% of the windows users get IE9? In one year? In two years? later?

  24. Post

    @waisyzun yeah, like the apple html5 demo that only works in safari ;-). they will not work together, they will try to push their own incompatible stuff. history repeats intself…

  25. Post
  26. Post

    H5 is garbage. Anything built in Javascript is unfortunately garbage with all due respect. JS is a cheap 2-bit hustler language designed w/ a purpose of rush development, which sits well for small apps but blows up when you code serious LOB apps. Better redesign HTML6 and equip it with a real world serious programming language like Java or C#, or stop trying to fool everyone with such silly "future" backwarded koolaid.

    My honest 2cs

  27. Post

    cool. haven't seen these twitter style links on youtube yet. lemme try one.

    please download my whole game #PlayREALNotes for free, and Pay What You Want if you like it! —– PlayRealNotes (dot) com

  28. Post
  29. Post
  30. Post
  31. Post
  32. Post

    @dlmaniac "H5 is garbage. Anything built in Javascript is unfortunately garbage with all due respect" um.. tell us how you really feel! 😉 hahah you're prolly right.

  33. Post
  34. Post

    at first i was like "oh i'll watch this video and i'll go make a sandwitch"

    *looks at video time*

    WTF 50 minutes?

  35. Post
  36. Post
  37. Post

    html5 does look promising, i do really hope all browser vendor make it standard in their browser..i dont like to use all those -moz or -webkit browser specific tag

  38. Post
  39. Post
  40. Post
  41. Post
  42. Post
  43. Post
  44. Post
  45. Post
  46. Post
  47. Post
  48. Post
  49. Post
  50. Post
  51. Post
  52. Post
  53. Post
    Vishal Gupta

    h2:first-child explanation is incorrect. h2:first-child matches all h2 elements that are first child of any other element.

  54. Post
  55. Post
  56. Post
  57. Post
  58. Post

    lol a guy from microsoft (you know the corporation who developed IE) talking about web progress…

  59. Post
  60. Post
  61. Post
  62. Post
    Chan Ramirez

    Hello! i just wanna ask coz i am really new to HTML5 and i have an assignment… i need to develop a dictionary application… i'm already finish with the design and some functions, my problem now is that how can i link the word inputted on the the textarea to google dictionary when you click the word to show what the word means… BIG BIG HELP HERE!!!!! my deadline is coming…

  63. Post
    Seetala horu

    Hey, I will tell how I generatetons of cash uploading youtube videos. Search for royalty free music. Upload it somewhere safe. Then sign up with bee4biz (Just Google it) and lock the download link with them. Make videos advertising your royalty free download and post protected download link in description. bee4biz pays you each time people complete a survey to unlock your download link. They pay weekly via PayPal.

  64. Post
  65. Post
  66. Post
  67. Post
  68. Post
  69. Post
  70. Post
    Thomas Hedegaard

    @CRAKIZGOOD That's fair dude, pers i love the Mac, but we're all different, I just don't wanna bitch about what's best like everybody else does, that disc will never end…

  71. Post
  72. Post
  73. Post
  74. Post

    please forgive my ignorance, but can someone please explain the main difference between html5 and adobe flash? what sites can i see html5 being used, what do i look for to know its html5?
    this video and many other sites has me all confused , its like their speaking another language .

    thanks in advance

  75. Post
  76. Post
  77. Post

    Amazing video! Really thorough explanations, excellent for those new to HTML5 but who know a lot about HTML old school technologies…

  78. Post
    Vlad Mandiuc

    @virdisingnavjot He's talking about the native browser language that will not need any external tools or software to achieve smarter web interfaces, and yeah this are very good news for front-end programmers and any web developer. This flash web-player playing a HTML 5 video is no irony; it's harder to satisfy cross-browsing with HTML 5 at this moment because a very big number of "internet-navigators" are still ignorantly using old browser versions

  79. Post
  80. Post
  81. Post
    Jimmy Westra

    You can't watch any of these fucking video on how to run these videos if adobe or google or whoever owns YOUTUBE stops all existing "HOW TO"videos from running on youtube WTF

  82. Post
    Lukas Krzizek

    lol that is stupid because all the ad's in video stops html5 working they should add support to html5 before adding (stupid) ads

  83. Post
  84. Post
  85. Post
  86. Post
  87. Post
  88. Post
  89. Post
  90. Post

    im on xbox using Internet Explorer and you have to use HTML5 and there's no java and no flash player you can't play most of all games

  91. Post
  92. Post
    David Patheyjohns

    From an investment point of view Microsoft/Apple/ Google they all float each other up on the markets. GET IT..

  93. Post
    Jefferson Ribeiro

    Mac can run Windows!
    What is the difference between microsoft use a dell computer using windows operating system and an apple computer with Windows OS?
    Is the hardware, not the OS.

  94. Post
  95. Post
  96. Post
  97. Post
  98. Post
  99. Post
  100. Post

Leave a Reply

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