The problem is that after a couple days, there were still no results. It was off to the Google CSE Discussion Group to search for the answer - and I found it.

The answer I found was to edit the Profile Settings in Google Analytics for the site in question. Now, I'm going to assume that you've set Site Search to 'Do Track Site Search.' If you haven't do that. Next, you need to add a Query Parameter to the parameters that are already in place (term,search,query). The query parameter that you want to add is 'q' (see image). Now hit 'Save Changes.'

That's it. Now, just wait for the results to be displayed in Google Analytics.

With the launch of the iPhone, mobile web browsing is going to be taken to a whole new level and you, as a web developer need to be sure that sites you develop render properly when viewed not only on the desktop but also on handheld devices like the iPhone (and other mobile phones). 

About iPhoney [from the Marketcircle website]:

iPhoney is a 1.4MB download 

In some brief testing, everything seems to work pretty well (hard to tell how accurate the iPhoney is without an actual iPhone to compare it to) but I did notice that a few of the Web Apps for iPhone (a pretty good list of web apps here at iLounge) did look a bit wonky.

All of the links are clickable and as you would expect you can view the page in horizontal or vertical mode to truly simulate viewing your site as an iPhone user might. You can turn on / off Zoom To Fit which simulates viewing the site by tapping or pinching.

With all of the hype surrounding the iPhone, I'm sure this open-source project will gain momentum in the coming weeks. 

iPhoney simulating gBradhopkins.com vertical mode with Zoom to Fit turned off.

iPhoney simulating gBradhopkins.com in horizontal mode with Zoom to Fit turned off.

A web search for resources about adding this code will turn up a lot of results. The easiest that I've found is at Webmaster-Affiliates.net. They have created a free resource that allows you to input a few bits of information and generate the code with one click. Webmaster-Affiliates.net Set as Homepage Link.

If you would prefer to create a button that allows a user to add your link to their favorites (bookmarks), Webmaster-Affiliates.net also has you covered there (Webmaster-Affiliates.net Create a Bookmark Link).

Tools like this make it easier for your visitors to return to your website. One caveat is that these tools do not function in all browsers so you may want to test them before deploying them to see how they will work.

A quick glance at my AWR Keyword Report (AWR - Advanced Web Ranking - discussed in a previous SEO Wednesday) shows that the keywords that I would like to be ranked for are; ask how to, ask me, computer how to, computer tutorials, mac tutorials, pc tutorials, quicktime tips, and web design tips. The report also indicates that the only keywords that I actually rank in the top 20 for are gbradhopkins and mac tutorials. Currently gbradhopkins.com ranks around #17 in the major search engines for mac tutorials while none of the other keywords are in the top twenty.

Instead of using a paid keyword service as recommended by highrankings.com, I'm going to look at two tools to find out which keywords people are using.

The first tool is the Overture Keyword Selector Tool. The intended purpose of this Overture tool is to allow you to search for selected keywords, and find related keywords and their popularity to guide you when bidding on keywords when advertising with Overture.
It also works as a nifty tool to research keyword popularity.

Keyword Search: PC Tutorials 391 total searches done at Overture in October 2005 for the keyword PC Tutorials and related keywords like pc anywhere tutorial, pc repair tutorial, etc. An alternative search for computer tutorial reveals that there we over 3000 searches for the top three related keywords; computer tutorial (2030), computer security help and tutorial (679), and free computer tutorial (494). This indicates that computer tutorials would be a better keyword to optimize for, as opposed to PC Tutorials.

The other tool we are going to look at is the Google AdWords Keyword Tool that you can use after signing up for an account with Google AdWords. The great thing about this tool is that you can put in a URL and analyze the page for keywords related to the content of the page. Below is a sample search that I did for gbradhopkins.com.

By selecting Keyword Popularity from the Show Columns drop down menu, you can see the search volume for each keyword. If you plan on advertising the site in AdWords, the tool also shows the Advertiser Competition for each keyword.

Once you have decided on the relevant keywords for your website, you need to begin creating content based on the keywords that you have selected. The more content you can create for each keyword, the more relevant your site becomes in the eyes of search engines.

Next week we are going to look at designing and categorizing your site architecture and navigation based
on your keyword research.

In this short entry I'll give you a look at some of the screenshots from my gBradhopkins.com sitemap account.

From the Google Sitemaps Help File: "Google Sitemaps is an easy way for you to help improve your coverage in the Google index. It's a collaborative crawling system that enables you to communicate directly with Google to keep us informed of all your web pages, and when you make changes to these pages.

Better crawl coverage to help people find more of your web pages.
Fresher search results.
A smarter crawl because you can provide specific information about all your web pages, such as when a page was last modified or how frequently a page change."

Here are some screenshots from my Google Sitemaps account.

This is a view of the Google Sitemaps Overview screen. This gives you a look at all of the sitemaps that you've added, whether they have been verified or not and whether or not they have errors.

Google Sitemaps Query Stats page, shows some of the keywords and phrases that people use to find your site in Google.com.

Google Sitemaps Crawl Stats page, provides distribution information for pages that have been crawled.

Google Sitemaps Page Analysis Stats, provides information on how the Googlebot sees your site.

Google Sitemap Index Stats shows you how your site is indexed in the Google search engine (sites similar to yours, sites that link to yours, the current cache of your page in the index, etc.).

Google Sitemaps Errors shows which pages they tried to crawl (found either through links from your Sitemaps or from other pages) but couldn't access and gives a description of the error and possibly how to fix it.

While the Sitemaps project purports to have no bearing on your search engine placement (or rank), it sure can't hurt.

Want to add a sitemap of your site to the Google Sitemaps project? Check out this sponsor: Firebrand Media Google Sitemap Submission

Related gBradhopkins.com Articles:
Monitor your Google Page Rank
Ways to Build Website Traffic [SEO Wednesday]

