Computer Tips & Tutorials

Accessify
A verb: to make accessible

I’ve written about Accessify.com in the past and when I paid the site a visit today, I discovered it had had a face lift. Accessify provides a collection of accessibility tools and goodies just for you which include:

• Skip Navigation Builder – Skip navigation links are very useful for keyboard-only users. This may be people who are completely blind and using a screen reader, but can also be used by people with poor vision or mobility problems.
• jQuery Function Builder – Confused by jQuery syntax? Never sure when/where to place your parentheses, curly brackets and so-on? Use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.
• List-O-Matic – Generate CSS-styled navigation menus based on list items.
• The new accessibility screencasts section, demonstrating accessible techniques in action (as well as video examples of how to use some of this site’s tools).
• Quick Page Accessibility Test – a favelet-based page check tool.
• Accessible Table Builder – Create an accessible table using scope, header and id attributes using a wizard to guide you through the process.
• Accessible Form Builder – Quickly create a form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
• Pop-up Window Generator – Create pop-up windows that are accessible and search engine-friendly.
• Form Element Generator – Lets you easily build individual form elements that are accessible (requires JavaScript to work).

So pop on over for a visit and give the various tools a try. I just finished playing with the List-O-Matic Menu Builder which allows both horizontal and vertical menus.

If you would like to have a set of F REE web forms styled using CSS, head on over to CSS Globe to download the set of five that are by Alen Grakalic. He says:

In this collection I used my typical form markup. I always use FIELDSET and LEGEND elements although I sometimes hide them. I find FIELDSET element to be very useful in presentation, because I have an extra element without jeopardizing semantics. i.e. I can combine FORM and FIELDSET to achieve double backgrounds, or use them for vertical “sliding-door” as I did in my first example.

So go ahead over and collect you set of CSSG Collections: Web Forms and sign up for his RSS Feed at the same time.You could combine these layouts with the email form script offered by James Huggins.

Expression Web 2 Upgrade from Microsoft is available for half price $49.95 until January 29th. If you have money left after the hoiday spending, stop by the Microsoft Online Store and take advantage of this special offer. Unfortunately the offer is for the US only.

So if you are a long time FrontPage user and want to upgrade, now is the time to do it.

If you are using the RootsWeb guestbook, you already know that it does not validate. And it does not matter if you are using an HTML or XHTML doctype. Would you like to know to remedy that? Follow this step-by-step tutorials for both creating and validating your RootsWeb Guestbook.

You can also make your Rootsweb guestbook accessible by following the tutorial Making the Guest Book Accessible.

Do you have Microsoft Office 2007 installed on your computer? Would you like to be able to easily save some of your documents in pdf format for distribution on your website? In that case, you can download Microsoft’s free Save as PDF add-in for Office 2007. It allows you to create PDF documents in Word and six other Office applications.

Last night, I was working on Genealogy Web Creations and wanted to offer some of my tutorials from that site as pdf downloads complete with links to working pages and graphic image screenshots. Before I had used Open Office to work on this project. I decided to give Word 2007 a try out.

First I opened the website in Expression Web, copied and pasted the article into Word complete with all links and images. OK so far. Only problem was the links referred to files on my hard drive. That would not work. I then opened the page on the web in my browser, copied and pasted the content from Firefox (my default browser) into Word. My links were now intact, the images showed as part of the page and the link to screenshots was preserved.

Next step, Save As > File Type pdf

I now had a nicely formatted tutorial that I could distribute as a download from my site.

The original tutorial for Xara Menu Maker and Front Page

The pdf version for printing.

Would this work for a much longer set of pages that would be a Planning Guide for a Genealogy Website? YES! Complete with table of contents and cover. More Coming . . .

It is the start of a new year and maybe we are making some New Year’s Resolutions. You have been adding pages to your site throughout the year, changing pages, images and links. Do you clean up after each edit or are unsed styles, pages and images accumulating on your site.  It’s a new year and time for a fresh start. Time to clean up and reorganize.

1. Clean Up Inline/Embedded Styles – Put some time aside to look for any inline styles and organize them back in your proper style sheet. The Web Developers Tool for Fire Fox can help you with this task. It is one of the Firefox Addons I use on a daily basis. Click the CSS button and the embedded styles show first, then your external style sheet.
2. Combine Classes and Delete Duplicate/Unused classes – As we work on our pages, we add new styles. Perhaps you already have the same style with a different name or you could combine a class and/or ID. Some of the styles you have created may no longer even be uses. The “orphan” classes and ID’s should be deleted.
3. Archive Unused Files and Old Documents – We all accumulate unused files, folders, and images. If you are sure you no longer need them, delete them OR move them to a folder (I call mine orphans) to save for later use or deletion.
4. Optimize CSS Files and Validate Your HTML/CSS – Do you optimize or validate your code? NO, it is not mandatory but it is an excellent habit to get into. Again, the Web Developers Tool for Fire Fox can help you with this task. You can also use the XHTML and CSS validator. Another tool that I just started using is the
   Total Validator Advanced Desktop Tool.
5. Pick Up Good Habits Writing Clean Code – I’ve pointed to this article by Chris Coyier, on how to write clean HTML and CSS.

So with the start of a New Year read 5 Tips to Clean up HTML and CSS – Getting in good habits

Tables are used extensively by the genealogy community in both the layout of their sites as well as presently data for their viewers.

