IntroductionWelcome| 00:00 | A Flash website could be designed
around the best idea since the ice cream sandwich,
| | 00:04 | but if customers can't find it,
your business could melt away.
| | 00:08 | (Music playing.)
| | 00:15 | The searchability of a Flash site is a
critical element of its design. In this course,
| | 00:20 | I have planned to give you the tools to
make your Flash site more search engine friendly.
| | 00:24 | Welcome to Flash Professional CS4
Building Search Engine Friendly Sites.
| | 00:30 | I am Todd Perkins. I have authored
the book Search Engine Optimization for Flash
| | 00:35 | and have created many Flash based
websites that have risen to the top in
| | 00:39 | search engine results. So I know how
much SEO can help a site's profile on the web.
| | 00:45 | First off, let me say that this course
assumes you are familiar with common web
| | 00:48 | programming languages, as I won't be
teaching ActionScript or HTML. If you want
| | 00:54 | to get up to speed on your web
programming languages, check out lynda.com
| | 00:58 | for the courses you need.
| | 01:00 | That said, for you advanced Flash
users out there, here is a look at some of
| | 01:04 | the topics I'll be showing you. I'll
give you an overview of search engines and
| | 01:08 | SEO. You will see how to optimize
code in your site. We'll get your site
| | 01:12 | noticed by adding searchable alternate
content for browsers that don't have the
| | 01:16 | Flash Player and we'll also look at
adding deep links and bookmarking to Flash
| | 01:21 | applications, as well as using a single
XML data source for Flash and HTML with PHP.
| | 01:28 | By the time we get through all of
these, you will have a site that's both
| | 01:31 | search engine and people friendly.
Now let's get started with Flash
| | 01:35 | Professional CS4 Building
Search Engine Friendly Sites.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium subscriber to lynda.com
or have purchased this title on a disk,
| | 00:05 | you have access to the Exercise
Files for this title. Exercise Files for
| | 00:10 | this title are organized by chapters.
Each chapter contains the files we'll be
| | 00:14 | working on for that chapter. As we go
through the title, you will see the files
| | 00:18 | that you will need to work with on the
screen so that you can open them up and
| | 00:21 | follow along.
| | 00:22 | I have even included final versions of
some of the files, so that you can see
| | 00:27 | what the finished applications look
like. Those files end with _final.
| | 00:32 | If you don't have the Exercise Files,
don't worry, you can still follow along.
| | 00:36 | Throughout the title, I'll show you
what you can do to set up your files in
| | 00:40 | the same way that my files are set up so that
you can have the same experience with this title.
| | 00:44 | So, if you are ready to go, let's get started.
| | Collapse this transcript |
| Overview| 00:00 | Here on my screen, I have a Google
search result for Dorothy Brodsky.
| | 00:05 | This site is in all Flash website. It shows
up in a search engine results under Dorothy Brodsky
| | 00:11 | as the first result. So you can
see here that the site is all Flash.
| | 00:16 | So throughout this title I'll show you
how I did that piece by piece.
| | 00:20 | So I'll show you how I put it together.
Now we are not going to be learning all
| | 00:23 | the aspects of making images fade in
and fade out, and building the gallery.
| | 00:29 | That's for another title.
| | 00:30 | This title is about how I made this all-
Flash site searchable and how I got it
| | 00:35 | high up in the search engine results
pages. Throughout this title, you are
| | 00:39 | going to see how to use Flash on the
web to create alternate content that's HTML.
| | 00:47 | So if I go to View > Page Source,
you will see this page actually has a
| | 00:51 | lot of HTML content and this is all
searchable. So the search engines go
| | 00:57 | through this content and index that and
this site that's all Flash can show up
| | 01:02 | in the web search.
| | 01:03 | So we'll talk about how to serve up
HTML content if somebody doesn't have Flash
| | 01:08 | and how to serve up Flash content if
the person viewing the site has the Flash
| | 01:12 | Player in their web browser.
| | 01:13 | We will also talk about something
called progressive enhancement. If I disable
| | 01:18 | JavaScript and plug-ins in my browser,
you will see a HTML version of this site.
| | 01:23 | So even people without Flash or
JavaScript can experience this site and
| | 01:28 | see its photography.
| | 01:30 | If the person has JavaScript and
looks at the site, and not Flash, then
| | 01:35 | they will see an enhanced version of this
site. It's still primarily HTML based, but
| | 01:40 | there is a little bit more enhanced
experience. We'll talk about how to set up
| | 01:44 | your files like that.
| | 01:46 | Before we go on, I just want you to
thank Dorothy Brodsky for letting us use
| | 01:50 | her site in his title and use her
artwork in the Exercise Files. So thanks
| | 01:56 | Dorothy and let's get started.
| | Collapse this transcript |
| Prerequisites| 00:00 | Given the nature of this title, you
will need to know a lot before coming in.
| | 00:05 | Since I want to stay focused on
optimizing Flash sites, I'm going to assume
| | 00:10 | that you know a lot about
Flash and about web design already.
| | 00:15 | Specifically, I'm going to except you
to know Flash CS4 pretty well. I'm going
| | 00:21 | to speak about things like movie clips
and instance names and the Actions panel
| | 00:25 | pretty casually and pretty quickly so
that those people who already know Flash
| | 00:30 | don't need to listen to that information again.
So you should have basic Flash knowledge.
| | 00:35 | Next, ActionScript 3.0. We are going to
be going over a lot of ActionScript 3.0 code
| | 00:40 | and I'm going to be doing it
fairly quickly. So you should be familiar
| | 00:45 | with the language and have at least
watched ActionScript 3.0 for designers.
| | 00:51 | If you haven't watched that, just be prepared
for some really fast moving code explanations.
| | 00:57 | Next, you should know HTML code. You
should also know JavaScript. Though we are
| | 01:03 | not going to be going into a lot of
detail with JavaScript, you should be
| | 01:07 | familiar with pretty basic JavaScript.
You shouldn't be scared having to write
| | 01:12 | a line of JavaScript code.
| | 01:14 | We are also going to use PHP.
You don't need to be a PHP master because
| | 01:19 | we're going to use it for some very specific
purposes, specifically printing out XML data
| | 01:24 | as HTML code. I would recommend
the PHP Essential Training course on
| | 01:29 | the lynda.com Online Training Library.
| | 01:31 | Finally, you should be familiar
with basic XML syntax. So knowing these
| | 01:36 | technologies and languages, you are
prepared to learn how to build search
| | 01:40 | engine friendly sites with Flash CS4.
| | Collapse this transcript |
|
|
1. Introduction to SEOUnderstanding search engines| 00:00 | Before becoming a search engine optimizer,
it's important for you to understand
| | 00:05 | how search engines work. In this movie,
I'm going to show you the three main things
| | 00:09 | that search engines do. The first
thing that search engines do is they
| | 00:13 | send spiders to crawl the web. Now just
like there is no real web, there are no
| | 00:17 | real spiders. The spiders are actually
software programs. So the spider goes
| | 00:22 | throughout the web and
search through all of the pages.
| | 00:25 | The second thing search engines do is
index that information, storing it in a
| | 00:30 | massive database. The third thing that
search engines do is return that index
| | 00:36 | information to you in the form of
search results. So for example, you may go to
| | 00:41 | Google and search for the term Dorothy
Brodsky. The information that's returned
| | 00:46 | to you is relevant to your search term.
| | 00:50 | So in short, the three things that
search engines do are send spiders to crawl
| | 00:54 | the web, index the information,
and return search results to you.
| | 00:59 | Now that you are familiar with how search
engines work, you are ready to start digging deeper
| | 01:03 | and exploring search engines
and search engine optimization.
| | Collapse this transcript |
| Understanding search engine optimization| 00:00 | In this movie, I want to talk about
what search engine optimization is.
| | 00:04 | Search engine optimization is the main thing
that we are going to be doing in this website.
| | 00:08 | The goal is to get your pages
higher in search engine results.
| | 00:14 | Here are three things that are important
to know regarding search engine optimization.
| | 00:18 | Search engine optimization accurately
portrays pages' content to search engines,
| | 00:24 | and people. You are not looking to do
anything deceptive here; you want to
| | 00:29 | accurately portray your pages content,
so that search engines can better index
| | 00:34 | your pages, and get
results to the people accurately.
| | 00:38 | You don't want your page to show up
in an irrelevant web search just to get
| | 00:43 | better results. So search engine
optimization should be better both for search
| | 00:47 | engines and for people visiting your site.
| | 00:50 | Second, search engine optimization can
increase pages' positions in search engine
| | 00:55 | result pages, also known as SERPs, and
I use the word 'can' there on purpose.
| | 01:01 | Search engine
optimization is not an exact science.
| | 01:06 | Guaranteeing any particular page rank
or specific results is out of the question.
| | 01:12 | So even as your instructor
and as an expert on this subject, I can't
| | 01:17 | promise you that doing everything in
this title is going to make your page go
| | 01:21 | to number one in the search engine
results. It's just a lot more likely
| | 01:25 | they will be higher in the
search engine result pages.
| | 01:28 | Finally, doing the search engine
optimization or SEO is ethical and honest.
| | 01:35 | You want to make sure that you are not
being deceptive to people, or the search
| | 01:38 | engines when you are optimizing your pages.
| | 01:41 | In addition to the guilt that you
may feel from using unethical SEO,
| | 01:46 | search engines can banned you from being
listed if you use unethical practices.
| | 01:52 | So keep that in mind.
| | 01:54 | So these three ideas are very important
when you are optimizing your websites.
| | 01:59 | So you know that you are being open and
honest to the people, and to the search
| | 02:03 | engines and if everything works right,
then your pages should be higher in
| | 02:07 | the search engine results.
| | Collapse this transcript |
| Distinguishing between black hat and white hat SEO| 00:00 | When optimizing a site for search engines,
you may be tempted to put a whole
| | 00:05 | bunch of keywords everywhere, maybe
hide them with CSS or whatever. In this movie,
| | 00:11 | I want to identify what that
is called. It's called Black Hat SEO.
| | 00:15 | It's the opposite of White Hat SEO.
| | 00:17 | Black Hat SEO refers to unethical
search engine optimization practices, whereas
| | 00:23 | White Hat SEO is the standard search
engine optimization that we'll be
| | 00:28 | talking about throughout this title.
| | 00:30 | Black Hat SEO is bad and can get you
banned from search engine results. Now,
| | 00:35 | I don't want to go over details about
what techniques are Black Hat SEO and what
| | 00:40 | are not. If you doing something and it
seems unethical or you wouldn't share it
| | 00:44 | with one of your competitors because
it's getting you really high results,
| | 00:48 | that may be qualified as Black Hat SEO.
| | 00:51 | If you break rules of search engines
outline, then you could get banned from them.
| | 00:56 | So you want to be really familiar
with what's acceptable and what's not
| | 01:00 | acceptable in search engine optimization.
| | 01:02 | So you can go to the different sites
if you want to and see exactly what
| | 01:06 | Black Hat SEO is and what specific techniques
are Black Hat. It involves things like
| | 01:13 | hiding text, so it's not visible to
people but only visible to search engines,
| | 01:18 | and other techniques
that are somewhat deceptive.
| | 01:21 | So again Black Hat SEO is unethical and
can get you banned from search engines.
| | 01:26 | It's dangerous. Go to sites that
explain more details and give examples
| | 01:31 | to find out more information.
| | Collapse this transcript |
| Knowing Flash's place in SEO| 00:00 | In the past, and even now actually
Flash has a bad rep in the search engine
| | 00:05 | optimization world. However, you
can actually make Flash sites totally
| | 00:10 | searchable. In this movie, we'll talk
about why Flash has a bad rep and
| | 00:15 | what we are going to do in this title
to make Flash sites searchable.
| | 00:19 | So first Google and Yahoo and Adobe
have teamed up to make Flash somewhat
| | 00:25 | searchable. The extent of how that
works and all the details of what content is
| | 00:32 | searchable and what is not is not 100%
clear from Adobe, Yahoo or Google. So at
| | 00:38 | this point, it is not safe to assume
that the search engines are indexing
| | 00:43 | the content in your Flash files.
| | 00:46 | However, HTML is fully searchable. So
if we connect Flash to HTML then we can
| | 00:53 | have a searchable site. So throughout
this title, we are going to talk about
| | 00:56 | how to use HTML content as alternate
searchable content. In that way you can
| | 01:02 | make sure that your site gets indexed properly.
| | 01:04 | So to recap Flash is only kind of
searchable. What we need to do is provide
| | 01:10 | fully searchable HTML, so that you
can optimize your site with confidence.
| | Collapse this transcript |
| Understanding SEO resources| 00:00 | Let's look at some search engine
optimization resources. This is an industry
| | 00:05 | that is constantly changing and
progressing, and so you need to stay up-to-date
| | 00:10 | on the latest information. These are
definitely not the only places to go,
| | 00:15 | just some high quality ones that I use personally.
| | 00:19 | The first one is google.com/webmasters.
This is just a bunch of tools that
| | 00:24 | you can use as a webmaster to help
your site rank better in Google results,
| | 00:30 | which turn in to results for other
search engines as well, like MSN and Yahoo.
| | 00:34 | I'll highly recommend this site
because this contains some pretty pure
| | 00:38 | information since it's straight from the source.
| | 00:41 | The next resource is another major
search engine, which is Live or MSN.
| | 00:47 | That's at webmaster.live.com. Here you can
get more information just like Google about
| | 00:53 | how to optimize your website. Great
place to go. Another straight from
| | 00:57 | the source information center.
| | 01:00 | Now I would show you one for Yahoo, but
they just have some search pages where
| | 01:04 | you can search for general help for
optimizing your site. So Google and Live
| | 01:10 | are the main search engine places to
go to get information straight from the source.
| | 01:14 | You can also look at different blogs.
I really like seomoz.org. This site posts
| | 01:21 | articles just about every day for better
optimizing your website. It's great to
| | 01:26 | stay up-to-date and these people are
constantly researching search engine
| | 01:30 | optimization and they are actually a
business that does professional search
| | 01:34 | engine optimization, another great
resource. Again this is more opinion based
| | 01:39 | than facts since it's not straight
from the source, but in my opinion this is
| | 01:44 | a high quality site.
| | 01:45 | By using these you could stay up-to-
date with the latest techniques and trends
| | 01:51 | in search engine optimization.
| | Collapse this transcript |
|
|
2. Using HTML to Optimize a SiteUnderstanding HTML's place in SEO| 00:00 | In this chapter, we are going to be
optimizing HTML code. Now it's important to
| | 00:06 | note that we are not going to go
through all of the HTML library optimizing
| | 00:10 | every single element. Rather we just
go and look at the most high impact HTML
| | 00:15 | elements that you'll use to
optimize your Flash applications.
| | 00:19 | This chapter establishes the
foundational HTML that we'll use to optimize
| | 00:24 | applications throughout this entire
title. So with that said, let's move
| | 00:29 | forward in writing optimized HTML code.
| | Collapse this transcript |
| Adding page titles| 00:00 | The title of the webpage is the text
inside of the title HTML element.
| | 00:07 | Here I'm looking at this Dorothy Brodsky
website that I created. The title shows up at
| | 00:12 | the top of your web browser window.
In this case it's Dorothy_Brodsky.
[00:00:17.5]
Now you may be thinking, how is this related
to SEO if it's just something at the top
| | 00:23 | of my browser window that
nobody probably looks at?
| | 00:26 | Let me show you how important a page
title is. I'm going to go another tab and
| | 00:31 | then I'm going to search for lynda.com,
all lower case. See these big links
| | 00:36 | like Learning @ Your Own Pace,
Non-Dithering Colors And Browsers, etcetera.
| | 00:41 | These links are page titles. So the
title of your page is the biggest text that
| | 00:47 | you get in the search engine results.
It has the most impact to searchers to
| | 00:51 | get people to come to your website.
| | 00:53 | Let me prove to you that this is the
page title. Remember we have this Learning
| | 00:57 | @ Your Own Pace. It's at the top of
the screen here and if you go to View >
| | 01:01 | View Source or View > Page Source in
Firefox, I'm just going to expand the
| | 01:05 | size here a little bit,
Command++ or Ctrl++ to expand that area.
| | 01:09 | And if you look for the Title element,
you'll see that same text in there.
| | 01:13 | So that text is what's going to show up
in the search engine results pages and
| | 01:17 | it has a massive effect on search
engine optimization for your site. That said,
| | 01:22 | that needs to be the most effective
thing you can possibly think of and it
| | 01:26 | needs to accurately represent
the content of that webpage.
| | 01:30 | So I'll close this window and I'll
return to the Dorothy_Brodsky site.
| | 01:34 | So with that discussion of the importance
of page titles, is this the most effective
| | 01:39 | page title for this application? The
answer is definitely no. Dorothy_Brodsky
| | 01:46 | is not good because it has that nasty
underscore in there. That's going to look
| | 01:50 | a little bit tacky in the
search engine result pages.
| | 01:52 | We can definitely come up with
something more effective. To come up with that,
| | 01:57 | we'll just look at the Flash application
on this page. It says Dorothy Brodsky Photography.
| | 02:01 | That has the name of the
photographer, no nasty underscore and
| | 02:06 | then the word photography, which is a
keyword, which will make this site more
| | 02:09 | likely to show up in
search results for photography.
| | 02:13 | So if we put that in the page title,
it will be much more effective when
| | 02:17 | this page shows up in search engine results.
Let's make that modification in a text editor.
| | 02:23 | So I'm over in text regular
and I have the file titles.html open.
| | 02:29 | Notice that in the title tag we have
Dorothy_Brodsky. Now, you may be wondering
| | 02:33 | where this nasty title came from in
the first place. This came from HTML
| | 02:38 | created by Flash, which simply takes
the name of your FLA file and puts that
| | 02:43 | right in the Title tag.
| | 02:45 | So, the good thing is you get some
title for your page, and that's title may
| | 02:49 | contain keywords that can give your
page better search results. But the bad
| | 02:52 | thing is things like underscores and
hyphens that are really good in file names
| | 02:57 | aren't so great for a page title.
| | 02:59 | So, we are just going to make a
simple modification here by changing the
| | 03:02 | underscore to a space, and adding on
the word photography. Now with this small
| | 03:08 | change, this site is greatly enhanced
for search engine optimization purposes.
| | 03:13 | We take out underscore to make the
title look a little bit more pretty and add
| | 03:18 | in the word photography which is
extremely relevant to the content of the page
| | 03:23 | and is the keyword that will make this
site appear in a more search results.
| | Collapse this transcript |
| Adding descriptions| 00:00 | Along with the titles of your pages,
another thing that's really big and
| | 00:04 | obvious in Search Results pages is the
description of your website. So here is
| | 00:09 | the same search that we looked at in
the earlier movie for lynda.com. Remember
| | 00:14 | that the link text is the title of
the page and the text below it or the
| | 00:19 | descriptive text is the
description for the page.
| | 00:22 | Now this doesn't just come from one
thing. Some search engines go through your
| | 00:27 | page and they grab snippets of the
content on the page that are relevant to the
| | 00:31 | search that the person is
performing and put that content right here.
| | 00:35 | Since our all-Flash websites doesn't
have a whole lot of that content, it's
| | 00:40 | good to put a description of the page
inside of the pages metadata, so that
| | 00:45 | search engines can display
some kind of information here.
| | 00:49 | In the early days of the web, that
metadata description held a lot of weight
| | 00:53 | for search engines and it could get
your pages higher in search engine results.
| | 00:57 | However today, metadata descriptions
don't really hold a lot of weight for
| | 01:02 | getting your pages to show up in the
search results but they can provide extra
| | 01:06 | information about your page to searchers.
| | 01:08 | So it's still worthwhile to do it,
especially, if your pages don't have any
| | 01:13 | other HTML content that the search
engines can display here. So let's look at
| | 01:17 | how to add metadata
descriptions to our HTML pages.
| | 01:21 | Going over to TextWrangler and here I
have descriptions.html open. Inside of
| | 01:26 | this file, I'm going to add a metadata
description. To do this, I'm going to
| | 01:30 | use the meta tag. I'm going to put it
in the head tag right below the title.
| | 01:34 | It doesn't necessarily need to be below
the title but it does need to be inside of
| | 01:38 | the head tag.
| | 01:39 | So there are two attributes that we
need to set here. There is name, I'm going
| | 01:43 | to set that equal to "description" and
then there is content and this is the
| | 01:47 | actual description of the page. In
the content area, I'm going to write a
| | 01:54 | description for this webpage. I'm just
going to make up something pretty simple
| | 01:58 | for right now. I'm going to type
"Dorothy Brodsky is a photographer in
| | 02:07 | the New York tri-state area" and that's it.
| | 02:19 | So when somebody searches for the page,
instead of seeing just the Dorothy
| | 02:23 | Brodsky photography link, they will
also see a description for the page, which
| | 02:26 | we have here. Since the page doesn't
have any other alternate content for the
| | 02:30 | search engines to look at, at this
point. So by adding that description,
| | 02:34 | we give a little bit more information
about this page to searchers and they are
| | 02:38 | more likely to click on it
and come to your website.
| | Collapse this transcript |
| Working with headings| 00:00 | When your pages get crawled by search
engines spiders, the information in your
| | 00:05 | pages is given different levels of
weight based on the HTML tags that the
| | 00:11 | content is in. For example, something
in a heading tag carries more weight than
| | 00:17 | something in a paragraph tag. Now,
this is important because you can make the
| | 00:22 | content of your page more relevant
to certain keywords by putting those
| | 00:27 | keywords in headings.
| | 00:29 | So in this movie, we'll look at how to
write heading tags and what should be in
| | 00:34 | your heading tags and how they should
organize your site's content. So in the
| | 00:38 | body tag here in this page, I'm going
to create opening and closing h1 tag.
| | 00:44 | Now if you know HTML at all, this
should be really familiar to you. Typically,
| | 00:48 | on a page there should be one h1 tag
that should kind of be connected to the
| | 00:53 | title of the page. h1 tags have the
most weight of any element inside of the
| | 01:00 | body tag. So you want to have keywords
in your h1 tags that are going to match
| | 01:06 | the keywords that are in your title tag.
| | 01:08 | I am just going to put "Dorothy
Brodsky Photography" in this h1 tag right here.
| | 01:13 | So, Dorothy Brodsky Photography
and then below that, I might have a
| | 01:21 | paragraph with a description of the site.
For that paragraph, I might just copy
| | 01:28 | that metadata description. So it's a
little bit easier to view, I'm just going
| | 01:33 | to make line wrapping enabled. Copy
and paste that text in the paragraph.
| | 01:38 | Something like that works fine.
| | 01:41 | Then you can rank your content in h2
tags. Remember, h2 is going to render by
| | 01:47 | default smaller than h1 tag and has
less relevance than the h1 tag as far as
| | 01:53 | search engines are concerned. So
something here I put is maybe Dorothy's
| | 01:59 | Pictures or something like that and
then maybe have a paragraph tag there.
| | 02:06 | We are just going to put some
placeholder content here but this would be where
| | 02:10 | you would have the gallery. So "Here
are some of Dorothy Brodsky's pictures."
| | 02:22 | I'm just going to copy
and paste that a few times.
| | 02:28 | Let's say I have a gallery, About and
Contact, but I would have for the next h2
| | 02:34 | I would have, About Dorothy Brodsky.
So I'm putting those Dorothy Brodsky
| | 02:41 | keywords in there. You can even put
About Dorothy Brodsky Photography.
| | 02:46 | Then here I could put in the paragraph,
Here's some info about Dorothy Brodsky.
| | 02:54 | For the final h2, I'll put something like
Contact Dorothy Brodsky. You can contact
| | 03:08 | Dorothy at email@email.com.
My content is kind of organized in headings.
| | 03:18 | Now if I were to preview this in a
browser, it would be visually organized but
| | 03:22 | for search engines, we are going to
put more weight on this h1 tag. So those
| | 03:26 | keywords will be indexed with more
relevance in the rest of the content on the
| | 03:30 | page and h2 has less relevance than
the h1 but still has relevance.
| | 03:34 | So you still want to put keywords in there.
| | 03:38 | So by using heading tags, specifically
h1 and h2 tags, you can give more weight
| | 03:44 | to certain content including keywords
to search engines and at the same time,
| | 03:50 | organizing your information for
people that are viewing your page as well.
| | Collapse this transcript |
| Understanding links| 00:00 | In this movie, we are going to discuss
the importance of links in search
| | 00:04 | engine optimization and how to create
the most effective kinds of links in your
| | 00:10 | applications. Here I have three
examples of different types of links.
| | 00:15 | Let's talk about the first one. This is
the type of link that was very common on
| | 00:20 | the web in the early days. Now
you don't see it so much. It says,
| | 00:24 | To see Dorothy Brodsky's photography, click here.
Click here is underlined and that's the link.
| | 00:30 | If I click there, it takes me to
dorothybrodsky.com. A link to a page is
| | 00:37 | a vote for that page. Now that doesn't
necessarily make the dorothybrodsky's site
| | 00:43 | jump up to the top of search
results. What it's saying is that
| | 00:47 | dorothybrodsky.com, the link behind
this text has something to do with the link text.
| | 00:53 | The link text just says click here.
Associating a link to a site with
| | 01:00 | the text 'click here' is less effective
because it doesn't tell any information
| | 01:06 | about that link. What you want to do is
have your links be more like the second one.
| | 01:11 | The second link uses Dorothy
Brodsky Photography as a link text and
| | 01:17 | connects dorothybrodsky.com to the
text Dorothy Brodsky's Photography.
| | 01:22 | So this link is a high quality vote for
Dorothy Brodsky's Photography. It tells
| | 01:27 | the search engines that the text Dorothy
Brodsky's Photography has something to do
| | 01:33 | with dorothybrodsky.com. So this is going
to boost the page rank and therefore,
| | 01:40 | boost this page's position in the search
engine's results pages. Now one link
| | 01:45 | like this on your own site isn't
necessarily going to make a huge difference.
| | 01:50 | If pages that have high credibility
linked to your pages using this technique
| | 01:56 | with this type of link text, then your
results will soar. This third type of link
| | 02:02 | has the site name in the link text,
which is excellent because it tells you
| | 02:08 | where you are going. That's good
but you want to connect those keywords to
| | 02:13 | your webpage as well. Notice when I roll
over this link, those keywords appear.
| | 02:18 | Let me show you how that works.
I am going to tab over to TextWrangler and so
| | 02:23 | we have the first link, click here is
within the anchor tag. The second link,
| | 02:27 | Dorothy Brodsky's Photography is within
the anchor tag. The third link, we have
| | 02:32 | the location of the site. So the person
has an idea where they are going.
| | 02:37 | Then there is a title attribute
inside of the link tag with that name.
| | 02:42 | When search engines crawl, they are going
to take the title attribute and give it
| | 02:46 | precedence over the link text, so
you can connect keywords to a link and
| | 02:52 | still display something else in the link
text, like where the link is going to take you.
| | 02:56 | Now it's really your call whether
you use method b which I have
| | 03:01 | highlighted here or method c.
Just whatever you do, don't use method a.
| | 03:06 | Your goal is to associate keywords with
your links. These work when you are linking
| | 03:12 | to various pages on your own site and
when you are linking to other people's sites
| | 03:16 | and when they are linking to your sites.
So whenever you create links,
| | 03:21 | understand it's very important what the
links are communicating to the search engines.
| | 03:27 | Not only will using high quality
links like this, boosts the results
| | 03:31 | in the search pages, it will more effectively
communicate to people within your site,
| | 03:36 | where a link will take them.
| | Collapse this transcript |
| Emphasizing words| 00:00 | You can give extra weight to particular
words and phrases in your HTML files by
| | 00:06 | using strong and em tags. These tags
can also emphasize your content to people.
| | 00:12 | For example, let's say we wanted to
emphasize the word photography. That makes
| | 00:17 | sense for the search engines because
photography is a keyword that we want
| | 00:21 | somebody to search for and see the
Dorothy Brodsky's site show up in the
| | 00:25 | results. So, that's a good word to
emphasize. That's a check why it makes sense
| | 00:30 | for search engines, now we want to
see if it makes sense for people.
| | 00:33 | So let's say this sentence was
actually followed by something else. Let's say
| | 00:36 | we said, To contact Dorothy Brodsky,
go here. Then this sentence came in, To
| | 00:41 | see Dorothy Brodsky's photography,
visit dorothybrodsky.com. In that way, it
| | 00:47 | reads like it could be emphasized.
That's not awkward for a person reading it.
| | 00:51 | That's what I'm judging this by. I
want to make sure it makes sense to people
| | 00:55 | and search engines before I emphasize the word.
So let's put emphasis on the word right now.
| | 01:00 | I'm just going to wrap it in em tag.
Let's put the closing tag here.
| | 01:07 | em tag has replaced the now deprecated
i tag, which was italic. Reason is that
| | 01:14 | italic basically said information
about how the text should be styled.
| | 01:19 | With CSS, we don't want to dictate how
elements should be styled, just how they are
| | 01:25 | organized. So this is
emphasis and not italic necessarily.
| | 01:30 | Save the file and I'm going to go to
Safari and preview that. Do you notice
| | 01:34 | that photography is italicized again?
That's irrelevant, it just how this
| | 01:37 | browser chooses to render something in
the em tag. You can control that however
| | 01:43 | you want with CSS. So we have that
emphasized now. Again, it gives more weight
| | 01:48 | to search engines and it reads
naturally for people as well.
| | 01:51 | The other tag you can use to emphasize
words or phrases is the strong tag.
| | 01:56 | So I'm going to replace em with strong
in both opening and closing tags here.
| | 02:01 | Save the file, jump over to your web browser,
refresh the page and now it's bold.
| | 02:08 | Again, irrelevant because you could
style it however you want with CSS.
| | 02:12 | So using the em and strong tags, you
can give emphasis to words or phrases that
| | 02:19 | you want to add weight to for the
search engines but remember, whenever you are
| | 02:23 | using this, make sure it also makes
sense to emphasize that word or phrase for
| | 02:28 | someone that's reading it. You don't
want to have everything in your page be
| | 02:32 | emphasized because it could make for an
awkward read for somebody visiting your site.
| | 02:36 | That could be a turn off to people.
So again, use the em and strong tags
| | 02:40 | to emphasize keywords but make sure it makes
sense to both search engines as well as people.
| | Collapse this transcript |
|
|
3. Helping Flash SEO with SWFObjectUnderstanding SWFObject| 00:00 | In this chapter, we are going to be
using something called SWFObject.
| | 00:05 | SWFObject is a JavaScript library developed
by Geoff Stearns and is perhaps the most
| | 00:10 | powerful tool that you have at your
disposal as a search engine optimizer.
| | 00:15 | The reason why SWFObject is so great
is it provides an easy mechanism for you
| | 00:19 | to provide alternate content for your
Flash applications. To help understand
| | 00:25 | the effectiveness of using SWFObject,
let's take a look at HTML code that Flash
| | 00:30 | creates for you when you publish an FLA file.
| | 00:34 | So if you note here the title element
contains an underscore because it has
| | 00:38 | the same name as the FLA file. Notice there
is also a lot of code. 322 lines to be exact.
| | 00:46 | This code is mainly JavaScript code
that checks the person's Flash
| | 00:51 | Player version in their web browser.
If the person doesn't have the appropriate
| | 00:56 | version of Flash, they are then
prompted to download the latest version of
| | 01:00 | the Flash Player.
| | 01:02 | The most important thing about this
HTML code is that it doesn't provide an
| | 01:07 | easy way for alternate content.
The only searchable HTML is hidden in a comment.
| | 01:12 | The other HTML code is in a
noscript block, which doesn't easily
| | 01:18 | provide a way for you to put in
alternate content. The HTML that comes from
| | 01:22 | Flash is not really searchable at all.
| | 01:25 | Now let's contrast that with the HTML
code used when you use SWFObject. Here is
| | 01:32 | a file that uses SWFObject. SWFObject
just uses a few lines of JavaScript code.
| | 01:39 | You can use the swfobject.embedSWF
method to embed a SWF file. You simply pass
| | 01:45 | in the SWF file's name. Then the name
of the HTML element that will hold
| | 01:49 | the alternate content.
| | 01:51 | In this case, my alternate content
HTML element is a div tag with an id of
| | 01:57 | altContent. Inside of the altContent
div tag, I have searchable HTML including
| | 02:05 | h1, p, and h2 tags. This content is
what shows up if the person or a search
| | 02:11 | engine visiting this page does not
have the Flash Player installed.
| | 02:15 | Notice I also have a link to download
the latest version of the Flash Player.
| | 02:21 | Using SWFObject, all you have to do
to provide alternate content is put the
| | 02:26 | searchable HTML that represents your
Flash content inside of the altContent
| | 02:31 | element that you set up.
| | 02:34 | So throughout this chapter, we'll
explore the details of downloading SWFObject
| | 02:38 | and using it to optimize your applications.
| | Collapse this transcript |
| Downloading SWFObject| 00:00 | In this movie we'll look at
downloading SWF object. So you can go to
| | 00:04 | code.google.com/p/swfobject to find
the SWFObject website. Here you can
| | 00:10 | download SWFObject as well as a code
generator for SWFObject that helps you
| | 00:16 | write the code use SWFObject faster. So
I like using that when I use SWFObject.
| | 00:22 | I'm going to download that now. So
download swfobject_2_1.zip, or the latest
| | 00:27 | version of SWFObject if there is a
newer version, and then just click on
| | 00:31 | swfobject_generator_1_2_air.zip.
That's a file created using Adobe AIR.
| | 00:38 | If you don't have Adobe AIR or don't want
to use Adobe AIR there is also an HTML version.
| | 00:43 | I'm going to click on AIR to
use the AIR version and the file should
| | 00:47 | download and so I have them here.
| | 00:50 | In the SWFObject folder you are going
to have some files that you will need.
| | 00:53 | Inside there you really only need
swfobject.js. Just take this file and copy it
| | 00:58 | into the folder that you will be
working in. So you will need that in the same
| | 01:01 | folder as your HTML files to just let
the rest of this whole title. So make
| | 01:06 | sure to copy that over. I'm going to
double-click on the AIR file to open up
| | 01:10 | the Application Installer. And again
you are going to need Adobe AIR to run
| | 01:14 | this and if you don't have that you
can download it from the Adobe website.
| | 01:18 | So make sure to read over the
information here and if you feel okay then
| | 01:22 | install the file. I'm just going to
install it to my Applications folder and
| | 01:27 | click Continue, and so now the
application launches automatically. This is
| | 01:31 | actually saved in my Applications
folder on my Mac or if you are on Windows
| | 01:35 | machine it's saved in your Program Files folder.
| | 01:38 | As in AIR app this file is a native
application for your operating system. So
| | 01:43 | on the Mac it's in your Applications
folder and on the PC it's in the Program
| | 01:48 | Files folder. So you can always find
it there to help you generate code when
| | 01:52 | you are working with SWFObject.
| | Collapse this transcript |
| Using SWFObject| 00:00 | In this movie we'll look at using
SWFObject to load a SWF file. So the first
| | 00:06 | thing I want you to do is make sure
you have your SWFObject Generator open.
| | 00:09 | Again if you installed that file,
it should be in your Applications folder on
| | 00:13 | the Mac or Program Files folder on your PC.
The first thing the generator asks for
| | 00:18 | is the location of your JavaScript file
swfobject.js. If you have the JavaScript file
| | 00:24 | in the same folder as your SWF
file you don't need to change anything.
| | 00:27 | Next you pick the publishing method.
You can check more information about the
| | 00:31 | publishing method by clicking What Is
This? I'm going to click that again to
| | 00:36 | hide that menu. Basically Static
publishing is for devices that have no
| | 00:41 | JavaScript capability but still
have the Flash Player like the PSP.
| | 00:45 | Dynamic publishing is the one that you
want to choose pretty much all the time
| | 00:49 | unless you are targeting the PSP
that has poor JavaScript support.
| | 00:54 | Dynamic publishing enables you to have
very clean code and a smooth mechanism
| | 01:01 | for providing alternate content. So that's
the method I prefer and use 100% of the time.
| | 01:07 | Next we have, Detect Flash version. So
you can put which version of the Flash
| | 01:11 | Player that we are using. My application
uses Flash Player 9. So I'm going to
| | 01:15 | leave 9 right there and these other two
text fields are actually minor releases
| | 01:20 | of the Flash Player. So if you wanted
to put 9.1, 9.2 for example, you put it here.
| | 01:26 | Next you can put the location of the
Adobe Express Install file if you want to
| | 01:31 | use the Adobe Express Install for the
Flash Player. I'm not going to check that
| | 01:35 | box because I'm just going to have a
link to the Adobe site in my alternate content.
| | 01:39 | We'll look at that more in detail
later. Next we're going to give an
| | 01:43 | ID to the HTML container that's
going to contain the alternate content.
| | 01:49 | So for example if it's a DIV it's
going to have a DIV ID of my alternate
| | 01:55 | content. Let's change that to altContent,
and then we put the name of the Flash file.
| | 02:00 | Dorothy_Brodsky.swf and the
dimensions are going to be 100x100%.
| | 02:13 | So let's click that drop-down
and choose percentage.
| | 02:16 | Now here we can put more information
in the alternate content, but I'm just
| | 02:20 | going to leave it how it is right now.
Again anytime you have any questions
| | 02:24 | about the generator just click on the
What Is This? link and you can get that information.
| | 02:31 | So now click Generate to create
HTML file I'll use with SWFObject.
| | 02:36 | So I'm going to click Copy to clipboard. I'll
tab over to Text Wrangler where I have a blank
| | 02:42 | file and I'll paste in the code I just
copied. So you can see that the code is
| | 02:46 | very short and concise, uses a few
lines of JavaScript, and in the altContent DIV
| | 02:53 | you can place your alternate HTML
content. So let's save this file and
| | 03:00 | preview it in a browser.
| | 03:01 | So I'm going to go to Safari.
| | 03:04 | So you can see it works just like you'd
expect it to when you're in Safari.
| | 03:10 | Now, if you using Firefox, you may see
something totally different.
| | 03:14 | Let's take a look.
| | 03:16 | I'm going over to Finder
| | 03:18 | and then I'll right-click
| | 03:19 | using SWFObject.HTML
| | 03:22 | and open it with Firefox.
| | 03:24 | In Firefox,
| | 03:26 | I see absolutely...
| | 03:28 | nothing.
| | 03:29 | Now this is actually a huge problem
because if it doesn't work in Firefox,
| | 03:34 | it might as well not work at all,
because a lot of people use Firefox.
| | 03:38 | So let's take a look at the problem.
I'm going to tab over to TextWrangler.
| | 03:42 | We'll take a look in our code.
| | 03:44 | The problem is that Firefox
renders percentages different
| | 03:49 | than Safari does. So this isn't
necessarily a problem with SWFObject.
| | 03:54 | It's just an issue with using Flash
| | 03:57 | on the web.
| | 03:58 | So we have 100% for width and height for
our SWFObject. That means our Flash will take up
| | 04:04 | the entire browser window and this
is a very common way to use Flash.
| | 04:08 | Especially if you're creating an all Flash website.
| | 04:12 | So let me show you what you do here.
| | 04:14 | In Firefox,
| | 04:16 | in order to use percentages for an element like
our Flash content here, you also have to use percentages
| | 04:23 | for its parent element, which would be
the div with the ID of altContent,
| | 04:27 | and for the element's parent object, which is body,
| | 04:30 | and for that parent's element
| | 04:32 | all the way up to the HTML tag.
| | 04:35 | So we need to set
percentages for the HTML tag,
| | 04:38 | the body tag,
| | 04:39 | and this div here with the ID of altContent.
| | 04:42 | So I'll do that right above the ending
of the head tag. So let's create new CSS style
| | 04:47 | with the type of text/CSS.
| | 04:53 | A little HTML comment in there
| | 04:56 | and the style tag
| | 04:58 | and inside HTML content
| | 05:01 | we'll create the rules for HTML,
| | 05:04 | body,
| | 05:05 | and that div with the ID of altContent.
| | 05:12 | So for this rule,
| | 05:13 | I'm just going to set width and height to 100%.
| | 05:20 | Width 100%, height 100%.
| | 05:23 | Save the file.
| | 05:27 | Jump back over to Firefox.
| | 05:29 | Refresh the page,
| | 05:31 | and there is our Flash content.
| | 05:34 | Nice!
| | 05:35 | And if you click it of course you could
see that it works just like you'd expect it to.
| | 05:39 | Just like it does in Safari,
so let's go back over to TextWrangler
| | 05:42 | and recap that code.
| | 05:44 | So whenever you're using percentages
to embed your Flash content,
| | 05:48 | make sure you also set percentages
| | 05:51 | for all of its parent tags. So that
includes our alternate content element,
| | 05:57 | the body element,
| | 05:59 | as well as the HTML element.
| | 06:01 | When you set the width and height
as percentages for those elements,
| | 06:05 | then you can use percentages and have your
Flash content take up the whole width and height
| | 06:10 | of the web browser window.
| | 06:12 | Finally let's take a look at the alternate content. So see here
in that altContent div we have that link to get the Flash Player?
| | 06:19 | Let's see what that looks like in Safari.
| | 06:22 | So I'm going to tab over to Safari,
| | 06:24 | and I'm going to go to Safari >
| | 06:26 | Preferences and disable the Flash Player by unchecking
| | 06:29 | Enable Plug-ins
| | 06:30 | in the Security tab.
| | 06:33 | So refresh the page.
| | 06:35 | Then you see the Get Adobe Flash
Player link. So you click that
| | 06:39 | and download the latest version of Flash.
| | 06:43 | I'll just re-enable plug-ins
| | 06:45 | and refresh the page to see my Flash content again.
| | 06:49 | So to recap,
| | 06:50 | you could use SWFObject
using the SWFObject generator
| | 06:54 | and just remember
| | 06:55 | that whenever using percentages,
| | 06:57 | you need to also set the percentages,
| | 06:59 | of all parent elements of your Flash content.
| | Collapse this transcript |
| Adding alternate content| 00:00 | You know, the truly amazing thing about SWFObject is
that it provides such an easy way to add searchable,
| | 00:07 | alternate content for your Flash content
| | 00:10 | So in this movie we're going to look
at how to add that alternate content.
| | 00:14 | It's actually ridiculously simple.
| | 00:16 | Before we look at that,
| | 00:17 | I want to just review what we have in this file.
| | 00:20 | We just have SWFObject,
| | 00:22 | just like we did it before,
| | 00:24 | and I added some styling to set the margin
and padding for the body tag to zero.
| | 00:30 | Again remember that I'm setting the
width and height to 100% for the HTML,
| | 00:34 | body and our alternate content div
| | 00:37 | so that our percentages will render properly
| | 00:40 | in Firefox.
| | 00:41 | If you didn't see the movie on that I'd definitely
recommend watching the movie about using SWFObject,
| | 00:47 | So scroll down to our altContent div.
| | 00:51 | So all you have to do is put HTML in here
| | 00:53 | and search engines and people
who don't have Flash will see it.
| | 00:57 | So it's nice and easy.
We'll just start out with an H1 tag.
| | 01:01 | And I'll just write Dorothy Brodsky Photography,
| | 01:06 | and right below that I'll put a paragraph tag
| | 01:10 | and just a little blurb about Dorothy.
| | 01:13 | Dorothy Brodsky is a photographer
| | 01:19 | in the New York
| | 01:25 | tri-state area.
| | 01:30 | Just like that.
| | 01:31 | So I'll save the file.
| | 01:36 | Tab over to Safari.
| | 01:38 | Refresh the page,
| | 01:40 | and then we'll take a look at this page
| | 01:42 | without Flash. So go to Safari> Preferences
or Edit > Preferences if you're on a PC.
| | 01:48 | There are ways to do this in other browsers,
| | 01:51 | but if you can find it, don't even worry it.
You can just see the example.
| | 01:55 | So I'm going to uncheck Enable
Plug-ins in the Security tab.
| | 01:59 | Refresh the page,
| | 02:00 | and there's our alternate content. Yeah, it doesn't
look too pretty. Of course you could style this with CSS,
| | 02:06 | and I definitely recommend doing that.
| | 02:08 | But with this we have searchable HTML
content, so we can basically go through
| | 02:14 | all of our Flash content
| | 02:15 | and put that same data
| | 02:18 | into HTML so that search engines,
| | 02:21 | as well as people who don't have Flash can still
access the content that's in your Flash application.
| | 02:28 | And again all you have to do
provide the alternate content
| | 02:31 | is put your HTML that you want to be searchable
| | 02:34 | inside of your altContent div tag,
| | 02:37 | inside of the altContent element that houses your
Flash content, and that's the element that you set
| | 02:44 | when you run the SWFObject.embedSWF method.
| | Collapse this transcript |
|
|
4. Helping Flash with XML and PHPUnderstanding the effectiveness of dynamic data| 00:01 | In this chapter we are going to be
using XML to optimize a Flash based
| | 00:06 | application. It's important to
understand that just using XML by itself doesn't
| | 00:11 | boost your page's results. What we are
going to do here is use a single XML data source
| | 00:17 | to power a Flash application
as well as its alternate content.
| | 00:24 | That's serves two purposes. One, you
save time by using one data source so
| | 00:29 | if you update the data source both the
Flash application and the alternate content
| | 00:34 | get updated. Second, it makes sure that
your alternate content is exactly the same
| | 00:41 | or in other words a perfect
representation of your Flash content.
| | 00:46 | So let's look an example. Here I have
an XML file and I'm going to use this XML file
| | 00:52 | to power a Flash application as
well as its alternate content using a
| | 00:57 | language called PHP. The XML data is
pretty straightforward. I have a root
| | 01:02 | element and an element called about
that contains some text. Now I'm going to
| | 01:07 | tab over to Safari and we'll look at
the Flash application. Notice the text
| | 01:11 | here is the same text from the XML file.
| | 01:14 | So this Flash application is pulling
the data from that external XML file and
| | 01:19 | displaying it in Flash. Now let's take
a look at the alternate content for this
| | 01:25 | application by disabling the Flash Player.
Don't worry about following right now;
| | 01:30 | just watch my screen. So refresh the page
and here is the alternate content.
| | 01:36 | So this comes form that same XML file
that's powering the Flash application.
| | 01:41 | So in other words I added the XML file,
it updates the Flash application and
| | 01:45 | the alternate content. Also it's an
accurate representation of my Flash content.
| | 01:51 | by using an external data source and a
language like PHP that can take XML and
| | 01:57 | output it as HTML we can have a more
effective and more optimized site,
| | 02:03 | saving time and better representing our
Flash content and our alternate content.
| | 02:08 | In this chapter, we'll look at how to
do that from scratch. We'll start with
| | 02:13 | loading XML into a Flash file and then
we'll look at how to use PHP to load in
| | 02:18 | XML data and output that data as HTML code.
| | Collapse this transcript |
| Setting up a testing server (Mac)| 00:00 | In order to run PHP code on your
computer like we are going to do in this
| | 00:04 | chapter, you are going to need
something called a testing server.
| | 00:08 | A testing server basically mimics a
production server, which is like a server
| | 00:12 | that you see on the web.
| | 00:14 | Before we install that testing server,
I want you to go to System Preferences
| | 00:19 | and then click on Sharing and make
sure that Web Sharing is turned off, okay?
| | 00:24 | Go there and then I want you to open
up your Web browser and go to mamp.info.
| | 00:29 | MAMP is a testing server that installs
many very useful features with one quick
| | 00:39 | seamless install. That's why I like it
and recommend it for this exercise.
| | 00:44 | And then click the link to download MAMP,
not MAMP PRO. MAMP PRO is a paid version
| | 00:50 | with additional features that we don't
need for this exercise, then click the
| | 00:53 | link again to download MAMP.
| | 00:55 | Once it has finished downloading,
you can open that file up and I have it done
| | 00:59 | already so I'm going to jump over to
Finder and inside of my Downloads folder,
| | 01:03 | I'm going to open up MAMP_1.7.2. Going
to read the License Agreement, make sure
| | 01:10 | you agree to the terms and click
Agree. Once the MAMP Installer opens up,
| | 01:16 | click-and-drag the MAMP folder
into the Applications folder.
| | 01:23 | Now from there I'm going to double-
click the shortcut for Applications.
| | 01:27 | Scroll down to find the MAMP folder,
I'm going to open up the MAMP application.
| | 01:32 | Going to click Open because I know this
file is safe, I know it's downloaded from
| | 01:36 | the Internet as well. So launch MAMP,
in the meantime I'm going to close some of
| | 01:41 | these windows and I want to click
Preferences here. So click Preferences, and
| | 01:49 | we are going to make some adjustments.
| | 01:52 | So make sure Open start page at startup
is unchecked, and Start page URL should
| | 01:58 | be blank. So whatever is in there
just erase it and then move on to Ports.
| | 02:04 | Click Set to default: Apache and MySQL
ports. Then go to the PHP tab, make sure
| | 02:12 | you are using PHP version 5. Go to the
Apache tab and where it says Document
| | 02:17 | Root, click the Select button and then
we are going to go in your user folder
| | 02:23 | and select the Sites folder.
| | 02:25 | Click Open and click OK and MAMP
server will relaunch. It will ask you to
| | 02:33 | authenticate. So type-in your password
and once you see two green lights there,
| | 02:38 | open up your Web browser and to make
sure that MAMP installs successfully.
| | 02:43 | And then it's running properly right now.
Browse to http://localhost all lowercase.
| | 02:53 | When you go there you should see
this screen, this is the default webpage
| | 03:00 | in the Sites folder for Mac OS X.
| | 03:03 | If you see something different in here
and you are the one that put it there,
| | 03:06 | then don't worry. But this is what you
should see generally. So now that this
| | 03:11 | is set up and MAMP is working properly,
I'm going to go into the Sites folder
| | 03:15 | on my computer and then I'm going to
create a New Folder in there. I'm going to
| | 03:19 | call that flashseo.
| | 03:20 | So through the rest of this chapter,
we are going to be working on the exercise
| | 03:26 | files inside of this folder. And now
that the testing server is ready and
| | 03:31 | you have a folder to work in, we'll get started
working with PHP and XML for search engine optimization.
| | Collapse this transcript |
| Setting up a testing server (Windows)| 00:00 | In order to use a PHP with XML, we are
going to need a testing server. In this movie,
| | 00:06 | I'm going to walk you through
installing a testing server on Windows.
| | 00:10 | The testing server that I prefer to use
is called WampServer. I like it because
| | 00:16 | it has many features that you want in
a web server and it comes in one easy install.
| | 00:22 | So to download WampServer, go to
wampserver.com/en. So once you are there,
| | 00:31 | you can click the link to download the
latest release of WampServer 2. And then
| | 00:37 | here you are going to get a warning
message to make sure you are not installing
| | 00:40 | it over WAMP5. Make sure you read the
message and understand what you are doing
| | 00:44 | before you download the file and if
you already have WAMP installed then
| | 00:48 | you don't need to install another version
of WAMP. You could simply use that same one
| | 00:52 | for this exercise.
| | 00:54 | So click Download to download the file
and I'm going to click to Save this file
| | 01:00 | and it's going to download and then
once it's downloaded, I'm going to
| | 01:04 | double-click the file in my Downloads
window to open it up. The message comes
| | 01:08 | up, at confirm as you want to open the
executable file. I'm just going to click OK.
| | 01:12 | Then you may get asked another time,
that's security, whether or not you
| | 01:16 | want to open the file and I'm positive,
I want to open this file. And so yet
| | 01:21 | again, I confirmed that I know what
this file is and that I want to open it.
| | 01:27 | And this set up just confirms that we
are not installing over WAMP5 and I'm not
| | 01:32 | going to do that. So I'm going to click
Yes. Then I'm going to walk through the
| | 01:35 | installer. Make sure to read the
license agreement and if you accept the terms,
| | 01:40 | you can click. I accept the agreement
and click Next to proceed. Choose the
| | 01:43 | default install location which is
directly on your C drive in a folder called WAMP.
| | 01:47 | Click Next. I'm not going to
click either of these boxes.
| | 01:51 | I'm going to click Next and then
I'm going to click to Install WAMP.
| | 01:59 | Now that's it's installed I'm being
asked to set Firefox as my default browser,
| | 02:03 | I'll just click Yes for that. You can
use another browser, you can use that
| | 02:07 | browser as your default, it doesn't
matter and then I'm just going to leave
| | 02:10 | these settings at the default. And
then click Finish to launch WampServer.
| | 02:15 | I want to allow that. So make sure you
understand what you are clicking before
| | 02:19 | you click Allow. And then on the
right side of the screen, I see little
| | 02:22 | WampServer icon and I'm going to
click that. There is an option to put
| | 02:27 | WampServer online, so I'm going to
click that. That will start up WampServer.
| | 02:31 | I'm going to wait a few seconds and
when it says server online, it's ready for use.
| | 02:34 | So I'm going to close this Downloads
window and then to test, to make sure
| | 02:38 | that it's working properly go to
this location in your web browser.
| | 02:42 | http//localhost, all lowercase, and
when you go there you should see this screen.
| | 02:53 | You are good to go. I want you to do
one more thing before you finish here,
| | 02:57 | I want you to go to the folder where
WAMP is installed. So you go to your C drive
| | 03:01 | on your computer, go inside of
the WAMP folder, inside of there go inside
| | 03:05 | the www folder. And this is where you
are going to put the files that you will
| | 03:09 | be working with throughout this
chapter and any other chapter that uses
| | 03:12 | a testing server.
| | 03:14 | In here I wants you to create a folder
and we'll call this folder flashseo.
| | 03:20 | And I just copied the exercise files for
Chapter 4 into this folder and you are
| | 03:24 | ready to move forward.
| | Collapse this transcript |
| Using XML in Flash| 00:00 | In this movie, we are going to look
at how to utilize XML data in Flash.
| | 00:05 | Just note that on the stage here I have
a Dynamic Text field called about_txt and
| | 00:12 | I have an XML data file called about.xml.
You can create or open this file in any
| | 00:20 | plain text editor. I'm using TextWrangler
right here but you could also use TextEdit.
| | 00:24 | So if you don't have access
to the Exercise Files, make sure that
| | 00:29 | you have some kind of XML file to load data from.
| | 00:34 | Just create your XML file this. Have an
opening element called <root>, closing
| | 00:38 | </root> element, opening <about>
element, closing </about> element and then
| | 00:44 | just put some text in between the <about>
opening and </about> closing element.
| | 00:48 | So we have a pretty simple XML file
here. Let's go back over to Flash and
| | 00:53 | we are going to put that text
inside of the About text field.
| | 00:57 | So let's go to the first keyframe in
the actions layers and open up the Actions
| | 01:00 | panel. I've actually written all the
code here and we are just going to review it.
| | 01:04 | Now if you are not familiar with
working with XML data, I definitely
| | 01:08 | recommend the title ActionScript 3.0:
Working with XML in the Online Training Library.
| | 01:15 | That title goes in great
depth about working with XML data in Flash.
| | 01:21 | So here we are just loading that simple
XML data and putting in the text field.
| | 01:24 | So let's review how that works. I have
a variable called xml, data typed it to
| | 01:29 | XML and the URLRequest to hold the
reference to the about.xml file. This is
| | 01:35 | again in same folder as our FLA and
SWF files are. I have a variable called
| | 01:41 | loader that's an URLLoader. So I
created a new instance of the URLLoader class.
| | 01:46 | I added an EventListener to the loader
to listen for Event.COMPLETE to run a
| | 01:50 | function called
dataLoaded. Then I load the file.
| | 01:53 | Just as a side note here, always
remember to load data after adding the
| | 01:58 | EventListener. It's very significant
because sometimes the event can occur
| | 02:03 | before the addEventListener line of
code triggers and you can get errors.
| | 02:08 | Here is our dataLoaded function, pretty
straightforward. We are taking that XML data
| | 02:13 | and holding it in a new instance to
the XML class to the URLLoader's data
| | 02:17 | property and then putting that
text inside of the text field.
| | 02:21 | So we have about_txt.text = xml. That's
our XML data, which we set on line 7 in
| | 02:29 | the code .about. Remember that you can
access XML elements using dot syntax,
| | 02:35 | which is called E4X or ECMAScript for
XML. Again, more information about XML in
| | 02:41 | the XML title. Now let's test the movie
and see the data appearing in the Flash
| | 02:46 | Player. And there it is, right there.
| | 02:48 | Now that we have XML powering our
Flash application, we are ready to use that
| | 02:53 | same XML data with PHP to create HTML
code that will serve as alternate content
| | 02:59 | for this Flash movie.
| | Collapse this transcript |
| Using PHP to output XML as HTML| 00:00 | In this movie, we are going to look at
how to use PHP code to output XML data
| | 00:06 | as HTML. If you are following along I
want you to make sure that you have the
| | 00:11 | following files in your testing server
folder and that your testing server is on.
| | 00:17 | On the Mac it's in your User folder
and in the Sites folder, and in there
| | 00:22 | you should have the flashseo folder.
And if you haven't yet copied the exercise files
| | 00:27 | for this chapter into that folder,
I recommend doing that right now.
| | 00:31 | So you should have five files in
there: about.fla, about.php, about.swf,
| | 00:38 | about.xml and swfoject.js. If you
don't have the Exercise Files, you should
| | 00:44 | still have all of these files in this
folder. If you are running a PC,
| | 00:50 | this won't be in your Sites folder but it
will be in www folder, which is inside of
| | 00:56 | the WAMP folder on your C drive.
| | 01:00 | So make sure you are in the right place,
you have the right files in the right
| | 01:03 | place and finally make sure that
your testing server is up and running
| | 01:07 | properly. That said, let's go over to
that about.php file in a text editor.
| | 01:15 | So I have my HTML here
| | 01:17 | and you can see it's pretty standard.
I'm just using SWFObject.
| | 01:20 | You can see my code there
| | 01:22 | and then I have some simple styles. I have
the margin and padding set to zero for the body tag
| | 01:28 | and then I'm setting the width and height to 100%
| | 01:31 | in the HTML and body tags along with that
| | 01:35 | div element with the ID of flashContent.
Remember that's the one that we're using
| | 01:39 | to house our Flash content.
| | 01:41 | And this is basically a fix for Firefox
because of the way Firefox handles percentages.
| | 01:47 | If you need more information about that be
sure to watch the movie called Using SWFObject.
| | 01:53 | So here I have my page title,
| | 01:56 | and then my div that's called flashContent,
an H1 that says About Dorothy,
| | 02:01 | and then a paragraph tag and
inside of that paragraph tag,
| | 02:05 | I have a PHP block, so there's the
opening PHP tag and the closing PHP tag,
| | 02:10 | and then two lines of PHP code.
| | 02:13 | The first line of PHP code
uses the PHP 5 extension
| | 02:18 | simpleXML_load_file. It loads the file about.XML
| | 02:24 | and then I use the PHP echo function
| | 02:28 | to display the XML's data.
| | 02:31 | So the XML is held in that XML variable,
| | 02:34 | $XML,
| | 02:36 | and then the hypen greater than sign (->)
| | 02:40 | about. So that will show the
about XML element from our XML file.
| | 02:45 | So inside of our XML file
there's just an element called about
| | 02:49 | and this will print that out
| | 02:50 | in our HTML
| | 02:52 | as alternate content.
| | 02:54 | So let's see how that works.
| | 02:55 | Let's open up
| | 02:57 | that about page in a web browser.
| | 02:59 | So you don't just want to click on and open it up
in your web browser. You actually need to browse to
| | 03:04 | http://localhost/flashseo/about.php.
| | 03:12 | So you should see the Flash content there.
| | 03:14 | And if you're working in Safari or Firefox,
| | 03:18 | in the Preferences disable Flash.
So I'm going to uncheck Enable Plug-ins
| | 03:22 | in the Security tab
| | 03:23 | and then refresh the page.
| | 03:25 | And here's my alternate content.
| | 03:27 | So this is all coming
| | 03:28 | from that same XML file that we used in our Flash application.
| | 03:33 | So we can rest assured
| | 03:34 | that our alternate content is an accurate
representation of our Flash content.
| | 03:42 | And again we could see that if we enable Flash,
| | 03:45 | refresh the page,
| | 03:46 | and see here that the XML data
| | 03:50 | that's showing in our Flash application is
exactly the same as its alternate content.
| | 03:55 | So by using PHP,
| | 03:57 | we can have that same XML data
that's showing up in Flash,
| | 04:01 | load in and display as
searchable HTML alternate content.
| | Collapse this transcript |
|
|
5. Using SWFAddress with FlashUnderstanding SWFAddress| 00:00 | In this chapter, we are going to
use SWFAddress for deep linking Flash
| | 00:05 | applications. Deep linking refers to making
links to individual states of an application.
| | 00:13 | So I'm going to click around in the
buttons towards the bottom left of this
| | 00:17 | application here and what I want you to
do is watch the browser update both the
| | 00:22 | title and the URL. So, I'll click About
and it updates contact, and it updates.
| | 00:29 | Further, I can change the URL.
Instead of the /contact, if I change it to
| | 00:35 | /about, the Flash application will
update. Deep linking also allows for
| | 00:41 | bookmarking of states of an application.
So, let's say I wanted to bookmark the
| | 00:46 | About page. So, what I'm going to do
is click the Add Bookmark button and
| | 00:51 | I'll add it to the Bookmarks Bar, and
then what I'm going to do is create
| | 00:57 | a new Safari window, open up my Bookmarks,
go to the Bookmarks Bar and then go to
| | 01:03 | that link that I created and it initializes
the Flash application to go to that state.
| | 01:08 | Now, you may be thinking this has to
be amazing for search engines.
| | 01:14 | Those search engines can't index these URLs;
they all point to the same page or
| | 01:19 | the same application. So it doesn't do you
a whole lot of good. It is not really so
| | 01:24 | much for search engines as it is for usability.
| | 01:29 | So having a site with deep linking is
powerful for SEO because people can share
| | 01:34 | links to your site and drive more
traffic to your site, but it is not going to
| | 01:38 | make a huge difference in the search
engine rankings, like it is going to
| | 01:41 | improve the usability of the site.
So, I just want you to keep that in mind.
| | 01:45 | One more thing about SWFAddress is this
technique does not work in Firefox on
| | 01:52 | the Mac. That is an issue that might
or might not be updated with updates of
| | 01:57 | Firefox or updates of SWFAddress.
That said, let's look at deep linking with
| | 02:03 | SWFAddress and Flash.
| | Collapse this transcript |
| Downloading SWFAddress| 00:00 | Let's look at downloading
SWFAddress. To download SWFAddress,
| | 00:04 | go to asual.com/swfaddress. Once you are there,
click the link to download SWFAddress 2.2.
| | 00:14 | That is the current version and
then once it is downloaded, open the ZIP file
| | 00:21 | and we'll take a look at what you
are going to need in that file. So,
| | 00:24 | I'm going to double-click the file to open
it up in Finder and then you will see
| | 00:28 | SWFAddress 2.2, and here we have some
samples and in there you will see cs3.
| | 00:36 | So in there copy all the contents of
this folder into your working area and
| | 00:42 | you'll be ready to start writing SWFAddress code.
| | Collapse this transcript |
| Using SWFAddress in Flash| 00:00 | Now, let's take a look at the
ActionScript that you need to use when you are
| | 00:03 | using SWFAddress. Before you get
started with this exercise, make sure that
| | 00:08 | in the same file as your fla folder, you have
the SWFAddress and SWFAddress event class files.
| | 00:15 | On the stage here, I have a pretty
simple layout. There are three buttons.
| | 00:19 | There is the Galleries button,
which is galleries_btn, about_btn and
| | 00:25 | the Contact button is called contact_btn.
There are then three movie clips on the stage.
| | 00:30 | The front most one is called
galleries_mc and then about_mc and
| | 00:37 | you guessed it, contact_mc. That's a
pretty simple setup. You don't need any
| | 00:42 | complicated artwork, just have
some movie clips and some buttons.
| | 00:46 | So, let's go to the first keyframe in
the Actions layer and open up the Actions panel.
| | 00:49 | The first thing we are doing
is importing SWFAddress in SWFAddress event.
| | 00:53 | Make sure that these class files
are in the same directory as your fla.
| | 00:58 | And I'm just basically going to walk
you through the code rather than typing it
| | 01:01 | all out here. Mostly because the
SWFAddress code doesn't take a whole lot.
| | 01:08 | Yeah, I know it is 45 lines of code but
I promise, it's a lot less complicated
| | 01:12 | than it seems. So, if we test the
movie, it is a pretty simple Flash application
| | 01:17 | that, if you click Galleries, About
or Contact, the appropriate page shows.
| | 01:21 | A lot of this code is code to
run that part of the application.
| | 01:26 | So, we have an array of pages and that
just represents all of the movie clips for
| | 01:32 | the pages. And at the bottom of the code,
we have some event listeners added to
| | 01:37 | all buttons to listen for a mouse
click and they all run a function called
| | 01:41 | buttonClicked. And then here is
some of the important SWFAddress code,
| | 01:45 | SWFAddress.addEventListener
(SWFAddressEvent.CHANGE, handleSWFAddress).
| | 01:50 | So you absolutely need this to use SWFAddress.
This is going to handle the browser
| | 01:56 | address change in Flash. Whenever
somebody types in a certain URL in the browser,
| | 02:02 | that data is going to get
sent to Flash you are handling here with
| | 02:06 | handleSWFAddress. This also handles
whenever you in Flash update the page,
| | 02:12 | which will update the browser
address and title. This is very important.
| | 02:16 | Let's look at the buttonClicked
event handler. It's pretty simple.
| | 02:20 | So the first thing we are doing is creating
the button name variable and that's the name of
| | 02:25 | the button that's clicked, event.target
.name. Then we are setting button name
| | 02:28 | equal to btnName.slice(0, btnName.
indexOf("_"). Remember the buttons are called
| | 02:35 | galleries_btn, about_btn and contact_btn.
Basically, this line of code is just
| | 02:42 | eliminating the underscore and
everything after it. So, we are just taking
| | 02:46 | the name of the button. And now on the
next line we are creating a new address.
| | 02:51 | This is for SWFAddress. What it is
doing is just adding a forward slash before
| | 02:57 | and after the button name. This is
something that you want to do when you are
| | 03:02 | using SWFAddress. So, you put a forward
slash before and after the named anchor
| | 03:07 | that you are going to set and then
you call this code, SWFAddress.setValue,
| | 03:12 | and you pass in the new address.
| | 03:13 | So, this is going to do two things.
The first one is that it is going to send
| | 03:17 | and update the address in the browser.
So somebody could copy and paste the
| | 03:21 | URL somewhere or link to it and have
the application initialize to that state.
| | 03:27 | And the other that is going to happen
is once the browser is updated, then this
| | 03:31 | handleSWFAddress function will run.
Because remember, this is connected to
| | 03:35 | the SWFAddress CHANGE event.
Let's see what this function does.
| | 03:39 | So, here is a link set at event.value.
The link is going to be whatever
| | 03:45 | the value of SWFAddress is, which is going
to be what we pass in here when we run
| | 03:50 | set.value or whatever somebody types in
when they type in the URL. So that
| | 03:54 | fragment is going to come in here.
Then we have a variable called mcNAme
| | 03:59 | that is the same as link at this point.
| | 04:02 | So here is a conditional statement.
Check to see if link is equal to a single
| | 04:06 | forward slash. When the SWFAddress of
the application initializes, that event
| | 04:11 | is automatically fired off and if there
is no URL fragment then the fragment is
| | 04:17 | set to just a forward slash. So
basically, if nothing is set, what we are doing
| | 04:22 | here is setting it equal to galleries
and then we run SWFAddress.setValue using
| | 04:28 | that link and then return which
basically stops processing this function.
| | 04:32 | So that is just the first time
when the application initializes.
| | 04:37 | Then we have mcNAme and we are using
what's called the regular expression here.
| | 04:42 | And if you are not familiar with
regular expressions, this is actually a pretty
| | 04:45 | simple use of one and what we are
doing is taking the forward slashes out of
| | 04:51 | the link name. So, mcName = mcName.replace
and this code I have selected here
| | 04:57 | is what's called the regular expression.
So, there is a forward slash to start it
| | 05:00 | and a forward slash to end it, and
inside of it there is a back slash and
| | 05:05 | then a forward slash.
| | 05:06 | The back slash is the escape character
just like when you are working with a
| | 05:11 | string and the forward slash is a
character that we are looking for with
| | 05:15 | this expression. So this regular
expression is searching for a forward slash.
| | 05:20 | This lower case g after that stands for
Global. So, it is going to take all the
| | 05:25 | forward slashes and replace them with
nothing. So, it is much more effective
| | 05:31 | than using the Slice method or
something to modify a string twice.
| | 05:35 | We just do it once here with this regular
expression. More information about regular
| | 05:39 | expressions can be found in Flash Help.
| | 05:43 | Now, we have a for loop and this is not
for SWFAddress. This is for showing the pages.
| | 05:47 | Basically, it hides all the pages
and then shows the page it was clicked on
| | 05:52 | and then we run this essential
method for SWFAddress, which is called
| | 05:57 | setTitle, and we pass in the title
that we want to show up in the browser window.
| | 06:03 | It's running a function called
formatTitle, which is defined in our
| | 06:06 | code here, passing in that link.
Remember that the link is the /name/.
| | 06:14 | formatTitle is basically going to turn
that into a readable title for the page.
| | 06:19 | So the formatTitle function simply
holds the title and updateTitle variable
| | 06:25 | uses that replace method that we
looked at earlier with regular expression
| | 06:29 | to eliminate the forward slashes. Then we
check on Dorothy Brodsky Photography,
| | 06:35 | a vertical pipe and then the updated
title and Return. So pretty simple, and
| | 06:41 | that is all the code for this file.
| | 06:43 | So to recap, you basically need to run
SWFAddress.setValue and you want to pass in
| | 06:50 | for the address something that
starts and ends with a forward slash.
| | 06:54 | And then we have the addEventListener to
listen for SWFAddress.CHANGE and then for
| | 07:00 | handling the SWFAddress, you want to
make sure to handle it the first time that
| | 07:05 | this event is fired, which is when
application initializes. In that case,
| | 07:09 | the event.value property is going to
be a forward slash, and then you run
| | 07:15 | SWFAddress.setTitle to set the title of
the page. So, once your SWFAddress code
| | 07:20 | is setup in ActionScript, you are
ready to set up the HTML code that will run
| | 07:25 | SWF address in the browser.
| | Collapse this transcript |
| Using SWFAddress in HTML| 00:00 | In this movie we'll look at the HTML
that you need to write to get SWFAddress
| | 00:04 | working in your Web browser. In order
to see SWFAddress working on your local
| | 00:08 | computer, you'll either need to
adjust your Flash Player settings to allow
| | 00:12 | access for those files or use a
testing server to test SWFAddress. We'll just
| | 00:20 | use a testing server.
| | 00:22 | In the Chapter 5 folder grab index.html,
the swfaddress folder, the SWFAddress
| | 00:28 | SWF file and then swjobject.js and
copy those files into your testing server.
| | 00:36 | That's in my Sites folder on my Mac.
If you are on a PC, it's in the www
| | 00:41 | folder, if you are using WampServer.
| | 00:44 | Create a New Folder in your testing
server folder and I'm going to call it
| | 00:49 | swfaddress, all lowercase. So inside
that swfaddress folder I'm going to copy
| | 00:56 | the files that we selected earlier.
Once they are in there I'm going to open up
| | 01:02 | index.html in the text editor. But you can
use any plain text editor that you'd like.
| | 01:08 | So here I'm just going to make the
text wrap. Let's look at the code.
| | 01:14 | It's actually pretty straightforward.
Just add this line of code above where you are
| | 01:19 | using SWFObject. So let's go ahead and
import that swfaddress.js file. Remember
| | 01:24 | that's in the swfaddress folder.
| | 01:25 | We bring that in and then when you are
embedding the SWF using SWFObject, what
| | 01:32 | you want to do is make sure to add the
attribute ID. That's the third object in
| | 01:38 | the optional parameter section when
you are writing that embed SWF method.
| | 01:43 | Scale: noscale is useful because it
doesn't scale the Flash content but it's
| | 01:47 | not necessary to get SWFAddress to work.
| | 01:49 | So you can just have the name of the
file, the name of your alternate content,
| | 01:56 | the dimensions of the file, Flash
Player version, false or the express install
| | 02:02 | file and then two empty objects and
then the ID attribute should have the ID
| | 02:09 | property set to a value of website or
whatever. You just need some value.
| | 02:15 | This can be anything you want.
| | 02:17 | What this is doing is giving your
Flash content an ID. That way communication
| | 02:22 | between the SWF file and the browser
can work. So make sure you have that in
| | 02:26 | there, and other than that this
is just standard SWFObject code.
| | 02:30 | So let's test this on our testing
server. So I'm going to open up Safari and
| | 02:36 | I'm going to browse to localhost/
swfaddress/index.html or you can just do
| | 02:45 | localhost/swfaddress. You will see that
it updates the swfaddress/#/galleries.
| | 02:52 | You've got that little hash symbol in
there. If you click on the buttons to
| | 02:56 | navigate you will watch the
address update in the Address Bar.
| | 03:00 | You will also notice the title update
as well. You can change the address to
| | 03:05 | update the application. So if I want
to go to the Contact page or just type
| | 03:08 | that in the browser window and it goes there.
| | 03:11 | So let's just select the address now
and copy it, and then I'm going to create
| | 03:17 | a new Safari window. I'm going to paste
the URL in my browser. We'll see if it
| | 03:23 | initializes to the Contact page. Sure
enough the application initializes to
| | 03:29 | show the Contact page first.
| | 03:31 | So using SWFAddress you can easily make
deep links in your Flash applications.
| | 03:37 | Those deep links can be shared and
bookmarked by people that visit your site.
| | Collapse this transcript |
|
|
6. Working with Progressive EnhancementUnderstanding progressive enhancement| 00:00 | In this chapter we are going to be working
with something called Progressive Enhancement.
| | 00:04 | Progressive Enhancement allows
you to get your application to
| | 00:08 | the widest audience possible. Here is how it works.
| | 00:12 | At your basic form, you have an HTML
version of the application. So anybody
| | 00:17 | that has HTML support in their Web
browser will be able to view your
| | 00:21 | application. If the person viewing
your site also has JavaScript enabled in
| | 00:25 | their browser, then they will get
an enhanced version of the site.
| | 00:29 | Further, if the person also has the
Flash Player installed, then they will get
| | 00:34 | an even more enhanced version of the
site. So you can see the progressive
| | 00:37 | enhancement there. HTML, then HTML
and JavaScript, and then up to Flash.
| | 00:41 | So throughout this chapter, we are
going to look at a progressively enhanced
| | 00:46 | application. I'm going to walk you
through how it works so you can build
| | 00:51 | your own progressive
enhancement applications on your own.
| | 00:54 | So here is an example of an application
that uses Progressive Enhancement.
| | 00:59 | Just watch and follow along. If you do have
the exercise files, you will need to put
| | 01:03 | these files on your testing
server in order for it to work.
| | 01:07 | Right now we are looking at a Flash
application. So you can see me clicking
| | 01:11 | through it and looking at the
other images and everything.
| | 01:14 | Let's see what this application looks
like if I disable JavaScript and
| | 01:19 | the Flash Player. In Safari you can go to
Preferences and uncheck the option to
| | 01:24 | enable plug-ins and to enable
JavaScript in Security Settings. Other browsers
| | 01:30 | have the same option, but it may not
be in the same place as it is in Safari here.
| | 01:34 | So I'll close that
window and refresh the page.
| | 01:37 | So here is fully searchable text that
search engines can read and people can read
| | 01:42 | if they don't have JavaScript or
Flash support. They can still get
| | 01:45 | the same experience by viewing the same content.
| | 01:49 | Now let's see what the site looks like
if the person visiting the site also has
| | 01:54 | JavaScript support. So I'll just
check to enable JavaScript and
| | 01:59 | close that window, refresh the page. Notice
that we have the plus and minus icons to
| | 02:05 | expand and collapse the sections.
So you get a progressively enhanced
| | 02:10 | experience if you have
JavaScript and HTML support.
| | 02:15 | Finally, we'll look again at the Flash
version of the page by enabling plug-in
| | 02:20 | support in JavaScript. So I'll refresh
the page and here is the Flash version.
| | 02:27 | So by using Progressive Enhancement
you are able to reach all the people who have Flash,
| | 02:32 | all the people who have JavaScript
and even people who only have HTML support.
| | 02:38 | Throughout this chapter we are going to
look at how I built this progressively
| | 02:42 | enhanced application, and the goal is
not so you can build this application
| | 02:46 | yourself from scratch but so that
you can understand how Progressive
| | 02:49 | Enhancement works so that you can
implement it in your own applications.
| | Collapse this transcript |
| Using XML and PHP to create an HTML version of your site| 00:00 | In this movie, we'll walk through the
HTML and PHP code that I used to create
| | 00:07 | the progressive enhancement
application that we looked at earlier in this
| | 00:10 | chapter. More than anything, I just
want you to understand the concept behind
| | 00:14 | progressive enhancement rather than
writing this application from scratch.
| | 00:18 | So I have some PHP code that holds an
array of all the XML files. I'm using SWFobject
| | 00:25 | and I have the alternate content.
That's where all the magic happens.
| | 00:30 | So in the alternate content I have an
unordered list of all of the links. Each one
| | 00:39 | of those links has a # URL which will
be used with JavaScript if the person has
| | 00:44 | JavaScript when viewing its application.
| | 00:47 | So here I have it broken up into
Divs and there are headings, like About,
| | 00:54 | Contact and the Galleries. I'm using
PHP to output all of the XML content as HTML.
| | 01:03 | We looked at that earlier in
this title. This application just uses
| | 01:10 | the XML data that the Flash application
is using for its alternate content along
| | 01:15 | with some static HTML. Of course, you
could use XML for everything if you would
| | 01:19 | like to. It's most effective. So we
have an HTML version of the application.
| | 01:26 | The secret to making the JavaScript
work in progressive enhancement is to make
| | 01:32 | sure that JavaScript is unobtrusive.
So it uses the DOM to manipulate the
| | 01:37 | content and it's not inline JavaScript.
So I have an external script file,
| | 01:42 | which we'll look at in another movie
to control the JavaScript interactivity.
| | 01:46 | So whether or not the person viewing
this page has JavaScript, as long as they
| | 01:51 | have HTML support, they can still view
the content on the page. That's how the
| | 01:56 | HTML version of this site works.
| | Collapse this transcript |
| Using JavaScript to add functionality| 00:00 | In this movie, we'll look at the
JavaScript used in this application for
| | 00:04 | progressive enhancement.
The HTML code links to a file called
| | 00:08 | max-optimize-new.js. Let's
look at what that file is.
| | 00:12 | I am going to expand my working area
here. Here is some JavaScript code. Again,
| | 00:17 | you don't need to copy down all
this code. I just want to show you
| | 00:19 | a general idea of how it works.
| | 00:20 | So I have some empty arrays. I'll run
the windowLoaded function when the window
| | 00:26 | is loaded. Here I have some code
that runs once the window is loaded.
| | 00:32 | It's pretty simple. I hold all the links
in a variable, loop through them and react
| | 00:37 | to see if the link is a
menu item or a gallery link.
| | 00:41 | If it's a menu item, I add a plus on
to the name. So if it says galleries,
| | 00:46 | I add a space and a plus onto that.
For the gallery links, do the same thing with
| | 00:51 | a space and a plus. When you click
a menu item, it runs handleClick.
| | 00:55 | When you click a gallery link, it runs
handleGalleryClick. This makes the application
| | 01:01 | look pretty if the
person viewing has JavaScript.
| | 01:03 | So here I'm looping through all of
the menu items and the gallery links,
| | 01:08 | setting the display to none. Then in
handleClick, pluses get replaced with
| | 01:14 | minuses and vice versa. Then the
display changes from block to none and from
| | 01:19 | none to block. In handleGalleryClick,
the same thing happens.
| | 01:23 | This is pretty simple JavaScript code,
but the point is that it's unobtrusive
| | 01:29 | so it's not required if you want to see
the HTML version of the site. So again
| | 01:35 | to set up the progressive enhancement
application, all you need to do is use
| | 01:39 | HTML and make sure the application
works all by itself just with HTML and then
| | 01:45 | add the JavaScript code. Make sure it
works with bold HTML and with HTML and
| | 01:49 | JavaScript and then use SWF
object to add the Flash content.
| | 01:54 | So using those techniques, you can
use progressive enhancement to reach
| | 01:59 | the widest variety of people,
platforms and browsers.
| | Collapse this transcript |
|
|
7. Getting ResultsKnowing what results to expect| 00:00 | In this chapter we are going to talk
about getting results. To start the discussion,
| | 00:05 | I want to show you a website
that I created. This is the site that
| | 00:08 | we have been working on throughout
this title. It's at dorothybrodsky.com.
| | 00:13 | It's an all Flash website. So if you
are looking at it, the whole thing,
| | 00:18 | it's all Flash. There aren't any links to
any other pages. It's just one page of
| | 00:22 | Flash content. When I created the
site as you can see in the page source --
| | 00:27 | let's make it a little bit bigger,
it has searchable HTML. So I used all of
| | 00:33 | the principles taught in this title when
I created this. And it's now been online
| | 00:39 | for about two or three weeks. Before
that the site did not show up in search
| | 00:45 | results, or in other words it was not
indexed by Google at all. After a few weeks,
| | 00:52 | I searched for Dorothy Brodsky.
Let's use Google. Returns Dorothy's site
| | 00:59 | as the number one site.
| | 01:01 | Now, is this necessarily going to
happen to your site right away? It depends.
| | 01:06 | Dorothy Brodsky is not a very common
name so that makes the site more likely to
| | 01:11 | show up. But by using these
principles you can make your all-Flash websites
| | 01:16 | show up with a good title and a
good description in a web search.
| | 01:21 | And it greatly increases the likeliness that
you will show up higher in search results.
| | 01:27 | So these are the types of
results that you will get.
| | 01:30 | If I search for Dorothy Brodsky Venice
Carnival, which is one of the images in
| | 01:39 | the gallery, that text gets highlighted
in the search results. So we know that
| | 01:43 | at least Google is going through the site,
indexing the content and can display it in
| | 01:48 | a web search. So these are the types
of results that you are going to get.
| | 01:52 | So instead of having an all-Flash
site with no other searchable HTML,
| | 01:56 | no description, the default Flash title,
which is the same as your file name,
| | 02:00 | you can have a title and a description
that accurately represents the content in
| | 02:05 | your site and boosts your
results in the search engine pages.
| | Collapse this transcript |
| Knowing when to expect results| 00:00 | In another movie I mentioned that I got
results from my all-Flash site in a few weeks.
| | 00:05 | Now realistically, it could
take as long as three to six months to see
| | 00:11 | significant improvement when
optimizing your site. Further, search engine
| | 00:15 | optimization is not an exact science
and there for as your instructor, I can't
| | 00:19 | really guarantee that you are going
to the number one slot or any real
| | 00:24 | improvement to your pages.
| | 00:26 | However, you will probably see a
significant difference before too long.
| | 00:31 | While you are waiting for the results
I want to show you this website that you can
| | 00:34 | use to improve your optimization for
your pages. Now this goes beyond just
| | 00:40 | Flash search engine optimization.
| | 00:42 | Go to google.com/webmasters. There is
also the same kind of tools on Yahoo! and
| | 00:48 | MSN but I definitely like Google's the
most. At this location you can find plenty
| | 00:53 | of resources about search engine
optimization straight from the source.
| | 00:58 | So it's a great place to
start for optimizing your site.
| | 01:02 | Here they have Webmaster Tools and
Webmaster Tools will give you straight tips on
| | 01:08 | how to optimize your site and
monitoring how many pages are indexed and
| | 01:13 | all kinds of other site statistics. So you
can create an account, add your website,
| | 01:19 | follow the steps that Google gives you,
and then you can look through your site
| | 01:24 | statistics and get information from
Google about how you can better modify your site
| | 01:29 | so that it can be more
accurately indexed by search engines.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, that's it for building search
engine friendly sites with Flash CS4.
| | 00:06 | I hope you had a good time learning
because I had a great time teaching.
| | 00:10 | In this title you learned the ins and
outs of Flash search engine optimization,
| | 00:15 | and can now build sites, even all-Flash
sites, that can be effectively indexed by
| | 00:20 | search engines.
| | 00:22 | So as you got out into the world and
you make optimized Flash sites, I want you
| | 00:27 | to show me what you make.
You can contact me through my website
| | 00:31 | chadandtoddcast.com and show me your
work because I'm definitely interested to
| | 00:38 | see your success in optimizing Flash websites.
| | 00:42 | See you next time!
| | Collapse this transcript |
|
|