This week, even though it is two days late, we'll look at tip number two, "Optimize your site for your target audience, not for the search engines."

I found that while www.gbradhopkins.com is not ranked for any of my keywords, gbradhopkins.com ranks in the top 20 on five search engines for the keyphrase "mac tutorials." View full gbradhopkins.com AWR report.

Highrankings.com Tip #2: Optimize your site for your target audience, not for the search
engines.

Basically, you need to figure out who your target audience is and what are they looking for. One way to do this is to search for websites that are in your same space (area, field or business). What are they talking about. Monitor these sites for an extended period of time (only as long as you want to remain competitive - forever). By monitoring the other sites in your space, you can get ideas on what makes a good site (as far as rankings are concerned) and how you can create / modify your site to meet the needs of your potential visitors. (Note - I'm looking at this from the perspective of an informational site. Your needs may differ if you are creating a business site). In a nutshell, make sure your site give users what they are looking for and eventually you will be ranked (provided you continue following the tips and advice that is being provided here and in other areas) and start generating that traffic that you crave.

Also, make sure that your information is easily accessible. I prefer clean sites that focus on the content (or purpose of the site). What does your target market prefer? You need to know, so that you can develop a site that appeals to them (not just you).

It's also important to have some idea of how people are getting to your site, rather, what they are looking for that is getting them to your site. This only works if you are currently generating some traffic from search engines or other referrers. A referrer is simply the site that led someone to your site. One way to figure out how visitors are getting to your site is to use a counter like SiteMeter. It provides the referrer and a wealth of other information about how people are getting to your site. Read this tutorial on how to add SiteMeter to your website.

In recap, learn your audience and develop your site around their needs and desires. That's the first (or second) step to a healthy website.

Still no takers on my Special Offer from last week. This is valuable search engine information that I am providing free!

Special Offer: If you would like me to check your rank with AWR, use the AskMe Form or the comments box below to provide your URL and keywords that you would like checked and I'll check the major search engines for you and will provide a report to you (if you provide email address).

Have a comment or question? Post it below! Want a free search engine rank report?

This can help you monitor the importance of your website (as far as Google is concerned) and let others know what your site rank is.

(View other gbradhopkins.com web design tutorials)

I'm using a program called Advanced Web Ranking by Caphyon Software to check the position of my website for various keywords. Using this program I can judge not only where my site ranks, but also how competitive the space, that I'm attempting to optimize my site for, is.

For example, by using AWR, I can tell that there are roughly 8 million results for the keywords "windows tutorials" and 429,000 results for "quicktime tutorials." This gives me a ballpark idea of how much competition there is.

The keywords that I picked for my site are the keywords that I think are related to the site. They are web design tips, mac tips, mac tutorials, pc tips, ask me, computer how to, mac, quicktime tutorials, windows tutorials, web design tutorials and gbradhopkins. Like I said, those are the keywords that I think are related to the site. In future SEO Wednesday articles we will look at some Keyword Density Analyzers to see if the keywords that I think are related to the site is reflected in the content of the site.

Here is a link to the Keyword Overview Report generated by AWR. View Report. A quick look at the report reveals that I have really no rankings at all for any of my keywords beyond "mac tutorials" in DMOZ and "gbradhopkins" in all of the search engines. The good news is that the site is at least listed in each of the engines. Its a start.

If your site is not listed in any of the search engines then I would suggest that you submit the site to Google, and suggest it to the DMOZ directory. That's where you would start.

Now, on to the HighRankings.com list.

1. Do not purchase a new domain unless you have to. My site has been running at gbradhopkins.com for some time so this does not necessarily apply to my situation. But, I did run the website on my .Mac server and a copy of the site remains there at this time. If you are starting fresh, then you have no choice but be patient. When it comes to SEO you have to be patient. The HighRankings.com list indicates that the wait is 9 - 12 months before your website shows up for the keywords that you want.

At this point I'm going to stop for this post. Next week we'll continue with our list and see if we've made any progress on our Search Engine Rankings.

I've decided to upload my AWR report to the server after each update for all to view. gBradhopkins.com Advanced Web Ranking Report

Special Offer: If you would like me to check your rank with AWR, use the AskMe Form or the comments box below to provide your URL and keywords that you would like checked and I'll check the major search engines for you and will provide a report to you (if you provide email address).

In this column, which I hope will run every Wednesday, I will use tips, tools and techniques that I find on the web to optimize this website and increase traffic. In addition to optimizing this site, we will also dispell myths, highlight tools, websites and resources for those looking to optimize their website for the major search engines.

"Short for search engine optimization, the process of increasing the amount of visitors to a Web site by ranking high in the search results of a search engine. The higher a Web site ranks in the results of a search, the greater the chance that that site will be visited by a user. It is common practice for Internet users to not click through pages and pages of search results, so where a site ranks in a search is essential for directing more traffic toward the site.

SEO helps to ensure that a site is accessible to a search engine and improves the chances that the site will be found by the search engine." (source Webopedia.com)

To judge whether or not we are making any progress, we have to know where we are currently. All of the following stats apply to the traffic received by gbradhopkins.com during the year 2005.

Traffic Stats
53% of traffic comes from Google.com
2.49% comes from Yahoo!
1.25% comes from MSN Search

11% of visitors used the Search Phrase "Quicktime Pro 7"
3.6% used the Search Phrase "rotate movies"
3.6% used the Search Phrase "connecting two macs via firewire"

37.3% of visitors are using Safari or Netscape 6 or 7
35.69% of users are using Internet Explorer 6
47% of visitors are using the MacOS
42% of visitors are using WinXP

That's a smattering of the stats, that I feel will help us decide whether or not our SEO effors are successful. A tool that I will be using is to track my progress throughtout is Advanced Web Ranking 4.1 by Caphyon Software. This software, which you can demo for free for 30 days allows you to track your search engine ranking over time for various keywords.

The methods that will guide my actions will come from various resources. I am going to start with the ten suggestions in the article Ten tips to the Top of the Search Engines found on the HighRankings.com forum.

Next week, we'll start tackling that list on the HighRankings.com forum. In the mean time, why not try this with your website? We can compare notes and hopefully increase traffic to all of our sites. Until next week, feel free to comment below.

Want to be notified when this site is updated? Submit your email address via the AskMe form and I will sign you up. You will then be notified when a new article is added to the site. And, your email will never be used for the purposes of SPAM.

Internet Explorer has a tendency to wreck a lot of layouts, especially if you rely on CSS (cascading style sheets) for much of your styling and to compound the problem, ~95% of web users are using IE for Win.

One thing to consider is your audience. If you have a site with an audience that uses a particular browser, then maybe you can ignore the others, but its always good form to take preview your site in various browsers to make sure the navigation, style and site structure remain intact. This not only applies to various browsers but also various versions of browsers. Not everyone will have the newest, most up to date browser that you, as a web designer or creative professional, are using.

Why Test?: Samples

Here are some sample screen captures, from various browsers, of a list that I created with a custom bullet for the Firebrand Media home page.

Safari (Original)

Firefox (Mac)

Opera (Mac)

Internet Explorer (Windows)

As you can see, they get progressively worse. This came as a bit of a surprise to me, as I had released the new list into the wild without actually previewing it in the other browsers. The fix, shown below, which was rather simple, took about a half an hour, and works well in all of the browsers, except Opera.

Safari (Fix)

Firefox (Mac)

Opera (Mac)

Internet Explorer (Windows)

Have a routine that you use when creating sites or a particular tool that you like to use to preview sites or verify the integrity of your design among the various browsers? Post your comment below!

What's the problem? How can Safari, Apple's own browser, not support MPEG-4? You start looking for answers online and find a petition about how Safari doesn't support MPEG-4 and plenty of other people with the same problem.

Unfortunately, this problem is related to your web server and not Safari itself. The web server doesn't recognize the content type of the .mp4 file thus giving generic text. To fix the problem, you must open, or create, a .htaccess file in the root directory of the server and add the following lines:

AddType audio/mpeg mp3
AddType audio/mp4 mp4

Once that is done, the files will open as they should. If you don't have root access to your web server, you may have to contact your web host.

More about MPEG-4: MPEG-4 is the global multimedia standard, delivering professional-quality audio and video streams over a wide range of bandwidths, from cell phone to broadband and beyond.
MPEG-4 was defined by the Moving Picture Experts Group (MPEG), the working group within the International Organization for Standardization (ISO) that specified the widely adopted, Emmy Award-winning standards known as MPEG-1 and MPEG-2. Hundreds of researchers around the world contributed to MPEG-4, which was finalized in 1998 and became an international standard in 2000 and included in QuickTime in 2002.

For those of you who use Flash and Dreamweaver, both applications from Macromedia, you have nothing to worry about now that Adobe has made a bid to buy Macromedia.

The Layers Magazine website has a plethora of information for the Graphic Design professional. You'll find how-to's, video demonstrations, training DVDs and articles about your favorite apps (Photoshop, Illustrator, GoLive, InDesign, Acrobat, Flash and Dreamweaver).

For more information about what is ahead for Layers Magazine, check out this Q/A with Layers Magazine editor Scott Kelby.

It's fun to look back every once in a while to see how a website has developed, grown or changed over the course of time. Unfortunately with every new version of a website, the old version gets lost in the ether.

If you have a website then I would highly recommend that you periodically (or before a major revision) take the time to make a backup of the entire site. After all, you've poured your heart and soul into it creating something. Don't lose it in all of the excitement surrounding the development of what will surely (in your mind) become the next big thing.

Click here to visit the ESPN.com 10th Anniversary Page.

To use this tool, head over to AltaVista and select the search box that you prefer (those are your two choices above), and click on the I want this one! button for whichever you choose. A window will open with the code to be placed on your page. Next, go back to your web page, and paste it where you would like it in the source code. Now that the code is placed on the page, upload the page and you are done!

The two available search translation tools perform different functions. The translation tool on the left, allows a user to translate the current page simply by clicking on a flag, while the translation tool on the right allows a user to translate typed or pasted text or URL's. Below, you will find a screenshot of what the text on this page would look like translated from English to Spanish.

English to Spanish Translation

I would suggest that if you plan on using this tool for all of your pages that you put it in the template that you are using to create pages for your site, that way you don't have to keep copying and pasting the code every time you want to use it. It will automatically be there.

When you obfuscate your email address on a web page you make it hard for a spider to harvest it. Spider? Harvest? Spiders are programs that work their way around the internet harvesting (collecting) information. Some spiders, like search engine spiders, are good. Others, like email spiders (also called spambots) are bad.

Email spiders scour the internet looking for one thing; Email Addresses. When they find one, they add it to their list. That list eventually becomes part of some CD-ROM that is sold to Spammers. The Spammer then uses that CD-ROM to flood your in box with junk email.

The question is "How can we protect our email address while maintaining the ability to interact with our visitors?"

The Answer: Obfuscate your email address. In this tutorial I'll give you various resources for combatting SPAM.

To Javascript or not to Javascript, that is the question.

There are basically two different ways of obfuscating your email address. One is to insert some Javascript code in place of your email, the other is to use plain text that converts your email address into a series of numeric encodings.

Javascript: Javascript is the more secure of the two methods because spiders are unable to process the script that contains your email address. The only downside to Javascript is that old (primitive) browsers or those with Javascript turned off will not have access to your email address. From what I've seen and heard somewhere between 10 and 20% of users will not have Javascript capable browsers (or they will have it turned off).

Javascript Email Obfuscation Sites [Both of these site will help you generate the Javascript that you will then paste into the HTML of your page.]:

• SPAM Proofing Your Web Site : evolt.org
  
• Heal Your Church Web Site Anti-spam Email Obfuscator
  

Sample Javascript Code created with the Heal Your Church Web Site Obfuscator:

Result of the code:

Plain Text: An easier way to obscure your email address is to use plain text. There are a couple of different methods you can use.

One way, which you may have seen while browsing, is to type your email address in a way that users have to type it into the address field before sending you a message. It usually will look something like this:

Keep in mind that this decreases usability a bit because users can no longer just click a link that takes them right to their email program.

Another way is to use a program like that found on the Stop SPAM : Spambot Prevention web site. Using that web site generates the following code which can then be pasted into the HTML of your site.

Result of the code:

Finally, you could use the Email Obfuscator at the Alicorna.com web site. This is also a plain text generator but unlike the Stop SPAM site, Alicorna's code also adds the mailto link so the email address is a clickable link.

Sample Code (Alicorna.com)

Result of the code:

All of these methods will work to some degree. You have to judge which will work best for you. With SPAM as prevalent as it is, you have to be diligent when it comes to guarding that email address.

• Happy spamiversary : CNET News.com
  
• SPAM Proofing Your Web Site : evolt.org
  
• Stop SPAM : Spambot Prevention : safeemail.org
  
• Heal Your Church Web Site Anti-spam Email Obfuscator
  
• Email Obfuscator : Alicorna.com
  

Like all online services you will have to sign up for an account. This process involves you providing minimal information and is very quick.

You will then have to set up an account for the site you wish to make searchable. This can be done at the 'Accounts' page. You will need to have the URL that your site resides at [http://homepage.mac.com/bradhopkins is my URL], a title for the site, a category to describe the site and your time zone. This completes the account set up.

Another nice feature provided by Atomz.com is that you can set up searches for multiple sites and manage all of them from a single page.

Your next step is to select 'HTML' from the list of choices. Here you have two options [1] standard search : the user puts in keywords to search for, and [2] advanced: the user provides information like keywords, date modified, where the file should reside, etc. Either way the process is the same [but the code will be different].

Once you decide which search you like better [I like standard for its simplicity] then you simply copy the code straight from the page.

This code will then be pasted directly into your web page. Some HTML editors have trouble pasting HTML code from other applications. If the HTML code appears on your web page as text, then copy-and-paste from this page to a simple text editor, then copy-and-paste again from the simple text editor to your HTML editor. (You can use "notepad" on Windows or "Simple Text" on a Macintosh as a simple text editor.)

If the text box is too wide for your design, just reduce its width by changing the size parameter of the "sp-q" input tag in the HTML code for your search form.

Once you have pasted the code into your site you then have to tell atomz.com to index your site. You can set it up to only index on your command, or you can have it index on a schedule. I chose on command and will probably go back later and set up a schedule for indexing.

Simply select 'Full Index' and it will tell you when your site was last craweled [indexed] and how many pages were indexed. You will see a button down the page that says 'index now' and you click that and it begins indexing [as indicated by the countdown from 20 to 0].

Upon completion of the indexing it will say 'click here now'. At that point you are done and your site is now searchable. If you get a result of 0 pages then you may want to check to be sure that you typed your URL correctly.

The first step is setting up an account. This is a very painless process and takes less than five minutes. (There are three pages of information that they require. A total of about 10 Questions you have to answer.)

Now that you have completed the sign up process, you are ready to paste the code into your page. This is another area where SiteMeter really shines. They provide you with instructions for a number of different web publishing applications (here are the applications; FrontPage and FrontPage Express, FrontPage 2000/2002, Dreamweaver, Publisher 2000, Claris Home Page, Adobe PageMill, Netscape Gold or Netscape Composer, NetObjects, Trellix, Adobe GoLive, ixla Web Easy, Using NotePad or another HTML editor).

Select your application (I chose Adobe GoLive) and you are given step-by-step instructions on how to paste the code into your web page. Here are the instructions for GoLive:

That's all there is to adding the counter to your web page. Note: For the most accurate statistics, Site Meter recommends that you paste that code into everypage of your site.

SiteMeter offers a number of different counter styles (examples to the left) and then allows you to customize those further. You can also specify the number that you would like to start your counter at, have the counter ignore visits from your current IP address (to get more accurate results by not counting yourself), specify how often you would like to get counter reports in your email, and set the level of privacy of your site statistics.

Another great thing, besides the ease of use and the ability to customize the counter, is the statistics. When you log-in to your statistics you get an overview of recent activity. To the left of the site summary you have a real gold mine when it comes to statistics. Here are some of the stat's available: summary, who's on (visitors in the last 20 minutes), traffic prediction, recent visitors by details, referrals, search words, by entry pages, exit pages, day, week, month, year and on and on.

If you are at all interested in what people are looking at on your site, then I would highly recommend you add a SiteMeter counter to your web site.

Adding favicon to your site is a fairly simple, two step process.

Create the file : First, you must create the favicon file. This file has to be a .ico (windows icon) file with dimensions of 16 x 16 pixels. I used Graphic Converter (Mac) to create my .ico file but there are many programs available that will do the job (search for .ico at download.com).

Implementing : Option 1) If you have root access then you can simply put the .ico file in the root level of your web site. This is the easiest way and will ensure that every page in your site will have the icon. When using this method, the file must be named favicon.ico.

Option 2) If you do not have root access, then you can add a small snippet of code to each page that you would like the icon to be displayed on.

