geoURL

GeoURL is a location-to-URL reverse directory. This will allow you to find URLs by their proximity to a given location. Adding your site to their database requires minimal work.

1. The “hardest” step – find your Latitude and Longitude, several sites like Google Maps make this simple if you don’t have access to a GPS reciever…

2. Add the following to the <head> section of your pages:
<meta name="ICBM" content="XXX.XXXXX, XXX.XXXXX" />
<meta name="DC.title" content="THE NAME OF YOUR SITE" />

3. After you’ve uploaded the change, submit your site at the following URL:
http://www.geourl.org/add.html

For more info:
http://www.geourl.org/

Why .PNG?

Many of you may be questioning why my examples always use PNG images, and not GIF or JPEG…. the answer is really simple, PNG is better suited to most usage of images on the Internet. It’s well supported by most modern browsers and allows for smaller images of higher quality than is available with GIF.

Additionally, PNG offers advanced features such as GAMA correction and Alpha Transparency.

Previously there were several patents that restricted the use of GIF online, JPG has similar restrictions that are occasionally disputed. PNG has always been an open standard and as such isn’t encumbered by any legal issues.

Here’s the simple rules that I generally apply…
1. JPG / JPEG = Photo quality images.
2. GIF = Animated Images
3. PNG = Static (non-photo) Images

References:

Adding ‘drop shadows’ to your HTML INPUT fields with CSS

Eventually there comes a time when either you, or your client(s) want you to make your HTML <form>’s sexier… one of the simplest approaches you can take is the addition of a ‘drop-shadow’ to the ‘text’ entry box. One new image and some simple CSS and you’re done!

For the purposes of this article, lets use the image i have here (INPUT white background).

Now for the CSS….
If you’re doing this inline it’ll cause you less trouble if you have a large site and only want this in a few locations.
<input type="text" style="background:#fff url(/images/input_white.png);" value="" />

