2. Creating SlidesStructuring the HTML| 00:00 |
So, let's create the HTML file that will
house the content for the presentation.
| | 00:05 |
I'm going to use Dreamweaver, but you can
use the code editor of your choice.
| | 00:08 |
So, in Dreamweaver instead of choosing
from the Create New menu in the welcome
| | 00:12 |
screen make sure to go up to File and
choose New.
| | 00:17 |
The reason for this is that the default
doc type is not HTML5.
| | 00:21 |
So make sure to choose that from the list.
And click Create.
| | 00:26 |
I'm going to change the name to
presentation, but of course for your
| | 00:29 |
presentation, you can change the title to
whatever you want.
| | 00:32 |
So let's change the name in the title tag
here to presentation, and then inside the
| | 00:37 |
body tag, we'll add the container for all
of the slides.
| | 00:42 |
So I'm going to start by opening a div tag
here and giving it a class name of slides.
| | 00:50 |
And then one advantage of using
Dreamweaver here is that when I start
| | 00:53 |
typing the closing slide it completes the
code for me.
| | 00:58 |
For each of the slides, we're going to
take advantage of a new HTML tag called
| | 01:01 |
the section tag.
The advantage of using the section tag as
| | 01:08 |
opposed to writing out div, class, equals,
slide, is that we can keep our markup in
| | 01:12 |
the HTML simple by not having to have a
class for each slide.
| | 01:19 |
And in addition to that, instead of using
the class selector in CSS, we can add CSS
| | 01:23 |
directly to the section tag.
So let's take a look at how we fill out
| | 01:28 |
the sections, in the next video.
| | 01:30 |
| | Collapse this transcript |
| Creating slide content| 00:00 |
Here I've got the Index.HTML file opened
up from the Start folder in 02 02 of
| | 00:04 |
Chapter Two.
So you can see that, this file is making
| | 00:09 |
use of the section tags.
The first tag has a class of title Slide,
| | 00:15 |
so it's going to be differentiated.
There are two headings in there.
| | 00:18 |
Heading one which will be the name of the
presentation and heading two, which is the
| | 00:23 |
name of the presenter.
So again, we could get really detailed in
| | 00:27 |
the markup here, naming these classes,
title, and presenter, that kind of thing.
| | 00:32 |
But, let's just keep it simple for the
sake of demonstration.
| | 00:35 |
There are a couple different kinds of
slides here.
| | 00:38 |
So in this section tag, there's a heading
and there's a paragraph of text.
| | 00:45 |
If I scroll down a bit, here's one with a
heading and a paragraph of text and also
| | 00:50 |
an image before that and down a bit more,
of a slide with an unordered list and
| | 00:54 |
three list items, it's a really common
thing you see in a PowerPoint
| | 00:59 |
presentation, are bullet points.
So that what these will look like in the
| | 01:06 |
final version.
And then there is a final slide and this
| | 01:10 |
slide has been given a class name of end
Slide.
| | 01:13 |
That way, we will be able to style that
slide differently from the content slides
| | 01:17 |
just as we will do with the title slide.
So the next video, let's start adding CSS
| | 01:22 |
to all of these tags.
| | 01:23 |
| | Collapse this transcript |
| Creating the default slide appearance| 00:00 |
So let's take a look at what the HTML
looks like so far with no styling.
| | 00:05 |
going to take the index file and open it
up in Chrome, and see we have all of our
| | 00:09 |
content here, but it just flows along in a
row.
| | 00:14 |
So take the same file, which is the start
file, the index file for 0203 in the
| | 00:19 |
Chapter 2 folder.
And I've got it opened up in Dreamweaver here.
| | 00:25 |
So, in the head tag, I'm going to have you
go ahead and add links to two style sheets
| | 00:29 |
neither of which exist at the moment but
they will shortly.
| | 00:33 |
There's going to be a lot of typing in
this video, so hang in there.
| | 00:37 |
Let's create a link tag for the first
style sheet.
| | 00:40 |
I'm going to set the rel attribute to
style sheet.
| | 00:45 |
And the type to text/css.
And then the location of this will be in a
| | 00:51 |
CSS folder that we're about to create.
And the first one is going to be a
| | 00:55 |
standard CSS file that's used in a lot of
sites called Normalize.
| | 01:03 |
Essentially, Normalize will restyle a lot
of the defaults for basic tags that are
| | 01:10 |
used in almost every HTML document.
And then we're going to add one more link
| | 01:18 |
tag here, and I'm going to go ahead and
just copy the beginning of this and I'm
| | 01:22 |
using my keyboard shortcuts here to paste
it in.
| | 01:26 |
It'll be in the CSS folder again and let's
give this a name of Styles.
| | 01:31 |
I'm going to create that momentarily.
And you can go ahead and save this
| | 01:35 |
document and if you don't have the access
to the exercise files, you can get the
| | 01:40 |
Normalize file by going to Google and
typing in normalize CSS, and it'll be the
| | 01:45 |
first hit.
If you have access to the exercise files,
| | 01:51 |
I suggest creating a new folder in your
start folder, calling it CSS and copying
| | 01:57 |
the Normalized file from the CSS in the
final folder.
| | 02:11 |
Let's go back to Dreamweaver, and create
the styles.css file.
| | 02:14 |
So up go up to File, and choose New, and
select css from the page type and click Create.
| | 02:24 |
Go up to File and choose Save As, then
save it as Styles.css and make sure it's
| | 02:30 |
in the same folder with your
normalized.css file.
| | 02:39 |
Let's start by styling the top level tag
in the HTML document, which is the body.
| | 02:45 |
We're going to add a font size that's
going to trickle down to all of the tags
| | 02:49 |
within the body.
And here we want to use a relative measure
| | 02:54 |
of font so that we can control it at a
global level as the size of the screen changes.
| | 03:00 |
So, let's set font size to 2.5em.
Em is a relative measure.
| | 03:08 |
1 is sort of the default of a 100%.
We're going to make this quite a bit
| | 03:13 |
bigger, because in the case of a
presentation, it's probably going to be
| | 03:16 |
given on a large screen that people are
looking at from a distance.
| | 03:20 |
It's going to have less content than most
HTML documents.
| | 03:23 |
At least on a per screen basis and on
mobile devices they're relatively small
| | 03:27 |
screens so the type there has to be
reasonably big too so that it can be read easily.
| | 03:35 |
So close the body tag and let's set that
font size property for our first heading
| | 03:40 |
as well.
And that's going to be set to a relative
| | 03:45 |
value of 2.25ems.
So that's relative to the body, it's
| | 03:49 |
actually going to be 2.25 times bigger
than the body size.
| | 03:53 |
And then one more property and this came
about because of trial and error.
| | 03:59 |
I want everything after that big headline
to actually sit a little closer to the
| | 04:03 |
headline itself than it does by default.
I'm going to set a negative value for the
| | 04:11 |
margin bottom property.
It's going to be negative 0.25em.
| | 04:17 |
And then let's set a font size property
for the second heading as well.
| | 04:22 |
And that's going to be about half the size
of the big heading.
| | 04:26 |
So let's make that 1.2em.
Now recall from the HTML file, which I'll
| | 04:33 |
switch over here, that all of the slides
are contained within a div tag with a
| | 04:38 |
class of slides.
So we're going to style that entire
| | 04:44 |
container by using the class selector,
which is a dot.
| | 04:52 |
And then we're going to set the position
to absolute.
| | 04:55 |
So, this is a little bit different than
most HTML is designed, where it kind of
| | 04:58 |
flows together.
We actually want to treat the browser
| | 05:02 |
window like a canvas and have kind of
specific values here.
| | 05:06 |
So we want the entire content of the
slides to sit in the upper left-hand
| | 05:09 |
corner, no matter what.
So we're going to give it a position,
| | 05:14 |
which is absolute, and set the width and
the height to 100%.
| | 05:24 |
That way the slide container will fill the
entire window and we're going to add a
| | 05:28 |
background to that momentarily so let's
actually make the color of the text white.
| | 05:34 |
So you can do that by setting the color
property and I'm just going to use the
| | 05:38 |
short-hand for the hex, which is 3 f's.
And then there may be, as the screen gets
| | 05:44 |
scaled up or down, content that gets
pushed off the edge.
| | 05:48 |
We don't want to accidentally trigger
scrolling or have something display in an
| | 05:53 |
odd way.
So, we're actually going to limit what's
| | 05:57 |
displayed to the size of the screen and
the way we're going to do that is to set
| | 06:00 |
the overflow property of the slide
container to hidden.
| | 06:05 |
And then let's add a simple gradient to
the container itself.
| | 06:08 |
That way, it'll sit behind all of the
slides.
| | 06:13 |
Let's set the background property to a
linear gradient, which will start at the
| | 06:18 |
bottom and then go from black.
Just 3 zeros for the short hand.
| | 06:26 |
And it'll go to kind of a middle gray.
So 3 6's there.
| | 06:30 |
And then I'm going to copy this whole line
because this is a newer property that
| | 06:34 |
hasn't been completely adopted into the
standard or it's in the standard, but it
| | 06:38 |
hasn't necessarily been adopted by the
browsers the same way.
| | 06:43 |
I'm going to use the browser prefixes.
So actually I want one more in here.
| | 06:48 |
Let's start by adding the dash o dash
prefix, for Opera browsers.
| | 06:56 |
And then the moz for Mozilla Firefox, and
WebKit, and then one more for Internet
| | 07:02 |
Explorer which is just MS for Microsoft.
So I'm going to close that, save this CSS file.
| | 07:13 |
Let's take a look at how the HTML appears
right now, refresh this.
| | 07:19 |
And you see the background has taken
effect.
| | 07:22 |
The larger point sizes in the white type
is there and the content just sort of ends
| | 07:26 |
wherever the screen does.
And that's because we have that overflow
| | 07:31 |
set to hidden.
So now what we want to do is actually
| | 07:34 |
break these slides apart so they're not
all displaying together.
| | 07:39 |
So remember each slide is a section node,
so let's add some CSS to the section tag itself.
| | 07:46 |
So we're going to do the same thing here.
We're going to have an absolute position.
| | 07:51 |
So that we pick that up from the slide
container and the width and the height are
| | 07:57 |
going to be 100% again.
So that the slide fills the screen no
| | 08:03 |
matter what.
Now we're going to add a little bit of
| | 08:06 |
padding so that the content doesn't hit
the edges of the screen.
| | 08:10 |
And it's going to be a relatively large
value.
| | 08:12 |
Let's just say 36 pixels.
And here, we run into something that is a
| | 08:16 |
little bit of a browser quirk.
So, at least in the case of Firefox, the
| | 08:21 |
default display is a little bit different
than you'd expect it to be.
| | 08:24 |
And actually, we can see this here in
Chrome.
| | 08:27 |
I've got just a jsfiddle here.
Jsfiddle is just a quick way to test code
| | 08:32 |
in kind of a live environment.
So here, if I run the code as it is right
| | 08:38 |
now, I have this box.
I have the height and width set to 100%,
| | 08:42 |
just as we're doing in our code.
I've got a border, so you can see it, and
| | 08:47 |
36 pixels of padding, just like we have.
And what you can see is that no matter how
| | 08:53 |
big this window is, this box actually gets
pushed off the edge of the screen.
| | 08:59 |
And so what I have here are these box
sizing property and a version for Mozilla
| | 09:04 |
as well.
And so if I just un-comment these lines of
| | 09:08 |
the CSS and I run this again, you can see
that the box now fits inside of the
| | 09:13 |
container here.
And the word content gets pushed in based
| | 09:18 |
on the padding.
And so what we're effectively telling the
| | 09:23 |
display with this code is that we want the
padding to come inward from the height and
| | 09:28 |
width that we've set.
We don't want the padding to push the
| | 09:33 |
height and the width bigger.
So that's an important item to add in our
| | 09:37 |
code here.
So let's go ahead and add the box sizing
| | 09:42 |
property, and we'll set that to border box
and then I'm going to copy that and paste
| | 09:49 |
it twice and add a prefix here.
One for Mozilla Firefox, that's moz.
| | 09:59 |
And one for WebKit, and then one last
thing to the section node is by default we
| | 10:05 |
don't want all of the slides displaying.
The way we're going to determine which
| | 10:12 |
slide is displayed is actually going to be
in our JavaScript.
| | 10:16 |
So, by default we want each slide to be
hidden.
| | 10:19 |
So, let's set the visibility property of
the section node to hidden and I'll close
| | 10:23 |
out that node and then we're going to add
a little bit to the section.
| | 10:29 |
So, if we happen to have a tag of section
and I'm going to add a dot and no spaces
| | 10:33 |
which means on the section tag itself, if
there's a class, and let's make that
| | 10:37 |
active so it's the active slide.
The visibility is going to be set to visible.
| | 10:48 |
And then in the next video, we'll take a
look at adding the JavaScript so that we
| | 10:52 |
set that active class based on the current
slide, which will cause the slide to show.
| | 10:57 |
So, I'm going to Save this, and let's just
take a look and make sure all of our
| | 11:01 |
styles have taken effect.
So, I'm going back into Chrome and the
| | 11:04 |
presentation, and I'm going to Refresh.
And this is a little anticlimactic,
| | 11:09 |
there's nothing showing here, but this is
exactly what we want, because all of our
| | 11:12 |
slides are hidden by default.
In the next chapter in the next video,
| | 11:16 |
we're going to take a look at adding the
code that will actually make each slide
| | 11:19 |
appear as we need it to.
| | 11:22 |
| | Collapse this transcript |
|
|
3. Displaying Pages and Creating NavigationUsing jQuery to display the current page| 00:00 |
So now, let's look at controlling the
navigation and displaying the individual slides.
| | 00:05 |
Let's start again by going to the
index.html file in the start folder, but
| | 00:11 |
this time in Chapter 30301.
So here I am in Dreamweaver, going to add
| | 00:16 |
a script tag but I'm actually going to
show you where to get it first.
| | 00:21 |
So if we go to a web browser and just type
in jQuery Google library into Google,
| | 00:25 |
Google hosts several libraries.
And the advantage is that the user will
| | 00:32 |
have that one location cached so it will
load much faster if it's a commonly used
| | 00:37 |
library, which jQuery is.
So let's go down, click on jQuery, and you
| | 00:42 |
can just copy the snippet here of the
script tag.
| | 00:46 |
So, I'm going to use the keyboard shortcut
and switch over the Dreamweaver.
| | 00:50 |
I'm just going to paste this in, and the
one thing you need to make sure is have
| | 00:54 |
the proper protocol here.
So, I'm going to add http: to the source
| | 00:59 |
tag, and that will set us up with the
jQuery library.
| | 01:03 |
And then, we're going to add one other
script tag for a script where we're
| | 01:06 |
going to house our custom code for all the
functionality.
| | 01:13 |
So that's going to live a JS folder, that
we're going to create in a moment and
| | 01:18 |
let's just call this pres.js or
presentation and then close out the script
| | 01:23 |
tag and save this file.
To create the pres.js file, let's go up to
| | 01:30 |
file and choose the new and make sure you
have JavaScript selected as the page type
| | 01:36 |
and click create.
And go to the file and choose Save As, and
| | 01:43 |
let's make sure it's going in our exercise
folder into chapter 301.
| | 01:50 |
Go into the Start folder, and I'm going to
create a new folder called js and name the
| | 01:55 |
file Pres.
So now we can start adding code.
| | 02:03 |
Actually I might just get rid of this
comment entirely.
| | 02:05 |
Let's start by initializing a variable
that's going to keep track of what slide
| | 02:09 |
we're on.
So we are just going to call that var
| | 02:12 |
current slide.
The S is going to be camel K standard and
| | 02:16 |
make sure that you pay attention to case
because this is case sensitive.
| | 02:22 |
I'm going to take advantage of a function
in jQuery that gets called when the
| | 02:25 |
document is ready so that you can actually
access parts of the document.
| | 02:31 |
If we were to call our code before the
documents ready the nodes just actually
| | 02:34 |
wouldn't exist.
And we would get an error.
| | 02:38 |
So I'm using the dollar sign, which is
very common in jQuery.
| | 02:42 |
And this is a very shorthand way to do it.
Opening up with a parenthesis and then
| | 02:47 |
just typing a custom function in here.
So, paren's there for the function, and a
| | 02:53 |
bracket to open the function.
And then, let's call a function called
| | 02:57 |
initSlides with a S.
And to call it, we'll have our two
| | 03:01 |
parentheses there.
Semicolon to end that line.
| | 03:04 |
And then let's use a bracket to close off
this function here.
| | 03:08 |
And, then a parenthesis to close off the
call.
| | 03:14 |
And just a semicolon to end the line.
Now let's write the initSlides function.
| | 03:21 |
We use the function keyword.
And, we're going to again use that dollar
| | 03:27 |
sign to call a jQuery selector here.
This time, we want all of the sections in
| | 03:33 |
the document to start with.
Which refers to all of our slides, so I'm
| | 03:37 |
just going to do section there to access
all of the section tags.
| | 03:42 |
And then within that, I'm going to take
advantage of a function of JavaScript and
| | 03:45 |
jQuery, which is that I can chain commands
together.
| | 03:49 |
And so I'm taking within all the sections,
I'm going to call this other function
| | 03:53 |
called eq which is going to give me one of
those sections at a particular index.
| | 04:00 |
And in this case, we're just going to call
the current slide, which happens to be
| | 04:03 |
zero, and is going to give us the first
slide.
| | 04:07 |
And we're going to add to that a class
using the add class function of active.
| | 04:13 |
And I'm using single quotes here, but you
can use double quotes here if you prefer,
| | 04:17 |
just so long as they match.
And I close this function.
| | 04:21 |
And let's take a look at why this matters
by going back to the CSS briefly.
| | 04:27 |
I'm going to open up the styles dot cs
file.
| | 04:33 |
And to get scroll down to the bottom and
recap of what we did a little bit earlier where.
| | 04:44 |
We add active to the section tag.
It makes that section or slide visible.
| | 04:51 |
So, what we're doing here is making the
first slide visible, when everything is loaded.
| | 04:57 |
So I'll preview that in a moment, but
first let's write a couple more functions.
| | 05:01 |
Let's write a next function that will
navigate us to the next slide.
| | 05:08 |
Inside that next function, lets call a
more generic function for navigation call
| | 05:13 |
that go to all over case.
And we are going to pass that function and
| | 05:18 |
argument in this case lets say current
slide which is just a number and say plus 1.
| | 05:25 |
So it should go to the next slide.
Let's add one more function very similar
| | 05:29 |
to that, which is going to be back, and
this one is going to say go to and as an
| | 05:34 |
argument it's going to say current slide
minus 1.
| | 05:41 |
Close that function.
Now let's write the go to function.
| | 05:46 |
And this one actually ends a parameter,
because we're passing that value in.
| | 05:50 |
Just going to say n for shorthand of
number.
| | 05:53 |
And let's do a little check here before
we're coming in, because we don't want
| | 05:57 |
this function to really take any value and
to try and apply it.
| | 06:01 |
So first, let's screen out for anything
that's less than 0, so let's make sure
| | 06:05 |
That n is greater than negative one and,
say and with two ampersands.
| | 06:11 |
Let's make sure that n is less than all of
the slides we have in our HTML.
| | 06:17 |
So, it should be less than the length of
all the section tags.
| | 06:20 |
We're going to use the dollar sign and
open that up and put section in there and
| | 06:25 |
then say length.
So, that will tell us that we'll make sure
| | 06:30 |
that n is shorter than the length of all
those.
| | 06:34 |
We're using array notation here.
That's why it is 0 and not 1.
| | 06:38 |
The first slide is actually going to be 0.
And the length is going to be, you know,
| | 06:43 |
if we have ten slides, it's 10.
But since we're starting at zero, we're
| | 06:47 |
going to end at nine.
You want to make sure that's lower than
| | 06:50 |
the length of sections.
So, if both of those things are true,
| | 06:54 |
we'll go ahead and modify that
currentSlide variable to match n.
| | 06:59 |
And if that's not true, let's just return
and exit out of the go to function, not do
| | 07:04 |
anything further.
So that happens the code after return
| | 07:08 |
doesn't get executed.
But if it does, if they do happen to meet
| | 07:12 |
those criteria, we want to again access
the section tags and we're going to chain
| | 07:17 |
these together.
So first, what we want to do with all the
| | 07:22 |
section tags Is to remove the active
class.
| | 07:25 |
And these are all jQuery functions and you
may notice that they are also getting some
| | 07:30 |
nice code completion here in Dreamweaver.
So again, here we're taking the active
| | 07:36 |
class if it exists off of all the section
tags and then we want to drill down to the
| | 07:39 |
current tag we're trying to set.
So, we're going to use that EQ function
| | 07:44 |
again and put current slide in there.
So, now we have the node for the current
| | 07:50 |
slide, and we want to actually add the
active class to that.
| | 07:56 |
So, close out that function and now we are
good to go.
| | 07:59 |
The back and next are not yet wired to
anything neither is go to.
| | 08:04 |
If we wanted to the init function could
actually say go to zero or go to current slide.
| | 08:10 |
We got some doubling there but that's
really up to you.
| | 08:12 |
Let's take a look at the html as it is
right now and make sure that this
| | 08:16 |
initialization is actually working.
So, I'm going to switch over to the finder
| | 08:21 |
and open the index file in Google Chrome
here.
| | 08:26 |
And there's the first slide.
So, everything's working there so far and
| | 08:30 |
in the next section let's go in and
actually wire that navigation to the keyboard.
| | 08:35 |
| | Collapse this transcript |
| Adding click and keyboard navigation| 00:00 |
So, now that we've got all the functions
in place to navigate from slide to slide.
| | 00:05 |
Let's wire it together with the keyboard
so that the user can actually change slides.
| | 00:10 |
So, let's start where we left off and go
into Chapter 3, 0302 in the "start"
| | 00:15 |
folder, and then in the "JS" folder Open
up that pres.js file.
| | 00:22 |
Here it is in Dream Weaver.
And add a line inside the ready function,
| | 00:26 |
and we're going to use the dollar sign, J
query function to access the entire document.
| | 00:32 |
And what we're going to listen for is the
key up.
| | 00:35 |
The reason we're listening for the key up
as opposed to the key down for instance,
| | 00:39 |
is that we want to make sure that this
gets fired only once.
| | 00:45 |
The key down event can be fired over and
over by holding the key.
| | 00:48 |
We don't want the presenter to actually
skip forward a whole bunch of slides.
| | 00:52 |
The reason we're not using the key press
function is that it doesn't support all
| | 00:55 |
the keys we need to access.
So key up call that as a function and then
| | 01:00 |
inside that we are going to pass it a
argument which is a function.
| | 01:06 |
That function will receive an argument
which we are going to call e is the event
| | 01:11 |
argunment and lets open that function with
a.
| | 01:16 |
Bracket, I'm going to ahead and close it
just because it's easier to keep track of
| | 01:19 |
if I do it to start with.
Close the function, and I'm going to close
| | 01:23 |
the call with the paren to the keyup
function.
| | 01:27 |
And just end the line with a semicolon.
So now what we want to do is listen for
| | 01:32 |
these key presses, the keyup events.
And what we want to do, we want to be as
| | 01:38 |
smart as the default format which is
basically PowerPoint.
| | 01:42 |
So, somebody who hasn't used your
presentation format, we want them to have
| | 01:46 |
access to all the tools they're familiar
with.
| | 01:50 |
So, I think the expectation is probably
going to be that not only can they use the
| | 01:54 |
right arrow key to navigate forward.
They should be able to use the down arrow key.
| | 01:59 |
And same with going back, they should be
able to use the left arrow key.
| | 02:02 |
And the up arrow key.
So, you need to be able to check and see
| | 02:05 |
if those particular keys have been
touched.
| | 02:09 |
And, we need to have some kind of logic
that, you know, filters those keys out
| | 02:12 |
from any other key that's getting pressed.
There's a couple different ways to do this.
| | 02:17 |
A switch statement might technically be,
more efficient, in certain cases.
| | 02:22 |
But it's going to get very long vertically
in the code.
| | 02:25 |
Whereas, an if l statement is going to be
a lot shorter and a bit easier to read.
| | 02:30 |
And it's not going to be a huge efficiency
hit, maybe a micro-second.
| | 02:33 |
So I'm going to switch over to the browser
now.
| | 02:36 |
And I'm on the jQuery site, it's actually
api.jquery.com, which is where the
| | 02:41 |
documentation for jquery is.
And forward slash key up.
| | 02:45 |
So here's the key up function.
Here's all the documentation.
| | 02:48 |
You can see that this works just as we've
typed it so far, it receives a handler
| | 02:52 |
with an event object.
And if you scroll down, all the way down,
| | 02:56 |
there's this demo here and it says type
something.
| | 03:01 |
So I'm going to put my cursor in the field
and say what I want is I want to be able
| | 03:04 |
to read when the right arrow key has been
pressed.
| | 03:08 |
So I'm going to press the right arrow key.
And it gives me a whole bunch of information.
| | 03:13 |
And the thing I really want here, the
thing that's consistent across the browsers.
| | 03:17 |
Is this key code value and that's 39.
So, that's going to relate to the next
| | 03:22 |
arrow key.
So, I'm going to say, if e which is my
| | 03:26 |
event object, .keyCode is equal to 39.
Well then hey, I've got a bonafide next
| | 03:34 |
slide function coming in here.
So in addition to that, I want to get the
| | 03:38 |
down arrow key, and add the double pipes
to say or.
| | 03:42 |
And I'm going to go back in my field here,
I'm going to type down arrow key and it's 40.
| | 03:48 |
I'm going to switch over here say keycode
equal to 40.
| | 03:53 |
And close that off.
So if either of those is the case, then
| | 03:57 |
let's go next.
And then let's add an else.
| | 03:59 |
And we're going to make this an else if
statement.
| | 04:01 |
'Cuz again, we only want this called in
certain conditions.
| | 04:07 |
And in this case, we're going to look for
another key code, but let's do the left
| | 04:12 |
arrow key.
That gives me a key code of 37.
| | 04:18 |
And while we're at it, let's just see what
the up arrow key would be.
| | 04:21 |
That's 38.
Alright, so let's do both of those.
| | 04:25 |
So it's equal to 37 or e keycode is equal
to 38.
| | 04:34 |
In that case, let's call back.
So, go ahead and save your document.
| | 04:40 |
I'm going to search over to the finder
here, and let's just check and make sure
| | 04:42 |
the navigation is working.
going to open index.html in my browser,
| | 04:47 |
and I'm just going to use the right arrow
key.
| | 04:51 |
And there's the next screen use the down
arrow key, there's the next screen.
| | 04:55 |
And that'll just keep going til I hit the
end.
| | 04:58 |
Okay make sure it stops.
That's what we want.
| | 05:00 |
I'm going to use the left arrow key to go
back.
| | 05:03 |
That works.
I'm going to use the up arrow key and I
| | 05:05 |
can go all the way back and it stops at
the beginning.
| | 05:09 |
That's exactly what we want.
And now I have a navigation wired to the keyboard.
| | 05:13 |
| | Collapse this transcript |
| Adding swipe gestures for mobile| 00:00 | The cool things about creating your own
responsive presentation is that not only
| | 00:04 | can you take advantage of things that
the user already expects, like using the
| | 00:09 | arrow keys that they'd find in a
PowerPoint presentation, but scaling down to
| | 00:13 | devices, you can take advantage of
other expectations like swipe gestures.
| | 00:18 | So, let's go ahead and add a swipe
library and wire up the swipe gestures to the
| | 00:23 | navigation we already have.
| | 00:25 | Let's start by going into the chapter
3 folder, 03_03, start folder, js, and
| | 00:32 | open the pres.js file.
| | 00:34 | We're going to be adding more code
inside a ready function to handle the
| | 00:38 | swipe, but first let's download the
library and make sure that library is
| | 00:43 | incorporated in our project.
| | 00:45 | There's a couple
different libraries you can use.
| | 00:47 | The one w're going to use
in this case is TouchSwipe.
| | 00:50 | If you don't have access to the
exercise files, just do a search for jQuery and
| | 00:55 | then TouchSwipe, all one word.
| | 00:57 | And we want this minimize, this minified file.
| | 01:01 | If you do have access to the exercise files,
you can grab a copy from this JS folder.
| | 01:06 | I'm just going to select that, copy it
and paste it into the JS folder that we
| | 01:13 | are actively working on.
| | 01:15 | So we're going to then
reference this minified file.
| | 01:18 | I'm just going to go back to the Finder here
and open the index.html file in Dreamweaver.
| | 01:24 | We want to add another script tag.
| | 01:27 | We want to make sure that it is
available before our pres.'s file, so let's add
| | 01:32 | it after jQuery, because
it also relies on jQuery.
| | 01:35 | Add the script tag.
| | 01:37 | I'm going to set the source.
| | 01:39 | And let's go ahead and just browse for
the source and select that jQuery library.
| | 01:46 | Click Open. There it is.
| | 01:48 | Let's close the tag and
save the index.html file.
| | 01:53 | I'm going to switch over to pres.
js and let's start adding this code.
| | 01:58 | Now, this code is kind of a long chunk
and it's a little bit complicated, so if
| | 02:02 | you're worried about making mistakes or
you'd rather just copy and paste it, you
| | 02:06 | can grab it from the snippets
file in this video's exercise folder.
| | 02:10 | So let's call the jQuery function again.
| | 02:13 | This time we're going to look for that
slides containers so we want to detect
| | 02:18 | any swipes that happen on the
container that holds all the slides.
| | 02:23 | And the syntax for this is that you
then call this swipe function and then we
| | 02:28 | pass in the parameters that we're going to use.
| | 02:31 | So this TouchSwipe library is rather advanced.
| | 02:33 | There's a lot of features in it that
you may want to play with on your own, but
| | 02:38 | for right now we're just going to
do a real simple implementation.
| | 02:41 | I'm going to open up this object with
the curly bracket and for this swipe
| | 02:45 | property, it's going to be a function.
| | 02:48 | And we're going to type out all the
parameters from the documentation, but we're
| | 02:53 | only going to use one of them, for right now.
| | 02:55 | You can of course take
advantage of more of them on our own.
| | 02:59 | The first one is an event and then
direction, distance--these are separated by
| | 03:03 | commas--and duration, and fingerCount.
| | 03:09 | And then we're going to close that
parenthesis and open curly bracket.
| | 03:13 | And I'm just going to hit another line
to return, close the curly bracket, and
| | 03:17 | I'm going to close the other curly
bracket and also close this parentheses here,
| | 03:23 | and end line with a semicolon.
| | 03:25 | So here we want to detect for what
direction the user has swiped, so we're going
| | 03:31 | to add a switch statement.
| | 03:33 | And again you can use if-
else if you prefer with this.
| | 03:36 | It's really up to you.
| | 03:40 | So we want to switch on that direction.
| | 03:43 | We're going to add two cases.
| | 03:45 | You can look for up-down if you'd like.
| | 03:48 | In this case let's just look for left and right.
| | 03:50 | So I've got case left and
then a colon. I'm gonna tab in.
| | 03:54 | So if that's the case, let's go
ahead and call that next line.
| | 03:59 | And then we're going to break after
that so no other code gets executed, and
| | 04:04 | we're going to go back a
tab and write a second case.
| | 04:07 | This one's going to be
to the right, and a colon.
| | 04:11 | Then I'm going to tab in and say back
if the user happens to swipe the right,
| | 04:18 | and we're going to break
again and we should be all.
| | 04:21 | It looks good like I've got a closing
bracket there that Dreamweaver added for
| | 04:25 | me, so that should be all in place.
| | 04:27 | So this might seem a bit
counterintuitive that our swipe gestures effectively
| | 04:32 | work in the opposite
direction of our key events.
| | 04:36 | And the reason that is is because
when I say, if I click to the right of
| | 04:41 | fingerCount here and I drag to the left,
the motion--you'd think of it as maybe
| | 04:48 | effectively throwing the current screen away.
| | 04:51 | So in a left-to-right culture of
reading English, fingerCount comes after
| | 04:58 | direction for instance.
| | 04:59 | So as I'm pushing things forward,
suppose this selection is my viewfinder,
| | 05:06 | fingerCount comes into view, and
that's a later item than, say, direction.
| | 05:11 | So as I swipe to the left, I'm moving forward.
| | 05:14 | If I swipe to the right, I'm
kind of going back in space.
| | 05:17 | So it's a little bit
counterintuitive, but something to think about.
| | 05:20 | And of course if you add up or down,
you're going to find the same thing there.
| | 05:25 | Switch back to the Finder and open up the
corresponding index.html file in my browser.
| | 05:30 | And now in addition to the arrow keys
working, if I click and drag, I should be
| | 05:36 | able to swipe to the next screen. There we go.
| | 05:40 | And it works if I go backwards too. All right.
| | 05:43 | We're going a long way towards having a
responsive presentation, in that we are
| | 05:48 | dealing with the medium of the touchscreen.
| | 05:51 | In the next chapter we're to modify
the CSS to also take advantage of the
| | 05:55 | different options on different screens.
| | Collapse this transcript |
| Challenge: Customized keyboard navigation| 00:00 |
Your challenge, if you choose to accept
it, is to incorporate the space bar into
| | 00:03 |
the navigation.
So typically on a PowerPoint or Keynote
| | 00:07 |
presentation, the space bar acts as a next
navigation tool because it's big and it's
| | 00:11 |
easy to reach for when you're caught up in
the thoughts of your presentation and you
| | 00:14 |
don't want to be really precise and hit
the right arrow.
| | 00:20 |
It's really useful, something a user would
expect.
| | 00:22 |
So, use the steps that we've done in this
chapter and give this simple one a try.
| | 00:26 |
Hopefully, it should take you less than
five minutes.
| | 00:29 |
And we'll be back in a moment with the
solution.
| | 00:31 |
| | Collapse this transcript |
| Solution: Customized keyboard navigation| 00:00 |
Alright time's up, pencil's down and
here's the solution at least the one I
| | 00:03 |
came up with.
So, we've got our existing keyboard
| | 00:07 |
navigation, you can't see this but trust
me, I'm hitting the right arrow key and
| | 00:11 |
the down arrow key, the up arrow key and
the left arrow key, all the way back to
| | 00:15 |
the beginning.
Got the swipe in place there and now, if I
| | 00:21 |
hit the space bar, it will also take me
forward.
| | 00:25 |
So let's switch over to DreamWeaver and
see the code.
| | 00:29 |
Here's the code, just have another or
block here essentially inside our if
| | 00:34 |
statement and we're checking for the key
code 32.
| | 00:39 |
And how did I get that key code?
It's the same way we did the other ones.
| | 00:44 |
From the J query API, under the keyup
definition, just go into this type
| | 00:48 |
something field, hit the space bar and I
get 32 as the key code.
| | 00:54 |
So hopefully, you got that too, hopefully
this was pretty simple for you.
| | 00:57 |
Take a look at the next challenge, it's
going to be a little bit more complicated.
| | 01:01 |
| | Collapse this transcript |
| Challenge: Create a pause screen| 00:00 |
So your next challenge is to mimic a more
advanced and lesser known feature of
| | 00:03 |
PowerPoint and Keynote.
In this case the feature basically pauses
| | 00:08 |
the presentation and hides the current
slide.
| | 00:11 |
There're two different ways this works in
both established presentation packages.
| | 00:16 |
One is to hit the W key and it'll take the
screen to white.
| | 00:19 |
The other way is to hit the B key and
it'll take the screen to black.
| | 00:24 |
And this'll put the focus back on the
presenter.
| | 00:26 |
So, for this, let's keep it simple.
Although it is going to be a little bit
| | 00:30 |
trickier than the last challenge.
And let's just go with white.
| | 00:33 |
I found a way to do that with a single
line of jQuery.
| | 00:36 |
So see if you can find that, too.
And we'll talk about how to fade to black
| | 00:39 |
in the solution.
If you want to give it a try on your own,
| | 00:42 |
be my guest.
This may take you a little longer to
| | 00:46 |
research so we got ten minutes, but I
think you can do it.
| | 00:49 |
| | Collapse this transcript |
| Solution: Create a pause screen| 00:00 |
Here's the solution I came up with.
It is in the browser right now.
| | 00:04 |
And I'm just going to hit the W key on my
keyboard and then it fades to white.
| | 00:09 |
Hit the W key again.
It comes right back.
| | 00:11 |
And this works on any slide.
Hit the W key.
| | 00:14 |
And fades back in when I hit it again so
the way I started to think about this was
| | 00:18 |
first of all what is it I'm wanting to
change or hide.
| | 00:23 |
You know, it's easiest to just hide
something and display what's behind it and
| | 00:26 |
so in this case, if I hid an individual
slide, I'm going to see the background for
| | 00:30 |
the slides container, which is this
gradient, and I want to go to white.
| | 00:36 |
Well, what's white?
Well, the body by default of the HTML
| | 00:38 |
document is white, and that's sitting
behind that.
| | 00:41 |
So why don't I just go ahead and hide the
whole slide container, that's simpler.
| | 00:45 |
So I was kind of working with that thought
to begin with.
| | 00:49 |
And one of the first things I needed to do
was get the key code for the W key.
| | 00:54 |
So I came back down here to the type
something field in the handy dandy key up
| | 00:58 |
documentation of jQuery.
Hit the W key.
| | 01:02 |
Found the key code was 87 so that's good.
We'll use that in a moment.
| | 01:07 |
And then I started to think, you know, how
do I go about turning, not only hiding it
| | 01:12 |
but then showing again, and I remember
jQuery is able to toggle things.
| | 01:18 |
So I just went looking for this function
of toggle visibility.
| | 01:22 |
I thought maybe there's a toggle
visibility because there's, you know,
| | 01:24 |
multiple things you want to toggle.
So I didn't find anything.
| | 01:27 |
The next step, I put a space in there.
I thought, you know, maybe that'll be more inclusive.
| | 01:33 |
And lo and behold I found the toggle
function.
| | 01:36 |
Display or hide the matched elements.
So that sounds like exactly what I want.
| | 01:40 |
And there's a bunch different ways to
implement the toggle function.
| | 01:45 |
I can apply a duration and get a complete
function as a call back.
| | 01:50 |
I could pass an object with several
options in it.
| | 01:54 |
And I just kept scrolling as I was looking
at this and oh, I could say show or hide.
| | 01:58 |
Well, that's useful, that's what I'm
looking for and I read this and said, you
| | 02:01 |
know, just calling it with no parameters
toggles the visibility of the elements.
| | 02:06 |
Oh, so that's perfect, that's what I'm
looking for.
| | 02:08 |
I'll switch over to Dreamweaver and show
you how I did that.
| | 02:11 |
So, here's the completed code.
I'm going to roll it back and show you
| | 02:14 |
what it looked like at the point we're at.
So I just plopped on another else if
| | 02:17 |
statement and put my key code in as 87.
And so I grab this whole slides container
| | 02:24 |
object and what I said was toggle.
I'm just going to save that and switch back.
| | 02:33 |
And so you can see what this looks like
when I hit the W key, it just goes to white.
| | 02:36 |
Hit it again, and it comes back.
So then I did some more searching in the
| | 02:41 |
documentation and I thought, you know,
that's kind of abrupt, maybe just a nice
| | 02:44 |
little fade would work.
And jQuery happens to have a function that
| | 02:48 |
does this.
I could also just pass a duration in
| | 02:50 |
there, but I'll save that and then I'll
refresh it and I'm going to hit the W key
| | 02:54 |
and there it is, a nice fade.
So that was just one line of code.
| | 02:59 |
If we wanted to fade to black, maybe we'd
have either another object or we would set
| | 03:03 |
the background color of the body to black
or something like that.
| | 03:08 |
That would be the only difference.
Really, it's pretty simple and we could do
| | 03:11 |
that with just another line here and go
back to our key up and we just look for
| | 03:14 |
what the V key code would be.
So you can see there's a lot of
| | 03:19 |
flexibility there.
You can do a lot with that and it doesn't
| | 03:22 |
necessarily take a lot of code.
| | 03:24 |
| | Collapse this transcript |
|
|
4. Creating a Responsive LayoutDeciding how elements will respond| 00:00 |
Now that we've got our functionality in
place, let's take an inventory and see
| | 00:04 |
what kind of other display items we need
to change and how the presentation might
| | 00:07 |
change as the screen size gets smaller.
So here's the Title slide.
| | 00:13 |
It doesn't really function much like a
title slide right now.
| | 00:17 |
So let's think about what we can do to
this.
| | 00:19 |
One thing that I think of when I think of
title slide, as a text generally sitting
| | 00:22 |
more in the middle area.
Another thing would be, nice and is often
| | 00:26 |
used is to have a graphic here, so, we're
going to pull the graphic from the
| | 00:30 |
conference site here, the Cityscape
background we're going to take advantage
| | 00:35 |
of that.
And we're going to have that image be
| | 00:39 |
somewhat responsive so, I'm just going to
go to the next screen.
| | 00:43 |
Let's take a look at how this scales.
This is probably OK but, notice that
| | 00:46 |
because we have that overflow sent to
hidden, that we can't see the rest of this content.
| | 00:52 |
Also, at a certain point we do want this
text to get smaller and so I'll go to the
| | 00:56 |
next screen, there's some issues with this
image obviously, and we do have some text
| | 01:01 |
below there that we need to see.
This might be more, how I would like it to
| | 01:07 |
display as it gets smaller, the image
taking up a lot of the space, but for
| | 01:10 |
presentation on a big screen, you actually
might want to just have the image set on
| | 01:14 |
the right, have the text set next to it.
And the bullets are going to be pretty
| | 01:21 |
safe, but they need to scale down just
like everything else.
| | 01:24 |
And then this last screen, I want to do
something special on it, like the title slide.
| | 01:28 |
In this case I'm going to do something
identical to title slide, but in other
| | 01:31 |
presentations, it might be different.
So, in the next video, we're actually
| | 01:35 |
going to dive right into the CSS, and
we're going to make these things happen.
| | 01:38 |
| | Collapse this transcript |
| Translating ideas into CSS| 00:00 |
So as the first step to adding some of
this additional display, let's make sure
| | 00:04 |
we have that image available to use of the
cityscape.
| | 00:07 |
So, in your exercise files in Chapter 4 >
04_02, go to the Images directory and copy
| | 00:13 |
the background buildings PNG, and then go
into the Start folder and images and paste
| | 00:19 |
that in.
So we have a copy of that.
| | 00:24 |
And then go to your CSS directory, and
open up styles.css.
| | 00:32 |
Here I have it in Dreamweaver, and we're
going to start modifying the display here.
| | 00:36 |
Now, remember I wanted to add that image
and add some differentiating to the
| | 00:40 |
opening and closing slides.
So in our HTML, we open that up and I will
| | 00:46 |
do that so that we can use that as a
reference.
| | 00:52 |
We have the first slide is called title
slide is the class and the last slide is
| | 00:55 |
called end slide of a class.
So, let's create a new CSS rule where a
| | 01:01 |
section that has a class of title slide.
And say or, do that with a comma.
| | 01:09 |
A section that has a class of andSlide,
and I did this with some, trial and error.
| | 01:18 |
So, let's go head and do that ourselves.
The question is, how do we bump that text
| | 01:23 |
to the middle, and maybe we add some
padding?
| | 01:26 |
So the first thing I tried was to say
padding top and I just made it 50% because
| | 01:30 |
I was thinking that'll bump it down.
And probably its not so tall that it'll
| | 01:35 |
get bumped too far.
So, I'm going to close that so let's
| | 01:38 |
switch over to the browser and see what
this looks like right now.
| | 01:41 |
So I'm going to go into my finder and I'm
going to open the index.html file in my
| | 01:46 |
web browser.
And right now it looks like it might have
| | 01:50 |
been shoved off the screen, let me double
check.
| | 01:53 |
Yeah, its way off the screen.
So, I am going to take a advantage of one
| | 01:56 |
of the great features of a modern browser
and I am going to inspect the code life
| | 02:01 |
and allow me to modify the code life.
So I am going to right click and just say
| | 02:07 |
inspect the element.
And now let get me roughly in the right
| | 02:11 |
place so here is and you see its sort of
highlighting the screen as a hovering over it.
| | 02:17 |
Its highlighting the portions I am on so,
I am on the title slide right now.
| | 02:21 |
You can see it has a class of active and
what I want to do is take a look at, what
| | 02:26 |
if I shut off this padding top feature
here.
| | 02:32 |
I'm just going to uncheck that and there
it's back where it was.
| | 02:34 |
So clearly this padding top feature, this
piece of code is screwing things up.
| | 02:39 |
So, I 'm going to hold the Shift key.
I clicked on this 50% and hit the down
| | 02:45 |
arrow, so it will jump down by 10% and so
there it is at 20%.
| | 02:51 |
And I think that looks pretty good, maybe
I want it at 25.
| | 02:54 |
And so that's what it looks like at 25,
it's kind of sitting near the bottom,
| | 02:58 |
course it depends on the size of the
screen, but I'll say I like that there.
| | 03:04 |
So, I'm going to go into my code and
change this to 25%.
| | 03:09 |
So that's really helpful and that I don't
have to keep circling back and forth,
| | 03:12 |
testing one value.
And it was really easy to see that this
| | 03:16 |
property was in fact causing the text not
to display.
| | 03:19 |
So I like that padding there, and I'm
going to add the background image.
| | 03:24 |
By typing in the background property here,
I'm going to give it a URL, and I'll just
| | 03:31 |
go ahead and look up that URL.
It's, in, Chapter 4, it's under 04_02.
| | 03:41 |
And, we're in the start folder right now
in images.
| | 03:44 |
And I'm just going to grab that background
buildings.
| | 03:48 |
And there it is.
So, note with this image that there is a
| | 03:51 |
dot dot here which actually means it's
going up a level.
| | 03:54 |
And it's doing that because the CSS is in
a sub folder.
| | 03:58 |
So we've got that URL there.
The other thing that we want to control is
| | 04:02 |
where this image sits.
So if we take a look at this image, you
| | 04:07 |
can see the buildings sit at the bottom.
And so if this image were to be anchored
| | 04:14 |
at the top, there's a chance that in some
cases we wouldn't even see the buildings.
| | 04:19 |
So, I want to anchor that bottom part.
So, let's go in here, and just continuing
| | 04:24 |
in the background we're going to lump all
these properties together.
| | 04:29 |
We will say left, bottom.
That's giving it a background position.
| | 04:33 |
And then, I don't want it to repeat
vertically, but I do want it to repeat
| | 04:37 |
horizontally so that it creates a seamless
cityscape even though notable buildings
| | 04:41 |
are being repeated.
It still makes a nice effect.
| | 04:46 |
Go and say repeat x to just repeat
horizontally.
| | 04:49 |
So, let's go and take a look at that.
And so that's pretty nice.
| | 04:54 |
One thing you can't see here because of
the size of this screen is that this image
| | 04:58 |
is only so big.
And on another screen, that I was
| | 05:02 |
developing this on I could actually see
the edge of the image up here and there
| | 05:06 |
was a different color.
I could see that gradient from the slides container.
| | 05:11 |
So, we don't want that.
And so what I did save you the trouble
| | 05:15 |
was, I just opened the image in Photoshop.
I used the eyedropper.
| | 05:19 |
And I got the color at the very top, and
so, then I make that color the background
| | 05:23 |
so that's #67BEEA.
And so actually, you can see it pretty
| | 05:27 |
well in there, except now the eyedropper
is picking up the color.
| | 05:32 |
But it's a light blue and it matches the
top of that gradient, so that just insures
| | 05:36 |
that if the screens really big.
Our design is still seamless.
| | 05:41 |
So, the other thing we want to add here is
control of the paragraph and the image.
| | 05:47 |
So, in that case where we have a slide
that has content and an image, want them
| | 05:51 |
to sit side by side.
So I'm going to say, you know, within a
| | 05:56 |
section tag and have a paragraph.
What I want to do is float that paragraph
| | 06:02 |
to the left and I'm going to make it 50%
the width of the screen.
| | 06:09 |
And then for the image which also sits on
a section, I want to float that to the
| | 06:15 |
right and I'm going to leave a little bit
of a margin.
| | 06:21 |
So, I'm actually going to make the width
of the image 40%.
| | 06:25 |
And I'm being a little bit more generous
with the text because there are some
| | 06:28 |
slides that are only text.
Again, this is a really simple implementation.
| | 06:32 |
We could get in a lot more detail for very
specific kinds of screens.
| | 06:36 |
But this is going to get us a long ways.
The other thing that I want to do with
| | 06:39 |
this image well I'll show you in a second
after we look at it, you've probably seen
| | 06:42 |
the problem already.
So, let's switch over to the browser I'm
| | 06:46 |
just going to hit refresh.
And I'm going to go next so the text is
| | 06:50 |
half of the screen here which actually
turns out to be pretty nice for the
| | 06:53 |
screens that are only text because long
lines of text are really hard to read.
| | 06:59 |
So, here it is with the image.
And, this looks pretty good here.
| | 07:02 |
Again, I really want this image to line up
vertically with that block of text.
| | 07:07 |
I don't want it sitting there under the
descender of the g, so let's right click
| | 07:12 |
and say inspect element.
This'll speed up our trial and error process.
| | 07:17 |
So, here's my section image.
And I'm going to click in there and look
| | 07:21 |
at that, it's just given me a new line so
I can start adding properties to that.
| | 07:25 |
So really what I want is a margin on the
top and that will kind of shove it down a
| | 07:29 |
little bit.
So, I want this to be relative so it
| | 07:33 |
scales with the size of the text.
Let's just start and say 1m.
| | 07:39 |
Well, that's pretty close but I maybe I
want just a little more.
| | 07:44 |
Here's 0.1, a little bit more let's just
jump up and say one and a quarter.
| | 07:47 |
And that's pretty much where I want it.
So, I can actually just select this bit
| | 07:51 |
and copy it with my keyboard and switch
over, and then in here I'm going to paste it.
| | 07:57 |
And so I'll save that, and what I like to
do is I'll close the inspector, and I like
| | 08:00 |
to refresh and go back to the screen and
just make sure it's working the way I want
| | 08:04 |
it to.
And let's just see how it's scaling.
| | 08:08 |
So, it's doing something kind of
interesting there with the scaling, so.
| | 08:12 |
It's close to what I want but there is
still more to go.
| | 08:15 |
So we got some scaling, but really what I
want to happen is when the scale's down,
| | 08:19 |
it actually changes to be more suitable
for a mobile device.
| | 08:23 |
So, we'll take a look at that in the next
video.
| | 08:25 |
| | Collapse this transcript |
| Using media queries to adjust the layout| 00:00 |
Let's add some media queries to our CSS,
to make sure that the display of the
| | 00:04 |
presentation works well as the browser
gets smaller, and reviewing this on
| | 00:07 |
smaller devices.
So in the chapter 4, 04 03, start folder,
| | 00:13 |
I'm going to open the index.html file in
the web browser.
| | 00:19 |
This is largely a process of trial and
error so, really what I'm doing here is,
| | 00:22 |
looking at the browser, scaling it up and
down, seeing where parts of the design
| | 00:25 |
break down.
So, the text looks reasonably good at a
| | 00:31 |
large size but, as I start to scale down
it gets a little bit big for the window.
| | 00:37 |
Use the arrow key to navigate to the next
screen and you can see it even more in
| | 00:40 |
this case because there's more text here.
So what I want to do, is to get the value
| | 00:46 |
of the width of the window, as I'm
visually looking at it.
| | 00:51 |
So I'm going to right click and choose,
Inspect Element again and this time, I
| | 00:55 |
want to Undock this panel, so I'm going to
click this button down at the bottom left,
| | 01:00 |
that way it won't affect the width of this
window and I'm going to go to Sources in
| | 01:04 |
the Developer tools and what I want to do
is, add a watch expression.
| | 01:12 |
So this is a place where I can actually
add live JavaScript code and it'll show me
| | 01:15 |
the results on screen.
I'm going to click the plus button, I'm
| | 01:19 |
going to start typing some J query code
here.
| | 01:22 |
So, do dollar sign open parens and a
window in closed parens and what I want to
| | 01:27 |
get from the window, is the inner width.
So it's telling me the width right here is
| | 01:36 |
924 and this is right about, where I would
like the text to get a bit smaller.
| | 01:43 |
As I adjust this window, I can come back
over, to my watch expression and click the
| | 01:47 |
refresh button and it'll give me that
value.
| | 01:51 |
So that's roughly 1000 pixels.
Let's go in and add a media query to
| | 01:54 |
change the size of the text when it
reaches 1000 pixels or smaller.
| | 01:59 |
So I'm going to switch back to the Finder
window, and open my Styles.css file.
| | 02:06 |
And scroll down to the bottom and begin my
media query by typing @media and I want to
| | 02:14 |
reference all types of screens and have a
max width of 1000 pixels.
| | 02:23 |
I'm going to open bracket and add a
closing bracket and then inside here, I
| | 02:27 |
can type normal CSS just like I have, in
the upper part of the document.
| | 02:33 |
Since we've used relative scaling for the
text, I actually only need to apply one
| | 02:37 |
value to change all of the text in the
presentation.
| | 02:41 |
So I'm going to change the size of the
font in the body to 1.5 m's, and save this
| | 02:48 |
CSS and switch back over to the browser
and click refresh.
| | 02:58 |
Now you can see the text is much smaller.
If I were to scale up, it would actually
| | 03:02 |
change back to the larger size.
Let's go to the next screen.
| | 03:08 |
What I'd like to see here, is a change
when we get down to a mini tablet size,
| | 03:11 |
maybe a portrait tablet size, I pad Mini,
but definitely a phone for sure, I'd like
| | 03:16 |
this image to take over the full length of
the screen, have the text sit underneath
| | 03:20 |
it and have the entire thing be
scrollable.
| | 03:27 |
At this level, the image is just too
small, so let's see what the inner width
| | 03:30 |
is, by clicking the refresh button here.
About 730, that's about right, maybe a
| | 03:36 |
little bit sooner, click refresh, 783.
This matches a device size pretty well, so
| | 03:43 |
I'm going to go back to styles.css and add
a new media query by typing @media all
| | 03:48 |
and, this time I'm going to target a max
width of 799 pixels, close that Media
| | 03:54 |
query, and here, we're going to target the
paragraph within the section and we also
| | 03:59 |
want to target the image within the
section.
| | 04:08 |
In both cases, I'd like to adjust the
width, from where it is, to 100%.
| | 04:14 |
And since both of these items are floated,
they'll just flow in line, after each other.
| | 04:20 |
So I'm going to save that, and switch back
over to the browser, and refresh.
| | 04:26 |
I'm going to navigate forward, the screen
with the image and it looks like, I have
| | 04:32 |
an issue in my code, I forgot to type the
image.
| | 04:38 |
Let me add that, save and refresh, and we
go the next screen and there it is,
| | 04:43 |
working the way I want it to.
So I scale down and it's filling the
| | 04:50 |
browser nicely but, there's a little bit
too much padding as it gets here, when I
| | 04:53 |
get the, screen nice and small, I don't
actually want this much padding.
| | 04:59 |
So let's fix that right now and actually,
I can do this by a process of trial and
| | 05:03 |
error as well.
If I wanted to, I can right-click, choose
| | 05:07 |
inspect element, and, I can add code right
here to my image and I can of course, test
| | 05:11 |
my code here.
I've already done that trial and error
| | 05:15 |
work so lets go ahead and add the code for
that.
| | 05:19 |
In this case, we're going to modify the
section and I want to give it a different
| | 05:22 |
value for the horizontal and the vertical
padding.
| | 05:26 |
Lets say 0 for the vertical padding and 16
pixels for the horizontal.
| | 05:33 |
I'm going to close that with the closing
bracket, save it, switch over the browser
| | 05:37 |
and refresh.
Then navigate forward to the screen with
| | 05:42 |
the image, you can see the padding is much
more friendly to a small device now.
| | 05:47 |
There's one more thing that I have to add
with this particular screen.
| | 05:50 |
I'm noticing that, because we have the
overflow set to hidden, I can't see the
| | 05:53 |
rest of this text, so let's make that
scrollable.
| | 05:57 |
And we don't only want to make it
scrollable inside a media query, because
| | 06:00 |
we want it to actually be seen, whenever
it extends beyond the page.
| | 06:05 |
Now going to switch back over to
Dreamweaver, I'm going to add this to only
| | 06:08 |
the active section, because that's the
only one that really needs scrolling.
| | 06:14 |
So let's go up to section.active and we're
going to change the overflow property and
| | 06:19 |
we really, only need to change the
overflow of the vertical, so that's the Y.
| | 06:25 |
Overflow-Y and we'll set it auto, that
will allow the browser to determine
| | 06:30 |
whether or not the scroll bar displays.
Let's add one other thing to enable
| | 06:36 |
momentum scrolling on IOS devices, so that
it works as the iPhone and the iPad user
| | 06:41 |
would expect.
I'm going to say
| | 06:44 |
-webkit-overflow-scrolling and we'll set
that to value of touch save that, switch
| | 06:50 |
back over the browser and click refresh.
I'm going to skip to the screen with the
| | 06:56 |
image and there's our scroll bar.
Now if I scale up the browser, this scroll
| | 07:02 |
bar should go away and that's exactly what
we're looking for.
| | 07:11 |
Now there's one more issue, I'm going to
skip ahead here, to the screen with the
| | 07:15 |
bullet points.
As I scale this down, I see that the
| | 07:18 |
margin, or the padding, on the left side
of these bullet points, is taking up
| | 07:22 |
unnecessary space, on a really small
screen.
| | 07:27 |
So let's go in and change that, inside of
our media query.
| | 07:30 |
Switch back over to Dreamweaver, scroll
back down to our media query and I want to
| | 07:34 |
add, just a little padding adjustment to
the unordered list and I only want to
| | 07:39 |
change the padding left.
And again, I found this by process of
| | 07:45 |
trial and error tested multiple browsers,
tried to find something that worked best
| | 07:50 |
across the browsers.
So I'm going to save that, it's at 14
| | 07:55 |
pixels and go ahead and refresh, and I'm
going to navigate to the page with the bullets.
| | 08:03 |
And there it's lined up a little bit
better, it's taking up less space on a
| | 08:07 |
small screen size and as I scale it up, we
go back to our typical padding.
| | 08:13 |
So, here we've taken advantage of media
queries, to really simply, display for as
| | 08:17 |
many devices as we can think of, we have a
very flexible layout.
| | 08:22 |
So that's the power of media queries.
| | 08:24 |
| | Collapse this transcript |
| Full screen| 00:00 |
Let's take a look at another common
presentation feature which is going to
| | 00:03 |
full screen.
It'd be really nice if our presenter can
| | 00:06 |
have the presentation take over the whole
screen and not have to see bits of the
| | 00:10 |
browser window.
So I'm going to switch over the browser
| | 00:13 |
here and just show you where I'm getting
the code for this.
| | 00:17 |
This is John Dyer's site and you can
download it form here.
| | 00:20 |
Also got the snippet saved in the snippet
text file here.
| | 00:25 |
So if I switch over to the exercise files
in Chapter 4 > 04_04 there is a snippet
| | 00:30 |
text file then I open this up to rather
large bit of code.
| | 00:36 |
So we're going to start at the top where
the note says Javascript and I'd select
| | 00:40 |
starting underneath that.
And just copy this whole block here all
| | 00:45 |
the way down until before it says CSS.
I'm going to copy that, go under my Start
| | 00:52 |
folder, come to js, and open the pres.js
file.
| | 00:58 |
I'm going to paste this code in at the
bottom, it doesn't need to go into the
| | 01:02 |
ready function, in fact it shouldn't, so
just save it at the bottom and then we
| | 01:06 |
need to actually trigger this
functionality.
| | 01:12 |
So I'm going to scroll back up.
And we want this in our ready function.
| | 01:17 |
And let's put it below the swipe
functionality.
| | 01:21 |
So I want this, double-click actually to
be read on the document level.
| | 01:25 |
I'll type dollar sign, open paren,
document, close paren, and dblclick for
| | 01:32 |
double-click and then function.
Open, close paren, open bracket and then
| | 01:40 |
I'm going to access this full screen API
by typing window.fullScreenAPI, and then I
| | 01:48 |
want to type requestFullScreen.
And inside that, I'm going to tell it to
| | 01:57 |
take the whole body of the document and
make that full screen.
| | 02:01 |
I can select individual elements, like
videos, and this case I'm making the
| | 02:07 |
entire body full screen.
And lets close the bracket, close paren,
| | 02:12 |
and semi-colon to end the line.
I'm going to save that, switch back over
| | 02:17 |
to the Finder, and open the index.html
file in the web browser.
| | 02:24 |
Now let's double-click and see if it goes
to full screen.
| | 02:28 |
And the reason I didn't add any code to
get out of full screen mode is because
| | 02:32 |
Escape is commonly used, and that
basically takes care of the functionality
| | 02:36 |
for us.
But of course you can add some extra code,
| | 02:40 |
if you want double-click to toggle you in
and out of full screen mode.
| | 02:44 |
Now, if I were previewing this in Firefox,
everything would look perfect right now,
| | 02:48 |
but since I happen to be in Chrome,
there's a little bit of a style issue
| | 02:51 |
where the start of the document is
actually right in the middle of the screen here.
| | 02:57 |
This isn't what we want, so let's Escape
out of full screen, switch back to the snippets.
| | 03:04 |
Text here and grab this block of CSS.
Kind of a large block to type.
| | 03:10 |
We're just going to copy the whole thing
and go back to the finder and in this CSS
| | 03:14 |
folder, we're going to open the styles.css
file.
| | 03:19 |
Scroll to the bottom, and paste in this
block of CSS.
| | 03:25 |
And essentially this is setting all of the
defaults for webkit browsers, which Chrome
| | 03:29 |
happens to be or used to be very recently.
And makes these defaults like Firefox.
| | 03:36 |
So we're setting the width and the height.
Making sure the background color is black,
| | 03:41 |
setting the position, and making sure
everything is zeroed out, zero margin,
| | 03:46 |
setting the box-sizing and containing
everything in there.
| | 03:52 |
So, let's save that CSS, switch back over
to the browser.
| | 03:56 |
Refresh, maybe even twice, just to make
sure that code takes effect, and then I'm
| | 04:00 |
going to double-click, and there we are in
full screen.
| | 04:03 |
Let's make sure all of our navigation
works.
| | 04:05 |
Click the right arrow key, up arrow key,
down arrow key, left arrow key, space bar,
| | 04:11 |
space bar.
There we go.
| | 04:15 |
It even scrolls in this case.
This is a slightly smaller screen than
| | 04:18 |
it's designed for.
Maybe that's something we want to take
| | 04:20 |
into account.
Shrink this margin at the top if we know
| | 04:23 |
the size the screen is going to be
presented on.
| | 04:25 |
But all of our navigation is working, so
it looks pretty good for full screen.
| | 04:30 |
| | Collapse this transcript |
| CSS transitions| 00:00 |
Alright, let's add some transitions to our
CSS to do some really quick and easy animation.
| | 00:06 |
So, I'm going to start by opening the
Chapter 4 folder, 04, 05, Start.
| | 00:14 |
And I want to go into the CSS folder and
Open Styles.css in Dreamweaver.
| | 00:20 |
I'm going to scroll down to the section
definition here and what I'd like to do is
| | 00:26 |
to continue adding code after the
visibility line.
| | 00:31 |
And we're going to see how simple css
three animation is I'm setting a
| | 00:36 |
transition here.
And what this is basically going to tell
| | 00:41 |
the browser is if anything gets
manipulated on the section tag, transition it.
| | 00:46 |
And we're going to do a really kind of
lazy version of that which is all.
| | 00:51 |
So literally, anything that gets changed,
it's going to instead of switching from
| | 00:55 |
one property to another, it's going to
transition between them.
| | 00:59 |
And let's tell it to do that over a period
of 1 second.
| | 01:02 |
So we can do that by saying 1s.
And then we need to copy this line and add
| | 01:08 |
all the browser prefixes.
So, I'm adding 3 more of those.
| | 01:15 |
And in front of the second one, I'm
going to say dash mod for Mozilla, and
| | 01:21 |
then dash webkit and dash O for Opera.
And the other thing I want to add here is
| | 01:30 |
to set the opacity to zero so we have a
nice fade effect.
| | 01:37 |
So the opacity is zero.
And let's go down and in section active,
| | 01:45 |
let's make the opacity one here which is
equal to a 100%.
| | 01:52 |
Save that and switch back to the finder
and open the index file in the web browser.
| | 02:00 |
Use the arrow keys to navigate and let's
see what it looks like.
| | 02:04 |
So now we have a nice fade out of the
current slide, and the new slide just
| | 02:08 |
appears underneath.
So we're going to add a little bit more
| | 02:13 |
code to actually make that a cross fade
between the two.
| | 02:16 |
Let's switch back to Dreamweaver, and
below the Opacity, I'm going to add a
| | 02:21 |
transition to the active state as well.
But let's make that just a little bit longer.
| | 02:30 |
going to transition all again, and choose
1.5 seconds.
| | 02:38 |
And again I'm going to copy this line and
paste it three more times.
| | 02:44 |
Update one for Mozilla.
Update the next one for WebKit.
| | 02:51 |
And update the last one for Opera.
And to save this, let's switch back to the
| | 02:56 |
browser and refresh.
Now as I navigate through using the
| | 03:02 |
keyboard, it's subtle but you can see
there is a cross fade effect.
| | 03:07 |
So now, the new slide isn't just appearing
as the old slide fades out.
| | 03:11 |
It's actually fading in as the old slide
fades out.
| | 03:16 |
So, it's a subtle difference.
But the viewer's eye will subconsciously
| | 03:20 |
pick this up.
And it's just a slightly nicer effect.
| | 03:26 |
So, let's take advantage of the CSS
transitions even a little bit more and add
| | 03:30 |
a transform.
Let's first add a simple one and then
| | 03:34 |
we'll make it a little bit more complex.
So, what I basically want to do is the
| | 03:39 |
active state, I don't want to have any
transform.
| | 03:43 |
So, whatever I do to the section to sort
of prepare it before it's shown, I want
| | 03:47 |
that to be removed and when the slide is
active.
| | 03:51 |
So, it's just displayed normally.
So, what I'm going to do in section.active
| | 03:55 |
is set the transform to none.
That will basically reset us back to the
| | 04:00 |
state where everything is readable and
viewable.
| | 04:05 |
And again, I need to copy that.
And paste it, and add the browser prefixes.
| | 04:12 |
So let's add moz for Mozilla WebKit and o
for Opera.
| | 04:21 |
And then what I'm going to do is
manipulate the transform on the section definition.
| | 04:29 |
So, let's start with a really simple one
and I'm just going to make this transform
| | 04:35 |
and let's just translate the x so that we
have sort of a horizontal sliding in.
| | 04:43 |
And let's just make a guess.
Let's say like 20% of the screen.
| | 04:52 |
And I'm going to copy that.
Paste it in three times, and add the
| | 04:58 |
browser prefixes.
And then, let's switch over to the browser
| | 05:07 |
again, refresh, and look at that nice
slide in.
| | 05:16 |
And not only does it slide in, but we have
the transition on the active state as well.
| | 05:21 |
So as it goes away, it slides back out to
where the nonactive state is.
| | 05:28 |
So, that's a nice effect but I want to
make it just a little bit more interesting
| | 05:32 |
so I'll switch back over to my CSS file
and let's actually do a 3D transition.
| | 05:39 |
So, I'm going to remove all of this and
let's say rotate 3D, and this is one of
| | 05:43 |
those things I had to do a little bit of
trial and error to get it the way I like it.
| | 05:51 |
So, what we're basically telling it is we
want to manipulate the x, we want to
| | 05:54 |
manipulate the y.
We don't want to manipulate the z, so
| | 05:58 |
putting a 0 for that value.
And we want this all to take place add a
| | 06:04 |
60 degree angle.
So I'm going to copy this line, paste it
| | 06:11 |
in 3 times, and add the browser prefix.
Save this.
| | 06:21 |
And again, notice, I'm only manipulating
one piece here.
| | 06:24 |
I don't have to change anything in the
active section because.
| | 06:29 |
It will always default to a no transform.
So I can do anything with the transform I
| | 06:35 |
like here, and it will always get reset in
an animated fashion here.
| | 06:40 |
Once this is saved, I'm going to switch
over to the browser, refresh, and I get
| | 06:44 |
this nice kind of three d effect between
screens.
| | 06:50 |
They kind of pivot and fade in.
And while we're at it, let's take a look
| | 06:54 |
at one other neat feature of the
transitions which is as I scale the
| | 06:58 |
browser down.
The media query adjustments actually get
| | 07:02 |
animated by the transition as well.
So you can see how as the margin changes,
| | 07:07 |
it sort of floats into place here.
Should say its technically the padding but
| | 07:13 |
its a pretty neat effect.
Though you have done some really basic
| | 07:18 |
transforms and trnsitions.
If you want to learn more about doing
| | 07:23 |
transforms and transitions I recommend
taking a look at the W3 schools documentation.
| | 07:28 |
They'll show you which browsers are
supported.
| | 07:30 |
They have some examples and you can play
around with code.
| | 07:34 |
You've got details for transforms and
animations as well as transitions.
| | 07:39 |
I also recommend taking a look at can I
use dot com.
| | 07:42 |
Here I've searched for transition and here
it shows me all of the Browsers that are
| | 07:47 |
supported, including the ones that require
prefix to work.
| | 07:52 |
So this one requires WebKit.
And if you want to get more in depth and
| | 07:56 |
see some examples in action, there are two
great Lynda courses to look at.
| | 08:01 |
One is CSS: Transitions and Transforms
with Joseph Lowery.
| | 08:05 |
The other is CSS: Animations with Val
Head.
| | 08:09 |
And those will allow you to add more
detail to your animation if you'd like.
| | 08:14 |
But you can see from the code we've added
so far.
| | 08:16 |
It's pretty easy to add a simple
transition.
| | 08:18 |
All you need is the transition definition,
and a transform definition.
| | 08:23 |
And the rest of this is just to support
older browsers.
| | 08:26 |
So, it's pretty simple.
And you can add of the animation that
| | 08:30 |
someone would expect from one of the
existing presentation software packages.
| | 08:34 |
So, CSS transitions are pretty powerful
and pretty easy to use.
| | 08:38 |
| | Collapse this transcript |
| Challenge: Creating a responsive text shadow| 00:00 |
Alright, take a look at this text and
we've got a bit of a problem here.
| | 00:03 |
The white text is sitting on top of these
detailed buildings and it's pretty
| | 00:08 |
difficult to read.
So your challenge, if you choose to accept
| | 00:13 |
it, is to add some CSS so that this text
actually displays better but try and do it
| | 00:18 |
when the text overlaps the buildings.
So your objective is to add some CSS, to
| | 00:26 |
make the title slide text more readable
when it overlaps the building graphics.
| | 00:31 |
And I'm going to give you a hint.
One easy way to do it is to use a text-shadow.
| | 00:35 |
So, think about what we've done in the
last chapter, and see what you come up with.
| | 00:40 |
You've got ten minutes on this one.
It might require some trial and error.
| | 00:45 |
So play around and see what you can make.
And when you're all done, you can check
| | 00:49 |
out my solution video to see how I solved
it.
| | 00:51 |
| | Collapse this transcript |
| Solution: Creating a responsive text shadow| 00:00 |
So, if your monitor is like mine at home,
it's probably rather big so, you can fit a
| | 00:04 |
lot of things on screen.
So, what we've gone for this part to show
| | 00:08 |
this solution, is we've increased the
resolution using a different browser.
| | 00:12 |
And I've cut out the top part of the
browser so, we can actually see this
| | 00:15 |
effect in action.
So, right now, this is a rather large
| | 00:19 |
screen, and the text is not particularly
in conflict with the graphic.
| | 00:25 |
And so, what I want to show is, as the
graphic comes up and starts to overlap the
| | 00:28 |
text, our effect will come into play.
So, there it is.
| | 00:32 |
You can see it switch on.
Go back a little bit, and I can change the
| | 00:35 |
width of this and that does affect the
positioning a bit.
| | 00:39 |
But really, what I'm targeting is as I
move the bottom of the browser up, the
| | 00:44 |
graphic moves up and that's where it
starts to interfere with the overlap.
| | 00:51 |
So, that's the final effect, and let's see
how it's done.
| | 00:55 |
The way I approach this problem is to
think, really, what is affecting this overlap.
| | 01:01 |
And our previous media queries had to do
with the width of the window.
| | 01:07 |
Now, while that is going to have some
effect on the positioning, the height is
| | 01:10 |
the real culprit because, as I mentioned,
the background image is pinned to the
| | 01:14 |
bottom border here.
So, I went about this the same way we did
| | 01:19 |
the other media queries.
I right clicked and chose Inspect Element,
| | 01:24 |
and went to sources.
And instead of using inner width, I used
| | 01:28 |
inner height.
And I found that this was occurring at
| | 01:32 |
about 1000 pixels tall, which you know,
may not come up a lot in a presentation.
| | 01:37 |
A lot of times, if you're putting it up to
a projector, you're going to have a
| | 01:40 |
smaller resolution so, it may always show
the tech shadow.
| | 01:44 |
But maybe you're presenting on a really
large monitor, and in that case, it looks
| | 01:47 |
kind of nice with the flat white, as long
as it's not overlapping the buidlings.
| | 01:51 |
So, I'm going to switch to the Finder here
and open the CSS file.
| | 01:56 |
This is the start file in chapter four 04
06_challenge.
| | 02:04 |
And we are going to go to the Style CSS.
Of course the solution folder has the
| | 02:07 |
final solution, if you want to take a look
at that.
| | 02:10 |
I will show you some of the process that
got me to that final solution.
| | 02:15 |
So, again, we are adding a media query
with @media, and say for all.
| | 02:20 |
And instead of having the max width, I am
using the max height.
| | 02:26 |
And just a note, you can use Mac's
device-height, and Mac's device-width,
| | 02:30 |
hyphenated if you want to target specific
device sizes.
| | 02:34 |
In the case of this project, we're
targeting specific screen sizes.
| | 02:39 |
So, I'm going to close that media query,
and there're actually a number of things I
| | 02:42 |
want to affect here.
So, I want to do the h1 tag on the title slide.
| | 02:48 |
And I have no space between section and
title slide, because that title slide
| | 02:53 |
class is on the section, and then a space
for the h because it actually resides
| | 02:58 |
within the title slide.
And then I want to do the same exact thing
| | 03:06 |
for the h2 tag, and I want to do this on
my n slide as well, for both the h1 and
| | 03:14 |
the h2 tag.
So, what I'm going to add here is a tech
| | 03:22 |
shadow, and like most of this, there's a
lot of trial and error involved.
| | 03:27 |
So, I just want a little bit of one.
So, let's do 2 pixels by 2 pixels.
| | 03:32 |
And I'm just going to make it black to
start with, and I close that and save.
| | 03:40 |
Switch over the browser, and close my
developer tools, and I'm just going to
| | 03:43 |
refresh here.
This particular window is small enough
| | 03:47 |
where I can see the effect in action.
And you know what, that's actually too subtle.
| | 03:54 |
So, I actually want to do more there.
I'm going to right click on this and
| | 03:57 |
choose Inspect Element.
And so, if you actually look, you can see
| | 04:02 |
I have the media query rule in here.
So, I can manipulate that directly if I
| | 04:08 |
want to.
I can click one of these and use the arrow
| | 04:12 |
keys, and make sure I've got this exactly
the way I want it.
| | 04:17 |
So, I kind of like 6 pixels and 5 pixels.
That's about right, but that black is just
| | 04:24 |
so strong.
You know, how about a lighter gray?
| | 04:28 |
So, maybe.
And that's too light, and that's kind of
| | 04:31 |
messing with the white.
You know what I really want, is I want
| | 04:35 |
some transparency.
I want it a little more subtle.
| | 04:38 |
So, I'm actually going to take advantage
of the RGBA color space.
| | 04:43 |
A for alpha.
So, we get some transparency, instead of
| | 04:46 |
just using a hex value.
So, let's see if that works in our browser here.
| | 04:51 |
So, the first value is the red, and then
green, and then blue.
| | 04:55 |
I'm going to make all those zero for
black, and then, you know, let's just make
| | 04:59 |
it 50%.
So, 0.5 for the alpha, and that actually
| | 05:03 |
looks pretty good.
I like that.
| | 05:06 |
So, I'm going to copy that value and
switch back over to Dreamweaver, and paste
| | 05:12 |
that in and a return there.
Then save it, and I'm just going to go
| | 05:20 |
back to my browser, refresh and make sure
I like the way it looks.
| | 05:29 |
And I like that.
I'll take a look at the in slide as well,
| | 05:32 |
and that looks pretty good.
So, there you go, there's my solution.
| | 05:37 |
There's a lot of different ways you could
do it.
| | 05:39 |
Maybe you came up something even more
interesting.
| | 05:41 |
| | Collapse this transcript |
|
|