Add this code between the <HEAD> and </HEAD> tags of your page, replacing /~your_directory/logo.ico, with the location and name of your .ico file. Using this method, you can name the file anything you like and can use different files for different sections of your site.

]]> http://www.gbradhopkins.com/archives/2004/11/display_your_site_logo_in_the.html http://www.gbradhopkins.com/archives/2004/11/display_your_site_logo_in_the.html Web Design Tutorials Mon, 08 Nov 2004 13:59:21 -0500 Anyone with a web page knows that no matter how good your web site is, it's no good unless someone sees it. So, to keep readers informed of updates, most sites employ things like mailing lists to keep readers up to date.
In this tutorial I'm going to show you the simple to way to create your own RSS News Feed.

]]> First, what is an RSS news feed? RSS news feeds are used by web sites to share headlines and stories. These feeds can be used by other web sites or by special RSS aggregators. In this example I will show you how to create an RSS news feed.

Create Your Own in XML : There are multiple RSS Feed formats (0.91, 1.0 and 2.0) but in this tutorials we will use the simple 0.91 format. Below you will find a link to the code used to create a sample RSS Feed. Feel free to copy and paste the following code into your own text editor.

Sample RSS Code

<?xml version="1.0" ?> <!DOCTYPE rss PUBLIC "-//Netscape Communications//DTD RSS 0.91//EN" "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>gBradhopkins.com </title> <link>http://www.gbradhopkins.com/ </link> <description> Educating computer users one click at a time. Tutorials for Mac, PC and Web designers. </description> <language>en-us </language> <item> <title> NetNewsWire and RSS Readers :: Review / Tutorial </title> <link> http://homepage.mac.com/bradhopkins/tutorials/mac/netnewswire/netnewswire.html </link> <description> In this product review/tutorial for NetNewsWire I show you how you can browse and find updated content on thousands of web sites without the hassle of intrusive advertising or opening a web browser. 5/23/03</description> </item> <item> <title> Quickly and Easily Import Cover Art into iTunes 4 </title> <link> http://gbradhopkins.com/tutorials/mac/iTunes4/album-art/album-art.html </link> <description> iTunes 4 allows you to import album artwork to go along with your music. In this tutorial I will show you how to use a freeware program called Clutter to make finding and importing Album Artwork as easy as 1, 2...Done. 5/17/03 </description> </item> <item> <title> Re-live the days of your youth with Emulation Software </title> <link> http://gbradhopkins.com/tutorials/mac/emulator/emulated-games.html </link> <description> Use your Mac and some free software to play old school games like Frogger, Q-Bert, Pac-Man, Super Mario and more. In this tutorial I show you where to get software that emulates Atari, Nintendo, SuperNintendo and other game systems. 5/16/03 </description> </item> </channel> </rss>