Now… if you want to put this in an external CSS file you could add a ‘class’ or ‘id’ to this &input> tag, as follows…
<style type="text/css">
input#shadowclass { background:#fff url(/images/input_white.png); }
input.shadowid { background:#fff url(/images/input_white.png); }
</style>
<input type="text" class="shadowclass" name="x1" value="" />
<input type="text" id="shadowid" name="x2" value="" />

NOTE: There are better ways to do the above, but i showed the above to make the implementation obvious.

Now, we can stick the above in an external CSS and use some more specificity to prevent other problems that we’ll elaborate on…

PROBLEM…
If you assign the CSS to the <input> tag itself, you’ll get the undesired background on your CHECKBOX, RADIO, and SUBMIT input types.
The fix… either use a ‘class’ for the cases where you want to apply this style… alternately, apply a ‘class’ for the cases that you don’t want this style.
Future (not well supported currently)… use the ‘type’ in you CSS definition, like so..
input[type='text'] { background:#fff url(/images/input_white.png); }
NOTE: there’s a method in MSIE to use the ‘expression’ concept in your CSS, but i advocate ‘standards’ here, so we won’t delve any further into that topic other than to say it ‘exists’!

So here’s our final approach/recommendation for ‘current’ browsers (in our designs)… you’ll get the shadow ONLY on ‘text’ and ‘password’ input fields and not on the others…

<style type="text/css">
input { background:#fff url(/images/input_white.png); }
input#noshadow { background:transparent; }
</style>
<input type="text" name="x" value="" />
<input type="password" name="p" value="" />
<input type="radio" class="noshadow" name="r" value="" />
<input type="checkbox" class="noshadow" name="c" value="" />
<input type="submit" class="noshadow" name="s" value="" />

WARNING: the background image we use in the example above is only 200px wide, if your text field is larger than that you’ll need to account for it in some way! (otherwise you’ll get a tiled background or run out of ‘shadow’)

More advice…

  1. You can also apply this technique to <textarea> using a similar approach!
  2. This may also be a useful way to indicate ‘errors’, ‘required fields’ or ‘passwords’ in a Rich UI.

ReplayTV vs. Tivo

I’ve had a PVR / DVR for years now… and it’s a distand memory for me to channel surf while at home (it still happens a lot when i travel). Anyways, I’ve always been and advocate of the ReplayTV.

One of it’s most notable features is that they’ve ALWAYS been network ready, so it’s been able to use my existing household LAN network to connect to the Internet for updates and television schedules. It can be used with most cable networks, broadcast television, as well as satellite subscriptions…. it can even use combinations of them! With some simple configuration you can link multiple units in your household to share recording and viewing duties and even share your recordings with “others” on the Internet. Some opensource software will even allow for you to view the recorded shows on your computer in MPEG4 format.

References:

RSS Implementation Guide (Part 1 of ‘many’)

First off… the abbreviation RSS has two conflicting (but similar) meanings, both of which are XML file formats for web syndication:

  • RDF Site Summary
  • Really Simple Syndication

If you are already running a Blog or other web application that provides support for RSS, most of the work is already done for you. Here we will cover the integration of the “Feed” into your other websites.

If you take a look at the HTML source of this page, it should closely resemble what is shown below…


<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.giantgeek.com/blog/?feed=rss2" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://www.giantgeek.com/blog/?feed=rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.giantgeek.com/blog/?feed=atom" />

There's not a whole lot of difference in the actual content of these different feeds, they all contain the same 'core'
content, but apply it to different standards (each of which has it's own strengths and weaknesses).

To add the feed link to your site, it's recommended to use one or more of the 'feed' types and place the appropriate <link> into the <head> section of your website.

A 'standard' icon for RSS was recently agreed upon by Microsoft (for MSIE 7.0) and the Mozilla Organization - it is the orange colored icon that is shown here (RSS Feed Icon). Many websites that support RSS subscriptions have opted to place this in the footer of their pages.

In upcoming articles we'll show you how the RSS feed itself is created and discuss the differences in each format.

PICS Implementation Guide

Platform for Internet Content Selection (PICS)

This was originally designed to help parents and teachers control what children access on the Internet, but it also facilitates other uses for labels, including code signing and privacy. The PICS platform is one on which other rating services and filtering software have been built.’

References:

HTTP Headers (optional):


Protocol: {PICS-1.1 {headers PICS-Label}}
PICS-Label: (PICS-1.1 'http://www.weburbia.com/safe/ratings.htm' l r (s 0))

Example HTML:


<html>
<head>
<title>example</title>
<meta http-equiv="PICS-Label" content="(PICS-1.1 'http://www.weburbia.com/safe/ratings.htm' l r (s 0))" />
</head>
<body>
...
</body>
</html>

P3P 1.0 Implementation guide

Standards documentation is available from W3C at:

NOTES:

  1. Version P3P 1.1 is currently in the works.
  2. Throughout the specifications you’ll see references to “Well-Known Location”, this refers to the default path and naming of these files in the /w3c/ folder.
  3. In my examples below, I have left MOST data empty, the “

xxx” indicates a field that must match between these files.
HTML:


<html>
<head>
<link type="text/xml" rel="P3Pv1" href="/w3c/p3p.xml" />
</head>
<body>
...
</body>
</html>

HTTP Header:

p3p: policyref="/w3c/p3p.xml", CP="TST"

/w3c/p3p.xml:


<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<META xmlns="http://www.w3.org/2002/01/P3Pv1">
<POLICY-REFERENCES>
<POLICY-REF about="/w3c/privacy.xml#xxx">
<INCLUDE>/*</INCLUDE>
<COOKIE-INCLUDE name="*" value="*" domain="*" path="*" />
</POLICY-REF>
</POLICY-REFERENCES>
</META>

/w3c/prixacy.xml


<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<POLICIES xmlns="http://www.w3.org/2002/01/P3Pv1">
<POLICY name="xxx" discuri="/index.html" xml:lang="en">
<ENTITY>
<DATA-GROUP>
<DATA ref="#business.name"></DATA>
<DATA ref="#business.department"></DATA>
<DATA ref="#business.contact-info.postal.name.given"></DATA>
<DATA ref="#business.contact-info.postal.street"></DATA>
<DATA ref="#business.contact-info.postal.city"></DATA>
<DATA ref="#business.contact-info.postal.stateprov"></DATA>
<DATA ref="#business.contact-info.postal.postalcode"></DATA>
<DATA ref="#business.contact-info.postal.country"></DATA>
<DATA ref="#business.contact-info.online.email"></DATA>
<DATA ref="#business.contact-info.telecom.telephone.intcode"></DATA>
<DATA ref="#business.contact-info.telecom.telephone.loccode"></DATA>
<DATA ref="#business.contact-info.telecom.telephone.number"></DATA>
<DATA ref="#business.contact-info.online.uri"></DATA>
</DATA-GROUP>
</ENTITY>
<ACCESS><nonident/></ACCESS>
<DISPUTES-GROUP>
<DISPUTES resolution-type="service" service="/index.html" short-description="Customer Service">
<LONG-DESCRIPTION></LONG-DESCRIPTION>
<REMEDIES><correct/></REMEDIES>
</DISPUTES>
</DISPUTES-GROUP>
<STATEMENT>
<CONSEQUENCE>We record some information in order to serve your request and to secure and improve our Web site.</CONSEQUENCE>
<PURPOSE><current/><develop/><admin/></PURPOSE>
<RECIPIENT><ours/></RECIPIENT>
<RETENTION><stated-purpose/></RETENTION>
<DATA-GROUP>
<DATA ref="#dynamic.clickstream"/>
<DATA ref="#dynamic.http"/>
</DATA-GROUP>
</STATEMENT>
</POLICY>
</POLICIES>

REFERENCES:

  • http://www.w3.org/TR/2000/CR-P3P-20001215/
  • http://msdn.microsoft.com/en-us/library/ie/ms537343%28v=vs.85%29.aspx#unsatisfactory_cookies

Lorem Ipsum Dolor = What the Hell Does That Mean?

I used it in an earlier example, now I have to explain it to you…
Sometimes called “Greek Text”, the phrase is nonsense, but it does have a long history. It has been the industry’s standard dummy text ever since the 1500s by typographers to show the most distinctive features of their fonts. It is used because the letters involved and the letter spacing in those combinations reveal, at their best, the weight, design, and other important features of the typeface.

On the web, this text is typically used as “filler” to be used, in the ‘review process’ or web site demos, until the real content can be figured out/approved/what-have-you. It has been well established that if you write anything as a sample, people will spend more time reading the copy than looking at the layout. The gibberish is sufficiently like ordinary text to demonstrate the appearance but doesn’t distract the reader.

Usually it starts as follows, but like Pi (for you math nerds), it goes on forever…
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididun…

 

vs.

The href=”#” markup is pretty common in many HTML primers and most developers are used to seeing it, and don’t even question why it might be ‘bad’. Here’s the problem… “#” is supposed to be used for anchors within a page (for times when you want a user to be ‘scrolled’ to certain content on the (sometimes very long) page. Typically this is done to link from an index to specific paragraphs or chapters.

Example:


Title
<a name="top"></a>
<a href="#chap1">Chapter 1</a>
<a href="#chap2">Chapter 2</a>
<a href="#chap3">Chapter 3</a>

<a name="chap1"></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque aliquet commodo diam. Ut scelerisque, nisl id laoreet consequat, pede lacus consequat est, id consectetuer neque augue a odio.
<a href="#top">Back to Top</a>
<a name="chap2"></a>Cras vel odio. Vestibulum fermentum rhoncus sapien. Donec vehicula euismod nunc. Duis malesuada erat non nulla. Cras ullamcorper diam ut ante. Nullam quam felis, suscipit vel, ultrices non, laoreet sit amet, nulla.
<a href="#top">Back to Top</a>
<a name="chap3"></a>Cras et sem vel enim hendrerit accumsan. Fusce lobortis lobortis quam. Proin egestas justo a purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
<a href="#top">Back to Top</a>

The problem… and the cure…
If you use href="#" by itself, the browsers behavior is to take you to the very top of the page (like when it first loads). This is great on static sites, but as soon as you start adding some JavaScript events (onclick being most common), you’ll start seeing the problem.

Most developers, when coding the ‘onclick’ for an href, automatically (or by habit, or reliance on “tools”), stick the href=”#”…. by doing so, their action occurs, but as an unwanted side-effect, the browser also scrolls the content. This often takes an incredible amount of time for them to realize what’s really happened, particularly because you need enough content on the page to even see the scroll occur.

The solution, just replace the href=”#” to have a null javascript event… for compatibility with a wide variety of browsers, I recommend using href=”javascript:void(0);” in theses cases.

Good Luck!

<a href=”…” rel=”nofollow”>…</a>

In an effort to reduce what is commonly referred to as “Comment SPAM”, you should consider adding the rel=”nofollow” attribute to any ‘user provided’ link in your website (or Blog). Doing so will prevent many search engines (spiders) from giving the linked site additional ‘value’ or ‘relevance’ because of a multitude of links from around the web. It doesn’t remove ‘value’ from them, just makes your site not give them any additional weight.

To my knowledge; Google, Yahoo!, and MSN all support this markup.

Simply put… the intended effect of this is that any link containing rel=”nofollow” will allow both users and search engines to reach the site, but the existence of the link will not increase the ranking of the site in participating search engines.

Related info: