IntroductionWelcome| 00:00 |
(MUSIC).
My name is Justin Putney, and welcome to
| | 00:06 |
HTML5 Projects, Creating an Advanced
Responsive Presentation.
| | 00:11 |
In this course, you will create a
self-running presentation that can
| | 00:14 |
automatically step through individual
bullet points.
| | 00:18 |
Have self-running audio narration, and
video and display interactive Twitter feeds.
| | 00:25 |
You'll also learn how to customize the
presentation to function with Gusto on
| | 00:29 |
iPads and other devices.
And how to cache your slide content so
| | 00:34 |
that it can also be viewed offline.
Once you finish this course, you'll have
| | 00:39 |
the tools to bring your static slideshows
to life and you'll be able to show the
| | 00:42 |
slides on any device you choose.
| | 00:45 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
If you're a premium subscriber to
lynda.com, you'll have access to the
| | 00:03 |
exercise files.
Once downloaded and expanded, the exercise
| | 00:07 |
files are organized into chapters.
Within the chapters, the files are
| | 00:12 |
organized by video.
In most cases, each video has a start and
| | 00:15 |
final folder, where you can see before and
after versions of the files.
| | 00:20 |
| | Collapse this transcript |
| Using the challenges| 00:00 |
This course includes several videos called
challenges.
| | 00:03 |
Challenges are quick activity that give
you a hands on opportunity to practice
| | 00:06 |
what you've been learning.
I'll start each challenge by describing
| | 00:10 |
your main objectives for the activity.
If the challenge involves sample files,
| | 00:15 |
I'll tell you where to find them.
I'll also give you a general estimate of
| | 00:18 |
how much time is needed to complete the
challenge.
| | 00:21 |
Once you've completed the challenge, be
sure to view the matching solution video.
| | 00:25 |
Because in each solution video, I'll show
you how I solved the challenge and I'll
| | 00:29 |
show you my step by step process.
Each challenge is a chance to master what
| | 00:33 |
you've been learning in a real world
context.
| | 00:36 |
I hope you find them helpful.
| | 00:38 |
| | Collapse this transcript |
|
|
1. Understanding the ProjectExploring the final results| 00:00 |
Let's take a look at what you'll be
creating in this course.
| | 00:03 |
(MUSIC).
Share if you gotta movie playing by
| | 00:12 |
itself, when the movie ends, it's
automatically going to go to the next slide.
| | 00:16 |
Little bit of press hold the audio and the
automatically advances.
| | 00:19 |
Got a Twitter feed live in here.
And then the original slides from the
| | 00:23 |
starting files.
And they're just going to advance by themselves.
| | 00:28 |
When we get to a slide with bullets, the
bullets are going to animated and they're
| | 00:31 |
on a separate timer.
When we get to the final slide and it'll
| | 00:35 |
actually loop back around the original
video.
| | 00:37 |
So, let's get started.
| | 00:38 |
| | Collapse this transcript |
|
|
2. Enhancing the SlideshowEmbedding a Twitter feed via an iframe| 00:00 |
One of the major examples to using HTML
for a presentation is that you can easily
| | 00:03 |
embed interactivity that you couldn't do
in PowerPoint or keynote.
| | 00:08 |
You can do this with YouTube videos,
Google maps, anything that allows you to
| | 00:12 |
embed and Iframe or other content.
So here I've got a site called Tweet
| | 00:16 |
Wally, and this will allow me to create a
twitter feed based on a hash tag.
| | 00:21 |
And I've done just that and I've
customized some of the colors here in the feed.
| | 00:26 |
And it gives me an option to inbed.
And there's an Iframe here I'm just
| | 00:30 |
going to copy this and, switch over to my
finder.
| | 00:36 |
I'm in the chapter two folder.
And zero one start, and I'm going to open
| | 00:41 |
the index.html file in Dreamweaver, and
want I want to do is add a new slide here,
| | 00:46 |
so each slide is associated with a section
node.
| | 00:51 |
I'm going to add another slide after the
title slide, and so I'm going to type in section.
| | 00:58 |
And I'm just going to make sure to add a
closing sections.
| | 01:01 |
I'm going to paste this Iframe in.
And you'll have to type this in, so I'll
| | 01:05 |
leave it on screen so you can take a look
at it.
| | 01:07 |
It's an iframe.
It's got a frame border of zero.
| | 01:10 |
I'm going to change the width to 100%.
Do the same for the height.
| | 01:16 |
And for the source.
It's HTTP//rouxcon,
| | 01:19 |
rouxcon.tweetmolly.com/embed, has a target
of _blank, a line of center, and scrolling
| | 01:27 |
is set to auto, and then it closes the
Iframe.
| | 01:34 |
So I'm going to go ahead and save this.
Go back to my finder and open up the Index
| | 01:38 |
file in my web browser.
So here it is.
| | 01:42 |
I'm going to use the Next arrow key to
navigate, and there's the Twitter feed,
| | 01:45 |
everything's working.
One thing I'm noticing here is that I have
| | 01:49 |
this empty space, there's padding built
into the presentation.
| | 01:52 |
And I actually want this Twitter feed to
basically take over the whole screen.
| | 01:56 |
So I'm going to switch back to
Dreamweaver.
| | 01:59 |
You'd of course use any text editor you
like.
| | 02:01 |
I happen to like that Dreamweaver's
showing all my resources the top.
| | 02:04 |
So in the css file, there's a file called
styles.css, and Dreamweaver provides it up here.
| | 02:10 |
So I'm just going to click on it to
navigate to that.
| | 02:13 |
And I want to create a class that removes
the padding there for the section.
| | 02:18 |
So I'm going to type in section, at the
end of the file here, .nopad, and then
| | 02:23 |
open bracket.
And I want to set padding to zero.
| | 02:28 |
And then I'm going to go ahead and close
that off.
| | 02:32 |
I'm going to switch back to the source
code of the HTML, and give this section
| | 02:36 |
with the Iframe.
The class of nopad.
| | 02:43 |
And save that file.
I'm going to switch back over to my web
| | 02:46 |
browser and refresh.
Use the arrow key to navigate to the next
| | 02:50 |
screen, and there is the Twitter feed, and
it's taken over the whole screen.
| | 02:54 |
So now you can have a live Twitter feed in
your presentation.
| | 02:57 |
| | Collapse this transcript |
| Hiding the cursor in full-screen mode| 00:00 |
One of the nice features of the typical
PowerPoint or Keynote presentation
| | 00:03 |
software packages is that they'll hide the
mouse in full screen mode so that it's not
| | 00:06 |
distracting during the presentation.
Let's go ahead and hide the cursor in full
| | 00:12 |
screen as well.
So I'm in the chapter 2.02 start folder.
| | 00:16 |
I'm just going to open up the index.html
file in a web browser and show you how it
| | 00:20 |
is right now.
So if I go to full screen by double clicking.
| | 00:26 |
There's the cursor.
It's still there.
| | 00:28 |
I'm just going to hit Esc and get out of
that, and then switch back to the exercise
| | 00:32 |
files, and then I'm going to go into the
css folder and open up styles.css.
| | 00:38 |
Then in Dreamweaver, I'm going to scroll
down to the bottom.
| | 00:41 |
Now this is kind of a complicated bit of
code, so I've put it in a Snippet.
| | 00:44 |
If you don't have access to the exercise
files, you can find this kind of
| | 00:47 |
functionality just by doing a search.
And I found this in a Stack Overflow answer.
| | 00:52 |
So, I'm going to open up the snippets.css
in Dreamweaver as well.
| | 00:57 |
And I'm just going to copy this bit.
This is just for webkit, but if you
| | 01:00 |
want to add other vendor prefixes you can.
So,this is basically saying when we go to
| | 01:06 |
full screen, it's going to make the slides
into a transparent gif.
| | 01:12 |
So, it's just creating that on the fly.
You could also put a transparent gif in
| | 01:15 |
your images folder and link to it that
way.
| | 01:18 |
So, I'm just going to copy this snippet,
close the file, and paste it down at the
| | 01:22 |
bottom of the styles.css file.
We're going to save that, switch over to
| | 01:28 |
the browser and refresh.
And I am going to double click to go into
| | 01:32 |
full-screen and now you can see that the
cursor is hidden.
| | 01:35 |
I am actually moving it around and can't
see it.
| | 01:37 |
And I'm going to click the right arrow key
to go to the next page.
| | 01:41 |
And one of the cool things about this is
we added this iframe which is interactive
| | 01:44 |
and when I hover over it the cursor shows
back up.
| | 01:48 |
So I can actually interact with the
screen.
| | 01:51 |
Didn't need do any on mouse move
functionality.
| | 01:53 |
And in some ways this works better because
on mouse move the java script event could
| | 01:57 |
be triggered accidentally by somebody
bumping the mouse or even just a little
| | 02:00 |
bit of gravity.
So we added this nice bit of functionality
| | 02:04 |
with just a single css snippet.
| | 02:07 |
| | Collapse this transcript |
| Stepping through bullet points| 00:00 |
Another nice bit of functionality that you
typically see in a presentation software
| | 00:04 |
package is the ability to step through
bullet points one at a time.
| | 00:09 |
So, let's take a look at how the
presentation is working right now.
| | 00:13 |
I'm in the chapter two folder, in 03,
start.
| | 00:16 |
I'm just going to open the index file in a
web browser, and I'm going to click the
| | 00:19 |
right arrow key to navigate to the screen
with the bullet points.
| | 00:26 |
And so, right now, the whole screen comes
on all at once.
| | 00:29 |
And let's see what we can do about that.
I'm going to go into the js folder and
| | 00:32 |
grab the pres.js file, which is where we
have all our custom code, and open that in Dreamweaver.
| | 00:40 |
Let's make this bit of functionality a
toggle, so, it can be turned on or off.
| | 00:45 |
So, I'm going to create a variable at the
top called stepThroughBullets, and let's
| | 00:50 |
set that to true.
Now, let's go down to the next function.
| | 00:56 |
And let's add a line before the go to
call.
| | 01:03 |
Say, if stepThroughBullets, and let's also
make sure that are some hidden bullets on
| | 01:09 |
the screen.
So, let's do and, the two ampersands, and
| | 01:14 |
we're going to use some jQuery here.
So, dollar sign.
| | 01:18 |
I'm opening this up, and I'm going to
target section, but only the active section.
| | 01:23 |
And I'm going to look for list items.
So, I could actually say I want unordered
| | 01:28 |
list, list items, but then you know, if
list items are ordered one, two, three,
| | 01:31 |
four this won't work.
And I want this to work for both of them.
| | 01:37 |
So, I'm just going to say list item, and
then I'm going to use the selector :hidden.
| | 01:42 |
So, it will only do this if there are
bullet points that have not yet been
| | 01:46 |
revealed on screen.
Close the Paren/g.
| | 01:49 |
I'm just going to say .length and close
that.
| | 01:53 |
And then open bracket, and I'm going to
hit an extra Return and close the bracket.
| | 01:58 |
So, this length property is either going
to be zero or it's going to be some number
| | 02:03 |
above zero.
If it's zero, that's the Boolean
| | 02:07 |
equivalent to false.
So, this will fail.
| | 02:10 |
So, if it's zero, there's nothing hidden,
no bullet points hidden.
| | 02:14 |
So, we're just going to skip this.
But if it does have a bullet point,
| | 02:18 |
meaning there's something hidden, there's
more than one, let's run another bit of jQuery.
| | 02:23 |
This time it'll be section.active
li:hidden, and we're say .first.
| | 02:29 |
So, we'll grab the first hidden bullet.
And we could just say show, that would work.
| | 02:36 |
But let's actually fade it in.
It's just a little bit nicer.
| | 02:38 |
So, fade in with a capital I, and two
parentheses to call it and a colon.
| | 02:44 |
And then let's just say return so that
we're not going to go to the next slide,
| | 02:46 |
we're just going to fade in the bullet.
So, this will essentially keep being
| | 02:50 |
called until we run out of hidden bullets,
and then we're going to go to the next slide.
| | 02:54 |
So, I'm going to save that, switch over to
the web browser, and hit Refresh.
| | 02:59 |
I'm going to use the right arrow key to
navigate through.
| | 03:04 |
And when I get to the page with the
bullets, and it's not working.
| | 03:08 |
Why is it not working?
Well, you have to hide the bullets first.
| | 03:11 |
So, let's go back and do that.
So, in the go to function, let's make sure
| | 03:15 |
every time we come to a new screen, we
hide all the bullets on that screen.
| | 03:19 |
But of course we only want to do it if
stepThroughBullets is true.
| | 03:23 |
We say if stepThroughBullets, and we'll do
another jQuery call.
| | 03:29 |
Say section.active li.
So, we are getting all the list items
| | 03:34 |
there, and let's say .hide.
'Kay?
| | 03:39 |
We'll save that, switch back to the web
browser.
| | 03:41 |
Let's refresh.
And I'm just going to next through these
| | 03:45 |
with the right arrow key.
Okay.
| | 03:48 |
Now we have our screen with the bullets.
The bullets are hidden.
| | 03:50 |
I'm going to click next again.
There's one, two, three, and after the
| | 03:53 |
last one, goes to the next slide.
Pretty cool, huh?
| | 03:57 |
| | Collapse this transcript |
| Challenge: Reverse bullet points| 00:00 |
True challenge in this chapter is to
improve the reverse functionality of the
| | 00:03 |
bullet steps.
What do I mean by improve it?
| | 00:07 |
Let's take a look at the files that exist
right now.
| | 00:09 |
Exercise Files in Chapter 2, 04_Challenge,
in the start folder, we'rte going to open
| | 00:14 |
up the index.html file in the web browser.
So as it is right now, stepping through
| | 00:21 |
with the right arrow key.
And the bullets work great in forward motion.
| | 00:30 |
But if I were to go backward, the bullets
are hidden.
| | 00:33 |
And if I keep going backward I don't see
any of them.
| | 00:36 |
Then I can go forward and go all the way
through them.
| | 00:39 |
So your challenge is to make the bullets
work in reverse.
| | 00:43 |
So in doing so, I want you to think about
what you would want or need as a presenter.
| | 00:47 |
How do you want the slide to function when
you jump backwards?
| | 00:51 |
Do you want to see all of the bullets?
Do you want 'em to work backward in reverse?
| | 00:55 |
Do you want them to fade out until you go
backward to the next slide?
| | 00:58 |
What are you doing when you're going
backward in your presentation?
| | 01:01 |
You'll have five minutes, hopefully most
of this is, is thinking time trying to
| | 01:04 |
come up with the best functionality.
When you're done, make sure to take a look
| | 01:07 |
at the solution video and see how I did
it.
| | 01:10 |
| | Collapse this transcript |
| Solution: Reverse bullet points| 00:00 |
Let's take a look at what I came up with.
I'm in the Chapter 205_Solution final
| | 00:04 |
folder, and I open up the index.html file
in the web browser.
| | 00:09 |
I'm going to use the arrow key to navigate
forward 'till I get to the bullets, and
| | 00:16 |
then the left arrow key to navigate back.
There are all the bullets, and then I go back.
| | 00:24 |
The reason I did it this way.
Well, my thought is, most of the time when
| | 00:27 |
I'm creating a presentation, I'm moving
forward.
| | 00:30 |
Step by step.
If I'm going backwards, I've either made a
| | 00:33 |
mistake or somebody's asked me a question
and I need to get where I'm going quickly.
| | 00:38 |
So, all the bullets show up at once, and
then I can keep moving.
| | 00:41 |
When I'm going through the first time,
it's sort of progressive reveal.
| | 00:44 |
When I go back the second time, the
audience has already seen it, so I don't
| | 00:47 |
need that progressive reveal.
So, I'm going to go to the files and show
| | 00:51 |
you how I did that.
Go into the js folder and open pres.js.
| | 00:57 |
And in the back function, you can scroll
down.
| | 01:00 |
You can see that I have here, if step
through bullets.
| | 01:04 |
So I'm making sure that's true.
Then, we're going to check for all of the
| | 01:08 |
list items on the active section.
And we're just going to show them.
| | 01:14 |
So, it's basically the reverse of this.
So, they get hidden here if we happen to
| | 01:18 |
be going backwards.
We're just going to show them.
| | 01:21 |
So one line of code, and got some
functionality that makes a little bit more sense.
| | 01:27 |
Hope you can up with something
interesting, too.
| | 01:30 |
| | Collapse this transcript |
|
|
3. Creating a Self-Running SlideshowCreating the code for automatic playback| 00:00 |
We're working toward doing a self running
slide show that you could just sit down at
| | 00:04 |
a presentation booth on some kind of
tablet and have it play by itself.
| | 00:09 |
Have video, narration so let's start by
adding the self running portion here.
| | 00:13 |
I'm in the chapter three folder, the
exercise files in 01.
| | 00:18 |
In the Start folder.
And I'm going to go into the js folder and
| | 00:21 |
open the pres.js file.
Let's start by adding a few variables to
| | 00:26 |
control this.
Again, so our functionality can be turned
| | 00:29 |
on or off as needed.
So we'll create a new variable and call it autoPlaySlides.
| | 00:36 |
I'm using CamelCase case here.
And I'm going to set that to true.
| | 00:41 |
And I'm going to create another variable
called slideDurations so I can control
| | 00:45 |
this easily.
And I'm actually going to set this to a
| | 00:48 |
really short duration.
It's going to be in milliseconds so each
| | 00:52 |
second is going to be a thousand.
Now let's just do a thousand for debugging purposes.
| | 00:57 |
Every time I'm checking the file I don't
want to sit and wait you know five, ten,
| | 01:00 |
fifteen seconds for each slide.
So you can change this later when you're
| | 01:04 |
actually going to show your presentation.
And then let's also create a variable
| | 01:09 |
called timer.
And that will certainly keep track of the
| | 01:12 |
timer itself.
Let's go down to the go to function.
| | 01:19 |
And add a line at the end of the inside of
the function.
| | 01:22 |
Let's say if auto play slides.
Then let's auto next.
| | 01:28 |
Let's create that auto next function right
now.
| | 01:32 |
So I'm going to say function, auto next
and n is capitalized of course.
| | 01:38 |
Open of the function, I'm going to close
it with a curly brace.
| | 01:42 |
And go back into the function.
And I'm going to create a variable called
| | 01:45 |
duration and I'm going to set it equal to
slide duration.
| | 01:49 |
So right now it doesn't make a lot of
sense why I'm setting one variable equal
| | 01:52 |
to another, but it will as we add more
functionality.
| | 01:56 |
And let's say timer, that variable that we
created at the top, is going to be equal
| | 01:59 |
to set time out.
And inside of that we'll have a
| | 02:04 |
parenthesis, and we're going to say
function.
| | 02:07 |
And two parentheses, and then a curly
brace.
| | 02:11 |
And then we're going to call the next
function inside of there.
| | 02:14 |
And then close it with a curly brace,
comma, and then we're going to pass the
| | 02:18 |
second argument as duration.
And I'm going to save that file.
| | 02:22 |
So this is a pretty imprecise timing
mechanism.
| | 02:26 |
It's not going to be exactly a second or
whatever your setting happens to be.
| | 02:30 |
But it will work roughly well.
If you want to have it more accurate, you
| | 02:33 |
actually have to check the date, like the
number of seconds or milliseconds that
| | 02:36 |
have passed and do a comparison.
But this'll work okay.
| | 02:39 |
And I'm also using the set time out
function instead of the set interval.
| | 02:44 |
And that will allow me to basically make
an adjustment on each slide.
| | 02:48 |
So it makes it much easier to pause the
slide show.
| | 02:50 |
Or as you'll see in a moment, we'll
actually change timing for different things.
| | 02:54 |
Where as a set interval will keep running.
We'll actually call this set time out each
| | 02:58 |
time we need to.
So let's open the HTML file in a browser
| | 03:01 |
and see what we've got so far.
going to switch back to the finder and
| | 03:06 |
open index.html in a web browser.
And so the timer should have fired by now,
| | 03:12 |
it's only set to one second.
It's not working, you know, let me just
| | 03:15 |
hit the next arrow key.
And, whoop, there it's working now.
| | 03:19 |
So, why is that?
Let's go back and take a look at our code.
| | 03:24 |
And the culprit might be that the autoplay
functionality is getting called in go to.
| | 03:30 |
And when we initialize our slides we're
actually calling a custom bit of code here.
| | 03:35 |
Well and let's just duplicate or let's say
un duplicate because we've got some
| | 03:39 |
duplicate functionality and just go to in
here and set that to zero.
| | 03:44 |
The first slide.
So I'll save that, switch back over to
| | 03:47 |
browser and I'm going to refresh and there
it's playing through.
| | 03:52 |
Up until the bullet points, where when it
gets to the first bullet point it stop of
| | 03:55 |
course because have that sort of step
through bullet functionality.
| | 03:59 |
So let's get that bullet functionality
working in the auto play as well.
| | 04:02 |
We'll do that in the next video.
| | 04:04 |
| | Collapse this transcript |
| Adding bullet timing| 00:00 |
If you take a look at the index.html file
in the exercise files in chapter 3, 02
| | 00:06 |
start folder.
You can see as it auto plays through when
| | 00:11 |
it gets to a screen with a bullet it's
just going to stop.
| | 00:15 |
That's because we've got our stepped
bullet functionality in play.
| | 00:18 |
So switch back over to finder and then
open up the pres.js file in the js folder
| | 00:23 |
in Dreamweaver.
Lets add a variable to set the timing for
| | 00:29 |
the bullets.
So again this is just kind of a debug setting.
| | 00:34 |
Will set this to a longer value later but
for right now lets make it a very short
| | 00:38 |
duration so we can easily test it quickly.
Let's call it bullet duration, and set it
| | 00:43 |
equal to 500 milliseconds, which will just
be half a second.
| | 00:48 |
And then let's scroll down to the next
function.
| | 00:50 |
This is where our stepped bullet
functionality takes place.
| | 00:55 |
So in here, let's just add a line before
the return, and say if autoPlaySlides.
| | 01:03 |
Then let's call autoNext.
And we don't have to write really any more
| | 01:08 |
code than that to get it working because
auto next when it calls is going to come
| | 01:12 |
back through to next.
And in here, in the next function, it's
| | 01:17 |
going to check to see if there are any
hidden bullets.
| | 01:21 |
And if there are, it's going to show those
first.
| | 01:23 |
So we've already kind of built a lot of
that functionality.
| | 01:26 |
Let's go in and let's chisel it a little
bit.
| | 01:28 |
So let's scroll down to the auto next
function and now you'll see why I've
| | 01:32 |
created this duration variable here.
going to do a specific kind of if
| | 01:37 |
statement that will actually get assigned
to the variable.
| | 01:41 |
I'm going to do open and closing
parentheses there, a question mark, and
| | 01:45 |
then bulletDuration, and then a colon, and
slideDuration.
| | 01:51 |
So what this is going to effectively do is
to say if what is in the parentheses
| | 01:55 |
resolves to true, duration is going to use
bullet duration.
| | 02:00 |
If it resolves to false, then it's
going to use slide duration instead.
| | 02:06 |
So the first thing we want to check for in
these parenthesis here is to make sure
| | 02:10 |
that stepThroughBullets is true.
And we then want to check and make sure
| | 02:15 |
that the current slide actually has
bullets on it.
| | 02:19 |
So let's do a jquery call and say
section.active and, li for list item, and
| | 02:24 |
close that up, and then check the length.
So this is just like we did before.
| | 02:32 |
If this happens to be zero, there are no
list items on the page, it'll resolve to false.
| | 02:37 |
And this will fail, and use slideDuration.
If this is anything other than zero, and
| | 02:42 |
stepThroughBullets is true, then it'll use
bulletDuration instead.
| | 02:47 |
Let's add one last thing, let's make sure,
in case somebody happens to navigate while
| | 02:51 |
it's auto playing.
That we clear the timer, so that they get
| | 02:54 |
the full amount of time when they go to
that screen that they've manually
| | 02:58 |
navigated to.
So, we say if autoPlaySlides and let's
| | 03:03 |
clear out the timer, so we use the
clearTimeout function.
| | 03:08 |
And we'll pass it that value of the timer,
which is the variable that's storing our setTimeout.
| | 03:16 |
So, with that saved let's switch back to
Finder.
| | 03:20 |
And open up the index.html file in the
browser.
| | 03:23 |
That's playing through, again we're just
doing these one second at a time and then
| | 03:26 |
half second on each of the bullets and all
the way through.
| | 03:29 |
Pretty cool huh?
| | 03:30 |
| | Collapse this transcript |
| Challenge: Creating a loop| 00:00 |
Alright, you're doing a great job so far
and I think it's time for a challenge.
| | 00:04 |
Here I want you to create a loop setting
so that when your slides get to the end
| | 00:07 |
they go back to the beginning and they
keep playing through continuously.
| | 00:12 |
I want you to turn on the loop setting.
I'm using the word setting here very
| | 00:16 |
purposefully because I want it to turn on
or off.
| | 00:20 |
And I want you to go ahead, once you have
a setting, to actually impliment it.
| | 00:23 |
You've probably done enough logic in the
course that you can take on this challenge.
| | 00:27 |
Go ahead and implement the loop setting,
it should probably take you areound ten
| | 00:30 |
minutes or less, and then make sure to
take a look at the solution video.
| | 00:34 |
| | Collapse this transcript |
| Solution: Creating a loop| 00:00 |
Alright, now we can take a look at what I
came up with.
| | 00:03 |
This is in the Chapter 3 folder of the
exercise files under 04_Solution in the
| | 00:06 |
final folder, and I'm going to go to the
js folder and open up pres.js.
| | 00:12 |
So, at the top I just created a variable
called loop and set it to true.
| | 00:19 |
And then if you scroll down to the go to
function.
| | 00:23 |
So, what I did here was to take the
existing functionality and just wrap it in
| | 00:26 |
an else clause.
So, this is the code that says, you know,
| | 00:29 |
that makes sure that we stay within the
first screen and within the last screen,
| | 00:34 |
of course.
And if that's true, we set the
| | 00:38 |
currentSlide and we move on from there.
And if that isn't true, it just kind of
| | 00:42 |
fails and exits the function.
So that's in an else clause.
| | 00:46 |
And now we have this if clause, and that
runs if we have loops set to true.
| | 00:52 |
So if loop is set to true, and we happen
to go below zero, well then we just
| | 00:56 |
want to go to the last slide, so
essentially we're on the first screen,
| | 00:59 |
we're going backwards.
We just want to make sure currentSlide
| | 01:04 |
gets set to the last one.
So we're going to just basically count the
| | 01:08 |
number of sections.
And subtract 1 from there.
| | 01:11 |
So we're going to check another case and
see if we happen to be beyond the last screen.
| | 01:17 |
So the last screen, of course, we're using
a ray notation where zero is the first screen.
| | 01:21 |
So the last screen is actually the length
minus 1.
| | 01:25 |
And so we're checking to see if we are
greater than that, and if that's the case,
| | 01:28 |
we're just going to set the current slide
back to the first slide.
| | 01:32 |
And if neither one of those happens to be
true then it's basically this condition
| | 01:36 |
right here, but we're inside our loop
setting here so we just have an else as a
| | 01:40 |
catch-all and set that to currentSlide.
So, I'm going to switch back to the finder
| | 01:46 |
and I'm just going to open up the index
file and let it run in the browser here.
| | 01:53 |
And, when it gets to the end, it'll keep
playing through back at the beginning.
| | 01:58 |
So hopefully you came up with something
similar.
| | 02:00 |
| | Collapse this transcript |
|
|
4. Adding Audio and VideoUsing MediaElement.js in your presentation| 00:00 |
We are going to use MediaElement.js to
embed audio and video as well as control
| | 00:04 |
the audio and video with JavaScript.
If you don't have access to the exercise
| | 00:09 |
files, just click the download button on
the MediaElement.js.com website.
| | 00:14 |
If you do have access to the exercise
files, then check out chapter four, 01 in
| | 00:19 |
the start folder.
There's also, at the same level, a
| | 00:22 |
mediaelementjs folder.
And what we're going to do is copy the flashmediaelement.swf.
| | 00:31 |
For browsers that don't support the audio
or video format we're using, the Flash
| | 00:34 |
media element will pick up and load it
into a Flash player.
| | 00:38 |
So, let's copy the SWF into the start
folder.
| | 00:42 |
We'll create a new folder inside of there
called media.
| | 00:47 |
And I'm going to paste it inside of there.
Let's got back and also copy this
| | 00:52 |
JavaScript file.
I'll expand this, so if you don't have the
| | 00:56 |
exercise files you can see exactly which
one it is.
| | 00:58 |
It's the mediaelement-and-player.min.js
file.
| | 01:03 |
There's actually multiple ones in the
package.
| | 01:05 |
So let's paste that into the JS folder,
and then I'm going to open the index.html
| | 01:11 |
file in Dreamweaver.
And what we need to add is another script tag.
| | 01:16 |
Let's put the script tag after the jQuery
library, which is necessary for media element.
| | 01:20 |
Let's put it before the prez.js file
because we need to access the media
| | 01:25 |
element in our code.
Let's start a new script tag.
| | 01:30 |
For the source we want the file we just
copied.
| | 01:34 |
So we're going to go to the desktop and my
exercise files and chapter four 01.
| | 01:42 |
Start JS and grab that media element in
player.
| | 01:46 |
Click open, close my script tag.
Okay, and now we're ready to start adding video.
| | 01:54 |
| | Collapse this transcript |
| Adding video| 00:00 |
going to use the HTML five video tag to
embed video in our presentation.
| | 00:04 |
Here i have the w3 schools reference.
Scroll down you can see our works were
| | 00:10 |
actually used in even simpler
implementation that is shown here.
| | 00:13 |
This site is also great because it also
shows you the different browser support.
| | 00:18 |
We're going to use an MP4 file, and the
case of the browser that don't support
| | 00:21 |
that, like Firefox in this case, it will
fall back to a flash video player.
| | 00:27 |
So that's really handy, that's one of the
reasons that media element JS is so useful.
| | 00:31 |
And we don't even have to write the embed
code for the flash object ourselves, and
| | 00:34 |
it'll take care of that.
So I'm going to switch back to the finder.
| | 00:38 |
And the chapter four, zero two start
folder.
| | 00:41 |
At the same level there's a media folder
that contains the audio and video that
| | 00:44 |
we'll use throughout the presentation.
So select these two items, copy them.
| | 00:50 |
And start folder, you can paste them into
the media folder.
| | 00:54 |
Next let's open up the index HTML file in
Dreamweaver, or the code editor of your choice.
| | 00:59 |
And let's add a new screen with a video.
Now we want it to be the opening screen,
| | 01:03 |
so it just kind of splashes in with the
video.
| | 01:06 |
And then it will go on to the title slide.
So inside of the div that holds the
| | 01:12 |
slides, we're going to add another section
and.
| | 01:18 |
Let's go ahead and add the no pop class
that we created for the slide with the Iframe.
| | 01:24 |
And I'm going to close off the section
node.
| | 01:27 |
Inside we're going to do a very simple
video tag with the source attribute.
| | 01:33 |
And we're going to link to that
placeholder video.
| | 01:37 |
Make sure I'm in the right folder.
Chapter four, zero two, start media and
| | 01:43 |
I'm going to grab that placeholder mp4.
And then I just going to close the video tag.
| | 01:51 |
Then we're going to go in and add the
JavaScript that initiates the media element.
| | 01:58 |
So we want this to take place when the
ready function is called with much of our
| | 02:02 |
other code.
So inside of there just going to add a return.
| | 02:07 |
And we're going to call it using JQuery.
And we're just searching for video tags,
| | 02:12 |
and then on all the video tags we're
going to call Media Element Player.
| | 02:18 |
And there are a number of options here
that we're going to add.
| | 02:21 |
And I'm going to switch back and show you
the media element.
| | 02:24 |
One thing I should mention actually about
the media element is that normally we
| | 02:28 |
would be bringing in a display, so we also
would have attached a CSS file and copied
| | 02:32 |
an image.
But in this case we don't really want
| | 02:36 |
there to be a skin, or any kind of
interface on the video.
| | 02:39 |
We just want it to be a seamless part of
the presentation.
| | 02:41 |
That's why we're only using the Java
script.
| | 02:44 |
So if you look at the options, this'll
give you a list of all the potential options.
| | 02:48 |
We're going to take advantage of a few of
these.
| | 02:51 |
And we go back to Dreamweaver, and I'll
let you know as we're going along what
| | 02:54 |
each of these mean.
There's a plugin path.
| | 02:58 |
And basically what we're telling media
element is that the one plugin we're
| | 03:01 |
using, which is the SWF player, is in the
media folder.
| | 03:06 |
We're going to set features to an empty
array.
| | 03:08 |
We're going to turn off enable keyboard
because we already have keyboard
| | 03:11 |
navigation in our presentation, we don't
want those two conflicting.
| | 03:16 |
There are native controls for iPad,
iPhone, and Android, and we want all those
| | 03:20 |
to be set to true because, for whatever
reason, we're on the cutting edge of this
| | 03:24 |
technology, and, if you hide the
interface, a lot of the programmatic
| | 03:27 |
aspects of the media element don't work.
So we'll try and hide aspects of the
| | 03:33 |
interface in other ways.
So we want to say iPad, this is all camel
| | 03:38 |
case, so capital with what would be a new
word, iPadUseNativeControls, and you're
| | 03:43 |
going to set that to true.
We're going to use same thing with iPhoneUseNativeControls.
| | 03:53 |
And that will also be true.
And Android use native controls.
| | 04:03 |
In this case, it's false.
If you find it's not working, we're mostly
| | 04:06 |
targeting iPad at this, you can set this
one to true.
| | 04:09 |
And then we're going to have a success
function, that's called.
| | 04:13 |
And I'm just going to add a new line.
And say success, and that's actually a
| | 04:18 |
function and it receives two arguments,
one is a mediaElement object, the other is
| | 04:24 |
a domObject.
And then we're going to open that with a
| | 04:28 |
curly brace, and close it with a curly
brace.
| | 04:31 |
And then we're going to close off this
entire piece here starts with a paren and
| | 04:36 |
a curly brace.
Let's close it with a paren and a curly
| | 04:39 |
brace, and a semicolon, and a line.
And just add a little space.
| | 04:45 |
We're not going to put anything in the
success function right now, but we'll add
| | 04:47 |
that in a little bit.
So I'm going to switch over to the finder
| | 04:51 |
now, and open up the index file in the web
browser.
| | 04:54 |
Let's just see how things are going.
Well there was a video there for a moment.
| | 04:59 |
And then it got skipped ahead because of
the timer.
| | 05:02 |
So let's close this.
There's that video.
| | 05:05 |
And let's go back and let's add some code
so that it essentially disables the active
| | 05:10 |
timer when there's a video present.
So let's go down just before our auto next function.
| | 05:21 |
And I'm going to add a little bit to this
if clause here.
| | 05:23 |
So in addition to checking for auto play
slides, I also want to see if there are
| | 05:27 |
any videos on the active screen.
So I'm going to use an exclamation point
| | 05:32 |
that will say not, and then start a j
query call here to section.active.
| | 05:40 |
And then within the active section I can
find video, and actually I could have just
| | 05:44 |
typed that as a single selector.
Not sure why I did that the way I did but
| | 05:48 |
that's another way to do it if you're
wondering.
| | 05:51 |
Again we're kind of using a number as a
Boolean here.
| | 05:55 |
So if this is zero there are no videos on
the current screen.
| | 06:00 |
It will be not that, so zero will be
false, and not false is true.
| | 06:06 |
So in the case that there is not video,
and we have autoPlaySlides set to true, it
| | 06:10 |
will autoNext.
If we do have video, in this portion.
| | 06:20 |
Even if we have autoplay slide set at the
true, it will not autonext.
| | 06:25 |
Okay, so let's check that out.
I'm going to save that, and switch over to
| | 06:29 |
the finder, and open my index file in the
browser once more.
| | 06:33 |
And so now here we are in the video screen
and it's just stopped.
| | 06:37 |
That's what we want.
If I clicked on it, it'll play.
| | 06:40 |
We'll let's go back and do more
re-tooling.
| | 06:41 |
We've got some work to do, The video's
just kind of.
| | 06:43 |
Floating here we've got a scroll bar so,
let's fix all that.
| | 06:49 |
Let's do some clean up in our CSS.
So, in the CSS folder there's a styles.css file.
| | 06:54 |
I'm going to go up and just access the
resource in Dreamweaver here.
| | 06:58 |
Scroll down to the bottom, and let's just
do all this setting at once.
| | 07:04 |
I'll save you a little bit of the
experimentation I did here.
| | 07:08 |
I want to look at video.
And in addition to the video tag there are
| | 07:11 |
several wrappers that media element JS
adds.
| | 07:15 |
They're really helpful but they also need
some styling too.
| | 07:18 |
There is a class.
We're going to start with a class selector.
| | 07:22 |
It's .nejs-video.
There is also an overlay on the video, so
| | 07:27 |
we going to add mejs dash overlay and open
that up with the curly brace.
| | 07:31 |
We will set the height to 100% and the we
want to say exclamation point important,
| | 07:37 |
and the reason we are going to do that is
because as the browser gets scaled.
| | 07:46 |
The media element is actually dynamically
going to change the pixel value, and we
| | 07:51 |
want to say important, no matter what else
gets done.
| | 07:56 |
So, the same thing with the width.
We also want the position to be absolute.
| | 08:06 |
And we're going to set all of the
following properties to zero.
| | 08:10 |
Top, left, right and bottom.
And then we're going to set margin to auto.
| | 08:21 |
And the effect of setting the position to
absolute, and setting all four of these
| | 08:25 |
values to zero.
And then setting the margin to auto is
| | 08:29 |
that it's going to center the video.
So that will be really nice.
| | 08:34 |
And then we just want to make sure that
with all of these items we hide any overflow.
| | 08:38 |
So we'll just get rid of that scroll bar
that appeared there for whatever reason.
| | 08:42 |
It's probably.
Part of the overlay or part of he rapper
| | 08:44 |
object here and so we're just going to
correct that with this code very quickly.
| | 08:49 |
And while we're at it let's just add the
code that we're going to need for the
| | 08:52 |
audio and the plugin later as well.
It's relatively simple, it's just going to
| | 08:57 |
be audio, and same thing with audio
there's a rapper .mejs-audio.
| | 09:04 |
And the reason we're doing this is that we
want to hide the audio player entirely.
| | 09:09 |
And because for the iPad and the iPhone we
had to actually show the native controls,
| | 09:13 |
we want to kind of just throw this off
screen so it's not visible.
| | 09:18 |
because we really want the audio just play
as part of the screen.
| | 09:21 |
So we'll set the display to none.
The position will be absolute.
| | 09:27 |
And then we'll just say at the bottom it
has a margin of like negative 100%, so
| | 09:30 |
it'll just sit off the bottom.
And because we have overflow set to
| | 09:34 |
hidden, it won't cause any scrolling to
happen there or anything.
| | 09:38 |
And let's also just set the me plugin.
So this is a wrapper for the Flash player,
| | 09:45 |
so we'll set this position to absolute.
And the reason we're going to do that is
| | 09:51 |
on a browser like Firefox that would show
the plugin, by defaults it's part of the
| | 09:55 |
vertical flow of the document, and it
pushes the whole thing down and we end up
| | 09:58 |
with a white space at the top.
So by setting the position of absolute it
| | 10:03 |
doesn't become part of that stacking
order.
| | 10:05 |
It just kind of sits behind and doesn't
bother our display.
| | 10:08 |
So let's switch over to our html.
And take a look.
| | 10:15 |
There's the video, it's nice 'n centered
now.
| | 10:16 |
It's taking up as much space as it can
without destroying the aspect ratio.
| | 10:20 |
If I double click to go into full screen,
you can see it's taking up a full screen perfectly.
| | 10:25 |
And I'll just let it play for a little bit
so you can see.
| | 10:28 |
That's very nice, that's exactly what
we're looking for.
| | 10:31 |
So next we're going to actually work on
moving the slide forward, when the video completes.
| | 10:37 |
| | Collapse this transcript |
| Moving to the next slide when the video completes| 00:00 |
Now let's add autoplay capabilities to the
video.
| | 00:03 |
Not only when the video starts, but when
the video ends we want it to advance to
| | 00:06 |
the next slide.
So in the chapter four, 03 start folder.
| | 00:12 |
We're going to navigate to the js older,
and open pres.js in Dreamweaver.
| | 00:19 |
Let's add a variable after autoplay
slides.
| | 00:22 |
For autoPlayMedia, and we'll set that to
true.
| | 00:29 |
Let's also add a variable called
autoNextOnMediaEnd and we'll set that to
| | 00:34 |
true as well.
And then in order to have the video
| | 00:40 |
advance when it completes, let's add an
event listener to the media element itself.
| | 00:45 |
So where we created the success function.
Just going to go in here and tab a little
| | 00:50 |
bit to make it a little neater.
And say media element.
| | 00:54 |
This is the incoming argument.
And on that media element, I'm going to
| | 00:58 |
add an event listener.
The event I'm looking for is ended.
| | 01:03 |
That will get called when the media file
has finished playing.
| | 01:08 |
And I'm going to then call a function and
that function is going to have an argument
| | 01:12 |
of m.
That'll be a media player.
| | 01:17 |
And then I'm going to open that with a
curly brace, and say if.
| | 01:21 |
Auto Next.
media end.
| | 01:26 |
And of course I could have done that
before Media element.
| | 01:30 |
Probably would have been more efficient,
but this works pretty well too.
| | 01:33 |
This would allow me to dynamically change
this variable if I wanted to during the presentation.
| | 01:38 |
And so if auto next on media end is true,
we're just going to go to the next screen.
| | 01:43 |
And I'm going to end that line, and then
end the function with a curly brace, and
| | 01:48 |
end the call to the event listener with
apron, and a semi colon.
| | 01:54 |
Okay, so we've taken care of advancing
once the media is done.
| | 01:58 |
Now let's add the code to automatically
trigger the media when it starts.
| | 02:02 |
So let's scroll down.
going to go all the way to our goto
| | 02:07 |
function and I'm going to add this line at
the end of the inside there.
| | 02:13 |
And say if autoPlayMedia and then we're
just going to call function call playMedia.
| | 02:21 |
And let's create that function right now
just below the go to function.
| | 02:28 |
Say function playMedia and I close that
and just go back up in there and I create
| | 02:34 |
a variable called media element or
'mediaElem' for short.
| | 02:41 |
And set that equal to j query call up
section.active and then within that I'm
| | 02:47 |
going to call find and look for video.
And this is a slightly more verbose way to
| | 02:55 |
do this.
on any given day I'll do it one way, on
| | 02:58 |
another day, a different way.
kind of surprised when I look back at my
| | 03:02 |
code sometimes.
So, then we're going to say that if
| | 03:06 |
mediaElem has length, so if it's more than
0, because of course this jQuery call is
| | 03:11 |
going to return how ever many there are.
Well, in that case, add some braces there
| | 03:19 |
for my if call.
Then we're going to set mediaElem.
| | 03:25 |
We're just going to reuse that variable
because java script is pretty loose about
| | 03:28 |
it's typing.
It was a J query variable.
| | 03:31 |
Now we're just going to make it an HTML
element.
| | 03:33 |
So if this happens to come in and it's
basically an array.
| | 03:36 |
We're just going to take the first item in
the array and then we haven't done this
| | 03:40 |
yet in our presentation, but JavaScript is
pretty finicky about errors.
| | 03:46 |
So if you have an error in your
JavaScript, even if you just mistype
| | 03:50 |
something, your entire project can
basically fail.
| | 03:54 |
JavaScript is just that way, it kind of in
a linear fashion, if it hits an error it
| | 03:58 |
just stops executing.
So this one place, I don't do this everywhere.
| | 04:03 |
But working with the media elements can be
a little bit touchy.
| | 04:06 |
So I like to encapsulate this in a try
catch statement.
| | 04:10 |
And what that basically does is if you put
something in your try statement, it
| | 04:13 |
doesn't throw off that error that kills
your application.
| | 04:16 |
And if the thing in the try-statement does
happen to fail, then you can execute
| | 04:20 |
different code in your cache statement.
And sometimes that's just spitting out
| | 04:24 |
debug information for yourself as your
testing.
| | 04:27 |
So try is encapsulated with braces just
like conditional or a function.
| | 04:33 |
So try Mediaelem.player.play thats one
thing in working with the media element js
| | 04:39 |
library is that there's this media element
and there's also a player on that.
| | 04:47 |
In this case we're just going to call it
play on the player and close the try statement.
| | 04:52 |
Every try statement has to have a catch
statement.
| | 04:54 |
So we say catch and catch gets passed a
variable we're going to say e for the exception.
| | 04:59 |
And then I'm just going to put two braces
there just, we don't need to put anything there.
| | 05:03 |
So save that.
Let's just add one other function.
| | 05:06 |
It's going to be the counter part to the
play media, and that's going to be stop
| | 05:09 |
page media.
So this will stop any media on a given page.
| | 05:14 |
This is necessary because if somebody
wants to actually manually navigate, we
| | 05:18 |
want to stop whatever video is playing on
the slide they're leaving.
| | 05:23 |
Just so we don't have a bunch of videos
playing and overlapping, or sounds for the matter.
| | 05:27 |
So inside here, I'm going to call some J
query.
| | 05:30 |
Again, section active, and I say .find and
then for some reason I did all the videos
| | 05:39 |
this way.
And then we're going to say within that,
| | 05:44 |
again this sort of chaining together of
jquery and Javascript.
| | 05:48 |
So I'm going to call this each function
that gets past two arguments.
| | 05:53 |
But I don't need either of them in this
case, so I'm just going to leave them out,
| | 05:58 |
and I'm going to create my closing brace
and semicolon.
| | 06:04 |
And you see it's, when I've got it okay,
when I don't have it, okay.
| | 06:07 |
Dreamweaver's highlighting it for me.
And so once I get it right, that goes away.
| | 06:14 |
And so that's really nice.
So, inside of this each function, so
| | 06:17 |
basically what this is going to do is get
called on every single video.
| | 06:24 |
And on every single video that happens to
be on the active slide.
| | 06:30 |
So we're going to create a media variable
and we're going to do a little jquery here.
| | 06:36 |
And and we're just going to use this,
because that's going to be whatever the
| | 06:40 |
active element is getting passed to this
being iterated on in this each function.
| | 06:46 |
And again we want the element, so we're
just going to treat it like an array and
| | 06:49 |
get the first item there.
We're going to create a player variable,
| | 06:53 |
just like we did in the play media
function.
| | 06:56 |
And that's just media.player.
And then again, I'm going to use a try
| | 07:00 |
statement just to protect our application
from errors because we don't want it to
| | 07:03 |
just fail completely because of some
little thing.
| | 07:07 |
So we can say player.pause.
There's no real stop function, so we're
| | 07:10 |
going to use pause.
And then after we call that, here's where
| | 07:13 |
we're using both the player object and the
media object.
| | 07:16 |
We're going to use the media object to set
currentTime wqual to 0.
| | 07:22 |
And then we're going to close the try
statement, throw a catch on the end of it,
| | 07:25 |
and just make that empty with the curly
braces.
| | 07:30 |
And then let's add this stop media
function.
| | 07:32 |
I'm actually just going to copy this line.
And paste it at the beginning of the go-to
| | 07:38 |
function, so that gets called every time
you go to a new page.
| | 07:42 |
Before it sets a new active page, it'll
stop any media on the current active page.
| | 07:46 |
So let's test it and see how things are
looking right now.
| | 07:48 |
Open the index file in a browser.
And there the video starts playing.
| | 07:55 |
I'm just going to let it run and see what
happens when we get to the end of the
| | 07:58 |
video here.
And there we go to the next slide and it's
| | 08:03 |
auto playing.
And we'll let it go all the way around and
| | 08:07 |
see what happens when we get to the
beginning.
| | 08:10 |
Right back to the video and it's auto
playing, so exactly as we want.
| | 08:14 |
Now let's just tighten the code up a
little bit.
| | 08:16 |
This isn't something you're going to see
right now.
| | 08:18 |
But it would be if you changed something
later.
| | 08:22 |
So one thing that's happening is it's not
noticeable because I'm running the file
| | 08:25 |
locally, as you probably are.
But we're calling initSlides, sort of
| | 08:30 |
independently of what any of the media is
doing.
| | 08:32 |
So we put this on a server.
We might be calling initSlides before the
| | 08:36 |
video is loaded.
So let's go ahead and wait to call this.
| | 08:39 |
We know at least the media element is
ready.
| | 08:41 |
Doesn't mean that the video is the video
is preloaded or anything like that, but at
| | 08:43 |
least our code is ready to go.
I'm just going to cut that out.
| | 08:47 |
And I'm going to paste it in after this
event listener.
| | 08:55 |
But here's another thing you won't notice
just yet because we just have one video.
| | 09:00 |
But if we have multiple video, or audio
file, is going to call this a success function.
| | 09:05 |
So, we don't want this initializing the
slides over and over.
| | 09:09 |
So, let's add a little counter so that it
only initializes when all of the media
| | 09:13 |
files have been loaded.
So, I'm just going to put a comma after
| | 09:17 |
the variable declaration for timer and add
one called avTotal and then another comma.
| | 09:23 |
And I'm going to add avCount.
And inside the ready function, I'm just
| | 09:28 |
going to initialize those variables.
So, avTotal.
| | 09:32 |
I want it to mention the number of videos.
And by now you're probably pretty familiar
| | 09:37 |
with this syntax.
And I'll use JQuery to check the length of
| | 09:40 |
all the video tags.
So I'm going to use avCount to sort of
| | 09:44 |
iterate and count each video as we go
through, or it could be audio as well.
| | 09:50 |
And let's just add a line before the new
init slides call, and I'm going to say AV
| | 09:54 |
count plus plus.
So, every time we have a successful call
| | 09:59 |
here, we got another audio video count
loaded.
| | 10:05 |
And then right before in the same line as
init slides, want to say if avCount is
| | 10:10 |
equal to avTotal, then you can go ahead
and initialize the slides.
| | 10:16 |
You can test this by opening the index
file on your browser should still be
| | 10:19 |
working just fine.
Video is playing so it's clearly been initialized.
| | 10:23 |
And like I said, its not something you
going to see right now, but if you
| | 10:26 |
interchange something later It could cause
an issue.
| | 10:30 |
So, now you've got working video in your
presentation and the presentation is just
| | 10:33 |
rolling with a video, playing it when it
gets there and moving on when it's done.
| | 10:38 |
| | Collapse this transcript |
| Challenge: Self-running audio narration| 00:00 |
For this challenge, I'd like you to take
the placeholder.mp3 audio file and add it
| | 00:05 |
to the title slide just the way we did
with the mp4 file and the video.
| | 00:10 |
Then please try and implement the
auto-running or timed-narration in this
| | 00:14 |
case for slides with audio.
It's only going to be one slide in this
| | 00:18 |
case, but your implementation should take
into account the fact that you might have
| | 00:22 |
audio on multiple screens.
And here's the quick hint, the audio tag
| | 00:26 |
is very similar to the video tag.
This might be a little more complicated
| | 00:31 |
challenge, so take 15 minutes if you need
it, and then come back and check out the
| | 00:34 |
solution video.
| | 00:36 |
| | Collapse this transcript |
| Solution: Self-running audio narration| 00:00 |
As I mentioned in the challenge video, the
audio tag is very similar to the video tag.
| | 00:05 |
So if I were doing this, this is right
where I'd start.
| | 00:08 |
I'd use the W3 schools reference and
here's the video tag reference we were
| | 00:11 |
looking at earlier.
Alright, just come down and click on the
| | 00:15 |
audio tab and take a look.
And it looks like it's the exact same
| | 00:19 |
implementation as video, except the tag
just says audio.
| | 00:24 |
So I'll switch over to the finder here,
I'm in the chapter four folder,
| | 00:28 |
05_solution, under final and I'm just
going to open up the index file in Dream
| | 00:33 |
Weaver, and so I'm going to scroll down
and here is the title slide that I asked
| | 00:37 |
you to add the audio to.
And I've just added the audio tag at the
| | 00:44 |
end and here's the link to the
placeholder.
| | 00:48 |
See it's very similar to the video, I'm
going to go up here to the resources in
| | 00:52 |
Dreamweaver and jump over to the pres file
in the JS folder.
| | 00:57 |
And I gave you more time for this
challenge than the other ones but, I got
| | 01:00 |
to admit, it was a little bit of a trick
on my part.
| | 01:04 |
But a trick in the right direction because
it's actually a lot simpler than I may
| | 01:08 |
have led you to believe.Everywhere, where
we call video, we just want to make sure
| | 01:12 |
and also, call audio.
What I initially did when I was creating
| | 01:17 |
this file, and I'm saying this because it
might be a mistake that you encounter, and
| | 01:20 |
then test the file and wonder why it's not
working, but maybe you're smarter than me
| | 01:24 |
and you completely avoided this.
So what I typed into the find and replace
| | 01:31 |
field was dollar sign for Jquery and then,
you know, my video and in the replace
| | 01:35 |
area, I did the same thing but I said
audio comma video.
| | 01:42 |
Now, that made several replacements and
then I went to test and it didn't work and
| | 01:46 |
the reason it didn't work is because we're
not always calling them that way.
| | 01:51 |
And I'll go down and show you why because
sometimes we're specifically looking for
| | 01:56 |
something on the active screen.
So in the case of that Find and Replace, I
| | 02:00 |
was missing things like this, because this
was just video, but it was not prefaced
| | 02:05 |
with a dollar sign, it started with find.
Even if I'd coded this differently, it
| | 02:10 |
would have been here and it wouldn't have
had the dollar sign before it.
| | 02:13 |
So I'm just going to undo that change, so,
I didn't catch those items.
| | 02:18 |
So, that's basically the trick, is that if
you were going to do a find and replace,
| | 02:22 |
just make sure you don't have that dollar
sign before there and capture all those
| | 02:25 |
instances and once you have that done I'm
going to switch over and just open up the
| | 02:29 |
index file in the browser and the opening
video will play.
| | 02:35 |
(MUSIC) And when this is done, we're
going to skip to the next page and I'll
| | 02:40 |
have a short audio placeholder.
>> Placeholder.
| | 02:45 |
>> It's kind of creepy, and then it skips
to the next screen.
| | 02:48 |
So that works, and you can just imagine
from this, I'm going to stop it before it
| | 02:51 |
loops back around.
But, you can imagine from this, that you
| | 02:55 |
could have timed narration on every
screen, so you could just have a
| | 02:58 |
self-running presentation that's there
narrating itself with no presenter.
| | 03:02 |
So, it's pretty neat and because we've
built the code because we're using media
| | 03:06 |
elements, it's actually pretty easy to add
all that functionality.
| | 03:11 |
So, I hope you got a kick out of that
challenge.
| | 03:13 |
| | Collapse this transcript |
|
|
5. Finalizing the Self-Running Mobile PresentationAdding a "smart" pause with backward navigation| 00:00 |
We've got a lot of our big core features
already put into our presentation.
| | 00:04 |
I want to start cleaning things up, and
really get to the polish.
| | 00:07 |
So, let's start by adding kind of a smart
pause.
| | 00:10 |
So imagine this presentation is playing.
So lemme just go right into the Start folder.
| | 00:16 |
I'm in Chapter 5.0.1.
And I'm just going to open up the Index
| | 00:20 |
file in the browser and let's take a look
at how it is right now.
| | 00:24 |
And let me just jump through the media
just so you can see it.
| | 00:29 |
So if I hit the back arrow now, it just
keeps jumping forward and in fact it will
| | 00:33 |
kind of fight me in some cases.
And so, even if my slide show is
| | 00:38 |
self-running I might be talking to some
body and want to go back and sort of
| | 00:42 |
elaborate on one piece.
And so I want to add this kind of a smart
| | 00:47 |
pause feature so that if I jump backwards
it will sit on that screen that I have
| | 00:51 |
navigate to on that slide.
And wait there until I give it an
| | 00:56 |
indication that I want to jump back into
the slideshow.
| | 00:59 |
And we'll do that by, you know, whatever
triggers the next function.
| | 01:03 |
We'll just turn the slideshow right back
on.
| | 01:05 |
So, let's go into the JS folder.
I'm going to open up like a little Pres
| | 01:11 |
file in the code editor of your choice.
I'm using Dreamweaver.
| | 01:16 |
And let's add that Hey Wait a Minute
feature.
| | 01:19 |
So let's add this smart pause.
I'll scroll down and in the goto function,
| | 01:23 |
let's think about how this kind of thing
would operate.
| | 01:28 |
What kind of information are we going to
get, and maybe even I jumped a step.
| | 01:32 |
Maybe the first step is to think about
where this is going to go.
| | 01:35 |
For me, the reason my brain goes to the
goto function is because that's our
| | 01:38 |
centralized code, right.
Our initialization function, our back, and
| | 01:43 |
our next functions, are all calling to go
to.
| | 01:47 |
So, if I can put the code in one place,
and not have to write it over and over,
| | 01:50 |
that's a win.
It would be easier in a sense, if I were
| | 01:53 |
in the back function, because then I know
I am going backward and I can pause it there.
| | 01:59 |
But that might complicate our code a
little bit, and then when we have to wait
| | 02:02 |
for special cases.
What we can do instead is just add a
| | 02:06 |
variable underneath the stop media call,
in the goto function.
| | 02:11 |
And I'm just going to call this variable
foreward.
| | 02:14 |
So this is a handy part of reusing some of
the code we have.
| | 02:17 |
We essentially have two things that we're
keeping track of.
| | 02:20 |
And i'm purposefully adding this before
this loop check here, where we are within
| | 02:25 |
this we're setting the current slide to N
before we get there.
| | 02:31 |
N in the current slide could be two
different numbers, so lets check to see
| | 02:36 |
what their relationship is.
If n is greater than the current slide,
| | 02:42 |
well, then hey, we're moving forward.
So let's just add one more check.
| | 02:49 |
This is where our auto next gets called.
So let's add one more variable that needs
| | 02:53 |
to be tested in this if statement.
So after the double ampersand, I'm just
| | 02:57 |
going to put the forward variable in there
and may add another double ampersand to
| | 03:01 |
link it to the last condition.
And, let's save that.
| | 03:06 |
And let's go ahead and test the index
file.
| | 03:08 |
I'm going to go back to the finder and
just open index in the browser, and I'm
| | 03:12 |
just going to skip ahead a little bit past
that.
| | 03:15 |
And now I'm going to do the back arrow key
to navigate backward and there, I'm
| | 03:19 |
paused, perfect.
So if I click the Forward Arrow key, it
| | 03:23 |
goes right back into it.
Go back, Pause, Forward, (MUSIC) right
| | 03:29 |
back into the auto play.
So that's exactly what we're looking for.
| | 03:33 |
And that will give the presenter or the
person looking at the presentation a
| | 03:36 |
chance to control it a little bit.
But at the same time use the auto play
| | 03:40 |
functionality if they're not standing
there the whole time.
| | 03:44 |
Or if there are things that don't need to
be explained.
| | 03:46 |
I'm going to close that, and let's just go
back and let's polish up one more thing in
| | 03:50 |
the Javascript file.
And let's do this by way of example.
| | 03:55 |
I'm going to actually going to go back to
the finder.
| | 03:57 |
And also open the index file in
Dreamweaver.
| | 04:00 |
And just follow along on this.
You don't have to make this change.
| | 04:04 |
I'm going to comment out the first couple
sections.
| | 04:07 |
Because the first sections have media,
they're functioning in a certain way.
| | 04:10 |
Since we've added this functionality but
haven't tested it for a while, I'm
| | 04:13 |
going to comment these out and let's just
see how it's working if we don't start
| | 04:16 |
with media.
So I'm going to go all the way down until
| | 04:20 |
after the section with the iFrame in it.
So I'm going to save that and open that up
| | 04:24 |
in the browser.
And I've just exposed an error here.
| | 04:29 |
And again, it's one of those things.
You're working for a while and
| | 04:31 |
everything's good and then maybe you went
to change the presentation.
| | 04:34 |
Maybe a video isn't going to be the first
slide and suddenly it's not working.
| | 04:37 |
Now, if I were to swipe or click forward
there, it goes into working.
| | 04:41 |
And let's take a look at why that is.
So, since we've added this forward
| | 04:46 |
variable, when we initialize I'll scroll
up so you can see it.
| | 04:52 |
When we initialize, we are calling goto
zero.
| | 04:55 |
And I'm going to scroll up all the way to
the top now.
| | 04:58 |
And at the very beginning our current
slide is set to zero.
| | 05:01 |
So in effect, current slide, and the
number that gets passed to goto, they're
| | 05:05 |
exactly the same.
So, from the presentation standpoint it
| | 05:09 |
doesn't think it's moving forward.
So, let's just trick it.
| | 05:14 |
And this is also kind of a common thing.
going to set it to a number it wouldn't
| | 05:17 |
use before initialization.
Let's set it to negative one, which is
| | 05:21 |
actually less than zero.
So save that.
| | 05:24 |
Let's switch over to the Finder and I'm
going to open up the presentation in the
| | 05:28 |
browser here.
And it's still not working.
| | 05:31 |
Okay, what's the problem.
Let's go back and look at this.
| | 05:35 |
Well, it took out the media.
And the problem is here's where we're
| | 05:39 |
initializing our media.
This is the only place that initSlides
| | 05:43 |
gets called.
So if we don't have any media that
| | 05:46 |
successfully loaded by the media element,
then initSlides never gets called.
| | 05:52 |
So let's add one more ocndition here.
I'm going to go down to the bottom, so
| | 05:57 |
basically where we had our original init
slides call.
| | 06:01 |
And I'm going to add if av total, in other
words, if all the audio and video is equal
| | 06:05 |
to 0, then let's just go ahead and init
slides.
| | 06:10 |
So this one has cases where, you know,
it's really useful to, maybe even,
| | 06:13 |
temporarily, break or disable a part of
your presentation.
| | 06:17 |
And just make sure, that it still works.
Especially if you're creating it as
| | 06:20 |
template or something that's going to be
reused, which, as a developer I always try
| | 06:23 |
not to do things twice.
So, go back over to Chrome here and I'm
| | 06:26 |
just going to hit refresh.
And there it's working.
| | 06:29 |
And it's starting at the who am I slide
because I have those first ones commented out.
| | 06:34 |
But that's essentially what we're testing
right here.
| | 06:36 |
So now that that's good, let's go into the
index file and let's just make sure or.
| | 06:40 |
You didn't have to follow along with this,
but if you did, make sure you uncomment
| | 06:44 |
this before moving on.
So I'm going to save that.
| | 06:47 |
Now we have a stronger more polished
template that is less likely to break down
| | 06:51 |
when we re-use it.
| | 06:53 |
| | Collapse this transcript |
| Custom tweaks for iPad| 00:00 |
Okay.
We're getting to the forefront of the
| | 00:02 |
technology, at least that is available as
we are recording this course.
| | 00:07 |
So far, everything's has been very
responsive, and will play on several
| | 00:10 |
different browsers.
Now, is sort of a sample.
| | 00:14 |
I'm going to pick a device to target, and
we are going to start narrowing in and
| | 00:17 |
testing that particular device.
An in order to do that, I'm going to use a
| | 00:21 |
couple tools.
You can just watch them on screen, you
| | 00:24 |
don't necessarily have to install them
yourself.
| | 00:27 |
It's just going to make it faster for me
to test.
| | 00:29 |
And obviously if you're targeting a
different device, you're going to have to
| | 00:32 |
use a different test environment.
Right now, I'm going to shoot for the iPad.
| | 00:36 |
So, the idea is that we have this
presentation running on an iPad.
| | 00:39 |
It's a really cheap way for say a small
company to create a presentation for their
| | 00:43 |
booth instead of having a big video set
up.
| | 00:46 |
They could just bring their tablet and
stick a self-running presentation out for
| | 00:49 |
audience members, passersby to take a look
at.
| | 00:52 |
So, what I'm going to use to do this is,
first of all, in order to access the files
| | 00:56 |
through this simulator I'm going to use, I
have to have a local server.
| | 01:00 |
And at least it's faster than uploading
files to a remote server.
| | 01:04 |
So, I'm going to use Mamp, I'm on a Mac.
There is also a Windows tool called WAMP
| | 01:08 |
and you can download it for free from
mamp.info.
| | 01:11 |
And if you are looking for instructions on
how to install it, there is an installing
| | 01:15 |
and running WordPress MAMP course on
lynda.com.
| | 01:19 |
And you can see, if I scroll down you can
see the table of contents a lot of it is
| | 01:22 |
about Mamp specifically even though its a
WordPress course.
| | 01:27 |
So, you can certainly use this to give
yourself a head start and the other tool
| | 01:31 |
I'm going to use is a part of Xcode.
Xcode is the developer's tool for Mac.
| | 01:37 |
And if you have a Mac you can download it
for free.
| | 01:40 |
If you have a Window's machine you're out
of luck.
| | 01:43 |
And the iOS simulator comes as part of it.
It's a pretty good testing environment for
| | 01:48 |
iPhones and iPads.
But it's sort of tucked away.
| | 01:51 |
So, if you're looking for instructions,
take a look at this URL.
| | 01:55 |
There's some gibberish at the end, but you
can do a search for planet quirk and iOS
| | 01:59 |
simulator, and you'd get this link as the
first hit.
| | 02:03 |
So, that'll help you get there.
Here I have the iOS simulator, it's
| | 02:07 |
running the local server I have set up and
has access to my exercise files.
| | 02:13 |
And so, now we're just going to go about
trying to troubleshoot wonky iPad bugs.
| | 02:18 |
Cause we're trying to get to the iPad, and
like I said, this is cutting edge so not
| | 02:20 |
everything works perfectly.
So, one of the wonky bugs that I
| | 02:24 |
discovered in trying to put together to
files for this course, and it took me a
| | 02:27 |
couple hours to figure out, but you're
going to get it in like two minutes.
| | 02:32 |
So, I think that's a bargain.
Let me go to the files.
| | 02:35 |
I'm in the Chapter five folder.
O2, start, and I'm just going to go and
| | 02:40 |
open the index file in Dreamweaver.
And then, using the index file, I'm
| | 02:46 |
going to jump over to Styles, the CSS file
and go down into the bottom.
| | 02:51 |
And the bug that was giving me a headache
was, for the particular version of the
| | 02:55 |
IOS, the animation that we have built in.
One of the things we include, actually,
| | 02:59 |
I'll scroll up and I'll show it to you.
Is that we're setting the visibility as we
| | 03:06 |
do the transition and for this particular
version of the operating system, IOS, it
| | 03:10 |
just doesn't display anything.
So, I was sitting there for the longest
| | 03:14 |
time trying to figure out what wasn't
working and it was just this darn iPad bug.
| | 03:18 |
So, in order to target the iPad directly,
or as directly as I can, I'm going to just
| | 03:23 |
try to use a media query, and I'll say
media only screen and I'm going to say max
| | 03:28 |
device width.
And set that to 768, so that should not
| | 03:35 |
only hit iPads but smaller devices.
It should hit the iPhone as well.
| | 03:40 |
I'm going to close that, and then what I
want to do is just say normally section is
| | 03:44 |
set to visibility hidden, and I just
want to set it to visible.
| | 03:48 |
And I won't disturb anything we have, but
you know, I'm just going to make a note to
| | 03:52 |
myself in here as well that this is to fix
the iPad.
| | 03:56 |
So, I know why this is there.
And so, that effects that particular bug.
| | 04:01 |
And let's go in and just test it in the
simulator here.
| | 04:06 |
There's the video.
Okay, so one of the tricks with the iPad,
| | 04:08 |
we had to have the native iPad controls
turned on for the media element.
| | 04:14 |
So, here I have to manually click the
button in order to advance.
| | 04:18 |
This is a limitation of the iPad, and
we'll talk a, a little bit more about that
| | 04:21 |
in a second.
But you can't control audio and video
| | 04:24 |
programatically without the user clicking.
And they have to click for every single
| | 04:28 |
media element.
So, that's fine at the beginning with the
| | 04:31 |
video here, so I'm going to click to play
it and then of course you'll see what
| | 04:34 |
happens with the audio on the next slide.
(MUSIC) And a lack of centering in the
| | 04:42 |
videos, not the videos fault or the
programming here.
| | 04:53 |
It's just we don't have quite enough space
on the screen for the whole thing.
| | 04:57 |
But there's supposed to be a sound on the
screen and it's supposed to advance, you
| | 05:00 |
know, when that sound plays.
And again I spoke about that limitation.
| | 05:04 |
I'll mention a hack about that, which is,
if you want it to auto play, it only has
| | 05:08 |
to happen once.
And then if this thing is looping, it will
| | 05:11 |
go through and play fine.
So, let me see if I can do it with swipe.
| | 05:14 |
I'm going to try and swipe forward, and
then I'm going to swipe back.
| | 05:20 |
(MUSIC) Yeah, so there I got it.
Now, when it plays through, it will play
| | 05:23 |
both the video all the way through, and
it'll play the audio.
| | 05:27 |
(MUSIC) So, let's give it a second and
make sure that works.
| | 05:30 |
'Kay.
So, the next screen is going to have the
| | 05:36 |
audio and it should advance after that.
(SOUND) And there does.
| | 05:43 |
And let me just go back for a moment.
So, that's a bit of a hack for you if you
| | 05:45 |
need to have this self running.
That's a way to get around the limitation
| | 05:50 |
on the iPad here.
So, I'm noticing one other thing.
| | 05:53 |
I think this text is rather big.
I'm not sure my media query is taking effect.
| | 05:58 |
And so, I'm going to switch back to my
index file in the source code.
| | 06:02 |
And what I want to add is a viewport meta
tag.
| | 06:04 |
The viewport meta tag is specifically for
a mobile device and it's going to tell the
| | 06:08 |
device how to zoom.
For me, the device is trying to figure out
| | 06:12 |
how to display the content, and the device
is smaller than a computer screen, which
| | 06:16 |
many things are designed for.
So, it tries to zoom in and make it
| | 06:21 |
readable, and since our presentation is
responsive, we actually want to tell is,
| | 06:25 |
hey, don't zoom in.
We'll manage how things scale and reflow.
| | 06:30 |
So, we'll add the meta tag.
And it's just meta.
| | 06:33 |
And then the name is equal to viewport,
and the content, this is how we set what
| | 06:40 |
it does is equal to width dash divice
width.
| | 06:47 |
And comma initial dash scale is equal to
0.
| | 06:53 |
And actually, I noticed one mistake there
I made.
| | 06:55 |
Width needs to be equal to device dash
width.
| | 06:59 |
Okay, so I'm just going to save that.
So, once you add the viewport meta tag you
| | 07:03 |
might find that your text is bigger in
some cases and it needs to be scrolled.
| | 07:08 |
And the touch scrolling isn't working so
well.
| | 07:10 |
So, there's one other thing in testing I
found will help.
| | 07:13 |
I'm going to switch to the pres.js file
and in the swipe function here, I'm going
| | 07:19 |
to add another line before the actual
swipe object.
| | 07:24 |
And say allowPageScroll and set that to
vertical.
| | 07:30 |
And that will basically disable or pass
through the swipe so that it's easy to
| | 07:34 |
scroll vertically.
And the other thing I did when I was
| | 07:38 |
testing this is to make the swipe a little
more open, because in some cases the video
| | 07:43 |
might cover it up.
So, I added a comma video here and also .mejs-overlay.
| | 07:51 |
So, that that class actually will receive
these swipe events so in some cases I can
| | 07:54 |
swap on top of media.
Anyway.
| | 07:57 |
I found that useful.
One other things that's useful is to hide
| | 08:00 |
the address bar at the top of the
presentation in the iPad.
| | 08:03 |
So, you can do that with the meta tag.
I'm going to save this.
| | 08:07 |
Switch back to the source code of
index.html.
| | 08:09 |
And I'm going to add another meta tag.
This one is specific to Apple devices.
| | 08:13 |
That name is equal to
Apple-mobile-web-app-capable.
| | 08:22 |
So, apple, mobile, web, app, capable.
And content, just needs to be set to yes.
| | 08:31 |
And I'll show how that works on an iPad.
So, I'm going to show you, right now we
| | 08:36 |
have the address bar, and If we were to
add this to the home screen.
| | 08:41 |
And I'll just call it presentation, say
add.
| | 08:45 |
There's our presentation, and if I click
on it, there's the video playing.
| | 08:54 |
But you can see there's no address screen
at the top here.
| | 08:57 |
(MUSIC) So, basically playing full screen.
(SOUND).
| | 09:04 |
In that case, maybe when it's on our home
screen, that actually might be another
| | 09:08 |
hack that works right there.
I didn't realize it until I tested it in
| | 09:12 |
this particular scenario, but that may
allow our media to be controlled with JavaScript.
| | 09:17 |
So, check that out.
Especially if you're developing for the
| | 09:19 |
iPad, you want to have the self running
presentation.
| | 09:22 |
This will give you some clues along the
way, but like I said this is all new technology.
| | 09:26 |
Every device, every operating system has
different challenges, so it'll require a
| | 09:30 |
lot of back and forth like I've done in
this video.
| | 09:33 |
So, happy testing and good luck creating
your self-running presentation on a mobile device.
| | 09:38 |
| | Collapse this transcript |
|
|
6. Enabling Offline PlaybackUsing the application cache manifest| 00:00 |
Another feature that's of great use,
especially if you're targeting a mobile
| | 00:03 |
device, is the application cache.
When using an application cache the
| | 00:08 |
advantage comes after the users have
viewed the site for the first time.
| | 00:12 |
At that point, all of the assets are
stored locally, so if you're going to put
| | 00:16 |
your presentation on a mobile device, like
a tablet.
| | 00:20 |
Having the cache is extremely useful
because if you're carrying the tablet or
| | 00:23 |
phone around at a conference or on a sales
call.
| | 00:26 |
Somewhere where you're out in the field
and you don't have an internet connection,
| | 00:30 |
you can still access the presentation.
So here's the w3schools page on the
| | 00:35 |
application cache.
The support, how it works.
| | 00:39 |
I recommend taking a look at this.
The application cache is kind of a pain to
| | 00:42 |
generate, and it's kind of wonky and I'll
show you in the next video on testing it.
| | 00:47 |
Some point in the future, maybe by the
time this video is available, I'll have
| | 00:51 |
some kind of automatic tool or script
that'll help you generate this.
| | 00:55 |
And you can find it at the short link
ajar.pro/tools/appcache.
| | 01:01 |
And until then, we're going to generate it
manually.
| | 01:04 |
I've actually written it already because
it is a little wonky and it is just a lot
| | 01:07 |
of type.
I'll show you what it looks like and it's
| | 01:12 |
just this CACHE MANIFEST call all in caps.
The pound is a comma, and there's a time stamp.
| | 01:20 |
And when you change the time stamp, that's
what actually causes the browser to sort
| | 01:24 |
of re-cache.
So if you make a change you do have to
| | 01:26 |
change the time stamp at the top.
So this is just a list of all the assets
| | 01:30 |
that are used.
And it tells the browser what to store.
| | 01:33 |
So, to put this to use.
I'm going to go ahead and close this.
| | 01:37 |
Switch over to the Finder.
I'm in the chapter six folder of the
| | 01:40 |
exercise files, in 01.
And I'm going to go in the start folder
| | 01:44 |
and basically just drag a copy.
I'm holding the Alt key on the Mac.
| | 01:48 |
Or Option key, excuse me.
It's Alt on the PC.
| | 01:50 |
And the other thing I need to do is take
the index file and open it in my editor.
| | 01:57 |
And what I'm going to is, in the HTML tag,
I'm going to add a manifest attribute and
| | 02:01 |
I'm just going to type the name of the
manifest file.
| | 02:11 |
So it's pretty much as easy as that.
The trick is getting that proper list of
| | 02:14 |
files, and that's pretty touchy as you'll
see in the next video.
| | 02:18 |
And we'll also take a look at how you can
test it and make sure that your files are
| | 02:21 |
actually getting cashed.
| | 02:23 |
| | Collapse this transcript |
| Testing the application cache| 00:00 |
Let's take a quick look at how you can
test the cache manifest and make sure it's working.
| | 00:04 |
And when it's not working, let's see how
to fix it or at least debug it and get
| | 00:07 |
started fixing it.
So, I'm in the chapter six folder of the
| | 00:12 |
Exercise Files in 02 final.
And I'm just going to open up the index
| | 00:18 |
file in my web browser, which is Chrome in
this case.
| | 00:22 |
I'm just going to click to pause the video
and I'll show you where we'll find
| | 00:26 |
information about the app cache, the View,
and down to Developer and we'll say
| | 00:30 |
Developer's Tools.
This is the area we get to when we
| | 00:35 |
right-click and say Inspect Element.
And just want to make sure I'm in the
| | 00:39 |
resources tab.
And then, if it's twirled up, and twirled
| | 00:43 |
down and see if there's anything in the
application cache.
| | 00:46 |
And right now, it appear to be totally
empty.
| | 00:49 |
So this isn't the case with all browsers
but when you're testing in Chrome, if
| | 00:52 |
you're running your files locally, they
won't appear in the application cache.
| | 00:57 |
So, I'm going to close this.
And once again, as I mentioned in the
| | 01:00 |
previous chapter, there's a Lynda course
that I mentioned in that chapter about
| | 01:04 |
installing Mamp and here's where you can
download it.
| | 01:08 |
It's mamp.info and there's also Window's
version called Wamp and it just allows me
| | 01:13 |
to run a server locally.
So, I have that server pointing to my
| | 01:17 |
exercise files.
I'm in chapter six, I'm going to go into
| | 01:21 |
the 02.
There's the final folder.
| | 01:23 |
And before I run this I want to add a
mistake to the cache manifest and you can
| | 01:27 |
see what that looks like.
Because if you're generating the cache
| | 01:30 |
manifest by hand, there's a good chance
you'll run into some kind of mistake just
| | 01:33 |
because it is a lot of typing.
So I'm just going to open this into text editor.
| | 01:38 |
In this case, Dreamweaver.
And I'm going to go down and say maybe I
| | 01:41 |
forgot to put the js folder before my
prez.js file.
| | 01:46 |
So I'm going to save that and then I'm
going to go back to Chrome go into final
| | 01:49 |
and by default its going to load up that
index file that's kind of a web standard.
| | 01:55 |
And so I'm going to go to View > Developer
> Developer Tools.
| | 02:00 |
And, what's going on?
I, I'm running it from my local server now.
| | 02:04 |
I should have an application cache, right?
Well, let me look at the console.
| | 02:08 |
Ooh.
What's all this mess?
| | 02:09 |
Okay.
So, what the console is telling me is that
| | 02:12 |
there was an error.
It failed to fetch a resource.
| | 02:16 |
And its says this resource is supposed to
be in final/pres.js.
| | 02:19 |
It's because I forgot that js folder.
Or I simulated forgetting that folder anyway.
| | 02:25 |
But you can see, it downloads each of
these items and then when it gets to one
| | 02:28 |
that it kind find, it just fails.
It just gives up.
| | 02:32 |
There's no application cache at this
point.
| | 02:35 |
So, it's really finicky that way.
So, it's really important that you know
| | 02:37 |
how to get to the console.
And I'll just review and say we went to
| | 02:41 |
View > Developer > Developer Tools.
And the console tab up at the top.
| | 02:46 |
And so, I'm going to close this and I'm
going to go back into my cache manifest.
| | 02:52 |
And I'm just going to undo that mistake
that I added.
| | 02:55 |
I'm going to save it, switch back to
Chrome, and hit Refresh.
| | 02:59 |
And just click to pause the video.
I'm going to go back to View > Developer,
| | 03:05 |
and I'll go directly to the Javascript
console.
| | 03:08 |
And here, okay, I've got a lot of junk in
the console, but I don't have any red lines.
| | 03:13 |
So that's actually the good news.
Here, it's just logging that there are
| | 03:16 |
application cache events happening.
It's starting to download, it downloaded
| | 03:20 |
this file, blah, blah, blah.
Right.
| | 03:23 |
You know, I don't really care about that
if it's working, so let's take a look at
| | 03:25 |
the resources.
And now if it's not twirl open, twirl open
| | 03:29 |
the application cache and there, it
actually recognizes the name, manifest.appcache.
| | 03:36 |
And local host, that's my server and here
it says it's got everything cached.
| | 03:41 |
So, that's fantastic, that's exactly what
I wanted to do and this is how I tell that
| | 03:45 |
it is doing what I want it to do.
There's one other thing that you should
| | 03:49 |
know about when you're testing this on a
server or you're trying to implement it on
| | 03:52 |
a server.
And I'm going to switch back to the W3
| | 03:55 |
schools link and right here, this is the
important bit.
| | 03:58 |
I'm going to highlight it.
Correct MIME type.
| | 04:02 |
If you don't know what a mine type is, you
should contact your web host.
| | 04:05 |
The mime type is basically how your server
defines a resource that it's sending to
| | 04:09 |
the web browser.
So if your server isn't correctly defining
| | 04:13 |
the manifest file it's not going to get
loaded right into the browser.
| | 04:18 |
So if you run into some problem at that
level, and you don't know how to correct
| | 04:22 |
it, contact your web host.
So that's how you test and debug your
| | 04:26 |
cache manifest.
| | 04:28 |
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
So now we've come to next steps.
Well, ironically this entire course is
| | 00:04 |
kind of a next step.
So if you didn't see the first step, go
| | 00:07 |
back and check out the first HTML5 Project
on Creating a Responsive Presentation.
| | 00:12 |
At the end of that there are few next
steps that we didn't cover in this course.
| | 00:16 |
If those interest you, there are links to
pursue those.
| | 00:19 |
And if you have different next steps that
you want to check out, things you think of.
| | 00:23 |
Particular devices you want to target.
Specific functionality that you'd like to add.
| | 00:28 |
My suggestion is to go back into the
lynda.com library and do a search for what
| | 00:31 |
you're looking for.
So, I'm Justin Putney signing off and
| | 00:35 |
thanks for creating an advanced responsive
presentation with me.
| | 00:39 |
| | Collapse this transcript |
|
|
