I wanted to share some search engine optimization resources with you. As you’re writing content and coding you must take search engine optimization into account; it does no good to create a beautiful site if nobody can find it. These articles will give you a good foundation for creating pages that are search engine friendly.

You should see some common themes in all of the articles below:

1. Content is easy to read and rich with keywords.
2. Pages should use valid XHTML and CSS - Presentation and scripts should be in external files.
3. Make your pages accessible - use alt and title tags appropriately, don’t overuse images, avoid splash pages, use headings appropriately.
4. Page size should be small.

Using XHTML/CSS for an Effective SEO Campaign - While this article may seem “dated” (2003) it’s not. The article outlines good coding practices with XHTML and CSS and how these practices will help you with search engine placement.

High Accessibility Is Effective Search Engine Optimization - designing accessible sites not only benefits disabilites; search engines favor highly accessible web sites.

26 steps to 15k a Day - read, print, and paste on your monitor. These are easy to understand and follow steps to improve your site’s performance in search engines.

Top 5 Myths to Achieving High Search Engine Rankings -this page includes the top “myths” of search engine optimization, as well as, five steps for better search engine placement. This article provides information on researching keywords.

Getting To Done: SEO Made Easy - like the title says, easy search engine optimization tips

Search Engine Ranking Factors - a large list of the factors that can influence a web document’s rank at the major search engines (Yahoo!, MSN, Google & AskJeeves) for a particular term or phrase.

Search Engine Watch - articles, tips, forums, links and resources that pertain to search engines.

Keyword Suggestion Tool - unsure of what keywords to use in your titles, headings, and content? Try this keyword suggestion tool.

A few free sites that you should work to get listed in:

1. Open Directory Project - provides the “backbone” directory for many search engines like AOL.
2. Google - the most popular search engine.
3. MSN - Microsoft’s search engine.
4. Yahoo How to Suggest Your Site - says in a tiny voice “good luck”.
5. Search Engine Submission Tips - search engine submission, placement and marketing issues. It explains how search engines find and rank web pages, with an emphasis on what webmasters can do to improve their search engine rankings by properly submitting, using better page design, HTML meta tags, and other tips. This portion of search engine watch lists specifics about each search engine; it’s especially useful if you want to find out how to get listed with specific search engines.

The subject of email design comes up quite a bit in class. I thought you might find this article Email Design Guidelines for 2006 helpful.

CSS Intensivstation offers several XHTML and CSS templates for you to use. There are also 15 CSS short How-to articles and links to other resources.

MaxDesign also offers numerous sample CSS page layouts. You may also want to check out their presentations and articles.

Template:css - this site provides links to numerous CSS templates. Screen captures of each of the templates are available and the site is also searchable.

Last week we briefly discussed hacks in class and in Checking and Validating Sites. Tantek Celik has written Pandora’s box (model) of CSS hacks and other good intentions which describes the history of the popular CSS hacks. Rather timely for us!

Check the archives (CSS Tips) and read the post CSS Multi-Column Layout Resources for additional CSS layout resources.

Internet Explorer and the Expanding Box Problem - this article deals with long URLs and large images that cause side-by-side layouts to break. What typically happens is that the long URL will cause the containing block to grow in Internet Explorer; this causes the adjacent block be positioned below instead of next to the block that contains the long URL. This is a pretty common problem, so be sure to print/bookmark this article.

My contribution to the CSS shadow kerfuffle - a technique that uses CSS and PNG files to apply drop shawdows.

Finally, probably the best resource I can give you today is to use search engines as a CSS reference. If you can’t find what you’re looking for in the first few results try adding the word tutorial, reference, or tips to your search.

P.S. the Firefox 1.5 was released! Dragable tabs, yummy! Beware, some of the extensions you use may not work in this new version yet.

When I met with our advisory committee earlier in the month we discussed teaching JavaScript in the web development program. Unfortunately, our course has a limited duration and we just can’t teach it all (don’t I wish). Since our course is designed to teach students entry-level web development skills I feel that we cannot delve too deeply into JavaScript. I discussed this issue with our advisors and they agreed that students should have a general understanding of JavaScript and what it accomplishes when they complete the course, but if they want advanced scripting skills they should take additional coursework online or at a school that offers advanced JavaScript training.

This morning when I was visiting Joshuaink, a great site that I like to read, I found that John Oxton had posted a similar question to his visitors in Is there a hole in my skill set?. This is a great “conversation” about the need for JavaScript as a front end developer.

CSS Font and Text Style Wizard - a wizard to experiment with font and text styles and generate sample CSS style source code. You may also like the HTML and CSS Table Border Style Wizard. Both of these wizards will generate CSS and HTML code for your web pages.

5 Great Background Masking Techniques in Photoshop - this article/tutorial outlines five methods for isolating and extracting objects from photos in Photoshop. The tutorial covers the following techniques:

1. Magic Eraser tool
2. Background Eraser tool
3. Extract command
4. Quick Mask mode to make a selection and layer mask
5. Pen Tool to make a selection and layer mask

500+ Colours - 500 colours by colour name, Hex value, RGB value and Microsoft Access code number. This site also offers a web safe color chart, web smart colors, information on monitor calibration, and other resources.

