IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I am Joe Lowery. I am so happy
you've joined me for HTML5 + UX:
| | 00:10 | Engaging Ecommerce.
| | 00:12 | First, I'll show you how to use the
coolest of the many new form elements in
| | 00:16 | HTML5, the range input type, to
filter catalog items interactively.
| | 00:23 | Next, we'll bring drag-and-drop into
play, so site visitors can pick their
| | 00:28 | favorite products quickly
and with a little flair.
| | 00:31 | Finally, I'll demonstrate how to
automatically store selected favorites for the
| | 00:36 | user via the cutting-edge
JavaScript method known as local storage.
| | 00:41 | As you go through the course keep in
mind that the ecommerce catalog is just
| | 00:46 | one example of how HTML5 can
greatly enhance your user's experience.
| | 00:51 | All right, let's get started.
| | Collapse this transcript |
| About the exercise files| 00:00 | I am very happy to announce that any
member of the lynda online training library--
| | 00:05 | whether premium, monthly, or annual--
has access to the exercise files used
| | 00:10 | throughout this title.
| | 00:12 | Naturally, the information in this
course is ultimately intended to be applied
| | 00:16 | to your own web pages.
| | 00:18 | However, you might find it helpful to
work with the supplied exercise files to
| | 00:22 | practice the steps safely and
without creating your own examples.
| | 00:26 | To begin using the files from the site,
download them, extract them, and then
| | 00:30 | store those files in a
convenient location, such as your desktop.
| | 00:34 | The Exercise Files folder is organized
by chapter, and chapters are broken down
| | 00:39 | into the various lessons that you'll see.
| | 00:42 | Within the lesson chapters there are a
series of files, typically HTML, CSS,
| | 00:46 | images, and so forth,
that make up the practice file.
| | 00:50 | For most lessons you'll also find a
folder named final, and that contains files
| | 00:56 | showing the completed lesson, which you
can open up and explore at your leisure.
| | 01:00 | You are free to either follow the whole
course chapter by chapter or jump in at any point.
| | 01:05 | If you'd rather not use the exercise
files, you can definitely follow along
| | 01:09 | with your own assets.
| | Collapse this transcript |
| Course requirements| 00:00 | To follow along with this course the
requirements are pretty straightforward.
| | 00:04 | From a tools perspective, you'll
just need a code editor and a number of
| | 00:08 | browsers for testing.
| | 00:09 | You can use whatever code editor you prefer.
| | 00:12 | I am going to be working with Aptana on the
Mac, a free editor for both Mac and Windows.
| | 00:18 | Most of our browser demonstrations and
testing will be using a pretty current
| | 00:22 | version of standards-based
browsers like Google Chrome.
| | 00:25 | As the focus in this course is on
some of the most recently released
| | 00:29 | technologies, I'll point out, or you
might run into a problem, working with
| | 00:34 | more recent browsers.
| | 00:36 | You probably shouldn't depend on the
techniques demonstrated if your client
| | 00:40 | needs to support legacy
browsers like Internet Explorer 6.
| | 00:43 | Well, that's it for tools.
| | 00:46 | From a knowledge perspective,
you should be pretty familiar with both HTML and
| | 00:50 | CSS, with a general understanding of JavaScript.
| | 00:54 | I'll walk through any advanced
JavaScript we use block by block, so you can
| | 00:58 | understand what's going on under the hood.
| | 01:01 | One last thing: the absolute best thing you
can bring to this course is your imagination.
| | 01:07 | Although I'll be going through all the
details of applying HTML5 technologies to
| | 01:11 | a specific project, you'll get the most
benefit if you keep your mind open for
| | 01:16 | other ways you can apply the
same lessons to your own work.
| | Collapse this transcript |
|
|
1. Understanding the ProjectExamining what we're going to build| 00:00 | Let's take a quick spin through the
complete project so you can get a full
| | 00:04 | picture of what's ahead.
| | 00:06 | If you are the type who likes to dive
right into the code and you have access
| | 00:10 | to the exercise files, you'll find the
completed project in the Chapter 1 01_01 folder.
| | 00:17 | Here we are, in the Roux Academy Store,
where I have six paintings for sale.
| | 00:23 | As you can see, they range in price
from $400 for the eye to $75 for graffiti.
| | 00:32 | One of the top considerations for any
user in any online store is obviously
| | 00:38 | price, but how to narrow down that price?
| | 00:41 | Well, over here on the
right we have a Price slider.
| | 00:47 | When I drag this slider to the left to
indicate a lower price, watch what happens.
| | 00:55 | Paintings that are more expensive, out of my
price range, are dimmed, like the eye and the rabbit there.
| | 01:02 | So as you can see, the Price slider
is very visual and it's very easy to
| | 01:06 | understand, which are key aspects
of an enhanced user experience.
| | 01:11 | Once the shopper has narrowed his or
her options, we want to make it easy for
| | 01:16 | them to note their favorites. As this big
text indicates here under the Favorites
| | 01:21 | heading, all the user has to do is
to drag their favorites to the right.
| | 01:26 | So let me scroll down just a
little bit so we see all of our paintings.
| | 01:30 | And let's say I'm kind of interested
in orange star here, so I'll place my
| | 01:34 | cursor over it and with the arrows
indicating there that I can drag something,
| | 01:39 | click and drag it over. When I move it
over into the target area, a plus sign
| | 01:43 | appears, and if I drop it,
it's listed under my Favorites.
| | 01:47 | Let's do that again with Graffiti, just
so you can see how the list is built up.
| | 01:51 | You'll notice that when I come into the
drop zone I get an indication that I've
| | 01:55 | entered that area by the change of the
background color, and I'll drop it, it
| | 02:00 | changes back, and now
Graffiti is on my list of favorites.
| | 02:04 | But what if they don't purchase right away?
| | 02:06 | We'll make it painless by automatically
saving their favorites so that the next
| | 02:11 | time they visit the site their
favorites will be waiting for them.
| | 02:14 | Let me simulate that experience by
closing the browser window and then I'm going
| | 02:21 | to open a new window and go to my
history, and if I scroll down now, you'll see
| | 02:28 | that the favorites are waiting for me.
| | 02:30 | Now that you've seen an overview of
what we're doing, you're ready to dive a
| | 02:34 | little deeper into how we're doing
it, with an explanation of the related
| | 02:38 | technologies in the next lesson.
| | Collapse this transcript |
| Exploring highlighted HTML5, CSS3, and JavaScript technologies| 00:00 | Before we get into actually building a
project, I want to take a few moments to
| | 00:04 | talk about each of the key
technologies we are using.
| | 00:07 | In all, we're going to be targeting
three different technologies: the range form
| | 00:12 | element, drag and drop, and localStorage.
| | 00:15 | Let's start with the form element range.
| | 00:18 | Here is the basic code for a range form element.
| | 00:23 | As you can see, it's an input tag where
the type is set to range. And there are
| | 00:29 | several other attributes
that you need to include.
| | 00:33 | Minimum is now set to 0 in our
example, maximum I have set at a 100, and
| | 00:39 | then value is set to 50.
| | 00:41 | Wherever you set the value is where the slider
handle will appear to be on the range control.
| | 00:48 | Now, there is also an
optional attribute called step.
| | 00:52 | Once you declared the step value,
your range control will move in those increments.
| | 00:57 | There is decent browser
support for the range form element.
| | 01:00 | Current versions of Chrome, Safari,
and Opera already supporting it, and soon
| | 01:05 | Internet Explorer 10.
| | 01:08 | The only major holdout is Firefox,
which currently displays just a text field
| | 01:14 | which the user can enter a
value into if they choose.
| | 01:17 | However, there is no interactive
slider that they can move back and forth.
| | 01:21 | One hopeful sign: I have noted in the
Firefox development circles that they do
| | 01:26 | seem to be working on this
feature for some time in the future.
| | 01:30 | If you are unsure of what browsers
are supported at what level, I heartily
| | 01:34 | recommend going to caniuse.com, and
once you are there, just search for range.
| | 01:41 | Let me show you what the range
input type looks like in Chrome.
| | 01:47 | As you can see, here is that same
code that we had: the range from 0 to 100
| | 01:54 | that starts off at 50.
| | 01:56 | Now, it's pretty obvious that there
is one big limitation to the current
| | 02:00 | specification and browser
implementation, and that is there is no associated
| | 02:06 | value field to indicate what
the slider is representing.
| | 02:10 | It is, however, relatively easy to
implement, as you'll see during our project, and
| | 02:14 | I do want to point out there is at
least one other ready-made option, which you
| | 02:18 | can find on the jquerytools.org site.
| | 02:22 | Next up, let's take a look at drag and drop.
| | 02:25 | Drag and drop has two different aspects
to it: one minor but critical one on the
| | 02:30 | HTML5 side and a much more robust
series of options with the JavaScript API.
| | 02:35 | On the HTML5 side all you need to do
is to put in draggable=true into any
| | 02:43 | object that you want to be able to drag.
| | 02:46 | With JavaScript there are seven
different events, covering everything
| | 02:50 | from dragstart to drop.
| | 02:53 | There is one key related object,
and that's the dataTransfer object.
| | 02:58 | This is used for, as the name implies,
transferring information from a dragged
| | 03:04 | object to a dropped one.
| | 03:06 | So you set the data transfer object
and the drag start event and then it's
| | 03:11 | read in the drop event.
| | 03:13 | The third technology used in
this project is localStorage.
| | 03:17 | localStorage is really very
straightforward to use, and it adds a state to
| | 03:22 | websites without delving
into server-side coding.
| | 03:26 | Unlike with cookies, which is another
way web developers have handled the state
| | 03:30 | issue, local storage is
handled through the browser cache.
| | 03:34 | Significantly, it also has a much
larger limit, as opposed to cookies.
| | 03:39 | It's basically a name/value pair
structure, and while there are ways around it--
| | 03:44 | primarily using JSON--you're
normally storing and retrieving strings.
| | 03:50 | There are essentially two simple
commands. First localStorage.setItem.
| | 03:54 | Here the first of the two arguments is
the name of the item to be stored and the
| | 04:00 | second is its value.
| | 04:02 | The second command, getItem, just uses
one argument, and that's of course the name
| | 04:07 | of the item you want to retrieve.
| | 04:09 | Browser support for local
storage is really rocking.
| | 04:12 | You can find all the details on
caniuse.com, under local storage.
| | 04:17 | As you can see, it's been supported for
quite some time, including all the way
| | 04:21 | back to Internet Explorer 8.
| | 04:23 | So those are the tools we get to play
with as we enhance the user experience
| | 04:28 | for an ecommerce catalog,
starting in the next chapter.
| | Collapse this transcript |
|
|
2. Filtering with SlidersIncluding range form elements| 00:00 | The first step towards enhancing the
user experience of our ecommerce catalog
| | 00:05 | is to add in a form element
new to HTML5, the range input type.
| | 00:10 | It's a very straightforward
tag with just a few attributes.
| | 00:14 | In this lesson I'll also
add in another form element,
| | 00:18 | a basic text input type, so we can
eventually display the actual range value
| | 00:23 | as the slider moves.
| | 00:25 | Finally, I'll show you a very cool CSS
property that you don't want to implement
| | 00:31 | to help with your slider stylings.
| | 00:33 | So here's what the page
looks like at this current stage.
| | 00:36 | You can see over on the right,
under the Price Slider area,
| | 00:40 | there is nothing there.
| | 00:41 | So now let's switch over to our code editor.
| | 00:44 | So I am going to scroll down to about
line 67 here, where I have a little handy
| | 00:50 | placeholder, insert range input type here.
| | 00:54 | Let's delete that, and now I'll put in my
code for the input tag, starting with input.
| | 01:01 | I'm going to enter an id that we'll
use later in our JavaScript routines, and
| | 01:06 | let's just call this slider.
| | 01:09 | Next, we'll enter in the type for this input
tag, and the type is going to be of course range.
| | 01:17 | We want to enter in a number
of different attributes now.
| | 01:20 | Let's put in our minimum first.
And I'm going to set the min to 50.
| | 01:26 | We don't want to make our artwork
too cheap. And we also made a maximum.
| | 01:30 | So max, and let's make
that 400 or too expensive.
| | 01:35 | This is a school after all.
| | 01:37 | Next, I'm going to put in an optional
argument, step, so we can change how the
| | 01:42 | range increments, and let's
put in a step value of 25.
| | 01:47 | Finally, we want to put in our
starting point, and that's handled through
| | 01:50 | the value attribute.
| | 01:51 | In some situations, as in the example
I gave in an earlier chapter, you might
| | 01:57 | want it to start right dead center,
but in this situation, since what we're
| | 02:01 | going to be doing is filtering out less
expensive items, we want to show all of
| | 02:05 | the items to start with.
| | 02:06 | So we're going to place this value
at its maximum, the upper limit, 400.
| | 02:10 | Okay, let's close off the input tag.
Now that's it for the slider, but as you saw
| | 02:17 | in the previous chapter, there is an
issue with the implementation of the slider
| | 02:21 | where there is no real way to
show what the range value is.
| | 02:26 | So let's put in another tag.
| | 02:29 | This will be a simple text field,
also an input tag, and this will have
| | 02:35 | an id=rangeValue.
| | 02:39 | That will again help us identify
it for JavaScript routines a little
| | 02:43 | further down the line.
| | 02:46 | Next we'll set the type and set that
to text. And I'm just going to put in a
| | 02:50 | minimum size, and we'll make it size=2.
And then let's close off the tag, and that's done.
| | 02:58 | So I'm going to save it. Let's head
back to the browser for a second,
| | 03:02 | refresh the page, and there is our basic
slider and the accompanying text field.
| | 03:07 | Let's bring in some styles to spice it up a bit.
| | 03:10 | I already have the styles created,
so all we need to do is to link them in.
| | 03:15 | I am going to move up to the head
section of the page, and we'll put this right
| | 03:20 | after our link to the main.css file.
So it's link href=, and we'll copy the path,
| | 03:31 | CSS main. As you can see, the code
hints begin to come up, so let's take
| | 03:35 | advantage of that and we're going to go
to range.css, and it's also going to be
| | 03:41 | rel=stylesheet and we'll use the
same media tags: screen and projection.
| | 03:52 | Okay, we close that tag, and I'll save the file.
| | 03:55 | Now let me open up that particular CSS
file, and you can see it has two rules in it:
| | 04:04 | one that targets the input with a
type of range and then the other one that
| | 04:09 | goes a little bit further. That's actually
targeting the thumb control that moves the sliders.
| | 04:15 | Now most of the properties that you see
here, from the second one in each entry
| | 04:20 | on down, are pretty normal, and there
is no reason to spend any time on them.
| | 04:24 | However, the very first entry in
both rules, -webkit-appearance, deserves a
| | 04:29 | little bit of explanation.
| | 04:31 | This property allows you to specify a
uniform look and feel for all your widgets.
| | 04:36 | However, because we want a custom
one, we actually need to set it to none.
| | 04:43 | So let's go over to the browser and take a look.
| | 04:46 | I'll refresh the page,
and there is our revised browser.
| | 04:49 | It's pretty, but if you move the
control, you see that pretty is all it is.
| | 04:57 | However, we've got all of our basic
elements in place to bring in the very first
| | 05:01 | piece of functionality.
| | Collapse this transcript |
| Modifying display interactively| 00:00 | As noted earlier, the basic range input
type is lacking any way of showing the
| | 00:05 | current value of that range control.
| | 00:07 | In the previous lesson, we added
a text field to hold the value.
| | 00:11 | In this lesson, we will bring in
some basic JavaScript to link the range
| | 00:15 | element to the text field.
| | 00:17 | Let's head over to the code editor, and
we want to scroll all the way down to
| | 00:21 | below the footer, where I'm going to
put in a basic script tag, so I'll make
| | 00:26 | an extra line after footer and close off
the tag, and Aptana gives me my closing tag.
| | 00:31 | Let me just open that up a little bit and
scroll down so you can see what's going on.
| | 00:37 | Now we're going to define the function
that I've called Print Value, that will
| | 00:42 | set up a couple of variables to get
the ID of the slider, as well as the one
| | 00:48 | from the text field. And once we have that,
we'll be able to set one value to the other.
| | 00:54 | So we start with a function and as I
said, I'm going to call this printValue.
| | 01:01 | And the first argument is sliderID, textbox.
| | 01:06 | Now, let's open up a curly brace,
and we'll set the first of our two variables, x,
| | 01:12 | so I'm going to set x =, and
here's a little JavaScript function,
| | 01:19 | document.getElementById. And the first
element we want to get is the text box.
| | 01:29 | Close that with a semicolon, and then
we set up our second variable, which I'll
| | 01:33 | use y. And again, we use document.
getElementById. And of course this time it's the slider ID.
| | 01:46 | Next, let's set the x value--that's the
value of the textbox--equal to the value
| | 01:53 | of y, which is the slider.
| | 01:55 | So we enter x.value = y.value.
| | 02:00 | Now, before we test this, I want to add
in one other JavaScript line within this
| | 02:05 | script tag, and that's a line of code
that will initialize the text field.
| | 02:11 | So for that, we'll use the
window.onload command and set that equal to a
| | 02:17 | function call, and the function we're
going to call is the one we just wrote,
| | 02:22 | printValue, and the arguments that we'll
pass it are the two IDs that we previously set.
| | 02:30 | The first is slider and
then the second is range value.
| | 02:37 | Finally, let's insert an onchange
event to the range control itself.
| | 02:41 | So let's go back up to line 67 and
I'm going to add an attribute right
| | 02:47 | towards the end here,
| | 02:49 | of onchange = and then we'll put in our
function name which is printValue, and
| | 02:57 | pass it in the two arguments.
| | 02:58 | The first argument is the ID slider
and the second argument is the ID for the
| | 03:06 | textbox, which is range value.
| | 03:08 | Let's save our page and then
head on over to the browser.
| | 03:13 | I'll click Refresh and there is the
initial value of 400, and now when I drag it,
| | 03:20 | I get the lower values in increments of 25.
| | 03:24 | Looking good. Of course in and of
itself, it's not where we want it to be, but
| | 03:29 | now we're ready to bring in the
necessary JavaScript functionality.
| | Collapse this transcript |
| Establishing JavaScript functions| 00:00 | Time to hook up our range input
type to the other elements on the page.
| | 00:04 | First, we'll use a little jQuery magic
to add data prices to our paintings, and
| | 00:10 | then we'll insert the necessary
JavaScript to filter the paintings by price.
| | 00:14 | So in my code editor, I'm going to
scroll down to the bottom and I'm going to
| | 00:19 | add another script tag here.
| | 00:21 | You could combine these if you want,
but I'm going to do this just to keep
| | 00:25 | everything a little distinct so it makes it
easy to track. And again make a little bit room.
| | 00:30 | Now this time, instead of putting in
the code by hand, I actually have a code
| | 00:35 | snippets file that's also found in
that same folder, called code snippets.js,
| | 00:41 | that I'm going to go to as a source.
And we're going to bring in first this
| | 00:46 | initial code block that you see up op.
| | 00:48 | Now, this is just a simple jQuery
declaration that uses a jQuery function to
| | 00:55 | attach data to an element at the DOM level.
| | 00:58 | As you can see, what we're doing here is,
for each of the paintings, which have an
| | 01:03 | ID of painting one through six,
| | 01:05 | we're adding in a sequential ID--
just to make it easy to work with--and
| | 01:10 | the individual prices.
| | 01:11 | So I'm just going to copy this code
block and go to index.htm inside my script
| | 01:18 | tag and paste it in.
| | 01:19 | Now that will set up the data prices
for all of the paintings. Next, we're
| | 01:24 | going to read them in.
| | 01:26 | Let's go back to my code snippets file,
and let's start by walking through
| | 01:31 | the code initially.
| | 01:33 | So after the document is ready,
I declare value on line 12 called the value, and
| | 01:39 | then we set up a simple function that
monitors the change event of the slider.
| | 01:46 | And anytime there is a change it gets
whatever the value is that's in the Range
| | 01:52 | Value text field and assigns it to our
variable, the value, and then it calls
| | 01:58 | another function called Filter
Items and passes the value variable.
| | 02:04 | The next code block, starting on line 20,
spells out what actually happens in the
| | 02:09 | function filter items.
| | 02:11 | So it takes one argument, which I've
called Price Criteria, and that's the same
| | 02:16 | value as the variable the value.
And once it has the price criteria, it
| | 02:21 | loops through each of the paintings
that are in the gallery and performs a
| | 02:26 | series of functions.
| | 02:27 | The key one, in line 24, is where it sets
the data that's in a particular item to
| | 02:35 | another variable called item data.
And now that we have that, we can examine
| | 02:40 | item data to see if the price that's in
item data is less than or equal to the
| | 02:46 | price criteria, which
you'll recall is the range value.
| | 02:50 | If it does, then we make sure that the
opacity is set to 1 and we also set
| | 02:54 | another property called matching to True.
| | 02:57 | If the price criteria is not less than
or equal to the item data price, then
| | 03:03 | we reduce the opacity to .5, dimming it
down, and set the itemData.matching to false.
| | 03:10 | Now the itemData.matching I didn't have
to include, but I wanted to show you how
| | 03:15 | you could also keep track of things
like this by adding in another property.
| | 03:20 | All right, let's copy and paste our code,
make sure it's inside the same script
| | 03:25 | tag, paste that in, save it, and now
let's head on over to the browser, refresh
| | 03:33 | the page, and I'll scroll down just a
little bit here so we can see how the
| | 03:38 | paintings are reacting when I drag the
slider. And there you can see that it is
| | 03:43 | in fact starting to reduce the price.
| | 03:45 | So when I'm at 200, both eye which is 400;
arrow, which is 250; and also rabbit, which is
| | 03:53 | 350; are more than the value I've specified
in the Price slider, and so they are dimmed.
| | 04:01 | If I bring it back up to 325, I can now
afford arrows at 250, but I still can't
| | 04:10 | afford rabbit or eye.
| | 04:12 | Awesome! Our users can now filter the items
in the store by price, just by moving the slide.
| | 04:20 | This technique could be applied to
any sort of range-based filtering, such
| | 04:25 | as the number of stars received,
number of rooms in the house, whatever you
| | 04:29 | can think of.
| | Collapse this transcript |
|
|
3. Dragging Items to CompareEstablishing drag-and-drop functionality| 00:00 | For such a high-level effect
like a drag-and-drop--what?
| | 00:04 | You mean I can actually drag pieces of
a web page a round and they do something?
| | 00:08 | For such an effect, drag-and-drop
is really pretty easy to implement.
| | 00:12 | And the first part on the HTML side is
what my dad lovingly called dirt simple.
| | 00:18 | So, let's go on over to our code editor.
| | 00:19 | And I'm going to scroll down to where we
have the elements that we want to drag,
| | 00:24 | the paintings that are in this
article tag with an id of gallery.
| | 00:29 | And there are six paintings in all,
| | 00:30 | each of them within a div, with an
id like painting1, painting2, and so forth.
| | 00:37 | So, to make these draggable, all we
need to do is to go into that div,
| | 00:43 | add a new attribute--draggable--
| | 00:46 | and set that equal to true. That's it.
| | 00:50 | So, I'm going to copy draggable=true
and then in each of the divs, paste it in.
| | 00:55 | Believe it or not, that's it.
| | 01:01 | There is nothing to demo at this point--
| | 01:03 | we will need to bring in some JavaScript first--
| | 01:05 | but our drag-and-drop functionality
is really good to go as far as the HTML
| | 01:11 | is concerned.
| | Collapse this transcript |
| Adding JavaScript events| 00:00 | In the previous lesson, we struggled
arduously with the HTML for drag and drop.
| | 00:06 | Okay, okay, there was only one attribute per div.
| | 00:09 | But now we're ready for the main event,
and that's bringing in the JavaScript
| | 00:13 | events that will interact
with our user's actions.
| | 00:17 | The first thing I'm going
to do is bring in some help.
| | 00:20 | When drag and drop was first introduced,
browser implementation was all over the map.
| | 00:25 | One developer, Guillaume Bort, took
it upon himself to level the playing field
| | 00:30 | with his native drag-and-drop
routines, which you can find on GitHub.
| | 00:36 | I often include his library because
it really helps browser compatibility.
| | 00:40 | So, lets head all over to our source code,
and I'm going to drop in this script include.
| | 00:47 | And this is located in the
_scripts, and it's called jquery.ndd, for
| | 00:57 | native drag and drop, .js.
| | 01:01 | Let's set the type=text/javascript
and then close off this tag.
| | 01:08 | Now, I'm going to link in another
script that I've already placed in _scripts
| | 01:14 | folder for this lesson.
| | 01:16 | So, let's add in another script tag,
and we'll set the src=_scripts/dragdrop.js.
| | 01:27 | Again, I'll set my
type=text/javascript and close the tag>.
| | 01:35 | Now, let's take a moment to look
at the two files that we included.
| | 01:40 | First, I'll take a real
cursory look at jquery.ndd.js.
| | 01:45 | As you look at the various functions
here, you can see that basically what
| | 01:50 | he's doing is making it easy for the
drag and drop to work across a number of
| | 01:56 | different browsers.
| | 01:57 | The first issue that's addressed,
starting on line 21, for WebKit browsers like
| | 02:02 | Safari or Google Chr1ome.
| | 02:05 | Next, he fixes the events
so they work across the board, and so on.
| | 02:09 | You can go through all of the
various functions that you see here
| | 02:13 | and really get a
behind-the-scenes look of how everything works.
| | 02:17 | On the other hand, you can just use the library.
| | 02:21 | Now, let's spend a little bit more time
working with the custom code that's in dragdrop.js.
| | 02:28 | Almost all the code that's located in
this file is used for binding a specific
| | 02:33 | drag-and-drop event to
one or more page elements.
| | 02:37 | It starts with the elements that we're dragging.
| | 02:40 | The first code block identifies the
painting class, which are all of our
| | 02:44 | paintings, as the element that we are
going to bind the dragstart event to.
| | 02:49 | Now, you'll notice also that as
part of that dragstart, on line 3, data
| | 02:54 | transfer is a set up.
| | 02:56 | And what it's transferring
is the ID of the element.
| | 02:59 | Now, I also have tossed in some
effects here so that the page will see more
| | 03:03 | lively when you start to drag something.
| | 03:05 | The headings will fade in fast.
| | 03:06 | And there is a Hover state.
| | 03:08 | And on hover, the images will fade out,
and then when you let go of them, fade in.
| | 03:15 | Next, we address the target area,
which is in a div called favorites.
| | 03:21 | Now, if we take a look at the HTML
page--and I'll scroll down to the side
| | 03:27 | section, past the paintings--
| | 03:28 | we'll see the div on line 74. And that's
where we have the heading of Favorites,
| | 03:36 | and the big Drag Favorites section.
| | 03:38 | Now, you'll also see in
unordered list with the ID of faves.
| | 03:42 | That's where the favorites will be listed.
| | 03:45 | Let's had back to dragdrop.js.
So, there are a number of events that are bound
| | 03:51 | to the favorites ID.
| | 03:54 | First, there's the dragover event.
| | 03:56 | When you drag the element over
the target, favorites, the background
| | 04:00 | color changes to a gray.
| | 04:02 | Now, you'll also see, in three
out of these four bindings, the
| | 04:07 | code evt.preventDefault.
| | 04:10 | This is a necessary call that needs to be
made for drag and drop to work properly.
| | 04:15 | Now, if you leave the background
color as shown starting on line 16, the
| | 04:20 | background color goes back to its original--
| | 04:22 | that purple color that you saw.
| | 04:24 | Now, although there is no
functionality added to the dragenter event, you
| | 04:29 | still need to have the preventDefault
function applied for everything to work smoothly.
| | 04:34 | Finally, there is the bind drop function.
| | 04:39 | This is where we transfer the
data that we previously got, the ID,
| | 04:44 | and bring that in to
what's going to become our list.
| | 04:47 | The rest of the code, from line 25 on down
to 31, basically builds up the list item.
| | 04:54 | And when it's done, it adds in a new LI tag
with the ID and whatever's inside of that.
| | 05:01 | After the item has been added to the
list, we change the background color
| | 05:05 | back to its purple and issue a final
command, stop propagation, in order to
| | 05:11 | close everything out.
| | 05:12 | Okay, we've linked this code to our page.
| | 05:15 | Let's go to index.htm, save those changes,
| | 05:19 | and now return to the browser. Refresh the page.
| | 05:22 | So, let me scroll down first, so we
can see all of our paintings and our
| | 05:26 | favorites drop zone there.
| | 05:28 | Let's say that I'm interested in patterns.
| | 05:30 | So, I'll go over, click it up,
drag it into the target area.
| | 05:35 | We saw the background color changed there.
| | 05:38 | You see the plus sign indicated on
the icon itself. That's being handled by
| | 05:43 | the operating system.
| | 05:44 | I'll drop it, and there is patterns $200,
the same price as listed on the main
| | 05:51 | gallery section. Looking good.
| | 05:53 | So, there's one favorite.
| | 05:55 | Now, let's pick up arrows and bring that in.
| | 05:58 | Again, the background color changes,
and when I drop it, the background color
| | 06:03 | reverts, and I have arrows at 250 listed here.
| | 06:06 | So, our drag and rop is
really a beauty to behold,
| | 06:09 | but right now its actions are only temporary.
| | 06:12 | Watch what happens if I refresh the page. Poof!
| | 06:16 | All of our favorites are gone,
which kind of defeats the idea of favorites.
| | 06:20 | So, in the next chapter, we'll
integrate another HTML5 technology to make it
| | 06:25 | all better.
| | Collapse this transcript |
|
|
4. Storing Wish List Items LocallySaving list items| 00:00 | Local storage, or web storage, is
another advanced technology under the HMTL5
| | 00:05 | umbrella that does a great job simply.
| | 00:08 | Let me show you how easy it is to
store items in the browser's local storage.
| | 00:14 | So, we have our index.htm file opened, but we
don't want to put the necessary code here.
| | 00:20 | We're going to instead move it to
dragdrop.js, since it is essentially dealing
| | 00:26 | with the dropped items that we're going to save.
| | 00:29 | So, the first thing I need to
do is to declare a variable,
| | 00:32 | and I'm going to put that
right at the top of the page.
| | 00:34 | So, I'll enter var, and I like to
name my variables starting off with the
| | 00:39 | article V. So, theFaves. And we're going to set
that equal to document.getElemantById('faves');.
| | 00:51 | Make sure to put that semicolon at the end.
| | 00:54 | Now, what is the element ID faves?
| | 00:56 | Let's go back to the HTML for just a sec.
| | 01:00 | I'll scroll down to where my faves are.
| | 01:04 | And here you see it's the ID in
the unordered list. All right,
| | 01:09 | let's had back to dragdrop.js,
and now I'm going to move down the page.
| | 01:15 | And this is part of the drop event.
| | 01:18 | So, after the item has been dropped,
we want to call a custom function,
| | 01:22 | and I'm going to put this call
to the custom function above the
| | 01:25 | evt.stopPropagation.
| | 01:27 | So, let's make a little error here
so we can see it clearly.
| | 01:31 | And I'm just going to call this
custom function saveFaves. All right!
| | 01:37 | Now, we'll enter our new
custom function below the binding.
| | 01:41 | And so I'll enter a function, give
it its custom name, put in a curly
| | 01:48 | brace pair, and then just the single line in
order for us to save the item to local storage.
| | 01:55 | So, we call localStorage.setItem and
that's a capital I. And then in parentheses
| | 02:05 | we have two arguments.
| | 02:07 | The first is the item name
that you're going to be saving.
| | 02:09 | And I'm going to be calling it favorites,
and then follow the argument with a comma.
| | 02:15 | And now what is it that we are
going to be saving into favorites?
| | 02:19 | Well, we're going to go back our
variable that we set up at the top of the page,
| | 02:24 | theFaves, and we're going
to pull in its inner HTML.
| | 02:29 | So, if you recall, theFaves was the unordered
list and its inner HTML are all the list items.
| | 02:36 | So, type in theFaves.innerHTML,
and make sure to put a semicolon at the end.
| | 02:45 | Now, with this code, we have
grabbed and stored whatever is in the
| | 02:48 | unordered list faves,
| | 02:50 | and we can do this without worrying,
because local storage has a much bigger
| | 02:54 | limit than cookies do: 5 megabytes.
| | 02:56 | So, let's save dragdrop.js,
and now we're ready for final step:
| | 03:02 | displaying the items from local storage.
| | 03:05 | And it's just as
straightforward at storing them.
| | Collapse this transcript |
| Retrieving list items| 00:00 | It's time for the final step of our project.
| | 00:03 | In the previous lesson, I showed you
how ridiculously easy it was to save
| | 00:07 | items in local storage.
| | 00:08 | In this lesson, we'll cover how to
retrieve and display them. Ao I have my
| | 00:13 | dragdrop.js file where we put in the
saveFaves routine last, and now let's bring
| | 00:19 | in the loadFaves routine.
| | 00:21 | So I'm going to put it at the tail end
of the JavaScript code block here, not in
| | 00:28 | any function, so it will run
automatically when the page loads.
| | 00:33 | So there is a call to loadFaves,
and now let's put in that code itself.
| | 00:39 | I'll make a little extra room there,
so we can see what's happening. So it's
| | 00:44 | function loadFaves curly brace pair.
| | 00:49 | Now the first thing we want to make
sure is that the function that we're trying
| | 00:53 | to load exists. So we'll use an if
statement, if (localStorage.get
| | 01:02 | item) and then another curly brace and
then another set of parentheses and quotes,
| | 01:08 | and we want to check to see if the
items favorites is the one that exists.
| | 01:14 | So if that exists--and let's put in
another curly brace pair here--then what we
| | 01:19 | want to do is get it and then assign
what we get to the inner HTML of the
| | 01:27 | unordered list, which we know
as the variable the faves.
| | 01:31 | So, it's theFaves.innerHTML =
localStorage.getItem, and in parentheses,
| | 01:42 | favorites, semicolon
at the end and save, and that's it.
| | 01:48 | Let's check our work in the browser.
| | 01:50 | I'll refresh the page. Now, let's scroll
down, and let's say this time we want the eye,
| | 01:59 | the $400, one of our favorites.
| | 02:01 | It shows up in our list.
And let's bring in rabbit as well.
| | 02:05 | Okay, so I'm going to just copy this
URL, and open up a new tab, paste it in, and
| | 02:15 | hit Refresh, and then when I scroll down,
there are my favorites. Well, congrats!
| | 02:22 | Your ecommerce catalog is now greatly
enhanced and totally engaging, with three
| | 02:28 | interwoven HTML5-related technologies.
| | 02:31 | I'm sure your users will
appreciate the upgrade to their experience.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Thanks for watching
HTML5 + UX: Engaging Ecommerce.
| | 00:05 | If you would like to dig deeper
into drag and drop, check out Bill
| | 00:09 | Weinman's course in the online training
library at lynda.com called Drag and Drop in Depth.
| | 00:15 | Thanks again and have a great day.
| | Collapse this transcript |
|
|
