Mark's Technomusings

Developer's Guide - Google Chart API - Google Code

Let google make your charts for you on the fly!

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

A great selection of HTML, CSS, JS links

MooTools Help! I Don't Know JavaScript! This page contains a great listing of various reference sites, tutorials, etc for HTML, CSS, JavaScript, etc. If you are just getting started in coding, or wanting to bone up on the basics, you can't go wrong by starting here.

Poor Person's Image Mapper

Poor Person's Image Mapper is handy when you need to make an image map, but don't have any software available to give you the coordinates. Enter in a URL for an image, and then you can click on it and it will tell you the location of your mouse clicks. You can then enter those manually into an image map:

<img src="images/logo_map.gif" alt="Lots of logos" border="0" usemap="#Map"/>

<map name="Map" id="Map">
<area shape="rect" coords="0,0,167,46" href="http://mark.cervarich.com" alt="TechnoMusings" />
</map>

So you'd get the pairs "0,0" and "167,46" from the image mapper.

Online FavIcon Generator

Use this online FavIcon Generator to easily create a favicon (favorites icon) for your site. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it's prominence in your visitor's bookmark menu.

HTML and CSS Table Border Style Wizard

There are many ways to make a table look "pretty" using CSS. This HTML and CSS Table Border Style Wizard let's you click on different table elements and change their look/feel. The CSS is instantly updated to show you what you've come up with.

The same site also has a CSS Font and Text Style Wizard that does the same thing for text.

S5: A Simple Standards-Based Slide Show System

S5: A Simple Standards-Based Slide Show System: S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. Anyone familiar with CSS can create their own slide show theme. It's totally simple, and it's totally standards-driven.

Centering a site (horizontally and vertically) on a page

PPK gives code (and shows the way he "built it up" step-by-step in this great CSS tutorial:
Centering your site.

The rest of his site talks about dealing with browser quirks.

Over the last several months, a small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. The method has been dubbed sIFR (or Scalable Inman Flash Replacement). sIFR 2.0: Rich Accessible Typography for the Masses

Make your HTML tables sortable

This page includes an easy 3-step process to get your table information to be sortable with one click (and without a reload):

1. Include the Javascript library, by putting a link to it in the HEAD of your page, like so:

<script src="sorttable.js">

2. Mark your table as a sortable one by giving it a class of "sortable":

<table class="sortable">

3. Ensure that your table has an ID:

<table class="sortable" id="unique_id">

sorttable: Make all your tables sortable

Is your site Bobby approved?

Welcome to Bobby WorldWide

This free service will allow you to test web pages and help expose and repair barriers to accessibility and encourage compliance with existing accessibility guidelines, such as Section 508 and the W3C's WCAG.

Yet another colorpicker

By moving 3 sliders (red,green, blue), a palatte is created that could/shoule be pleasing to the eye: ColorMatch Remix. Also includes the ability to export your colors to a Photoshop color table.

Embedding fonts in web pages

PC Magazine penned an article, Embedding Fonts in Web Pages, that explains how you can embed specialty fonts into your web pages. If this worked all the time, it would be great! No longer would you have to turn certain parts of web pages into graphics, just so your page turns out exactly how you want it.

The only problem that I see with this method, is that it still doesn't support all browsers. We start getting into a scenario where we will have to specify that "this website works best with browser XYZ." Yikes! With the movement back to standards and stylesheets, I was kinda hoping that we'd moved beyond that.

I will keep an eye on this, but right now I don't believe that this is the answer. It might be a great solution for an intranet, where you know all of the browsers will be IE version 6.0. But in the non-idealized world we actually live in, I don't see this happening.

XHTML & CSS Style Guide for the NYPL

While its easy to talk about what XHTML is/isn't, sometimes all the talk in the word can't compete against a good concrete example.

The Style Guide for the Branch Libraries of the New York Public Library explains the markup and design requirements for all Branch Libraries web projects, along with various standards and best practices.

The information is timely and useful...and I really enjoy their use of CSS to make the pages layout quite nicely.

Support older browsers?

I have finally come around to the fact that it's no longer the 90's. And as we rapidly approach 2004, I will no longer be coding new websites that are made to support version 4 browsers.

Here's a fact from White Papers // Client-Side Best Practices:
"Building a site to support version 4 browsers can double the time needed for client-side development."

Experienced designers choose colors intuitively...the rest of us need help. Finding the correct combination of colors can be frustrating and take a lot of time.

This tool, the color scheme creator, will suggest to you sets of colors that work well together...once you've given it an initial color that you choose by clicking on a color wheel.

Hopefully this will help out you fellow non-designers, I know it will help me.

Link specificity

...or, why the heck are the links in my html not doing what I told them to do in my CSS sheet. It's because you need to have them in a certain order:

• A:link
• A:visited
• A:hover
• A:active

For more info, please visit Eric Meyer's Page on link specificity

Moving up to XHTML

XHTML is the next generation of HTML: XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a very good start.

The Most Important Differences:

• XHTML elements must be properly nested
• XHTML documents must be well-formed
• Tag names must be in lowercase
• All XHTML elements must be closed

This XHTML Tutorial will help you on your way.

It is very important to validate your code using the available online resources.

You can also validate your CSS code while you are at it.

You will need to start each xhtml document with a document type declaration (DTD). There are three you can choose from:

• Strict -
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
• Transitional -
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Frameset -
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">

If you have lots of existing HTML code, you'd probably want to use the Transitional DTD.

Finally, let's let our tax dollars work for us for a change! Here is a page from the EPA with tips to make sure your html code complies to XHTML standards.

A simple robots.txt

If you ever take the time to look in your web server access logs, you might be surprised to see that you are getting tons of 404 errors for a file called robots.txt. While you could spend the time to make an elaborate file, why not spend 30 seconds to make a very simple one that will reduce the number of 404 errors, and make search engine spiders that much happier to visit your site.

A generic robots.txt file that welcomes all robots and denies none would look like this:

User-agent: *

Disallow:

More examples can be found at clockwatchers.com.

CSS is your friend

After years of coding, I'm realizing that CSS (Cascading Style Sheets) have finally hit critical mass. As this site proves, you can separate design from content. What are some sites that help me to rememember this?

• Noodle Incident - has the css panic guide, box lessons, info on text sizing
• Real World Style - notes and observations on style sheets from someone else who uses Netscape.

I'll add to this list as I come across/remember more resources.