網絡直播：將HTML轉化為HTML5 (Webcast: Transform HTML Into HTML5)

Subtitles section Play video

Today we're going to cover a couple of the big important things.
The first one: What is
HTML5?
The second one:
How can I start using it?
Very, very important questions. We're going to get through them
in the next half an hour.
My name is Jim.
I live in Washington D.C., and I'm a Web developer.
Today's big ideas...
Number one:
HTML5 is actually a catchphrase for bunch of new things. It's not just
one thing; it's a bunch of things. We're going to cover what those things are.
Big Idea #2:
HTML5 is flexible. It's actually more flexible than what came before it.
We're going to talk about that and why that's the case.
Number three:
HTML5 has new tags that you can use in your Web pages.
And Big Idea #4: these new tags work in old
browsers.
So you can use HTML5 today.
Well, you can use some of it today. Some of it you can't. Some of it only works in
certain browsers.
This is a way of the Internet and we have come to accept this. But there's a lot of
stuff that you can do today. By the end of the session if you don't know it already
you're gonna know what that stuff is.
Let's begin.
Big Idea #1: HTML5 is actually a catchphrase for a bunch of new things.
It's a catchphrase for new HTML tags.
Things that weren't available to you before...new tags are now
available to you.
New shiny CSS properties including things like drop shadows, opacity,
animations, transitions. We're going to talk about those a little bit.
And new Javascript...all kinds of things... a lot of things actually oriented
towards mobile devices.
We'll talk about those a little bit too. All these things HTML, CSS and Javascript
are collectively called HTML5.
There's a bunch of stuff that's not HTML, but it's still kinda called this because
it gained some momentum...
this catchphrase HTML5 for the new shiny.
And so, let's talk about what some of those things are. First, let's talk
about actual real HTML.
The Doctype...
you know the Doctype. You've seen something like this at the top of your
web pages. A big complex set of statements
that
describe
what specific flavor of HTML the document is.
Well, HTML5 does away with the specific flavor and says
just this.
The Doctype is just HTML. It's not HTML5.
It's not HTML4. It's not HTML6. It's just standard HTML.
Unbelievably, this Doctype, as simple as it is,
works all the way back to IE6. It works in old browsers because all it's telling
browsers is this is standard HTML.
This is a sea change (meaning a big change) from what came before,
in which the Doctype specifically said "no this is HTML4" and "this
over here is HTML4.01" and "this one's xHTML1".
This is different.
A new thing in HTML5 is
taking tags...tags like this. We all have tags like this in our layouts.
Divs for headers, nav and footers. This might be how you've
assigned ID's to those particular things. Well, in HTML5
the folks who came up with it said
people need headers, navs and footers all the time so let's make tags for them.
Just make it easy
and make it semantically correct and easier for search engines. Make tags that
describe what the thing actually is.
There are a bunch of new tags. Here are some of them. I'm gonna show you even more
before this half hour is up.
Another new thing in HTML - better
forms. Here's an example. The input tag is where you type in stuff or you deliver
input in a form.
The most common one is the input with a type parameter of text.
This on an Android phone, like the screenshot we're seeing right here, just
a little place where you can put in some text and the Android phone pops up a little
keyboard and you type in your search term or whatever.
Well, HTML5 introduces a bunch of new types
of parameters that you can put in. You can have a type that's specifically for
searching, one for email, one for websites, for URLs, one for telephones,
ranges which is a number from one to a hundred, say.
And if you take this example like an input type of telephone,
it's still a box where you type in information, but the Android keyboard changed.
Android is smart enough to say, "it's a type of telephone...they don't care about
letters, they just need numbers." Now,
if you use the input type tel
in an old browser, you're gonna get the standard input box, no problem at all,
it's backwards compatible.
But new browsers, like this one, that understand this type of telephone
will work better.
More greatness in HTML5 -
Form Validation. Things that can happen without having to resort to Javascript,
though Javascript and server-side validation is always a good idea.
Microdata -
describing in more detail elements on your page. Great for
search engines, great for accessibility.
Native audio and video without Flash - this is probably one of the most
heralded new things in HTML5.
It's the whole thing around the iPhone and the iPad not using
Flash but still being able to look at YouTube videos,
and being able to put Vector graphics on your web page; being able to take an Illustrator
file or Vector file
and put it on your web page in a way that looks good at any size and on any
display.
That's a bunch of HTML stuff that's part of HTML5, but that's not all. We got
new shiny CSS stuff that's part of this thing known collectively
as HTML5.
Here's some of the new shiny:
Opacity -
you can take two divs
and give them a background color that is this blue, like what's described here, but give
it an opacity -
this RGBA designation -
red, green, blue and alpha.
The alpha is the last number - 0.8 and that's 80 percent
opacity. Just like in Photoshop taking a layer to 80 percent of opacity.
You can do gradients straight in CSS.
Here's an example of one. You could do linear and radial gradients. You can do
bunches of gradients stacked on top of each other.
You can do rounded corners.
Take a div, give it a nice rounded corner without having to resort to background
images
or divs within divs.
The box shadow - you can take a div and put a drop shadow behind that div and control the
elements of that shadow.
You can take the same div
and instead of the shadow being dark, you can have the shadow be light and create a
glow effect.
You can put shadow not just on boxes but on text.
You can transform
elements.
For instance, this one is rotated 30 degrees.
This one is skewed 30 degrees. You can put those together.
And you can also create 3-D transforms, in which things can look like
they are moving in space.
And you've got animations.
CSS animations allow moving from from one
position or one CSS state to another CSS state.
Lots and lots of great CSS stuff that's now available to you
including web fonts,
having multiple columns within a div, multiple backgrounds, images in the
borders, transitions, transformations in 3-D,
new selectors,
changing how the box model works,
and creating outlines in addition to borders. That's just some of the stuff
that's new in CSS. There's new and shiny Javascript as well.
There's drag and drop. It's a fantastic thing. You can actually see this in gmail
today.
If you go into your gmail - if you have gmail, of course - you can
drag a file from your desktop directly into gmail
and it'll upload it to the website. That's all happening through Javascript, and that's
Javascript that's now available, and it wasn't available before.
That's part of this collective thing called HTML5.
Canvas - it's kind of like a competitor to Flash.
It's the ability to draw graphics on the screen and have them animate and be interactive.
This is sort of a silly example.
More great stuff, you've got Geolocation - the ability for Javascript to
understand where the device is if the device supports it.
For instance, a mobile phone. Offline browsing, also great for mobile phones
and a way for a website to be able to be saved
so you can browse it even when you're not directly connected the internet.
Local storage, which is like cookies on crack.
You can store megabytes of data instead of just a couple of kilobytes
and you can access it like a database.
All of that stuff
is part of this thing collectively known as HTML5,
even though a bunch of it has absolutely nothing to do with
regular HTML.
That was Big Idea #1, that HTML5 is actually a catchphrase for a bunch of
new things.
Okay, wait, wait, hang on a second,
I wasn't taking notes. How do I know what this thing was? And what about
that...
web fonts? And what about the canvas? How'd I make the unicorn that does the
pooping rainbow?
Well the answer is
read the books.
As part of this program, you have books that are available to you for
free for a month including these two beauties
by the folks at "A Book Apart".
These two books, if you have not read them,
are short and sweet. They're well-written. They're technically precise...very,
very good introductions. There are lots of others, too. I'm not saying these are the
only books. There are lots and lots of books about HTML5
and its various things.
Another good website I'm going to recommend to you... I'm just gonna jump in and recommend
this to you...
there's one called caniuse.com. Let's you know what you can use in particular
browsers...a fantastic reference.
Let's talk a little bit more about the HTML part of HTML5. The rest of this
presentation is not going to be about CSS or Javascript, but just about HTML.
Big Idea #2 - HTML5, the actual HTML part, is more flexible
than what came before it, more flexible than HTML4.
This is a sea change (meaning a big change). Usually things are less flexible as you move on
in versions. This is actually the opposite. Let me give you some examples here.
First the example that we've already seen.
The new Doctype is extremely simple
and will work in HTML6, if there ever is such a thing, and 7 and
8.
This Doctype is the new Doctype to stay.
Let me give you another example.
Take this picture of Justin Bieber, please.
The syntax here that you're seeing for this IMG tag is xHTML syntax.
The reason I know this is because
it's a self closing tag but it has
this slash here at the end.
That's xHTML. If you don't have the slash, this guy is no good.
This tag in HTML - no good! Might still work...you might still be able to get away with it.
But this is HTML,
that's xHTML.
Well, here's the deal. In HTML5, this tag is a-ok, no problem.
So is this tag.
Either one is completely fine. It makes no difference whether you have that
slash
or do not have that slash.
What's more,
this tag is okay, too. You don't even have to have the quotation marks.
Not only can you get away with it, but
it's actually valid HTML5.
It won't even complain. It is legal and okay.
So is this guy.
UPPERCASE, lowercase, it does not matter.
HTML5 don't care!
You can do anything you want in those examples and it's perfectly legal.
Let me show you another example.
Here's a long introduction to a webpage. We've all seen something like
this.
This is an example that's xHTML one transitional.
And you've got a long Doctype here.
You've got the xML name space and the HTML tag.
You've got some meta tags on the script tag down here.
You've also have the type
because it's text Javascript and the language because it's Javascript.
The reason you've got to have these, for instance, is that there could be another scripting
language other than Javascript and so you need to tell the browser, "Hey, what
I'm about to show you isn't
VB script or action script. (I mean those are bad examples.) But it's specifically
Javascript." In HTML5, all this is vastly simpler.
They said, "You know what? If you've got a script tag, let's just assume it's
Javascript unless you tell us differently."
This is the simplified version
of the page that you just saw. Very, very simple Doctype.
You've got to have this meta tag here.
The style sheet tag
is simple and the script tag is much, much simpler.
These two tags are the tags that make this document HTML5.
The Doctype - you've got to have.
The meta tag - well you don't have to have this but it won't validate without it.
What this does is it says the characters that you're about to see
are encoded in this particular format,
UTF 8. That's what's going on with that meta tag right there.
Okay, let's look at an example together.
The example I'm showing you is this HTML page that I have created...
Okay sorry not The Pisco Sour, we'll have that one for later.
This HTML page I'm loading up here in jsbin.com. It's like JS Fiddle. It's
sort of an equivalent of that, but it's got a nice thing in which I can edit HTML here
and I can see the output directly here.
This is a page that I jigged up for you.
It's an homage to "Arrested Development" - for those of
you who don't get the joke.
And these over here - this HTML
here, these divs
are what you're seeing over here.
The JS Bin website - what it does is if I edit text right here, like I had
some exclamation points,
you see it immediately here on the right-hand side. So I'm just giving you the
lay of the land of what you're seeing here in this particular screenshot.
So, this document that we're looking at right here has a Doctype that's xHTML1
transitional. It's got all the important things for an xHTML document.
In order to prove that this is a valid document, I'm gonna take all of
this,
I'm gonna copy it, and I'm gonna paste it into the W3C markup validation service.
So we're gonna see if this example that I've just given you
is valid xHTML.
And it is.
This guy is successfully checked
as xHTML 1.0 transitional.
So this guy is good to go.
We're gonna transform this into HTML5. We're gonna do it together. Watch.
You only have to do two things.
First thing you have to do is take this Doctype -
this big, long sucker -
lop off all the stuff on the end.
Doctype HTML. Boom!
Second thing I've got to do
in order to make it validate - I don't "technically" have to do it but it won't
validate without it -
is change this meta tag here with the charset of UTF 8.
It gives a slightly different syntax than what came before it
but it looks like that.
That's it!
This is now valid HTML5.
All this other stuff like the xML namespace
that stuff which is hold-overs from xHTML - totally fine!
HTML5 doesn't mind that it's there. It doesn't hurt anything. It's completely legal.
Not necessary, but it's completely legal.
Let me select this. Gonna copy it and we're gonna come back over and paste it into
W3C validator
and revalidate this and we're gonna see what happens.
Hey, check it out! It is valid HTML5 now.
We're good to go.
That's all it took
to transform this document from xHTML
to HTML5. Hang on one second. Kevin's got a question for me. Yes Kevin?
Kevin: I've got 2 quick questions on HTML5 syntax.
The first is the syntax is a lot more flexible in HTML5. Is that backwards
compatible?
Jim: It is backwards compatible. That's a fantastic question!
The reason it's backwards compatible is that this
Doctype tells all browsers including
older browsers to operate in standards mode.
So that means that the stuff that comes after it will just be rendered as standard
HTML. Now if you've got a kludgy
HTML
that doesn't follow one of the standards,
like it's okay if it's got quotation marks or doesn't have quotation marks or it's UPPERCASE or lowercase. But if you
do something crazy that you might have been able to get way with before because
quirks mode in IE, for instance, let you get away with it but you might not
be able to.
But otherwise the syntax is completely valid.
Kevin, you said you had another question. Was there something else?
Kevin: Is there any instance where you absolutely need
a forward slash and caret or a certain syntax in HTML5?
Jim: That's also a fantastic question! There are certain instances in which the syntax
is important like in any HTML, but the specific example
of the forward slash,
the slash and the caret or
the right corner bracket here.
Completely fine either way, like I said.
In terms of other things, there are some syntactical things that are even
more flexible than what came before.
For instance,
if you wanted to link this headline here, 'The Bob Loblaw Law Blog',
to a website -
a normal way to do it would be something like this.
I don't know if this is a real URL or not.
And then you close that A tag there.
That would create a link for this headline.
Now, if you wanted to also link the second headline, in order to do that
properly in original HTML
you'd have to copy and paste that link the same way.
Well, in HTML5 and in older browsers using this syntax it's completely legit
to put the A tag around both of the headlines.
This is an A tag around two block level elements.
You could get away with this before, but it wasn't legal and now it's
legal. So you can not only get away with it but it's legal and it works in
old browsers.
That's a great question! If you've got more questions and follow up questions,
we'll save them for the Q&A
and we'll be able to talk about them in the forum afterwards. Let's keep going
with the presentation, please.
HTML5 is flexible.
Let's go to Big Idea #3. We're gonna move fast now. HTML5 has new tags.
Here are all
the new tags in HTML5.
You can use any of these. However,
not all these tags are useful for most people most of the time.
These are the tags that are useful
for most people most of the time.
The tags that mark out specific elements of a page
that have semantic meaning.
Let me show you an example. Let's take this webpage
that's got sort of a standard layout that we're accustomed to - a header, a nav
bar, a body, a sidebar area and a footer.
If you were laying those out in HTML today those would be divs.
You'd probably want to apply IDs or classes to those divs.
But the IDs or classes that you apply are completely up to you as the writer of
the document. So,
I might call this header and you might call it headline.
I might call it global nav and you might call it main nav. Tomato (toe-may-toe) - tomato (toe-mah-toe). It's entirely up
to you what that is. Well, the folks who created HTML5 said no let's
standardize these so it's easier for engines and easier for inner-operability.
So they created tags that kind of relate to these things. We've got
the header tag;
the nav tag for navigation - you can have more than one, that's completely fine;
section for a generalized kind of section on a page; an article for
a self-contained piece of content;
a side, which is the nerdy way of saying sidebar; and a footer.
So, let's put this into practice.
Let's go back to our 'Arrested Development' example, here. We've got a box here that's
our div ID of container,
and inside the container we've got a headline. The headline has this nice, little
double rule below it and it's centered,
and then you've got the body down below.
Let's convert these regular tags into HTML5 friendly tags. We'll start with this
first one - div ID of container.
We're going to change this to an article tag because the stuff that's inside this tag
comprises a self-contained piece of silly content.
I've got an article tag. I took the closing div tag and replaced it with a closing article tag.
Uh oh! My CSS went away. Oh dear! What am I gonna do?
Well, it's just as simple as coming up here and taking the
selector that was once applying to that container
and changing it our new tag.
It's a tag - the article tag - so it doesn't take a pound sign or a dot.
It's just a tag. And BOOM our CSS is back!
We're going to do the same thing here.
This section here with this H1 and this H2
are combined to make sort of a headline for us and that's
what the div is called now. We're gonna change that to
the header tag
and give it a closing header tag. Welp... our CSS went away.
It's easy to fix. Come back up here to the selector that it once was
and change it to our new selector.
We've gotta change in a couple of different places because that's what we've done with our
CSS.
And BOOM! -
we have our layout back exactly the way it was. So using these
new tags, especially in modern browsers, is just as simple as using them.
Now, just like any tag, we can give this article
a class
of 'silly'.
Classes, IDs - they all work the exact same way that they did before, it's just a new
set of tags that you can use.
HTML5 has these new tags that are available to you to use.
Okay now, your next question, if you're smart and you're like me, is gonna be, 'Alright,
what about old browsers? I work
in a place where we care about old versions of old browsers. This stuff's gotta
work.' Well the deal is these tags work
in old browsers
as long as you give them some help. Okay, so
some browsers can have a really hard time with new tags. They don't understand.
You have to do some fancy stuff to let them recognize these new tags. Now I'm
not gonna name names as to which browsers are going to give us the
hardest time,
but what I am gonna say is there's a fix.
What the fix is is Javascript.
First, let me show you the problem, then I'll show you the answer.
So, if I come back here to this example where I've created an article tag and
a header tag and it looks really nice.
Here I've got the URL for this. If I look at it in this modern
browser in Chrome, it looks
great, looks fantastic. Let's look at it in a not so modern browser.
Let's look at it in Windows IE6 using BrowserStack here. It's a nice, little
service that let's you look in old browsers. Okay, so here's what that page looks
like in IE6.
We've got the text. The H1 and the H2,
those guys work fine.
We didn't get the CSS.
We lost our CSS. What's going on here? Well,
did the CSS work in the first place? Yes, it did, it did work in the first place but it's
not working anymore.
The deal is
that IE6 does not understand the article and the header elements. It needs
some Javascript added in there that helps it understand.
Now some nerds who are smarter than you and me combined
have put some Javascript together that helps.
There are two different versions of it. There are actually a bunch of different ones.
These are the most popular. The first is called the HTML5 Shim,
or sometimes it's called the HTM5 Shiv and they mean the same thing. I don't know
why somebody thinks a knife is the same thing as a shim, but okay.
The second one is called Modernizr.
These are pieces of code that make old browsers, especially
our friends at IE,
look, rather understand, new HTML tags.
Let's see this in action.
So, here
I've got my HTML5 code here.
I'm going to add a Javascript here.
This Javascript happens to be hosted on the internet
on
a content delivery network.
So over here in my other browser
I've got the address for the HTML5 Shim. Let's use that example.
So, that piece of Javascript right here
does absolutely nothing visual to the page.
It only makes it so that old browsers understand these new tags.
LEt's save this
and go look at it again in Internet Explorer 6.
Boom!
It works.
It works and I didn't have to do a darn thing.
You just code correctly in HTML5. You include this piece of Javascript, the HTML5
Shim
or a similar piece of Javascript called Modernizr and it just works.
It's pretty delightful actually.
Okay let's come back here.
It just works. What Modernizr does..
okay you've got these two examples, HTML5 Shim and Modernizr.
HTML5 Shim makes HTML5 tags work. Modernizr is a little bit more complex than that.
If you go to the website, you can see what it is. Both of these obviously are free.
They're just pieces of Javascript. They're pretty small, they don't add too much download time and
you can customize them. Lots, lots more detail and examples when you go to these
website. We'll post these websites, by the way,
on the forum boards after this is over so you can get to these sites.
And they just work.
What Modernizr does on top of this is that it adds classes to your
HTML. It does it through Javascript.
And what it does, is it lets you as an author of CSS
see what this particular browser can do or cannot do. So, here is an
example of the classes that are added to the HTML tag
in my modern Chrome browser on OSX.
What Modernizr adds is 'not IE'. It adds a class of 'not IE' because I'm not
looking on Internet Explorer.
Cool! It adds a class of JS because javascript is available.
And, it adds all of these other classes for things that are available on this
particular page in this particular browser.
Here's the same example
in IE6.
Javascript's available.
It is IE, so that 'not IE' is not there. But then there's all this
other stuff.
It doesn't have Canvas. It doesn't have Canvas text. It doesn't have geo location.
It doesn't have RGBA, or border radius,
or box shadow or text
shadow. IE6 does not offer any of these things.
And what Modernizr does
is it adds classes to the HTML
that say so.
Why does that matter? Well, it doesn't make any visual difference at all. It
does it all behind the scenes. But it leaves it so that you in your CSS
to write selectors
that are appropriate
for what the browser can do.
So, you could say, "Hey, if the HTML tag has a class of text shadow
then you could do something. You could apply that text shadow.
If it doesn't, if it's regular HTML then it's got some fallback properties.
Now tech shadow might not be the best example. There are other ways to get
around it, but you can use these to get really detailed and specific
CSS selectors and attributes for different browsers to make everybody
have a good experience.
So, how do you get started
with all of these new things, with HTML5, with these new CSS properties,
with Modernizr,
with the HTML5 Shim
with doing all this stuff? Well,
this is a start, you're paying attention, you're learning about this stuff.
Like I say, read the books. These two books...I wish I was getting paid by these guys.
I like these books so much and I'm gonna push them on you so hard
because they're really fabulous and they're really short -
even better.
That's it for the session. Thank you very much!
I'm really delighted to have you and we hope to see you next week.