| 1. Week Ten |
2. Week Nine017 Uploading files with forms using PHP| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:02 | In this episode, we're going to
build an image uploader using PHP.
| | 00:07 | So if you want to crowdsource your
audience and let people upload files to your
| | 00:10 | web site, it's time to View Source.
| | 00:12 | Let's talk a little bit about our setup.
| | 00:15 | We're going to be using PHP which is a
server-side technology, which means that
| | 00:19 | you have to work on a
server that parses PHP files.
| | 00:22 | So I'm working off of a live server
this time, not on my local machine.
| | 00:26 | In our live server, we have a number of
files, some of them are pretty mundane.
| | 00:30 | We have an images folder with a couple
of normal images plus an index.php file.
| | 00:35 | Whenever you're working with PHP,
you want to use the .php extension.
| | 00:38 | We've also loaded a copy of jQuery, as
well as a style sheet, and we have a couple
| | 00:44 | of empty files right now, the
showuploads.php and the upload.php file which
| | 00:49 | we'll be constructing in this movie.
| | 00:51 | We also have an uploads folder that will
hold the photos that people upload to our site.
| | 00:57 | So taking a look at the index.php file,
I'm going to open it up in my Text Editor.
| | 01:02 | I'm going to click it and click
on Edit, I'm using Cyberduck here.
| | 01:08 | One of the things that's unique about the
form is this new attribute called enctype.
| | 01:12 | So enctype is the encoding
type for this particular form.
| | 01:15 | Normally, forms get sent
through the web as text files.
| | 01:19 | When somebody is uploading a normal file,
we don't want to transcode the data,
| | 01:23 | so we have to tell the form to use this
particular enctype, multipart/form-data.
| | 01:28 | Also the method for this
form happens to be POST.
| | 01:31 | When you're using very long document
like files, you want to make sure that you
| | 01:35 | use the POST method because the GET
method can only hold so many characters.
| | 01:39 | After that we have a label as well as
an input type, and this input type is
| | 01:43 | different than normal, is of type file.
| | 01:46 | The input type file will give you a
dialog box where you can choose a file
| | 01:50 | from your own computer.
| | 01:52 | Other than that, this is a plain form,
so the next thing we need to do is
| | 01:55 | build our file uploader.
| | 01:57 | So if you notice, we're sending this
form to a script called upload.php, so we'll
| | 02:01 | need to build that next.
| | 02:02 | To do that, I'm going to go back into Cyberduck
and click on upload.php, and open up that file.
| | 02:08 | This is just an empty file right now,
so we're going to grab the code from our
| | 02:13 | codesnippets file here, and copy it, and
paste it in here and let me go through
| | 02:17 | what this code does.
| | 02:18 | When somebody submits the form, the
information that gets passed along to this
| | 02:22 | document is the file data that
gets passed along by the browser.
| | 02:26 | From the file data, we can grab a few
variables and what we're doing here is
| | 02:29 | we're grabbing a temporary name
because when a file is uploaded from a form
| | 02:33 | element, it gets placed in a temporary
location and it gets placed in this array
| | 02:38 | that gives us the information about the form.
| | 02:40 | So a couple of things we can grab from
here is the temporary name that the file
| | 02:43 | is going to be placed under, as well as
the name of the file that was uploaded.
| | 02:48 | So if we load this file called burrito.jpg,
that would be the name of the file.
| | 02:53 | In addition to that, I'm going to
be creating a special variable called
| | 02:56 | saveddate that stores a version of
today's date with the time, so that whenever
| | 03:01 | somebody uploads a photo, say the
burrito.jpg file and somebody comes later on
| | 03:05 | and uploads the same photo, those
two photos will have different names.
| | 03:09 | They'll have text for today's
date, plus the name burrito.jpg.
| | 03:12 | That way multiple files can be
uploaded to the site without a problem.
| | 03:17 | Now we need to come up with a new file
name since we are going to be using a
| | 03:21 | different name than what
the file was originally named.
| | 03:24 | We also are using a subfolder to store
these files, so we come up with a new
| | 03:28 | file name of uploads/, then the name
of the file was saved, as well as the
| | 03:33 | upload file name, which is just a
regular name that people use when they
| | 03:37 | submitted the form.
| | 03:38 | Finally, we're going to use the move_
uploaded_file command and send it to
| | 03:42 | temporary name of the file
as well as the newfilename.
| | 03:45 | And if that function executes properly,
then it's going to print out that the
| | 03:49 | file has been uploaded.
| | 03:51 | So let me save this and come back to our form.
| | 03:54 | So I'm going to hit Choose File right
here to bring up my File Manager, and on
| | 03:59 | the desktop find my burrito picture,
and I'm going to hit Choose, and then hit
| | 04:04 | the Submit button, and you could see
that it says File Uploaded, this means that
| | 04:08 | the file has uploaded
properly and is now on our server.
| | 04:11 | If I go back into my FTP program and I
open up the uploads folder, I may have to
| | 04:16 | refresh, but I can see the file is
there and notice that it added the date as
| | 04:20 | well as a timestamp to our
burrito.jpg name, which is great.
| | 04:25 | So our uploader is working pretty well,
that wasn't even a lot of difficult code.
| | 04:29 | There's no way of knowing on our
site that a file has been uploaded.
| | 04:33 | The only way that we can find out
right now is by checking through an FTP
| | 04:36 | program on our server.
| | 04:37 | So it would be nice to have some sort
of feedback to let us know that the file
| | 04:40 | has uploaded properly.
| | 04:41 | So what I'm going to do is I'm going to
come back to this page and I want to add
| | 04:45 | a copy of the photo on this
page after it has been uploaded.
| | 04:48 | So to do that, I'm going to go back
into my codesnippets, and I'm going to add a
| | 04:52 | div to my page so that I can insert
the images that have been uploaded.
| | 04:56 | So I'm going to copy this,
and go back into my index file.
| | 05:01 | Right now, we're in the upload.php,
I'm done with that, so I'm going to close
| | 05:04 | that out and switch back over to my
index.php, edit that, and I'm going to add
| | 05:11 | that after the form element.
| | 05:13 | I'll just add a placeholder so that
we can put the photo uploads in there.
| | 05:17 | So the next thing I need to do is
actually write a script that will show us the
| | 05:21 | photos that are in that folder.
| | 05:23 | If you remember back from week ten, we
created a script that did exactly that.
| | 05:28 | The script allows you to build
HTML from a folder's content.
| | 05:31 | So I have a slightly modified version
of that script in our snippets file,
| | 05:37 | and it looks like this.
| | 05:38 | This is the same script as the
listing files with PHP movie we've built
| | 05:42 | earlier on, so I'm just going to copy
it and open up our showuploads.php page
| | 05:50 | and paste that code in there.
| | 05:52 | The only thing that we have changed
here is since we are calling this folder
| | 05:55 | uploads, I have changed the name of
which directory is open, and what the image
| | 06:00 | tags are supposed to be.
| | 06:01 | Other than that, this is exactly the same code.
| | 06:03 | So I'm going to save that, and
I'm going to close out of it.
| | 06:06 | And if I go to my web site and I type
in showuploads.php, I can see that the
| | 06:15 | burrito photo that I loaded
is already showing up in there.
| | 06:18 | It would be nice to pull that into my
original page, so I'm going to do that
| | 06:22 | with a piece of jQuery.
| | 06:23 | That means I need to load the jQuery
library as well as write a small script
| | 06:28 | that is going to show the
uploads on this original page.
| | 06:30 | So I'm going to grab the script right here.
| | 06:33 | This is also similar to another lesson
that I showed you earlier on how to load
| | 06:37 | content from one page to another.
| | 06:39 | So I'm going to go into my index.php
again, open that up, and I'm going to add
| | 06:46 | that script at the bottom,
right before the closing body tag.
| | 06:49 | This script loads a copy of jQuery
AJAX from Google's CDN, as well as a local
| | 06:54 | copy just in case I am working offline.
| | 06:56 | And then it has simply a document
ready function that means that whenever the
| | 07:00 | DOM loads, execute this function,
and all it's doing is it's grabbing the
| | 07:06 | showuploads page and then putting the
contents on that page onto this page.
| | 07:10 | It's going to hide it and fade it
in at 500 milliseconds, so there is a
| | 07:13 | little bit of a fade-in.
| | 07:14 | But other than that, it's pretty simple code.
| | 07:16 | So I'm going to save that, and I'm
going to go back into this page and just
| | 07:21 | reload, and now you can see that this
page loads, but then in addition, it loads
| | 07:25 | the content from the showuploads.php
which just simply reads the directory where
| | 07:31 | all the photos are uploaded
and shows us what's in there.
| | 07:35 | If I were to load up another photo
right now, and I would hit the Submit button,
| | 07:39 | I still get taken to this
other page that says File Uploaded.
| | 07:42 | If I want to see my photo, I would
have to click the back button and refresh
| | 07:46 | this page and see that the new photo is there.
| | 07:48 | So I need to find a way of returning
to this page once the photo has been
| | 07:52 | uploaded by our uploader.
| | 07:54 | So I'm going to do that with another
piece of code, so I'm going to modify
| | 07:58 | my uploader slightly by adding a location
of where to go whenever it's done processing.
| | 08:05 | I'm going to copy this version of the
code, this version of the code is very
| | 08:08 | similar to the last version.
| | 08:10 | So I'm going to click on that upload file
and hit Edit, and just paste the new version.
| | 08:14 | You can see that the only difference
is that instead of printing out a file
| | 08:18 | uploaded message, we are using a
header method to tell the web site that the
| | 08:23 | location of this page should be the other page.
| | 08:26 | So what this will do is it will load
up the index file which has the form
| | 08:31 | element as well as a list of all of our photos.
| | 08:33 | So I'm going to save that, go back into
this form, and I'm going to hit Choose
| | 08:38 | File to choose another photo.
| | 08:40 | The one that I haven't picked is the
spoon.jpg, so I'll choose that, I'll hit
| | 08:44 | the Submit button, it'll submit the form.
| | 08:47 | Go to the form processor, which
tells it after the photo has uploaded to
| | 08:50 | come back to this page.
| | 08:51 | This page shows the updated images
and we can see immediately some feedback
| | 08:56 | from what we have done.
| | 08:57 | So if you scroll down, you can see the
other photos are still there and that's a
| | 09:00 | great image uploader.
| | 09:02 | Sharing is part of the online experience,
so don't forget that sometimes for a
| | 09:06 | web site it's better to receive than to give.
| | 09:08 | And tune back next time for
another episode of View Source.
| | Collapse this transcript |
| 018 Embedding images into CSS with URL data| 00:00 | Hey there! This is Ray Villalobos
and welcome to View Source!
| | 00:02 | In this episode I want to show you how to add
images directly into your CSS files as data.
| | 00:08 | If you want to know why that's
important, then it's time to View Source.
| | 00:11 | If you have a large web site, most of
the communication between the server and
| | 00:16 | the users are calls to images.
| | 00:18 | Every time you request even the
smallest image, you're creating an extra
| | 00:22 | connection that has to be
processed by your server.
| | 00:25 | You can reduce the amount and
frequency of those requests by embedding your
| | 00:28 | images into your CSS documents.
| | 00:31 | A good example will be for small icons.
| | 00:34 | If you use the icon many times on a busy
web site, it can add thousands of calls
| | 00:38 | as many users navigate through the site.
| | 00:41 | When you combine this technique with
CSS Sprites, which creates one image that
| | 00:45 | gets loaded on many times but shows
different parts of the image for different
| | 00:50 | elements, then the time
savings can be substantial.
| | 00:53 | So let's take a look at how we can do that.
| | 00:55 | I have a simple HTML document here that
just has a list with a couple of sub-lists.
| | 01:00 | First thing I need to do is I need to create
some styles to make this look a little better.
| | 01:04 | So I am going to go into codesnippets
and grab a little bit of style sheet code,
| | 01:07 | so I am going to click right there
and paste that in there, and what that's
| | 01:10 | doing is creating the list, getting rid
of the item numbers that an ordered list
| | 01:15 | would normally add, plus adding
this background URL of arrows.png.
| | 01:20 | That file is right here and is a sprite.
| | 01:23 | So you could see there are two
different versions of this image and they're
| | 01:26 | both in the same file.
| | 01:27 | What we could do is, show the normal
version of this image by default and then
| | 01:31 | switch to the arrow down version whenever we
process one of the clicks on these elements.
| | 01:37 | So let's go back to our style sheet and
take a look at some of the other stuff
| | 01:40 | that we've got here.
| | 01:41 | We've also created a style called
showme, for after we click on one of these
| | 01:45 | elements, so that it can show the sub-lists.
| | 01:48 | Finally, we have hidden all the
secondary lists by setting the second ordered
| | 01:53 | list elements to have no
backgrounds and no display elements.
| | 01:58 | To display a background of none so that
when I expand these items all these sub
| | 02:02 | items won't have arrows also, and I've
also set the display to none, so that they
| | 02:06 | currently are not showing.
| | 02:08 | Now we need to add a little bit of
JavaScript to make this actually work in the
| | 02:12 | way that we need it to work.
| | 02:13 | So I am going to back into codesnippets, and
of course I need to load my jQuery library.
| | 02:18 | I am going to use Google's CDN right
here and have an optional piece of code
| | 02:22 | that will load a local
version while I am offline.
| | 02:25 | So I am going to copy that, go back
into my index file, and before the end body
| | 02:30 | tag, I'll paste it right there, and this
adds the JavaScript library to our file,
| | 02:34 | it's not going to really do anything,
we're going to go back into codesnippets
| | 02:37 | and grab the program that
actually makes the lists expand.
| | 02:40 | So I am going to grab this version of
the script, it just says whenever the DOM
| | 02:44 | is finished loading, if you click on
one of these list items I am going to take
| | 02:48 | one of those list items and make them display.
| | 02:50 | So I am going to copy that, bring it
into my index.html and right underneath my
| | 02:55 | call to jQuery, I am
going to paste that in here.
| | 02:57 | And now, if I click on one of these
items, it shows the secondary list.
| | 03:02 | So the arrow graphic after we click on
one of the main lists is supposed to be
| | 03:07 | moving to its second position which
shows the down arrow, but right now because
| | 03:12 | we expanded the list, it's
still showing the first position.
| | 03:15 | So we need to add a bit of JavaScript
to actually set the class of the item
| | 03:19 | that we clicked to the showme class, which
will show the triangle in the correct position.
| | 03:24 | We've already styled it;
| | 03:25 | all we need to do is add the jQuery.
| | 03:26 | So I am going to go back into
codesnippets and grab a slightly different
| | 03:30 | version of this file, looks like this,
and here we add a class of showme to the
| | 03:34 | element that we clicked on.
| | 03:36 | Go back into the index, then I'm
going to replace this code right here.
| | 03:42 | Now when we click on one of these
elements, it's going to switch the list item
| | 03:45 | to the showme class, which has the lists
being read and it moves the graphic for
| | 03:50 | the triangle up showing the
second version of it on these elements.
| | 03:54 | So that's generally how sprites work.
| | 03:56 | They just shift the graphic to another
position, saving you a little bit of time
| | 04:00 | because the graphic is loading only one time.
| | 04:02 | We can save a little bit more time by
just embedding the graphic into the CSS file.
| | 04:07 | That way instead of loading one CSS
file and one graphic, it's only going to
| | 04:11 | load the CSS file and the image
will already be embedded into it.
| | 04:16 | So what we need to do is take that
graphic and convert it into a URL data format
| | 04:21 | that is just a string that we can
paste into our CSS and have it read all the
| | 04:26 | data for the image from the same file.
| | 04:28 | So to do that you can go to this web
site and click on this Browse link to
| | 04:32 | load up your image.
| | 04:33 | Find the image that you want to
convert, and hit Choose button here.
| | 04:36 | Then click on Convert Image.
| | 04:38 | It will take you to a secondary page in
which you can see different versions of
| | 04:42 | this image that you can
load up on your web site.
| | 04:44 | So as you can see you can load it up
as just a regular image, using an image
| | 04:47 | tag, or you can load it up as a background
image, or you can get the raw data right here.
| | 04:53 | So I've already done that and placed
it into my CSS, so I am going to switch
| | 04:56 | back over here, grab the next
version from codesnippets of the list item.
| | 05:01 | I am going to copy this, go back into
mystyle.css and change this version of the
| | 05:09 | list item, paste it with the new data.
| | 05:11 | One of the things you have to watch
out when you paste the code and it looks
| | 05:14 | like it happened here when I was doing
this, is that the code that you get from
| | 05:18 | this web site doesn't have the no-
repeat option on the background image.
| | 05:22 | The code here for the background image has
the background-repeat as a separate element.
| | 05:27 | Since we are using that on a regular
document, we need to make sure that we
| | 05:30 | delete this extra semicolon here
that this data comes with, and now our
| | 05:36 | arrows will not repeat.
| | 05:38 | This file now is no longer using
the image from our project files;
| | 05:42 | it's using the image from
this data in this background.
| | 05:45 | And although that looks like it's a
really long bunch of data, because these
| | 05:50 | things get cached by your browser, this
will make your site run a little faster.
| | 05:54 | I wouldn't recommend this for any
humongous photos, but definitely if you're
| | 05:58 | using a lot of small interface elements,
combine them all into one image, use
| | 06:03 | CSS sprites and then embed it into
your CSS, and you should see a dramatic
| | 06:07 | boost in performance.
| | 06:09 | So see you next time and remember that
if you are looking for ways to speed up
| | 06:12 | your life, don't forget to View Source.
| | Collapse this transcript |
|
|
3. Week Eight015 Listing files on a directory with PHP| 00:00 | Hey there and welcome to View Source!
| | 00:01 | This week we're going to use PHP to
generate a list of files and a folder.
| | 00:06 | It's going to help us improve the image
rotator we built with the jQuery Cycle
| | 00:09 | plug-in on week four.
| | 00:11 | So if you want PHP to make your
life easier, it's time to View Source.
| | 00:15 | Now, normally when we make a request
from a server, the server simply grabs the
| | 00:20 | files you ask for and gives you the
document without doing anything to it.
| | 00:25 | We can use a server set language to
improve things by having the server process
| | 00:29 | the file before it gets to the user.
| | 00:31 | The server can do all
kinds of interesting things.
| | 00:34 | In this case, we have the server
automatically generate the code for the images
| | 00:39 | when somebody drops the
photos in one of our folders.
| | 00:42 | So if we open up this folder with a few
additional images, and I grab the fourth
| | 00:46 | image right here and I copy it into
our folder, then when I refresh the page,
| | 00:51 | you'll see that instead of three
photos, we'll get a fourth photo.
| | 00:55 | I have to make sure that I put my mouse
outside of the image, because I added a
| | 00:59 | variable to stop their rotation,
if my mouse is in the image.
| | 01:02 | So as you can see, this soup photo is
the fourth photo that we just added, we
| | 01:07 | didn't have to write any HTML, the
HTML was automatically generated by this
| | 01:11 | extra page called rotator.php, other
than that the code is exactly the same as
| | 01:16 | what we used before.
| | 01:17 | Now, there's a couple of problems with PHP.
| | 01:20 | One of them is that unless you have a
server installed on your local machine,
| | 01:24 | your computer will not be able to
process the files, so you have to use PHP
| | 01:28 | files that are on a server.
| | 01:31 | The other problem is that most servers
won't know they have to process a file
| | 01:35 | with PHP unless the file name
ends with the .php extension.
| | 01:39 | So here you can see the version of this
file that is on our local machine, and as
| | 01:44 | before our index file was called index.html.
| | 01:47 | When I uploaded the files to the
server, I modified the name to index.php.
| | 01:53 | The server is not really going to
care about whether we have the files in
| | 01:56 | index.php or .html, it's going to
simply realize that the name is index and
| | 02:02 | serve us that file when we go to
that directory.
| | 02:05 | We also have the rotator file itself,
which has to have the .php extension as
| | 02:09 | well, because it has most
of the code for our project.
| | 02:12 | So if we go to the Rotator page and
just go to the rotator.php, we'll see that
| | 02:16 | it simply gives us a list of images.
| | 02:20 | If we view the source on that page,
you'll see that it's essentially writing out
| | 02:26 | the image list from the directory right here.
| | 02:29 | That's another thing about PHP, when
you View Source on a PHP file, you never
| | 02:33 | see the original PHP code,
you see the results of the code.
| | 02:37 | So in order to take a look at how
this file looks, we need to open it up.
| | 02:41 | We can do so by opening up
directly from the server.
| | 02:44 | I'm going to click on this file that
I've uploaded to my server with an FTP
| | 02:47 | program, and I want to edit the file,
I want to show you how to set this up.
| | 02:51 | I'm going to go to the Cyberduck menu,
select Preferences, and make sure that I
| | 02:56 | click on this Editor tab and pick
my favorite Editor from this list.
| | 03:01 | I have Espresso, so that's good.
| | 03:03 | And when I do that, you'll get this extra
little icon in Cyberduck that says Edit.
| | 03:07 | So I'm going to hit Edit, and what
that's actually doing is opening up that
| | 03:11 | file from the server.
| | 03:13 | Any changes that I make to that file
right here are going to automatically
| | 03:17 | update on the server when I save the file.
| | 03:19 | I'm going to close up this
Projects window that just opens up extra.
| | 03:23 | So I'm going to move these side-by-
side and show you what's happening here.
| | 03:27 | So the first thing that I want to do
in my PHP document is make sure that I
| | 03:30 | define this area as being a PHP script area.
| | 03:34 | We do that by adding the question mark,
the <?php tag, and then closing it off
| | 03:41 | at the bottom with ?>.
| | 03:43 | This tells the server that everything in
between these tags is a set of PHP commands.
| | 03:49 | And we're adding quite a few
different PHP commands here, so I want to go
| | 03:53 | through each one of these lines.
| | 03:54 | I'm going to make this window bigger
so you could see things a little better.
| | 03:57 | And the first thing we need to do is
tell PHP which directory we want to read
| | 04:02 | the files from, in this case we're going
to read them from the images directory.
| | 04:06 | This rotator.php file is in the same
folder as the images directory right here,
| | 04:12 | and so all we have to do is to say, we
want to look for a folder in the same
| | 04:16 | folder called images.
| | 04:17 | Once we do that, we create an array
called the filesarray, where we're going to
| | 04:21 | store all the names of all
the files in this images folder.
| | 04:25 | Next, I want to read all the contents
of the directory, and this is what this
| | 04:30 | part of the code is doing,
into a variable called filename.
| | 04:33 | Once I have the file name of each one
of the files, I can go through every one
| | 04:37 | of those file names and perform
everything inside this while loop.
| | 04:41 | So the while loop allows us to go
through a list of things, and the list of
| | 04:45 | things that we're going through are the
different file names that it reads from
| | 04:49 | this handler that we created
that points to this images folder.
| | 04:53 | Now, for each one of the images that I
read, I want to make sure that they end
| | 04:56 | with the extension .jpg, that way if I
put in a .html, or .php file or anything
| | 05:03 | other than a .jpg, it's not
going to read it into our list.
| | 05:07 | And so what I'm doing here is making sure that
I check to see if the file has a .jpg extension.
| | 05:13 | On the left side we're
also doing a couple of things.
| | 05:16 | We're taking the file name and making
sure that we convert it to a lowercase
| | 05:20 | version of the file name.
| | 05:21 | That way if somebody types in .JPG,
then it will still first convert it to a
| | 05:27 | lowercase JPG, which when it checks
right here, it's going to function just
| | 05:31 | fine, because they will both be the
same regardless of capitalization.
| | 05:34 | The next thing is, in order to get the
last four letters of our file name, I
| | 05:39 | want to make sure that I perform the
substring command that allows me to get a
| | 05:42 | part of a string, and the part of a
string that I want to get is the last four
| | 05:47 | digits, which I do by using this number, -4;
| | 05:50 | 1, 2, 3, 4, that way I can get just
that last piece of every file name and
| | 05:55 | compare it against .jpg.
| | 05:57 | The next thing that I'm doing is
calling another function called preg_replace.
| | 06:02 | This preg_replace is what we
call a regular expression check.
| | 06:05 | So what I want to do is, I want
to get the title of the file name.
| | 06:09 | When we get a file name, it's going to have
everything in it, including the JPEG extension.
| | 06:14 | So for the title of our document, we
don't want the JPEG extension in there, and
| | 06:19 | I'm performing a regular expression.
| | 06:21 | This particular preg_replace command
takes a few different commands, and the
| | 06:25 | first part of the command is what we
call a regular expression, that tells it
| | 06:29 | how to take pieces of the file name out.
| | 06:31 | So what we're doing here is checking to
see if the file name is a word, followed
| | 06:36 | by a period, and the letters jpg.
| | 06:39 | This particular version of this
regular expression makes sure that when we're
| | 06:42 | checking things, we don't
care about capitalization.
| | 06:45 | So by adding this i next to the slash,
we make sure that we don't care whether
| | 06:49 | somebody types in JPG in capital letters or not.
| | 06:52 | Next thing, we want to store the
results of this search into a variable called
| | 06:57 | $1, and what we want to
replace is this file name.
| | 07:01 | Now, this $1 comes from the fact that
we have surrounded this \w, which just
| | 07:07 | means a word, and then this plus
sign means more than one word, and this
| | 07:12 | takes the name of the files and it
stores it in a temporary variable called $1.
| | 07:18 | The results of which get
placed into this title variable.
| | 07:22 | So all we're doing here is checking
the name of the files and taking out the
| | 07:27 | .jpg part, and storing the
results into this title variable.
| | 07:31 | We still have the file name from before,
the entire file name, so then we push
| | 07:35 | into an array, which we generated right
here, essentially an image tag that has
| | 07:41 | the file name that we get from reading
each file name, and also the title that we
| | 07:45 | get from this regular expression.
| | 07:48 | So as we go through this loop right here,
this program is pushing an image tag
| | 07:54 | with the file name as the source of the
image, as well as the title as what goes
| | 08:00 | into the alt attribute of each image.
| | 08:03 | After I go through all the images, we
make sure that we close the directory,
| | 08:06 | it's just a good practice, and then
after that we're going to perform a sort, so
| | 08:10 | when the images are displayed, they
are displayed in alphabetical order.
| | 08:14 | There is no guarantee that the files
will be displayed in alphabetical order,
| | 08:18 | so we have to do that.
| | 08:20 | Then we go through another loop, that
for every item in the array, it stores the
| | 08:25 | item temporarily in this variable
called value, and then it just prints it out.
| | 08:29 | So this will just print out each
copy of that image tag, and that's what
| | 08:34 | generates this page right here, that is
a page that has just the list of images.
| | 08:40 | And now if you remember from the week
four version of the jQuery Script, all
| | 08:44 | the jQuery Script needed was a
list of images to generate the rotator.
| | 08:49 | So I'm going to go back into that page
that's rotating all the images, and if I
| | 08:53 | take a look at the source code for
that page, you'll see that it's already
| | 08:58 | getting the version of the image.
| | 09:00 | How is it getting that?
| | 09:01 | Remember that when you look at the
source code of a PHP page, it's never going
| | 09:06 | to show you the code, it's always
going to show you the results of the code.
| | 09:10 | So what I've done here on my other file,
which I'll bring into the Editor, I'll
| | 09:16 | click on the index.php file and hit
the Edit button, it will bring it up in a
| | 09:21 | browser, and you'll see that this
code looked exactly like what we had in
| | 09:25 | Chapter 04, except that I'm using a
different command right here, that instead of
| | 09:29 | listing all the images, calls the other
PHP function, and prints out the results
| | 09:35 | of that function within this function.
| | 09:37 | That is called a php include, and that
include calls this rotator.php function,
| | 09:43 | which is this function, does all the magic of
listing the images and puts them right here.
| | 09:48 | By combining these two scripts we're able
to generate a list of images for our rotator.
| | 09:54 | So now, if we add additional images to
our rotator, I'll add 05 and 06 here,
| | 10:00 | once it finishes uploading them, all we
have to do is refresh this browser, and
| | 10:04 | now instead of three images or
four images, we have six images.
| | 10:08 | We've done a lot of things
with just a few lines of code.
| | 10:11 | PHP is super powerful,
especially when combined with MySQL.
| | 10:15 | If you want to find out more about PHP,
make sure you check out our excellent
| | 10:19 | series, PHP and MySQL Essential
Training, as well as other courses in the
| | 10:23 | lynda.com Online Training Library.
| | 10:26 | Don't forget to stay tuned to lynda.com
for another dynamic episode of
| | 10:30 | View Source.
| | Collapse this transcript |
| 016 Loading external pages dynamically with jQuery AJAX| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:03 | This week I am going to show you how
to load external content with jQuery
| | 00:06 | Ajax, so if you need to move something from A
to B into C, then it's time to View Source.
| | 00:12 | Ajax stands for Asynchronous JavaScript and XML.
| | 00:15 | So it's a combination of technologies
that lets you send and receive information
| | 00:19 | from a server without a page reload.
| | 00:21 | It drives the way apps like Facebook
update their content without having to
| | 00:25 | refresh the page, and reduces the
amount of load on your server by letting you
| | 00:29 | update specific elements in your document.
| | 00:32 | Using Ajax has been historically difficult,
because of the way it has to be implemented.
| | 00:37 | Different platforms require slightly
different versions of the code, but jQuery
| | 00:41 | makes it extremely easy to load
things from one place to another.
| | 00:44 | So let's take a look at how you can
easily load, not just another page, but
| | 00:48 | an element within a page and we'll throw in
a little bit of animation for good measure.
| | 00:52 | So let's go into our documents and you're
going to need two pages to make this work.
| | 00:57 | The first page is going to be the
loader, the place where you are going to
| | 01:01 | load things into, you could see that
it's a very simple HTML document with a
| | 01:05 | section right here for the place where
we want to add content that has a link
| | 01:08 | to where the content is going to load
from, as well as the place where we are
| | 01:12 | going to insert the content.
| | 01:13 | Then the other page is going to be
this thumbnails page, this page is just a
| | 01:17 | regular page that has a
section that we want to load from.
| | 01:21 | So right now, if I go to the start page
and click on this, notice, look at the
| | 01:26 | title here, it says Loader.
| | 01:27 | If I click on this, it is going to take
you to other page which is titled Slides.
| | 01:31 | So you could see that right now this
link is working normally, it's taking you
| | 01:35 | to a separate document.
| | 01:36 | We don't want that, we want the content
from the other document to load up in here.
| | 01:40 | And we've also created some styles for this.
| | 01:42 | It's pretty straightforward styling, so
I am not really going to talk about it.
| | 01:45 | It's just very simple styling to
make this link look a little bit better.
| | 01:48 | We will go back into our start file, and
we'll go into our codesnippets and in
| | 01:53 | our codesnippets we're going to
grab the link to jQuery right here.
| | 01:57 | Go back into start, and I will just
put it right at the bottom of the page.
| | 02:01 | We are going to add this link and
this link takes us to the to the Google
| | 02:05 | CDN version of jQuery.
| | 02:07 | This is currently the latest version
and using the Google CDN, which is the
| | 02:11 | Content Delivery Network, makes your
jQuery load faster, because if somebody has
| | 02:15 | visited a page with this library when
they come to your page, it will already be
| | 02:20 | cached into your browser.
| | 02:22 | Just in case we are working offline, we
also have a piece of code that will load
| | 02:25 | a local version, which is right here, so
that we can work when we are offline.
| | 02:30 | So next we're going to need to add a
little bit of code into this page to make
| | 02:35 | this link not load the
content, like it does normally.
| | 02:38 | So we need to prevent the
default behavior of this link.
| | 02:41 | The default behavior is
to just go to another page.
| | 02:43 | So we are going to do that
with a little bit of jQuery.
| | 02:46 | Go back into codesnippets and we are going
to grab this document.ready(function),
| | 02:50 | and go back into start.
| | 02:51 | We'll need to add a script tag, and
inside the script tag we are going to
| | 02:58 | paste that piece of code, and what this does is
it waits until the document has finished loading.
| | 03:03 | That's what this document ready function means.
| | 03:05 | Once the page has loaded, then we look
for a link inside this addcontent id.
| | 03:12 | So here is the addcontent id.
| | 03:14 | We only want to target links within
that section, you don't want to target all
| | 03:18 | the links in your document, just the
ones that are in the section that we want
| | 03:21 | to load content into.
| | 03:22 | And if somebody clicks on one of
those, then it's going to execute this
| | 03:25 | function called e, and e will
store information about our click.
| | 03:30 | Then jQuery will let us prevent the
default behavior of that link, which means
| | 03:35 | that when we do this, and I'll click on
this link, the link no longer takes us
| | 03:39 | to the other document.
| | 03:40 | So it's preventing its default behavior.
| | 03:43 | Now that's not very interesting.
| | 03:44 | So I am going to go back into
codesnippets and grab the next version of our file.
| | 03:48 | So this is where the magic happens.
| | 03:51 | Here's where we're going to load content
from the other page into our start page.
| | 03:54 | So I am going to grab this code and
replace it, and right here we've got the
| | 03:59 | same thing going preventDefault behavior,
but after that we are saying, okay, I
| | 04:03 | want you to find the section in this page
called inserthere, which is over here,
| | 04:08 | and I want you to load something into
that section.
| | 04:11 | What I want you to load is from the
link that we clicked on, but I don't want
| | 04:15 | you to load the entire page, because
otherwise this page would have two body
| | 04:18 | tags and two head tags and all that stuff.
| | 04:21 | So we want to load just a section
called thumbnails.
| | 04:23 | If you go to the thumbnails page, remember,
we created this div with an id of thumbnails.
| | 04:28 | So it's only going to load
the content from that part.
| | 04:30 | I'm going to save this, refresh
over here, click on this, and boom!
| | 04:34 | We've just loaded something from
one page to another using jQuery Ajax.
| | 04:38 | Super, super simple.
| | 04:39 | I guarantee if you had to do that with normal
JavaScript, it would take you a lot more code.
| | 04:44 | So let's make it a little better.
| | 04:46 | We are going to add a little bit of
animation on to this, so we cold fade the
| | 04:50 | content when it comes in from another page.
| | 04:52 | Back into our codesnippets, we'll grab
the next version of the function, copy
| | 04:56 | it, and go back into start, replace
this right here, and all we have done is if
| | 05:04 | you remember the code before it
ended right here, when we clicked on the
| | 05:07 | function, if we look now, we'll see
that after we load the thumbnails, then I'm
| | 05:13 | going to first hide the thumbnails
before I display them, and then I'm going to
| | 05:17 | wait for 100 milliseconds, just a
little bit of a wait, and then I'm going to
| | 05:21 | fade the content in by 500 milliseconds.
| | 05:24 | So if we save this, and we click on this
page, you will see that the content fades in.
| | 05:28 | It's important to first hide the
content and then show it, because whenever
| | 05:33 | we're loading it we're
automatically showing it.
| | 05:35 | So if we didn't hide it, it would
not show you the content fading.
| | 05:39 | It would just show it and then fade it in,
which will be the same as just showing it.
| | 05:43 | So we want to first hide it, and if we
want a little bit of suspense we can add
| | 05:47 | a delay right there, and after that then
we can add a fadeIn and we can control
| | 05:51 | how long these things are by
changing this value of milliseconds.
| | 05:55 | So we can make this twice as
long by putting in 1000 here.
| | 05:58 | Now when we click, it's a little bit slower.
| | 06:01 | You can make it take however many seconds you
want, and there, that one takes two seconds.
| | 06:07 | I think that's a little bit too long.
| | 06:09 | We'll just keep at 500 milliseconds.
| | 06:11 | You don't really need this delay, but it
just adds a little bit of suspense there.
| | 06:14 | So we'll keep that.
| | 06:15 | Now we will go to the next version of
our codesnippets, and in this case, we
| | 06:19 | want to remove this load
thumbnails after the content has loaded.
| | 06:24 | There is no reason for a link to load
thumbnails when the thumbnails are already in here.
| | 06:28 | Clicking on it, it's just going to reload the
content, so we need to get rid of this link.
| | 06:32 | So I am going to grab a different version of
this code and go back into a start document.
| | 06:36 | I'll replace this right here.
| | 06:38 | So when I load this content, I'm
going to add an additional element to our
| | 06:42 | loading function that does
something when the loading is complete.
| | 06:46 | So this is very, very typical of jQuery.
| | 06:48 | You target something, then you do
something to that target, and then you can
| | 06:52 | string a series of commands together,
like hiding something and fading something
| | 06:55 | in, but you can almost always do
something after something happens.
| | 06:59 | So here when we load this content,
instead of just loading the content, we can
| | 07:04 | execute something when this is complete.
| | 07:07 | So when it's finished loading the page,
we can add another function and the code
| | 07:12 | of the function is essentially right here.
| | 07:14 | It's a normal function, but we want to
do something in here, and what we want
| | 07:17 | to do is target the addcontent div right here,
find any links inside that area, and remove them.
| | 07:24 | So by adding this additional function
we have told jQuery to do something after
| | 07:30 | this loading is complete.
| | 07:32 | So what that will do is, we'll save this,
refresh, and we'll load up our thumbnails.
| | 07:36 | You see that as soon as I click on
the thumbnails, the link to load the
| | 07:39 | thumbnails is now gone.
| | 07:41 | So once you get used to stringing
different commands in jQuery, you'll see that
| | 07:46 | doing something after something happens
is one of the core concepts in jQuery.
| | 07:51 | Now make sure you check lynda.com.
| | 07:52 | We've got a lot of different
excellent tutorials on jQuery and Ajax.
| | 07:58 | So don't forget to check out
the Online Training Library.
| | 08:00 | And remember, when your favorite
sport is playing with tags, then you'll
| | 08:05 | probably love to View Source.
| | Collapse this transcript |
|
|
4. Week Seven013 Creating a photo gallery with the Galleria jQuery plug-in| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:02 | In this episode, I'm showing you how
to create galleries with a JavaScript
| | 00:06 | library called Galleria.
| | 00:07 | So if you're looking for a quick and
easy way to add photos to your projects,
| | 00:10 | then it's time to View Source.
| | 00:12 | Being able to show photo galleries
on your web sites is really important,
| | 00:16 | because photo galleries get a lot of
traffic, but rolling out an engine to
| | 00:19 | create photo galleries is not fun.
| | 00:21 | There are a lot of scripts and
libraries out there that will simplify the
| | 00:25 | process, and I like one called Galleria,
because I like things that are, one;
| | 00:30 | cheap and free and, two, easy to
use and set up.
| | 00:33 | One of the advantages to using
Galleria is that it also works well with iOS
| | 00:37 | devices, and allows you to navigate
through the photos by using touch events.
| | 00:42 | The Galleria plug-in sits on top of
jQuery, so it's super compatible with a
| | 00:46 | lot of browsers, and it has a lot of
animation and other features that you can customize.
| | 00:52 | The first thing you're going to
need to do is to download the plug-in.
| | 00:54 | So we'll click on this Free Download
button to get the download started, and I'm
| | 00:58 | going to click right here on this link
to open up the files and activate it.
| | 01:03 | So once you download the folder,
you'll want to copy these into your project.
| | 01:08 | Here's the galleria folder, you'll see
that I already have it copied into my
| | 01:11 | project, and the only thing that I've
done here is I've taken out the regular
| | 01:15 | JavaScript version of the project;
| | 01:17 | we don't need two versions of JavaScript,
the minified version, or the one that
| | 01:20 | has .min, it's a more
compact version of the library.
| | 01:24 | So it's the only one that I'm using here.
| | 01:26 | Inside the galleria folder, you'll also find
a themes folder as well as a plugins folder.
| | 01:31 | Plugins folder allows you to work with
other libraries, like Flickr and Picasa.
| | 01:36 | In the themes folder, you'll see that we have
one standard theme called the classic theme.
| | 01:42 | You can purchase additional themes from
the Galleria web site if you want, but
| | 01:46 | the classic one is a really
good theme and it's totally free.
| | 01:50 | Now, if we take a look at our document,
we have a simple list of images right
| | 01:55 | here and all the images are put together
inside a div tag with an id of gallery.
| | 02:00 | We're going to use that to
target our gallery function later on.
| | 02:04 | Some of the images have alt tags that
have the description of the photo and
| | 02:09 | title tags that have the title of the photo.
| | 02:11 | Galleria will use that to add
them on to your photo gallery.
| | 02:15 | Those are optional, so you don't always
have to use them, but it's nice to have
| | 02:18 | them in there, and gives the user some
additional information about your photos.
| | 02:22 | So now we need to start adding
the scripts into our projects.
| | 02:26 | So I'm going to go into my codesnippets
file and grab a link to Google's CDN
| | 02:30 | version of jQuery, which I also have a
local copy of right here just in case
| | 02:36 | I'm working offline.
| | 02:37 | So I'm going to copy this script right
here, and go into our start document and
| | 02:42 | I'm going to paste that right before
the closing body tag, so that we are
| | 02:46 | loading our library from jQuery.
| | 02:50 | Now, I'm going to open up a preview by
holding down the Option key and clicking
| | 02:53 | on this Preview icon, this is a live preview.
| | 02:55 | You see that this is just a list of
photos right now, we have loaded the jQuery
| | 02:58 | library, but we haven't activated the
Galleria plug-in yet, we need to do a
| | 03:02 | couple more things.
| | 03:03 | Back into codesnippets, I'm going to
grab the link to the library itself, so
| | 03:07 | this is just a link to the galleria
library, it's in the galleria folder, and
| | 03:11 | it's the one that we loaded right there.
| | 03:13 | So I'm going to copy that, and go
back into the start document, after the
| | 03:17 | script tags, and I'll paste it right there,
and now we have loaded the Galleria plug-in.
| | 03:21 | We're still not telling it what to do
or which id to use for the photo, so this
| | 03:25 | is going to look the same.
| | 03:26 | Back into codesnippets, we're going
to grab the link to the themes folder.
| | 03:30 | So if you were targeting a different
theme other than classic, you'll want to
| | 03:34 | put the link to the
proper JavaScript file there.
| | 03:36 | So I'll copy that, and back into my start
file, after the galleria plug-in, paste
| | 03:41 | the script right there.
| | 03:42 | And we're almost done, we still haven't
told the Galleria plug-in to become active.
| | 03:46 | So we're going to go back into
codesnippets and we're going to grab this last
| | 03:49 | little piece of script right here, and
paste it into our start document, and that
| | 03:53 | will actually activate the gallery.
| | 03:56 | So if you go to your Live Preview, you
can see that the gallery has been created
| | 04:00 | and all the thumbnails are at the
bottom and you can navigate through the
| | 04:03 | thumbnails by clicking on them.
| | 04:05 | It even gives you a little arrow just
in case you have more photos that fit
| | 04:08 | on that one screen.
| | 04:10 | It allows you to navigate
with left and right buttons.
| | 04:12 | So this was a really easy setup.
| | 04:15 | There's one thing that I don't like about
the way that the template works by default.
| | 04:19 | In order to see the titles you have to
click on this i right here and it shows
| | 04:23 | you the title and description.
| | 04:24 | So I'm going to modify this photo
gallery a little bit and add a little bit of a
| | 04:28 | background just by adding a little bit of CSS.
| | 04:30 | So I'm going to go into codesnippets,
and I'm going to grab just a link to a CSS
| | 04:34 | file that I created, back into my start
document, and I'm going to put that at
| | 04:39 | the very top, on top of the head tag,
and once I do that you can see that I have
| | 04:43 | a nicer background, the title and
description are showing up by default, the
| | 04:48 | interface has rounded edges and a drop shadow.
| | 04:51 | So this is just a standard CSS file that I used
to make things a little bit more to my liking.
| | 04:56 | That's the nice thing about this
plug-in, it's highly customizable.
| | 05:00 | Now, this looks great on your local
machine, so when you have this on your hard
| | 05:04 | drive, this is going to load up really quick.
| | 05:07 | When you put this on your server, you
may notice that there's a little bit of
| | 05:10 | lag between the time that the
photos are loaded and the time that the
| | 05:15 | Galleria plug-in takes over.
| | 05:16 | So when you see them on screen, you may
see all the photos come in at once, and
| | 05:20 | then the interface will adjust and the
Galleria plug-in will actually take over
| | 05:24 | and format everything accordingly.
| | 05:26 | So if you have that problem, I
want to show you a quick workaround.
| | 05:29 | What I'm going to do is I'm going to go
into my codesnippets file, I'm going to
| | 05:32 | modify the way this gallery id works.
| | 05:35 | So I'm going to go into my style sheet,
and right now I'm just showing the
| | 05:39 | gallery with this additional line.
| | 05:41 | I'm actually setting the opacity
to 0, which will hide the gallery.
| | 05:45 | Then I'm going to grab a piece of code
right here, at the very bottom, which
| | 05:49 | just changes our script, just adds this
little last piece right here, and what
| | 05:52 | it does is, once the window has finished
loading all the photos, then it changes
| | 05:56 | the opacity of the gallery id to
1, which will show the gallery.
| | 06:00 | So I'm going to copy the script and
replace what I have on screen, back into my
| | 06:04 | start file, go all the way to the
bottom, and just replace the script that I
| | 06:07 | have here, paste it, and now you'll
see that in our local version of the
| | 06:12 | gallery, it looks exactly the same.
| | 06:14 | The difference will be on the server, when
you have a slide show, with a lot of photos.
| | 06:20 | It's not going to load the gallery
until all the photos have finished loading,
| | 06:23 | and that's the best way
to show off this gallery.
| | 06:26 | So see you next time, and remember
that when you want to learn how to do cool
| | 06:29 | things on the web, the
best way is to View Source.
| | Collapse this transcript |
| 014 Selling your photos with Fotomoto| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:02 | In this episode I want to show you
an easy way to sell photos with a
| | 00:06 | product called Fotomoto.
| | 00:07 | I like Fotomoto a lot because it's easy
to set up and handles a wide variety of
| | 00:12 | JavaScript libraries and plug-ins.
| | 00:14 | So whether you want to sell your photos
from your WordPress blog, or your custom
| | 00:18 | web site, you can do it
easily with this service.
| | 00:21 | So let's get ready to View Source.
| | 00:23 | I think there's a photographer in
every one of us and sometimes the toughest
| | 00:27 | barrier to selling photos is fulfillment.
| | 00:30 | Taking care of printing, shipping,
getting credit card information and
| | 00:34 | everything related to
actually selling the photo.
| | 00:37 | Although I'm not a full-time
photographer, I like to take panoramic photos of
| | 00:40 | the different cities that I visit,
and I often post them on Flickr.
| | 00:45 | Occasionally, I'll get a request from
somebody who sees the photos and wants
| | 00:48 | to purchase them, and in the past
I've used a really long process that
| | 00:52 | requires a combination of sending
them a contract, getting them to sign it,
| | 00:56 | sending me money via PayPal.
| | 00:57 | So I found this cool service called
Fotomoto that takes care of all the
| | 01:00 | e-commerce parts of selling your photos
and lets you just kind of take the photos
| | 01:04 | and post them on a web site.
| | 01:06 | It works with a lot of different
engines so you can very easily set up the site
| | 01:10 | that you want with the photos and
not worry about the fulfillment part.
| | 01:14 | You will need to sign up to Fotomoto
to get started, but it's a free sign up
| | 01:18 | so you don't need to pay them anything, so
there are no monthly fees, no annual fees.
| | 01:22 | After you sign up, you'll get a Login,
and I'm going to log in to my account
| | 01:26 | here, and once you log in, you'll
have the option of setting up a store.
| | 01:34 | So you have a Dashboard where you can
log in and see everything in an overview.
| | 01:39 | You can see the different
stores that you have set up.
| | 01:41 | And the cool thing about the stores is
that when I want to add a photo, I don't
| | 01:46 | have to upload the photo to Fotomoto,
I simply add it to my web site and
| | 01:50 | Fotomoto picks up the images automatically.
| | 01:53 | I can also take a look at my orders and
mess around with the settings for my store.
| | 01:58 | So if I click on Settings, you
can see that I can specify which
| | 02:01 | publishing platform I'm using.
| | 02:03 | So I'm going to click on this;
| | 02:04 | you can see that it supports a wide
variety of scripts and different photo libraries.
| | 02:09 | Once you setup a publishing platform,
then you can get the script, and all you
| | 02:14 | have to do is copy and
paste that into your web site.
| | 02:17 | Now, setting up a store is pretty easy,
you just go to your Dashboard and click
| | 02:21 | on Add Store, and you're going to need
to give it a store name, and then give it
| | 02:27 | a web site address for your store.
| | 02:31 | I can either choose to copy from previous
pricing or say that I will enter new prices.
| | 02:36 | You can control everything about your
store, including how much you charge for
| | 02:40 | each one of the photos.
| | 02:41 | Of course, Fotomoto does take a cut of
everything you sell, so just make sure
| | 02:45 | that you're comfortable with the amount
of money that you're going to be making,
| | 02:48 | taking into account how much they're
going to take, and the pricing varies
| | 02:52 | depending on the product.
| | 02:53 | You can also choose what kind of
things you want to sell, and one of the nice
| | 02:56 | things about Fotomoto is that unlike
other things, it handles downloads, which
| | 03:00 | is the primary thing that I do.
| | 03:02 | When somebody sees a photo that they
like on Flickr, then usually they want to
| | 03:07 | download a high-res version so they can
produce whatever they want to, whether
| | 03:11 | it's a card or put it in a
brochure or something like that.
| | 03:14 | So I like that Fotomoto has a download option.
| | 03:17 | So from here you can choose which kind of
prints you want and whether or not you want eCards.
| | 03:22 | Usually I just set up downloads
and maybe some type of prints.
| | 03:25 | So you can set up a percentage profit
margin, which you can later change for
| | 03:29 | each individual item.
| | 03:31 | And now you can select a Platform right here.
| | 03:34 | So you can select say, if you're using
something like Galleria, which I use on
| | 03:38 | my projects, I can say, None, I have
a custom web site, and you can also
| | 03:43 | select right here which Library you're
using, and you can see that Galleria is
| | 03:47 | listed right there.
| | 03:48 | So I can say Finish, and it
gives me a custom script for that
| | 03:52 | particular library.
| | 03:53 | So I can copy that script and say, I'm
Done, Take me to the Dashboard, and I can
| | 03:59 | simply go into my site and paste
the script and I have a full store.
| | 04:03 | Now, I've already done that on my web
site, so you can see here's my store, and
| | 04:07 | right on top of the photos I have a
Download link and a Buy Print version, and
| | 04:12 | all I have done to do that is, let
me show you where I paste the script.
| | 04:16 | I'm going to view source on this page,
so you can paste that script into your
| | 04:21 | document and it will
automatically show the buttons.
| | 04:24 | Now, I've added a little bit of
styling to my buttons, so I'm going to click
| | 04:27 | here to show you that all I have is a few
additional classes to add those on top of my photos.
| | 04:34 | Now, once you add that into your sites,
then all you have to do is click on
| | 04:39 | one of these buttons.
| | 04:40 | So I'll click on this Download button,
Fotomoto will take over on top of my web
| | 04:44 | site and allow me to buy different
versions of the photos at different prices,
| | 04:49 | which I can control on the interface.
| | 04:52 | So if I say Buy Print,
it will do the same thing.
| | 04:54 | Bring up the prints;
| | 04:55 | bring up the different prices for the prints,
which again, you can control from your store.
| | 04:59 | So this is just a very, very easy
and quick way of selling photos.
| | 05:03 | There are a lot of different options
out there, but I like that they don't have
| | 05:07 | any annual fees or beginning fees,
and they tie into a lot of different
| | 05:12 | libraries and scripts, and it's
something that you can use even with WordPress.
| | 05:16 | So see you next time, and remember
that when you want to learn how to do cool
| | 05:20 | things on the web, the
best way is to View Source.
| | Collapse this transcript |
|
|
5. Week Six011 Parsing and placing a YouTube video feed on your site| 00:00 | Hello! This Ray Villalobos and welcome to
View Source!
| | 00:03 | In this episode we're going to use PHP to
load a feed of content from a YouTube channel.
| | 00:08 | So if you want to know how to take
content from one web site to another, then
| | 00:11 | it's time to View Source.
| | 00:13 | We want to use Google's APIs or
Application Programming Interface to take
| | 00:17 | content from our YouTube channel
and post it on a different web site.
| | 00:21 | In our case, we want to take the feed
of latest videos from this lyndapodcast
| | 00:26 | channel and place it into our own web site.
| | 00:28 | We're going to be working with PHP, a
server-side technology that processes
| | 00:33 | files before they are sent to the site visitor.
| | 00:36 | So instead of working with local
files on this project, I'm going to be
| | 00:39 | working on a live server.
| | 00:40 | In order to access the files on the
server, I'm going to use an FTP application,
| | 00:44 | in this case Cyberduck.
| | 00:46 | To get this to work, we need to make sure
our servers are geared up for two things.
| | 00:50 | First, the particular function that
we're going to use to accomplish this
| | 00:54 | task is a new function, so we want to
make sure that we're using the latest
| | 00:57 | version of PHP, PHP 5.
| | 01:00 | The second thing we need to make sure is
that our server allows us to read files
| | 01:04 | from external file sources.
| | 01:07 | Some servers prevent this from happening,
and some older servers are not setup for PHP 5.
| | 01:12 | So to check those two things, we're
going to open up this index.php file that
| | 01:16 | I've already placed on my server.
| | 01:18 | So I'm going to hit the Edit button to
open it up in the text editor, and this
| | 01:21 | is just a plain HTML file with nothing in it
except for a tag where I can put in PHP commands.
| | 01:28 | So right in here I'm going
to add the words phpinfo();
| | 01:35 | and I'm going to save that, and
I'm going to refresh this right here.
| | 01:38 | Whenever you run a phpinfo command, PHP
will output a lot of things about your
| | 01:42 | server, including at the very top, the
current version of the server, which is 5.
| | 01:46 | So in this case that's great.
| | 01:48 | If I scroll down a little bit right
here, I'll start seeing the PHP Core
| | 01:53 | Configuration, and the second thing on
the PHP Core Configuration is the allow
| | 01:59 | your allow_url_fopen command, we can
see that, that has been turned on, so in
| | 02:03 | this case that will work fine.
| | 02:05 | If either of those two things are not set up
properly, then our project is not going to work.
| | 02:10 | So if you know that your server
supports PHP 5, but it's not turned on, you can
| | 02:15 | add an .htaccess file, which is an
invisible file that redefines the way the
| | 02:19 | server Apache runs on your machine.
| | 02:22 | And I can issue it a command, I've
already created it here, you can right-click
| | 02:27 | and select New File to create the file.
| | 02:29 | I've already done it here, I'm going to
open this file up in my text editor and
| | 02:33 | show you what I've typed in here.
| | 02:34 | So by adding this AddType command, I
have now told my server that I want to make
| | 02:39 | sure that any files within this
folder are going to run on PHP 5.
| | 02:43 | So the second problem is to make
sure this allow_url_fopen is turned on.
| | 02:48 | To fix that, you can create a php.ini
file, and if you edit that, you'll see
| | 02:53 | that we can turn features on and off by
putting them in this file and changing a command.
| | 02:58 | In this case, we want to
allow_url_fopen to be on.
| | 03:01 | If you do both of those things and
you save those two files to your servers,
| | 03:05 | anything running in this folder will
run in PHP 5, and will have that function
| | 03:10 | turned on, which is what we
need for this project to work.
| | 03:13 | Now, you don't want to leave phpinfo
on your server running, because other
| | 03:17 | people can find out all sorts of
information that you don't want them to
| | 03:19 | know about your server.
| | 03:20 | So I'm going to take that out and save it,
and I'm going to start working on my project.
| | 03:24 | So what we want to do is
load up a feed of content.
| | 03:27 | YouTube publishes feeds of the data that
comes from our YouTube channels, and it
| | 03:33 | publishes them to URLs that you can grab.
| | 03:36 | So if I grab this URL right here, I
can pull that up in a browser and take a
| | 03:40 | look at the raw feed of content,
which I've done right here.
| | 03:43 | Now, this is a little hard to read,
but you could see that there is a lot
| | 03:46 | of information there;
| | 03:47 | about the project, the title of the
channel, and there is some information about
| | 03:51 | the specific courses that are on that list.
| | 03:54 | That's really hard to read.
| | 03:56 | If you go to the Google Developers
Data API, and you go to this URL and scroll
| | 04:00 | down, you could see a list of how that
feed would look like if it was formatted
| | 04:05 | in an easy to read way.
| | 04:07 | So you could see that the feed itself
has information about the title, it has
| | 04:11 | the logo, it has a bunch of links,
and other information down here.
| | 04:14 | It also has a series of entries for
each podcast, for each item in the list, so
| | 04:20 | you can grab that information about
each individual video and parse it, and
| | 04:24 | create the list of videos that we want.
| | 04:25 | We don't need all this data;
| | 04:26 | we just need certain parts of it.
| | 04:28 | So I'm going to go back here and copy
this first piece of code, this is going to
| | 04:32 | read the file that we specified right
here, the lyndapodcast, into a variable,
| | 04:38 | and then it's going to go to that
XML feed and just print out the names.
| | 04:41 | So I'm going to copy that, paste it over this,
save it, and I'm going to refresh my page.
| | 04:47 | You can see that it's giving us right now
the author name, which is just lyndapodcast.
| | 04:51 | If we want to get a little bit more
information, we can go through each entry of
| | 04:57 | the lyndapodcast feed and
print out the title for that entry.
| | 05:01 | So what I'm going to do here is
grab this code, paste it right there.
| | 05:06 | And what it's going to do now is
instead of just printing the author name, it's
| | 05:10 | going to print the first entry's title.
| | 05:12 | You could see that the notation there
says, go to this thing that I read, then
| | 05:16 | find the first entry.
| | 05:17 | In PHP and other languages, the
first entry is actually entry 0.
| | 05:22 | And then print out the title.
| | 05:23 | So I'm going to save that, and come over
here and refresh, and you can see that
| | 05:27 | the latest title in that
podcast is iOS 5 SDK New Features.
| | 05:32 | So if we wanted to print all the
entries out, we would need to create
| | 05:35 | what's known as a loop.
| | 05:36 | So it's just a way of going
through a lot of different content.
| | 05:40 | In this case, there's a lot of
different entries, so we want to be able to go
| | 05:43 | through all of them.
| | 05:44 | So I am going to replace this right
here, save it, and refresh, and now I'm
| | 05:48 | going to get a link of some
of the courses in that podcast.
| | 05:51 | Notice that I created variables right here
that determine which podcast I would start from.
| | 05:56 | So you don't have to print out the first
podcast, you could start at the second or third.
| | 06:00 | How many I'm going to print, and also
this variable pixsize, that's going to set
| | 06:04 | up something later on to pick
the small versions of our photos.
| | 06:08 | What I'm doing here is creating a loop.
| | 06:10 | The loop is going to go and do
what it did before, just print out
| | 06:13 | each individual entry.
| | 06:15 | So the next version of our code just
takes that, and from that XML feed I need
| | 06:23 | to get something called the
ID of the individual video.
| | 06:27 | Each video in YouTube has a unique ID.
| | 06:30 | Once I know that ID, I can
create all kinds of links to things.
| | 06:34 | So I'm going to copy that and replace
this version of the code, paste it, save
| | 06:39 | it, and I'm going to refresh here, and
you're going to see that all we're doing
| | 06:43 | here is printing out the IDs.
| | 06:45 | To get the IDs, we took this part of
the XML feed called myentry, and then id,
| | 06:50 | and then took out part of it so that it
only shows the individual ID, which we
| | 06:55 | can use to do all kinds of things, like call
the photos and call the links to the videos.
| | 07:01 | So the last version of
our file does exactly that.
| | 07:05 | I'm going to grab this, copy it,
paste it instead of this, and this last
| | 07:11 | version, it's doing the same thing as
before, but at the very end I use the ID
| | 07:16 | that I picked up to actually create an
anchor tag to the YouTube video, as well
| | 07:21 | as an image tag to a copy of a JPEG file.
| | 07:24 | I'm going to refresh that, you can see
that I get all the thumbnails to all of
| | 07:29 | the different videos.
| | 07:30 | And if I click on any one of those
videos, it will take me to the YouTube page
| | 07:34 | that has the video that I want to watch.
| | 07:38 | So it really sounds like a lot, but it's
just a bunch of stuff that takes a feed
| | 07:42 | and is able to understand what's in that feed.
| | 07:45 | Once you understand how to access the
different elements, you can take a look at
| | 07:48 | this code and grab anything from
any web site that generates a feed.
| | 07:53 | For more information about PHP, make
sure you check out the lynda.com Training
| | 07:57 | Library where we have some amazing
courses on PHP and other server technologies.
| | 08:02 | And don't forget to keep on
checking back to View Source.
| | Collapse this transcript |
| 012 Embedding videos for all browsers and devices| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source.
| | 00:03 | In this episode, I'm going to show
you how to create a page that serves
| | 00:06 | video to regular browsers and iOS
devices without having to recompress the
| | 00:10 | files in multiple formats.
| | 00:12 | How is that possible? Let's View Source.
| | 00:14 | HTML5 tags are revolutionary.
| | 00:17 | Theoretically, it's possible to embed
video or audio in a web site by adding a
| | 00:21 | simple tag that's as easy
to use as the image tag.
| | 00:25 | The problem with using this tag is that
older browsers do not support the media
| | 00:29 | tags, but there's another problem.
| | 00:31 | Newer browsers do not support the same format.
| | 00:34 | Almost every major browser
supports a slightly different file format.
| | 00:38 | So if you want to show one video to
every browser, you might have to encode
| | 00:42 | files in WebM, Ogg, and MP4.
| | 00:45 | Here I have what should be
the way all browsers work;
| | 00:47 | you have a simple video tag that links with
the source attribute to a file on your site.
| | 00:54 | You specify a width and a height and
controls, so that shows the controls that
| | 00:57 | people can use to play, pause,
and scrub through the movie.
| | 01:00 | So I am going to copy that, and paste
that into this video player, and I am
| | 01:06 | going to save this file.
| | 01:06 | I'm working with files
that are stored in a server.
| | 01:09 | So now that I've placed the files
on the server, I'm going to pull up
| | 01:12 | Safari and load this file.
| | 01:14 | So as you can see, the file
loads up fine and it plays in Safari.
| | 01:19 | If I try to pull up the same file in
Firefox, although I see the default player
| | 01:24 | for Firefox, I can't see the video.
| | 01:26 | It's not that Firefox doesn't
understand the HTML5 video tag;
| | 01:29 | it's that it doesn't understand
the format that this video is in.
| | 01:33 | In order to support as many browsers as
possible, I would like to use Flash for
| | 01:37 | desktop browsers and HTML5 for iOS
devices, since if I choose a Flash only
| | 01:43 | solution, iOS devices will not
be able to understand Flash video.
| | 01:48 | Now one problem that you might run into
when testing this solution out on your
| | 01:51 | local machine is that Flash is picky
about access to external files, and this is
| | 01:56 | the reason why I am working off of
a live server.
| | 01:59 | So if you are working on local files,
make sure you upload into a server before
| | 02:03 | you preview your solution.
| | 02:05 | So what I like to do is use a video
player called flowplayer that is a
| | 02:09 | free Flash-based player that
works great on all desktop devices.
| | 02:14 | So I am going to hit the Download link
right here, and I'm going to scroll down
| | 02:18 | so you can see the different licenses
that I can get.
| | 02:20 | You can get commercial licenses for
this product, but I like the free license.
| | 02:24 | So I am going to use that.
| | 02:25 | So I'll click on Download
and it will download the file.
| | 02:28 | Once it decompresses, you'll get a
folder with a series of documents.
| | 02:32 | You are going to need these two SWF
files right here as well as some of the
| | 02:37 | information in the example.
| | 02:38 | From the example folder, you
are going to need this flowplayer
| | 02:41 | JavaScript document.
| | 02:42 | I've already copied those on to my
server, you can see the flowplayer is right
| | 02:46 | here and the two SWF files are right underneath.
| | 02:50 | So now I need to load my JavaScript
libraries because I am going to be using
| | 02:53 | JavaScript in order to make this work.
| | 02:56 | So I need to go right here and
copy the scripts for this file.
| | 03:00 | So I need to call my own JavaScript
file where I am going to write a script
| | 03:03 | to detect whether or not the device is an
iOS device, as well as the flowplayer script.
| | 03:07 | So I am going to copy that and
open up my index.html document.
| | 03:12 | Hit the Edit button here, and I am
going to add that to my head section right
| | 03:16 | here, add the two calls to the script.
| | 03:19 | I already have the
scripts loaded up on my server.
| | 03:21 | You can see this script is already right there.
| | 03:23 | So I am going to save that, and I
also need to modify my video tag so that
| | 03:28 | it's not the HTML5 tag, but it's a call to
function that I've defined in myscript document.
| | 03:34 | So I am going to copy that, and come up
here, replace my video tag with the new
| | 03:39 | version that's my JavaScript call.
| | 03:41 | So this particular function is going to
take the name of the video file that I
| | 03:45 | want to play, as well as dimensions, and
then a player name that will be something
| | 03:50 | I can target with CSS.
| | 03:52 | So after I do that, I have a
couple of versions of this function.
| | 03:57 | So one way to attack this problem
would be to build a function that works only
| | 04:01 | using Flash as a player, and that is
this first version of my function that
| | 04:07 | essentially uses the
flowplayer to play the files.
| | 04:10 | I have the two calls that I would
normally use just to use flowplayer and I
| | 04:13 | have a call to a method right here that
gives flowplayer a couple of variables.
| | 04:17 | The other option is to use this
modified version of the form that actually
| | 04:21 | checks the user agent, that means it
checks to see which browser is trying to
| | 04:26 | access this document, and then
determines if the browser that is using this
| | 04:30 | document comes from an iPhone, an iPod,
or an iPad and if it does, then it uses
| | 04:36 | the same video tag that we used before.
| | 04:38 | Otherwise, it's going to use the normal
flowplayer and that's what we have done
| | 04:43 | in our version of the myscript file.
| | 04:48 | We'll make that little
bigger so you can see it better.
| | 04:51 | So you could see that this takes the
information from the script, if the device
| | 04:55 | is an iOS device, then it just
writes out the normal video tag.
| | 04:59 | If it's not an iOS device, then it
uses flowplayer to display the video.
| | 05:04 | So now I'm going to save the
script, and I'm going to pull this up in
| | 05:08 | Firefox, reload this page, and you can see
that the flowplayer takes over and I am
| | 05:13 | going to go Safari, refresh this page, once
again flowplayer is taken over on desktop devices.
| | 05:20 | So now, it not only plays on desktop
browsers, but will also play on any iOS device.
| | 05:25 | So I wouldn't count out Flash just
yet, it's an especially good solution for
| | 05:29 | delivering online video,
especially for older browsers.
| | 05:32 | Tune in next time and don't forget that
to solve just about any online project,
| | 05:36 | sometimes the best solution is to View Source.
| | Collapse this transcript |
|
|
6. Week Five009 Adding custom Twitter searches and feeds to your sites| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source.
| | 00:03 | In this episode I'm going to show you how to
place custom Twitter feeds on any web site.
| | 00:08 | So stop flooding the Twitterverse,
because it's time to View Source.
| | 00:12 | Twitter is an amazing network that
lets people communicate with each other in
| | 00:15 | 140 words or less, although it's often
misunderstood, and people do tweet about
| | 00:20 | seemingly meaningless things.
| | 00:22 | One way I like to use Twitter is to generate
feeds of information about a specific topic.
| | 00:27 | There's a lot of ways that you
can include Twitter on your sites,
| | 00:29 | including several WordPress plug-ins
and hacks, but my favorite way is to
| | 00:34 | use Twitter's own widgets.
| | 00:35 | So you can find Twitter Widgets at
this URL, and you can see that you can
| | 00:39 | create different types of widgets
based on profiles, different searches,
| | 00:44 | favorites that you start within
your own Twitter feed, or list widgets.
| | 00:48 | You can create a profile widget if you want
to create a widget following a specific person.
| | 00:52 | So you simply put the name of the
person, or the name of the Twitter person that
| | 00:56 | you want to create a widget for, and
then you have a lot of options about the
| | 01:00 | appearance, so which colors, which backgrounds.
| | 01:04 | And the dimensions that you want to use
here; I prefer to use auto width right
| | 01:09 | here to just make the width of the
element be whatever width I want, and you
| | 01:13 | could include other things here
like the scrollbar or other behaviors.
| | 01:17 | So once you're done customizing,
| | 01:18 | and that is a pretty ugly customization,
let me see if I could do a little
| | 01:23 | better, then you can click on Finish &
Grab Code, and it will spit out a bunch of
| | 01:29 | code that you can place on your web site.
| | 01:31 | So let's go back and show you a couple
of the other options, because some of
| | 01:35 | these are pretty cool.
| | 01:36 | You could do a search for a specific
topic, so if you want to find out about, say
| | 01:42 | Star Trek and how that topic is trending.
| | 01:44 | We'll click on Test settings, and you
could see that immediately you'll get
| | 01:51 | a widget that auto-updates with the latest
news about the topic that you want to follow.
| | 01:57 | So in addition to that, you can create a
widget only of items that you favored it.
| | 02:02 | So you could have a list on your web
site of your favorite tweets, or things that
| | 02:07 | are important to you.
| | 02:08 | So that's a good way of moderating
what information appears on the list that
| | 02:11 | you have on your site.
| | 02:13 | The last one is also really interesting.
| | 02:14 | You can create a widget where the
information comes from a list that you have created.
| | 02:20 | In your Twitter page you can create
different lists with groups of people,
| | 02:25 | and those groups will be aggregated into
the custom list widget that you place in here.
| | 02:31 | So you can either use your own lists
or find other lists from other people.
| | 02:36 | So you could very easily, say on an
entertainment web site, just add a bunch of
| | 02:40 | celebrities that you are following
and have a Twitter feed only of the
| | 02:44 | celebrities, or have Twitter feeds
about a specific movie or specific group of
| | 02:49 | actors or anything you want.
| | 02:51 | You can create your own list or you
can follow lists that already exist.
| | 02:54 | So let me go back and create
just a regular profile widget.
| | 02:58 | We will go back into My Website
here, click on Profile Widget.
| | 03:01 | I'm going to follow myself and
under Appearance, this looks fine.
| | 03:06 | I'm going to be customizing it outside
of Twitter.
| | 03:08 | Anyways, make sure that I
click on auto width for dimensions.
| | 03:12 | I think that's pretty important, and
then I am going to say Finish & Grab Code.
| | 03:16 | So once I get the code, I'm going to
copy that, and now I'm going to go into my
| | 03:20 | web page, and here I've already pasted
that widget and there's a few things that
| | 03:24 | I've changed that are really, really important.
| | 03:27 | For example, as you saw I
picked already the automatic width.
| | 03:31 | I am going to open up a
preview so we can see how this works.
| | 03:33 | Here's the feed of the content that I
have typed in recently, and you could see
| | 03:38 | that there is a couple things that
I've done here that Twitter doesn't do.
| | 03:42 | If I pasted the normal version of the
widget that I just grabbed, you'll notice
| | 03:46 | that by default we have
this ugly background color.
| | 03:49 | Now one of the things that I could do is
set the background to be none, which is
| | 03:53 | not available as one of the pop-ups on
the widget creator, but it's something
| | 03:58 | that you could do to give
yourself a nice clear background.
| | 04:02 | Same thing, we can create a
background for the theme itself of nothing.
| | 04:06 | That way it's clear.
| | 04:07 | You can also create a background
for your tweets, different colors for
| | 04:11 | your links as well.
| | 04:12 | This is a little bit more customizable
when you play around with the elements in
| | 04:16 | your code right here.
| | 04:17 | See if you wanted to change to a
different user then all you would have to do is
| | 04:20 | type in the username here, and this
code automatically updates itself.
| | 04:25 | Now one of the things that I don't
like, and that I have done here, is I don't
| | 04:28 | really like to see that Twitter header
at the top or the bottom of the screen.
| | 04:32 | So I can easily take those out by
just adding a couple of styles into a
| | 04:37 | stylesheet that I have created here asking
the footer and the header not to display.
| | 04:42 | Now how would I know what the class
for these things are? If I pull this
| | 04:47 | index.html file in a copy of something
like Safari or Chrome, I can see this
| | 04:53 | come up, and one of the things that I can do
in these browsers is take a look at the code.
| | 04:58 | If I View Source, unfortunately, we
are only going to see the JavaScript.
| | 05:02 | We're not going to see the content that
has been generated dynamically by JavaScript.
| | 05:08 | So that's not a good way to look at the code.
| | 05:10 | What we need to do is close that.
| | 05:12 | You want to make sure that you have
this Developer Tool on your browser.
| | 05:16 | It's available in Google Chrome or Safari.
| | 05:18 | In Safari, we want to go to the
Preferences menu and click on Advanced.
| | 05:23 | Make sure I have this Show Develop menu
in menu bar, and it will add that as an
| | 05:27 | option on your menu bar.
| | 05:29 | If I don't have that on, then it doesn't show.
| | 05:31 | If I click right there, it's going to show that.
| | 05:33 | So now I am going to close that and
from the Develop menu I am going to say
| | 05:37 | Select Web Inspector.
| | 05:39 | So in the Web Inspector I can
see dynamically generated content.
| | 05:43 | So not just the JavaScript that's being
used to generate this content, but the
| | 05:48 | actual content itself.
| | 05:49 | So here you could see that the entire
element that gets loaded from Twitter
| | 05:52 | has a class of Twitter Widget, and I can target
any of these things to further customize my CSS.
| | 05:58 | So I can open that up and keep opening these up.
| | 06:00 | So you could see here's the part where
the header sits, so I know that I can
| | 06:04 | hide that if I just target that class
right there, and I can open that up and
| | 06:07 | even target specific things within
there to hide or show different elements.
| | 06:11 | So if I open up the footer, same thing.
| | 06:14 | I can see there's a div right there,
there is a span, there is a link, so I can
| | 06:18 | hide any of these items or control
how they look by just adding style that
| | 06:22 | target these classes.
| | 06:23 | In the same way, I can open up this
section which contains my main timeline, and
| | 06:28 | style any elements within my main timeline.
| | 06:31 | Here's my specific tweets and I can
see that even the tweets themselves have
| | 06:35 | classes for different parts.
| | 06:36 | So everything is highly customizable
if you know how to get this information.
| | 06:41 | You can't do it just by viewing source;
| | 06:43 | you have to open up one of the
Developer panels so that you can find out which
| | 06:47 | classes and which IDs you can target with CSS.
| | 06:50 | Once you understand that, then you can
paste that anywhere on your site and have
| | 06:54 | the best Twitter feed that is based
either on a specific person, a search
| | 06:59 | result, or a list that you create or
that has been created by somebody else, and
| | 07:04 | I've never seen any WordPress plug-in
or any other widget, or any kind of
| | 07:08 | JavaScript or PHP code that does a
better job than Twitter's own widgets.
| | 07:14 | So see you next week, and remember that
if you love to save the whales, but are
| | 07:18 | terrified of the Fail Whale,
then don't forget to View Source.
| | Collapse this transcript |
| 010 Adding PayPal buttons to your pages| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source.
| | 00:02 | In this episode, I'm going to show
you how to create e-commerce links
| | 00:06 | using PayPal buttons.
| | 00:07 | So, if you're looking for an easy way
to get paid, it's time to View Source.
| | 00:11 | PayPal is a real easy way to accept
credit card payments for your freelance
| | 00:15 | project, donations, or any
other type of e-commerce.
| | 00:19 | Creating PayPal buttons is super simple.
| | 00:21 | Once you understand the basics, there's a ton
of options that'll let you create
| | 00:25 | subscriptions, shopping carts and a lot more.
| | 00:28 | But the first thing you'll need is a
PayPal account, which you can get on their
| | 00:32 | web site, just paypal.com and
then sign in for a PayPal account.
| | 00:37 | Once you have an account, creating a
button is as easy as creating a form.
| | 00:41 | As a matter of fact, a PayPal
button is nothing more than a form.
| | 00:44 | So, let's look at the most basic code
necessary to create a PayPal button.
| | 00:49 | So, I have the most simplest type of
PayPal payment, which is a donation, in this
| | 00:54 | piece of code right here.
| | 00:55 | We'll go ahead and paste it into our
basic body tag, and you'll see that you'll
| | 00:59 | get this Donate button.
| | 01:00 | So, when you create this form you just
create a regular form where the action
| | 01:04 | field is the PayPal processor URL,
which is this link right there.
| | 01:09 | We have added just a couple of
input fields plus a submit button here.
| | 01:13 | So, the first and most important type of
field is the CMD field or the command field.
| | 01:18 | This is how you tell PayPal what
type of payment do you want to take.
| | 01:22 | So, if you take a donation, the value
of that field should be _donations.
| | 01:28 | The next most important
field is the business field.
| | 01:31 | The business field is simply the link to the
email you use when you signed up for PayPal.
| | 01:36 | So, to send money to anybody else, you
would just type their email address right here.
| | 01:40 | Finally, we need to be able to submit
this donation, so you need to include an
| | 01:44 | input type submit button, so
that people can click on it.
| | 01:48 | So, in here I've changed the values
so that the button says Donate instead
| | 01:51 | of the normal submit.
| | 01:53 | So, if we go to this page and we click
on the Donate button, you'll see that this
| | 01:56 | will take you to the PayPal page
where you can type in a purpose for the
| | 02:00 | donation, a donation amount and update
the total, and then go through the normal
| | 02:06 | PayPal payment procedure, which allows
you put in your credit card or if you
| | 02:10 | have a PayPal account, you can
type in your information right here.
| | 02:13 | You can add a number of other
options to your PayPal buttons.
| | 02:15 | So, let's take a look at some of those.
| | 02:17 | We are back into this codesnippets file
and you can see that I can add another
| | 02:21 | input attribute called item_name.
| | 02:23 | With the item_name I can tell people
what it is that they're going to be
| | 02:26 | donating to when they click on the button.
| | 02:28 | So, I'll add that hidden field called
item_name, I'll save this, and then I'll
| | 02:32 | go back into my Donate button and I'll
hit Donate, and this time when I go to
| | 02:36 | PayPal it already says
something right here under purpose.
| | 02:40 | But a donate button might not be the
most visual thing to use, because people
| | 02:44 | might not be getting a good idea of what
it is they are going to be donating to,
| | 02:46 | so it would be nice to insert a photo
instead of a submit button, and we could
| | 02:51 | do that by changing the input
field to an image input field.
| | 02:54 | So, we're going to go into
codesnippets and I've already prepared a
| | 02:57 | donate button right here.
| | 02:58 | It's just a picture of a cat
with donate to your local shelter.
| | 03:02 | So, I'm going to go back into
codesnippets and grab this next version right
| | 03:04 | here, and the only difference between
this version and the last is that it has
| | 03:08 | an input type="image".
| | 03:10 | Under the input type="image", I have a
link to my image that I want to use.
| | 03:15 | So, I'm going to copy that, go back
into index.html, and replace this form with
| | 03:21 | my button and now we can
see that the photo shows up.
| | 03:24 | The photo behaves like a button, so
it's clickable onto the PayPal page.
| | 03:28 | So it works in exactly the same way, but we
can use an image instead of using a button.
| | 03:33 | Now, on occasion you'll want to be able
to create a link instead of an image or
| | 03:38 | instead of using a form.
| | 03:40 | Because a form is not particularly
convenient, you may want to create an
| | 03:44 | area that has a photo and say a title and a
description and make the entire thing clickable.
| | 03:49 | In that case, you'll need to create a
link and to create a link you can use a
| | 03:53 | long URL that behaves exactly as a form.
| | 03:56 | So, let's go into our codesnippets and
grab this next version of our file, and
| | 03:59 | you'll see that I have a link right here.
| | 04:01 | The link actually uses an image as the
clickable part, so it's going to look
| | 04:04 | exactly the same thing as our form that
uses an image as the submit field, but
| | 04:10 | all the information from this form
has been transferred into a long URL.
| | 04:15 | So, if you look at the code up here
you can see that it has a link to the
| | 04:18 | main PayPal processor.
| | 04:20 | We use the same thing as the
hyperlink reference of our anchor tag, but in
| | 04:24 | addition to that we add a question mark
to the end of our link, and then we pass
| | 04:29 | it along the same elements
that we use on the normal form.
| | 04:33 | So, instead of adding an input field
type="hidden", cmd for the command.
| | 04:38 | We just add the name and value paired,
cmd=_donations, and then we use the &
| | 04:44 | because we want to put the values in
with ampersands in between, and then we use
| | 04:48 | the next variable business=
youremail@youremail.com&.
| | 04:53 | Again, action=Donate, because that's the
action that we want to perform, and then
| | 04:58 | we can put in our item name.
| | 04:59 | When we want to use spaces we use the
plus signs, so
| | 05:02 | Donate+to+your+local+shelter is there.
| | 05:04 | You can see that other than that this is a
normal link, and the link just has an image.
| | 05:08 | So, I'm going to copy this piece of code,
go back into my index.html, and replace
| | 05:13 | the form with an actual link.
| | 05:15 | So, this looks exactly the same as
the form element, but as you could see, we
| | 05:20 | can change the image to just a
regular text link, and put whatever we want
| | 05:25 | between the anchor tags.
| | 05:27 | This will still work and take you
to the PayPal page, and use all the
| | 05:31 | variables that we entered.
| | 05:32 | Now, donation is the most basic type
of PayPal transaction that you can make.
| | 05:37 | There are lots of other transactions that
you can make, including selling something.
| | 05:41 | So, for selling something, you would
use a slightly different version of the
| | 05:44 | form and we can add some additional variables.
| | 05:47 | Like for example, the price of the item
as well as a return variable of what we
| | 05:53 | want to happen once the user
finishes paying for the item on PayPal.
| | 05:56 | So, that's what this version of the form does.
| | 05:58 | We'll copy this, go back into the
index.html file, we'll replace this.
| | 06:02 | Let me go back here, and I have used
another image as the submit button in this
| | 06:07 | case to add this particular product
that we have for sell on our site.
| | 06:12 | So things to note here, the command is
different, it's no longer _donate, it's
| | 06:17 | _xclick, which is how you sell things in
PayPal, and we have two additional input fields;
| | 06:22 | the amount input field
and the return input field.
| | 06:26 | There are a lot of other
input fields that you can use.
| | 06:29 | PayPal allows you to create all kinds
of transactions, including subscriptions,
| | 06:33 | recurring payments and even shopping carts.
| | 06:36 | You can find out more about what you
could do with PayPal by going to this page
| | 06:40 | right here, I've created a
special short URL that you can type.
| | 06:44 | This short URL will take you directly
to this page where you can see all of the
| | 06:48 | different options for the variable names,
the types of values that the command
| | 06:52 | field can have for example, the
different types of variables for the different
| | 06:56 | features, as well as every other type of input
fields that you can add to enhance your form.
| | 07:01 | So, for example, you can add the tax,
the tax rate, the type of payment, the
| | 07:05 | shipping weight, everything that you
would need for a super e-commerce web site.
| | 07:09 | So e-commerce doesn't have to be that
hard, once you understand these PayPal
| | 07:13 | variables you can create all sorts of e-
commerce apps, that tie into the PayPal engine.
| | 07:18 | So, next you need to accept online
payments, don't forget to View Source.
| | Collapse this transcript |
|
|
7. Week Four007 Searching for and finding a domain name| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:03 | In this episode we're going to take a look at
different tools to help you find a great domain.
| | 00:07 | So if you're looking to launch the
next dot com, it's time to View Source.
| | 00:11 | Getting a great domain is tough, and
just when you think you have the right
| | 00:14 | combination of words, you check your
hosting provider and sure enough that name
| | 00:19 | has already been taken by somebody else.
| | 00:21 | So there's a lot of web sites that can
help you pick an excellent domain name,
| | 00:25 | and one of the ones that I
like to use is Dot-o-mator.
| | 00:28 | This gives you a lot of lists of
things that you can try starting with, start
| | 00:32 | maybe with some tech words, or you can
type in your own words right here, and it
| | 00:38 | will combine and try to
find available domains for you.
| | 00:43 | And this is just a really quick way
of getting ideas that will help you
| | 00:46 | brainstorm on the names that you can use.
| | 00:48 | So you can click on this and it will
add them to a scratchboard, and then you
| | 00:51 | can start a new list, and combine some of the
other lists right here, or type in your own.
| | 00:58 | So we can combine some of these by
just hitting Combine, and it will give us a
| | 01:02 | lot of different options.
| | 01:03 | So that's a great way of getting started.
| | 01:05 | There's another really
excellent tool called NameStation.
| | 01:09 | Now, NameStation has a lot of different
types of generators, one of them is the
| | 01:13 | Random Names generator.
| | 01:15 | So here you type in a prefix and a
suffix that you might want, like the word
| | 01:20 | source here, and you hit Generate
names, and it tries to look for things
| | 01:24 | that end with that name.
| | 01:26 | Make sure you click on this Hide Taken to
hide the names that have already been taken.
| | 01:29 | So you can try to use some of these
names right here, although these don't
| | 01:32 | particularly look great to me right now,
or you can try to play around with some
| | 01:36 | of these other options.
| | 01:37 | Now, it has a lot of other sub-options
up here that you can click, so I'm going
| | 01:41 | to click on Keyword Domains, and in
this case it's going to try to search for
| | 01:45 | related keywords based on what you type in here.
| | 01:48 | So I'll type in programming, and we'll
find keyword domains related to that keyword.
| | 01:54 | So if we had two m's on programming and
left out the i, that might make a good name.
| | 02:01 | You could hit Hide Taken again and
then take a look at alternatives for every
| | 02:05 | one of these, or check out the
additional pages of options that it gives you.
| | 02:09 | So you can also see that it gives you
options for alternatives for what you're typing.
| | 02:14 | So you can click on some of
these other ones and take a look at
| | 02:17 | suggested domains as well.
| | 02:18 | You'll see that there's also sub-
tabs for all kinds of other options.
| | 02:22 | You can also do a List Search, which
will allow you to see lists of items it
| | 02:26 | recommends for you to try and find.
| | 02:28 | So we could take a look at this here
and see if we can find Major US cities
| | 02:33 | and do a Keyword for developer, and we'll hit
Search, and it will give us some options here.
| | 02:39 | And finally, you can hit Compound Words
and try different combinations of words.
| | 02:44 | So that's a really good tool for when
you get stuck and can't find exactly what
| | 02:48 | to name your dot com, you can take a
look at this particular tool and find lots
| | 02:52 | of different options on how
you can combine your words.
| | 02:55 | Another one that I like that
has a funny name is BustAName.
| | 02:58 | In this one you type in a few words,
like say view source development, and we'll
| | 03:03 | click on this Add right here, and it
will start to try to find available domains
| | 03:08 | with those words in them.
| | 03:09 | If you get stuck and it can't find
something combining those, then you can roll
| | 03:13 | over right here and find additional options
that are based on the words that you type.
| | 03:19 | So maybe we'll add viewpoint here, and then it
actually starts to come up with some options.
| | 03:24 | If we go down here, we can control
additional sub-options, so we can look for
| | 03:28 | other top-level domain extensions or
maybe add the letters i or e or my, and
| | 03:34 | it's going to come up with a
few more options in that case.
| | 03:36 | We can also add groups of options to
make sure that we're not violating groups
| | 03:40 | of things that we want to be related.
| | 03:42 | So here development and source might
be part of the same combination so it's
| | 03:48 | going to find words here and
combine them with words in this Group 1.
| | 03:51 | And you can add
additional options here, so mother,
| | 03:56 | mother might not be a good
thing, we'll move it up here.
| | 03:58 | So we can take some of these options out
by clicking this off and add some other
| | 04:02 | options right from here, and then just
play around with whether or not we want
| | 04:06 | two or three word combinations,
obviously three words are more complicated, but
| | 04:10 | it will give us additional options as well.
| | 04:14 | You can also try this additional tool down
here called a Brandable domain generator.
| | 04:18 | It's a slightly different
way of coming up with keywords.
| | 04:21 | So you can make domains that start
with the word view and make domains look
| | 04:25 | natural and hit Make Random Domains.
| | 04:27 | This version of the Domain Maker tool
tries to find words that are based on what
| | 04:32 | you type in here and sound kind of natural.
| | 04:35 | So sometimes it does a good job and
sometimes it could be a little bit better.
| | 04:39 | So I'm typing different things in here
and having it try different random words
| | 04:43 | based on my original words.
| | 04:45 | So next time you're looking for a great
domain, don't just do a search at your
| | 04:48 | hosting provider using their tools,
try some of these other tools that give
| | 04:52 | you a lot of different options, and
even come up with some crazy ideas based
| | 04:57 | on words, random things, all kinds of
combinations and thesaurus suggestions
| | 05:02 | of what you can use.
| | Collapse this transcript |
| 008 Working with the Google Maps API| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:02 | In this episode we'll add a map to
your web site with Google's Maps API.
| | 00:07 | So it's now time to View Source.
| | 00:10 | Google has revolutionized the web by
providing great services and also APIs, or
| | 00:15 | Application Programming Interfaces that
let regular people tie in to those great
| | 00:20 | free services and helps
them build their own apps.
| | 00:23 | And one of my favorites is the Google Maps API,
which lets anyone add a map on their web site.
| | 00:28 | There're different versions of
the Google Maps API that you can use
| | 00:32 | for different purposes.
| | 00:33 | You can see there's a Maps JavaScript
API, as well as a Maps API for Flash,
| | 00:38 | Google Earth, and the one that we're
going to use today is the Maps Image API,
| | 00:43 | which just lets you put in a
simple image with a map on any web site.
| | 00:48 | So if we click on that you can see that
there is a description for a lot of the
| | 00:52 | things you can do with the API.
| | 00:54 | The first thing you have to do is
choose whether you want to work with the
| | 00:56 | Street View or the regular API, and
we're going to just work with the Static
| | 00:59 | Maps API, which is right here.
| | 01:01 | There you can see all of the different
types of maps that you can build and the
| | 01:05 | different options that you can put on your map.
| | 01:07 | So let's take a look at
how you can do some of that.
| | 01:09 | We'll switch over to this side;
| | 01:11 | we have a simple HTML page.
| | 01:12 | We'll go into our codesnippets and
grab this first version of our map, and in
| | 01:17 | our case, our map is just going to be
an image tag, and the image tag is going
| | 01:21 | to link to a special URL that tells
Google a little bit of information about
| | 01:26 | the map that you need.
| | 01:26 | So I'm going to copy this, go into my
index file and just paste it right here,
| | 01:30 | and you can see that it
brings up a map immediately.
| | 01:33 | So we're passing a few options here to
the standard maps.google.com URL, and the
| | 01:38 | first one is the center or where
we want the map to be centered at.
| | 01:43 | For that we just put in whatever we
would normally type into Google Maps to
| | 01:47 | get the map for this location, which
is just the address, and what I do is
| | 01:51 | separate the address with plus
signs for the spaces, and then we can
| | 01:56 | specify a zoom ratio.
| | 01:57 | You can change this to
make the map zoom in and out.
| | 02:00 | So if I make it zoom to 1, you could
see that it gives me a map of the entire
| | 02:04 | world, and as those numbers get
bigger and bigger, as long as I have my
| | 02:08 | center correctly, you can see that it
will zoom into the area that I want.
| | 02:12 | So there we are at this particular location.
| | 02:15 | The next thing that you can
enter is a specific size for the map.
| | 02:19 | So you can type in some different
parameters to make these maps bigger and smaller.
| | 02:23 | There are some limits to how big you
can make these maps and there's also a
| | 02:27 | limit to the amount of requests that
you can make for maps from the Google API.
| | 02:32 | If you get to a certain amount of
requests per month, then they're going to want
| | 02:36 | you to open up an account, and it's
going to cost you a little bit of money, but
| | 02:39 | for most very small web sites,
this is not going to be a problem.
| | 02:42 | You can also choose to serve
the map up in different formats.
| | 02:45 | The default is PNG, and you probably
want to leave it at that, but you can also
| | 02:49 | ask for maps in GIF or JPEG formats.
| | 02:52 | Next, you can ask for different
versions of the maps, and in this particular
| | 02:56 | case, we've chosen the standard roadmap,
but you can also type in satellite and
| | 03:02 | receive a satellite version of the maps.
| | 03:07 | You can also specify hybrid, which is
a combination of the roadmap and the
| | 03:13 | satellite, and finally, you can type in
terrain for another version of the maps.
| | 03:19 | Finally, we need to pass it along the
sensor=false parameter, which will just
| | 03:23 | tell Google that we're not using a
device that has a built-in GPS sensor.
| | 03:28 | So this is a great map, but it doesn't
exactly tell us where in the map we are
| | 03:33 | located, although we know that it's the
center, it would be really nice to have
| | 03:37 | a marker that tells you where the
location of our building actually is.
| | 03:42 | So I'm going to go back into
codesnippets and grab a slightly different version,
| | 03:46 | and what we have added here is this
markers section that just has an address of
| | 03:50 | where we want the map to show our markers.
| | 03:52 | So I'll grab this and copy it, go back
in here, and replace our image tag, and
| | 03:57 | you can see that now it gives us a
different version of the map and we have a
| | 04:00 | nice marker right on where the building is.
| | 04:03 | So to do that, you just simply add
another keyword onto the URL and you type in
| | 04:09 | the address again, separating
with plus signs for the spaces.
| | 04:13 | So that's pretty simple.
| | 04:14 | Now, if I wanted to make this map
clickable so that I could go to Google and
| | 04:18 | check out the dynamic version of the
map, then I would have to add an anchor
| | 04:22 | tag, and that's what we've done
with the next version of the map.
| | 04:25 | So you can see the link to the map is
a little bit different, the anchor tag
| | 04:28 | actually takes you to google.com/maps
and passes along a variable called q, with
| | 04:34 | the address, again, using
plus sign instead of spaces.
| | 04:37 | So we'll copy that, paste it, instead
of this image tag right here, and the
| | 04:41 | map looks exactly the same, but now the
map becomes clickable and it takes you
| | 04:45 | to the Google Maps page, where we can
see this, and now we can use the full
| | 04:50 | range of Google functions so that we
can get an address and do different
| | 04:54 | things with this map.
| | 04:55 | Now, if you need a photo of your
building on your web site, Google provides a
| | 04:59 | slightly different version of the
Google Maps API, that is the Street View API,
| | 05:04 | and we saw a little hint of it before
when we went to the Google Maps API page.
| | 05:08 | So this is a different application.
| | 05:10 | We'll go into a slightly different URL,
and we're passing along similar, but
| | 05:14 | slightly different information here.
| | 05:15 | We're passing along just a size
and a location, and then plus some
| | 05:20 | additional features.
| | 05:21 | So I'm going to copy this,
paste it onto my page.
| | 05:24 | I'm not going to use a link right now,
but you'll see that now we get a nice
| | 05:28 | photo of the building and we can
control how that photo is displayed by
| | 05:33 | switching around some of
these numbers right here.
| | 05:35 | So the heading would be the direction
where the camera is pointing to, so we
| | 05:40 | could say change it to 150 and we
see a different version of the map.
| | 05:45 | So this would be a degree rotation from 0
to 360 degrees, which would probably look the
| | 05:52 | same, and anything in between will take
us to a different rotation of the map.
| | 05:57 | So there's the rotation that
would take us to our building.
| | 06:01 | You can control the zoom by typing
in a different number right here.
| | 06:04 | So there we are zoomed in a lot tighter
than we were in the shot before, and we
| | 06:09 | can zoom out just by typing in a larger number.
| | 06:12 | Finally, the pitch is the vertical
angle, obviously starting from 0, but we
| | 06:15 | can have the photo tilt up, a little bit more,
so that we can angle into different parts.
| | 06:22 | So if this is a taller building and we
wanted to maybe show a different floor,
| | 06:25 | you might type the pitch and
show a higher angle of the building.
| | 06:29 | So combining those different features,
like field of view, pitch, and heading, you
| | 06:34 | can use Google's Street pictures to get
a picture of any building that you want.
| | 06:39 | So as you can see, adding a map
onto your web page is super simple.
| | 06:43 | You can even use the Street View to
find a picture of your location and add it
| | 06:48 | automatically to your pages.
| | 06:50 | So see you next time.
| | 06:51 | Now, remember that to find a place in
your world, sometimes all you have to
| | 06:55 | do is View Source.
| | Collapse this transcript |
|
|
8. Week Three005 Tracking any campaign with Google Analytics| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:03 | In this episode, I am going to show
you how to track just about anything
| | 00:06 | with Google Analytics, using tools
like the Google URL Shortener and the
| | 00:11 | Google URL Builder.
| | 00:12 | So if you need to know where your visitors
come from, then it's time to View Source.
| | 00:16 | It's really hard to tell
exactly how people get to your site.
| | 00:19 | If you've got Google Analytics one way
to see where traffic comes from is by
| | 00:23 | looking at the traffic source's area.
| | 00:25 | So I am going to click on Standard
Reporting and I am going to open up Traffic
| | 00:28 | Sources and select All Traffic.
| | 00:32 | Then I am going to look at the list
that it gives me right here, and I see that
| | 00:35 | a large part of our traffic comes from a
direct source which doesn't really tell
| | 00:39 | me where people are coming from.
| | 00:41 | That means that people are somehow
getting to your site and you're not getting
| | 00:44 | any feedback as to where they came from.
| | 00:47 | So I'm going to show you a couple of
tips that you can use to track where
| | 00:49 | people are coming from using a
couple of other Google tools.
| | 00:53 | The URL Builder is designed to
simplify the process of creating special URLs
| | 00:58 | that add campaign, medium and other
information to your Google Analytics pages.
| | 01:03 | So you could simply fill out the
information, and if this is a page within your
| | 01:07 | own web site, you can simply type in
the page that you want to track, say the
| | 01:10 | homepage of our web site, and
then track where this is coming from.
| | 01:15 | So say that you are building a campaign to
ask people in Twitter to come to your web site.
| | 01:20 | You can type a Campaign Source here
saying that this is a Twitter campaign and
| | 01:24 | then a Campaign Medium which would be
how did people get to this campaign.
| | 01:29 | So if you're running a banner, campaign or an
email blast campaign you can type that in here.
| | 01:33 | For a Twitter campaign I am just
going to type in, clicksintwitter.
| | 01:37 | And the last piece of information that
you definitely have to fill out because
| | 01:40 | it's required, is just a Campaign Name.
| | 01:46 | Now once you fill all that information
out, you click on this Generate URL,
| | 01:49 | and the URL Builder will give you a
special URL that has name and value pairs
| | 01:54 | with that information.
| | 01:55 | You could create that information
yourself by using this URL, but the URL
| | 02:00 | Builder just makes it easier for
you to fill all that information out.
| | 02:03 | So everything we typed in here, the
campaign name is right here, the utm_medium
| | 02:07 | is right in here, and the
utm_source is over here.
| | 02:11 | Once you create the link, you can copy
the URL and use it instead of just the
| | 02:17 | main URL to your web site.
| | 02:18 | That way you'll know where people
came from for that specific campaign.
| | 02:22 | Unfortunately, as you can see these
links can get really long and that's where
| | 02:25 | that Google URL Shortener comes in.
| | 02:27 | So I'm going to copy this long URL, and
I'm going to switch to the Google URL
| | 02:31 | Shortener, and in here I can paste my
very long URL and the URL does not have
| | 02:36 | to be from our own web site, it can be from any
other web site that you want to track links to.
| | 02:40 | You could hit the Shorten link.
| | 02:42 | You will see that it will automatically
add that to a list of shortened URLs
| | 02:46 | that we created in the past.
| | 02:48 | The Shortener provide statistics
for any link that you generate.
| | 02:51 | One of the really interesting
features about the Shortener is that you can
| | 02:55 | click on Details, in addition to reports of
the campaign, you can actually get a QR code.
| | 03:00 | You could save this QR code
and use it on physical items.
| | 03:03 | Just right-click and hit Save Image
As, and then put it somewhere on your
| | 03:07 | desktop, and then you can access that
image and paste it into any physical campaign.
| | 03:13 | If they have the right application,
people can scan that with their phone and
| | 03:17 | they will be directed to the web site
you specified, and at the same time if
| | 03:21 | you use the URL Builder, you can track
specifically that those people came from a physical item.
| | 03:26 | So as you can see, this particular
campaign I scanned with my mobile phone, it
| | 03:31 | happened to be an iPhone so you can get
reports of the different platforms, the
| | 03:34 | browsers and where people came from
when they were scanning the QR code.
| | 03:40 | So if we go back into my traffic
patterns, you could see that if we look for
| | 03:44 | Campaigns under Traffic Sources we
should see the campaign data here.
| | 03:49 | Unfortunately, I performed that scan
early in the morning and right now my range
| | 03:54 | happens to be yesterday.
| | 03:55 | So I am going to switch this over, and
double-click on today's date to set the
| | 03:59 | range for today only, and
then hit the Apply button.
| | 04:02 | Now I can see my single click that
was generated from my QR campaign that I
| | 04:08 | scanned from my phone.
| | 04:10 | We can see the campaigns by either
Campaign Name, the Source, and the Medium
| | 04:16 | that we specified earlier.
| | 04:18 | So this is a great way of not only
creating URLs that you can use in your
| | 04:21 | campaigns, but also QR codes that you
can use on physical items and then track
| | 04:26 | how effective those have been.
| | 04:28 | So instead of just creating QR codes,
make sure you create QR codes that
| | 04:32 | have campaigns attached to them so that you
can track them within your Google Traffic.
| | 04:36 | The other way to use the URL Shortener
is to create links outside your web site
| | 04:41 | that you wouldn't normally get metrics
for, you can use it to track mentions to
| | 04:45 | external web sites and see how
well outgoing campaigns are doing.
| | 04:49 | So see you next time and remember that
if you google yourself and you are not
| | 04:53 | in the top ten results, then you know
you've got to spend more time with View
| | 04:56 | Source.
| | Collapse this transcript |
| 006 Creating a date picker for your forms with jQuery| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source.
| | 00:02 | This week we're checking out jQuery UI
and using it to display a pop-up calendar
| | 00:07 | inside a form field.
| | 00:09 | So if you're always looking for a
cool date, then it's time to View Source.
| | 00:12 | jQuery UI is a collection of user
interface tools that is available as
| | 00:17 | a separate download.
| | 00:18 | The library is highly customizable and
can be quite a large download when you
| | 00:23 | include the entire thing.
| | 00:24 | So chances are you'll want to
customize it and load only what you need, but
| | 00:29 | before you do that you'll probably want
to take a look at the large library of
| | 00:32 | styles available for the jQuery UI widgets.
| | 00:36 | So you'll want to go into
this link right here and find the
| | 00:40 | Datepicker section, click on that,
and take a look at the different
| | 00:44 | options for the Datepicker.
| | 00:46 | So our input field is going to look
something like this when you click it, and
| | 00:50 | you could see that there are a
lot of different themes you can use.
| | 00:54 | So right here from the right-hand
side you can click on this and switch the
| | 00:57 | theme out to something else.
| | 00:59 | I want to use one called Pepper Grinder.
| | 01:01 | So I'm going to click on that, take a
look at it, and from here I can take a
| | 01:05 | look at the different options.
| | 01:07 | So for example, you may want to format
the date, and to format the date you could
| | 01:11 | choose from this pop-up right here, and
after you're done customizing how you
| | 01:14 | want your date to look, you could View
Source right here and take a look at how
| | 01:18 | that function needs to be set up.
| | 01:21 | So there's a lot of options here, but
let's get our own version of this started.
| | 01:25 | Before we do that, we're going to go
back into jQuery and click on this link
| | 01:29 | called Build custom download, as I
mentioned the entire jQuery UI library is
| | 01:35 | quite large, so you should probably
either use the Google CDN, the contact
| | 01:38 | delivery network, that has a copy
of jQuery that a lot of sites use.
| | 01:42 | If a site has already loaded that
version of the jQuery UI when somebody clicks
| | 01:47 | to go to your page and they've already
loaded the library from somewhere else,
| | 01:51 | then it will already be cached in
their browser and load up a lot quicker.
| | 01:55 | So in here you want to select the
components that you want to load.
| | 01:58 | So I'm going to deselect all the
components, and I want to find just the
| | 02:03 | Datepicker one, click on that, and then
I want to come over here and make sure
| | 02:07 | that I choose the theme that I want to download.
| | 02:09 | So I am going to click on Pepper Grinder,
because that's the one that I picked
| | 02:11 | from the other page, and
click on this Download link.
| | 02:14 | Once it finishes downloading, then
find it in your downloads folder, and you
| | 02:20 | want to open up this folder and find the
CSS file for pepper-grinder so that you
| | 02:25 | can use it in your own project.
| | 02:27 | Now you will want to copy the
images somewhere in your project.
| | 02:30 | I have already copied all of
these images into my images folder.
| | 02:36 | You'll also want to copy the jQuery
custom CSS file that it downloads, I've
| | 02:41 | already loaded that and I have renamed
it peppergrinder, because this is a long name.
| | 02:47 | Finally, you may want to include the
jQuery version that you've customized.
| | 02:52 | In my case I am going to be using the
Google CDN, so I'm not going to use that
| | 02:55 | version of the jQuery file.
| | 02:57 | I have already placed a version of the
jQuery UI minified JavaScript version
| | 03:02 | that is available from Google CDN.
| | 03:04 | I am only going to need that when I am
working locally and I want to make sure I
| | 03:07 | can preview my project even
when I don't have a web connection.
| | 03:10 | So I want to open up a preview, I am
holding on the Option key, and clicking on
| | 03:14 | Preview right here, and you'll see that
we have the most basic form code right here.
| | 03:19 | It doesn't really do very much.
| | 03:21 | We have a label right now for this field, and
this is the only field we have on the form.
| | 03:25 | The important thing is we have an input filed.
| | 03:27 | We've given it a name and a type.
| | 03:29 | The important thing is that the id
needs to be datepicker, because jQuery UI is
| | 03:34 | going to pick that up.
| | 03:35 | So we'll go to our codesnippets and
we need to load the scripts from Google
| | 03:40 | CDN with an alternative version for
our local development environment.
| | 03:45 | So I am going to copy that, and go
back into my index file and I'm going to
| | 03:48 | paste the jQuery code right here.
| | 03:50 | All this is doing is loading up two
versions of the library, you're going to
| | 03:54 | need the jQuery library as
well as the jQuery UI library.
| | 03:58 | They are separate, because the
jQuery UI in particular is rather large.
| | 04:03 | So next up, we'll go into our
codesnippets file and we'll need to also link
| | 04:08 | to the version of the CSS file we
downloaded from the jQuery UI site.
| | 04:13 | So we're going to need to link to that
peppergrinder.css we renamed right here.
| | 04:18 | Back into my index file, I want to put
this in the head section, and now we're
| | 04:23 | ready to go with our jQuery UI component.
| | 04:25 | Now we are going to go back into my
codesnippets and grab the function that
| | 04:29 | actually makes the Datepicker work.
| | 04:31 | So we'll copy this right here, we'll
put it again right after we load up all
| | 04:35 | the scripts, the bottom of the page,
and now when we come over here, and we
| | 04:38 | click on this field, it automatically
pops up our beautiful calendar.
| | 04:43 | Now if you remember from the jQuery UI
site there's a lot of options that you
| | 04:47 | can use when using this calendar.
| | 04:49 | So if we click back here go back into
the Datepicker, you'll see that there is a
| | 04:54 | lot of different options, and if you
View Source you can see how they accomplish
| | 04:58 | the different options, so I'm going
to show you a couple of the ones that I
| | 05:02 | think are really important.
| | 05:03 | Right now, this is the
default version of this Datepicker.
| | 05:05 | If you go back into codesnippets,
you can see that you can add additional
| | 05:09 | functions, like for example, picking a
specific date format or adding more than
| | 05:14 | one month to the list.
| | 05:16 | I'm going to go back into codesnippets
and replace this function, and you'll see
| | 05:20 | that now we have three months and we
are asking for the date to be entered into
| | 05:26 | the field in a specific format.
| | 05:28 | So this is the kind of format that
you would use if you wanted to use this
| | 05:31 | date with something like mySQL, but you can
make your date format to whatever you want.
| | 05:37 | Just check the documents
when you format the date.
| | 05:41 | You could choose from this list and take
a look at the source code down there to
| | 05:45 | customize the date to whatever you want.
| | 05:47 | And thankfully, adding what normally
would be a very complicated date pop-up to
| | 05:51 | your forms is super simple with jQuery UI.
| | 05:54 | So you might want to check out some
of the other things in the library.
| | 05:57 | The other library that you might want
to check out is our own library of jQuery
| | 06:00 | tutorials on the lynda.com web site.
| | 06:03 | So see you next time and remember that
if you can't wait to code on your next
| | 06:07 | date, then you've probably
got some time to View Source.
| | Collapse this transcript |
|
|
9. Week Two003 Using a CDN to speed up your sites| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:03 | This week we're taking a look at
using CDNs to speed up the loading of your
| | 00:07 | favorite JavaScript libraries.
| | 00:09 | So if you spent too much time playing
Angry Birds between page loads, then it's
| | 00:12 | time to View Source.
| | 00:14 | CDN stands for Content Delivery
Network, and it's a network of servers that
| | 00:18 | store commonly-used libraries
across a wide range of locations.
| | 00:23 | Google for example has copies of the most
common JavaScript libraries stored on a CDN.
| | 00:28 | So instead of downloading and
installing your own copies of jQuery, you can
| | 00:32 | simply link to Google's.
| | 00:34 | Why a lot of locations? Because the web
works by sending and receiving packets
| | 00:38 | of information across different physical
locations.
| | 00:42 | The closer a user is to your server,
the faster the data will get to them.
| | 00:46 | A CDN puts multiple copies of the
files across different physical locations.
| | 00:51 | The users will always get the
one that is closest to them.
| | 00:55 | Yahoo!'s developer network, Google and
others encourage the use of CDNs. Yahoo!
| | 01:01 | has an excellent document on speeding up
your web site at this URL.
| | 01:05 | One of these suggestions is to
always use a content delivery network.
| | 01:09 | Remember that since browsers cache
JavaScript files, if a user goes to a site
| | 01:14 | that links to a Google CDN and then
goes to another site that links to the
| | 01:18 | same link, the second site will benefit from
the library already being cached in the computer.
| | 01:23 | Since Google's copies of jQuery are very
popular, it's likely that a lot of users
| | 01:29 | will have the version of jQuery already
loaded in their computers when they
| | 01:33 | visit your web site.
| | 01:34 | To use Google's CDN, you can go to this
URL where you can find copies and links to
| | 01:40 | the most popular libraries, including jQuery.
| | 01:43 | I like to use this particular link
right here, which is the minified version of
| | 01:47 | jQuery, and this happens to be the
latest version as of this video.
| | 01:52 | You can find older versions by clicking
on this link.
| | 01:54 | There is a couple of problems with using
Google's CDN that you should be aware of.
| | 01:59 | The first one is that if there is a
connection problem with the CDN, the
| | 02:03 | script will not load.
| | 02:04 | Chances are that Google's CDNs are
more reliable than most servers.
| | 02:09 | The more likely problem is that you
might be developing code on your local
| | 02:14 | machine without a connection to the Internet.
| | 02:17 | If your code depends only on a CDN to
load jQuery, then your scripts will not
| | 02:21 | load when offline and you
won't be able to test things out.
| | 02:24 | The fix is to use a link to a Google or other
CDN, but have a backup copy on your local drives.
| | 02:31 | So let's take a look at how you would
implement some of this code on a web page.
| | 02:35 | Here's a web page just awaiting my links to
the JavaScript libraries to begin working.
| | 02:40 | So we're going to go to the
codesnippets.txt file here.
| | 02:43 | This is how we would normally
add these libraries to our code.
| | 02:47 | We would download the copies of jQuery
and in this case, jquery.cycle, and we
| | 02:51 | would add them to the
head section of our document.
| | 02:53 | Once we add those links, you'll see
that the JavaScript will take over and this
| | 02:59 | rotator will start fading the photos.
| | 03:01 | Now if we want to, we could just link
to the Google CDN by linking to
| | 03:05 | those links from that page, and in the case of
jquery.cycle, we could link to a github CDN.
| | 03:11 | So I'm going to copy that and go back
into my index.html file, and I'll replace
| | 03:17 | these pieces of code, and you could see
that the file works in the same manner.
| | 03:21 | However, if I lost my web connection, these
libraries would not load and the script
| | 03:26 | will not be able to execute and activate
the rotator.
| | 03:28 | So I'm going to go back into
codesnippets and show you the version that
| | 03:32 | you should be using which has essentially
two script tags for each one of our libraries.
| | 03:37 | The first script tag adds our
Google CDN to jQuery right here.
| | 03:41 | And then on the next line, it checks
to see if that CDN has already loaded by
| | 03:47 | checking to see if the
window.jquery function exists.
| | 03:50 | If it doesn't exist, then it's going to
write out to our current document a link
| | 03:55 | to our current local version of the library.
| | 03:58 | So if we copy these things, go back to
our index page, and replace our calls to
| | 04:03 | our library, you'll see that it still
works fine.
| | 04:06 | And the advantage is that if we lose
the web connection, it will load the local
| | 04:10 | version of our libraries.
| | 04:12 | For more great lessons on jQuery and
JavaScript, don't forget to visit the
| | 04:16 | lynda.com Online Training Library.
| | 04:19 | And remember that if you ever had to
apologize by sending #F00 roses to your
| | 04:23 | spouse, then you've
probably got time for View Source.
| | Collapse this transcript |
| 004 Creating a photo rotator with jQuery Cycle| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:03 | In this episode we're going to build an
image fader with one my favorite jQuery
| | 00:07 | plug-ins jQuery Cycle.
| | 00:09 | So if you're ready to stop, slide, and
roll with a bit of JavaScript, then it's
| | 00:13 | time to View Source.
| | 00:14 | So jQuery is a JavaScript library that
makes it easy to select things like you
| | 00:19 | would with CSS and add
animation and other methods to them.
| | 00:24 | One of the beautiful things about
jQuery is its ability to be extended via the
| | 00:28 | use of plug-ins, and when it comes to
building image rotators or sliders, I
| | 00:33 | really like a project called jQuery Cycle.
| | 00:35 | A lot of plug-ins require you to
issue complex commands or follow strict
| | 00:40 | formatting rules for organizing your code.
| | 00:42 | JQuery Cycle shines above the rest,
because it's super-easy to setup.
| | 00:47 | So the first thing you're going to need
is a simple page structure with a series
| | 00:52 | of images that have been
sized to the same proportions.
| | 00:56 | I am using a div class right here to
make sure that I can target these things
| | 00:59 | with jQuery Cycle and CSS.
| | 01:02 | Now let's add some links to the
jQuery and jQuery Cycle libraries.
| | 01:06 | I am going to go into my codesnippets
and copy script tags that load the jQuery
| | 01:11 | and the jQuery Cycle library from
different content delivery networks.
| | 01:15 | This is a great way of speeding up
your code if it finds the content delivery
| | 01:19 | network, the code will load from that network.
| | 01:22 | If it doesn't, then it will load a
local copy which I have placed the local
| | 01:26 | copies of both of those libraries right here.
| | 01:29 | So I am going to copy that, and go back
into my start file, and add that right at
| | 01:33 | the end of our head section.
| | 01:35 | This will just add the libraries and
it won't make anything spin quite yet.
| | 01:39 | So we need to add a second version
of the code and in that version we are
| | 01:43 | going to initialize the jQuery Cycle command
as well as feed these scripts some variables.
| | 01:48 | So I am going to copy that, and go back into my
start file and add these after I call my scripts.
| | 01:54 | You can see that immediately it'll
start to take over and the pictures will
| | 01:57 | start to fade, and if you're wondering if
that was all there is to it, you'd be right.
| | 02:02 | This is it.
| | 02:03 | This is one of the cool things
about this plug-in, it's super-simple to
| | 02:05 | setup, and you could see that there's a
few variables that we can play with right here.
| | 02:10 | Timeout is how much time it
takes to fade between each photo.
| | 02:14 | So of course, we can change
that just by changing the numbers.
| | 02:17 | These are in milliseconds.
| | 02:19 | If you want the actual transitions to
go a little faster, we can add the speed
| | 02:23 | variable, and type-in a
millisecond number for that as well.
| | 02:27 | And you could see the
transitions happen a lot faster.
| | 02:31 | Of course, it will be really boring if
all we could do was fade between images,
| | 02:34 | so jQuery Cycle has a lot of different options.
| | 02:37 | If you go back into the jQuery Cycle
page, you can look at their beginner demos
| | 02:41 | page, you could see all the
different effects for your animations.
| | 02:46 | You could see we can scrollRight,
scrollLeft, grow, fade, zoom, wipe, just about
| | 02:51 | every kind of animation
that you can do in jQuery.
| | 02:53 | So I am going to grab the scrollLeft
effect right here and go back into my page
| | 02:59 | and try out that effect on our images.
| | 03:02 | So the page reloads, and you'll
see it slide in just a second.
| | 03:06 | Now by default, the images will keep on
animating even if I move my mouse on top of them.
| | 03:11 | So one of the things that you could
do is actually pause the animation if
| | 03:14 | somebody rolls over the image.
| | 03:15 | So if I add this command, and turn it on
by using the value 1, and I roll over the
| | 03:20 | image, you will see that it will
prevent my animation from going.
| | 03:23 | You can also randomize the order of
the images by adding the random command.
| | 03:29 | You can easily add navigation to
the slider by typing in links for your
| | 03:34 | navigation tags and then adding
commands to your jQuery script.
| | 03:38 | So we'll go back into the codesnippets and
grab some links and navigation.
| | 03:42 | We will add in a previous and a
next button, as well as page navigation.
| | 03:46 | So I want to copy that and go back into
our start files, and I am going to paste
| | 03:49 | that navigation at the
bottom of my code right here.
| | 03:54 | Now if you look at the page, right now
we only see the left and right navigation.
| | 03:59 | We don't see the nav.
| | 03:59 | That is something that jQuery is going
to programmatically generate for you.
| | 04:03 | To get these to start working, we'll
go back here into jQuery Cycle and we'll
| | 04:07 | add an additional command to add
the next button, we will type-in the
| | 04:12 | keyword next, and we'll give it the name
of the id of our next button, which is
| | 04:18 | right now of course next.
| | 04:20 | So we will type that, make sure we
type the pound sign at the beginning
| | 04:24 | to make sure we are targeting an id,
and if we want to add navigation to the
| | 04:29 | previous button, we type-in prev, and then in
quotes we also type in the id for that button.
| | 04:37 | So if we take a look at our
project now, we can use these buttons to
| | 04:39 | navigate between files.
| | 04:41 | Now you probably don't want the
transitions to be random right now.
| | 04:45 | So I'll take that out of here and we can cycle
through the different photos in that fashion.
| | 04:51 | Let's go back and switch this thing to a fade.
| | 04:56 | Now if I want to add the
navigation, I do something similar.
| | 04:59 | I just simply add the word, pager, and
it'll create the different pages for us,
| | 05:03 | and in the pager then I will put in my
id for the navigation that I've created.
| | 05:09 | Right now, it's just an empty link and
you could see that at the bottom of my
| | 05:12 | pages, jQuery has created links to
the different photos that are in the
| | 05:16 | project automatically.
| | 05:18 | So I can switch to anyone of
those by clicking on these links.
| | 05:21 | Now of course you can take any of
these things and style them any which way
| | 05:24 | you want, and you can also make the
structure of this document a lot more complicated.
| | 05:29 | So right now we only have three
different image links right here.
| | 05:33 | If we wanted to add headlines and
descriptions, all we need to do is create them
| | 05:37 | within individual tags.
| | 05:39 | So jQuery Cycle will take a look at
whatever the first level of those tags are
| | 05:44 | and animate inbetween those first level tags.
| | 05:47 | Let me show you a more complicated example
to see how you can style things, and
| | 05:51 | how jQuery can work on
more complicated projects.
| | 05:54 | So we'll open up this finished file,
and we'll preview that, and you will see
| | 05:59 | that I have added headlines as well as
summaries, I've styled my tags so that
| | 06:04 | they will disappear when I don't have my
mouse on top of the image, and they will
| | 06:07 | appear when I have my mouse on the image
and I can just click on these different
| | 06:11 | items to navigate to the different photos.
| | 06:14 | And all we have done there is made sure
that we created an item for each one of
| | 06:21 | our photo elements and jQuery is
animating between these different items.
| | 06:26 | Whatever we put in the items, jQuery
will animate and slide and fade in-between.
| | 06:30 | So we've got the image here, a section
for our information with a headline, and
| | 06:35 | a paragraph, and we've wrapped around
everything that we want to rotate inside
| | 06:39 | this rotator tag, and then we have
put navigation underneath and wrapped
| | 06:45 | everything on a different tag called
rotatorgroup so that we can style that with CSS.
| | 06:50 | If you want to find out more about
jQuery and related technologies, don't forget
| | 06:54 | to visit the lynda.com Online Training Library.
| | 06:57 | There's quite a few courses on
jQuery and related technologies.
| | Collapse this transcript |
|
|
10. Week One001 Creating a custom URL in WordPress| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:03 | This week we're learning about customizing
your WordPress URLs to optimize your
| | 00:07 | site for search engines.
| | 00:09 | So if you dream of your site traffic
soaring like an eagle, then it's probably
| | 00:12 | time to View Source.
| | 00:13 | Whether you're a designer or developer,
it's important to understand how you
| | 00:17 | can optimize your site for search engines.
| | 00:19 | There is a lot of advice out there
including lynda.com's excellent series of
| | 00:23 | tutorials in the Online Training Library.
| | 00:26 | If you're just getting started, you
should definitely check out Google's SEO
| | 00:29 | Starter Guide which is part of their
Webmaster Tools, available in Webmaster
| | 00:34 | Central at google.com/webmasters.
| | 00:38 | One of the nuggets of information is to
make sure you optimize your site URLs.
| | 00:43 | As Google says, if your URL contains
relevant words, this provides users and
| | 00:48 | search engines with more
information about the page than an ID or
| | 00:52 | oddly-named parameter would.
| | 00:54 | Because WordPress generates sites from
a PHP and MySQL engine, its default URLs
| | 01:00 | leave something to be desired.
| | 01:01 | If you click on one of these articles,
you'll see that the URL to the articles
| | 01:05 | become the name of the site, ?p=8.
| | 01:08 | Not very descriptive.
| | 01:10 | If you go to your admin settings, go
to your Settings section, then click on
| | 01:20 | Permalinks, you'll see that there's
some options here but a lot of them
| | 01:24 | organize things by date.
| | 01:26 | WordPress's blogging
heritage really shows up in here.
| | 01:29 | It would be great to be able to use
categories and titles in the URLs because
| | 01:33 | they would provide great keywords to Google.
| | 01:35 | But it's not even one of the custom options.
| | 01:37 | Thankfully, we can type-in a custom
URL structure and WordPress has a list of
| | 01:41 | tags you can use to make this better.
| | 01:43 | There's a lot of options but my
favorite is having Google include the category
| | 01:47 | name as well as the post name in the URL.
| | 01:49 | That will place your category title,
and then your post name and build a much
| | 01:54 | better URL for search engines.
| | 01:56 | I'm going to save changes, and of
course, that means that you might have to
| | 01:59 | create your own categories.
| | 02:01 | So to do that, go to your Posts and
click on Categories, and I have one set of
| | 02:06 | categories, you may have a
default uncategorized section here.
| | 02:10 | You can simply add a new category by
typing in a name right here,
| | 02:17 | and hitting Add New Category.
| | 02:20 | You should also go to Settings and then
Writing, and make sure that you change
| | 02:25 | your Default Post Category to whatever
you want your default to be, otherwise
| | 02:29 | your default category would be uncategorized.
| | 02:32 | Now when we go to the web site, and we
click on a story or a post, you'll see
| | 02:37 | that the name of the category appears as part
of the URL, as well as the title of the article.
| | 02:42 | This provides a lot more keywords to
Google and is a lot better for our users.
| | 02:47 | For more tips on search engine
optimization, don't forget to visit the
| | 02:51 | Online Training Library.
| | 02:53 | And remember that if your CMS is your
BFF, then you've probably got lots of
| | 02:57 | time to View Source.
| | Collapse this transcript |
| 002 Adding breadcrumb links to your WordPress sites| 00:00 | Hello! This is Ray Villalobos
and welcome to View Source!
| | 00:03 | In this episode, we're going to add
breadcrumbs to your WordPress template.
| | 00:07 | And if you're wondering why that's a
good idea, then it's time to View Source.
| | 00:11 | If you don't believe everything
you hear about SEO or search engine
| | 00:14 | optimization, it's nice to
find out straight from the source.
| | 00:18 | You might have already heard about
Google's excellent SEO Starter Guide, which
| | 00:21 | you can find by just googling SEO
Starter Guide, and clicking on this PDF.
| | 00:29 | Now if you look to that document
there's a lot of really good information
| | 00:33 | about optimizing your site for search engines.
| | 00:36 | One of the tips that they give you is
to make sure you add convenience to your
| | 00:40 | users by using breadcrumbs.
| | 00:42 | A breadcrumb is a row of internal
links at the top or bottom of the page that
| | 00:47 | allows visitors to quickly navigate back
to a previous section or the root page.
| | 00:52 | You can easily add them to your
WordPress sites by adding a simple function to
| | 00:56 | your functions.php file.
| | 00:58 | To get to it, log into your WordPress
Dashboard, and then click on Appearance, and
| | 01:04 | then click on Editor, there's a bunch
of files for the current template and you
| | 01:10 | need to find the one that says functions.php,
| | 01:13 | click on it, and scroll down to the very bottom.
| | 01:17 | We're going to add a new function right
here at the bottom of functions.php so
| | 01:22 | that it will be available to all of our pages.
| | 01:24 | So I'm going to go to my codesnippets
file which you can find in the exercise
| | 01:29 | files section of this course.
| | 01:31 | So this function essentially creates a
link to your homepage by issuing an echo
| | 01:36 | command that first prints out the
beginning of an anchor tag right here, and
| | 01:40 | then prints out the location of your homepage
by using the get_option ('home') function.
| | 01:46 | And then for the actual clickable link,
it inserts the name of the blog by using
| | 01:50 | the bloginfo function with the keyword
name and adds the word Home after that.
| | 01:55 | So in our case, it will say View Source Home.
| | 01:59 | After that, it closes out the anchor
tag, and then it adds a double right
| | 02:04 | quotation character which will look like that.
| | 02:08 | Next, it checks to see whether or not
the page that is calling this function is
| | 02:13 | a category page or an individual post.
| | 02:16 | Regardless, it's going to print out the
link to the category that this page is under.
| | 02:22 | If it is an individual post, then it
will print out the right quotation again
| | 02:27 | and the title of the page.
| | 02:30 | If it's neither of those and it's
actually a page, not a post or a category,
| | 02:34 | then it will just print out the title.
| | 02:37 | So let's copy this code and go back into
our Edit Themes, and at the bottom of
| | 02:42 | my functions.php file, I'm
going to paste this piece of code.
| | 02:46 | Now it's time to update the file.
| | 02:48 | Now that we've updated our functions.php,
it's time to add this code to whatever
| | 02:54 | template we want on our web page.
| | 02:56 | So I'm going to go back to our
codesnippets and grab this second piece of code.
| | 03:02 | This piece of code simply calls our
function using a standard PHP call and
| | 03:07 | wrapping everything around a
breadcrumbs id so that we can style it later.
| | 03:12 | So I'm going to grab this, I'm going
to copy it, I'm going to switch back to
| | 03:16 | my Edit Themes, and I'm going to find
first the Category template and right
| | 03:22 | underneath the header, I'm going to paste this
code, and I'm going to hit update the file.
| | 03:26 | Then I want to find my Single Post
template and paste the breadcrumbs right
| | 03:35 | there, make sure I update this file.
| | 03:38 | And finally, I want to add this to the
Page template, and right underneath the
| | 03:43 | header I want to paste that code, hit
Update File and we're almost ready to go.
| | 03:49 | Now let's add just a little bit of
CSS so that we have a little bit more
| | 03:53 | breathing room in our breadcrumbs.
| | 03:56 | We're going to add this very simple
bit of CSS here that will just give our
| | 04:01 | breadcrumbs a little bit of breathing space.
| | 04:03 | So I'm going to copy that, switch
back over to WordPress, and look for my
| | 04:08 | style.css file, which is right here,
and I'm going to scroll down to the bottom
| | 04:13 | of that and paste our code for our
breadcrumbs.
| | 04:18 | I'm going to hit update the file.
| | 04:21 | Now when we click on the View Source
link right here to go to our site, and I
| | 04:26 | click on an article, you'll see
that the breadcrumbs are right here.
| | 04:31 | If I click on a page like the
About Us page, I will also see the
| | 04:36 | breadcrumbs appear right here.
| | 04:38 | If I go back to the homepage and click
on an article, and click on one of these
| | 04:43 | previous links, it's going to take me to
the categories and it's simply going to
| | 04:48 | display link back to the homepage and
a link to the categories right here.
| | 04:51 | Don't forget to check out our
excellent list of courses on SEO available from
| | 04:57 | the lynda.com Online Training Library.
| | 05:00 | So see you next time, and remember that
if it's NBD to VNC onto your CPU, then
| | 05:06 | you've probably got time to View Source.
| | Collapse this transcript |
|
|
