|
Program: SWiSHmax
Introduction
The purpose of this tutorial is to help users understand
the content in the HTML page produced by SWiSHmax if the user selects
'Export as SWF & HTML'. It is aimed at the beginners/novice end of the
user base and will try and explain what all that code means and how
to edit it to better suit your needs.Here I will be trying to briefly
explain and advise on each tag in turn.
What this tutorial isn't...it isn't a sure-fire way
to get your page ranked by search engines. That is a complex subject,
and the playing field is changing so much all of the time, that only
on-going research and investigation will help you to understand 'how'
search engines rank sites/pages. Let's just say that the content in
the tags can play a small part in making your HTML page more search
engine friendly.
NOTE: This tutorial does not address the
'IE Click to Activate this Control' issue...The javascript
solution recommended by Adobe (makers of the Flash Player) is discussed
in this tutorial - http://www.swishzone.com/index.php?area=resources&tab=tutorials&do=page&action=detailed&link_id=183...and
also in the SWiSHzone forums - http://forums.swishzone.com/index.php?showtopic=35036
Why use the HTML page at
all?
There are two reasons. The first is that it allows
you to control the size of your movie. The code includes the dimensions
of the player and ensures all content is viewed as intended.
The second, and more important reason, is that SWF
movies are not search engine friendly. Search engines cannot enter your
movie and read text objects or follow links. They can read text in HTML
pages, and they can follow links in and out of HTML pages. Containing
your SWF movie in an HTML page that also includes text and links allows
your site to be indexed by search engines and read by screen readers.
How to view and access the
HTML source code:
There are 2 ways to do this -
1) You can view the HTML source code in your default
HTML editor by choosing 'Yes' in the dialogue that appears immediately
after you Export to SWF & HTML from SWiSHmax.
The disadvantage in using this method is that you
may find the file opening in Frontpage, or Microsoft Word (basically
whatever is set as your system's default HTML editor) and these applications
can 'mess' with your code when you resave. It is fine if your default
HTML editor is already set to Notepad.
2) After Export, you can browse to the HTML file
in it's saved location, R-Click on the file and select 'Open with',
and then locate and select Notepad (or a similar flat text editor).
This is the method I recommend you use to access the HTML.
What you will see:
In the attached zip file, I have included a very
basic example movie which has been exported using the 'export as SWF
& HTML' option in SWiSHmax. It is a movie containing some nonsense
text, so you can see what keywords
are extracted by SWiSHmax automatically on export, and included in the
<head></head> tags as keywords and comments.
This is what it looks like...
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title>Movie1</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="author"
content="">
<meta name="generator"
content="SWiSHmax http://www.swishzone.com">
<meta name="description" content="Movie1">
<meta name="keywords" content="add, adobe, allows,
as, auto, burnt, but, by, can, cd, compile, convert, developed,
edit, enough, example, fingers, flash, for, formats, generated,
hopefully, how, html, images, in, info, is, just, keyboard, keyword,
letting, make, meaning, media, my, no, not, number, only, other,
over, page, play, player, produced, produces, production, products,
related, standalone, studio, swf, swish, swishmax, swishzone,
tags, text, this, tutorial, use, video, video2, wander, well,
will, windows">
<!-- text used in the movie -->
<!-- add, adobe, allows, as, auto, burnt, but, by, can, cd,
compile, convert, -->
<!-- developed, edit, enough,
example, fingers, flash, for, formats, generated, -->
<!--
hopefully, how, html, images, in, info, is, just, keyboard, keyword,
letting, -->
<!-- make, meaning, media, my, no, not,
number, only, other, over, page, play, -->
<!-- player,
produced, produces, production, products, related, standalone,
studio, -->
<!-- swf, swish, swishmax, swishzone, tags,
text, this, tutorial, use, video, -->
<!-- video2, wander,
well, will, windows -->
<!-- Created by SWiSHmax - Flash
Made Easy - www.swishzone.com -->
</head>
<body
bgcolor="#000000">
<center>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
id="Movie1"
width="800" height="600"
>
<param
name="movie" value="Movie1.swf">
<param
name="bgcolor" value="#000000">
<param
name="quality" value="high">
<param
name="allowscriptaccess" value="always">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
name="Movie1"
width="800" height="600"
src="Movie1.swf"
bgcolor="#000000"
quality="high"
swliveconnect="true"
allowscriptaccess="always"
>
<noembed>
</noembed>
</embed>
</object>
</center>
</body>
</html> |
The Tags (one by one):
The very first thing on the page is -
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
This is a 'document type declaration' which tells
the browser which version of HTML is being used, what language the HTML
code is in (not what language is displayed), and the URL of the definitions
that need to be used by the browser. It is found at the very beginning
of an HTML document, even before the <HTML></HTML> element
There are detailed explanations of DOCTYPE already
in existence, so I won't go into details here, it is enough to say that
the DOCTYPE is a key component of all valid HTML documents.
Here are a couple of links for further reading, but a google search
with 'DOCTYPE explained' will find many good references.
http://www.alistapart.com/stories/doctype/
http://www.oreillynet.com/pub/a/javascript/synd/2001/08/28/doctype.html
DOCTYPE appears even before the opening <html>
tag and is needed in every valid HTML document.
<html>
This is the opening tag of a pair <html></html>
(it is good practice to close every tag, so I will presume from this
point that you realize that every tag mentioned will have a matching
closing tag), and indicates that everything in between needs to be rendered
according to HTML protocols. HTML means HyperText Markup Language.
<head>
This is where it starts getting interesting. Information
within the <head></head> tag is not displayed in your HTML
page when viewed in a browser, but is used by both the browser and the
search engines, so some changes here will help to make your page more
friendly and useable.
<title>
By default, SwiSHmax uses the name of your SWF movie
as the title for the default HTML page produced. However, the text within
your <title> tags is very important. All major Search engine crawlers
will use the text in your title tag as the text they use for the title
of your page in the search engine result listings. It is also the text
that shows in the top bar of a viewer's browser, and will be the text
seen in a user's 'favorites' list if the page is added to the browser
favorites.
Try and create your title around the top 2 or 3 phrases
that you would like the page to be found for. As an example, if you
view the source of this page, you will see that the title of this page
is 'Edit HTML tags to be Search Engine friendly'. This contains 2 possible
phrases that users looking for such a page might search for - 'edit
HTML tags' & 'search engine friendly' (you will notice I repeat
these phrases in the keywords and comments below). Someone suggested
to me one time that I should think of newspaper headlines when creating
titles, and I have found it to be good advice.
<meta>
The default HTML output from SWiSHmax uses only a
few of the available meta tags, which are also used by browsers and
search engines, but not displayed on your page in the browser. You can
find a full list of possible meta tags here - http://www.webmarketingnow.com/tips/meta-tags-uncovered.html.
I will only cover those produced by SWiSHmax in the
default HTML. You will see that most of the other <meta> tags
listed at that link are no longer recommended for use, as they are,
to a large degree, ignored by search engines.
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
As a meta tag, this causes browsers to load the appropriate
character set before displaying the page.
<meta name="author" content="">
By default, SwiSHmax does not include author information,
and this tag is optional, so you can remove it if you want to, but you
can also add the name of the author who created the page if you want
to. In my case it would become - <meta name="author"
content="David Petley">
<meta name="generator" content="SWiSHmax
http://www.swishzone.com">
Developers would typically insert the name and home
URL, or version number, of the application used to create the page,
but the tag is optional and you can remove it, as it is unnecessary.
It has no impact on browsers or search engines.
<meta name="description" content="Movie1">
This tag is particularly important if your HTML page
has little text, or is part of a frameset. Search engines supporting
this tag will use the contents of this tag as the description below
your page title in search engine results. It should
be a short and simple language description of what is on the page, and
about 20 - 25 words or less in length.
As an example, for this particular page I could use
something like this - <meta name="description"
content="HTML tags explained. A tag by tag analysis of the default
HTML exported by SWiSHmax, a SWF authoring application">
which describes the page fairly accurately in 19 words.
<meta name="keywords" content="">
This used to be a very important tag for search engines,
but has stopped being as useful since most search engines stopped using
it when deciding the ranking of a page, as it was much abused, often
loaded with irrelevant but well-searched words in an attempt to gain
a better rank in results.
It might be wise to just remove it completely, but
if you do use it, you should ensure that the keywords you use are relevant
to your site. Some search engines will rank you lower, or blacklist
you entirely, if your keywords do not relate to the HTML page contents.
You will see that the list of words extracted by
SWiSHmax is not so useful for this purpose -
"add, adobe, allows, as, auto, burnt,
but, by, can, cd, compile, convert, developed, edit, enough, example,
fingers, flash, for, formats, generated, hopefully, how, html, images,
in, info, is, just, keyboard, keyword, letting, make, meaning, media,
my, no, not, number, only, other, over, page, play, player, produced,
produces, production, products, related, standalone, studio, swf, swish,
swishmax, swishzone, tags, text, this, tutorial, use, video, video2,
wander, well, will, windows"
It is pretty much every single word of my text, made
even more nonsensical by being removed from context....not a good look.
Ensure you study the keywords after you have exported your movie with
the default HTML page. Remove all of the - and, if, but, by, in, is,
mostly, new...and all other words irrelevant to the real purpose of
your page and site.
In my example, I would modify it like this (by adding,
removing or combining words) and keep it to a reasonable number -
" tutorial, cd, compile, convert,
edit, example, flash player, formats, html, keyword, media, production,
standalone, swish studio, swf, SWF, adobe flash player, swishmax, SWiSHmax
SWiSHzone, swishzone, swish video, video2, windows media player, edit
default HTML, SWiSHmax tutorial, user submissions, open source, beginner
tutorial"
If you have other text in your HTML page, it should
reflect your keywords to some degree. The big thing to remember is that
Search Engines do not like people trying to fool them with popular and
much searched but irrelevant, keywords...and they like to see text content
in, and HTML links to and from, your HTML pages (see my closing paragraph
for more on this).
Comments - <!--
Text between this - <!--
and this --> are
not displayed or acted upon in HTML code. They are comments
added for developer clarification, and, more importantly, in this case,
for search engines that ignore the keywords meta content. For that reason,
it should be edited in the same fashion recommended for the <meta
name="keywords" content=""> tag. To
carry on my example, I would edit the commented words something like
this (once again, remove irrelevant words that do not offer meaning.)
-
<!-- text used in the movie -->
<!-- adobe, allows, compile, convert, -->
<!-- developed, edit, enough, example, flash, formats, generated,
-->
<!-- html, images, info, keyboard, keyword, media, page, play, -->
<!-- player, produced, produces, production, products, related, standalone,
studio, -->
<!-- swf, swish, swishmax, swishzone, tags, text, tutorial, video,
-->
<!-- Created by SWiSHmax - Flash Made Easy - www.swishzone.com -->
We have reached the end of the <head>
content, so the next tag we see is </head>
, the forward slash shows it is a closing
tag.
Now we move on to the <body>
tag. Content within the tags between between <body>
and </body> is displayed
in the browser. The tags here specify how it is to be displayed. Each
set of tags is 'nested' within the previous tag (the exception is the
parameter tags for the Flash Player object). Here is a schematic which
shows the hierarchy without the content.
<body>
<center>
<object>
<param>
<embed>
<noembed>
</noembed>
</embed>
</object>
</center>
</body>
<body bgcolor="#000000">
The bgcolor=" " part of
the tag is how you specify the color of the page. In your default HTML,
this information is taken from the color of your movie, but you can
enter the hex value of any color you choose.
<center>
All content between <center> and </center>
is centered on the page in the browser window. If the tag was not present,
your content would display at the top left of the browser window.
<object> & <embed>
While they are still the primary way to embed a Flash
Player in your HTML page, the usefulness of these tags has been degraded
somewhat since changes to the way Internet Explorer was allowed to present
media (the 'IE Click to Activate this control' issue). I will not go
into detail here regarding the javascript methods used to overcome this
IE issue, but point you to the tutorial and forum discussion mentioned
in my introduction - tutorial
- forum
discussion.
The <object> and <embed> tags do the
same thing for different web browsers. The <object> tag is used
by Internet Explorer on Windows (and any other browser that uses the
Flash ActiveX control), and the <embed> tag is used by Netscape
and other mozilla based browsers on both Windows and MAC OS to embed
an iteration of the Flash Player plugin.
To be sure of viewability in most browsers, both
tags need to be used, and should be nested as per our example HTML code
above. Browsers with the activeX control will not see, or ignore, the
<embed> tag contents, and Flash plugin enabled browsers will ignore
the <object> tag, reading only the <embed> tag.
<object>
<embed>
</embed>
</object>
You will notice a bunch of parameters within the
<object> tags, but outside of the <embed> tags. The same
information is then repeated in a different form inside of the <embed>
tags. Some of these are required, while others are optional.
Here is a refresher look at the OBJECT/ EMBED code
produced from SwiSHmax.
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
id="Movie1"
width="800" height="600"
>
<param
name="movie" value="Movie1.swf">
<param
name="bgcolor" value="#000000">
<param
name="quality" value="high">
<param
name="allowscriptaccess" value="always">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
name="Movie1"
width="800" height="600"
src="Movie1.swf"
bgcolor="#000000"
quality="high"
swliveconnect="true"
allowscriptaccess="always"
>
<noembed>
</noembed>
</embed>
</object> |
Required attributes / Parameters
:NOTE : OBJECT method uses parameters, EMBED method
details the attributes...same thing for different tags
CLASSID : this specifies the required
ActiveX control for browsers that use the activeX method
CODEBASE : this is the location
of the ActiveX control so the browser can download automatically if
the viewer does not already have it installed.
WIDTH : specifies the width of your
SWF movie. SWiSHmax by default uses a specific pixel size (but you can
also enter % of browser window to be used).
HEIGHT : specifies the height of
your movie.
SRC : Specifies the URL location
of the SWF file to be loaded.
NOTE:This attribute is specific to browsers using the EMBED method,
so is placed between the <embed> tags.
PLUGINSPAGE : Specifies the location
of the Flash Player plug-in.
NOTE:Again this relates only to browsers that use the EMBED method,
so it is also placed between the <embed> tags.
MOVIE : Specifies the URL location
of the movie to be loaded.
NOTE:This attribute relates only to the OBJECT method, so should be
within the <object> tags, but outside of the <embed> tags.
Optional attributes / Parameters
:
ID : Is used to identify the SWF
movie so that it can be referenced using a scripting language like javascript.
NOTE:This attribute relates only to the OBJECT method, so should be
within the <object> tags, but outside of the <embed> tags.
NAME : Is used to identify the SWF
movie so that it can be referenced using a scripting language like javascript.
NOTE:This attribute relates only to the EMBED method, so should be within
the <embed> tags.
QUALITY : Using quality="high"
favors appearance over performance and always applies anti-aliasing.
Options are - low, high, autolow, autohigh & best.
SWLIVECONNECT : This attribute specifies
whether the browser should start Java when loading this iteration of
the Flash Player. If you use javascript and SWF on the same page, this
must be specified as 'true'.
ALLOWSCRIPTACCESS : Controls the
ability of the SWF file to perform outbound scripting.
<noembed>
This tag is a method of offering an alternative for
those browsers (using the EMBED method) which do not support the object
embedded (so basically Mozilla type browsers without the Flash Plug-in
and no method of getting it. A search on the uses this <noembed>
tag can be put to will find some interesting uses. Image alternatives
(the same size as your SWF movie) can be used in this tag.
Concluding...
And that is it, we have reached the end. There is
a lot of information to digest, but, as I indicated above, you can make
the default HTML pages from SWiSHmax a bit more user and search engine
friendly by paying attention to the title, meta and comment information
in the head of the HTML document. If you want to discover more about
any particular tag, attribute or parameter, do a search (I just love
Google) to find out lots more about HTML code stuff.
|
