2. Mapping the StoresSetting up the canvas| 00:00 | The first step in building our project is to
create the initial advertisement as a canvas element.
| | 00:07 | The reason it's a canvas element instead of
an image is so that we can later replace what's
| | 00:12 | displayed on the canvas programmatically.
| | 00:16 | Working with canvas can be a little tricky,
but in this course, I'm going to introduce
| | 00:20 | you to an excellent helper library that
greatly simplifies creating your canvas graphic.
| | 00:26 | First, let's set up the
necessary HTML for our canvas tag.
| | 00:31 | I have opened here the index.html file from
the Chapter 2/02_01 folder in my code editor.
| | 00:40 | Let's scroll down to around line 40,
where I have a little placeholder comment.
| | 00:46 | I'll remove that comment
and then add in my canvas tag.
| | 00:51 | I'll give it an ID of myCanvas and then
specify a width of 200 and a height also of 200.
| | 01:05 | Then I'll close off the tag,
and that's all we need.
| | 01:09 | The way canvas works, the tag
basically just reserves the space.
| | 01:14 | That's why the width and
height attributes are here.
| | 01:17 | JavaScript is used to do the
actual drawing on the blank canvas.
| | 01:22 | The JavaScript syntax for canvas is not the
easiest to work with, so I want to bring in
| | 01:27 | a plug in called jCanvas, developed by a gentleman
named Caleb Evans that makes it easy to work
| | 01:33 | with Canvas in a jQuery environment.
| | 01:36 | You can find out more about jCanvas,
including full documentation at the URL below.
| | 01:43 | I've already downloaded a
copy, and now let's link to it.
| | 01:47 | I'm going to scroll up to the body section,
and I'll put the script tag after my existing
| | 01:53 | script tags, one for jQuery, one the
easing library, and one for modernizr.
| | 02:00 | So let's open up our script tag, set the type
equal to text/javascript, and our source
| | 02:10 | is going to be equal to scripts, and
within my script folder I have jcanvas.min.js.
| | 02:17 | All right, let's close the tag, and now
we're ready to do some drawing with JavaScript.
| | 02:25 | In this case, we're just
going to draw some text.
| | 02:29 | So I'm going to put my new
script tag after the CSS link.
| | 02:34 | Again, we'll set the type to text/javascript,
and I want to make a little bit of room here
| | 02:40 | within my script, so I'll just open up some
space, and now we'll put in the jQuery document
| | 02:47 | ready function which starts off with a dollar
sign and then in parenthesis the word document,
| | 02:54 | followed by .ready and an open paren
and the word function and another set of parentheses.
| | 03:02 | Then I'll move my cursor after the set of
parenthesis that follows function but before
| | 03:07 | the closing parenthesis and
put an opening curly brace.
| | 03:13 | Aptana automatically puts the closing curly
brace in for me, so I can just hit Return to
| | 03:18 | open that up and put in some code.
| | 03:20 | So now we can identify the canvas that
we're going to draw our text on, and that's done
| | 03:25 | with a dollar sign, parenthesis, quotes,
and we want to target our canvas, which as
| | 03:32 | you'll recall we set up with an ID of myCanvas.
| | 03:36 | So put in the hash sign, myCanvas, and
after the closing parenthesis, dot, and then our
| | 03:44 | jCanvas function which is draw text, open
that up with a set of parentheses and curly
| | 03:52 | braces, again hit return so that
we can enter in our Array elements.
| | 03:58 | The first one is layer: true.
| | 04:03 | One of the things that you always have to
do in a standard JavaScript implementation
| | 04:07 | of canvas is remember to draw layers.
| | 04:11 | One of the nice things about jCanvas is
if you're just throwing a single layer,
| | 04:16 | which you often are, you can just use the
attribute of layer: true in order to set that up.
| | 04:22 | So I'll add a comma and then next we'll set
the fill style and the fillStyle is actually
| | 04:28 | the color, and we'll set that in quotes and
just use our hexadecimal value of 36c, that's
| | 04:37 | that kind of bright blue that you saw.
| | 04:40 | We'll put a comma and then specify
the font and put the string in quotes.
| | 04:48 | Here we are going to specify number of
font properties including its style, bold,
| | 04:53 | its size, which I'll set at 32 points--
not pixels but points.
| | 04:59 | That's one of the advantages of working with
canvas is that you can use measurement units
| | 05:04 | that are more native to
drawing applications like points.
| | 05:09 | I'm also going to specify the font we want, which
is Trebuchet, and after that item, one more comma.
| | 05:17 | Next, let's specify exactly what we
want the text to say on our canvas.
| | 05:21 | So I'll enter in text colon and then
in quotes "Get Special Offer Here".
| | 05:29 | All right, we'll put a comma.
| | 05:32 | Now we need to declare where
we want our text to be drawn.
| | 05:35 | When you're drawing text with canvas, you
specify the center point for the text to start from.
| | 05:41 | Because our canvas is 200x200, the X and Y
coordinates for the center point are going to be 100x100.
| | 05:51 | So I'll enter x: 100, and I can just keep this
on the same line, y: 100, enter another comma.
| | 06:01 | Now, next I'm going to enter in a name for our layer,
and this falls under the category of best practices.
| | 06:08 | Sometimes you may need to target a
specific layer and act upon it with JavaScript.
| | 06:14 | In order to do that, it's easiest
if you have a name for the layer.
| | 06:18 | So I'm going to name this one startLayer, one more
comma, and let's enter in a maxWidth value of 200.
| | 06:29 | The maxWidth property is
needed so that your text will wrap.
| | 06:33 | Okay, we just need to put in a few closing
, one on line 21 and one on line 22.
| | 06:40 | So, let's save our page and then let's go
take a look at what we have in the browser.
| | 06:48 | Not bad, very clean, very simple.
| | 06:51 | With the initial canvas element done, you're ready
to move on to the back of the card, that's the form, next.
| | Collapse this transcript |
| Using the CSS3 range form element| 00:00 | Form elements have been greatly enhanced
under HTML5, and one of the coolest and I think
| | 00:06 | most useful of them is the new range input type
which converts a boring text field into a dynamic slider.
| | 00:14 | In this lesson, we'll insert the necessary
HTML and JavaScript for our project's complete
| | 00:20 | form, including a range input.
| | 00:23 | So I have the index.html file from Chapter 2/02_02 folder
of my exercise files open in my code editor now.
| | 00:33 | Let's tackle the HTML first.
| | 00:35 | I'm going to place my form right below the
first paragraph of text that appears in the
| | 00:40 | aside tag on the right side of the page.
| | 00:43 | So, I'm going to scroll down to around line
58 where that text is, Tell us just a little
| | 00:50 | about yourself, and let's
start building our form.
| | 00:54 | So, I'll put in the opening form tag, and
I want to give this an ID, and we'll make
| | 01:00 | that ID, personalData, okay, and because
forms often rely on the name attribute, I'll enter
| | 01:09 | in the name attribute
and give it the same value.
| | 01:16 | Let's set the method to post, and we'll set
the action to an empty value because we'll
| | 01:23 | handle all of that processing ourselves.
| | 01:25 | Okay, I'll close the opening form tag,
and Aptana puts in the closing tag for me.
| | 01:30 | So I'll hit Return a couple of
times just to make some room.
| | 01:33 | Now each of my form elements is going to
be on its own paragraph line, so let's start
| | 01:39 | off with a p tag, and again I'll open that up,
and the first form element I'm going to
| | 01:45 | put in is a radio button group.
| | 01:47 | I'll be using the label tag for these, so
we'll wrap it in a label tag and again make
| | 01:54 | a little space for it, because I want my
label to appear after the radio button, so after
| | 02:00 | we've opened the label tag, I'll put in the
input, and then I'm going to make the name
| | 02:06 | of this equal to gender, and both the
buttons in this group will have the same name.
| | 02:14 | Now, let's set the type of the input
tag, and we'll set that equal to radio.
| | 02:20 | Now, I'm going to give it a specific
ID, and this ID will be gender_0.
| | 02:29 | The value will be equal to male and since
I'm mostly anticipating a male audience,
| | 02:36 | I'm going to make this the default
value by entering the checked attribute.
| | 02:41 | Okay, let's close off my input tag, and
now I'll enter in the label that I'm going
| | 02:47 | to use, and that is Male.
Okay, that line is done.
| | 02:52 | Now, to make things a little simpler, I can
just copy these three lines and then paste
| | 02:59 | it still within my paragraph tag, and we'll
change the ID from gender_0 to gender_1, the
| | 03:08 | value from male to female, remove the checked attribute,
and then of course change the label from Male to Female.
| | 03:18 | Okay, so our first line is done. Let's go
on and create our start of our second line.
| | 03:23 | Again, we'll open with our paragraph tag,
make a little room, and this is where the range
| | 03:30 | type input would go, but we want our label
to appear first, so I'll start off with a
| | 03:35 | label tag, and because we're not wrapping
around the element, I'll use the for attribute,
| | 03:42 | and set that to the ID of the range
input type which is going to be age.
| | 03:47 | Now, let's close off that opening label tag and
then enter in the actual label itself which is Age.
| | 03:54 | Now we are going to go to the end of the
line just for readability's sake, and now we are
| | 04:00 | ready to put in the actual input tag, so
it's input type="range", and as I said I want
| | 04:09 | to give this an ID and name of age, so
we'll put in the name attribute, call it age and
| | 04:18 | then the ID attribute, also call it age.
| | 04:22 | There are some special elements for the range
input type, one of them is the minimum value
| | 04:27 | that you want, and for that we'd use the min
attribute, so I'll enter min and set that
| | 04:34 | equal to 18, our minimum age.
| | 04:38 | Now let's also set an upper end,
and we'll set the maximum equal to 98.
| | 04:44 | I also get to choose where I'd like the
slider to appear, and I'm going to choose a value
| | 04:51 | that appears around in the middle of
my slider, so we'll enter in Value="60".
| | 04:58 | Now the final element for the
input tag here is the onchange event.
| | 05:04 | So, we'll enter in onchange, and I'm going
to set this to a JavaScript function that
| | 05:10 | we'll enter in, in a bit, and that custom
function is called printValue, let's put in
| | 05:16 | an open and close parentheses, and
within it, we'll pass two arguments.
| | 05:22 | First is the name of the input tag that we're
pulling the value from, and that is our slider
| | 05:29 | which is age, follow that with a comma and
the second argument, also a string is the
| | 05:37 | name of the text field that we want to bring
that into, and that's going to be rangeValue.
| | 05:44 | Okay, we're ready to close out our input tag.
| | 05:49 | Now we also want to put on the same line, the text
field that will display the number from the slider.
| | 05:56 | So, I'll hit enter to create a new line, but
I'm still within my paragraph tags and enter
| | 06:02 | in an input tag with an ID equal to
rangeValue and a type equal to text.
| | 06:11 | And that's all I need for
that, so let's close that tag.
| | 06:14 | And we're ready to enter in our final
paragraph line, I'm going to scroll down a bit here,
| | 06:20 | and we'll put that after the closing
paragraph tag, so there's our third and final p tag,
| | 06:27 | but I want to give this a specific ID because
I'll be using that for CSS purposes, and I'm
| | 06:32 | going to call this buttonLine, and all that's on
here is another input tag with a type of button.
| | 06:44 | So we'll enter in a name.
| | 06:48 | Now we also want to give it an ID equal to
theButton also and the text that will appear
| | 06:56 | on the button is the value, so we'll
set that value to Get My Special Offer.
| | 07:03 | Okay, let's close the tag and get rid of
this extra little line that's crept in here.
| | 07:10 | Good, our form's all done now.
| | 07:13 | Next, let's bring in the JavaScript function
that we referenced in the range form element.
| | 07:18 | I'm going to scroll up to the head of the
document and create a new line just after
| | 07:26 | the close of the document ready function.
This is still within the script tag.
| | 07:33 | So, I'm going to put in a little comment here
just so I'll remember what it's for, and this
| | 07:38 | is to update the text field for the slider.
| | 07:42 | Now let's create our function, enter in the
keyword function, use our custom name which
| | 07:48 | is printValue, with open and closed
paren, and then the name for our attributes.
| | 07:55 | First one is the sliderID and
then whatever the textbox's ID.
| | 08:00 | Now, let's do curly brace pair and within
that we'll declare two variables, the first is X,
| | 08:08 | and I'm going to set that to whatever the
textbox object is, so "document.getElementById(textbox),
| | 08:25 | close off the line with a semicolon.
| | 08:27 | And now var y = almost the same thing, document
.getElementById, but instead of textbox, sliderID.
| | 08:41 | Now, once we have those two, we're going to set
the value of one equal to the value of another.
| | 08:48 | So, x.value that's the text field is going
to be equal to whatever the value of Y is,
| | 08:54 | which is the sliderID.
| | 08:55 | Now, you recall that we set this up to trigger
on change, so anytime that the slider is moved,
| | 09:03 | this function will be triggered and the text
field will update, that's fine, but we also
| | 09:09 | have to take care of when the page loads.
| | 09:11 | So I'm going to put in a window.onload function,
and we'll set that equal to function, open
| | 09:21 | and close parenthesis without arguments,
followed by curly brace pair, and within that we'll
| | 09:26 | call our printValue function, with the
arguments age in single quotes followed by a comma
| | 09:34 | and then also in single
quotes, rangeValue, all right.
| | 09:39 | We'll close everything off with a semicolon.
We're far enough along to try out our work.
| | 09:45 | So I'm going to save the file, and then we'll
open it up in Chrome, so I'll scroll down here,
| | 09:51 | so you can see my form, over on the
right-hand side where I had placed it, there's
| | 09:57 | our radio button group working well, but
more importantly, the range input, AKA
| | 10:03 | the slider control, if I drag the slider, it works perfectly
and my text field is updating smoothly, excellent!
| | 10:11 | Well, that's all well and good in Chrome,
sliders also work well in Internet Explorer,
| | 10:17 | Safari, and Opera, but what about Firefox?
Let's go take a look.
| | 10:23 | So, there's my radio group, but ouch!
| | 10:27 | That text field is less than
inspiring, it's actually pretty confusing.
| | 10:32 | Now there are two text fields with
the default value of 60 inside them.
| | 10:38 | If I change one, let's say I change this to
45, press Tab, the text field is updated so
| | 10:47 | that works, but it's a
pretty lousy user experience.
| | 10:50 | Luckily, while we're waiting for the
Firefox team to correct this oversight,
| | 10:56 | there's a developer named Frank Yan who has come
to the rescue with a Javascript helper file.
| | 11:02 | You can find out more about his work and
download the current implementation of html5slider.js
| | 11:09 | from the GitHub URL below.
| | 11:11 | Now I've already downloaded my copy
and placed it in my scripts folder,
| | 11:16 | so all I need to do is to
link to it with a script tag.
| | 11:19 | I'm going to put that code right
after the script tag that calls jCanvas.
| | 11:29 | So we'll enter in a script tag, set the type
to text/javascript and the source, src equal
| | 11:42 | to scripts/html5slider.js,
we'll close the script tag.
| | 11:46 | Now, with that done, let's save the page again
and back to Firefox, let me refresh the page,
| | 11:55 | and there's our slider,
excellent! Let's try it out.
| | 12:01 | Okay, our slider now works as expected
in the full slate of modern browsers.
| | 12:07 | The form portion of our
project is now complete.
| | Collapse this transcript |
| Building a flip card transition| 00:00 | Ready for a little card flipping?
| | 00:02 | In this lesson, we'll add the necessary CSS
to transform our canvas text, so we can display
| | 00:08 | our form by rotating along the Y axis in a
smooth transition, and then we'll code the
| | 00:14 | JavaScript to trigger that transformation
when the user's mouse hovers over the area.
| | 00:20 | I've already written out all the CSS.
| | 00:22 | It's not much, but frankly because we want it to be as
browser-compatible as possible, it's pretty repetitive.
| | 00:29 | So I'll now link to that file and then
walk you through the various declarations.
| | 00:35 | I'm going to link to the
transitions.css file in my styles folder.
| | 00:40 | So I'll put this right after the link to main.css,
and again, let's add another link tag, and
| | 00:46 | we'll set the href equal to styles,
and there you can see transitions.css,
| | 00:54 | and we'll set the rel value equal to
stylesheet and type="text/css".
| | 01:01 | Okay, let's close that tag.
| | 01:05 | I'll save the page, and now
let's take a look at transitions.css.
| | 01:10 | The first four css rules here are all for
positioning, so we can just skip over those.
| | 01:16 | I'm going to scroll down to around line 28, where the
far more interesting CSS3 transition code really begins.
| | 01:26 | The first rule on this group sets up the perspective
property of the outer wrapper around the card.
| | 01:33 | This is necessary to transform
elements in 3D space.
| | 01:37 | The actual perspective value we pass in, 800
is kind of a safe mid range that won't distort
| | 01:43 | the imagery in any unwanted manner at all.
| | 01:46 | Next, starting on line 36, we declare the
transition property with a transform value.
| | 01:53 | This makes it possible to perform the actual
transformation that we'll define in the next CSS rule.
| | 02:00 | In this current rule, we target the
div containing the ad and the form.
| | 02:05 | And the transition is set to take place over
one second, that's the 1s value that you see
| | 02:11 | at the end of each of
declarations of the transition property.
| | 02:16 | The second declaration in this rule, the transform-
style defines that property to preserve the 3D space.
| | 02:24 | Again, this is a necessary declaration to maintain
the thee-dimensional illusion. Let's scroll down.
| | 02:30 | The next rule, which starts on line 48,
declares the actual transformation rotateY.
| | 02:37 | As you can see, the rotation value is -180 degrees,
which emulates flipping a card back and forth.
| | 02:46 | The final rule ensures that the two
sides of the card are completely opaque.
| | 02:51 | Without declaring the backface visibility-
property is hidden, the ad text on the front of the
| | 02:56 | card would show through when the form was
displayed, actually in reverse, which is kind
| | 03:02 | of cool, but not what we want.
| | 03:04 | Okay, that's all we need on the CSS side.
| | 03:07 | Let's implement the JavaScript
necessary to trigger our card flip.
| | 03:11 | So I'll go back to index.html, and we're
going to use jQuery syntax to simplify our coding.
| | 03:19 | So let's put this code right at the
top of our document ready function.
| | 03:23 | So we want to watch for a hover event,
and we want to watch a particular area.
| | 03:30 | So I'll enter in a dollar sign and then
open and close parentheses, single quotes,
| | 03:35 | and we're going to target the class of cardGroup.flip,
cardGroup is the outer container and the flip
| | 03:43 | class indicates the elements to be flipped,
and then after the parentheses .hover, there's
| | 03:50 | our event, I'll open up a set of parentheses
here and then put in function, my parentheses,
| | 03:58 | and open and close curly brace, and within
that, we're going to use the jQuery function
| | 04:05 | ad class in order to
insert a class called the flip.
| | 04:09 | So I'll enter in my selector, and we're going
to reference the current selector by putting
| | 04:14 | in a this keyword followed by dot, and then
within that we're going to look for using
| | 04:22 | the find function, a class of card.
Once we find that, we'll add the class theFlip.
| | 04:32 | The way the hover function works in jQuery
is you can define two functions, one will
| | 04:38 | take effect when you hover over a particular
selector and then the second one will take
| | 04:45 | effect when you hover out of that selector.
| | 04:47 | So let's add a comma and then function, open
and closed parentheses, open and closed curly
| | 04:56 | brace, and it's basically the same as we
have above, $(this).find, again in single quotes
| | 05:04 | .card for our class, and this time,
instead of adding the class, we're going to remove
| | 05:10 | the class, and that will cause
with our CSS, the card to flip back.
| | 05:18 | Let me put a closing semicolon
here after that last parentheses.
| | 05:24 | Let's save our page and see what happens.
| | 05:26 | So I am going to refresh the page to get the
most current view, and you can see our form
| | 05:32 | disappeared, and now let's hover over the
card, and we have our flip, and I move out,
| | 05:38 | and it flips back, looking pretty good.
| | 05:41 | The card flips one way when the user hovers over the page
section and the other way when the user moves away.
| | 05:47 | It's exactly what we were looking for.
| | 05:49 | So this is just one of the many possible variations
available to you with CSS3 transitions and transforms.
| | 05:57 | Feel free to experiment and
try them out on your own.
| | Collapse this transcript |
|
|
3. Saving and Retrieving CustomizationsSaving to local storage| 00:00 | Now it's time to bring
localStorage onto the stage.
| | 00:04 | As noted in an earlier chapter, localStorage
is an easy-to-use HTML5 feature that allows
| | 00:10 | browsers to preserve the state of variables--in
essence their values--from one web page to another.
| | 00:16 | Until HTML5, the alternative was either to
employ a server-side language like PHP or use cookies.
| | 00:23 | As you're about to see, saving users choices to localStorage
is extremely easy to set up, so let's get to it.
| | 00:31 | So what we're going to do in this lesson is
to provide the various actions that will take
| | 00:36 | place once the user clicks the submit button.
| | 00:40 | We'll need to get the current values of both
the form elements, the radio buttons and the
| | 00:44 | range slider, and save them in localStorage and then
redirect the page, and we can do all that in JavaScript.
| | 00:52 | So I have opened here my index.html file
from the Chapter 3/03_01 folder, and I'm going to
| | 00:59 | place my cursor within the jQuery document
ready function. Let me scroll down a tad.
| | 01:06 | And I'm going to put it right after the
routine where I draw the initial Canvas.
| | 01:10 | So let me just back up a little bit here and
follow this pattern, put in a comment
| | 01:17 | so I'll know what this is all about.
| | 01:23 | So because this is jQuery, we start off with
a dollar sign and then a set of parentheses
| | 01:28 | and quotes, and because we're targeting our
submit button, that has an ID of theButton,
| | 01:34 | so we put in hash sign, theButton and then
after the parentheses, dot, next the event
| | 01:41 | that we want to watch for, and that's click,
and we're going to be defining its functions,
| | 01:46 | so we type in function and then give an open
closing parentheses, and then following that
| | 01:52 | a set of curly braces, so that's
the basic structure of the function.
| | 01:57 | Now, let's start to add in the code.
| | 01:59 | First, we'll declare a couple of variables so
that we can get the values of our form elements.
| | 02:06 | First, what I'm going to do is for the slider,
var theAge, and that is targeting the range
| | 02:12 | input type which you may recall
that we set as an ID of age.
| | 02:18 | And because it's basically a text input, we
can get the value very easily just by putting
| | 02:24 | .val and then open and closing parentheses.
All right, let's move on to the radio buttons.
| | 02:32 | This is a little bit more complex for getting the
value from, but you can still do it in a single line.
| | 02:38 | These radio buttons designate the gender,
so I'm going to call this variable theGender,
| | 02:45 | so let's start with a dollar sign, parentheses,
quotes, and now we're looking at the input
| | 02:52 | tag that has a type of radio, so you do colon,
radio, and we want to identify the radio group
| | 03:00 | by its name, so we put that in square brackets
and set it to name=gender, and then what we're
| | 03:11 | really looking for is which one was selected,
and if you recall, when we set up the default
| | 03:17 | radio button that was male, we put the word
checked as one of the attributes within the input tag.
| | 03:24 | So, we'll put another
colon and put the word checked.
| | 03:28 | And after all of that, this is just the selector
that identifies which radio button was selected,
| | 03:36 | .val, open and closed parentheses.
| | 03:40 | Okay, now we're ready to use those
variables and put them into our localStorage.
| | 03:47 | The syntax for this is very straightforward,
it's localStorage with a capital S, and then
| | 03:54 | the method that we want is setItem follow that by a
set of parentheses, setItem takes two parameters.
| | 04:03 | The first is the name of the localStorage
item, and in this case, we'll continue to call
| | 04:08 | it age, and I'm going to put that in quotes,
use a comma to separate your two parameters
| | 04:14 | and next is the value that you want to put into the
age localStorage item, so that is our variable, theAge.
| | 04:22 | Let's close this line with a semicolon and
then one more time, we'll do a similar thing,
| | 04:29 | localStorage.setItem, parentheses, here we'll
be looking to store the gender that was selected
| | 04:38 | so we're going to call this localStorage item
gender, followed by comma and the variable
| | 04:45 | that has that value, theGender.
| | 04:47 | All right, after my semicolon we're ready
to enter in the final line of this code, and
| | 04:53 | that is a redirect. This is a basic JavaScript
function, window.location.href, and we set
| | 05:02 | that equal to our page. Since we're using a
document-relative structure here, I can just
| | 05:09 | put in offer.html and then again put in our
final semicolon and the function is complete.
| | 05:17 | Well, that part is done. We're all set to
see how these user choices can be put to use,
| | 05:23 | and we'll do that in the next lesson.
| | Collapse this transcript |
| Inserting the HTML placeholder ad| 00:00 | In this lesson, we'll convert a standard HTML page
to a dynamic one which displays a customized ad
| | 00:07 | to any user who's answered our key questions.
| | 00:11 | Any other user will just see the standard page with
a note that they may be missing out on a special offer.
| | 00:18 | To do this, it will take a little more
HTML and somewhat more JavaScript.
| | 00:23 | We're going to begin with the HTML, but
before we do that I wanted to show you
| | 00:27 | the page in a browser as it is.
| | 00:30 | As you can see, it's a pretty basic page.
I've just included the first of available
| | 00:34 | vacations in the main content area on the
left, and there's a little teaser text about
| | 00:39 | the special offer on the right.
| | 00:41 | We are going to insert a banner right below the
navigation that spans the page to garner maximum attention.
| | 00:48 | Let's head back to our code editor.
| | 00:51 | So here I have offer.HTML open, that's from
the Chapter 3/03_02 folder, and what I want
| | 00:58 | to do is scroll down a bit. In the body of
the page right after the contentWrapper div
| | 01:05 | on line 27, I have a comment
holding the place for my special offer.
| | 01:10 | I'll remove that and start with a
new div that has an ID of specialOffer.
| | 01:22 | All the code in this div will provide
the structure for my personalized ad.
| | 01:27 | As design this special offer area has a banner
that runs on the top and the bottom, and I've
| | 01:33 | already set up the CSS for this, so I
just need to put in a couple of empty divs.
| | 01:38 | So, div, and because we are using two of
these which should be a class and not an ID,
| | 01:46 | and this class is called banner, and then
we'll close the div, go to the end of the line.
| | 01:52 | Next up are the first of three
divs, all of which are variable driven.
| | 01:56 | Now, were going to put in some placeholder text
here which will substitute dynamically with JavaScript.
| | 02:02 | So, the first div is for the text designating
the action of the ad, and I call that actionText,
| | 02:11 | within this div I want to put an H1 tag so
we can be semantically correct, and my example
| | 02:17 | action that I'll use is Tour.
Okay, it's the end of that line.
| | 02:22 | Now, if you're not using a code editor that
provides code completion like Aptana does here,
| | 02:27 | be sure to put in the closing
h1 and closing div tags.
| | 02:31 | Next up is the planet image, so we have another div
for that with an ID equal to--you guessed it--planetImage.
| | 02:41 | Here we'll put in an image tag and set the
source equal to my folder images, and down
| | 02:49 | here I have an image called mars_big.jpg, it's
exactly what I'm looking for, and my alt text is Mars.
| | 02:59 | Okay, let's close off the image tag and go
down to the next line and the final variable,
| | 03:07 | and this is discount.
| | 03:08 | Now, discount is not a local storage variable
that we're using, but I do have it set up as
| | 03:13 | a variable in the JavaScript
so they can be easily modified.
| | 03:17 | Again, we'll put an h1 tag in
here and within the h1 tag 25% Off.
| | 03:24 | Now, these three divs action text, planet image, and
discount, are all floated so that they'll appear in line.
| | 03:32 | So, in order to clear the float, I'm going
to put it another div with a class that I
| | 03:38 | have set up called clearfix. This is actually a
class that I used from the HTML file boilerplate
| | 03:44 | code that I find works
really well for clearing floats.
| | 03:49 | And we'll close off of that div, and now we're
ready to create a final line and put in another
| | 03:55 | div with the class of banner.
| | 03:59 | Let's close that div tag,
and now the HTML is done.
| | 04:04 | Next, you're ready to tackle the JavaScript,
and we'll do that in the next lesson.
| | Collapse this transcript |
| Using JavaScript to build the ad| 00:00 | In the previous lesson we set up all the
HTML we're going to need on our offer page
| | 00:05 | for our personalized ad.
| | 00:06 | Now, let's go into the JavaScript. What we're
going to code will retrieve the values from
| | 00:11 | local storage, and if they exist,
populate the personalized ad correctly.
| | 00:18 | We're going to start with a script tag, and
we're going to put this right before the end
| | 00:22 | of the head section, and we enclose this in
a script tag with a type="text/JavaScript", close
| | 00:33 | our script type, and we're going to go ahead
and make a little room here, and let's start
| | 00:38 | our JavaScript document ready function,
$(document).ready(function(),
| | 00:50 | and then after the closing parentheses,
an open curly brace
| | 00:55 | and Aptana completes that with a closing
curly brace, and now we're ready
| | 00:59 | to start putting in our basic functions.
| | 01:03 | First, we're going to get
the items from local storage.
| | 01:05 | So, let me put in a little comment to that
effect, and we'll do this by declaring two
| | 01:14 | variables, one for the
age and one for the gender.
| | 01:17 | So I'm going to call this storedAge and set
that equal to localStorage.getItem, parentheses,
| | 01:28 | and in quotes which item do we
want to get of the two that we stored?
| | 01:32 | Age, of course. Close that line with a semicolon,
and then let's do the same thing but
| | 01:37 | for gender, var storedGender, set that
equal to localStorage.getItem("gender").
| | 01:51 | So, first what we want to do is put in a if
statement that will check to see if one of
| | 01:56 | our local storage variables,
and it doesn't matter which one.
| | 01:59 | If we have one of them we have both of them, because
of the way the form was set up with default values.
| | 02:03 | So, let's enter in an if statement, parentheses,
and what we want to check for is if the variable
| | 02:10 | storedAge is not equal to null.
| | 02:15 | In other words, if there is
something there, and it's not null.
| | 02:20 | Okay, we'll follow that with
a open and close curly brace.
| | 02:24 | Now the first thing were going to do is
declare our variables, I have four in all,
| | 02:30 | so the first one is the action, that
will be the action word hike or tour.
| | 02:36 | Next is the image, and this will be the
source for the image, the third one is in that same
| | 02:43 | image tag, and it's the image alt--that's the
alt text of course--and then finally the discount.
| | 02:50 | Now, as I said, this is not a variable that
is used in local storage but we're going to
| | 02:54 | have this set up here, go
ahead and make it equal to 25% Off.
| | 03:00 | So, that's string will appear
as part of the personalized ad.
| | 03:04 | Thus we are mixing
localStorage and in-page variables.
| | 03:10 | Okay, the next thing we need to is determine
which values to display based on localStorage.
| | 03:17 | Let me put in a comment to that effect,
and we'll use an if statement here, so we want
| | 03:27 | to see if stored gender is the same as male.
| | 03:34 | And a set of curly braces after that if
statement, and if it is we're going to set the image
| | 03:40 | equal to a path to the image which is images/mars_big.jpg,
close that with a semicolon, and theImageAlt,
| | 03:54 | our alt text, and set that equal to Mars.
| | 03:58 | Now, if it's not male,
it has to be female right?
| | 04:02 | So, we'll use an else statement again, a set
of curly braces, and we'll set the image equal
| | 04:13 | to images/venus_ big.jpg, and our
ImageAlt text is going to be equal to Venus.
| | 04:21 | Okay, skip down below the curly brace, it
closes out that if statement and let me scroll
| | 04:27 | up here so we can see better.
Next, let's work with the age.
| | 04:32 | Now if you recall during the introduction
of a technology, I mentioned that load storage
| | 04:38 | stores all of its variables as strings.
| | 04:41 | So because we want to work with this as a number value,
we're going to have to convert a string to a number.
| | 04:47 | So, let's take that variable storedAge and
set it equal to parseInt, short for parse
| | 04:55 | integer and the variable we want to parse and
convert from a string to a number is storedAge.
| | 05:03 | Okay, once we have that, we
can set up our if statement.
| | 05:08 | Again, I'll scroll down so
we can just focus on this.
| | 05:11 | Now, in this scenario what I had figured is
that if the age that they enter is 60 or less,
| | 05:19 | we'll make the action hike.
| | 05:20 | So, a little bit more active, and if
it's over 60 we'll make the action tour.
| | 05:26 | So, again, an if statement followed by parenthesis,
and if storedAge our variable is less than
| | 05:35 | or equal to 60--and you do not want to put
this in quotes--after the closing parentheses
| | 05:42 | a curly brace set, let's
set the action equal to HIKE.
| | 05:48 | Now, go down to where that curly brace
closed after that and enter else, another set of
| | 05:56 | curly braces, because if the age is not 60
or less, it has to be over, and if it is we'll
| | 06:03 | set the action equal to Tour.
Okay, we have all of our variables set up.
| | 06:09 | So, I'm going to make a new line after that
closing curly brace, and now we're ready to
| | 06:14 | actually change the values.
| | 06:16 | I'll add to the comment to designate with
this section is about, and we're going to
| | 06:21 | change the values of the image tag first
using a jQuery syntax and functionality.
| | 06:27 | So, let's identify that image tag where we
want it to go, and it's a ID of planetImage
| | 06:36 | which is the div, and we're looking at the
image tag within that and then follow that
| | 06:40 | with a dot and the function attr, now this
stands for attributes, this is a array, so
| | 06:48 | we put in a quote and then curly braces, and I'll make
a little line here because we just have a couple of them.
| | 06:55 | We want to change first the SRC, or source
attribute, and I'm going to set that to the image.
| | 07:03 | So, source, src: theImage, comma, so we can
enter in our next and final attribute alt,
| | 07:12 | and this is of course the ImageAlt.
| | 07:14 | Okay, now I'll move down to where that curly
brace and parentheses close and finish off
| | 07:21 | this line with a semicolon.
Next, we want to change the action text.
| | 07:26 | Now, you recall that I put in an h1 tag there,
so we'll target that h1 tag and use the jQuery
| | 07:33 | function text to swap out the placeholder
text that we have for the variable value.
| | 07:40 | So, dollar sign, parentheses, quotes, actionText, and
we're actually targeting not the div itself but the h1 tag.
| | 07:51 | If you leave the h1 tag off, you'll find
your text probably very tiny on the screen,
| | 07:57 | .text, this is our function and the variable
you want to use to exchange here is the action.
| | 08:04 | Okay, very similar, we want to change the
discount h1, again .text, parentheses, the discount.
| | 08:15 | Okay, now after all of that is over,
we're going to display the special area.
| | 08:21 | I have a CSS rule that initially sets
the display of special offer to none.
| | 08:27 | Now I'm going to reveal it by using the
jay query functionality of a .css function.
| | 08:34 | So, let's put in our selector, which is the
div specialOffer followed by .css, parentheses,
| | 08:42 | and the CSS function takes two arguments
whatever the property is that you want to affect,
| | 08:49 | and in our case it's display, and there are
always put in parentheses, followed by its value.
| | 08:57 | And here the value is block.
| | 08:58 | So, were doing a display block CSS rule essentially,
one last closing semicolon here, and that's done.
| | 09:07 | Well, now the HTML and
JavaScript are complete, it's demo 30.
| | 09:11 | So, I'm going to save my page and then go to the
browser, and there's our personalized ad, excellent.
| | 09:19 | So, at this stage, we can test the other
scenarios by going back to the homepage
| | 09:25 | and re-submitting a different set of answers.
| | 09:27 | Let's go back here, and let's try keeping
the same gender, female, and I'll increase
| | 09:32 | the age this time and choose Get My Special Offer,
and now instead of hiking Venus, I'm touring Venus.
| | 09:38 | Great, okay, let's do one
more switch just to try it out.
| | 09:42 | Now, you'll notice that when I click HOME
it actually resets the page so that's fine.
| | 09:47 | I'm going to go ahead and bring up the age
again to about where we were, 72, but we'll
| | 09:52 | keep the male gender this time, get my special offer,
and now instead of touring Venus, I'm touring Mars.
| | 09:59 | Okay, that's really great for testing,
but it's not so great for the user.
| | 10:03 | You certainly don't want your user being
able to go back and change the values there.
| | 10:08 | We'll fix that issue in the next lesson.
| | Collapse this transcript |
| Drawing ads dynamically with Canvas| 00:00 | We're at the culmination of our project.
| | 00:02 | In this lesson, we'll bring all the various
components together and use HTML5 canvas technology
| | 00:09 | to dynamically compose an ad on the homepage.
| | 00:12 | Essentially, we'll be leveraging
everything we've done before with local storage,
| | 00:17 | and I'll show you how to draw different layers
on a canvass so that we can merge images
| | 00:22 | with multi-layered text.
Ready? Let's do it.
| | 00:25 | I have index.html from the
Chapter 3/03_04 folder open.
| | 00:32 | All of our work in this lesson is going to take place
in the script tag within the jQuery document ready function.
| | 00:38 | The first thing we need to do is to
retrieve our local storage variables.
| | 00:43 | We'll do that right at the top of the function.
| | 00:46 | So, I'm going to go after the document
ready function opens, and I'm going to put in
| | 00:51 | a little comment here indicating that I am going
to Check for local storage, and if they exist,
| | 00:59 | set the variables and hide the form.
Okay, let's declare the first of two variables.
| | 01:08 | We're going to use our same variables that we did
before on the other page, storedAge = LocalStorage.getItem
| | 01:16 | and the item we want to get is age,
And we'll do the same thing for storedGender.
| | 01:28 | Make sure that item is set to gender, and
now we're ready for our if statement to check
| | 01:33 | and see if one of the two
local storage items exist.
| | 01:36 | It doesn't really matter which one.
| | 01:38 | I'm going to go with stored age here, so, if(storedAge !=null),
meaning if there is one, curly brace.
| | 01:49 | What do we want to do?
Well, the way that I have my page set up,
| | 01:54 | it starts off by default with a class of unsubmitted
that is placed in the div that wraps around the form.
| | 02:03 | That div is called special offer.
| | 02:05 | So, if there are local storage variables,
that means that someone has already submitted
| | 02:09 | the form and is no longer unsubmitted.
So, let's remove that class.
| | 02:14 | So $('#specialOffer').removeClass("unsubmitted"),
and we're targeting that div of special offer,
| | 02:22 | and we'll use the jQuery function removeClass, again,
with the parentheses and quotes, and as I said we're
| | 02:30 | going to remove unsubmitted. Okay,
we'll put a closing semicolon there.
| | 02:36 | And the next thing we want to do is
hide the detail area, that's the form.
| | 02:41 | So, I'm going to put in my
selector of class or .detail.css.
| | 02:49 | The property we're going to change is the
display property, and then we will put a comma,
| | 02:55 | and we're going to set display to none.
| | 02:58 | All right, our final semicolon there,
and now this part of the code is done.
| | 03:03 | Let me scroll the page down a bit so
we can start work on the next section.
| | 03:07 | Now, since we've conditionally removed the unsubmitted
class, let's make the card flipping conditional.
| | 03:13 | So what I am going to do is around my card
flipping routine, I'm going to put an if statement,
| | 03:21 | and let's put in a comment here, if form unsubmitted, do
card flip and of course if it has been submitted, don't.
| | 03:33 | So if, dollar sign, and we're going to target the div
special offer, and you want to put your cursor
| | 03:41 | after the first closing parentheses and
before the second one. dot, use the jQuery function
| | 03:47 | hasClass, open up another set of
parentheses and quotes and enter unsubmitted.
| | 03:56 | Now if that's all true, put in an open curly brace
there, now Aptana automatically puts another
| | 04:03 | curly brace to close off the pair.
| | 04:05 | But I'm going to remove that one because I
want to actually do this routine that starts
| | 04:10 | on line 25 and finishes on line 32.
| | 04:14 | So, I'm going to make a new line after
line 32 and insert that closing curly brace.
| | 04:17 | All right, so you see how these all works.
| | 04:21 | If the special offer has the class of unsubmitted,
meaning we're at our default state, then do
| | 04:28 | the card flip, and if does not,
then it won't do the flip, excellent.
| | 04:34 | So, now for the big Kahuna, again, we'e
going to use our local storage variables.
| | 04:39 | This time we're going to determine if the
initial ad should be drawn or not, and if not,
| | 04:44 | what should be drawn in this place.
| | 04:47 | So for this, we are going to scroll down a
little bit more, and we're going to be wrapping
| | 04:51 | a function around Draw initial canvas.
| | 04:54 | So, I'll place my cursor after the comment
and then put in my if statement,
| | 05:00 | if our variable storedAge is set to null, then--
and again, we'll put in an opening curly brace--
| | 05:10 | I'm going to delete the Aptana-provided
closing curly brace because what
| | 05:15 | I want to have happen is for this initial
Get Special Offer Here! to be drawn on the canvas.
| | 05:21 | All right, so let me close off the curly
brace else, now if storeAge is not equal to null,
| | 05:28 | in other words else open curly brace, and
this is where we're going to put in all of
| | 05:34 | the code where we reset the variables and
bring it in and basically compose our small ad.
| | 05:42 | The first thing we will need to do
is to declare a couple of variables.
| | 05:46 | So I'm going to declare
var theText and var theImage.
| | 05:52 | There are really only two separate
parts to this image we're about to compose,
| | 05:57 | the planet image and the
text that goes on top of it.
| | 06:01 | Now the text is actually multilayered,
but we'll get to that in just a moment.
| | 06:04 | So, we really only need the two variables.
| | 06:06 | Now, let's set up our conditional.
| | 06:09 | If the stored gender is male, we'll set the
image to Mars, otherwise we'll set the image to Venus.
| | 06:15 | So if storedGender is set to male,
open that curly brace again.
| | 06:24 | And we will set the image
equal to images/mars.jpg.
| | 06:31 | Close it with a semicolon, and now we'll
enter in our else statement with its own set of
| | 06:37 | curly braces otherwise, the image is going to
be equal to images/venus.jpg.
| | 06:46 | Okay, let's move our cursor past that closing curly brace.
Now, let's deal with the storedAge.
| | 06:52 | Again, we need to convert the string
that is in the local variable to a number.
| | 06:58 | So storedAge equals
parseInt, parentheses, storedAge.
| | 07:05 | You could of course just copy
this code from the other page.
| | 07:08 | That is pretty quick and simple to bring it in.
I'm going to scroll down a bit more.
| | 07:14 | Now, let's add in the conditional for the age.
| | 07:17 | If storedAge is less than or equal to 60,
what we do is we set the text equal to HIKE,
| | 07:30 | and now I'm going to use an escape character
here because with the canvas, you can't put in
| | 07:34 | a line break or BR tag, so we have to put in
backward slash n which puts in a new line and then 25% off.
| | 07:45 | So this will allow us to stack the text HIKE 25% off
and make sure the Placement is precise.
| | 07:51 | All right, a closing semicolon there,
and now let's put in our else condition.
| | 07:58 | The text is going to be equal to
TOUR\n25% off, close it with a semicolon.
| | 08:07 | Okay, our variables are set up.
Now, we're ready to actually construct the canvas.
| | 08:12 | We'll do this with the series
of three separate functions.
| | 08:15 | Each using the J canvas function of add layer.
| | 08:18 | So I'll target my canvas, which
conveniently has an ID of myCanvas.
| | 08:26 | After that I'll follow with a dot and
insert the function name, addLayer, open and closed
| | 08:31 | parens, open and closed curly brace,
because we're working with an array.
| | 08:36 | Okay, the first item in the array is identifying
the type of layer that we are going to be
| | 08:41 | putting in, and this is an image in
single quotes, follow that by a comma.
| | 08:47 | Next, we'll put in the source for this.
| | 08:50 | Notice that this is not SRC, it's source, and
we're going to use our variable that we have
| | 08:56 | set up, starting in the routine online 48,
theImage followed by a comma.
| | 09:03 | Its coordinates, we want this to be dead center
so we'll set the coordinates to x:100, y:100,
| | 09:11 | and now this particular routine that I
want to show you next is inserted in order
| | 09:17 | to control the order in
which things are depicted.
| | 09:21 | Normally, when you add layers,
they're put in top to bottom.
| | 09:26 | So by my putting in the image first, and then
we'll follow that up with the text, you would
| | 09:32 | think that the image would be drawn
and then the text layered on top of that.
| | 09:36 | Well, in the perfect world, that could be, but
here we are dealing with super fast computers
| | 09:43 | which tend to do things very quickly.
| | 09:46 | So what will happen if we don't put in
this special function that I'm about to put in
| | 09:51 | is all of this will happen near simultaneously
and the image takes so long to load, meaning
| | 09:58 | a millisecond more than a text does to be drawn
is that the image will appear on top of the text.
| | 10:04 | So we need to control that, and we'll
do that by putting in a load property.
| | 10:09 | And this is load, colon, and you follow this
with a function argument function, open and
| | 10:16 | close paren, and then after that the
open and close curly brace, and we're targeting
| | 10:21 | this particular layer, so we'll use the jQuery
construct of $(this).drawLayer(1) which will
| | 10:30 | be the first text layer, semicolon, and
then repeat that with$ (this).drawLayer(2).
| | 10:38 | So what this function is
saying is control the load
| | 10:43 | so that after you load and display this
image, then draw layer 1 and draw layer 2.
| | 10:51 | This layer that we're working with, the image
layer is layer 0, so that will appear on the bottom.
| | 10:57 | Okay, we go down to the closing curly brace
and parentheses on line 67, add a semicolon
| | 11:03 | and a line, and we're ready to move on to the
next layer which is going to be a text layer.
| | 11:09 | The first line is the same because we're targeting
the same canvas, myCanvas, and we're adding
| | 11:15 | a layer, and now this type is text,
and the fill style, the color in other words,
| | 11:25 | I'm going to make white.
| | 11:26 | This will give a white background behind
the text, so it puts a layer of white text
| | 11:32 | to offset the colored text, to make
sure that it shows up properly.
| | 11:37 | Next our font, and we'll use the same font
that we did for our initial layer, bold, 32pt,
| | 11:44 | Trebuchet MS, follow that with a comma, and
then the actual text that we'll put in is
| | 11:52 | going to be our variable theText.
Let's position that.
| | 11:56 | Now instead of putting this in at 100, 100,
we want it to be off set a little bit, so
| | 12:01 | I'm putting it at X:101, y:101, and
again we'll set the maxWidth to 200.
| | 12:11 | Close that with a semicolon.
| | 12:12 | All right, now because it's so similar, I can
just copy this routine from line 68 to line 75.
| | 12:22 | Select that, copy, paste it in, and this
time we just need to change a couple things.
| | 12:28 | Let's change the fill style to 36c
and the X and Y coordinates to 100.
| | 12:39 | Now that we have all our ad layer
functions created, we need
| | 12:44 | to draw them all, and to do that, we
use the Jcanvas function of draw layers.
| | 12:49 | So let's target our canvas, .drawLayers, close it
with an open and close parentheses and a semicolon.
| | 13:01 | All done, let's save the
page and see what we got.
| | 13:04 | So I've open the page in my browser,
and because we've
| | 13:07 | previously submitted the form
which saves values on local storage,
| | 13:12 | we now have a dynamically drawn ad.
Terrific, congratulations.
| | 13:17 | So one last thing before we go.
| | 13:19 | Now that our conditional JavaScript is in
place, how do we continue to test different
| | 13:24 | submitted values or make sure that the page is
working from the get-go without the form being submitted?
| | 13:30 | Well, most modern browsers have a way of
displaying and managing local storage items.
| | 13:36 | In Chrome, go to View > Developer > Developer tools.
| | 13:42 | Once the Developer tools opens up, click
Resources and then over in the left column,
| | 13:48 | you'll see an entry for local storage,
expand that, and then click on the entry within.
| | 13:54 | There are the local storage items
currently stored or you can change them.
| | 13:58 | Here let's change the gender from female.
| | 14:01 | I'll just double-click into that and change
that from female to male, and now if I go up
| | 14:07 | and refresh the page, the planet changes
from Venus to Mars, or you can delete them
| | 14:12 | altogether and start over.
| | 14:14 | So I'll select each one of these and then
press the Delete key, and now when I refresh
| | 14:19 | the page, I'm back to my Get Special Offer Here!
| | 14:22 | My card is flipping and
everything is ready to go.
| | 14:25 | Not too shabby, right?
| | 14:26 | So again, congratulations
on completing the project.
| | 14:30 | Now, go forth and personalize those ads.
| | Collapse this transcript |
|
|