Typography Crash Course Roundup - lots of great typography resources.

G2G Exchange - With this website you can share files with others from your Gmail account. If you’re working on a collaborative project with other students in class this is a great way to share source files. If you don’t have a Gmail account, please let me know and I will send you an invite.

The Favourite Website Awards was established in 2000 to showcase the latest and best cutting edge web sites. The sites showcased are considered “future thinking and progressively designed sites that feature cutting edge technologies”. These sites typically employ Flash designs and some may require the Flash 8 player.

Open Source Web Design is a community of designers and site owners sharing free web design templates as well as web design information.

Designing a Rainbow - Sexy Hot Colors - Lorelle on WordPress has a wonderful roundup of color resources on her blog today. Yummy!

graphicPUSH offers a Blog Icon Pack, a set of free icons for your blog or web site. Take a look at the graphicPush archives, there are a lot of interesting and informative articles.

WordPress.com is now offering free, WordPress based, blog hosting accounts to all; you no longer need an invitation to sign-up. Speaking of WordPress, WordPress 2.0 Beta 1 is now available.

Brothercake has a free CSS based simple website menu that you can download, customize and use on your sites. This zip package includes the necessary CSS, JavaScript, and XHTML to create both horizontal and vertical list menus.

In addition to validating HTML, XHTML, and CSS the W3C now offers an RSS/Atom Feed Validator.

php-editors has a list of PHP editors which includes licensing information, platform specs, and user rankings.

Yesterday I encouraged you all to read the article Fixing Browsers: Bugs and Hacks by Lorelle VanFossen. Lorelle was kind enough to share another article she wrote, Views of a Web Page. In this article, Lorelle describes in wonderful detail the testing process used when building a web page. The article discusses developing and testing for various screen sizes, handhelds, variable font sizes, print, browsers, search engines, color blindness and visual impairments. Taking Your Camera on the Road puts into practice everything that we have discussed in class about accessibility. Thank you Lorelle for sharing your amazing resource with us!

Once you digest Views of a Web Page, take some time to explore the rest of Lorelle and Brent’s site, Taking Your Camera on the Road (you may want to grab a cup of coffee, you may be there for hours as the information is so diverse). Lorelle and Brent have spent 10 years on the road photographing and documenting their journey; the photographs are exquisite and the stories are inspirational, educational, and gut wrenching. For those of you who love photography, don’t miss the learning section!

Checking Sites for Consistency

One of the really tough parts of web development is getting your site layout consistent in multiple browsers on multiple platforms (Windows (98, 2000, XP), Macintosh, Linux, etc.), with different resolutions when you’re using CSS. You must ensure that your site looks good in various versions of Internet Explorer, Firefox, Opera, Netscape, Mozilla, Safari, and Konqueror on multiple platforms at different resolutions (800×600, 1024×768, etc.). The instructor workstation, at the front of the classroom, has IE, Firefox, Netscape, Opera, and various other PC based browsers. The classroom Macintosh has Safari, Opera, Internet Explorer, Camino and various other browsers.

Checking your site for consistency is a time consuming process and requires access to different computers and operating systems. Access to multiple computer systems may not be an option for new web developers, as equipment costs can be high. BrowserCam’s Screen Capture Service lets you submit multiple URL’s, choose the browsers and operating systems you want to see, and in about a minute returns screen captures of your webpage loaded in the different browsers and operating systems you selected. BrowserCam has been kind enough to offer this service to students in our class for free. I will announce the username and password in class this afternoon; if you miss class, be sure to ask me for the access information.

Once you start to check your sites in different browsers you are going to find a lot of inconsistencies. Lorelle on WordPress has written an article on Fixing Browsers: Bugs and Hacks and pulled together some excellent resources on the subject. Over the weekend, students who have completed at least the CSS unit of the XHTML book should review this article, the accompanying sites and the handouts that I will provide you with today in class. I would also recommend that you spend time at CSS-Discuss for more information on browser inconsistencies. Google’s blog search is an excellent tool for finding CSS help. Try searching for “conditional comments css” or “css hacks”.

Validating Sites

All of your projects should validate as XHTML Transitional. I would recommend that you read Making Documents XHTML Compliant before you begin the validation process.

Just a few class resources that new students should be aware of:

Information about class resources including: Job search, class procedures, holidays, session dates, attendance, file management, book discounts, software discounts, and ergonomics can be found by visiting the course home page at http://pclab.cccoe.k12.ca.us and clicking the link named Current Students in the orange menu bar.

Check the online version of the XHTML assignment sheet before you begin each chapter of your book to see if there are any notes or corrections for the chapter you are about to start. If something seems unclear to you there are probably notes about the item on the assignment sheet.

All of the class computers have Firefox installed. Firefox is a popular web browser that we use in class to test our web pages. You can learn more about Firefox by reading this Firefox tutorial.

Since you have been using HomeSite for a few days you may want to take the time to learn about some of the productivity features in the program. I have a few articles on HomeSite in the blog archives; you can access these articles by searching for the word “homesite” in the search box in the menu to the right or you can just read the following:
Getting to Know Macromedia HomeSite
HomeSite Productivity Tools
Snippets Here, Snippets There, Snippets Everywhere - Part II