Crafting CSS layouts is tricky. In this article, Kevin Yank introduces CSS tables (which, once IE 8 is released, will be supported by all major browsers). They promise to make CSS layouts much easier for everyone.

Today, a talented web designer must be a modern-day MacGyver-that 80s TV action hero who could turn a rubber band and three tin cans into a serviceable aircraft. Turning the average site design mockup into a living, breathing slice of HTML and CSS is a comparably delicate miracle, which must be accomplished using whatever makeshift tools happen to be lying around in current browsers.

That’s exactly why so many professional designers still choose to use HTML tables for layout. How can we expect beginners to adopt CSS for layout when it takes someone with the resourcefulness (and snappy dress sense) of MacGyver to fully understand the techniques involved?

Thanks to the imminent release of Internet Explorer 8, CSS layout is about to become something anyone can learn to do-no chewing gum or makeshift explosives required.

Read Tables: The Next Evolution in CSS Layout

Expression Web 2.0 Upgrade

Microsoft is offering the upgrade for Expression Web 2.0 at a 50% discount. Have you been wanting to buy EW for yourself  but the price tag scared you off? Price for Expression Web 2.0 is now $49.95. Now you can treat yourself  and save some money too.  This upgrade is available to qualifying owners of any of the following:

• A licensed copy of an earlier version of Expression Web
• Adobe Creative Suite (any version)
• Adobe/Macromedia Flash or Director (any version)
• Adobe/Macromedia Dreamweaver (any version)
• Adobe GoLive (any version)
• Microsoft Office (any version)
• Microsoft FrontPage (any version)
• Quark QuarkXPress (any version)

So visit the Microsoft Store and get your copy of Expression Web 2.0 TODAY! There other Microsoft Products are available at discounted prices. This is a limited time offer so don’t delay.

CSS Sculptor for Expression Web

With the money you save on your purchase of Expression Web, you might want to take a look at the WebAssist Addon Eric Meyer’s CSS Sculptor for Expression Web which is also on sale until December 31st for $34.99 which is a 30% off the regular price. (affiliate link)

Migrating from FrontPage to Expression Web

The Migrating from FrontPage to Expression Web EBook is also available at the special Christmas price of $22. This ebook written by two Microsoft FrontPage MVP’s Pat Geary and Tina Clarke and will help you clean up your FrontPage site and get ready for the move to using Expression Web.

Pat and Tina also offer a class which INCLUDES the eBook. The next session begins on January 11th and runs for four weeks. You can obtain a discount on the class by using coupon code PGfriends.

So now is the time to treat yourself to some special gifts to help you in bringing your websites up to today’s modern standards.

Merry Christmas from Genealogy Web Creations and Expression Web Tutorials and Templates.

Where in the web design process do you choose the colors for your site? For me, choosing the colors are an integral part of that process. I read an interesting article this morning, How Color Choices in Your Web Design Impact the User Experience. The writer starts out –

While most people pay attention to content and flow during the web design process, few take into account the importance of color choices. Human beings are subconsciously affected by the colors they take in from moment to moment. Following are 5 important things to keep in mind about the psychology of color when designing your website.

1. Choose no more than 3 – 5 colors and then use them thematically throughout the website.
2. Use colors that are found in nature.
3. For readability, the choice between the background color and the text should contrast well without being distracting.
4. Keep your demographics in mind when choosing colors.
5. Blue has been determined to be the universal safe color choice for most demographics, evoking feelings of peace and calm.

Read How Color Choices in Your Web Design Impact the User Experience

Some of MY favorite color resources are:

• Adobe Kuler
• Color Palette Creator
• Colour Lovers
• 4096 Color Wheels
• Color Schemer
• Color Hunter

From Color Wheel Pro – See Color Theory in Action on the Meaning of Colors.

• Red is the color of fire and blood, so it is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love.
• Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, and the tropics. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation.
• Yellow is the color of sunshine. It's associated with joy, happiness, intellect, and energy.
• Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money.
• Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.
• Purple combines the stability of blue and the energy of red. Purple is associated with royalty. It symbolizes power, nobility, luxury, and ambition. It conveys wealth and extravagance. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic.
• White is associated with light, goodness, innocence, purity, and virginity. It is considered to be the color of perfection.
• Black is associated with power, elegance, formality, death, evil, and mystery.

Structural naming convention means that you name you elements for what they do rather than where they are located or how they look. When you assign a class or id for the masthead area of your page, you would then name it banner or masthead rather than top-div. Naming the elements for where they are located or how they look is called presentational naming.

Example 1: Presentational Layout click thumbnail to view larger image

Problems the Presentational Layout presents:

1. What happens if you move things around? Is the accuracy of your markup affected?
2. The div names don’t accurately describe what the elements are. Either what they are for and what they do as part of the overall document.

Example 2: Structural Layout click thumbnail to view larger image

By changing the names of the elements to #header, #site-navigation, #main-content, and #footer, the names NOW describe the purpose and the structure of those particular elements within in the document.

Guidines:

1. BEFORE choosing the id or class for an element, ask yourself what is the element for?
2. AVOID using names that rely on the location or visual look of the element. What happens if you want to change that class red-link to blue-link?
3. Use names that are intuitive and mean something to you.

You can read  CSS Tip #2: Structural Naming Convention in CSS by Jacob Gube in its entirety. Make sure you check the Related Articles listed at the end.

Templates that are offered on Genealogy Web Creations and Expression Web Tutorials use the structural naming convention.