Looking at the code in the example, you're probably thinking to yourself that it looks a lot like HTML. And you are right. When creating your RSS Feed, there are only a few things that you need to change to make it work. I have highlighted in orange the items that you will need to change to make your own feed.

Title, Link, Description : To make the feed work you really only need to change the Title, Link and Description sections of the code. So, let's whip out our handy Text Editor and get started.

The first Title, Link and Description refers to your site. In my feed I have gbradhopkins.com for the title, the actual link to the site and a description of the site itself. This is the information that will be displayed in the news aggregator.

The next section that is changed refers to the individual headline or news story that you are announcing with your feed. So, when you change the Title, Link and Description, each should refer to the individual article. You can then repeat the process for each of the headlines that you would like to add. Make sure that you leave the tags alone and only change the text in the Title, Link and Description sections. Any changed code will cause problems with your feed. When saving your feed, save it as my-feed-name.rss. [ex- My feed is saved as g_brad_hopkins.rss]

Advertise Your Feed : Now that you have created a feed, you need to advertise it. One way, is to add a link on your page that says RSS FEED, or use the graphic. This graphic is a standard indicator of an RSS Feed. The graphic or text should link to your .rss file. [mine links to g_brad_hopkins.rss]. To see what an RSS feed looks like when clicked on, click on either the graphic or text link above.

