IntroductionWelcome| 00:00 |
(MUSIC).
| | 00:04 |
Hi.
I'm Joe Lowery.
| | 00:06 |
Thanks for joining me for CSS Formatting
Visual Data.
| | 00:09 |
In this course, we're going to be
examining how you can optimally style
| | 00:13 |
your data for the web, so that it best
represents your information and meshes
| | 00:16 |
visually with the look and feel of your
site.
| | 00:21 |
We'll cover the gamut of data structures,
from the straightforward ordered and
| | 00:26 |
unordered list, to the wildly underused
definition list.
| | 00:30 |
We'll also examine the workhorse of
structural data, tables.
| | 00:35 |
In addition to demonstrating core
techniques, we'll explore many more
| | 00:38 |
advanced options, including custom
numbering with trailing characters, image
| | 00:42 |
bullets, zebra stripping, and responsive
tables.
| | 00:47 |
Finally, we'll take a look, at using the
HTML5 Canvas element to visualize our
| | 00:52 |
date.
With Canvas, we can build bar charts, pie
| | 00:56 |
charts, and even Venn diagrams, and so we
will.
| | 01:00 |
Ready to bring a little sparkle to your
data?
| | 01:02 |
Me too.
Let's get started.
| | 01:05 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
I'm very happy to announce that any
member of the lynda online training
| | 00:04 |
library, whether premium, monthly or
annual, has access to the exercise files
| | 00:07 |
used throughout this title.
Naturally, the information in this course
| | 00:13 |
is ultimately intended to be applied to
your own web pages.
| | 00:17 |
However, you may find it helpful to work
with the supplied exercise files to
| | 00:20 |
practice the steps safely, and without
creating your own examples.
| | 00:26 |
To begin using the files from the site,
download them, extract them, and then
| | 00:30 |
store those files in a convenient
location, such as your desktop.
| | 00:36 |
The exercise files folder is organized by
chapter, and the chapters are broken down
| | 00:41 |
into the various lessons.
Within the lesson folders, there are a
| | 00:46 |
series of items that make up the practice
files.
| | 00:49 |
Typically HTML, CSS images, Javascript,
and so forth.
| | 00:54 |
In most lesson folders, you'll also find
a final folder and that contains the
| | 00:58 |
files showing the completed lesson, which
you can open and explore at your leisure.
| | 01:05 |
You can either follow the whole course,
chapter by chapter or jump in at any
| | 01:09 |
point.
If you'd rather not use the exercise
| | 01:13 |
files, you can definitely follow along
with your own assets.
| | 01:17 |
| | Collapse this transcript |
|
|
1. Basic List StylingNumbering options| 00:00 |
When you need to list out data items in a
sequential fashion, the ordered list, or
| | 00:05 |
OL tag, is the way to go.
Let's take this lesson, to cover the
| | 00:10 |
basic options for what is commonly called
a numbered list.
| | 00:15 |
I will scroll down a bit, and as you can
see, starting on line 44, I'm using a
| | 00:21 |
plain, a well tag, with no attributes.
In the associated CSS file, main.css, I
| | 00:30 |
have my ordered list declaration, all the
way down at the bottom.
| | 00:37 |
There you'll see, that all I have is a
padding property.
| | 00:42 |
Now, when we view this page in the
browser, you'll see a straight decimal
| | 00:47 |
based list.
The CSS property that controls the kind
| | 00:52 |
of marker displayed for both ordered and
unordered lists, is called
| | 00:56 |
list-style-type.
Believe it or not, there are over 20
| | 01:01 |
different valid values for
list-style-type.
| | 01:05 |
Many of those are used to show numbering
values in different languages, such as
| | 01:09 |
Hebrew, Georgian, and several different
flavors of Japanese and Chinese.
| | 01:14 |
The Western version of list-style-type,
includes decimal, that's the default.
| | 01:20 |
You can also do Roman numerals, upper or
lower case, and although you may not
| | 01:25 |
think of the alphabet as a numbering
system, it does fall under the ordered
| | 01:29 |
list category.
Again, you can use either the lower alpha
| | 01:34 |
or upper alpha values.
Now there's one more list-style-type
| | 01:38 |
value that you may find of interest.
And that's decimal leading zero.
| | 01:45 |
Let me show you what that looks like.
And, in my main content OL rule, I'm
| | 01:50 |
going to enter in the list-style-type
property, and give it a value of decimal,
| | 01:58 |
hyphen leading, hyphen zero, decimal
leading zero.
| | 02:08 |
Close that with a semi-colon.
Now when we save the page, and then I go
| | 02:12 |
back to preview it, when I refresh the
page in the browser, you'll see the
| | 02:16 |
numbers all line up nicely, and, add just
a touch of geeky style.
| | 02:22 |
You may also notice that our numbers no
longer line up with the left edge of the
| | 02:26 |
rest of the page.
That's because it's actually aligning to
| | 02:30 |
the period following the decimals.
Let's solve that issue with CSS.
| | 02:35 |
My padding value for the left edge is
currently 1.25 m's.
| | 02:39 |
I'm going to bump that up to 1.75.
Again I'll save.
| | 02:45 |
Back to the browser, refresh one more
time.
| | 02:48 |
We're back in alignment, letting our geek
flag fly.
| | 02:52 |
Depending on your styling requirements,
you may also need to adjust the OL tag
| | 02:56 |
padding if you use either lower roman or
upper roman.
| | 03:00 |
Both align to the period following the
Roman numerals, just like the decimal
| | 03:05 |
leading zero value.
| | 03:07 |
| | Collapse this transcript |
| Adding custom number characters| 00:00 |
By default, browsers place a period after
the automatically generated marker of a
| | 00:05 |
list item and in ordered list regardless
if it's type is decimal, roman numeral,
| | 00:09 |
or letter.
Periods are quite functional but they're
| | 00:14 |
constant use as a trailing character are
a tad on the boring side.
| | 00:19 |
In this lesson, I'll show you how to
replace the period with the character of
| | 00:22 |
your choosing, whether it's a colon, a
dash, a parenthesis or, gasp, nothing at
| | 00:25 |
all.
Here I have a page with a basic ordered
| | 00:28 |
list.
I don't declare a type, so standard
| | 00:33 |
decimals are used.
And of course, there's a period after
| | 00:37 |
each number.
Let's go to the CSS for this page, which
| | 00:42 |
is main.css file.
I'm going to scroll to the bottom, where
| | 00:46 |
my only rule targeting the ordered list
can be found, to add in a custom trailing
| | 00:51 |
character, I'm going to need to insert a
new declaration.
| | 00:57 |
To the OL rule and then add two more
rules for the list items themselves let's
| | 01:03 |
start by ammending the existing OL rule.
I'm going to put in a property called
| | 01:10 |
counter-reset and I'm going to give it a
variable name.
| | 01:15 |
Item.
The counter reset property identifies the
| | 01:19 |
variable that we're going to be using and
resets it to one for the start of the
| | 01:24 |
ordered list.
Next we'll need to set up the list item
| | 01:28 |
properly.
So I'm going to create a new rule called
| | 01:33 |
main content LI.
For the list item.
| | 01:39 |
And the first thing we're going to do is
set the display property to block.
| | 01:46 |
This will essentially remove all
automatic numbering so that we can insert
| | 01:51 |
our custom values as a replacement.
Next, I'll add a margin left value to
| | 01:56 |
move it to the right place.
Let me hit a couple of extra lines just
| | 02:03 |
to move it up a tad.
Finally, let's set up our replacement
| | 02:07 |
content.
This is handled using the before pseudo
| | 02:12 |
selector, so our full selector reads Main
Content, LI, before.
| | 02:20 |
here we're going to set our display to in
line block.
| | 02:29 |
Next we'll use the content property to
write out the number we want, and the
| | 02:34 |
custom trailing character.
So there's the content property.
| | 02:40 |
Now we'll use the keyword counter.
And in parenthesis the variable item.
| | 02:48 |
Which we previously identified with the
counter reset property.
| | 02:53 |
And your recall it's called item.
Right after that we'll put in quotes.
| | 03:00 |
Any content that we want to have, and the
content we want to have is a closing
| | 03:04 |
parenthesis, followed by a space.
Now close that declaration with a
| | 03:09 |
semicolon.
Now it's time to increment our counter,
| | 03:13 |
with the cleverly named property counter
increment.
| | 03:17 |
The value you give it is the name of the
counter that you want to increment, and
| | 03:23 |
ours is Item.
Finally, let's set the width of the
| | 03:30 |
entire pre-string to 1.5M and then
position it with a margin left.
| | 03:41 |
Equal to negative 2M.
Let me save the page and now let's see
| | 03:46 |
how it looks in the browser.
After I hit refresh, great, there is our
| | 03:51 |
closing parentheses after each number and
there is not a period to be seen in our
| | 03:56 |
ordered list.
You can use this same technique combining
| | 04:02 |
the counter reset content and counter
increment properties to automatically
| | 04:06 |
number subsections of an ordered list as
they do when legal documents.
| | 04:13 |
I'll demonstrate that technique in the
lesson styling nested list later in this
| | 04:17 |
chapter.
| | 04:19 |
| | Collapse this transcript |
| Bullet options| 00:00 |
When you don't want to emphasize the
sequentialness of a data list, you use
| | 00:04 |
unordered lists instead of ordered lists.
Let's take a look at the core
| | 00:09 |
functionality of unordered lists, known
colloquially as bulleted lists.
| | 00:15 |
When you incorporate the ul tag, the
default browser rendering looks like
| | 00:18 |
this.
Here you can see the basic filled in
| | 00:22 |
circle or bullet that lead each of the
list item.
| | 00:26 |
I will admit, however, looking at it in
chrome, it does look a little bit like a
| | 00:30 |
diamond shape but it's actually a circle.
There are just a handful of additional
| | 00:37 |
options available to you through the list
style property, when it comes to
| | 00:41 |
unordered lists.
Disc, the default, which is a filled in
| | 00:46 |
circle, circle an open bullet if you will
and square, a filled in square.
| | 00:52 |
Let's go to our CSS page and try 'em out.
So I'm going to add in a new property,
| | 00:58 |
list, style, type.
And let's set that to circle.
| | 01:05 |
I'll save and head back over to my
browser.
| | 01:09 |
We refresh the page, and there's our open
circle.
| | 01:13 |
Let's try out the square.
Again, a quick save to the browser and
| | 01:20 |
refresh.
And there's the square.
| | 01:23 |
Nothing fancy.
Just straightforward CSS.
| | 01:26 |
Make sure you don't use the type
attribute for the ul tag.
| | 01:31 |
That's been deprecated and could possibly
fail in future browsers.
| | 01:35 |
| | Collapse this transcript |
| Replacing bullets with custom graphics| 00:00 |
Granted the built in options for styling
an ordered list aren't much.
| | 00:05 |
Luckily however, there's a number of ways
we can spice things up with custom
| | 00:09 |
markers.
In this lesson I'll show you two
| | 00:12 |
different techniques.
One, dead simple and another a bit more
| | 00:16 |
complex, but with more control.
First, let's look at the pure CSS single
| | 00:22 |
property solution, list style image.
As the name implies, the property will
| | 00:29 |
swap out the default marker, the bullet,
for whatever image you specify.
| | 00:34 |
As you can see by looking at line 44,
I've added an ID of listStyleImage to my
| | 00:40 |
UL tag to make it easier to handle the
CSS.
| | 00:46 |
Let's switch now to the CSS file.
Here, near the bottom of the page,you can
| | 00:51 |
see I have a section for my
listStyleImage rule.
| | 00:56 |
I'm just going to add the needed property
and the URL value.
| | 01:00 |
And that property is again list hyphen,
style, hyphen, image then I'll put in the
| | 01:07 |
key word URL followed by parenthesis and
the path to the image, which is going to
| | 01:14 |
be dot, dot, slash images slash
arrow.png.
| | 01:22 |
Let me close this off with a semicolon.
I'll save and head back to the browser.
| | 01:28 |
Let me click refresh.
And there's our little orange arrows.
| | 01:32 |
Very easy and straightforward.
Keep in mind though, that there's no real
| | 01:37 |
way to size the list image with CSS.
So you need to make the image the proper
| | 01:41 |
size for your list items in whatever
graphics program you're using.
| | 01:46 |
You should also be aware that the
position of the bullet may vary from
| | 01:49 |
browser to browser.
Something else you don't have power over.
| | 01:53 |
Let's look at a different technique using
background images.
| | 01:57 |
This method requires a bit more code but
gives you tons more control.
| | 02:01 |
I've already started the process in the
file called background-image.htm.
| | 02:06 |
Again, it's down around line 44.
You can see that my UL tag now has an ID
| | 02:12 |
of background image.
So, in the same CSS file, we're going to
| | 02:16 |
hone in on the background image rules
now.
| | 02:21 |
Let's start on line 679 right now I just
have the one rule and again I've
| | 02:25 |
specified that I want to select my ul tag
with the background image ID.
| | 02:32 |
You may notice I've zeroed out the left
padding that's because I'm going to
| | 02:36 |
spcecify the padding in my next rule
which will select the list item within
| | 02:40 |
the UL tag.
Alright, we're ready to code our second
| | 02:46 |
rule.
So, main content, UL background image, LI
| | 02:53 |
for list item.
First, I'll set the list style type to
| | 02:58 |
none.
Now I am going to bring in my background
| | 03:03 |
image.
Again we're picking it up from the same
| | 03:08 |
URL ../images/arrow.png.
These properties are applied just like
| | 03:15 |
you are putting a background image in a
div.
| | 03:21 |
After specifying the image, lets define
the background position.
| | 03:25 |
I'll place it in the center, left.
Now lets make sure it doesn't repeat, by
| | 03:35 |
using the no repeat value.
Finally, lets set up our padding.
| | 03:41 |
Top is zero, right is zero, bottom is
zero and the final value left, I'll set
| | 03:47 |
to one m.
I'll save my changes, now let's go take a
| | 03:52 |
look at the finished product in the
browser.
| | 03:56 |
I have to open up the file.
Again, we have a nice little bullet image
| | 04:04 |
finally tuned.
And again there's our graphic images but
| | 04:09 |
this time we have a little bit more
control over the actual placement.
| | 04:13 |
Custom images can definately bring a
personalized style to your unordered
| | 04:17 |
list.
All with a minimum of effort.
| | 04:21 |
| | Collapse this transcript |
| Managing hanging indents| 00:00 |
By default, browsers render the markers
for both UL and OL tags, outside of the
| | 00:05 |
list item content.
Thus giving the effect of, what in
| | 00:09 |
typography is called, a hanging indent.
You can control that default styling,
| | 00:14 |
through the List Style Position CSS
property.
| | 00:18 |
To demonstrate the difference between the
various List Style Position options, I've
| | 00:23 |
created an ordered list, where the list
items are several sentences long, as you
| | 00:28 |
can see here.
Let's go to the CSS code for this page,
| | 00:33 |
and bring in the List Style Position
property.
| | 00:39 |
(SOUND).
The two key values for this property are
| | 00:43 |
outside and inside.
Outside is the default, and that's what
| | 00:48 |
gives us the hanging indent.
So let me specify the other option here,
| | 00:53 |
inside.
Now I'll save the CSS file.
| | 00:58 |
And when I refresh the browser, you can
see that the numbers move in line with
| | 01:02 |
the rest of the content, and because the
markers have moved within the content,
| | 01:06 |
the alignment is off.
Let's adjust that now.
| | 01:11 |
Back in the CSS file, I that there's a
Padding property for the OL tag, with 1 m
| | 01:15 |
being applied to the left hand margin.
Let's change that to 0, and see what
| | 01:22 |
happens.
I'll save my page, back to the browser,
| | 01:26 |
click refresh, now my ordered list items,
align to the left edge, just the way the
| | 01:31 |
client likes it.
The List Style Position property works
| | 01:36 |
with both ordered and unordered lists, to
provide direct control over your hanging
| | 01:42 |
indents.
| | 01:44 |
| | Collapse this transcript |
| Styling nested lists| 00:00 |
Nesting list, isn't hard.
You just have to be careful about your
| | 00:04 |
HTML placement, and that's the key to
styling nested list.
| | 00:08 |
It's all in the selector.
In this lesson, I'll show you how to
| | 00:12 |
target a nested list so you can set up a
basic styling.
| | 00:16 |
I also go through the steps necessary to
achieve fancy, legal style renumbering.
| | 00:22 |
We'll start with the basic, nested list
styling.
| | 00:25 |
Starting on line 47, I've nested an
unordered list within my ordered list
| | 00:30 |
that starts on line 44.
As you can see, the UL tag for the nested
| | 00:36 |
list starts in the middle of an LI
tag,list item, not in between two list
| | 00:42 |
item tags.
That's the mistake beginners often make.
| | 00:48 |
In the browser, you'll see my unordered
list nested within my ordered list,
| | 00:53 |
starting with item two.
You can also see how the bullets are a
| | 00:58 |
little bit to the left of the outer list
items.
| | 01:01 |
It actually seems to be aligned with the
period following the numbers.
| | 01:07 |
That looks wrong to me, so let me show
you how to adjust the nested list.
| | 01:11 |
I'm going to switch to my main.css file,
and scroll down to the bottom here.
| | 01:17 |
Make a little space here so you can see
it better.
| | 01:20 |
Now I'm going to add a new rule,
targeting my inner list.
| | 01:25 |
I want to make sure to define my selector
so that I only affect UL tags within OL
| | 01:31 |
tags.
So my selector's going to be Main
| | 01:35 |
content, OL, UL.
Once my selector's set up I can add my
| | 01:39 |
properties.
In this case I'll apply a padding
| | 01:44 |
property with a left value of one M.
After I Save the file, I'll Refresh the
| | 01:50 |
browser and now the unordered list is
lined up just where I want it.
| | 01:56 |
Now when we closed out the Adding Custom
Number Characters lesson earlier in this
| | 02:01 |
chapter, I promised to show you how to
create legal style numbering with nested
| | 02:05 |
lists.
Let's tackle that now.
| | 02:08 |
Let's go back to the code editor, and
here I have index _alt.htm open, from the
| | 02:14 |
current lesson folder.
Where you can see that I have nested one
| | 02:21 |
ordered list inside another.
The nested ordered list starts on line
| | 02:27 |
47.
When we look at it in a browser, you can
| | 02:30 |
see that I have a custom trailing
character, a closing parenthesis already
| | 02:34 |
set up, that carries over into the nested
list.
| | 02:39 |
When we look at it in the browser, you
can see that I have a custom trailing
| | 02:42 |
character, a closing parentheses, set up
for the beginning list.
| | 02:47 |
That carries over into the nested list.
Let's change the nested list trailing
| | 02:52 |
character to a legal-style format, that
contains the outer list's item number.
| | 02:58 |
In this case it would be a two, as well
as the sub item.
| | 03:02 |
So, here we'll have 2.1 2.2 and so on.
If you're not clear on how the custom
| | 03:09 |
trailing character was added, now would
be a good time to review the adding
| | 03:12 |
custom number characters lesson.
Assuming you're up to speed, I'm going to
| | 03:18 |
switch to the CSS file for this page,
which is called main_alt.
| | 03:22 |
Again, we'll go to the bottom of the
file, and again I'll add a little bit of
| | 03:26 |
spacing to bring it up.
As you can see, I have three main item
| | 03:32 |
rules and one sub-item rule.
The main item rules start on line 673 and
| | 03:37 |
the sub-item on 690.
I already have one variable established
| | 03:42 |
for the outer list, called Item, and now
I'll need to create another one for the
| | 03:46 |
nested list.
So I'll add another counter reset
| | 03:51 |
property, and we'll give this a variable
name of subitem.
| | 03:58 |
Now I'll need to add two more rules.
First, let's prep the nested list items.
| | 04:04 |
So I'll enter in my selector of main
content, OL LI OL LI.
| | 04:09 |
That will target the list items within
the nested list.
| | 04:18 |
And we're going to set this to display
block.
| | 04:25 |
And again we'll set the margin left
property to one m.
| | 04:30 |
Finally, let's create the leading
character content using the before
| | 04:36 |
pseudo-selector.
So I'm actually going to this selector
| | 04:41 |
line here, make sure we're targeting the
same selector, and then add colon before.
| | 04:49 |
There's my curly braces.
And now we'll set the display property,
| | 04:54 |
to inline block.
Set up our content.
| | 04:58 |
Setting up the content is the trickiest
part of this, basically this line
| | 05:04 |
can(UNKNOWN) puts together four different
elements.
| | 05:11 |
First will be the counter and in
parenthesis item.
| | 05:15 |
This is the number of the outer nesting
number, which in our example was two, and
| | 05:21 |
that comes first.
That's followed by a period, which we'll
| | 05:26 |
put in quotes, which in turn is followed
by the number of the sub item.
| | 05:32 |
So counter, parenthesis, sub item.
And then the final item, also in quotes
| | 05:38 |
because it's a string, is the colon.
And we'll add a space.
| | 05:43 |
Okay, we'll close that with a semi-colon,
and now we increment the subitem variable
| | 05:49 |
using the property counter increment, and
a variable named subitem.
| | 05:56 |
Finally, let's specify the width to two
M, and again give it a margin left, equal
| | 06:05 |
to negative 1.5M.
Let's do a Save, back to the browser, and
| | 06:12 |
click Refresh.
There we go.
| | 06:15 |
Legal style numbering completely created
by CSS.
| | 06:19 |
Not too shabby, eh?
| | 06:21 |
| | Collapse this transcript |
|
|
2. Styling Definition ListsUnderstanding definition lists| 00:00 |
Definition lists are one of the most
flexible data handlers, as well as one of
| | 00:04 |
the least used.
In this lesson, we'll examine the
| | 00:08 |
component parts of a definition list, as
well as take a look at basic styling.
| | 00:13 |
A definition list, typically consists of
three tags.
| | 00:17 |
On the outer container is the dl tag.
Within the dl tag, is a series of pairs.
| | 00:23 |
The dt tag comes first.
That's the data term.
| | 00:28 |
Following the data term is the data
definition or the dd tag.
| | 00:33 |
The definition list is the best choice
semantically speaking, for related
| | 00:37 |
content that consists with the series of
titles and descriptions.
| | 00:42 |
The definition list is very flexible
structurally, although it is most often
| | 00:46 |
used with one data term followed by one
data definition, that's not a hard and
| | 00:50 |
fast rule.
You can for example, have a data term
| | 00:55 |
without a data definition, likewise any
single data term can have multiple
| | 00:59 |
definitions as shown by this pseudocode.
In an effort to promote the use of
| | 01:06 |
definition lists, the HTML5 spec,
although it's not been finalized, has
| | 01:10 |
moved to rebrand them as a more general
description list.
| | 01:15 |
And, in truth, there are many uses of
these constructs.
| | 01:19 |
No matter what you call them, including
glossaries, of course, but also FAQs,
| | 01:24 |
menus, event listings, and even recipes.
Most browsers depict raw unstyled
| | 01:30 |
definition list, as I'll continue to call
them in the same way.
| | 01:35 |
Here's a sample webpage that includes as
basic definition list.
| | 01:39 |
As you can see, the date and terms are
presented flush left on their own line.
| | 01:45 |
The dated definitions which follow.
Are indented to one degree or another
| | 01:49 |
depending on the browser.
Now, let's look at how we can easily
| | 01:53 |
restyle the definition list, to get a
completely different look and feel.
| | 01:59 |
I have open in my code editor the CSS
file, for the page we just looked at in
| | 02:03 |
the browser.
I'm going to add three CSS rules.
| | 02:09 |
The first of which, will target the most
overlooked part of the definition list,
| | 02:13 |
the dl tag itself.
Because the dl tag is the containing
| | 02:17 |
element for all the definition list
items, we can use that to really set it
| | 02:21 |
off.
First, let's create the rule itself.
| | 02:25 |
I'll enter in the selector of
#mainContent dl.
| | 02:30 |
To make sure we're targeting the right
definition list.
| | 02:34 |
And then my curly braces.
For my first property, I'm going to add a
| | 02:37 |
pretty significant bit of padding.
20 pixels, which will serve to isolate
| | 02:42 |
the content.
Then, let's bring on a border.
| | 02:46 |
I'll make it 1 pixel wide, solid and give
it an rgb value that will fit in with the
| | 02:54 |
rest of my site.
Next, we'll focus on the dt tag.
| | 03:05 |
After I've created the basic rule, I'll
first make the text bold by using the
| | 03:11 |
fontway property.
Then, I'll transform it to make it all
| | 03:17 |
uppercase.
Finally, I'll center it in the block.
| | 03:22 |
Let's finish our simple restyling, by
adjusting the margin of the dd tag.
| | 03:31 |
By default, most if not all browsers
include a notable bit of margin left, to
| | 03:35 |
indent the dd content.
I'm going to reduce that to zero, and
| | 03:40 |
instead, add 1 m of margin to the bottom.
So, our selector is mainContent as the id
| | 03:49 |
dd, and the rule margin 001 m that's the
bottom 0.
| | 03:58 |
Let's save our CSS file, and see what we
have in the browser.
| | 04:02 |
I'll refresh.
The border and padding we added to dl
| | 04:06 |
tag, really offsets the entire list.
Our definition term looks quite different
| | 04:13 |
while maintaining its title
characteristics, and the dd content works
| | 04:17 |
well in the overall list.
Obviously, this is just the start of
| | 04:21 |
what's possible with definition list
styling.
| | 04:24 |
In the rest of the chapter, we'll
investigate some more advanced options.
| | 04:29 |
| | Collapse this transcript |
| Styling multiple terms| 00:00 |
In the opening lesson of this chapter, I
mentioned that it's possible for a
| | 00:04 |
definition list to have multiple data
definitions, as coded with the DD tag.
| | 00:09 |
In this lesson, I'll show you a number of
techniques for styling multiple
| | 00:12 |
definitions.
Let me start, by showing you the end
| | 00:15 |
result of our styling.
You might think, that the series of
| | 00:19 |
artworks shown here in the recent work
section, were laid out with a number of
| | 00:23 |
divs or, if you want to go old school, a
table.
| | 00:27 |
But as you probably suspect, this is all
done with definition lists.
| | 00:31 |
The title of each artwork is a data term,
and all the information, the image,
| | 00:36 |
artists, medium and year, and price, are
all data definitions.
| | 00:42 |
Best of all, the styling is done by
working with just the basic tags, no
| | 00:46 |
classes or IDs are used.
Before we start with this CSS, I want to
| | 00:52 |
show you what the definition list looks
like unstyled.
| | 00:56 |
As you can see, everything is in the
standard definition default appearance.
| | 01:02 |
My art tiles are flush left, and all the
data terms, including the images, are
| | 01:06 |
indented and placed one right after the
other.
| | 01:10 |
Pretty boring, right?
Let's see what we can do about that.
| | 01:13 |
I'll scroll to the bottom of my CSS file,
and start with the first rule.
| | 01:19 |
We're going to move the entire definition
list, over to about the middle of our
| | 01:22 |
white space.
So I'll target main content, dl, and then
| | 01:29 |
set in a margin of 000 10m.
Next let's style the data terms.
| | 01:38 |
Again, I'm going to make them bold and
uppercase.
| | 01:44 |
(SOUND).
So I'll set the font weight, to bold, and
| | 01:49 |
use text transform, to uppercase the
terms.
| | 01:55 |
Next, I'll add some separation, between
the data terms, with a padding top
| | 02:00 |
property.
Finally, although it's not in place yet,
| | 02:05 |
we are going to float the images, so I'll
need to clear the float for every data
| | 02:11 |
term.
We're ready to tackle the dd tag.
| | 02:17 |
To get where we want to go, it'll take
three rules.
| | 02:21 |
First, we'll zero out the margin on the
basic dd tag.
| | 02:27 |
Next, let's float the image within the dd
tags.
| | 02:33 |
So we'll target main content, dd, image,
and enter in a float, left property.
| | 02:38 |
I also want to put a little separation
between the image and my text, so I'll
| | 02:46 |
use margin right.
And I'll set the value to 2 m's.
| | 02:53 |
All that's left is to highlight the
price, by coloring it green.
| | 02:58 |
To target a specific dd tag in a series
of them, we can use the Nth of type
| | 03:03 |
pseudo selector.
I want to select every fourth one, so
| | 03:08 |
I'll enter in a formula that allows me to
do that.
| | 03:13 |
First let's hit the selector, main
content, dd, and this is a pseudo
| | 03:18 |
selector, so you enter in a colon, and
it's nth of type.
| | 03:25 |
And then you follow that with a set of
parentheses, and you enter in the
| | 03:29 |
formula.
If I want every fourth one, of 4 n plus
| | 03:33 |
0.
Okay, that's the selector.
| | 03:38 |
Let's put in our curly braces, and simple
property, we'll color it green.
| | 03:43 |
That's it.
So, let's save CSS file first, and back
| | 03:47 |
to the browser, click refresh, looks
good.
| | 03:52 |
Let's scroll down and see how it carries
through.
| | 03:55 |
Everything looks fine.
Keep in mind that the nth of type pseudo
| | 03:59 |
selector, which targeted the fourth of
our dd terms, can only be used when the
| | 04:04 |
definition list follows a very rigid
structure, as with our example.
| | 04:11 |
| | Collapse this transcript |
| Boxing up definition lists| 00:00 |
You may have noticed the sidebar of the
example site we're using is pretty boxy.
| | 00:05 |
In this lesson, I'll show you how to
emulate the styling of those boxes for
| | 00:09 |
your definition list.
Let's begin; I've scrolled to the bottom
| | 00:14 |
of the page where you can see there are
no rules for the definition list yet.
| | 00:18 |
We'll create the rule for the DL tag
first(SOUND).
| | 00:25 |
We'll set it off slightly with a two m
top and bottom margin.
| | 00:32 |
Set the padding to zero, and width to
100%.
| | 00:41 |
So that it will fill the allotted space.
Next let's tackle the DT tag, our title.
| | 00:48 |
(SOUND) We want this to look like our H2
tag over on the side, so I'll use that as
| | 00:54 |
a basis for a number of my declarations.
First I'll set the color, to white, or
| | 01:05 |
FFF.
Padding, to zero.
| | 01:10 |
Now we'll use the same font family as we
do on the other tag and this uses a web
| | 01:16 |
font called bitter.
And in our font family list we also have
| | 01:24 |
Georgia, Times and Times New Roman, all
of which are serif fonts.
| | 01:32 |
We'll set the font size to 1.6m and line
height to 45 pixels.
| | 01:41 |
Let's align it in the center.
Now I'm going to put-up a border on the
| | 01:48 |
left, right and top so I have to specify
each of those individually.
| | 01:55 |
Let's start with border left, and set
that to one pixel solid with a color of
| | 02:03 |
131210.
I am going to copy this declaration and
| | 02:09 |
then paste it in twice and change border
left in the second one to border right
| | 02:16 |
and in the third one to the border top.
Finally, let's specify a background image
| | 02:26 |
as well as a color of a858a3, and the
image will be pulled from the url,
| | 02:34 |
../image/diag_pattern.pin short for
diagonal.
| | 02:43 |
Now we want this to repeat along the x
axis, so I'll put in repeat-x, and we'll
| | 02:51 |
position at the center top.
Finally, we'll create a rule for the DD
| | 03:00 |
tag.
I'll start by entering in a margin value,
| | 03:07 |
of 0 0 1m.
That's for the bottom, 0.
| | 03:14 |
We'll give it a specific background
color, kind of a light gray.
| | 03:21 |
(SOUND) Again, let's align it in the
center.
| | 03:28 |
I'll add some padding around 1em top and
bottom, half em on the left and right.
| | 03:37 |
Let's mix it up a little by putting the
font style to Italic.
| | 03:42 |
And I'm going to repeat this border.
So I'l just copy these three, paste that
| | 03:48 |
down here.
And I want to change the border top to
| | 03:53 |
border bottom.
Lets get rid of this extra line here,
| | 03:57 |
aquick save of the page.
Now lets go preview the HTML file in the
| | 04:01 |
browser.
So there's my page.
| | 04:05 |
I'll click refresh, and there's our
totally revised definition list.
| | 04:11 |
My definition term has the same
background as the heading for my sidebar,
| | 04:15 |
complete with diagonal background.
And each of the definition list pairs are
| | 04:20 |
presented in their own container.
We've really just scratched the surface
| | 04:24 |
for how you can style definition lists I
hope the examples in this chapter help
| | 04:28 |
you find the styles that work best for
your sites.
| | 04:32 |
| | Collapse this transcript |
|
|
3. Styling TablesStyling table captions| 00:00 |
Captions have long been part of the HTML
table family, but not one that web
| | 00:04 |
designers visit often.
That doesn't mean you should continue to
| | 00:08 |
neglect it, the caption tag is very
helpful for those utilizing screen
| | 00:12 |
readers and is often recommended to
enhance accessibility.
| | 00:17 |
But for all it's usefulness, if left
unstyled it can stick out like a sore
| | 00:20 |
thumb.
In this lesson, I'll show you two caption
| | 00:24 |
style alternatives.
One, large and in charge, and the other,
| | 00:29 |
petite and sweet.
Let's go big to begin with.
| | 00:33 |
To start, I want to show you my HTML.
I'm going to scroll down to where my
| | 00:39 |
table tag is, on line 44, and on line 45,
you see the caption tag.
| | 00:47 |
The caption tag is intended to be
inserted right after the opening table
| | 00:50 |
tag.
Even though the caption is a separate
| | 00:53 |
tag, and could be placed anywhere, it's
important that you stick with this
| | 00:56 |
convention for accessibility purposes.
Previewing the page, you can see that the
| | 01:02 |
caption is rendered on top of the table,
and looks, honestly, pretty blase.
| | 01:07 |
Let's integrate it into the table itself.
So back to the code editor, and I'm
| | 01:11 |
going to switch to my main.css file and
scroll to the bottom of the page.
| | 01:14 |
Let me make a few extra lines here, just
so we can see this a little bit easier.
| | 01:17 |
Now, I'm going to insert a new CSS rule,
targeting the caption in this particular
| | 01:26 |
section of the page.
So main content as an ID, table, caption.
| | 01:35 |
I open in curly brace.
Some of the properites I'm going to put
| | 01:39 |
in are intended to ape the style of the
table header elements.
| | 01:44 |
When you're trying to merge a caption
into a table, you might find it necessary
| | 01:47 |
to add a declaration or two that
overrides other existing styles for table
| | 01:50 |
elements.
I'll show you what I mean.
| | 01:53 |
But first, let's set the color to FFF, or
white.
| | 01:58 |
I have a background color that matches my
table background, and that's 413E3D.
| | 02:09 |
Now I'm going to set up the border.
And this is the time were I mentioned
| | 02:12 |
that sometimes you have to do things to
override other existing styles.
| | 02:17 |
Here we'll need to add a solid white
border on the left, to make it all line
| | 02:20 |
up properly.
So, let me put that in, border-left, 3px,
| | 02:27 |
solid and white.
Now I want to make sure that there are no
| | 02:34 |
other boarders attached to the caption
here.
| | 02:37 |
So I'm going to enter in border-top
style, and set it to none, and let's do
| | 02:44 |
the same thing for the border-right
style, and finally for the bottom.
| | 02:53 |
Let's upper case our text.
We'll use the text transform property,
| | 03:04 |
and give it some padding up top.
Here I'll give it 0.6 m's.
| | 03:15 |
A quick file Save, and we're ready to
preview our file in the browser.
| | 03:18 |
I'll refresh the page, and there's our
restyled caption, blending in with the
| | 03:23 |
top of the table.
Now, I notice that I do have a problem
| | 03:27 |
over on the right hand side, so let's go
back and address that.
| | 03:32 |
Again, I'll add a border right, and we'll
set that to be white.
| | 03:42 |
Now because we have had to add a
border-right, I'm going to remove this
| | 03:45 |
border right style none, so that it
doesn't get overwritten.
| | 03:51 |
And back to the browser, and a refresh,
and the problem is solved.
| | 03:54 |
Now, let's go the opposite design
direction.
| | 03:57 |
I'm going to go back to the code editor,
and I have a main-alt.css file from that
| | 04:02 |
same folder.
I'll scroll down to the bottom, and start
| | 04:07 |
over with a new caption rule.
What most designer object to when it
| | 04:12 |
comes to table captions is the position.
It's really noticeable there up above the
| | 04:17 |
table.
Well, there's a little known CSS property
| | 04:20 |
intended to address that issue, called
caption side.
| | 04:24 |
So let's bring the page up a tad, and
I'll put in the selector, main content,
| | 04:34 |
table caption.
And we'll use caption side, as our first
| | 04:42 |
property, and set the value to bottom.
Caption side only takes two main values,
| | 04:49 |
top and bottom.
And top is of course, the default value.
| | 04:53 |
Now, I add a bit more text styling.
Let's align it to the right, I'm going to
| | 05:00 |
make it italic, and reduce the size.
So let's save our page, and head back to
| | 05:08 |
the browser I have opened in another tab,
index-alt.htm.
| | 05:17 |
So let me refresh that page, and there
you see the caption moving to the bottom
| | 05:22 |
over to the right.
Isn't that just the ticket for a discrete
| | 05:26 |
caption.
And because we haven't moved its HTML
| | 05:29 |
placement, it's still optimal for
accessability purposes.
| | 05:33 |
Perfect.
| | 05:34 |
| | Collapse this transcript |
| Using and styling| 00:00 |
The T head, T foot and T body tags are
really useful for large tables with lots
| | 00:05 |
of data.
They allow browsers to scroll through the
| | 00:09 |
data, that's the body section, while
keeping the header and footer sections
| | 00:12 |
static.
Because they're structurally integrated
| | 00:15 |
into the table, they can also be used for
styling your table.
| | 00:19 |
However, it's not quite as straight
forward as you might think.
| | 00:23 |
In this lesson, I'll show you how to
properly use the thead and tfoot tags
| | 00:27 |
with CSS to get a specific look and feel.
However, before we start with the CSS, I
| | 00:32 |
want to make sure that your HTML is set
up properly.
| | 00:36 |
To make it possible for browsers to work
their magic, you have to code your table
| | 00:41 |
so that the tfoot tag follows the thead
tag and is before tbody.
| | 00:48 |
Let me show you an example.
In my code editor with the index.htm
| | 00:52 |
file, the table starts on line 44 and
after the opening table tag, you'll find
| | 00:58 |
the thead section.
That closes on line 53.
| | 01:04 |
Then the tfoot tag is placed.
Notice that the tfoot tag has both a tr
| | 01:10 |
and td tag, table row and table data,
both essential.
| | 01:15 |
Finally the tbody section, starting on
line 59, provides an area for the core
| | 01:21 |
data.
Let's switch over to the main .css file.
| | 01:28 |
Where I've moved to the bottom of the
file.
| | 01:30 |
Before I show you the final code, I want
to demonstrate what happens when you use
| | 01:35 |
what you think would work.
So let's create a rule for the thead tag
| | 01:41 |
with a different background.
I'll use the background property, put in
| | 01:51 |
a, different color, and an image.
We'll Save it to repeat across the x axis
| | 02:02 |
access, and place it at the center top.
Let's Save the file and Preview it.
| | 02:10 |
So here's my file before I refresh the
page, and you see the tfoot information
| | 02:15 |
there for further information.
When I press Refresh, we should see the
| | 02:20 |
header section which is fall winter
summer change.
| | 02:24 |
So I'll go up and click Refresh, and
nothing.
| | 02:27 |
That's because, although the thead tag is
structurally wrapped around a section, it
| | 02:32 |
isn't actually rendered by the browser.
So, any CSS that you apply directly to it
| | 02:39 |
won't work.
Let's go fix that.
| | 02:43 |
Back in the CSS file, I'm going to modify
the selector so that it targets the trtag
| | 02:48 |
within the thead section.
So I'll go into my selector add a tr, and
| | 02:53 |
I'll need to add one more rule, and
that's to take care of an existing
| | 02:58 |
property already in place.
So again, I'm going to target the thead
| | 03:06 |
section and this time the th cells within
it.
| | 03:12 |
They already have a background color
applied to them, and because their
| | 03:16 |
rendered on top of the trtags, our
background won't show through unless we
| | 03:20 |
eliminate that preexisting background.
So Background, equals none.
| | 03:27 |
Just to show you the difference, I'm
going to Save the file, and go back to
| | 03:32 |
the browser, and now I Refresh the page
again, and there's our new color
| | 03:37 |
background.
Now you may notice a slight variation in
| | 03:43 |
the diagonal lines as it breaks up across
the different cells.
| | 03:47 |
That seems to be a webkit rendering
program because it's evident in both
| | 03:50 |
Safari and Chrome.
So, perhaps a diagonal background isn't
| | 03:54 |
the right choice for a situation like
this.
| | 03:58 |
However, I do want to continue and show
you now, how we can apply something
| | 04:02 |
similar to the tfoot area.
Back to our CSS file.
| | 04:06 |
Now in the tfoot section, there are no th
cells, there's only one td cell.
| | 04:12 |
So we can go directly to that, and we
don't have to go through the tr tag to
| | 04:17 |
get there.
So tfoot td, curly brace.
| | 04:21 |
Let's set the color to white, add a
significant amount of padding, 20 px.
| | 04:28 |
And we're going to pick up this
background property that we have here.
| | 04:32 |
Copy it, And Paste that in.
And then I'm going to add one more
| | 04:38 |
property, and that's a border bottom.
I'm going to make that 3 px wide, solid
| | 04:45 |
and white.
Well this bottom border will mask a
| | 04:49 |
problem that cropped up when previewing
the page in Firefox.
| | 04:54 |
They evidently have some rendering issues
with the thead, tbody, tfoot combination.
| | 05:00 |
So let's Save our file, head back to
Chrome, Refresh and there you have it,
| | 05:05 |
nicely styled thead and tfoot tags,
accomplished by making sure your CSS
| | 05:10 |
selectors are correct.
| | 05:15 |
| | Collapse this transcript |
Highlighting table content| 00:00 |
When there's a lot of data in a table,
you want to make it easy for users to
| | 00:03 |
pinpoint just what they're looking for.
One way to do this is to highlight the
| | 00:08 |
information, typically a row at a time,
when the user's mouse hovers over it.
| | 00:14 |
There is a very easy way to accomplish
that with CSS which we'll cover right out
| | 00:17 |
of the gate.
However, if you want to go further and
| | 00:21 |
highlight columns as well as rows, you
will need to bring JavaScript into
| | 00:25 |
equation.
I will show you how to use a jQuery plug
| | 00:29 |
in to handle those chores, and more.
Let us start however with the straight
| | 00:34 |
forward CSS approach.
And at the bottom of the page and all I
| | 00:38 |
need to do is add a single rule.
So I'm going to target main content,
| | 00:45 |
table, tr and then the pseudo selector
hover.
| | 00:52 |
Within my curly brace, I'll put in a
background color property.
| | 00:58 |
And set the color value to RGBA because
we want to use a opacity value here.
| | 01:07 |
And this will be a grayish color, 65, 62,
61.
| | 01:11 |
And then one more value, .6, close it
with a semicolon.
| | 01:18 |
I'll save the page, and let's go to the
browser where I'll Click refresh, and
| | 01:23 |
now, when I hover over my rows, you can
see the light gray color comes in along
| | 01:28 |
the table row.
Looks good, nothing spectacular, but it
| | 01:34 |
certainly does the trick.
Let's ramp it up a bit.
| | 01:38 |
There's really no reliable way that I'm
aware of to highlight both rows and
| | 01:42 |
columns at the same time with just CSS.
For that, we need to bring on the power
| | 01:48 |
of JavaScript.
Luckily, there's a terrific jQuery
| | 01:52 |
plug-in called Table Hover that is just
what the coder ordered.
| | 01:58 |
You can download the code and find out
more about it at the URL listed below.
| | 02:03 |
Let me show you how to use this plug in,
in a number of different scenarios.
| | 02:07 |
First, we'll need to include the
necessary JavaScript calls.
| | 02:11 |
So, let's go back to the code editor.
And in this tab, I have open index hyphen
| | 02:16 |
alt1 htm, after my link to my CSS file
and you'll note that it's main hyphen
| | 02:22 |
alt1.css.
I'm going to put in a couple of script
| | 02:28 |
tags.
The first will include the latest jQquery
| | 02:36 |
code, so enter in source and set that
equal to
| | 02:43 |
http://code.jquery.com/jquery-latest.min.js.
Let's set the type to text/javascript and
| | 02:59 |
close the tag.
Now, we're also going to need to include
| | 03:05 |
the link to the script tag that I've
already downloaded for table hover.
| | 03:11 |
So script, we'll set the SRC to my
scripts folder.
| | 03:17 |
And I only have 1 in there.
And that's jquery.tablehover.js.
| | 03:22 |
Again, let's set the type to text
Javascript, and close the tag.
| | 03:28 |
Finally, I'll need to, call the specific
function that I want, so we'll need one
| | 03:34 |
last script tag.
And here I'll just set the, type to text
| | 03:41 |
JavaScript, and open up a line here.
Now I am going to put in the document
| | 03:48 |
ready function from jQuery.
So within parenthesis it's document, then
| | 03:55 |
right after that it's dot ready, open
parenthesis, function, and open and close
| | 04:00 |
parenthesis, and then after that we will
put in our curly braces.
| | 04:08 |
And now we're ready to enter in our code
line.
| | 04:10 |
So, dollar sign, and then the selector
that we're looking for.
| | 04:15 |
I'm going to put this in single quotes,
and this is an ID of course table.
| | 04:21 |
That's the ID of the table that we're
targeting and then dot table helper.
| | 04:26 |
That's a function from the table hover
script obviously, follow that with an
| | 04:30 |
opening close parenthesis and a semi
colon.
| | 04:33 |
So I'll save this page, all we need to do
on the CSS side is to Create a rule for
| | 04:38 |
the default row hover class which is dot
hover.
| | 04:43 |
So I'm going to go to main alt1.css and
create that rule for my class called
| | 04:50 |
hover, and here I'll give it a background
color.
| | 04:57 |
We'll use the exact same declaration
where we set our gba to 65, 62, 61.
| | 05:07 |
0.6.
Close it off with a semicolon.
| | 05:08 |
I'll do a quick Save, and let's head back
to the browser.
| | 05:09 |
Now, I have it open in this tab here.
This is index_alt1.
| | 05:16 |
Let me refresh the page.
Make sure I got the most current.
| | 05:23 |
And, there's my hover.
I think it works very well, actually, a
| | 05:29 |
little bit better than the standard CSS
approach.
| | 05:33 |
Let's take it a step further.
What about highlighting both row and
| | 05:36 |
column at the same time.
The table hover plug in handles that
| | 05:41 |
easily.
So, in the code editor, I'm going to go
| | 05:44 |
to index-alt2.htm where I already have
the code that I put in for index 1, and,
| | 05:49 |
within my table hover function call, I'm
going to add in a special property.
| | 05:56 |
So I'll put in a curly brace to start
that out.
| | 06:00 |
And the property is Col Class and this is
for Column Class, of course.
| | 06:06 |
And we'll set that equal to hover.
And we don't need to add any CSS,as we
| | 06:10 |
are using the same class hover for both
row and column.
| | 06:14 |
So, we'll just save the page and we view
it in the browser.
| | 06:19 |
And this is index alt2.
I'll refresh the page and now as you can
| | 06:25 |
see when I hover over, I get both the row
and the column highlighted.
| | 06:31 |
While this is definitely overkill for
this small a table, it looks pretty good.
| | 06:36 |
Now you can take it even further with the
table hover plug in even to the point of
| | 06:40 |
fixing the highlight with a single Click.
Let me demonstrate how that looks in a
| | 06:46 |
browser.
So I have index alt3 open here.
| | 06:50 |
And as you can see when I hover over a
section I get different background color
| | 06:55 |
for exactly where my.
Cursor is and once I stay there, if I
| | 07:00 |
Click I can move my cursor away and the
highlight remains.
| | 07:05 |
Pretty cool eh?
Now that's handled by this particular
| | 07:08 |
code here on lines twenty and twenty-one
where we've added two more attributes,
| | 07:13 |
cell class, which identifies a class of
hover cell.
| | 07:19 |
That's the highlighted class that was
showing and Click class to show what
| | 07:23 |
colors you want when somebody Clicks.
To sum up, simple tables can probably use
| | 07:29 |
the CSS only solution.
More complex tables could benefit from
| | 07:34 |
taking the CSS and java script approach.
| | 07:38 |
| | Collapse this transcript |
| Creating alternating row colors| 00:00 |
Tables are great for organzing data, but
left unadorned they can be difficult to
| | 00:05 |
read.
Alternating the background color every
| | 00:09 |
other row goes a long way towards
enhancing readibility.
| | 00:13 |
The old way of doing this was via classes
on the table rows like odd row and even
| | 00:16 |
row.
That's pretty time intensive to set up,
| | 00:21 |
and if you rearrange the rows or add a
new one into the mix, you have to move
| | 00:24 |
all the classes.
A far better approach is to use the CSS 3
| | 00:29 |
selector nth child.
As a bonus, I'll also show you how to
| | 00:33 |
highlight the data in every other column.
For basic zebra striping, nth child is
| | 00:39 |
pretty straightforward to set up.
Let's start with a plain table shown here
| | 00:44 |
in my index.htm file.
As you can see in the browser, every row
| | 00:49 |
is exactly the same.
So let's go to the code editor, where I
| | 00:53 |
have opened the associated CSS file,
main.css.
| | 00:57 |
And add in the necessary rule.
First let's target the TR tags in our
| | 01:03 |
table, so main content, table tr, and now
we'll add the pseudo selector nth child.
| | 01:13 |
I'll pass in a even argument and then add
the curly braces, and now we're ready to
| | 01:18 |
specify our properties and values...
I need just one.
| | 01:24 |
Background, and we'll set that to rgb
249228130, and I've closed it with a semi
| | 01:32 |
colon.
What makes nth child really easy to use
| | 01:37 |
with tables is it's support of the even
and odd argument.
| | 01:43 |
There is a whole formulaic side to nth
child.
| | 01:46 |
So you could target every third or every
seventh or every tenth row if you wanted.
| | 01:51 |
But for alternating rows in a table, the
even and odd arguments are perfect.
| | 01:56 |
Lets save the page.
Go to the browser and I'll refresh.
| | 02:01 |
You can see the second and fourth rows
are even rows.
| | 02:05 |
Now have a lighter background color.
Pretty easy right?
| | 02:09 |
And best of all, any new table rows you
add or move around are automatically
| | 02:13 |
colored appropriately, all without
changing a bunch of classes.
| | 02:17 |
Now, it's time for the bonus.
Let's go back to our CSS file, and I'm
| | 02:21 |
going to add another rule.
We'll start out with the same basic
| | 02:26 |
selector, main content.
Table, but now we'll target the TD tag,
| | 02:33 |
and nth child.
Again with the even argument, our curly
| | 02:40 |
braces.
Now rather than change the background
| | 02:44 |
color, let's make the content for every
other table cell, bold.
| | 02:48 |
So I'll set to font wait.
To bold.
| | 02:51 |
Again, a quick save.
And browser refresh shows the result.
| | 02:57 |
It's somewhat subtle.
But as you can see, the content in the
| | 03:00 |
second and fourth TD cells are now bold.
I have to admit, I really love the nth
| | 03:05 |
child selector.
Not only for it's sci-fi-ish name.
| | 03:09 |
But also for how much drudgery it removed
from the alternating table row process.
| | 03:14 |
| | Collapse this transcript |
| Identifying and styling columns| 00:00 |
Some tables require emphasizing columns
over rows.
| | 00:04 |
In this lesson, I'll show you how to set
up your HTML for easy column styling with
| | 00:09 |
CSS.
I have open the Index.htm file, I've
| | 00:13 |
scrolled down to where my table code
starts on line 35.
| | 00:19 |
In order to properly target the columns
in a table, I'll need to insert a little
| | 00:23 |
bit more table markup.
So, right after the opening table tag,
| | 00:28 |
I'm going to put in a series of col tags,
short for column of course.
| | 00:34 |
These are so called Empty tags, like
Image.
| | 00:36 |
So, we'll close them off immediately.
I also want to include an ID for all of
| | 00:41 |
them except the first one.
So I'll enter in col and then just close
| | 00:47 |
the tag.
This is for the first column, that has
| | 00:50 |
the course titles in it, and I'm not
going to highlight that particular one,
| | 00:53 |
of course.
Let's go to the second one, again another
| | 00:58 |
Col tag.
This time I do want to put in an ID.
| | 01:02 |
And this is for the fall semester so I'm
just going to call this Fall col.
| | 01:09 |
Close that one.
The next Col will have an ID of winter.
| | 01:15 |
Our next seasonal column, Spring Col, and
finally the Col tag with an ID of Summer
| | 01:30 |
Col.
And now that I have that HTML in place, I
| | 01:38 |
can create a CSS rule that targets the
desired columns.
| | 01:44 |
I'll switch over to Main.css and here at
the bottom of the file, I'll target
| | 01:49 |
winter column and the summer column.
So hash, Winter Col, comma, hash Summer
| | 01:58 |
Col, and within my color braces let's put
in a background color property of RGB a
| | 02:08 |
299, 174.5.
This will give us a light blue highlight.
| | 02:17 |
Close that with a semicolon.
Now let's save all pages, both my HTML
| | 02:22 |
and CSS.
And take a look in the browser.
| | 02:25 |
That's pretty good.
I do want to point out, that in order for
| | 02:29 |
this to work, neither the TD or the TR
tags can have a background color.
| | 02:35 |
If they did that color would have
priority.
| | 02:39 |
Now this method works well for
individually ID'd columns in a static
| | 02:42 |
table.
But what about a more dynamic table
| | 02:45 |
that's generated on the fly or one that
is prone to changes?
| | 02:50 |
Another approach would be to use the Inth
child selector.
| | 02:54 |
So let's go back to the CSS file.
And I'm going to alter the selector, to
| | 02:58 |
use my Inth-child Pseudo-Selector rather
than identify specific columns.
| | 03:06 |
So main content, Table >Column and then
colon for a Pseudo-Selector, inth-child,
| | 03:13 |
and in parenthesis Add, a quick save, and
back to my browser, Refresh.
| | 03:21 |
There's the highlighted columns, just as
sweetly styled as before.
| | 03:26 |
So there's two different techniques for
styling columns depending on your table
| | 03:31 |
needs.
Just remember to add in the necessary
| | 03:34 |
coal tags in you HTML, and you'll be good
to go.
| | 03:38 |
| | Collapse this transcript |
| Building responsive tables| 00:00 |
Responsive design is the web designers
reaction to the ever increasing number of
| | 00:04 |
different screen sizes that web sites
must be viewed on.
| | 00:09 |
In a responsive design headings, columns,
and even images re-size proportionally
| | 00:13 |
when viewed on tablets and phones.
Tables, if not addressed, can shrink to
| | 00:19 |
unreadable sizes, the table data all
squished together.
| | 00:24 |
In this lesson, I'll show you one method
for handling tables responsivively.
| | 00:29 |
First, let's take a look at the problem.
I have open in my browser, the
| | 00:33 |
profile.htm file.
I'm going to grab the screen edge over on
| | 00:37 |
the right-hand side and begin to narrow
it.
| | 00:41 |
As I do, you can see the columns are
resizing, as are the images.
| | 00:46 |
Even the table does okay, because its
width is set to 100% for most of the
| | 00:50 |
time, but watch what happens as I get to
the smallest size.
| | 00:58 |
As you can see much of the table is
forced together, it's not as bad as it
| | 01:01 |
could be, but it's certainly not as
readable anymore.
| | 01:04 |
Now, let me show you, the solution that
we're going to implement.
| | 01:10 |
I'll switch to the final version of this
page.
| | 01:15 |
Now when I reduce the screen size,
everything's normal until we get to the
| | 01:21 |
smallest phone size.
Now the table has been restructured, so
| | 01:26 |
that each row is its own separate area.
Alternating rows are highlighted with a
| | 01:31 |
different background color to make it
easy to tell them apart.
| | 01:37 |
Best of all, everything is perfectly
readable.
| | 01:39 |
This solution is based on one created by
Chris Coyier, and showcased in his CSS
| | 01:44 |
tricks website.
Let me re-size the screen back out to
| | 01:48 |
desktop size, and there's my standard
table again.
| | 01:53 |
So to tackle the problem, let's head on
over to the code editor.
| | 01:59 |
This particular responsive of design,
imports separate style sheets for the
| | 02:02 |
different media queries.
I'm here at the bottom so I can start
| | 02:06 |
entering in our table specific rules.
I'll need to create five different CSS
| | 02:11 |
rules.
Let's start by changing all the table
| | 02:15 |
elements to display block.
Keep in mind that the rules that I'm
| | 02:19 |
putting in here, will only take effect
when viewed on a phone or phone size
| | 02:22 |
screen.
So first I'll put in my range of table
| | 02:27 |
elements as selectors, including table,
thead, tbody, Th, Td, Tr, and caption.
| | 02:37 |
Then within the curly brace we'll set it
all to display, block.
| | 02:44 |
Next let's hide the TR tag in the thead
section, because we're not going to need
| | 02:51 |
table headers.
Now we're ready to set up our alternating
| | 03:01 |
table row colors.
Nth of type is similar to nth child, and
| | 03:06 |
sometimes they can be used
interchangeably.
| | 03:10 |
And this is one of those circumstances.
Here I'll set the background color to an
| | 03:16 |
rgba value with a .25 opacity.
Let's restyle the td tag, to remove the
| | 03:26 |
border and then center the text.
Before we add in our header content,
| | 03:37 |
we're going to style how it will look.
We'll be inserting it via the before
| | 03:46 |
pseudo selector, so we can use that same
selector to style it.
| | 03:51 |
First I'll start off with a position
absolute, and then specify where I want
| | 03:58 |
that to be, in this case, top 6 px and
left 6 px.
| | 04:04 |
We'll give it a width of 45% and a
padding right value of 10 px.
| | 04:12 |
I want to set the white space to no wrap,
so that it all appears as a single line,
| | 04:19 |
and text align it to the left.
Finally, we need to bring in the before
| | 04:27 |
content.
We'll use the CSS three nth of type
| | 04:32 |
selector to specify which content goes
where.
| | 04:37 |
We're going to need one rule for each of
the five headings.
| | 04:44 |
I can specify which of the headings I'd
like to target by putting its index value
| | 04:48 |
in parentheses.
So we'll start with the first one, the 1,
| | 04:52 |
and after we've identified it we want to
put in the before pseudo selector.
| | 04:58 |
And within our curly braces, content, and
then in quotes, the first one is Title.
| | 05:08 |
After the quotes, we'll put in a
semicolon.
| | 05:11 |
Now we're basically going to be
repeating, this same rule five different
| | 05:17 |
times changing the nth of type value and
then the content.
| | 05:23 |
So, I'm going to Copy it, and then Paste
it in.
| | 05:29 |
Lets go ahead and change the 1 to a 2,
and this time the content will be year.
| | 05:37 |
We'll Paste it in again, move up to
three, our third heading is Media.
| | 05:48 |
One more time, once again, change
nth-of-type to 4, and the content to
| | 05:54 |
Dimensions.
And then one final time, to Paste it in,
| | 06:00 |
change nth-of-type to 5, and our final
content is Price.
| | 06:07 |
All done.
So I'm going to save Phone.css, and then
| | 06:10 |
head back to the browser.
So I'm going to go to the first tab which
| | 06:16 |
has my original file in it and click
Refresh.
| | 06:21 |
You won't see any change when the page is
initially presented, because if you'll
| | 06:26 |
recall, we just worked on the phone.css
file, so let me drag it in and we'll
| | 06:30 |
bring it in all the way, and looks pretty
good.
| | 06:35 |
There's our totally revised table.
So the table has reformatted itself, and
| | 06:40 |
added the alternating row background
colors, as well as removing the header
| | 06:44 |
row.
Each area includes all the needed labels,
| | 06:47 |
and my readability is through the roof.
Nice job!
| | 06:52 |
This is only one approach to the question
of responsive design for tables, but I
| | 06:55 |
think that you'll find it's a very solid
one, that will work quite for a majority
| | 06:59 |
of your table data.
| | 07:02 |
| | Collapse this transcript |
| |
|
4. Creating Charts and Graphs with CanvasBuilding bar charts| 00:00 |
The first thing that comes to mind when
you hear the term, visual data, may very
| | 00:04 |
well be charts.
Throughout this chapter, we'll take a
| | 00:08 |
look at ways to visualize data through a
number of different graphs.
| | 00:12 |
Our first type covered in this lesson is
the bar chart.
| | 00:16 |
Of course, you can create a bar chart, or
any other type of chart in a graphics
| | 00:19 |
program like Photoshop.
But it's far more interesting for the web
| | 00:23 |
designer to do it where you have a larger
measure of control.
| | 00:27 |
And can change it at the drop of a
client's hat.
| | 00:30 |
For that, we need to turn to the HTML 5
innovation canvas.
| | 00:35 |
Canvas objects are drawn programmatically
through java script, which means it's
| | 00:39 |
much easier to change the things like the
data values and labels.
| | 00:44 |
For this chart, I'm going to use a code
developed by a gentleman named William
| | 00:49 |
Malone, and available on his site.
Let's start.
| | 00:55 |
The first task is to link to the Java
script file that contains the majority of
| | 01:00 |
the functionality.
I'm going to place my cursor after the
| | 01:05 |
link to main.css.
And enter the needed script tag.
| | 01:11 |
I'll set the source to my scripts folder.
Where I've already downloaded
| | 01:18 |
HTML5-canvas-bar-graph.js.
Now let me set the type to text
| | 01:24 |
JavaScript and close the tag.
Now I am going to scroll down the page a
| | 01:28 |
little bit just to point out a div that
we have on line 36.
| | 01:33 |
You'll see a div there already marked up
with the id of bar chart.
| | 01:38 |
That is where our bar chart is going to
go.
| | 01:42 |
Let's go do to the bottom of the page,
and we'll put in the script tag that
| | 01:45 |
we'll call all the canvas drawing
functions.
| | 01:48 |
I am going to place this just above the
closing body tag and I'll start by
| | 01:52 |
entering a script tag, and then in the
center create a little space.
| | 01:58 |
Because we're not using jQuery or its
equivilent, we don't have something like
| | 02:03 |
the jQuery document ready function, so
we'll need to wrap the entire fucntion in
| | 02:07 |
parantheses.
After I type in the word function, I'll
| | 02:12 |
enter another set of parenthese.
And then following that between the two
| | 02:17 |
closing parenthesis, I'll put in my curly
brace pair, and hit return to open up a
| | 02:22 |
line.
Next, we'll create the canvas object.
| | 02:27 |
So I'll enter in var and I'm going to
call this variable CTX, and set that
| | 02:31 |
equal to, Create Canvas this is a
function that's in the library that we
| | 02:36 |
link to.
And we'll give it the name of the divs
| | 02:42 |
ID, bar chart, so we can tell where to
place that canvas.
| | 02:49 |
On the next line we'll create a new bar
graph object, and I'm just going to call
| | 02:55 |
this graph, and set that equal to new bar
graph and will use the canvass CTX.
| | 03:03 |
Now we need to specify a good number of
values.
| | 03:07 |
First, we'll set the maximum value and
we'll target graph the property max
| | 03:14 |
value, and make that 1,000.
Then the margin between each of the bars,
| | 03:22 |
I'm going to set the graph.margin equal
to 5.
| | 03:27 |
Next up the colors will be defined in an
array.
| | 03:31 |
For an array we'll use the square
brackets.
| | 03:35 |
And each value within it is a string, so
it'll be contained within a pair of
| | 03:40 |
quotes.
All of these values that I'll enter are
| | 03:44 |
six digit hexadecimal numbers, 0263ae is
the first one.
| | 03:50 |
Next will be a858a3.
Our next colored number, fbae2c, and then
| | 04:02 |
the final one, df4c27.
Let's close off that entire array with a
| | 04:09 |
semicolon, and now we're ready for the
labels.
| | 04:12 |
These particular labels will go along the
x axis, so x axis Label Arr, short for
| | 04:18 |
array, and for an array we'll use the
square brackets.
| | 04:25 |
And the first in the array is Painting,
followed by Sculpture, next Digital, and
| | 04:33 |
then Studio.
Don't forget your closing semicolon.
| | 04:41 |
Our final line are the values that we
want to pass in for the data.
| | 04:47 |
And for that we use the method update.
And because it's a method, a set of
| | 04:52 |
parenthesis follows it.
And within it, the square brackets of the
| | 04:56 |
array.
These are number values so they don't
| | 04:58 |
need quotes.
So Painting is 950, Sculpture 650,
| | 05:04 |
Digital 700, and Studio 885.
Looks like I need to add another pair of
| | 05:08 |
parentheses here, following the function
call, and a closing semi-colon.
| | 05:09 |
Let's Save the file and Browse it.
As you can see, this bar chart has
| | 05:22 |
gradients built in to give it a very
polished result.
| | 05:29 |
If you change the number of elements in
the array, you can alter the number of
| | 05:32 |
bars shown.
All in all, I think it's a pretty
| | 05:35 |
flexible, easy to use system, and I hope
you find it so.
| | 05:40 |
| | Collapse this transcript |
| Creating pie charts| 00:00 |
One of the best arguments for using
canvas to draw your charts rather than
| | 00:04 |
using a static image, is interactivity.
If the user can interact with a pie chart
| | 00:09 |
for example, it makes it more interesting
and memorable and that's exactly what I'm
| | 00:12 |
going to show you in this lesson.
A pie chart that explodes the slices of
| | 00:18 |
pie when clicked to reveal the raw data,
as well as calculated percentage.
| | 00:24 |
What's more, it's incredibly easy to
configure.
| | 00:26 |
Sound good?
Let's get to it.
| | 00:30 |
The pie chart I'm going to show you is
based on work by Matt Doyle and Simon
| | 00:33 |
Meek of elated.com.
I already have the HTML for the table
| | 00:37 |
data in place, as you can see starting on
line 35.
| | 00:42 |
But I still need to drop in my canvas.
If you've already viewed the building bar
| | 00:47 |
charts lesson in this chapter, you may
recall that the canvas tag was inserted
| | 00:51 |
via JavaScript.
Here, we'll add it manually, right in the
| | 00:56 |
code.
There's a placeholder on line 34 that
| | 00:59 |
I'll remove first, and insert my canvas
tag.
| | 01:06 |
So we want to give the canvas tag an ID
and I'm going to call this chart.
| | 01:12 |
We also want to give it a specific width.
I'll make mine 600 pixels.
| | 01:16 |
You don't need to put in the px or pixel
value.
| | 01:20 |
And we also need a height, let's make it
500.
| | 01:23 |
I can close off the canvas tag, and
that's all we need to do for the HTML.
| | 01:28 |
Now let's bring in the JavaScript that
will power the canvas.
| | 01:32 |
Let us scroll up to the head section, and
right after my link to the CSS file.
| | 01:38 |
And first I'll add my jQuery link.
We'll put that in a script tag and set
| | 01:46 |
the source to
http://code.jquery.com/jquery-latest.min.js,
| | 01:55 |
and close the script tag.
Next, we're going to put in a conditional
| | 02:04 |
comment.
Which is used by Internet Explorer
| | 02:07 |
browsers.
And include the explore canvas code, that
| | 02:11 |
enables canvas on earlier versions of
Internet Explorer.
| | 02:17 |
So a conditional comment starts as a
standard HTML comment with an exclamation
| | 02:21 |
mark and two dashes followed by a pair of
square brackets.
| | 02:27 |
And the condition, If IE,mMeaning, if
Internet Explorer.
| | 02:32 |
Then you just close this as if it were a
standard tag.
| | 02:36 |
And enter in your code.
Ours will be a script tag with a source
| | 02:45 |
equal to http://explorercanvas
.googlecode.com/svn/trunk/xcanvas.js.
| | 03:02 |
Close your script tag and then after the
closing script tag, put it in an angle
| | 03:07 |
bracket, another exclamation mark, a pair
of square brackets, and the keyword and
| | 03:12 |
if, and now we'll close out the comment.
Only Internet Explorer browsers will
| | 03:19 |
interpret this, because it's in the
comment, all other browsers will simply
| | 03:23 |
be ignored.
Let's link to the JavaScript code
| | 03:28 |
particular to this project.
So I'll set my source to my scripts
| | 03:34 |
folder and in it is the piechart.js file,
and I also want to set my type to text
| | 03:41 |
java script.
We close that script tag.
| | 03:47 |
I'll show you where the important
modifiable sections of the code are in
| | 03:51 |
just a bit, but let's go ahead and enter
in our snippet of jQuery code to kick it
| | 03:55 |
all of.
So, after that closing script tag, a new
| | 04:01 |
line, and a script type, text JavaScript.
And within the script tag, we'll put in
| | 04:12 |
the jQuery document ready function.
So that's a dollar sign followed by a
| | 04:17 |
pair of parentheses and in the
parentheses is the word document.
| | 04:21 |
After the parentheses .ready, another
pair of parentheses.
| | 04:27 |
Within that set of parentheses, the word
function, followed by yet another pair of
| | 04:32 |
parentheses, and after that closing
parenthesees.
| | 04:36 |
But before the final closing parentheses,
we put in a pair of curly braces.
| | 04:41 |
Now we can open that up and put in our
one call that we need, which is dollar
| | 04:46 |
sign, parantheses, pie chart.
Close that out with a semicolon and we're
| | 04:53 |
good to go.
So now I'm going to go ahead and Save the
| | 04:56 |
file, and then preview it in the browser,
so you can see what's happening.
| | 05:00 |
I have the page alread open prior to
adding in our JavaScript code, and there
| | 05:04 |
you can see the text as well as the
table.
| | 05:08 |
Let me scroll down just a little bit.
Now, let's go ahead and hit Refresh, and
| | 05:14 |
there's our pie chart.
Now what's really cool about this, is if
| | 05:18 |
I hit hoover over it, and click on it,
the pie explodes and we get to see the
| | 05:22 |
number values.
Let me show you another one here's
| | 05:27 |
studio, here's digital and their
sculpture.
| | 05:32 |
I want to show you a bit of the
JavaScript code for the pie chart, so
| | 05:34 |
you'll know what you can change.
Let's go back to the code editor where I
| | 05:40 |
have piechart.js.
And right at the top are all the settings
| | 05:43 |
that you can configure.
Many of them are self explanatory but let
| | 05:47 |
me point out a few of them, so you know
basically what you can change.
| | 05:53 |
The first one on line 4, chart size
percent is set to 55.
| | 05:58 |
You may be tempted to set this to 100%,
but quite often that won't work because
| | 06:02 |
of the various labels and everything that
appear outside of the pie chart.
| | 06:08 |
This value applies only to the chart
itself.
| | 06:12 |
So a little experimentation is required.
Then you see pretty easy to understand
| | 06:16 |
values, the sliced border width set to
one, the sliced border style set to a
| | 06:20 |
white color, the gradient color is a
lighter gray, and you have more specific
| | 06:24 |
things like how far do you want the slice
of the pie to be pulled out.
| | 06:30 |
Here the max pull out distance is 25.
There are many other values that you can
| | 06:35 |
change here.
If I scroll down just a little bit more,
| | 06:39 |
you can see there are other things like
current pull-out slice on line 25.
| | 06:46 |
It's initially set to negative one,
meaning that none of the slices are
| | 06:49 |
pulled out.
However, if you wanted to have one
| | 06:53 |
already pulled out when you first started
the page, this is where you would change
| | 06:58 |
that value.
I'll let you continue to explore the rest
| | 07:02 |
of the configuration settings at your
leisure.
| | 07:05 |
Now you may be asking yourself, where is
the pie chart data?
| | 07:09 |
Where do the labels and numbers come
from?
| | 07:12 |
Well, that's the cool thing.
It's all drawn from the table.
| | 07:18 |
The JavaScript code pulls in the label
from the first column, and the numbers
| | 07:22 |
from the second column.
It even gets the color from the color
| | 07:26 |
property, placed in line through the TR
tag.
| | 07:30 |
You can also set up a series of IDs and
establish a number of CSS rules to handle
| | 07:35 |
the colors, but for our purposes this is
more direct.
| | 07:40 |
To demonstrate the other coolness of this
application, let me go back to my code
| | 07:44 |
and add in another table row.
Which will automatically create another
| | 07:49 |
pie slice and recalculate all the
percentages.
| | 07:53 |
Okay, so back to the code, index.htm, and
I'm going to go down where my table is,
| | 07:59 |
and we'll add this right after the last
color, studio.
| | 08:06 |
So I'll copy this last one, and then just
paste it in and change the values.
| | 08:14 |
So we want it to have it's own color, so
I'm going to change this to zero, zero,
| | 08:19 |
nine, nine, cc.
We'll change the label from studio to
| | 08:25 |
drawing, another course.
And the value here, 400.
| | 08:30 |
After I Save the page, head back to the
browser and refresh it.
| | 08:35 |
There's our new entry into the table, and
look up top here.
| | 08:40 |
We now have a new entry in our pie.
When I click on it, I get both the value
| | 08:45 |
and the percentage.
I don't know about you, but I think
| | 08:49 |
that's one tasty bit of programming.
Feel free to adapt the code to suite your
| | 08:54 |
own needs.
| | 08:55 |
| | Collapse this transcript |
| Overlaying Venn diagrams| 00:00 | Venn diagrams depict the overlapping of
two or more data sets, and they're great
| | 00:05 | for visually reinforcing
the idea of commonality.
| | 00:09 | In this lesson, I'm going to introduce
you to a terrific JavaScript library for
| | 00:14 | drawing charts with canvas.
| | 00:15 | All kinds of charts including,
as you'll see, Venn diagrams.
| | 00:21 | The library is called canvasXpress
and it was developed by Isaac Newhouse.
| | 00:27 | You can download the code from his
site canvasXpress.org where he illustrates
| | 00:31 | support for an enormous
number of different chart types.
| | 00:34 | canvasXpress is very powerful and very flexible.
| | 00:39 | I want to show you our final
result so you'll know where we're going.
| | 00:44 | I have open here the index file from the
Chapter 4 > 04_03 > final folder in the browser.
| | 00:51 | Here you can see my Venn diagram where
I show the number of students who take
| | 00:56 | painting, those that take
sculpture, and those that take both.
| | 00:59 | As you can see, the legend text
is the same color as the elements.
| | 01:04 | All the data and even the data
element colors are configurable.
| | 01:08 | Pretty nice looking, right?
| | 01:10 | So let me demonstrate how
to put canvasXpress to work.
| | 01:14 | In my code editor let's
put in the canvas tag first.
| | 01:18 | Here on line 34 I have my
placeholder so let me remove that.
| | 01:23 | And we'll put in canvas, give an ID
equal to Venn canvas, set the width to 600.
| | 01:35 | Again no need to put in pxr pixels
and height 500 alright we close off the
| | 01:43 | canvas tag and now we are ready to
bring in our external code libraries.
| | 01:47 | I go up to the head section, and
right after the link to our css file.
| | 01:55 | I'm going to put in a CSS
file, that's for canvasXpress.
| | 02:00 | Give it a rel attribute of stylesheet,
and an href pointing to our CSS folder.
| | 02:13 | Where I have canvasXpress.css already
there and will set the type to text/css
| | 02:24 | now let's close off this tag
and go on to the next line.
| | 02:28 | Our next line is a conditional
comedy that will pull in an alternative
| | 02:32 | javascript file for any internet
explorer version less than nine when native
| | 02:38 | canvas support was introduced.
| | 02:39 | I've already downloaded this file as
well as the additional flash support files
| | 02:44 | that are needed and put them all in my
scripts folder, so we'll start this with
| | 02:48 | a comment, and then square brackets
and the conditional phrase if, l, t, that
| | 02:57 | stands for less than...
| | 02:59 | IE nine, and then we close this
particular grouping with an angle bracket, and
| | 03:07 | enter in our script tag, script type
text javascript and the SRC is found in the
| | 03:20 | scripts folder and it's called flashcanvas.js.
| | 03:27 | Close that tag and now we're ready to
put in the closing for the conditional
| | 03:33 | comment which is in a set of angle
brackets followed by a, exclamation mark,
| | 03:39 | square brackets, the key word and if ,
and then we close out the comment itself.
| | 03:45 | Next let's link directly to
the canvas express script.
| | 03:49 | So script, type equals text javascript,
and the src, we found in our script
| | 04:00 | folder and the file we want is
canvasXpress.min.js once I have that I can
| | 04:07 | close my script tag.
| | 04:08 | I have also moved some
additional functions to a helper file.
| | 04:14 | So I will need to create a
script tag for that code as well.
| | 04:19 | Script type text Javascript, and again
the src points to our scripts folder,
| | 04:30 | where canvasXpress-helper.js is found.
| | 04:34 | We close that tag.
| | 04:36 | And that section of the code is done.
| | 04:38 | Now we're ready to put in the java
script code that will call the chart builidng
| | 04:42 | funcitons and pass in our
data and other parameters.
| | 04:45 | We're going to start with a function
that I'll call show chart and have it
| | 04:50 | create a new canvas express object.
| | 04:53 | So let's begin by building our basic
script tag, and setting up the variable,
| | 05:01 | showChart, set that equal to a
function followed by parentheses, and an open
| | 05:11 | and close curly brace.
| | 05:13 | Now we're ready to create
that new canvasXpress object.
| | 05:16 | So, new, canvasXpress.
| | 05:21 | This object takes three arguments.
| | 05:24 | The first is the ID of the canvas tag,
which in our case is Venn Canvas.
| | 05:30 | So, I'll open up a pair of
parenthesis, and put in quotes, Venn Canvas.
| | 05:36 | This is followed by a
comma and a curly brace pair.
| | 05:41 | The second argument is an object
that will be drawn on the canvas.
| | 05:45 | For us, the Venn diagram and the legend.
| | 05:48 | So let's start with the Venn diagram first.
| | 05:51 | We give that a name of Venn.
| | 05:53 | And inside the Venn element is another array.
| | 05:57 | This one is for data.
| | 06:00 | Data in a Venn diagram is listed
alphabetically and we have three data points on our example.
| | 06:08 | So again I am going to open up another curly
brace and we can begin putting in our data.
| | 06:13 | The first will be A and we'll set the
value for A to 950, follow that with a comma.
| | 06:19 | B, whose data is 650, again, another comma,
and finally is the overlap of the two, AB.
| | 06:32 | This will enter in a value of 375.
| | 06:36 | That's all the data points at this time.
| | 06:39 | So after the closing curly brace, that
incorporates our three data points, put a
| | 06:43 | comma, we're ready for the
second of two elements, the legend.
| | 06:50 | And of course that is also an array, and it
relates to the data A, which will be painting.
| | 07:00 | After that closing quote there, put a
comma to make sure, and then B, followed
| | 07:05 | by a colon, and sculpture.
| | 07:08 | Let me scroll up somewhat.
| | 07:11 | The final argument for our
canvasXpress object is an array of attributes.
| | 07:16 | And to begin that we'll need to
add in another curly brace set.
| | 07:21 | First we'll enter in a closing curly
brace though, which as you can see begins
| | 07:26 | to close off the canvas
express object on line 22.
| | 07:29 | Then I'll enter in a coma, and an
opening curly brace which as you cans see a
| | 07:35 | light box that(UNKNOWN) has drawn along the
line curly brace, closes that center braces off.
| | 07:42 | So we'll enter on our ray elements.
| | 07:44 | The first of which is the type of graph
so, graph type, column and then quotes
| | 07:52 | then make sure you use an upper case V
followed by a comma, next is the Billian
| | 07:59 | use FlashIE and we are
going to set that to true.
| | 08:04 | This will indicate that we were using
the flash fallback for internet explorer.
| | 08:08 | You can also use the google explorer
canvas code if you prefer, then we are go
| | 08:14 | enter in a background value in
rgb format and it will be white.
| | 08:22 | Which is 255, 255, 255.
| | 08:26 | A comma follows that.
| | 08:28 | Next up, we specify the array of
colors to use for the Venn element.
| | 08:32 | And we'll set up the colors we
want to use, again, in RGB format.
| | 08:39 | The first is the color for the number
of students taking painting and that will
| | 08:44 | be RGB, 168, 88, 163.
| | 08:49 | After your quote, put in a comma and
another pair of quotes, and the second RGB
| | 08:57 | value, which will be 299174.
| | 09:04 | After the square bracket, because
that's the end of the value, another
| | 09:08 | comma, the then legend colors
attribute is next, and that's going to be set
| | 09:13 | to true because we want to link those colors
we specified to the text color of the legend.
| | 09:24 | Finally, we specify the number of
Venn groups, which, in our case, is two.
| | 09:32 | Note that you don't want to include the
intersection of groups, only the primary gorups.
| | 09:38 | We've got one last bit of HTML to include.
| | 09:41 | And that's the trigger to set
off our show chart function.
| | 09:45 | For this, we'll add an
unload event, to the body tag.
| | 09:56 | And as its value, show
chart, parantheses, semicolon.
| | 10:00 | Let's save the page and take
a look at it in the browser.
| | 10:05 | I'll go back to my initial page and
click refresh, and there's our Venn daigram.
| | 10:13 | canvassXpress has a number of built
in functions when the page loads, and
| | 10:19 | disappears when the
visitor rolls over the chart.
| | 10:22 | I can roll over the top of
the chart to reveal them again.
| | 10:26 | If you click on the question mark
symbol you'll see a complete breakdown
| | 10:31 | of these functions.
| | 10:33 | What's really cool about this to me, I
mean beyond the perfect drawing of the
| | 10:37 | Venn diagram elements, is
how easy it is to modify.
| | 10:41 | Obviously, it's nothing to change the raw data.
| | 10:44 | But what about adding in another
event element? Let's go for it.
| | 10:49 | I'm going to switch to my code editor.
| | 10:52 | And we'll modify the show chart function.
| | 10:55 | Or I'll scroll up a bit.
| | 10:58 | First, I'll add in my additional data.
| | 11:01 | I'm going to add in a third
primary element, a C element.
| | 11:08 | And we'll give that a value
of 700, followed by a comma.
| | 11:13 | That means that we've added
three additional intersections.
| | 11:17 | So after AB 375 add another comma.
| | 11:23 | And then put in AC, and we'll set that equal
to 430 comma, BC and set that equal to 250.
| | 11:35 | And then finally, A, B and C, where
all three primary elements overlap.
| | 11:43 | And we will enter that in as 25, now if
I left off any of the values, they would
| | 11:49 | just show up as the zero so we
have our data n what about the legend.
| | 11:55 | I see also as I am looking at it
that I have misspelled sculpture.
| | 12:00 | Always good to revisit your data.
| | 12:02 | Let's go ahead and enter in in
quotes C, and let's make this digital.
| | 12:13 | OK, that's my new label.
| | 12:16 | What about giving it a new color?
| | 12:19 | So I'm going to enter a
third RGB value, 230, 120, 72.
| | 12:29 | And, the final thing we have to do,
change the number of primary Venn
| | 12:33 | groups from two to three.
| | 12:35 | Let's save the file.
| | 12:38 | And the moment of truth. Browser refresh.
| | 12:41 | And now we have a much more complexed
Venn diagram where it's really easy to
| | 12:46 | visualize how the data interrelates.
| | 12:49 | Have fun exploring what data you can
visualize with Venn diagrams and show off
| | 12:54 | with the HTML5 canvas element.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
Thanks so much for joining me for CSS,
Formatting Visual Data.
| | 00:04 |
I hope you'll find the techniques really
helpful and useful.
| | 00:08 |
There's a whole world of CSS and HTML5
technologies that bring so much to the
| | 00:12 |
table for web designers.
If you want to explore more, I can
| | 00:17 |
recommend CSS Core Concepts, by James
Williamson, as well as my own courses,
| | 00:21 |
that dive into this rich territory.
All of which are in the lynda online
| | 00:27 |
training library.
Have a great day.
| | 00:30 |
| | Collapse this transcript |
|
|
