Just recently I added the ability for anyone to add any kind of plotted map onto their Website, without knowing how to program. Multiplotter does it for you.

Below are some examples of some maps that you can add to your site.

Restaurants in Washington, DC

Polygon surrounding the African Continent

5 Mile Run

And here is how you do it.

1) Download MultiplotterBasic.zip and upload the files onto your website.
2) Go to http://www.multiplotter.com/
3) Plot your locations
4) Copy and paste your plotted code into a text file and save that to your website, or someplace you can accesses it by a url address.

• Important: I URGE you to use the CENTER option from the Customized Marker option - Double click on your map, move the mini-icon to the center of your map and choose "Center of Map" this will save your center of the map, and the zoom level you are on.

5) Add this code to your html file

<iframe
src='loadMultiP2.php?mapWidth=400&mapHeight=400&mapZoom=4&mapControl=true&mapControlSize=
large&mapType=false&mapOverview=false&mapDatabase=http://www.example.com/
database.txt'name='mapwindow' width='400' height='400' SCROLLING='no' frameborder='0' id='mapwindow'>
</iframe>

And thats it!

6) If you have any problems dont hesitate to contact me, either on the chat box above or by email
7) Please give a link to www.multiplotter.com if you use it!

I have been absent from my blog for a while. Why? Because my time has been spent working on Multiplotter. What was intended to be a quick way to plot multiple locations so I could find a nice house near the metro, has now become a consuming project, that I am truly enjoying.

Multiplotter is a Google Maps mash up, that creates customized Google Maps. You can plot multiple locations, customize markers and information, easily add lines and get distances from point to point. Really the only thing that limits Multiplotter is your imagination.

Add as many addresses as you want. There is a single line address bar where you add your street address, description and choose your marker color. You can add as many as you want. Or create your addresses and fields in a word processing or spreadsheet program and past it into the Batch Address text box. Just supply us with
Full Address | Description | Marker Color

Your address will look like this:
123 Mystreet Rd. Washington, DC 20001 | My House | RED

If you don't have your address, we can plot by the latitude and longitude. Your address just needs to look like this:
38.8964,-77.0251|Washington, DC|Grey
Here. The first section is the coordinates, the second is your description and the third is your color marker.

ONE LITTLE NOTE: A quick easy way to load your map is to by pass the address look up feature. On your latitude and longitude coordinates, just put a tilde "~" in front of the latitude. So your address would look like this:
~38.8964,-77.0251|Washington, DC|Grey

Well, thats the basics - I will be adding more features as the blogs keep coming.

Corey

I have just recently accepted a job as a Creative Director for a Web/Print Marketing Agency, and as I sat down at my new desk and fired up my computer I realized that I forgot to get a list of all the great Firefox extensions that I had previously. You can guess how annoying it was for me to keep looking for the extensions that I desperetly missed.

Well, no more! I have have decided to make this list available to the world so that all those web/print designers can quickly access all the "must have" extensions, plus I'll add one of the most important free softwares that everyone needs.