Another way to advertise your feed is to use a web site like Syndic8.com. Syndic8.com allows people to enter or suggest feeds that they will include in their database.You can also use Syndic8.com to find other RSS Feeds.

Validate the Feed : To make sure that your feed is sea-worthy, use an online RSS Validator like the one at Userland Software. Simply input the link to your rss file and it will check to see that everything is valid in your code.

View the Feed : To view the feed you will need an RSS aggregator. I am using NetNewsWire Lite for MacOS X. For those using Windows, try out AmphetaDesk. In the image below you can see my feed in the aggregator window.

]]> http://www.gbradhopkins.com/archives/2004/11/create_an_rss_feed_for_your_we.html http://www.gbradhopkins.com/archives/2004/11/create_an_rss_feed_for_your_we.html Web Design Tutorials Sun, 07 Nov 2004 14:04:58 -0500 Want to add some traffic to your web site? Try a Message Board (aka Forum). With a Message Board, visitors can discuss topics of interest. I have recently added a Message Board to my site, in hopes of helping people receive answers to their computer questions. In this tutorial, I'm going to show you how to add and customize a FREE Message Board.

]]> The message board that I am going to use is provided by Bravenet.com. Bravenet offers a number of free web services for building site traffic. Another free service of theirs that I have used is their free email form. I chose Bravenet for two reasons 1)It's Free and 2)Everything can be completely customized. You can integrate their services into your site by matching the look and feel of each tool.

Bravenet.com Sign Up : When you go to the Bravenet.com web site, you have to sign up for an account. They ask you a minimal number of questions (Username, Password, Date of Birth, Zip Code, State, URL, Name of Site). Once you are signed in to their service, you then choose which resource you would like to add to your web site. Resources include mini-polls, java chat, Forums (Message Boards), password protection, hit counters, news headline, site search and much more. To add a Message Board click on Register for the Forums (message boards) link (example above right). This will load a new page that says "New Service Registration Complete" and gives you the code to copy and paste into your page.

