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.