Recently, a page that I really wanted to look at was down. As in, no longer existed and the domain was bought by a spammer. Where did I turn to? Archive.org, naturally. Thankfully, the site was listed so that I could check it out. Even greater, I could still download the .zip file that I needed.

What struck me though, is that there were no styles on the page. Normally you get a complete snapshot of a web page, CSS and all. Looking at the source code, it was immediately apparent why no styles were loaded:

<style type="text/css" media="all">@import "/css/global.css";</style>

<script type="text/javascript" src="http://web.archive.org/web/20070826215132js_/http://www.website.com/js/prototype.js"></script>

Notice how archive.org automatically prepends their own URL to the front of the archived site’s javascript? I doesn’t do that for the @import‘ed CSS because it doesn’t look like a link.

I’m curious how this works for relative links within the page, whether or not it resolves them to the full domain when archived. I know that Wget can resolve them, and a lot of web scraping programs are built around that, so…

If ever there were something that needed simplifying, it’s the Google Maps API. To quote Mike Williams:

Using the Google Map API is not easy if you don’t have much Javascript experience.

If you find the Google documentation too difficult to understand, it’s not because it’s badly written it’s just that the subject is not easy.

Well, that stinks.

Thankfully, there are a few tutorials out there that make life with Google Maps a little easier to handle. I’ll just cover two of them here, because quite frankly, I still need to learn a lot more to understand the other things out there that are available. (Like KML from Google Earth, for instance.)

Using Phoogle to map the Google (Ed. Note: Easier Google Map)

The guys at NETTUTS.com have created two different tutorials about using Google Maps, and they are both very easy to understand and implement.

The first was How to Create a Mashup by Combining 3 Different APIs

This tutorial came in handy because I was searching for a good way to integrate a Google Map into a client’s website without pulling my hair out. I’m glad I subscribe to their RSS feeds, because it was a lifesaver.

They show you how to use the Phoogle Maps v2.03 PHP class to automatically create a map using a simple array that lists the values that you need to map. Since I already had these values mapped to variables, it was a piece of cake to implement.

Using Google to map the Google (ED. Note: Harder Google Map, but more extensible)

Their second tutorial, This is How You Use the Google Maps API – screencast, was created to make more sense of the Google API, using the standard Google API methods. It’s more intense, from a programming standpoint, because you need to have more things created manually, but you can have a lot more flexibility, i.e., complexity, if you so choose.

I’m working from this one currently, because I have a project that requires more extensive overlays than are available through the Phoogle PHP class. Territory Central will be my place to create and store information for/about different areas or territories used by people doing regional sales or other territory-based activities. It’s not fancy at all, but it’s a start

As soon as I get it completed, I’ll post a tutorial on how I got it to work.

Cheers!

I named 46 HTML 4.0 elements.

A, ABBR, ACRONYM, B, BIG, BLOCKQUOTE, BODY, CITE, CODE, DD, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, IFRAME, IMG, INPUT, LI, LINK, META, OBJECT, OL, P, PRE, Q, S, SMALL, SPAN, STRONG, STYLE, TABLE, TD, TEXTAREA, TR, U, UL

I forgot 45 HTML 4.0 elements.

Not bad, considering that the remaining few, short of a few form elements, are rarely ever used. The ones I slap my head over are marked in bold:

ADDRESS, APPLET, AREA, BASE, BASEFONT, BDO, BR, BUTTON, CAPTION, CENTER, COL, COLGROUP, DEL, DFN, DIR, FONT, FRAME, FRAMESET, HEAD, HR, INS, ISINDEX, KBD, LABEL, LEGEND, MAP, MENU, NOFRAMES, NOSCRIPT, OPTGROUP, OPTION, PARAM, SAMP, SCRIPT, SELECT, STRIKE, SUB, SUP, TBODY, TFOOT, TH, THEAD, TITLE, TT, VAR

The rest are rarely, if ever, used in 90% web design. In fact, some of them I have no idea what they do. Perhaps this will give me an opportunity to discover what I’ve been missing

46

After working on a site that uses images from a variety of different sources, I felt that it was appropriate to cite the sources. (I do come from a newspaper background, so…)

So, what was the best way to do it?

Since the image is being hotlinked from another source, I could do a string search of the domain, then display the appropriate link. Easy enough, right?

It’s not so easy, since you have to search for a variety of sources, then know the link to display. That’s where a PHP array comes in handy.

Here’s the example:

Code Example

<?php
//Creates link to image source for creative attribution
$photoSource = array(
        'wikimedia'=> '<a href="http://commons.wikimedia.org/" rel="nofollow external">Wikimedia Commons</a>',
        'flickr'=> '<a href="http://www.flickr.com" rel="nofollow external">Flickr</a>',
        'picasa'=> '<a href="http://picasaweb.google.com/" rel="nofollow external">Picasa</a>',
   );
foreach ($photoSource as $photoSource_origin => $photoSource_link) {
if (stristr($imagePath,$photoSource_origin)) { ?>
   <p class="image_source">Image courtesy of < ?php echo $photoSource_link; ?></p>
<?php break; }
}?>

Code Explained

You create your array of possible sources, the example here uses Wikimedia Commons, Flickr, and Picasa as examples.

The foreach ($photoSource as $photoSource_origin => $photoSource_link) loop associates each photo source with its corresponding link. The if (stristr($imagePath,$photoSource_origin)) searches the $imagePath variable, which is the variable that contains the link to the photo, for the terms listed as $photoSource, and if found, then display’s the found search term’s associated link, the $photoSource_link.

The break then stops the loop after a solution is found.

Cool solution huh?