Customize Your Forum : Once you have pasted the code into your page, you will want to customize the look and feel of the Message Board to match your web site. This is done using the forum manager (found on the same page as the New Service Registration Complete". I'll now give you a brief overview of each of the settings that can be changed.

General Settings : You can change the following parts of the forum to make it "your own". Name of the Forum, add a description of what the forum is about, and add the URL of your web page. You can also turn on/off the following options for your forum:

• Email Notification : be notified when a new post is added.
  
• Allow HTML : allows users to add html to their posts.
  
• Refuse Messages with swear words
  
• Show users IP address in forum
  
• Disable Smilies
  
• List site in forum index : help others to find your forum..
  
• You can also add keywords, to help people find your forum
  
• Password Protection : Only want to allow certain people to access the forum? Here's how.
  

Look & Feel : This is where you will change the colors used in the forum. Options include, Font Face (Arial, Helvetica), Font size and Color used in the Title, and can also be set for the Forum itself.

Images : Here you can set the Title Image, Background Image and the Emoticon Set (see below) that you would like to use in your forum. To use title or background images you will need the URL to the image itself (http://homepage.mac.com/bradhopkins/main-images/background.gif).

Other Options : The final four choices in the forum manager are more for maintenance purposes.

• Delete Messages : Allows you to view and delete old or unwanted messages in the forum.
  
• Copy/Paste Code : The code to add the forum to your web page.
  
• Forum How-to : Tips on how to use the forum.
  
• View Forum : Takes you to your forum to see the changes you have made.
  

Final Thoughts : I decided not to use all of the features available (didn't add a Title Image) but I really like the ease of use of the forum and the way it integrates with my web site. If there was one negative, it would have to be that when you go to the forum a pop-up ad comes up. This can be removed by using their pay service.

]]> http://www.gbradhopkins.com/archives/2004/11/add_a_message_board_to_your_we.html http://www.gbradhopkins.com/archives/2004/11/add_a_message_board_to_your_we.html Web Design Tutorials Sat, 06 Nov 2004 16:10:18 -0500 This is tutorial three (of what now looks like four) showing you how to install and customize a multi-user calendar on your web server/site. In this tutorial I will show you how to edit the CSS files to match the site calendar to your web site more exactly. For installation tips see tutorial 1 (installing) and 2 (adding to your web page).

]]> As I recommended in part two of this tutorial, duplicate the .CSS files that you will be editing. For those unfamiliar with CSS, it is basically used to control the look (background, text, borders, links, roll overs, etc.) of the elements of your web page. It is especially useful because all of the styles for an entire web site can be contained within one or two files.

I would recommend using a CSS editor. I'm using Adobe GoLive CS, which has a built in CSS editor. The benefit of a program like this is that you can visually see how the changes you are making will look. Macromedia Dreamweaver, and most other commercial web page design programs have a CSS editor included. If you are hand coding, you can download a CSS editor. A quick google search will provide a number of results.

The CSS file that we will edit is default.css (see code below).

<STYLE TYPE="text/css">

<!--

/**************************************************************

********* Formatting For Month Table and Text *****************

**************************************************************/

A { font-family:arial, helvetica; color:#00F; text-decoration:underline }

SPAN { font-family:arial, helvetica }

TD { font-family:arial, helvetica }

BODY { background-color:#FFF }

/**** month and year header at top of calendar ****/

.date_header { font-size:16px; font-family:arial, helvetica; font-weight:bold }

/**** color and size of calendar cells. ****/

.day_cell { background-color:#EDECD8; height:80; width: 95; }

.empty_day_cell { background-color:#EEEEEE; height:80; width: 95; }

.today_cell { background-color:#F5F4ED; height:80; width: 95; }

/**** day number in upper left corner of each cell ****/

.day_number { font-size:10px; font-family:verdana, arial, helvetica; color:#000 }

/**** title_txt is the text for each post on main page ****/

.title_txt { font-size:10px; font-family:verdana, arial, helvetica; color:#000 }

.title_txt A:link { color:#00F; text-decoration:underline }

.title_txt A:active { color:#00F; text-decoration:underline }

.title_txt A:visited { color:#00F; text-decoration:underline }

.title_txt A:hover { color:#00F; text-decoration:underline }

/**** time line under title text when event time given ****/

.time_str { font-size:9px; font-family:arial, helvetica }

/**** column headers or days of the week ****/

.column_header { background-color:#2663E2; font-size:12px; font-family:arial, helvetica; color:#FFFFFF; font-weight:bold }

/**** footprint text ****/

.footprint { font-size:10px; font-family:verdana, arial, helvetica; color:#000; font-weight:bold; }

.footprint A { font-size:10px; font-family:verdana, arial, helvetica; color:#00F; font-weight:bold; }

// end hiding -->

</STYLE>

As you can see in the code above, the different parts of the code indicate what will be effected by the changes that we make. (note - Any of the items in the code above can be changed to suit your needs or purposes.) We are going to focus specifically on the cells for the days of the week (see code below).

/**** color and size of calendar cells. ****/

.day_cell { background-color:#EDECD8; height:80; width: 95; }

.empty_day_cell { background-color:#EEEEEE; height:80; width: 95; }

.today_cell { background-color:#F5F4ED; height:80; width: 95; }

As you can see, we can change the background color, and the height and width of each of the different cells here.

• .day_cell (these are the cells for the days of the month.)
• .empty_day_cell (these are the cells that fill out the beginning and end of the month but are empty [no date].)
• .today_cell (this is, well, todays cell.)

I want to make the cells match the color scheme of the site I am using it for (Berkeley Baptist Church Calendar) so I will leave the cell sizes as they are and focus on the background colors.

If you are coding by hand and need the web color palette, you may want to visit the Visibone site for their 216-Color Webmaster's Palette. You can use it to find the colors you want, and simply type its value into the CSS code, in place of the bold text.

.day_cell { background-color:#EDECD8; height:80; width: 95; }

Here is the code for the colors that I chose:

/**** color and size of calendar cells. ****/

.day_cell { background-color: #fffaf0; width: 95; height: 80 }

.empty_day_cell { background-color: #f5f5f5; width: 95; height: 80 }

.today_cell { background-color: #b0c4de; width: 95; height: 80 }

Next, you'll probably want to change the column header. This includes the blue header and the text for the days of the week. We can change the background color, font size, font family and font color.

.column_header { color: #ffffff; font-size: 12px; font-family: arial, helvetica; font-weight: bold; background-color: #7cb3d2 }

Some other items you may want to change are as follows:

• date_header - bold black text that indicates which month you are currently viewing.
• day_number - the small number in the upper left of each day cell.
• title_txt - the text that is displayed when a user adds an item to the calendar. You will probably want to edit the .title_txt A:link, .title_txt A:active, .title_txt A:visited, and .title_txt A:hover code as well.

As you can see from the before and after images (below) there are a number of changes that can be made by simply modifying a few lines of code in the default.css file.

In the next part of this tutorial, we'll modify the pop up windows that users see when logging in and viewing event information.

Extra Resources:

• Visibone 216-Color Webmaster's Palette
• phpEventCalendar

]]> http://www.gbradhopkins.com/archives/2004/10/installing_a_multiuser_calenda_1.html http://www.gbradhopkins.com/archives/2004/10/installing_a_multiuser_calenda_1.html Web Design Tutorials Wed, 20 Oct 2004 06:51:49 -0500 In part one of this tutorial, I showed you how to install phpEventCalendar on you web server. In part two, I will show you how to customize the calendar to match the look of your web site.

]]> This is part two of a three part lesson on installing a multi-user calendar on your web server. Part one provides complete installation instructions.

To begin, I duplicate all of the important files that I will be editing (in case I screw up somewhere). You will want to duplicate the following files (with their location in parenthesis);

• default.php (phpEventCalendar/templates/)
• adminpgs.css (phpEventCalendar/css)
• default.css (phpEventCalendar/css)
• popwin.css (phpEventCalendar/css)
• config.php (phpEventCalendar/)

I usually name then by adding -orig to the file name (default-orig.php, adminpgs-orig.css, etc.)

Now that you have duplicated all of the files that we will be working with, (1) open the page that you want to add the calendar to. I have a template that I have created that I use whenever I am going to be creating a new page. This template has the primary layout of the site that I am working on, with the area for the new information in a table (see image below).

Now, open the default.php file (phpEventCalendar/templates/). Depending on the program you are using to edit your pages, I'm using Adobe GoLive CS, what you will see may vary. You may see HTML code or the page may open in layout view (as mine did). Either way, we need to view the HTML.

We are looking for the phpEventCalendar code. It should start around line 12 and end around line 40 (see image below).

This code is going to be copied and pasted into your page, the template that I referred to earlier. (2) Highlight and copy all of the phpEventCalendar code (see code below).

<table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td> <?= $scrollarrows ?><span class="date_header">&nbsp;<?= $lang['months'][$m-1] ?>&nbsp;<?= $y ?></span> </td> <!-- form tags must be outside of <td> tags --> <form name="monthYear"> <td align="right"> <? monthPullDown($m, $lang['months']); yearPullDown($y); ?> <input type="button" value="GO" onClick="submitMonthYear()"> </td> </form> </tr> <tr> <td colspan="2" bgcolor="#000000"> <? echo writeCalendar($m, $y); ?> </td> </tr> <tr> <td colspan="2" align="center"> <?= footprint($auth, $m, $y) ?> </td> </tr> </table>

I would start at <table cellpadding="0" and highlight all the way down to the final </table> (see code above). This will give you all of the code for the calendar.

Next, go over to your template that matches your site and find the location where you want the calendar and paste it. This needs to be done while in HTML or code view.

For those that are new to working with HTML code, I would suggest going back to your WYSIWYG web page editor, and in layout view, find the spot on the page where you want the calendar and typing the word HERE (see image below).

Once you do this, you can then move back to the HTML code view and find the word HERE in the code and that is where you will paste the phpEventCalendar code. You can use this anytime that you are adding code to a page and you don't know where to paste it.

Now that we've pasted the code on the page, the heavy lifting is done. There are just a couple more lines of code that need added.

Find the <head> section of the default.php page. you will see the following code.

<? javaScript() ?> <link rel="stylesheet" type="text/css" href="css/default.css">

We will now copy this code and paste it into the <head> section of our template page. Finally, we will save the template page as default.php, making sure that it is saved in the proper directory (phpEventCalendar/templates/). We will then upload all of our files to their proper location on the server.

Once the files are uploaded, direct your web browser to the location of the phpEventCalendar on your web server (http://yourwebpage.com/phpEventCalendar/). You should now see your calendar installed in your page. See my installed sample here: Berkeley Baptist Church Calendar of Events

In lesson three, I'll show you how to change the CSS files to make the Calendar match your site exactly.

]]> http://www.gbradhopkins.com/archives/2004/10/installing_a_multiuser_calenda.html http://www.gbradhopkins.com/archives/2004/10/installing_a_multiuser_calenda.html Web Design Tutorials Sun, 17 Oct 2004 11:53:29 -0500 A calendar that is editable by multiple users can be a great resource for businesses, churches, clubs or other groups that have a web site. In this tutorial I will show you how to add a free calendar to your web site.

]]> Requirements: To use phpEventCalendar your web server must have MySQL and PHP installed.

Download: phpEventCalendar is free under the GNU General Public Licence (GPL) agreement. Visit ikemcq web works to download the necessary files. You will find four different files that are available for download. Make sure that you download the most recent version. It is only necessary that you download one of the files (either pec-0.2.tar.gz or pec-0.2.zip) and then any language files that you may need.

Let's get started. Once you download the compressed phpEventCalendar file, decompress (unzip) it and copy it to your web site folder. I would also recommend that you now upload the entire phpEventCalendar folder to your web server.

While your calendar is uploading, you will need to create the MySQL database that it will use to maintain the events that will be added to the calendar. My web server uses a very common User Interface called cPanel X. Using the Manage MySQL function I created a database for the calendar (called bbc_calendar). You may have to check the documentation for your web server to find out how to create a MySQL database.

Now that your database is created and your files are uploaded, you will edit the config.php file found in the phpEventCalendar folder. Open the config.php file in a text editor. There are four lines of code that need edited. They are found on lines 19 through 22.

define("DB_NAME", ""); // db name
define("DB_USER", ""); // db username
define("DB_PASS", ""); // db password
define("DB_HOST", "localhost"); // db server

On each of these lines you will add information between the two quotes (""). DB Name will be the name of the database that you created (mine was bbc_calendar). DB Username will be the username that you use to log-in to your database (mine was the same as my login for my webserver). DB Password is the password you use to log-in and DB Server was left as is. The result should look like this:

define("DB_NAME", "calendar-database-name"); // db name
define("DB_USER", "username"); // db username
define("DB_PASS", "password"); // db password
define("DB_HOST", "localhost"); // db server

Once you have edited the config.php file, save it and upload it to the phpEventCalendar folder on your web server.

Now that everything is uploaded, we need to test our installation. To do this, we will go to our web site and then point our browser to the createtables.php file, which is found in our phpEventCalendar folder.

http://www.yourwebserver.com/phpEventCalendar/createtables.php

If you have edited and uploaded everything correctly, you will see "Installation Complete. Click Here to view the calendar." If you see this message, congratulations, your calendar is installed properly. You can now click on Click Here to view the calendar.

Finishing Touches

Once you have reached your properly installed calendar, you should log-in (using the default: admin & password) and change the admin account name and password to something unique. You can also delete the createtables.php file off of your web server.

Working Sample: Berkeley Baptist Church phpEventCalendar

Adding Users

The beauty of phpEventCalendar is its ability to be administered by multiple users. Users can have two different levels of access, Administrator (which allows them to add & edit events and add other users) and Editor (which allows them to add & edit events but not add other users).

Adding Events

Once logged-in, adding events is a simple process. First, click on the number of the day that you would like to add the event to. This will open an Add New Event window. You then give the event a name that will be displayed on the calendar, type in a description of the event (optional) and add a start and finish time (optional) for the event and hit post.

Visitors can then click on the title of the event to see more details for each event.

This is the first in a four part series that will cover the installation and customizing of the phpEventCalendar. In part two, I will show you how to customize the calendar to match your web page. If you have any questions about the calendar, feel free to post them on the message board.

]]> http://www.gbradhopkins.com/archives/2004/10/install_a_multiuser_calendar_o.html http://www.gbradhopkins.com/archives/2004/10/install_a_multiuser_calendar_o.html Web Design Tutorials Wed, 06 Oct 2004 13:25:48 -0500 Wait. Pause. Delay. Patience. People hate to wait. Don't make then wait on your web site to load. I'll show you how to check the load time of your web site.

]]> Wait. Pause. Delay. Patience.

In life, at our jobs, at school, in traffic, we all have to wait. We don't want to do it when it comes to accessing a web page. "Slow response times and difficult navigation are the most common complaints of Internet users. After waiting past a certain "attention threshold," users bail out to look for a faster site." [Websiteoptimization.com]

How long do you typically wait for a site to load before you abandon it and move on to greener pastures (with faster servers)? Ten seconds? Five? Maybe fifteen, if it's a trusted site that I am familiar with.

One of the great hurdles that users face when browsing the internet is slow load times for web pages. This is especially true for users with dial-up connections as opposed to those with high speed (cable, DSL) connections.

As a web designer, what should your goal be when developing a page? How fast should it load? According to Weboptimzation.com, a web site should load in under 8.6 seconds. Does your web site meet this standard?

Using the FREE Web Page Analyzer, provided by WebSiteOptimization.com, you can test the load time of your site and receive recommendations on how to improve the speed and usability.

In addition to providing the Web Page Analyzer, they also provide a Speed Tweak of the Week which can help you Tweak your HTML, Graphics, Server, CSS and more to help you optimize your pages.

]]> http://www.gbradhopkins.com/archives/2004/09/analyze_web_page_load_times.html http://www.gbradhopkins.com/archives/2004/09/analyze_web_page_load_times.html Web Design Tutorials Wed, 29 Sep 2004 11:03:02 -0500 How do search engines like google and yahoo! find a web site? How do they index the information on that web site to include it in their directory?

]]> It's all done through the magic of spiders. According to webopedia.com [spider] a spider, or web crawler, is "A program that automatically fetches Web pages. Spiders are used to feed pages to search engines. It's called a spider because it crawls over the Web."

Spiders follow internal and external links on web pages to crawl the web and collect information. When you submit your site to a search engine, it is added to the list of sites to be crawled. Most web sites are found by being linked to from other web sites. That is why it is so important to have your web site linked to from other web sites. Especially sites that have a high ranking in your particular category or topic.

But what does a spider see when it crawls your page? There are a number of different 'Spider Simulators" that will let you see what a spider would see if it were to crawl your page. The results may be surprising.

A google search for "Spider Simulators" will offer a number of results. The Search Engine Simulator I like is provided by 1-hit.com.

The 1-Hit.com spider simulator not only shows you what a spider sees when it spiders your page, but also give feedback as to what you can do to help the spiders index your page properly.

When I view my page through the eyes of a spider, I am warned that I may have too many META tags and that only the keywords and description tag are useful. This may be something to consider changing if my page is not being indexed properly.

Making sure that your pages are spidered properly is just one part of a comprehensive SEO (search engine optimization) plan.

]]> http://www.gbradhopkins.com/archives/2004/09/what_does_a_spider_see.html http://www.gbradhopkins.com/archives/2004/09/what_does_a_spider_see.html Web Design Tutorials Thu, 23 Sep 2004 08:23:52 -0500