1. IE Tab - Embedding Internet Explorer in tabs of Mozilla/Firefox
2. Extended Statusbar - A Statusbar with Speed, Percentage, Time and loaded size (like Opera's one)
3. McAfee SiteAdvisory - Summarizes safety results into intuitive red, yellow and green ratings to help Web users stay safe as they search, browse and transact online
4. ColorZilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
5. Adblock - Once installed, it's a snap to filter elements at their source-address.
6. Fasterfox - Performance and network tweaks for Firefox.
7. Tab Mix Plus - Tab Mix Plus enhances Firefox's tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more.
8. Resize Search Box - Allows you to use a resize thumb to resize the search box.
9. Gmail Notifier - A notifier for Gmail accounts.
10. Yahoo! Mail Notifier - This extension notifies you when new messages arrive in your Yahoo mailbox.
11. FireFTP - FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
12. Screen grab! - Screengrab saves entire webpages as images.
13. Image Zoom! - Adds zoom functionality for images
14. MyStickies - Mystickies allows you to place sticky notes all over the web and organize them with tags. You can view, sort and edit your notes with our free web based tool at www.mystickies.com
15. del.icio.us - del.icio.us is a social bookmarks manager. It allows you to easily add sites you like to your personal collection of links, to categorize those sites with keywords, and to share your collection not only between your own browsers and machines, but also with others.
16. View Source Chart - * Creates a Colorful Chart of a Webpage's Rendered Source Code
    * Displays Source in its Altered State After the DOM has been Manipulated by JavaScript
17. Web Developer - Adds a menu and a toolbar with various web developer tools.
18. Google Calendar Notifier - Basic interface to Google Calender - provides todays events.
19. PDF Download - Allows to choose if you want to view a PDF file inside the browser (as PDF or HTML), if you want to view it outside Firefox with your default or custom PDF reader, or if you want to download it!

And one of the most important pieces of software that I use all the time is:
Memento - The best sticky notes software out there. Memento is about 345k and does pretty much everything with little desktop notes that I want it to do. The emphasis is on being convenient, unobtrusive, and easy to use. I hope you find it useful too.

If you have any other must haves, please add to the list!

Finally a web tool where you can plot several street addresses on Google Maps! www.clikproductions.com/multiplotter

My wife and I were looking for houses in the Washington, DC area, and one thing that was frustrating me with Google Maps, was that I couldnt see multiple locations and how they were located to each other and the Washington, DC Metro. So I sat down and decided to write a tool that would do this for me.

Thanks to Phoogle I was able to use Ajax, PHP and Google's map API to accomplish my task.

I still need to add in a validation function, because Phoogle doesnt like blank addresses. But You will be able to Enter your complete Address, add a comment if you wish, and also choose the color of marker you want to use.

If you would like to see how the Washington, DC Metro Option works, use this address
1600 Pennsylvania Avenue NW Washington, DC

If you have any comments or code fixes, let me know.

Here are the links to the files that are used
index
indexphp-final.php
phoogle-final.php

Ok, so I have been messing with these .png transparencies, and I gotta tell ya - these guys are tricky buggards, especially if you want to use them in your divs as backgrounds. If you use a transparent background in a <div> your links wont work in IE. So below is how to get everything to work just fine. *One note of apology - Mac Users - I'm sorry... I dont have one - so if it doesnt work on yours, please post your fixes.

First off to have transparent .pngs work in IE you need to use the AlphaImageLoader filter. This basically allows the alpha channel in the .png file to be transparent.

Below are examples of a transparent .png file used on different colored backgrounds.

I personally found that using the AlphaImageLoader filter in declaring each use of a specific .png graphic was difficult to get working and all in all just a pain to work with, so through the magic of google I found this great document, pngbehavior.htc, it controls the filtering of .png files and how the images render in IE.

Just place pngbehavior.htc in the same directory as your CSS style sheet - Download PNGBEHAVIOR.HTC

Then place this code in your CSS

<style type="text/css">

img {
behavior: url("pngbehavior.htc");
}

</style>

Note: You need to have a transparent gif called "blank.gif" in the same directory also - Download blank.gif

Using .PNG as a background image

Now that we have .png transparencies to work with just placing the image inside your document, now I want to address the difficult part, transparent .pngs as a background. If you look at the image above you can see that it is able to be done.

First, for Mizolla, its very easy - just use your transparent image as your background image and everything works out hunky dorey - BUT not for IE. The above div actually has two seperate css's, one for IE and then another for the other browsers.

First off I gave the above div a class called transbak and defined the class as follows

.transbak {
background-color: #66CCCC;
background-image: url(images/transparent-02.png);
height: 200px;
width: 300px;
background-repeat: repeat;
border: 1px dotted #000000;
} 

For IE browsers I had to have a seperate style sheet defined - It was declared below my first style sheet

<!--[if IE]>
<style type="text/css">
.transbak {
background-color: #66CCCC;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/transparent-02.png', sizingMethod='crop');
height: 200px;
width: 300px;
background-repeat: repeat;
border: 1px dotted #000000;
</style>
<![endif]-->

And there TADA! you know have your transparent div working - BUT - There is one more thing, what if you want to have text in your div and links? Guess what - if you just do it the way I described above - your links wont work - so now we need to fix that! Below you will see that the link inside doesn't work in IE

So all we really need to do is place the text inside another div and make that a positioning relative, and there ya go... it all works - I like to just have a class defined as IEFix and just make that class relative - and place the defined class in your [If IE] section

<!--[if IE]>
<style type="text/css">

.transbak {
background-color: #66CCCC;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/transparent-02.png', sizingMethod='crop');
height: 200px;
width: 300px;
background-repeat: repeat;
border: 1px dotted #000000;

.IEFix{
position: relative;
}

</style>
<![endif]-->

If you need to see how any of this was done, you can always look at my source.

The Quickchat extension from Firefox, is probably one of the most interesting extensions that I have installed because of its pure potential. For those of you that don't have, or dont use Firefox, please, get it now at http://www.mozilla.com/firefox/ - not only is it more secure than Internet Explorer, its just simply a better browser. But I dont want to talk about why to go to Firefox, I want to talk about the possibilities of this extension.

Extensions are little programs that you download and install into the Firefox browser, which allow you to browser the internet and interact with other websites in a more user friendly way. Now, not all extensions are good, so you have to test them and see if you like them, but Quickchat is an excellent addition, especially for anyone that runs a website and is on the internet as often as I am.

Quickchat opens a small chat window at the bottom of Firefox, which allows you to chat with people that have Quickchat installed and are on that particular website. So for example, You are on Google, you can look at the bottom bar of your browser, next to the Firefox logo and you will see a note saying something like "QuickChat: 14 users (Click). This notifies you, how many people are in the Google.com IRC chat site. You then (left or right) single click on that notice or go to Tools>Quickchat On/Off, and this will then open or close your chat window. You will then be connected to others that have opened the chat window on that same website.

You can also connect to other website chats other then just the website you are currently on. If you type in

/join clikproductions.com

you will be connected to the CLiK Productions website chat channel. You can then hop back to the Google chat site by hitting CTRL 2 and go to the CLiK site by hitting CTRL 3. - Now if you have 3 tabs open, when you hit CTRL 3 you will also hop to your 3rd Tab. So just mess around and see how it works for you - you might just want to only have one chat window open because it could get confusing.

If you need any help on any commands you can always hit "/help" and it will give you a listing of options on how to join other IRC chat sites, how to close down the current chat window you are in and so on. One important thing! You can browse other websites while still in the same chat room!

The reason why I got so excited about this little option is that now, anyone that goes to my site, can now chat with me real time. So lets say I am working with a client, we can now easily walk through various sections of their website or have group discussions... the possibilities are endless. This can be used for anyone that is into strong customer support as I am.

The only thing that I would like to have added is a little Icon on my website that shows when I am logged into the CLiK Productions website chat, so people can know if I am there or not - but of course they can see in the bottom browser bar if at least one person is logged in or not.

So if you are into keeping in contact with people that are interested in the same things that you are into, and browse the same websites that you do... then this is a must have.

Welcome to CLiK Production's Blog or what I like to call CLiKBlog. For a while I have been trying to figure out what to put down in my first blog. I knew to follow the basics - write about what you know, but what did I know? Well I'm a web designer and print designer with over 10 years of experience... and that's when it hit me! For my first blog I will introduce myself and give a little history about what I know. AMAZING! Who would have ever thought about doing that!

The blogs following this one will give insights about solving problems I have found in designing for web and print, plus giving input on other technical issues, but not always pertaining to web and print. Some of my other interests are in web 2.0, podcasts and I love my MP3 player so I will be giving some info on things that I have found that might help you.

But first lets just talk about me. I'm originally from a small town called Aberdeen Maryland, home of Cal Ripken and Aberdeen Proving Grounds. I had my first computer when I was 15 years old, it was a top of the line 2 floppy, no hard drive, 8088 IBM Clone with a CGA graphics card. This little machine kept me out of trouble and knee deep into geekieness. Little did I know that I was going to be able to combine my two passions of art and computers.

Websites

Back in the day, and we are talking about 1987-88, was when I first got into bulletin boards or BBSs. If I am talking a little over your head, don't worry - this is all pre-internet days. If anyone saw the Matthew Broderick movie WAR GAMES you would have a little premise of what I am talking about. We would have our computers connect from one computer to another computer using our phone lines at the remarkable speed of 1200 baud. Now if you think dial-up is slow, it would most likely take 5-10 minutes for a typical webpage from today to download at that speed back then.

Well anyways I got together with a bunch of misfits and we all were hosting our own Bulletin Boards. We all had to learn Pascal, C+ and how to design in ASCII, and if you think GIF images are pixilated - try to make an image out of the characters only your keyboard can make.

This computer stuff kept me entertained well into my college years, but by then the Internet was starting to come around. Netscape was just arriving and the e-mail client PINE was being used by everyone that that was anyone on GOPHER. The graphics were still pretty simple - but you would get all excited that you were able to log onto a college website located in Russia.

I was currently going to college at Towson State University, now known as Towson University,with a major in Visual Communications/Photography. Once I saw what a webpage looked like, I immediately knew that this would be part of my life and not just graphic design. I then started to learn HTML and designing my personal website.

Print

Right before I went into college I had joined the Army National Guard as an Illustrator. The Army trained me in illustration and graphic design for presentations and military publications. And in 1991 I was activated for the Persian Gulf War. I didnt think that the military would need many graphic designers in a war, but I was wrong. I worked on presentations, maps and displays, and if the SCUD Missles weren't coming in, I got in a little bit of Volly Ball.

While I was attending college was when I got my first real taste of real world print work. I started small working for a small advertising newspaper called The Impulse. I was hired as one of their ad designers, creating black and white ads for newsprint. We basically printed out our ads on lazer printer, waxed the back of the ads and posted them onto our mock up boards. We only used one extra color so Ruby Lift was our friend. Then the layouts would be sent to the printer to be photographed and turned into plates.

I then worked for a local community college as their graphic designer. They had an inhouse printer, so we worked basically the same way as The Impulse did, but this time I created class schedules, brochures, pamphlets, signs and a little bit of logo work. This job was actually a great opportunity for me because while I was going to college learning how to be a graphic designer, I was actually being one as a part time job. My professors were pretty cool about it too, if I brought in my work and showed it to the class - that would count as my actual classes and I was graded from that work then the actual class projects.

After college I then wore the many hats it takes to be a designer:

• Briefing Specialist for a government contractor making Power Point presentations
  
• Communications Specialist - designing a credit union's first website
  
• Senior Designer for a dot.com working on their marketing print material and website.
  This entailed branding, marketing themes, software packaging, logo design and software manual design and layout
  
• Started my own freelance company called CLiK Productions, specializing in illustration, print and web design
  
• Art Director for Woodside Travel Trust creating their print jobs and websites
  Creating Woodside Travel Trust's website, 900pg 2 color Hotel Book, Partner Perspectives 4 color magazine, 100 pg 4 color glossy Absolutley Fantastic Hotels & Resorts Guide and what ever else they needed me for. P
  
• Art Director for a dot.com in Colorado designing websites for insurance companies while managing 3 graphic designers and 2 web developers
  
• And now, for four years, I have been the Creative Services Manager for Washington, DC Convention & Tourism Corporation, creating most of their print marketing material and all of their websites and web promotional material. This included about 6-10 original websites a year, Bi Annual 100 pg Visitors Guide, Annual Meeting planners Guide, a brochure for every special event WCTC hosted that year, logo design, out door event signage, Metro Advertisments on buses and trains, photography, managing 3rd party organizations in web development and freelance designers and the list goes on.
  

During all this time I have had the usual problems while creating PDFs, running Flightcheck for my publications, designing websites for multiple browsers and so on and so on and so on..... Now I want to share a little of my know how with all of you. I will try to post often, but my goal is to post bi-weekly.

So come back and enjoy!