IntroductionWelcome| 00:04 | Hi! I am Joe Lowery,
| | 00:06 | here to welcome you to Dreamweaver
CS5: Getting Started with HTML5.
| | 00:11 | HTML5 is an
evolutionary leap for web designers.
| | 00:15 | Although it's still in development by
the W3C, many features have already been
| | 00:20 | implemented, and more are on the way.
| | 00:21 | You will see how to use the new video
and audio tags for plug-in-free playback,
| | 00:28 | complete with graceful degradation.
And what web designer has not been begging
| | 00:32 | for a wider selection of fonts to work with.
| | 00:36 | The new @font-face option opens
the door to a world of typography.
| | 00:40 | You will also see how to integrate
HTML5 tags in a safe, backwards-compatible
| | 00:47 | fashion, so you can apply tomorrow's code today.
| | 00:52 | Ready to jump into HTML5 with Dreamweaver?
| | 00:55 | Let's get going!
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library, or if
| | 00:05 | you are watching this tutorial on the
DVD-ROM, you have access to the exercise
| | 00:10 | files used throughout this title.
| | 00:12 | Naturally, the information in this
course is ultimately intended to be applied
| | 00:16 | to your own web pages.
| | 00:17 | However, you might find it helpful to
work with the supplied exercise files to
| | 00:21 | practice the steps safely, and
without having to create your own examples.
| | 00:26 | So once you have downloaded the
files, extract them, and save them in a
| | 00:31 | convenient location, like your desktop.
| | 00:33 | All the assets that you will find
for a particular lesson are found in
| | 00:37 | the chapter folder.
| | 00:40 | If you are a Monthly subscriber or
Annual subscriber to lynda.com, you don't
| | 00:44 | have access to the exercise files,
but you can definitely follow along with
| | 00:49 | your own assets.
| | Collapse this transcript |
| Who can benefit from this course?| 00:00 | For many web designers, the biggest
question about HTML5 is not whether to start
| | 00:05 | using the language, but when.
| | 00:08 | When can I start using these new
language tags and functionality?
| | 00:12 | The question can easily be rephrased
in regards to this course. Is it for me?
| | 00:17 | Well first, you need to
be a Dreamweaver CS5 user.
| | 00:20 | None of the Dreamweaver features
demonstrated are available in earlier versions.
| | 00:25 | You can, of course, insert the code
manually, but it won't render properly in
| | 00:29 | either Live or Design view, and
there are no code hints available.
| | 00:35 | If any of the following
apply, this course is for you:
| | 00:38 | You want to learn what's coming
in HTML5 and what you can use now.
| | 00:43 | You need to design for multiple
screens, like tablets and smartphones.
| | 00:48 | You want to integrate video or
audio players that don't need plug-ins.
| | 00:53 | You require forms with enhanced
controls, like sliders and calendars.
| | 00:59 | You want to work with a far wider
range of fonts in your designs. Or you
| | 01:03 | want to get started with HTML5 today
and continue to be backwards compatible
| | 01:08 | with current browsers.
| | 01:09 | You will also need a basic
understanding of HTML and CSS, along with core
| | 01:15 | familiarity with Dreamweaver's interface.
| | 01:17 | If this sounds like where
you are at, let's get going.
| | Collapse this transcript |
|
|
1. Dreamweaver HTML5 UpdatesInstalling HTML5 in Dreamweaver| 00:00 | HTML5 features were not originally
intended to be released with Dreamweaver CS5;
| | 00:06 | however, they are now available, and in
this video I will show you how to get them.
| | 00:10 | Dreamweaver CS5 was released just as
the interest in HTML5 was really heating
| | 00:16 | up. Unfortunately, by that stage the
final version of Dreamweaver CS5 had already
| | 00:22 | completed testing, and there was no way
to include the desired HTML5 features.
| | 00:28 | Luckily for web developers everywhere,
Dreamweaver is easily extended, and within
| | 00:33 | weeks of the CS5 launch an HTML5 pack
was available on Adobe Labs that was
| | 00:39 | installed via Extension Manager.
| | 00:42 | The HTML5 pack was only available for a
short time, until the Dreamweaver team
| | 00:47 | put together an upgrade.
| | 00:49 | Now, if you try to download the HTML5
pack and here you see the Dreamweaver CS5
| | 00:55 | HTML5 pack, you are taken to the Adobe
Dreamweaver Support Center, where you can
| | 01:00 | now download the Dreamweaver CS5 11.0.3 updater.
| | 01:06 | If you are not sure if you already
have this version, go to Dreamweaver and on
| | 01:11 | the Mac choose Dreamweaver > About Dreamweaver.
| | 01:15 | On the PC choose, Help > About
Dreamweaver. And if you have Version 11 Build
| | 01:21 | 4964, you are good to go.
| | 01:24 | Otherwise, click on the About screen to
get rid of it and choose Help > Updates
| | 01:31 | to start the update process.
| | 01:33 | Ultimately, you can visit the
Dreamweaver support page at
| | 01:37 | http://www.adobe.com/support/
dreamweaver/downloads_updaters.html.
| | 01:51 | Just choose your system version,
Windows or Macintosh, and start the download.
| | 02:00 | Once you have downloaded the update, do
the installation, reboot your computer,
| | 02:06 | and then launch Dreamweaver.
| | 02:09 | After you have re-launched Dreamweaver,
open a blank page, and in the Document
| | 02:14 | toolbar, you will see a button that
says Multiscreen and the tooltip reveals it
| | 02:18 | actually be called Multiscreen Preview.
| | 02:21 | This is your sign that the
update has been successful.
| | 02:24 | You are now ready to get an overview
of Multiscreen and all the other new
| | 02:28 | HTML5 features.
| | Collapse this transcript |
| Scoping out HTML5| 00:00 | The updated version of Dreamweaver CS5
significantly enhances the ability for
| | 00:05 | any web designer to integrate HTML5 code
and functionality into their web sites.
| | 00:11 | Let's take a quick look at the HTML5
feature set to get a lay of the new land.
| | 00:17 | First, there have been many
improvements to the Live view renderer. It's even
| | 00:21 | been updated to handle CSS3
options such as CSS reflections.
| | 00:27 | You will find that there is a
multiscreen development environment for handling
| | 00:31 | desktop, tablet, and mobile designs.
| | 00:34 | There is even a multiscreen preview,
which allows you to set up CSS3 media
| | 00:40 | queries which change the layout
according to the output screen size.
| | 00:44 | There is additional support for CSS3 in
code hints, including current browser-
| | 00:51 | specific selectors such as the Webkit
and Mozilla border code you see here used
| | 00:57 | for creating rounded corners.
| | 01:01 | There is additional code hinting
support for core HTML5 tags, including the
| | 01:07 | basic structural tags, such
as header, nav, and section.
| | 01:13 | There is even support for video and
audio native players which are plug-in free,
| | 01:19 | such as the video player you see here.
| | 01:22 | And if that's not enough,
there is even support for canvas,
| | 01:25 | a new tag that allows you to create
graphics like charts programmatically.
| | 01:31 | Moreover, there is font-face support
which extends web designer's typography
| | 01:37 | options tremendously.
| | 01:40 | Finally, to make your exploration of
HTML5 even easier, Dreamweaver now includes
| | 01:45 | a couple of ready-to-use HTML5
layouts, which we are now ready to dive in to.
| | Collapse this transcript |
| Understanding HTML5 templates| 00:00 | The fastest path to working with HTML5
in Dreamweaver is to use one of the two
| | 00:05 | new templates included in the latest version.
| | 00:08 | The two templates represent commonly
used layouts, in a two- and three-column
| | 00:13 | version, each coded to take
advantage of the new HTML5 tags.
| | 00:18 | To access these new templates, we
choose File > New, and then you want to make
| | 00:24 | sure that Blank Page is selected.
| | 00:27 | Under Page Type, choose HTML, and then
under Layout, go all the way down to the bottom and
| | 00:33 | you will see the two HTML5-prefaced layouts.
| | 00:38 | Let's work with the 2 column fixed
right sidebar, header and footer layout, and
| | 00:45 | over here on the final section of the dialog
box you will see the DocType is set to HTML5.
| | 00:52 | If I expand that dropdown list, you will
see all the other DocTypes are still there.
| | 00:57 | We will select HTML5, keep our Layout
CSS added to the head, so we can take a
| | 01:05 | look at it very quickly, and click Create.
| | 01:10 | Now go into Design view and then switch into
Live view, just so you can see how it all works.
| | 01:16 | Here are the navigation and you
can see that that's active.
| | 01:20 | That's being controlled by CSS.
| | 01:24 | Now if I click into here and you look
down at the tag selector, you will see
| | 01:29 | that this is a nav tag. It's not a div with a
nav or a main nav id, it's an actual nav tag.
| | 01:37 | And that's the first of the
HTML5 tags that you will see here.
| | 01:42 | If I open up the CSS Styles panel and
click on the nav tag and let's go up just
| | 01:48 | a little bit, here you will see the nav ul rule.
| | 01:53 | Again, note that it's not a
class or an id, it's an actual tag.
| | 01:57 | Let's go over to Split view and I
will show you a couple of those. Starting
| | 02:02 | up at the top, there is the header, and here is
the opening of the header tag and its closing.
| | 02:09 | There are other HTML5 elements,
including an aside which you can see over on the
| | 02:17 | right-hand side under the
navigation. I'll select that.
| | 02:21 | Following down the page, we have other
content, such as the article, and within
| | 02:28 | the article, there is a separate section.
| | 02:31 | There are multiple sections.
Here is one, and here is another.
| | 02:38 | Now all the way down at the bottom of
the page is of course a footer tag. All of
| | 02:43 | these tags are called structural HTML.
| | 02:48 | Finally, I do want to point out that
there is a div with a class of container
| | 02:52 | here that wraps around all of these HTML5 tags.
| | 02:58 | It's perfectly legal, even encouraged,
by the WC3 who are developing the HTML5
| | 03:03 | specification, to combine HTML5
structural tags like header, article, and section
| | 03:08 | with the now-standard div tags.
| | 03:10 | Now, while this page previews fine
within Dreamweaver's WebKit-driven rendering
| | 03:16 | engine and the most current browsers, keep
in mind that older browsers may have problems.
| | 03:22 | To lessen those issues, the HTML5
templates use a CSS rule that sets all the
| | 03:28 | structural tags to display block,
and we can see that right here.
| | 03:31 | While Internet Explorer 9 is set to handle
HTML5 tags natively, earlier versions need
| | 03:39 | a little help, which Dreamweaver
includes in every HTML5 template.
| | 03:45 | You can see here a conditional comment
which is read only by Internet Explorer
| | 03:50 | that looks to check the version of
Internet Explorer, and if it's LT, or less than,
| | 03:55 | 9, it opens up this publicly
available code, which helps all those Internet
| | 03:59 | Explorer versions
recognize and work with HTML5 code.
| | 04:05 | Here this code is linked directly to
the Google Code depository. In the
| | 04:10 | "Working with the HTML5 Now" chapter, I
will show you how to include it in your
| | 04:14 | own site and link to it directly.
| | 04:17 | This template is ready to be customized
with your own images, content, and CSS
| | 04:21 | styles, and become your first HTML5 page.
| | Collapse this transcript |
|
|
2. Enhanced Structural TagsUnderstanding the benefits of structural tags| 00:00 | The world of the web site designer
is undergoing yet another upheaval.
| | 00:04 | Since the birth of the web, the main
output has been the computer screen; now
| | 00:10 | web-ready screens are all shapes and
sizes--not to mention orientations.
| | 00:15 | How is a web page supposed to
adapt to screens on desktops, laptops,
| | 00:21 | tablets, and phones?
| | 00:23 | The perhaps surprising answer is semantics.
| | 00:27 | Semantics, in essence, is the study of
meaning, particularly regarding words and text.
| | 00:33 | A semantic web is one in which the
right tag is used for the right content.
| | 00:40 | Today's designers rely on pages
constructed with building block
| | 00:44 | divisions, typically div tags.
| | 00:48 | Each div tag has an id, which provides an
identity, like sidebar1. The problem is
| | 00:55 | there is no real uniformity
from one designer to the next.
| | 01:00 | Let's take a look at a couple of sites.
| | 01:02 | So on this site, if I look at the Page
Source, here we see a div id nav holder,
| | 01:11 | one for the mainContent, and then another
for secondaryContent, and then there is
| | 01:17 | also other ones for content columns,
with an id of column1 followed by column2,
| | 01:25 | and later down, column3.
| | 01:30 | On another site, if we look at this
Page Source, here we see the masthead up
| | 01:38 | top, Content, and siteInfo down below.
| | 01:46 | Now those two sites are my own,
demonstrating that even a single designer
| | 01:50 | often isn't consistent.
| | 01:52 | HTML5 semantic tags bring
uniformity with header, footer, article, and
| | 02:00 | aside, among other tags.
| | 02:03 | Uniformity enhances portability
from screen to screen to screen.
| | 02:09 | Particularly important are pages
assembled from various sources, like blog posts
| | 02:14 | and syndicated news items like this one.
| | 02:17 | The semantic tags included in HTML5
are really a bridge forward to the next
| | 02:22 | evolution of the web, and in the rest
of this chapter you will see how to use
| | 02:27 | each of those tags to get there.
| | Collapse this transcript |
| Implementing basic page layout| 00:00 | HTML5 places a much heavier
emphasis on structural markup than previous
| | 00:05 | versions of the language.
| | 00:07 | In this video, I am going to show you
how to create a basic layout using HTML5
| | 00:12 | structural tags in Dreamweaver.
| | 00:14 | And I am in Split view, and you can
see that I do have a CSS rule set up, and
| | 00:18 | that's just to help us visualize this a bit.
| | 00:21 | Now, at the top of the document you
can also see that I have the wonderfully
| | 00:25 | simple HTML5 DocType,
which is just DocType HTML.
| | 00:31 | Let's start by going into the body tag,
and I will create little room there.
| | 00:35 | And I am going to go ahead and start
at the very top of the page where the
| | 00:39 | header should be, so instead of
putting in div ID header, I am just going to
| | 00:44 | start with typing in 'header'.
| | 00:45 | Now putting in a couple of letters 'hea',
and you can see here on the code hinting
| | 00:50 | that we also have header.
| | 00:51 | So I will just go ahead and choose that
and hit Return or Enter and then close
| | 00:56 | the tag, and I am going to go ahead,
create a couple of lines because I am going
| | 01:00 | to put something inside of that, and I
will complete it by putting in the opening
| | 01:06 | caret and then the backward slash.
Because I have code completion turned on,
| | 01:11 | Dreamweaver goes ahead
and fills in the header tag.
| | 01:16 | So within the header let's say that we
have our navigation. I will go ahead and
| | 01:21 | put in nav, and you notice
again we have the code hinting.
| | 01:25 | I am going to go ahead and put
nav here and then close that out.
| | 01:30 | Let me add a little text here, just so
you see where header would go. And if I
| | 01:36 | click over into the Design view, you
can see what my CSS is doing. It's just
| | 01:43 | giving me a little bit of a structural
overview of how everything fits together.
| | 01:47 | All right, we have our header.
| | 01:49 | Now following the header in HTML5, you
typically have either an article or a
| | 01:54 | section. In this case, I am going to
start with a section and put in that
| | 02:03 | identifying text, and now I am going
to go ahead and put in article. And let's
| | 02:14 | close that off. And I will add another
article because in HTML5 you can have
| | 02:20 | multiple articles within the section.
| | 02:33 | Now in addition to articles in HTML5,
you can have what are called asides.
| | 02:38 | An aside is similar to a sidebar.
| | 02:39 | So let me go ahead and type in 'aside' here
and complete that, and then close out that tag.
| | 02:52 | Now, let me scroll down just a little bit, and
here I see that I did not close out section,
| | 02:58 | so just let me hit Return and
then enter in the closing tag.
| | 03:04 | Now when I go over to Design view, I
can see my Layout, how it's set up with a
| | 03:12 | section, one article, another
article, and then finally an aside.
| | 03:18 | Now all that's remaining on
this page that we need is a footer,
| | 03:23 | so let's put that after the section
tags. And just as we did before, we'll start
| | 03:31 | with opening the tag caret and
beginning to type, and there is font and footer.
| | 03:36 | We will scroll down to footer and hit
Return. Dreamweaver completes it for me
| | 03:42 | and I put in the footer information,
click into Design view, and there you have
| | 03:47 | it, a very full page set up with HTML5 tags.
| | 03:52 | In the rest of this chapter, we will
dive deeper into each of these main
| | 03:56 | structural tags to give you a
fuller view of how they work in HTML5.
| | Collapse this transcript |
| Adding sections| 00:00 | The section tag is a key player in
the new HTML5 structural hierarchy.
| | 00:05 | The WC3 specification says that the
section represents a generic section of a
| | 00:11 | document or application.
| | 00:13 | A section in this context is a thematic
grouping of content, typically with a heading.
| | 00:19 | The keyword here is thematic.
| | 00:20 | Now pages can have numerous sections,
such as an intro, news items, and contact
| | 00:27 | info, and they can all be thematically related.
| | 00:30 | Keep in mind that you can't just
swap a section tag for a div tag.
| | 00:36 | The thematic grouping is key.
| | 00:38 | Another way to think of section is as a
top-level item in a table of contents.
| | 00:42 | For example, on this page our
mission, who we are, would definitely be
| | 00:46 | the top-level item.
| | 00:47 | All right let's go into the code, and
we will take this pre-HTML5 page and
| | 00:54 | convert it to HTML5 using sections.
| | 00:57 | I am going to go ahead and enter Split
view, and here we see the main div, which
| | 01:03 | is called mainContent.
| | 01:05 | I am just going to go ahead and
highlight that there, so we can go down and
| | 01:09 | scroll to the bottom and see exactly where
that ends, and it ends right above the sidebar div.
| | 01:15 | Let's scroll back up.
| | 01:17 | I am going to get rid of the div id
mainContent. And you wouldn't normally have
| | 01:23 | to do this, but I want to show you how
Dreamweaver handles the code hinting,
| | 01:26 | so I am going to go ahead and start
with the opening caret and start to type
| | 01:31 | 'section' and there it is.
| | 01:32 | So I will go ahead and hit Return or Enter.
| | 01:35 | Now I can go ahead and bring in IDs; in
fact, that's actually encouraged. So, I am
| | 01:40 | going to go ahead and start off with my ID
attribute, and I'll choose mainContent.
| | 01:47 | One of the nice things about doing it
this way is if you already have your IDs
| | 01:51 | set up in your CSS, you
won't have to change them.
| | 01:54 | So let me close out this section tag.
And then of course we want to go down and
| | 01:59 | instead of ending with a div,
we want to end the section tag.
| | 02:06 | Now, another way to do that would be
to go ahead and remove this div tag and
| | 02:11 | then let Dreamweaver do the work for
us by entering in the initial caret and
| | 02:15 | then the closing slash.
| | 02:17 | Now, I will go back over to Design
view and click into there. And here down
| | 02:22 | in the Tag Selector, you can now see that I
have a section tag with an ID of mainContent.
| | 02:29 | As you can see, adding a section to a
Dreamweaver page is a very straightforward
| | 02:33 | way of grouping your primary content.
| | 02:35 | You are now ready to see how to
group non-primary, or secondary, content.
| | Collapse this transcript |
| Making an aside| 00:00 | Any content that is related to the
main content of your web page but not
| | 00:04 | critical to it is a
candidate for an HTML5 aside tag.
| | 00:09 | Of course this excludes content that
belongs in a header, nav, or footer tag.
| | 00:15 | Typically, you'd use the aside tag for
your sidebar, pull quotes, advertisements,
| | 00:21 | or maybe even secondary navigation content.
| | 00:25 | Let's take a look at this
page here as an example.
| | 00:27 | This is the asides.htm file that I have
in the exercise files. And as we scroll
| | 00:34 | down a bit, you'll see that there is
some content over on the side here, and this
| | 00:38 | is actually, if I click into it, you can
see that it is a sidebar div that we have
| | 00:44 | on this pre-HTML5 page,
| | 00:47 | so that's a good candidate for an aside tag.
| | 00:50 | There are also these two callout
areas here. Each of these can be asides.
| | 00:56 | So let's go ahead and make that conversion.
| | 00:58 | I am going to go into Split view and
then just select the sidebar here, so we can
| | 01:06 | find it pretty quickly. And as I did
before, I am going to go ahead and check out
| | 01:10 | where it ends. I see here that
it ends right before the footer.
| | 01:15 | So now let's get rid of this div with
an ID of sidebar, and we will replace
| | 01:20 | it with an aside tag.
| | 01:24 | There is my code hinting.
| | 01:26 | I'll keep the same ID though, sidebar,
| | 01:31 | finish out that tag, and then let's go
down to just above the footer, and I'll
| | 01:37 | remove that div tag there, and then
allow our code completion in Dreamweaver to
| | 01:43 | end up with the closing aside tag.
| | 01:46 | Now, that's one aside. You can have
as many asides on the pages you need.
| | 01:50 | Let's go over to the two
callouts that we saw earlier.
| | 01:53 | We will click into one of those,
and let's see exactly where that is.
| | 01:59 | It's just as one little section here.
| | 02:02 | In this case, I am just going to go
ahead and change the div to aside.
| | 02:07 | Now, keep the same ID and the same class.
| | 02:09 | Now, I have to remember to change the
closing of the div tag to closing aside.
| | 02:15 | That's good, and then we also have
another one here, and I will change that div
| | 02:20 | to an aside, and its closing one as well.
| | 02:26 | So now I should have, if I scroll
back down and click into these areas,
| | 02:36 | in the tag selector I have a one
aside here and another aside here.
| | 02:45 | Naturally, you will use CSS to style and
position your aside in whatever manner
| | 02:50 | is appropriate for the targeted screen.
| | Collapse this transcript |
| Using heading groups| 00:00 | Headings have taken on a new emphasis
in the structure-focused HTML5. Whereas in
| | 00:06 | previous versions of the language the
heading hierarchy was generally applied on
| | 00:11 | a document basis with 1 h1 tag
per page, HTML5 is more granular.
| | 00:18 | To reflect today's nature of portable
content, each section is encouraged to
| | 00:22 | maintain its own hierarchy.
| | 00:25 | HTML5 includes a new tag--hgroup--to
facilitate the suggested best practice.
| | 00:31 | Let's take a look at a practical
example to show you what I mean.
| | 00:36 | At the top of our page just where
you might expect it, is the h1 tag and
| | 00:41 | here down in the tag selector you can
see that that's an h1. And it's within
| | 00:45 | the header, another HTML5 tag, and then right
below it is an h2 tag, also within the header.
| | 00:54 | Let me switch over to Split view, so you
can take a look at the code. And here's
| | 00:58 | this section with the h1 and
h2 found within the header tag.
| | 01:03 | Now in order for us not to throw off
the document outline where there is an h1
| | 01:09 | followed by an another immediate h2
| | 01:12 | when these two headings are really
related, we are going to surround them with
| | 01:16 | what's called an hgroup tag.
| | 01:18 | So I am just going to select the
content here, and now I am going to press
| | 01:23 | Command+T on the Mac, or Ctrl+T on the
PC, to bring up our Wrap Tag mode of the
| | 01:30 | Quick Tag Editor. And I will enter in
hgroup. And I'll do it slowly so that you
| | 01:37 | see as I get to hgr typing that in
hgroup is showing up in the code hints, and
| | 01:42 | let me press Return and Return. Enter again.
| | 01:49 | So now that has wrapped our two
headings around with an hgroup.
| | 01:54 | Now one other thing about headings is
that they can be used to create their own
| | 01:59 | hierarchical levels within sections.
| | 02:02 | To demonstrate that, let's
take a look at their asides.
| | 02:05 | So here, this one section is an aside
with an ID of sidebar, and I have an h3
| | 02:12 | tag here called Monthly Specials.
And because this is the top level within
| | 02:17 | the aside, I can actually
convert that from an h3 to an h1.
| | 02:22 | Let me drop out of Live view
here, and I will select that h3.
| | 02:27 | Let me open up my Property Inspector,
and here you can see that the format
| | 02:33 | is set to Heading 3.
| | 02:35 | So I can change that to Heading 1.
And now let's go down and do the same thing
| | 02:42 | to our two callouts.
| | 02:44 | Here, this one is actually an h2, and I
can change that to an h1, and we will slide
| | 02:50 | over to our other callout
and do a similar sort of thing.
| | 02:54 | I will select it with the tag selector.
And this time I just wanted to show you
| | 02:59 | you can do this with a keyboard shortcut.
If you press Command or Ctrl+1, it will
| | 03:04 | instantly change your h2 tag to an h1.
| | 03:08 | While it might take a little bit of
getting used to, the new heading tags in
| | 03:12 | HTML5 add another level of
structural integrity to your web pages.
| | Collapse this transcript |
| Framing articles| 00:01 | It's easy to understand how folks
might be confused when it comes to choosing
| | 00:05 | between a section tag and an article tag.
| | 00:08 | The key difference is that content
within an article tag can stand on its own
| | 00:14 | and is intended--or at the very least able--to
be republished and used in another document.
| | 00:21 | Examples of good candidates for the
article tag include blog posts, magazine
| | 00:25 | articles, or even an interactive widget.
| | 00:29 | This main text here is in fact an
article. So, I am going to go ahead and just
| | 00:34 | select that div and then go to Split view,
so we can take a look at the code and
| | 00:40 | scroll down a bit to see where it ends.
| | 00:42 | It ends just above the aside,
| | 00:44 | so let's go up and change
our div to an article tag.
| | 00:53 | Our code hints come into play, and let's
go down and convert that closing div tag
| | 01:01 | to a closing article tag.
| | 01:04 | Okay, now if the content is likely to
be republished or syndicated, you might
| | 01:09 | want to note when it was first published.
| | 01:12 | HTML5 includes a new tag that makes the
date machine-readable to surround your
| | 01:17 | human-readable info.
| | 01:19 | I am going to go back up
where my article tag is.
| | 01:25 | This new tag is the time tag. So, just
to make it easy to read, I am going to put
| | 01:30 | it on its own line, and I'll type in
the word 'time'. Our code hint comes up.
| | 01:35 | We'll close off this tag here and
then put in some human-readable content
| | 01:42 | published on March 31, 2011.
Close out the time tag and that's done.
| | 01:51 | Now we can add additional machine-
readable attributes here by putting in the
| | 01:56 | datetime attribute within the time tag.
| | 01:59 | So I will go back into the time tag,
hit Space, my code hints come up, and I can
| | 02:05 | just start to type 'datetime' and
there you see it has a second line there.
| | 02:09 | I will press Return or Enter.
| | 02:11 | Now, you need to use the Gregorian
format for your value when you put it in the
| | 02:17 | datetime attribute, and that's putting
the year first, 2011, with the month, a two
| | 02:23 | digit number, 03, and then
the date, also two digits.
| | 02:29 | So 2011-03-31 is the same as March 31, 2011.
| | 02:36 | Now you can indicate whether this was
the publication date or modification date.
| | 02:41 | In this circumstance, I am going
to put in the publication date.
| | 02:45 | So I'll put in another attribute,
and this one is called pubdate.
| | 02:52 | Now pubdate is a Boolean attribute,
meaning it's either true or false. You can
| | 02:58 | either put in pubdate=true here,
or if you want to follow the XHTML
| | 03:03 | syntax, which I tend to like to do,
you put in pubdate=pubdate.
| | 03:07 | All right, let's take a look at that in
Live view, and obviously we would need
| | 03:13 | to do little but of styling here,
but we can directly address the time tag that
| | 03:17 | we see here with CSS.
| | 03:20 | Now, the independent content on this
page has been identified as a separate
| | 03:23 | article and date-stamped.
| | Collapse this transcript |
|
|
3. CSS3 Media QueriesUsing the Multiscreen Preview panel | 00:00 | Increasingly, the web is being viewed
through a variety of devices, like tablets
| | 00:04 | and smartphones, each
with a different size screen.
| | 00:08 | To help designers display their sites
appropriately--no matter the screen
| | 00:12 | size--CSS3 supports a
feature called media queries.
| | 00:17 | A media query allows specific CSS
rules, or even an entire external style sheet,
| | 00:23 | to be brought in to play conditionally.
| | 00:26 | You can, for example, use one set of
CSS rules if the width of the display
| | 00:30 | screen is a minimum of 320 pixels--like
an iPhone--or another, if the screen is
| | 00:37 | at least 768 pixels--like
an iPad or other tablet.
| | 00:42 | To help you manage this ever-more-
complex world, Dreamweaver CS5 introduces the
| | 00:47 | multiscreen preview.
| | 00:50 | Let's take that for a spin.
| | 00:51 | We'll start by opening up Multiscreen,
and here you see a large dialog box that
| | 00:58 | has three separate areas: one for the phone,
| | 01:02 | another for tablet, and
the third for the desktop.
| | 01:05 | Now all three views of this page are
identical because they're all using the
| | 01:08 | same CSS at this point.
| | 01:11 | We can, however, set up media
queries in order to change that.
| | 01:15 | The first step is to take a look at
the viewport sizes, and here you see
| | 01:20 | the width and height for each of the devices
that Dreamweaver can create a style sheet for.
| | 01:26 | Let's leave these default sizes and
click OK, and now open up media queries.
| | 01:34 | This is where you
actually set up the media query.
| | 01:37 | In this dialog box, we will assign a
separate CSS style sheet for both of the
| | 01:44 | phone and tablet and keep the
existing one for the desktop.
| | 01:48 | So on the phone row, you'll see
that there are three options:
| | 01:54 | we can choose not to target small
screens, use an existing CSS file if we have
| | 02:00 | one already, or in our case we are
going to be choosing create a new CSS file
| | 02:05 | in a specific folder.
| | 02:07 | Now, we just have to find that folder, and
we are going into the _CSS folder where
| | 02:13 | there's currently only a main.css.
| | 02:17 | So click Choose. Now, we will do
the same thing here for medium.
| | 02:21 | So, I will change that option to
create a new CSS file in folder, and I can
| | 02:27 | actually go ahead and just type this in.
| | 02:31 | Now, for the Desktop, we are going to
go ahead and use our existing CSS file
| | 02:35 | and choose main.CSS.
| | 02:39 | Now, watch what happens when I click Ok.
| | 02:43 | Now, because the phone and tablet
style sheets do not exist yet, they have no
| | 02:48 | styles, and therefore they are
showing in just their raw, unstyled state.
| | 02:53 | Let's take a look at the code that it's created.
| | 02:55 | I will close the multiscreen
preview and switch over to Code view.
| | 03:03 | Here you see the new code that has been entered.
| | 03:06 | The first deals with the small screen or
phone size, and links directly to a phone.css file.
| | 03:14 | Now, it does this only if the media is
screen and a minimum width of zero and a
| | 03:21 | maximum width of 320 pixels.
| | 03:24 | For the tablets, there is a
similar sort of setup where we link to
| | 03:28 | tablet.css but only if the minimum
width is 321 pixels wider than the phone
| | 03:36 | and a maximum width of 768.
| | 03:38 | And to round it out, there is our
third link going to main.css if it has a
| | 03:46 | minimum width of 769 pixels.
| | 03:50 | Now, for some reason if you didn't want
to target a specific screen size, you
| | 03:54 | could choose that option in the media
queries and a link like this one, for
| | 03:58 | tablet for example,
would not have been created.
| | 04:02 | We can undo that action, so we have it all.
| | 04:04 | Now let me show you one other thing
working with the multiscreen preview.
| | 04:09 | I'll switch back to Design view,
and watch what happens as I resize the screen.
| | 04:16 | Right now, I'm at a full desktop size.
I am going to bring it down to about where
| | 04:20 | my tablet would be, and presto change-o,
all of my styles are now gone. And that's
| | 04:26 | because I do not have any styles
assigned to the tablet.css, which you see
| | 04:31 | linked up here in the Related Files toolbar.
| | 04:33 | Now, you are not going to see any real
change. The same thing would happen if
| | 04:38 | I go down to a phone size. And now if I
bring it back up, all of my styles are reapplied.
| | 04:46 | Now that you have seen how media
queries are created and can be displayed in
| | 04:49 | Dreamweaver, in the remainder of
this chapter we will examine various
| | 04:53 | strategies for modifying your
layout to fit the various screen sizes.
| | Collapse this transcript |
| Designing for tablets| 00:00 | While the trend in desktop computer
screens is definitely 'bigger is better',
| | 00:04 | tablet screen sizes are a bit more restrained.
| | 00:07 | The iPad in portrait orientation is
768 pixels wide by 1,024 pixels tall.
| | 00:15 | In landscape of course it's the opposite.
| | 00:17 | Let me show you now how you go
about converting a web page initially styled
| | 00:21 | for desktop monitors to an iPad screen.
| | 00:25 | So I have trails.htm open.
| | 00:28 | We have our media query code
already in place, but if you look at the
| | 00:33 | tablet.css, it's completely empty.
| | 00:37 | Let's go back to Design view, and if I
resize the Dreamweaver window to about
| | 00:43 | here, here you can see I am at 770
pixels wide down in the status bar. But if I
| | 00:50 | move it just a hair more, so I'm at 768,
| | 00:53 | we are back to our unstyled page.
| | 00:58 | So to give us a starting point, I am
going to go into main.css, using Command+A
| | 01:04 | to select everything, copy that, and
let's go over to the tablet.css, select
| | 01:11 | everything, and we'll paste in our new CSS.
| | 01:15 | Now, when I go back out to Design view,
of course I am going to get that
| | 01:18 | CSS applied, but now we are ready to make some
adjustments, and open up the CSS Styles panel.
| | 01:26 | Now the first thing we are going to do
is change the outer width of the page, and
| | 01:31 | that's contained in a tag called the
wrapper, which you can see down here in the
| | 01:36 | tag selector. And here it is in
Current mode of the CSS Styles panel.
| | 01:42 | At this point our width is 1100 pixels.
| | 01:44 | Now I am going to reduce that to 768
pixels and press Enter, and now you can see
| | 01:52 | things kind of getting crunched in.
I will move this over just a little bit, so
| | 01:56 | that the page is centered.
| | 01:57 | Now I am going to work from the top
of the page all the way down, starting
| | 02:02 | with the nav section.
| | 02:04 | Now my logo image here is a little bit
big, but I think it's okay for this page.
| | 02:09 | But what I have to do is reduce the
nav bar, so that it's more compacted and
| | 02:13 | appears just on a single line.
| | 02:16 | So I'll click anywhere into the navigation.
| | 02:19 | Now over in the Styles panel, I'll locate the
font size, which as you can see is set to 1.2ems.
| | 02:26 | I am going to reduce that to just
1em. That worked, but it didn't quite
| | 02:35 | condense the text enough.
| | 02:37 | So now let's change the padding a bit.
| | 02:39 | Here you can see that the padding is
set at 0.20. That means left and right are
| | 02:44 | set at 20, so I am going
to reduce that a little bit.
| | 02:47 | Typically when you are making a
conversion like this, you don't want to
| | 02:50 | make radical changes.
| | 02:51 | You just want to change just enough in
order for everything to fit. So, 15 pixels
| | 02:57 | of padding works well.
| | 02:59 | Now the next thing to do is to work on
Trail Guide, this h1 tag that we see here.
| | 03:05 | Now instead of 6em, I am going to go
ahead and change that to 4.5, and that does
| | 03:12 | bring it in, but it's up a little bit too high.
| | 03:15 | I want these two lines to line up
down with the Explore California,
| | 03:20 | so let's bring that down a bit and
change the margin top from .2em to .7. Okay.
| | 03:30 | We're getting closer.
| | 03:31 | I think my h2 tag here is a little bit
tight with h1, so I'm the change that
| | 03:38 | spacing which we see here in
#mainHeader hgroup h2 from -25 to -20.
| | 03:45 | All right, we've got a
little bit more space there.
| | 03:48 | It looks pretty good.
| | 03:50 | Let's move on to the content down below.
| | 03:53 | As you can see, the two columns are too
wide to be contained in the new width of
| | 03:58 | 768 pixels, and the aside
therefore has been pushed down below.
| | 04:04 | Let's address that problem now by
changing the width of both columns.
| | 04:09 | So I'll go ahead and click into the main
column here, which I see is called Trail
| | 04:13 | Info, and then locate the CSS rule that
has its width, and change that from 600
| | 04:19 | pixels to 425 pixels.
| | 04:23 | Now, that shrunk the size of the column
on the left, but we still need to do a
| | 04:28 | change for the column on the
right, which is called Trail News.
| | 04:32 | Again, I am going to go in and
select that from the tag selector,
| | 04:36 | locate its width, and
change that from 450 to 300.
| | 04:42 | Now, I have both columns lining up, all
of my navigation completely visible, and
| | 04:52 | there's no scrolling involved.
| | 04:55 | So now if I resize the window and go to
my wider size for the desktop or bring
| | 05:04 | it in to just around 768 here,
| | 05:07 | we have 762 and
everything resizes appropriately.
| | 05:12 | With Dreamweaver's new CSS3 media
query savvy capabilities, you can design and
| | 05:17 | preview your page so that it looks
great on both the desktop and in a tablet.
| | Collapse this transcript |
| Optimizing smartphone layouts| 00:00 | More and more folks are using their
smartphones to surf the web, and while the
| | 00:04 | latest phones all support browsers
which are capable of rendering web pages
| | 00:08 | designed for desktops with high
fidelity--quite often to actually read and
| | 00:12 | interact with the site--phone users need to
zoom in tightly and scroll, scroll, scroll.
| | 00:19 | A far more usable approach is to
implement a design specifically intended
| | 00:23 | for phone-size screens.
| | 00:25 | In this video, I'll show you some of the
common approaches to this challenge and
| | 00:29 | how to implement them in Dreamweaver.
| | 00:31 | So I have opened here trails.htm, and
I've already put in my media query code,
| | 00:37 | including that for the phone, which looks
for a phone width less than 320 pixels.
| | 00:45 | And I have CSS both for my main
desktop screen, as well as my tablets, but
| | 00:51 | nothing in the phone.css.
| | 00:55 | So if I reduce the window size to
around where the phone is, it should be about
| | 00:59 | in here, 319 pixels, one pixel
less than 320, so that's perfect.
| | 01:07 | And I'll bring that over to the center
screen. And the next thing I want to do is
| | 01:15 | go ahead and go into tablet.css, do a
Command+A with a Ctrl+C, and switch over to
| | 01:25 | phone.css, select for that, and then
paste in all of my copied code.
| | 01:31 | Okay, so now I have phone.css as using
the same styles that were set up for tablet.
| | 01:39 | So now it's looking better, but it's
still I am doing a fair amount of scrolling.
| | 01:42 | So we'll start working at the top.
| | 01:46 | Now, the very first thing I am going to
do is open up my CSS Styles panel and
| | 01:51 | I'll change the wrapper size/ That
controls the overall width for the page.
| | 01:55 | So I can find that here in my Rules
pane, and we'll change the width from 768
| | 02:01 | pixels to 300 to give the phone size a
little margin of error on either side.
| | 02:07 | So with a width of 300 pixels,
everything gets kind of crunched in, and the next
| | 02:12 | thing I want to change is the logo itself.
| | 02:15 | Ideally, you would like to keep
your logo exactly the same, but in some
| | 02:19 | circumstances it's a far better
idea to go with a simplified logo.
| | 02:22 | I am going to click into the header
area and locate my main logo, which I know
| | 02:31 | is found in header#
mainHeader, and here's the logo here.
| | 02:37 | I am going to open up the CSS Rule
Definition dialog box, and I am going to
| | 02:42 | click Browse, and then locate a version
called the logo_small.gif, and we'll choose that.
| | 02:50 | Now the other thing I need to change
is the Background positioning, because
| | 02:54 | instead of moving it over 25 pixels, I
need it to be as flush left as I can, so
| | 02:59 | I am just going to make it zero.
| | 03:02 | We'll click OK, and there's my simplified logo.
| | 03:05 | Let me go ahead and move
over to the left here a tad.
| | 03:08 | Now, the next thing is the navigation.
| | 03:10 | Now obviously I can't have it over
to the right of the logo anymore,
| | 03:14 | so I am going to move it down and
stretch it all the way cross the top.
| | 03:18 | To do that, let me click into the
navigation somewhere, and I am going to look
| | 03:23 | for mainHeader nav, which is located
right here. And I am going to change the
| | 03:30 | left positioning radically, go from 225
pixels to just 5 pixels. And if you can
| | 03:37 | see that, it's a little hard because
it's pushed all the way over on top of the
| | 03:41 | simplified logo there.
| | 03:42 | Now I want to move that down, so
that it appears right below it.
| | 03:47 | So instead of the top being zero,
I am going to make that 60 pixels.
| | 03:53 | So that will move everything
down, but now it's on two lines.
| | 03:56 | So again, we are going to have to
shrink the size of this, which will still look
| | 03:59 | good on the smartphone.
| | 04:02 | Most of the font size for things like
navigation are typically applied to the
| | 04:05 | anchor tag that's found in that
navigation, so let me go ahead and click on this
| | 04:11 | to locate the anchor tag there.
| | 04:13 | You can see this is header#
mainHeader unordered list, list item anchor.
| | 04:19 | Let me move that just a sweet bit.
There you go. And here we have letter-spacing
| | 04:26 | of .2em. And that's really a luxury
| | 04:28 | we can't afford it at this point,
| | 04:29 | so I am going to go ahead and disable
that. And let's also change the padding
| | 04:34 | left and right from 15 pixels to 5,
getting very close. And finally, let's
| | 04:42 | drop down the overall font size from
1em to .8. All right, all of our links
| | 04:52 | are now all in a row.
| | 04:53 | They are still all active
and nicely separated, as before.
| | 04:56 | So I need to change the padding on
the actual header that we see here.
| | 05:03 | So I will go up to header#
mainHeader, and instead of a padding of 245
| | 05:09 | pixels, which is what's shoving
everything over to the right here, I'll change
| | 05:14 | that to 5 pixels again.
| | 05:18 | So now we have our h1 and h2 lined up,
but obviously they are far too big,
| | 05:26 | so let's go ahead and select one of
the elements here and then go find the
| | 05:34 | hgroup h1 tag, which is here.
| | 05:37 | We'll change its size from 4.5 to 2.5.
| | 05:43 | Now, we do have a little of
openness here that we want to adjust,
| | 05:50 | so let's change that margin top,
drop that down from .7 to .4.
| | 05:58 | Now of course this h2 also needs to be adjusted,
| | 06:02 | so we'll choose its selector. And we
can first address the margin-left and
| | 06:09 | change it from 20 pixels to 10 and then modify
the margin top a little bit more and make it -10.
| | 06:21 | So we have a little bit of
white space to work with.
| | 06:24 | And then of course we want to change
its overall size, which is in the selector
| | 06:30 | below, and instead of 2em, 1.2em.
| | 06:36 | Okay everything's kind of lined up,
but you can see that we have a tremendous
| | 06:39 | amount of white space here, and that's
being controlled by the height of the
| | 06:43 | mainHeader. So, I will go and go up a
little bit and choose that rule that we see
| | 06:51 | here, which is controlling the
height. And instead of 185 pixels,
| | 06:54 | we'll reduce that to 100.
| | 06:57 | Okay, so all of our header
is now looking really good.
| | 07:01 | Now, we just have to work on the main
content, and that will come together very quickly.
| | 07:05 | Since we'll only be able to have one
column, let's change the width of each to
| | 07:10 | 300, starting with the primary section.
| | 07:13 | So, I'll click into that first section
and then find the Trail Info rule that
| | 07:19 | controls the width and change that
from 425 pixels to 300, and we also need
| | 07:26 | to modify the padding.
| | 07:28 | So instead of 25, we'll make it 5.
| | 07:32 | That will line up everything
on the left and on the right.
| | 07:36 | Now, let's adjust the h1 tag that's within
the content, and we'll change its font size.
| | 07:46 | We'll change this Trail Info h1 from 3em to 1.5.
| | 07:53 | Things are moving along pretty nicely,
and we see that there is an updated
| | 07:57 | section here, just scrolling way over to
the right, so we're going to bring that
| | 08:02 | around and position it under Trail Info.
| | 08:06 | So instead of a text-align right, I am
going to change the text-align to left,
| | 08:12 | and that brings it over, but it does
cause it to overlap. And now we see, if we
| | 08:17 | look down, that there is a top property of
-1.4em, which is what is bringing that up.
| | 08:24 | So I'll go ahead and disable that,
and now it's positioned below.
| | 08:28 | I could go ahead and delete this if I
wanted to, but sometimes when I'm first
| | 08:33 | initially designing these pages, I like
to just disable the properties just to
| | 08:37 | make sure that there's not
another solution that I might apply.
| | 08:42 | So next up is this large table that
we see here, which is extending pretty
| | 08:47 | lengthfully over to the right.
And luckily, all the content fits right within
| | 08:51 | that, so we can go ahead and locate its
width and change that from 425 to 300.
| | 08:59 | I will center that a little bit you
see that it does work the same way.
| | 09:02 | All right, we are ready to
move on to the second column,
| | 09:07 | which I'll scroll all the way down to,
and then select its basic rule that we see here.
| | 09:14 | Now you'll see that it is floated to
the right, but because it is just one
| | 09:18 | column, there is no need for that,
so let me disable that property.
| | 09:21 | You won't see a big change,
because everything has dropped down.
| | 09:24 | Now the width is already set at 300
pixels for the tablet.css, and we can keep
| | 09:30 | it here for phone.css. But in order to
make it really lined up, we need to add a
| | 09:36 | padding to the left of just five pixels.
| | 09:43 | Okay, our work here is done.
| | 09:45 | Let's go ahead and move this over to
the left, and we'll toggle through all
| | 09:50 | the various states.
| | 09:51 | So here is our cell phone
representation, and let's open it up a bit.
| | 09:56 | So here you can see the tablet size.
And now let's go full width, so that you
| | 10:04 | can see the desktop size.
| | 10:07 | So we now have three different
layouts for the different screen sizes:
| | 10:11 | desktop, tablet, and phone.
| | 10:13 | We are now ready to take a look at
special attributes for IOS devices.
| | Collapse this transcript |
| Handling the iOS viewports| 00:00 | In order for IOS devices like the
iPhone to display desktop-size sites fully,
| | 00:06 | it sets up a default viewport of 960 pixels
and then scales the content to fit that size.
| | 00:13 | While this is impressive for everyday
sites, it can really wreck havoc on sites
| | 00:18 | that were specifically
designed to fit the iPhone screen.
| | 00:22 | To make sure that the viewport is
handled properly, the WebKit-based browser
| | 00:27 | used in IOS devices recognizes a meta
tag named, appropriately enough, viewport.
| | 00:33 | Let me show you how it works.
| | 00:34 | So we'll switch over to Code and in
the head section I'll create a new line,
| | 00:41 | and then start a tag, a meta tag, and give it a
name property of viewport and a content property.
| | 00:55 | Now, this content property specifies
that the width is going to be equal to
| | 00:59 | whatever the width of the device is.
| | 01:01 | So, you type in width=device-width,
and now we just close out the meta tag,
| | 01:11 | which because it's a so-called empty tag is
self-contained, and that's all there is to it.
| | 01:17 | Now, this will ensure that your page's
width will be the same as the width of
| | 01:21 | the device's screen.
| | 01:22 | Now in some circumstances you might
find that the device is enlarging your
| | 01:26 | content to fill the screen
and thus causing distortion.
| | 01:31 | If that's happening, you can further
modify the viewport meta tag by adding a
| | 01:35 | maximum scale value.
| | 01:36 | So I am going to put a comma
after width=device-width and
| | 01:41 | enter maximum-scale=1.0.
| | 01:50 | So that will keep everything exactly the same.
| | 01:52 | And now if we take a look at the
content on an iPhone, you should see the
| | 01:56 | redesigned site exactly as expected.
| | Collapse this transcript |
|
|
4. Native Media ImplementationEmbedding video without a plug-in| 00:00 | One of the main reasons HTML5 has
gotten the jumpstart it has is the new video
| | 00:05 | tag, which allows for
plug-in-free video playback.
| | 00:09 | The basic code for applying the
video tag is simplicity itself.
| | 00:13 | Let's dive in to Dreamweaver
and I'll show you what I mean.
| | 00:16 | So I have the trails.htm file open here,
and you can see over on the right-hand
| | 00:22 | side under my Trail News section I have a
new video that I want to put in right here.
| | 00:27 | So I'll just select a little bit of
this text, and when I go to Split view, that
| | 00:32 | will bring me right to that section.
| | 00:34 | Here, you can see I have a
comment, "Video goes here."
| | 00:38 | I'll delete that and start
entering in the video tag.
| | 00:42 | And again, once I start typing, you can
see that code hints is right there for
| | 00:47 | me. There is a video.
| | 00:48 | So I will go ahead and hit Return once
that's highlighted, and now there is a
| | 00:52 | series of attributes to enter in the
video tag--the primary one being of
| | 00:55 | course the source for the video tag.
So that's src. And now we have our browse capability.
| | 01:01 | I'll hit the Return or Enter and then
go over to my site root and then open up
| | 01:07 | the _video category.
| | 01:09 | The one we want initially
is the explore_promo.mp4.
| | 01:15 | Go ahead and choose that.
| | 01:18 | Now, let's go ahead and add some
controls to this, so that there are some on-
| | 01:22 | screen play and pause controls and so forth.
| | 01:26 | So the way you do that is just enter in
the word controls, and it's a Boolean,
| | 01:31 | so you can enter in just controls or if
you're following XHTML syntax you would
| | 01:36 | enter in controls=controls.
| | 01:40 | The other two attributes we want
to enter are the width and height.
| | 01:43 | I am going to go ahead and give it a
width of 420 pixels and then a height of 236.
| | 01:51 | And once we have that, we close the opening
tag and then complete the tag with a /video.
| | 02:00 | Okay. So let's go ahead and take a
quick look at that in Live view,
| | 02:06 | and here you'll see a space for the
video and what appears to be perhaps the
| | 02:11 | first frame of the video, but no video controls.
| | 02:14 | This is one of the drawbacks of the
current implementation of Dreamweaver.
| | 02:17 | With the HTML5 video,
| | 02:19 | you can't actually preview it here.
| | 02:20 | So let me go ahead and save this file,
and then let's preview it in Safari.
| | 02:29 | And there you see the
video with the video controls.
| | 02:33 | I'll go ahead and hit Play.
| | 02:34 | (video playing)
(Male Speaker: Beautiful scenery)
| | 02:39 | And our video is up and
running and looking pretty smooth.
| | 02:41 | All right, so let's jump back to Dreamweaver.
| | 02:44 | Now, this would be great if all
browsers were just like Safari, but of course
| | 02:51 | they're not. And if we try to preview
this in say Firefox, we'll get our box
| | 02:59 | indicating that there's something there,
but there is an X there, indicating it
| | 03:03 | doesn't know what it is.
| | 03:04 | So we have to add a number
of different codecs, so it's
| | 03:08 | cross-browser compatible.
| | 03:09 | So let's head back to Dreamweaver and
go back into Split view, to the code,
| | 03:16 | and now we're going to alter the video tag to
add in a variety of different other sources.
| | 03:21 | So I am going to open up this video tag
a bit, and I am going to press Tab just
| | 03:27 | to show that it's nested here,
and we're going to put in a source tag.
| | 03:34 | So this allows us to specify different codecs.
| | 03:37 | The first source tag I am
going to put in is the mp4.
| | 03:40 | So I am actually going to go over and
pull that right from the initial video tag
| | 03:45 | and drop it in there.
| | 03:48 | Clean up a little extra white space here.
| | 03:51 | And then we need to put in a type
attribute, and the type that we have here
| | 03:56 | starts off with video/mp4.
| | 04:03 | Now, source is an empty tag, so
I need to put in the /> there.
| | 04:10 | Now, this is just the first of three
different codecs that we'll need to put in,
| | 04:15 | so let's go ahead and repeat that again.
| | 04:17 | So let's go ahead and put in another
source tag, and this one will have a
| | 04:24 | different src attribute.
| | 04:25 | This time we're going to put in webm
video, and that has a type of video/webm.
| | 04:36 | And then the third and final one we're
going to put in is for Ogg Theora, which
| | 04:41 | is a new format specifically made
for HTML5, and you can see it has a file
| | 04:48 | extension of .ogv, so explore_
promo.ogv. We'll choose that.
| | 04:55 | And we need to put in its type as well,
which of course is video/ogg for Ogg.
| | 05:03 | All right, so let's close out that source tag.
| | 05:08 | One thing I do want to point out.
| | 05:10 | When you are doing this you have to
make sure that the MP4 codec comes first,
| | 05:14 | and that's because the IOS devices--
iPhone and iPad--have that requirement.
| | 05:19 | That may change in the future,
but that's the way it works right now.
| | 05:22 | Okay, so let's go ahead and Save.
| | 05:25 | We still can't preview in Dreamweaver,
but we should be able to preview now in
| | 05:28 | Firefox, so let's head there. And now
you can see the controls showing up.
| | 05:34 | I'll go ahead and hit Play.
| | 05:35 | (Male Speaker: Beautiful scenery.
Plenty of places to ride.)
| | 05:42 | And we'll close on that
nice scenic sunset there.
| | 05:45 | So now we have it working in Firefox.
| | 05:48 | Let's head over to Safari.
| | 05:50 | I'll hit Refresh just to make sure
we're getting the same page, and this
| | 05:55 | time I'll go ahead and seek it out
a little bit. Oh, I hit that sunset
| | 05:58 | right on target there.
(Male Speaker: Beautiful weather.)
| | 06:02 | That's all working swell.
| | 06:03 | We can even go full-screen.
(Male Speaker: It just doesn't get any better than this.)
| | 06:11 | I couldn't have said it better myself.
| | 06:13 | Well, keep in mind that the video
situation is still very much in flux.
| | 06:16 | Make sure to test thoroughly to ensure
you've got all your video bases covered.
| | Collapse this transcript |
| Using the HTML5 Video Player widget| 00:00 | If you'd rather not hand-code your video tags,
the HTML5 video player widget is just for you.
| | 00:07 | The HTML5 video player not only writes
out all the code you need, it's totally
| | 00:11 | customizable, with a wide range of player skins.
| | 00:15 | You can find this widget by
accessing the Dreamweaver's Widget Browser.
| | 00:18 | So we'll start by going to our page
where I have a section intended to put in my
| | 00:23 | video, and I will highlight
that and give rid of the comment there.
| | 00:28 | Now, let's open up the Widget Browser,
and you do that by going up to the top of
| | 00:34 | your Dreamweaver screen and from the
Extension icon, choose Widget Browser.
| | 00:41 | Now, if you have not worked with the
Widget Browser before, the first time you
| | 00:45 | do this you'll need to install it,
and it uses Adobe AIR, so if you don't have
| | 00:49 | that installed, that will also
be installed at the same time.
| | 00:53 | Once the Widget Browser opens up, you
will need to sign in using your Adobe
| | 00:57 | account. So I'll enter in my
email address and my password.
| | 01:06 | You also have the option for
creating an account, if you haven't already.
| | 01:12 | Now that we're signed in, you can see all
of the different widgets that are available.
| | 01:17 | It's really a great feature for
Dreamweaver, and I've found a lot of use for it recently.
| | 01:21 | So the one we're looking
for is the HTML5 video player.
| | 01:26 | Because there are constantly new
widgets being added, you may find it in
| | 01:29 | a different location.
| | 01:31 | You can either sort by widget name, author,
date posted, number of downloads, and its rating.
| | 01:38 | So let's go ahead and take a look at it.
| | 01:40 | I'll click on it once, and we can go
ahead and read all about it and how it works.
| | 01:45 | This time I am going to go ahead and
choose Add to My Widgets, accept the
| | 01:52 | license, and then go to My
Widgets, and here you'll see it.
| | 01:57 | One of the cool things about the
various widgets is that they can be configured
| | 02:00 | to fit more precisely into your site.
| | 02:02 | So let's go ahead and open it up.
| | 02:05 | And here you can see exactly what it is.
| | 02:07 | When I first roll over it,
a control bar appears.
| | 02:11 | It's kind of a light blue.
That's not really fitting for mine,
| | 02:14 | so I am going to go ahead and
choose something else, and I'll do that
| | 02:18 | by clicking Configure.
| | 02:19 | Here you see I have got a number of
options, including whether or not to
| | 02:22 | preload it, to not preload it,
or just preload the metadata.
| | 02:26 | I am going to keep that at Auto. Autoplay,
| | 02:29 | I don't want that to start right
away, so I'll keep that at Off.
| | 02:31 | I certainly don't want it to Loop.
| | 02:33 | Now, here are all the themes.
| | 02:34 | These are all jQuery themes, so if you
are familiar with those, you will know
| | 02:38 | which one you want to look for;
otherwise you can just choose one--
| | 02:40 | here let's just go up and choose le-frog.
| | 02:43 | It might be green, and then when
you roll over, you see in fact it is.
| | 02:49 | So the one I am looking for is one
called black-tie, which I believe is towards
| | 02:53 | the top, and there it is.
| | 02:55 | This is kind of a little bit more
sophisticated, but that looks good.
| | 02:59 | So I am going to go ahead and name
this, and I'll just call it Black Tie,
| | 03:07 | and save my preset.
| | 03:09 | Now, once you've saved the preset,
you don't need to work with the
| | 03:12 | Widget Browser anymore.
| | 03:13 | So let's head back to Dreamweaver.
| | 03:15 | Now, I have my cursor exactly
where I want my video to appear,
| | 03:19 | so now I'm ready to insert the widget.
| | 03:22 | So I go up to Insert, choose Widget,
and the Widget dialog box appears.
| | 03:28 | This dropdown list here will show all
the widgets that I have. I only have one,
| | 03:32 | so we'll just stick with that.
| | 03:33 | But it will also show
whatever presets are available.
| | 03:36 | So if I click on that, I can see my
Black Tie preset that we configured.
| | 03:40 | I'll select that and then click OK.
| | 03:44 | So now all the code is put in, and you
can see that there's a fair amount of
| | 03:49 | code here. It actually puts in a
reference to sample videos, so that if we take
| | 03:55 | a look over here on the right side,
if you're in Live view, you'll notice that there
| | 03:59 | is no width or height offered here initially.
| | 04:03 | We're going to change all
those parameters anyway.
| | 04:05 | So let's go in and bring in code
that's specific for our video, so change our
| | 04:12 | width to 420 and the height to 236.
| | 04:18 | One of the nice features of the HTML5
video player is that it has a poster
| | 04:22 | attribute which allows you to insert
a still graphic that is shown right at
| | 04:27 | the first of the video.
| | 04:29 | So we're going to go ahead and
highlight what they have here and delete that.
| | 04:34 | Now, there is a way to bring up the
Browse button, and you do it by pressing
| | 04:38 | down the Ctrl and then hitting the
Spacebar, and that will open up code hints.
| | 04:43 | So once that's done, I can hit Return
or Enter, and in the _video folder you'll
| | 04:48 | see there is a poster.jpg.
| | 04:52 | So I'll click Choose there and
Dreamweaver will write out the path for me.
| | 04:57 | And we can take a look at some of
the other options that we have here.
| | 05:00 | preload="auto", that
comes from our configuration.
| | 05:03 | And now the next thing we need to do
is modify the source tags that you see
| | 05:08 | here, so that the src attributes
point to our videos and not the sample one.
| | 05:14 | So again, I am going to choose this
first one here, and this is for webm, so I
| | 05:20 | am going to use my Ctrl+Spacebar trick
to bring up the Browse button and then
| | 05:23 | select the web video.
| | 05:26 | And then we'll do the same thing
for the mp4, again removing it.
| | 05:32 | Ctrl+Spacebar, Return, choose mp4.
| | 05:37 | And then finally let's do the ogg.
Ctrl+Spacebar, browse, ogv. Okay.
| | 05:47 | So all three are set up, and one thing
I want to do is to make sure to move the
| | 05:52 | mp4 video right to the front of these
three source tags, and that's because the
| | 05:58 | IOS devices require that in order
for that to play correctly. Okay.
| | 06:04 | We're ready to save our file,
and when you press Save, you will notice that
| | 06:09 | Dreamweaver comes up with the
Copy Dependent Files dialog box.
| | 06:13 | This is to inform you that it's copying
some files over into your site root and
| | 06:19 | that these files will need to be
uploaded if they're being used.
| | 06:22 | Now, Dreamweaver does create a kaltura-
html5player-widget folder to hold all of these.
| | 06:30 | Kaltura is the company that the
Dreamweaver team partnered with in order to
| | 06:34 | make this HTML5 player.
| | 06:36 | So just go ahead and click OK.
| | 06:39 | If we look over in Live view now--let's
go to Design view and then scroll down--
| | 06:43 | and now you see an actual preview of it.
(Male Speaker: Beautiful scenery.)
| | 06:49 | And unlike with the standard video tag,
we actually have in-Dreamweaver playing.
| | 06:55 | Now, let's preview this in a standard
browser, just to show you a little bit
| | 06:59 | more of the features.
| | 07:01 | There you see the poster image being used.
| | 07:05 | Here are our Black Tie controls, and there
are a few other options that we have here.
| | 07:10 | We have a Fullscreen option that we could use.
| | 07:13 | There is also a Player Options button.
| | 07:15 | If I choose that, you see I have an
option for selecting which type of video
| | 07:20 | player I want to use.
| | 07:21 | I can download the file or share it,
or learn more about the Kaltura player.
| | 07:25 | Let's just verify that it works.
(Male Speaker: Beautiful scenery.)
| | 07:34 | It is beautiful scenery indeed.
| | 07:36 | So as you can see, the HTML5 video
player really is a quick way to insert the
| | 07:41 | proper HTML5 video code, complete
with custom player skin and other
| | 07:46 | configurable options.
| | Collapse this transcript |
| Playing audio without a plug-in| 00:00 | Like video, audio has required a
plug-in to be heard, until HTML5.
| | 00:05 | The new audio tag provides plug-in-
free playback for many audio formats.
| | 00:10 | The audio tag is pretty similar to
the video tag in a number of ways.
| | 00:13 | Let me show you what I mean.
| | 00:14 | So we have here the trails.html file,
and you can see over on the right-hand
| | 00:21 | side, right below Trail News, I have a
little section for where I'm going to
| | 00:25 | put in my podcasts.
| | 00:26 | So I am going to select just a couple
of words there and then go over to Split
| | 00:30 | view, so that Dreamweaver will take
me right to that section in the code.
| | 00:33 | Here you can see I have a comment
that says "Audio goes here." I'll highlight
| | 00:38 | that and remove it,
| | 00:40 | so my cursor is now placed
and ready for the audio tag.
| | 00:42 | So I'll go ahead and start putting that in.
| | 00:45 | And if I type in just 'au', you can
see that the code hints pops up audio.
| | 00:50 | Let's go ahead and accept that with a
Return, and now we've got to find the
| | 00:55 | source for the audio.
| | 00:56 | So that's an src attribute.
| | 00:59 | And once I put that in, I'll be able to
browse to that file by pressing Return
| | 01:04 | or Enter and look in the _assets folder,
and here you'll see a couple of files.
| | 01:09 | We are going to with the mp3 file at first.
| | 01:12 | So I'll click Choose, and now we'll
put in another attribute that will
| | 01:17 | allow on-screen controls.
| | 01:20 | So I'll type in the word
'controls', and there is my code hint.
| | 01:25 | And this is a Boolean attribute, and in
this case Dreamweaver has already set up
| | 01:29 | XHTML syntax for the Booleans, which
is to put controls="controls", so I'll go
| | 01:35 | ahead and hit Return here to accept that.
| | 01:37 | And now let's close out the tag and use
Dreamweaver's code completion to finish that off.
| | 01:44 | Okay. So I am going to go ahead and save the
page with a Command+S or Ctrl+S, and then
| | 01:50 | let's preview it in Safari,
which supports the MP3 format.
| | 01:56 | And here you see a player
exactly where I expected it to be.
| | 01:59 | I'll go ahead and push Play.
(music playing)
| | 02:03 | And there is that great opening music.
| | 02:05 | So now let's go back to Dreamweaver.
And while it works in Safari, if we Preview
| | 02:12 | the same file in Firefox, you will
get a placeholder but a big X there,
| | 02:17 | indicating it doesn't recognize the format.
| | 02:20 | So let's go back to
Dreamweaver and fix that problem.
| | 02:25 | As with video, you need to put in different
source tags for different formats of audio.
| | 02:31 | So I am going to go ahead and open up a
little space here, press tab, then put
| | 02:36 | in the beginning of a source tag,
which also has a src attribute.
| | 02:41 | Now, this first one is going to be
actually the MP3 file that we just had
| | 02:45 | here, so I am going to go ahead and
just move that straight down, then put in
| | 02:50 | a type for that, and this type is audio/mpeg,
and then we'll finish off the source tag.
| | 03:01 | Now, this is an empty tag, so you put in a />.
| | 03:06 | All right, one more source tag to
put in, and the src here goes to
| | 03:13 | ex_ca_podcast.ogg, so I'll click
Choose, and this type is audio/ogg.
| | 03:26 | We'll finish off the tag here, and now
it should be ready to play cross-browser.
| | 03:30 | So I am going to go ahead and save it,
and this time let's go back to Firefox, and
| | 03:37 | here you see it being previewed with
the controls, looking slightly different
| | 03:41 | from that in Safari. That's okay.
| | 03:43 | Now I'll go ahead and hit Play.
(music playing)
| | 03:50 | The audio works. We can check out the seek by just
clicking somewhere in the Explore bar.
| | 03:56 | (Male Speaker: Here's what Ron had to say.)
| | 03:58 | And we can here that the rest of
the podcast is working just as well.
| | 04:02 | Now, Dreamweaver also supplies
support for certain other attributes for the
| | 04:07 | audio tag, such as if you want to play
autoplay or loop, so you can present the
| | 04:14 | audio on your page the way you want to.
| | Collapse this transcript |
| Drawing on a canvas| 00:00 | Imagery in web pages has almost
exclusively been the territory of graphic
| | 00:04 | programs like Photoshop, Fireworks, and
Illustrator with web-compatible output:
| | 00:09 | JPEGs, GIFs, and most recently PNGs.
| | 00:13 | HTML5 includes a tag named canvas
that allows real-time image creation as
| | 00:19 | programmed in JavaScript.
| | 00:20 | In this video I'll show you how to add
a canvas tag to your web page, and a few
| | 00:25 | basic JavaScript drawing
commands to fill up your canvas.
| | 00:29 | So I have the canvas.htm file open
here, and you can see over here on the
| | 00:34 | right-hand side I have a little
section called Membership Drive in High Gear.
| | 00:38 | When I go to Split view, this is where
my canvas section is going to go.
| | 00:43 | This will be a chart showing the
Membership Drive numbers going up.
| | 00:48 | So I'll remove the comment here
and start to enter in the canvas tag.
| | 00:54 | Now when I type the first couple of letters,
code hinting pops in, and there is canvas.
| | 00:59 | Now you want to make sure to give your
canvas an ID, so I am going to go ahead
| | 01:04 | and put in theCanvas as my ID.
| | 01:08 | The ID is necessary so that JavaScript will
know exactly what element it's working with.
| | 01:12 | Then we put in a width and height.
| | 01:15 | In this case, the width is going to
be 300, and the height will be 225.
| | 01:24 | Notice that there is no px
necessary for any of this.
| | 01:27 | Let's close out the canvas tag.
| | 01:29 | This is actually all you need to do
for the HTML portion of the canvas tag.
| | 01:34 | And if I go back over to Design view,
you can see that now that section has
| | 01:39 | been opened up and it's reserving
a blank canvas, if you will, for the
| | 01:44 | JavaScript drawing to go on.
| | 01:46 | Now we're going to go over back to code.
| | 01:49 | Let's go ahead and go up to where the
body tag starts, and I'm going to put this
| | 01:53 | right in the very end of the head tag
here. And we'll start off by setting up a
| | 01:59 | script, and you can do that by going
over to the window and opening up the
| | 02:05 | Snippets panel. And here we
see a JavaScript category.
| | 02:10 | Scroll down just a little bit
and you'll see starter scripts.
| | 02:13 | I am going to go ahead and put
in the starter script here just by
| | 02:19 | double-clicking on it and that
enters in the necessary script tag.
| | 02:23 | Let's go ahead and start to build out
our function, and we're going to create a
| | 02:27 | function called doCanvas.
| | 02:31 | So I am just going to type in
'function doCanvas' and you can ignore the
| | 02:36 | syntax errors that pop up.
| | 02:39 | Dreamweaver can be a little
hyperactive about that sort of thing.
| | 02:42 | I'll just open and close the
parentheses there and then open up a curly brace,
| | 02:50 | make a couple of lines, and close off
the curly brace, and that should get rid
| | 02:54 | of the syntax errors.
| | 02:55 | So now we're ready to actually
put in a couple of JavaScript lines.
| | 03:00 | Let's set up the canvas code.
| | 03:01 | Now these two lines will vary
according to what you decide to use as your
| | 03:05 | variables, but the actual
functionality that it includes is really necessary.
| | 03:10 | So let me go ahead and tab in a
bit, and we'll set up a variable.
| | 03:15 | I am going to call this
my_canvas and set that equal to document.
| | 03:25 | Now Dreamweaver has a great deal of
JavaScript code hinting available to you, so
| | 03:31 | after I press the period after document,
I get the code hints, and if I remember
| | 03:36 | that it has something to do with get,
I can go ahead and type that in.
| | 03:40 | And really what I'm looking for is
the very first one, getElementById.
| | 03:44 | So I'll go ahead and hit Return.
| | 03:46 | The ID that I want to put in is what I
called my canvas, which was theCanvas.
| | 03:54 | That has to go in quotes, and then
I'll close off the parentheses and put a
| | 03:58 | semicolon, indicating the
end of the JavaScript line.
| | 04:02 | That's one of the two lines that we'll need.
| | 04:04 | Now the second one is another variable,
and this is an essential part of the way
| | 04:08 | that JavaScript works with the
canvas tag is it sets up a context.
| | 04:13 | Now, there are a couple of different contexts.
| | 04:15 | There is one for two-dimensional
and another one for three-dimensional.
| | 04:18 | The two-dimensional one is much
more widely implemented at this point.
| | 04:22 | The 3D one is somewhat still under development.
| | 04:25 | Let's go ahead and set up that variable,
which is going to be myCanvas_contacts.
| | 04:32 | That's just a reminder that
that's what we're working with here.
| | 04:37 | And you set that equal to whatever your
earlier variable was, which is my_canvas.(the context),
| | 04:46 | and you can see that code
hint available to me there. And you'll
| | 04:50 | note over on the right-hand side
that Dreamweaver recognizes that it's an
| | 04:53 | HTML5 document object model, or DOM 3,
getContext. And right in the middle of
| | 05:00 | those parentheses, we're going to put a
couple of quotes and within the quotes
| | 05:04 | we'll put in 2d, okay.
| | 05:06 | We'll finish off our JavaScript here
with a semicolon, and now this is just
| | 05:11 | really the setup of our canvas function.
| | 05:15 | Now to trigger this, we're going to
go down a little bit further and in the
| | 05:18 | body tag I am going to put in an onLoad event,
and onLoad, we are going to say doCanvas.
| | 05:28 | So at this point we've just established
that there is a canvas and we have our
| | 05:31 | function call ready and everything to go.
| | 05:33 | So now we're going to start adding in
some JavaScript actual drawing tags.
| | 05:38 | So let's go back to the doCanvas
function, and now I am going to enter a line
| | 05:44 | to create a rectangle.
| | 05:45 | What we'll do first is invoke my variable,
myCanvas_context, give it a dot there,
| | 05:55 | and create the stroke for rectangle.
And then the values for that are the
| | 06:02 | upper-left corner coordinates and the
lower-right corner coordinates, which in
| | 06:07 | this case is going to be 0,0,225,225.
| | 06:14 | So these are two pairs of X and Y coordinates.
| | 06:18 | We'll close out the
parentheses and add a semicolon.
| | 06:23 | strokeRect creates unfilled rectangles.
| | 06:26 | fillRect creates a filled rectangle.
| | 06:30 | So we can actually at this point go
over and take a look, and here you see the
| | 06:37 | first of my canvas implements a
rectangle. Very sexy, don't you think?
| | 06:42 | So now let's head back and
let's add in a little bit more.
| | 06:47 | Besides simple graphic primitives
like rectangles, you can also incorporate
| | 06:51 | existing web graphics into your canvas.
| | 06:54 | Now rather than you having to enter
in all this code by hand, I've set up a
| | 06:58 | couple of JavaScript files
for you to cut and paste it in.
| | 07:01 | Let's create a new line and then go
over to the Files panel and open up the
| | 07:06 | JavaScript folder, and I'll
expand that a little bit.
| | 07:10 | You can see the files there.
| | 07:11 | Start is just the one that we just
entered there for the doCanvas function.
| | 07:15 | Now, the first one we're going to open
up is image.js. Select that, copy, and
| | 07:23 | we'll go over and paste it in, correct
my little indent there. And what this
| | 07:29 | does is it sets up a new variable chart_
bg for background and sets that to a new
| | 07:36 | image and then says that that source
is going to be in the images folder
| | 07:42 | chart_bg.gif, which you can see I
have here in my _images folder.
| | 07:51 | And then it sets up a function call
that happens onLoad once they have totally
| | 07:56 | loaded in the function.
| | 07:58 | Now let's take a look at that.
| | 07:59 | I am going to go ahead and save it and
head on over to my Live view, and there
| | 08:04 | you see the image brought in by the canvas tag.
| | 08:08 | So we have our nice graph background set up,
| | 08:12 | and now we're ready to plot some points.
And of course to do that you're going
| | 08:15 | to need to draw some lines.
| | 08:18 | We have a file called
lines.js, which I can open up.
| | 08:24 | The way that this works is it starts by
giving a moveTo command, which starts off
| | 08:29 | exactly where you want your line
drawing to begin, and from there it just plots
| | 08:34 | from one line point to another.
And then finally at the end, it gives a
| | 08:39 | strokeStyle, which is the color, and
the command to commit to the stroke.
| | 08:44 | So I am going to go ahead and
select all of that, back to myCanvas tag.
| | 08:49 | Now you want to make sure that
you put this right after it says
| | 08:53 | myCanvas_context.drawImage. And before
the closing curly brace here, I will go
| | 09:00 | ahead and put that in.
| | 09:02 | Now we can preview that by just
clicking over, and there you see my Membership
| | 09:10 | Drive going up, up, up
exactly the way we hope it to be.
| | 09:14 | Now of course the values that I put
in here were hand coded, but you can
| | 09:18 | easily imagine that these could be driven
dynamically if you're using PHP or ColdFusion.
| | 09:23 | Now the Canvas tag can also
be used for inserting text.
| | 09:28 | Well, I do have a text file, text.js
here, and here this sets up some alignment
| | 09:37 | just to make sure that it's in the
right place, a fillStyle which is the color,
| | 09:42 | the font that we're going to use--and
this is just the basic sans serif font, set
| | 09:46 | to bold and 30 pixels--and then the
actual text and the placement for that text,
| | 09:52 | where that's going to start.
| | 09:52 | Let's go ahead and select that, copy,
back to canvas, and again you want to put
| | 09:59 | it right after where the lines were
and before the closing curly brace there.
| | 10:06 | And now once that is in, we'll go back
over, and there's our text, putting it in
| | 10:14 | exactly where we had hoped with a
similar color to the color that's being used
| | 10:19 | on the page, so that it all blends in.
| | 10:21 | Drawing simple charts like this is
really just the beginning of what you'll be
| | 10:24 | able to do with the Canvas tag.
| | Collapse this transcript |
|
|
5. Next Generation FormsInserting new input types| 00:00 | I've got great news!
| | 00:01 | Forms got a major overhaul in HTML5, with
lots of new form controls and attributes.
| | 00:07 | I have also got some not-so-great news:
there is not a lot of browser support
| | 00:11 | for these new features yet.
| | 00:13 | And finally, there is some not-so-bad news.
| | 00:17 | You can add the new code to your form,
maintain current compatibility, and be
| | 00:21 | ready when the browsers get
their form support up to speed.
| | 00:25 | Let's start by taking a
look at the new input types.
| | 00:28 | So here I have forms.htm open, and over
on the right-hand side you can see as I
| | 00:34 | scroll down that there is a form for
submitting a review with a variety of text
| | 00:39 | fields and one big text area down at the bottom.
| | 00:41 | Now, some of the new form types are ones for
email, telephone, and web sites, or URLs.
| | 00:50 | Let's start by working with the Email field.
| | 00:53 | So, I will go into Split
view, and here on the code
| | 00:57 | you can see that I have input type text.
| | 01:00 | I am going to go ahead and
change that to input type email.
| | 01:05 | Now, the beauty of this is that
browsers that don't recognize an input tag with
| | 01:09 | a type email will just
render it as a text field.
| | 01:11 | So you are good to go
for both types of browsers.
| | 01:15 | Now, we'll go ahead and make the change to
the input type text for the Phone as well.
| | 01:21 | Now it's not phone as the type
text, it's tel, short for telephone.
| | 01:25 | And then the third one that we can go
ahead and change is one for the web site,
| | 01:30 | which instead of a type text will be a type url.
| | 01:33 | Now, I will go ahead and save this.
| | 01:37 | Unfortunately, there is nothing really
to preview that's any different here.
| | 01:40 | The only actual impact that you
would see would be on mobile phones,
| | 01:45 | especially the iPhone where different
keyboard options appear according to the
| | 01:50 | different type of input tag.
| | 01:53 | Now, one thing I do want to show
you is that how you work with these
| | 01:56 | various elements in CSS.
| | 01:59 | So I have my Email field selected here.
| | 02:01 | Let's open up the Styles panel.
| | 02:03 | I am just going to go ahead and go
over to the code for this section and open
| | 02:09 | that up, and then we will scroll down
a little bit to where it says input type
| | 02:15 | number and input type text.
| | 02:18 | Now, here you see these various
selectors that are using a CSS3-type selector
| | 02:25 | which is set for attributes.
| | 02:28 | So if I want to make sure that my email
or URL or telephone types are the same
| | 02:34 | as my text, I can group them all in
one selector using a similar format.
| | 02:39 | While these new form types may not make
much of an impact in browsers now, the
| | 02:44 | standardization for common form fields
is important, and will likely lead to
| | 02:49 | enhanced usability across a variety of screens.
| | Collapse this transcript |
| Designing with enhanced attributes| 00:00 | Not only does HTML5 add many new types
to the forms family, but it also adds a
| | 00:05 | number of attributes that can be
applied to many form elements--and happiness.
| | 00:10 | We are already starting to see
support for these enhancements.
| | 00:14 | Let's start by taking a look
at the placeholder attribute.
| | 00:18 | The placeholder attribute displays text in
a field visible when the page first loads.
| | 00:22 | The text automatically disappears when
the field gains focus, either by being
| | 00:28 | clicked or tabbed into.
| | 00:30 | So here in my forms.htm page, I have
the form on the right-hand side, and I
| | 00:36 | have a telephone field.
| | 00:38 | Now, it might be helpful if I gave
people an example of the kind of formatting
| | 00:43 | that I'm hoping that they
will use to help in validation.
| | 00:46 | So I have selected my Phone field here.
| | 00:50 | You can see that this is a type tel field.
| | 00:53 | So I am going to go ahead and add in an
attribute and that attribute is placeholder.
| | 00:59 | And now in the value of the placeholder
attribute, I am going to put in 'Example:'
| | 01:06 | and then put in how I hope that they
will enter the number, '(212) 555-1212'.
| | 01:14 | Now, if I click back over into Live view,
there you can see it already supported
| | 01:24 | by the WebKit rendering engine,
which means support in Safari browsers.
| | 01:29 | This also has support in
Firefox and other modern browsers.
| | 01:33 | What's cool about the placeholder
attribute is that it really replaces a whole
| | 01:37 | string of JavaScript
functionality in the browsers that support it.
| | 01:42 | Another attribute that
performs a similar chore is autofocus.
| | 01:46 | Autofocus is used when there's one
element in your form that you want the
| | 01:50 | user to start with.
| | 01:51 | So at the top of my form here, I have
Trail name, and in the code I am going to
| | 01:57 | go ahead and put in autofocus, which
you can see is supported by code hints.
| | 02:04 | Autofocus is a boolean attribute, so all
you need to do is put in the name itself.
| | 02:09 | If you're working with the XHTML syntax,
then the attribute would be written
| | 02:13 | autofocus = autofocus.
| | 02:15 | So let's go ahead and save this page.
| | 02:18 | And if I switch back over to Design view,
you can see that my cursor now appears
| | 02:25 | immediately in the initial
field ready to be entered.
| | 02:30 | Both of these attributes--placeholder
and autofocus--go a long way towards
| | 02:34 | cutting back on your JavaScript dependency.
| | Collapse this transcript |
| Setting ranges with spinners and sliders| 00:00 | Many forms require
numbers indicating a quantity.
| | 00:04 | Two new HTML input types make it easier
for users to enter their values quickly
| | 00:09 | and more accurately with advanced form controls.
| | 00:12 | So here on my forms.htm page, I have a form
element with the label Number of riders.
| | 00:18 | I am going to change this from an
input type text to an input type number.
| | 00:24 | This will allow this field to
display as a spinner control on
| | 00:30 | compatible browsers.
| | 00:31 | But besides the switch to type equals
number, I also can put in a number of
| | 00:38 | attributes that control the
minimum, maximum, and initial value.
| | 00:43 | So I am going to put in the minimum,
which is put in as min, and set that to 1.
| | 00:49 | And we'll do maximum, and let's make
the maximum number of riders on the trail
| | 00:53 | 10, and then the initial value is put
in as value, and we'll set that to 1.
| | 01:00 | Now, there is not a whole lot of
browser support for the number type currently,
| | 01:05 | but you can see it working in Google Chrome.
| | 01:07 | So I am going to go ahead and save my page
and then go up and preview it in Google Chrome.
| | 01:13 | We'll go over to that field, and here you
see Number of riders. And if I click on
| | 01:21 | the up stepper, it goes up one at a time.
| | 01:25 | Now, there is another attribute that
you could use, Step, that could allow you
| | 01:30 | to change the incremental value. If you
put it to Step 2 and I started at 1, it
| | 01:37 | would go up to 3 and then 5, and so on.
| | 01:40 | I want to let you know about one
little "gotcha" that we found while
| | 01:43 | recording this video.
| | 01:45 | In a previous video we had added the
Autofocus field to the Name field here.
| | 01:51 | Now, I had to remove that in order for the
Google Chrome to show the stepper properly.
| | 01:58 | If you leave that in, what happens is
you can click the stepper but then you
| | 02:02 | have to click outside of the
stepper in order for it to advance.
| | 02:06 | So hopefully this will be
fixed by the next version.
| | 02:08 | All right, now we have another type of
control that we can use, and that's a
| | 02:14 | sliding range control.
| | 02:15 | We are going to use that here
for our Rate the trail section.
| | 02:20 | So here we are going to change the
input type from text to range, and again,
| | 02:27 | we'll give it a minimum and maximum.
And this time we'll put in the minimum as 1
| | 02:34 | and the maximum as 50.
| | 02:36 | You can also put in an initial value,
which I'll put in as value, and let's make
| | 02:42 | that 25 so we are right in the middle there.
| | 02:45 | Finally, one of the other things that
you can do, as I mentioned with the number
| | 02:49 | type, is put in a Step attribute.
| | 02:51 | I am going to use that here, and here
you see the code hint pop up, and let's
| | 02:56 | make it 5. So we will go up in increments of 5.
| | 02:59 | All right, I am going to go ahead and save
the page, and let's head back to Google Chrome.
| | 03:07 | I'll press Refresh, and now you see my
slider control going from Worst Ever to
| | 03:14 | Best Ever. And as I move it along, you
can see it jumping just a little bit, so
| | 03:20 | I could leave it at the Worst Ever or
slide it on up to the Best Ever or maybe
| | 03:25 | even somewhere just a little bit in between.
| | 03:27 | Now, I think that you'll find that
these new controls available in the number
| | 03:32 | and range input types can really bring
some much-needed functionality to your
| | 03:36 | forms when they're implemented into the browser.
| | Collapse this transcript |
| Choosing calendar dates| 00:00 | Among the most challenging types of
data to enter correctly are dates and time.
| | 00:05 | HTML5 comes to the rescue with a full
slate of input types that allow for easy
| | 00:10 | date/time selection.
| | 00:12 | Unfortunately, browser support is super limited.
| | 00:15 | Only the current version of Opera
displays these calendar-based tags correctly
| | 00:20 | as of this recording.
| | 00:22 | Hopefully that situation will change
in the near future, but while we are
| | 00:25 | waiting for the other browsers to catch
up, let's take a look at how you add a
| | 00:29 | calendar to an HTML5 web form in Dreamweaver.
| | 00:32 | I am going to scroll down to the
section where I have Date of trip, and this is
| | 00:37 | where I want to add a calendar.
| | 00:39 | So let's go over to Split view.
| | 00:42 | Now, there are a number of different
type attributes that are date/time related.
| | 00:46 | The simplest is using the word date.
| | 00:49 | So I'll change the text type to date,
and now save this, not making any other
| | 00:58 | changes, and then let's
take a look at it in Opera.
| | 01:03 | I'll scroll down to my form, and here
you see that Date of trip is no longer a
| | 01:09 | text field, but appears to be a dropdown control.
| | 01:12 | So when I click on the dropdown
indicator there, a little calendar pops up, and I
| | 01:18 | can go ahead and choose Saturday the 26.
And there you see that the date is put
| | 01:23 | in in the proper format for my database.
| | 01:26 | Now, let's go back to Dreamweaver,
and I'll show you a couple of the other
| | 01:30 | attributes that are available.
| | 01:31 | Now, if you needed to also collect the time,
| | 01:34 | you could change the
attribute from just date to datetime.
| | 01:40 | I'll save and head back to Opera and
then go ahead and hit Refresh, and now you
| | 01:47 | see that in addition to the calendar
pop-up, I also have a little stepper
| | 01:51 | control for the time.
| | 01:52 | So I could step through the various
time elements there, or it's a field that I
| | 01:56 | can type right into.
| | 02:00 | Now, you could also limit your
calendar to display just a month view.
| | 02:03 | Let's head back to Dreamweaver,
and we'll change the type to month.
| | 02:08 | Save, and then return to Opera,
and Refresh, and now when I drop down I'll see
| | 02:17 | the various months there. And as I go
through it, if I choose one, notice that I
| | 02:22 | can't select any particular day, I
can only select the entire month.
| | 02:25 | So when I put that in,
the year and date come up.
| | 02:28 | This is obviously really good for credit cards.
| | 02:32 | Not only can you restrict it to a
month, but you could also do a week.
| | 02:36 | So we'll change the type to week, save,
and refresh our preview, and here we
| | 02:43 | have the calendar again.
| | 02:44 | Notice that over on the left-hand
column I now have the week of the year.
| | 02:48 | So if I move it up to let's say the
end of March and choose that, that's
| | 02:52 | the 13th week in 2011.
| | 02:56 | Finally, if you need just the
time, you can do that as well.
| | 03:00 | So we'll change the type to time and
save it, and preview in Opera after
| | 03:07 | Refreshing the page. And here you see
that instead of the dropdown calendar, I
| | 03:13 | have the stepper control, which I can
click up and it will start right at 00,
| | 03:18 | which is the first moment of the day.
| | 03:21 | If I want to go ahead and change the
hour, I can change it to 10, and then if I
| | 03:26 | hit the stepper controls, the hour will advance.
| | 03:29 | And similarly, if I needed to change
the time of the minutes, I can select that
| | 03:36 | and the stepper will control the minutes.
| | 03:39 | Although the current browser support
for date/time functionality is really,
| | 03:43 | really just getting underway, I think
it's only a matter of--dare I say it?--time
| | 03:48 | before the other browsers get up to speed.
| | Collapse this transcript |
|
|
6. New Wave TypographyUnderstanding web fonts| 00:00 | Until very recently, type on the web was
very restricted and limited to a handful
| | 00:05 | of typefaces common to the major
operating systems--or, in the words of every
| | 00:10 | print designer looking to make
the transition to the web, "boring."
| | 00:14 | Happily, that situation is rapidly
changing for the better. The latest browsers
| | 00:19 | now make it possible for web pages to
incorporate fonts that are not on the site
| | 00:24 | visitor's machine, but rather
linked and quickly downloaded.
| | 00:28 | These web fonts depend on the
CSS3 declaration known as font-face.
| | 00:35 | The font-face declaration is now
supported in Firefox 3.5, Safari 3.2, Opera
| | 00:42 | 10.1, Google Chrome 5.0,
and soon Internet Explorer 9.
| | 00:49 | In addition to support for the
font-face declaration, the other factor driving
| | 00:53 | adoption of this technology is the
rather sudden availability of web font
| | 00:57 | licensing from the various font foundries.
| | 01:02 | For the longest time font foundries
only allowed their fonts to be licensed for
| | 01:06 | desktop use by one or more designers.
| | 01:09 | Once web fonts were beginning to be used,
however, all the major foundries came
| | 01:13 | out with licenses for web site use.
| | 01:16 | There are two basic
approaches to using web fonts:
| | 01:19 | self-hosting and offsite hosting.
| | 01:22 | The former does give you more control,
but it's generally costlier and a
| | 01:26 | little more hassle.
| | 01:28 | Using an offsite host for your font is
less expensive and easy to implement, but
| | 01:33 | you do have to be aware of a
slight increase in your page load.
| | 01:36 | I found that with a limited number
of fonts the load time is negligible,
| | 01:40 | but you will need to do your own
testing to find the right balance for you.
| | 01:44 | Okay, enough talking about web fonts.
| | 01:46 | You are ready to see how to
incorporate them in Dreamweaver using the
| | 01:49 | @font-face CSS3 declaration.
| | Collapse this transcript |
| Declaring @font-face families| 00:00 | The key to web fonts is
the @font-face declaration.
| | 00:04 | This small bit of CSS code allows you to
incorporate nonstandard fonts into your page.
| | 00:10 | Let me show you how it works.
| | 00:12 | So I have here the fonts.htm,
and what we are going to attempt to do is to
| | 00:17 | change this h1 that we see here--Our Mission:
| | 00:20 | Who we are--into something
a little bit more fanciful.
| | 00:23 | I am going to go to the main.css, and we
are going to go ahead and open it up all
| | 00:28 | the way into Code view.
| | 00:29 | We are going to go to the very top of
the page and then come down a little
| | 00:34 | bit past all the comments, right to
where the html body tag declaration is,
| | 00:41 | and create a new line.
| | 00:42 | And this is where we are going
to put our @font-face declaration.
| | 00:46 | So that is with the @ symbol, followed
by font-face, and then an opening curly
| | 00:55 | brace, a couple of lines,
and a closing curly brace.
| | 00:58 | Now, within that the first thing you do is
declare what font family you want to link to.
| | 01:04 | I am going to put in the font-family
property just as you would normally,
| | 01:10 | but instead of one of the existing
font-families that I have set up in
| | 01:14 | Dreamweaver, I am going to go ahead and
add in a new one, and this one is called
| | 01:18 | DragonwickFGRegular.
| | 01:21 | It's a free font in the public domain.
| | 01:26 | And now that that's in, I will put a
semicolon, and we will add our second
| | 01:29 | property, which is an src or source property.
| | 01:34 | This will be linked to a embedded
open type font, which is recognized by Internet Explorer.
| | 01:39 | Now, because I'm self-hosting my fonts,
I am going to go ahead and choose a URL
| | 01:46 | that is local, and I
will open up my Files panel.
| | 01:50 | In the 06_02 chapter, I will open up _
fonts folder, and we will see all of the
| | 01:55 | fonts available there.
| | 01:58 | So now I'm going to go ahead
and enter the path to that.
| | 02:00 | Keep in mind that I'm in the _css folder,
so I am going to have to go up a level first.
| | 02:05 | I will start with a single quote
and then ../ to move up a level.
| | 02:14 | And now we will go to the fonts
directory, and finally we will put in the file
| | 02:20 | name, which is going to be dragwifg-webfont.eot.
| | 02:28 | Now, we will close out the single quote and
the parenthesis and end that with a semicolon.
| | 02:37 | As you can probably guess, not all
browsers support all font formats,
| | 02:41 | so you do have to use multiple
formats to include them in the
| | 02:46 | @font-face declaration.
| | 02:47 | So besides the embedded open type font
that we see here, we also need to put in
| | 02:55 | one for TrueType and one for
the Web Open Font Format, or WOFF.
| | 03:01 | In order to do that in such a way that
Internet Explorer doesn't load all of
| | 03:05 | these fonts, we have to
resort to a little bit of trickery.
| | 03:09 | This technique that I am about to show
you is called the bulletproof technique,
| | 03:12 | and it was first started by
a gentleman name Paul Irish.
| | 03:16 | So we enter in another src, and this one,
instead of url, is local, which means
| | 03:21 | to look on the user's local system.
| | 03:25 | And now instead of putting in a
recognizable family name, we want to do
| | 03:29 | exactly the opposite.
| | 03:30 | We want to put in a file name that
could not possibly be one of these fonts.
| | 03:35 | So I am going to put in an exclamation
mark and then close it with a quote and a
| | 03:41 | closing parenthesis.
| | 03:43 | Paul Irish uses a smiley face, but an
exclamation mark works just as well, and
| | 03:47 | then we will follow that with a comma.
| | 03:50 | And on the next line we will put it in
the path to one of our other font formats.
| | 03:54 | In this case it's going to be the Web
Open Font Format, or WOFF format, and I am
| | 04:01 | going to copy this path and file name
and then paste that in, followed by woff.
| | 04:10 | Close off the single quotes and the
parenthesis, and then put in a format
| | 04:17 | attribute with the value being woff.
| | 04:22 | And finally, we will repeat this as truetype.
| | 04:27 | Now I'm ready for my semicolon.
| | 04:29 | And now we've declared the font-face.
We need to go down and put it specifically
| | 04:35 | in the selector that we want to apply it to.
| | 04:37 | So let's go back to Split view.
| | 04:39 | Here is my h1 tag. I am going to
go and open up the Styles panel.
| | 04:46 | And now that I have #maincontent h1
selected, I can choose the Go to Code by
| | 04:50 | right-clicking on that name there.
| | 04:54 | And here's our font family, and we can
put in our font name, which if you'll
| | 04:59 | recall--I am just going to go
ahead and put it in quotes--it was
| | 05:03 | DragonwickFGRegular, and follow that with
a comma, so that we have a series of names.
| | 05:11 | So let's go over to Design view now,
and the page automatically refreshes, and
| | 05:19 | there you can see our Dragon
Wick Font very zippily presented.
| | 05:24 | If you are a web designer who has been
working for some time, you probably are
| | 05:27 | feeling a great sense of relief
right now, because now the whole world of
| | 05:31 | fonts is open to you.
| | Collapse this transcript |
| Implementing CSS3 type effects| 00:00 | Simple text effects are also a hallmark
of CSS3. And what could be more useful
| | 00:05 | than the common--some say
too common--drop shadow?
| | 00:09 | Let me show you how to create a
very subtle drop shadow in Dreamweaver.
| | 00:14 | So here we are on the fonts.htm page.
What we're going to do now is try and beef
| | 00:21 | up our h2 tag that you see
here with little font effects.
| | 00:25 | So I'm going to first go to the CSS by
selecting it and then opening up the CSS
| | 00:32 | Styles panel. And here in current mode
you see the mainContent h2. That's the CSS
| | 00:37 | rule we want to affect, so I'll right-
click and then Go To Code, and that'll open
| | 00:43 | that up in Split few, and now there's my h2 tag.
| | 00:47 | So I'm going to go ahead and add in
text shadow property, and that is just text
| | 00:54 | hyphen, and you can see
the code hint there, shadow.
| | 01:00 | And the way text shadow is
set up is there are four values.
| | 01:04 | The first two are offsets, the X and Y
offset, so I'm going to go ahead and put
| | 01:09 | in 1px 1 pixel, 1px. That will create an
offset of 1 pixel to the right and then
| | 01:17 | down, and now we want to
set the level of blurriness.
| | 01:21 | And again, I am just going to make
that very subtle at 1 pixel, and then
| | 01:25 | let's create the color.
| | 01:26 | This time I'm going to go ahead and not
use a full black, but use a dark gray,
| | 01:31 | 333, and I'll close that off with the semicolon.
| | 01:36 | Now this will work on almost all modern
browsers, except of course, Internet Explorer.
| | 01:42 | Now rather than leave you dangling
and wondering what to do with Internet
| | 01:45 | Explorer, there is a filter set up for
Internet Explorer that we can put into
| | 01:50 | place, and let's go ahead and set that up now.
| | 01:54 | There are no code hints for this, I should say.
| | 01:58 | So after the filter property we put a
colon and then the keyword dropshadow and
| | 02:06 | then an opening parenthesis and the
color, set that equal to the same color as
| | 02:11 | we have before, which is 333, followed
by a comma. And now we do the offsets for
| | 02:18 | the X and Y, and here it is, offx is
the syntax used for the in the filter, and
| | 02:26 | we said that equal to 1.
And the offy will also be equal to 1.
| | 02:33 | So we'll close our parenthesis and semicolon.
| | 02:38 | Now, let's go ahead and switch on over
to design view, and you can see our drop
| | 02:43 | shadow added to give that
a little bit more oomph.
| | 02:48 | Now, the drop shadow effect you'll find
is very flexible and can be adapted to give a
| | 02:51 | letterpress look as well.
| | 02:54 | Let's go down to another h1, which is
set up here, and I'll select that, and you'll
| | 03:02 | see this is the callout .h1.
| | 03:03 | So let's go to that code, and
I'll add in a new text shadow rule.
| | 03:14 | This is the text shadow property,
and this time we're going to give it a 0
| | 03:19 | offset for the X value, a 2-pixel
offset for Y, and then a bit more blurriness
| | 03:26 | of 3 pixels. And we're going to put it
in white, which will put it in a lighter
| | 03:31 | shade than the surrounding background,
which will add to that a letterpress effect.
| | 03:37 | Okay, now let's do the equivalent in
Internet Explorerese, which is a filter, colon
| | 03:47 | dropshadow(color = #FFF, offx = 0,
offy equals 2). Close that out,
| | 04:09 | and now when we go over to Design view,
| | 04:12 | you can see we've a very nice kind of
subtle white glow around, which gives a
| | 04:16 | interesting letterpress effect. And if
we go completely to Design view, close
| | 04:21 | off the CSS Styles panel, I wanted to
show you that not only does this affect
| | 04:26 | standard fonts, but as I scroll down,
you'll see that these two fonts also our
| | 04:31 | set up in the Web font category, and the
text effect is also applied to those.
| | 04:38 | The drop shadow property is widely
supported, and you can use it to enhance both
| | 04:42 | your standard type and linked web fonts.
| | Collapse this transcript |
|
|
7. Working with HTML5 NowSetting up styles| 00:00 | Now that you've seen how to code with
HTML5 in Dreamweaver, let me show you a
| | 00:05 | few techniques you can employ to use
your newfound knowledge today, and keep
| | 00:09 | your pages future-proof, as
well as backwards-compatible.
| | 00:13 | Generally with HTML, when a browser
doesn't recognize a tag it ignores it.
| | 00:18 | While this does allow you to include new
tags without causing harm, there's some
| | 00:22 | basic functionality that's missing,
which could seriously affect your pages.
| | 00:27 | Luckily, for most browsers you can
correct this deficiency very easily.
| | 00:32 | We'll start by looking at a page
code.htm from the chapter 7 exercise files.
| | 00:38 | I'm going to flip over to Main.CSS.
I'm going to scroll down some, until I come
| | 00:45 | to the section of the CSS file where
there are a number of HTML5 tags already
| | 00:52 | set up to display block.
| | 00:53 | Now this is the default Dreamweaver
configuration, which is fine because it
| | 00:59 | does allow you to use those
tags that they include on the page;
| | 01:03 | however, I'm going to recommend that
you add a few other tags in order to make
| | 01:07 | sure that you're covered in all circumstances.
| | 01:10 | So after 'time', let's put a comma
and add in 'canvas, details, figcaption,
| | 01:17 | hgroup, menu,' and 'summary'.
| | 01:29 | Now this is a very full list.
| | 01:31 | You can just bring this same
declaration along from site to site without
| | 01:36 | worrying if you're using a specific tag
or not, all with very little additional
| | 01:40 | overhead--except of course
in Internet Explorer browsers.
| | 01:45 | To correct for Internet Explorer
behavior, you'll need to use some sort of
| | 01:48 | JavaScript enhancement.
| | 01:50 | One good way to go is to use
the html5shiv, free from Google.
| | 01:57 | This code snippet is hosted on the
Google Code Repository and should be included
| | 02:02 | in your page by way of a conditional comment.
| | 02:05 | If you prefer to host the page
yourself, visit the code's home by going to
| | 02:10 | http://html5shiv.
googlecode.com/svn/trunk/html5.js.
| | 02:24 | Now, I'm going to go ahead and select
all this code and then copy it and head
| | 02:31 | back to Dreamweaver, where I'll create
a new JS file and then paste that in.
| | 02:44 | Now, I'm ready to save the file, and I'm
going to put it in chapter 7 exercise
| | 02:50 | files, in the 07_01 folder, in the scripts
subfolder, and I'm going to call it html5.js.
| | 03:05 | Now, once you have it saved locally,
let's go back over to the source code.
| | 03:11 | And in the head of the document, we'll
include a conditional comment, and Dreamweaver
| | 03:17 | has some snippets to help you remember
this coding and put it in very quickly.
| | 03:21 | So let's go open up the Snippets panel,
and under the Comments folder, you'll see
| | 03:27 | that there is a full list of
conditional comments. There is not one for exactly
| | 03:32 | our circumstance, which is less than
Internet Explorer 9, but there is a if
| | 03:37 | less than i.e. 8, so let's go ahead and
double-click on that to insert it.
| | 03:43 | And I'm going to change the 8 to a 9 now,
and then let's bring in the script tag that
| | 03:52 | references are newly saved HTML5 file.
| | 03:58 | So src = scripts/html5.js,
and we will close that opening script tag as
| | 04:13 | well as the closing script tag.
| | 04:17 | Now you have to type in script
yourself because sometimes Dreamweaver, when
| | 04:21 | you're in a conditional comment,
will not close the tag correctly.
| | 04:26 | Okay, that looks good.
| | 04:29 | One thing to keep in mind about
conditional comments going forward is you always
| | 04:33 | need to include it on every page
of your site in the head section.
| | Collapse this transcript |
| Detecting features| 00:00 | So far, much of what we've done with
HTML5 in this course has been displayed in
| | 00:05 | browsers that support a particular feature,
| | 00:07 | so you can see what it's supposed to
look like. But what about the other
| | 00:11 | browsers that don't support a
particular HTML5 tag or a CSS3 option?
| | 00:17 | Do you just ignore them, or try to
serve them some alternative content?
| | 00:22 | In order to handle situation correctly,
you need to first detect whether the
| | 00:26 | browser in use supports the feature or not.
| | 00:30 | While a number of folks have come up with
piecemeal approaches one group of developers--
| | 00:34 | Faruk Ates, Paul Irish, and Alex
Sexton--have created an all-in-one solution,
| | 00:40 | a JavaScript library called modernizr.
| | 00:43 | In this video, I am going to show
you how to integrate modernizr in your
| | 00:47 | Dreamweaver pages, along with a basic example.
| | 00:50 | Let's go to our browser
and visit www.modernizr.com.
| | 00:55 | There's no e in this version of modernizr.
| | 00:57 | And once you get there, you'll see a
very cool thing right in the middle of the
| | 01:01 | page, where modernizr is looking at
your browser and detecting support for
| | 01:06 | specific HML5 and CSS3 features.
| | 01:10 | So Firefox is doing pretty well here, as you
can see, with support for almost everything.
| | 01:15 | But there are some things missing, like for
example CSS animations and CSS reflections.
| | 01:22 | So if you scroll down a little bit
more, you'll see a big Download button.
| | 01:25 | And let's download this JavaScript,
double-click on the download to open it up
| | 01:31 | in Dreamweaver, and now we'll do File >
Save As. And I am going to put it in
| | 01:38 | my site root in the chapter
7 folder that I am working in.
| | 01:41 | And I am also working in 07_02,
| | 01:43 | so I'll open that up and there is a
scripts folder, which is a perfect home
| | 01:49 | for this, and click Save.
| | 01:53 | There's no need to update
the links, so I'll click No.
| | 01:57 | And now I can close these external
files and go into Code view, and then I am
| | 02:04 | going to go ahead and add it to my page.
| | 02:08 | Just above the closing head tag
we'll put in a script and the src value
| | 02:16 | and then browse to that file, which
you'll recall is in chapter 7/07_02/
| | 02:24 | _scripts, and select the modernizr.
| | 02:26 | Now, your modernizr version may vary.
| | 02:30 | It's currently at the 1.7 version.
| | 02:34 | So we'll put in a type here of a
text/javascript and then close off this tag, and
| | 02:44 | make sure that the script
tag is closed off as well.
| | 02:50 | So the next thing you want to do
is add a class to the body tag,
| | 02:54 | and this class is going to be called no-js.
| | 03:00 | The no-js class is a placeholder for
modernizr in order for it to work a
| | 03:05 | little bit of its magic.
| | 03:07 | And let me show you what that magic
actually kind of looks like by flipping into
| | 03:11 | Live Code, and here you see, in the
HTML class, a variety of properties.
| | 03:22 | You can see which ones are supported:
| | 03:24 | here's flexbox, and canvas, and camvastext, etc.
| | 03:27 | But ones that are not supported or
prefaced with a no-. Also, for example,
| | 03:32 | remember we said in Firefox that CSS
animations and CSS reflections were not supported.
| | 03:39 | Well, they are here in Safari, or the
WebKit engine that Dreamweaver uses.
| | 03:44 | There's cssanimations, and
here is a cssreflections.
| | 03:50 | So now that you see it working, how
do you actually put modernizr to use?
| | 03:55 | Well, there's a couple of ways you can do it.
| | 03:57 | Let's look at a CSS-based example.
| | 04:01 | Say you've got an image on a page,
like this one over here, that uses the CSS
| | 04:08 | reflections property.
| | 04:10 | With the reflection showing, the
container for this is noticeably taller.
| | 04:15 | But if a browser does not support CSS
Reflections, there's no reason for the extra space.
| | 04:21 | So you can create two CSS rules
to handle each of the scenarios.
| | 04:26 | Let's flip over to our main.css, and I
am going to go down to where I know this
| | 04:32 | rule is already set up: line 337.
| | 04:38 | And here's the
reflectImage class that I've set up
| | 04:41 | where it's taking advantage of the
WebKit support for CSS reflections.
| | 04:47 | Now you'll notice here that there
is a margin-bottom of 150 pixels.
| | 04:51 | That's what is extending the picture
area to allow that reflection to be seen.
| | 04:55 | So let's go ahead and create
another rule that takes advantage of the
| | 05:00 | no-cssreflections class, which will
be put into any browser that does not
| | 05:05 | support this, such as Firefox.
| | 05:07 | So you type in no-cssreflections and
then whatever the class is, and an open curly
| | 05:23 | brace, and close curly
brace to contain the property.
| | 05:26 | And here we'll set the margin-bottom to 0.
| | 05:31 | Okay, I am going to go ahead and save this.
| | 05:33 | And let's save our source code as well.
| | 05:37 | And now if we go and preview it in
Firefox, we'll see the page without the
| | 05:43 | additional 150-pixel margin-bottom
because it does not support CSS reflections
| | 05:49 | as detected by modernizr.
| | 05:52 | When you're integrating advanced
functionality, you can see why tools
| | 05:56 | like modernizr are an essential
part of your HTML5 toolbox: to handle
| | 06:01 | backwards compatibility.
| | Collapse this transcript |
|
|
ConclusionNext Steps| 00:00 | Now that you've finished the course,
you may be asking yourself, what's next?
| | 00:05 | Well, if you want to dig deeper into
HTML5, I can recommend a couple of courses
| | 00:10 | on lynda.com. Both are by James Williamson.
| | 00:14 | The first is an overview of HTML5 called
HTML5 First Look, and the second is one
| | 00:21 | that really goes into web font,
called Web Fonts First Look.
| | 00:24 | Of course, you'll want to start
building your HTML5 web pages right away, and
| | 00:30 | keep exploring this brave
new world as it develops.
| | 00:33 | Good luck!
| | Collapse this transcript |
|
|
