October 25, 2009

Google Map with tabs & no code

Google Maps are an excellent way to show information - especially case studies. And now, you can create a map that updates from a simple spreadsheet, without even needing to know about AJAX or Javascript.

Here's an example of some information I downloaded in spreadsheet format, and had published in a webpage half an hour later. The markers on this map are members of a certain political grouping, courtesy of a file published by WikiLeaks.

Here's how to do it:

1) Start a new spreadsheet in Google Docs (create a login, if you don't already have one)

2) Create 4 columns (the minimum):

- the first for the title of the marker
- the second for the address
- the third for the information to go in the first tab
- the fourth for the information in the second tab

(The heading you use for the columns of the 2 tabs will be the title of each tab)

Additional Tip: You can use the =Concatenate function to string together information of different cells, as well as include HTML, for example:

If E2's contents are "Uncle Hester" and F2's are "Dunroamin Cottage", you could make this all one sentence, wrapped in a <h2> heading by:

=concatenate('<h2>',E2,' ',F2,'</h2>')

Anything other than cell numbers needs surrounding with quotation marks - between E2 and F2 we want a space, hence the '[space]' in the calculation above

3) Now it's time to publish the data, so that a Google Map can read the data:

- click the "Share" button in the top right hand corner
- choose "publish as a web page"
- select "Automatically republish when changes are made"
- under "Get a link to the published data" choose "Atom"
- copy the numbers in the link that it gives you
(the important bits you'll need are in red in this example - http://spreadsheets.google.com/feeds/list/tAArQLUbx2_wKsxzOqyAAAA/od4/public/basic)

4) Geocode the addresses. If you haven't got the geocodes - Google have a Geocode Wizard that'll do it for you

Copy the Lat and Long data that the Geocode Wizard gives you into 2 new columns on your spreadsheet

5) Now - make the map... Again, Google have a Tabbed Map Wizard that does all the hard work for you. Put in the info of your spreadsheet as required, play with the options, and the Wizard will create the necessary code for you

6) Sign up for a Google Maps API key - put the following into the <head> of your web page:
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR-API-KEY-HERE" type="text/javascript"></script>

7) Change the opening <body> element to <body onLoad="load()" onUnload="GUnload()">

8) Copy the code from the wizard from the line with CDATA in it onwards, not including the final </script>

9) Paste into a blank .js file and save it - then link to this file, after your API key link in the <head> of your document

10) Copy the code from the top of the wizard, from <div style... down to the closing <div> tag 6 lines down, and paste the into the <body> of your document, where you want the map to appear

And you're done... Now, all you have to do is update the spreadsheet (including the Geocoding), and the webpage that you've created will automatically update

Labels: online-marketing, tutorial, web-design

July 04, 2009

Using Twitter and jQuery to keep a website fresh

A website with fresh, relevant content helps visitors see a business is active & has expertise - and is therefore worth working with.

But creating new pages for your site - even blog posts - can be time consuming and costly (either in money or time spent).

In this quick tutorial, I'll show you how to use Twitter to keep your website fresh, with only a beginner's grasp of HTML and graphic design - and how to use a little bit of beginner's level jQuery to enhance the visual experience.

On this site, you'll probably have noticed we have a "thought bubble" coming out of the logo, which is updated regularly (usually every day). This bubble pulls in our latest Twitter post - we use Twitter to post short messages & links related to web design / SEO / online marketing.

Hey presto - fresh, relevant content for the site that can be posted from the office, or from a train, or even from a boring meeting...

I'll now walk you through the HTML to put in your web page; how we created the thought bubble; how to make the thought bubble resize to fit your post; and how we make it fade in.

Step 1 - the HTML:

Twitter have badges available for Blogger, MySpace etc. We use a (simplified) version of the Blogger one to pull in the Twitter post to display in the "thought bubble". First, put the following HTML wherever you want your Twitter update to appear:

<div id="twitter_div">
<ul id="twitter_update_list">
</ul>
</div>

Then, put the following javascript just before the closing </body> tag:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TWITTER USER NAME.json?callback=twitterCallback2&count=1"></script>

Just make sure you put your Twitter username in the second .js script, where it says, er, TWITTER USER NAME.

(The javascript needs to go at the end, so that the rest of your page can load first - Twitter can be slow to respond, you don't want that to harm your visitor's experience).

2. Create the "thought bubble" (or whatever background you want)

We used Fireworks to create the thought bubble, and the sizes here allow it to fit into the "visual grid" for our site - yours can be different, of course.

- Draw out a rectangle 230px by 100px, with a 1px outline. Set rectangle roundness to 20. Select "Linear" gradient, going from white to the colour of your choice (I use some opacity variants, too)

- Draw out three or four circle, holding down 'shift' to keep them round, using the same Linear gradient as the box, and position them to the top left to create the "thought bubble" effect.

- Adjust the gradient so that the effect finishes just above the line of the lowest of your circles

- Crop and save the thought bubble twice - once from the top to just below the lowest circle, saving it as twitterBgTop, once from the bottom to just below the first circle, saving it as twitterBgBottom - to the relevant images folder on your site

3. Use CSS to style

Here, I'll explain how we've used CSS to make sure the bubble adjusts in size to fit your Tweets (as we know Twitter is at most 140 characters, we created the 'bubble' so that it's bigger than even the largest Tweet - we'll use CSS to make sure it resizes)

- For the wrapper div, set the 'global' styles like text size / colour and the positioning of the bubble (here we use absolute positioning for precision positioning on the page, and give it a high z-index to appear above the 'contact' collapsible panel)
- Set the twitterBgBottom image as background, positioning it to the bottom with no-repeat

#twitter_div {
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgBottom.png);
background-repeat: no-repeat;
background-position: center bottom;
font-size: 10px;
color: #8494B6;
line-height: 1.4em;
text-align: justify;
width: 270px;
position: absolute;
top: -14px;
left: 430px;
z-index: 20;
}

- Style the UL which contains the posts so that there's no bulleting, and give it padding to sit the text within the bubble: here it's 50px left padding because the side of the bubble is 40px in from the left of the parent #twitter_div, which along with the 10px right padding gives 10px 'padding' within the bubble.
- Set the twitterBgTop image as background, positioning it to the top with no-repeat

#twitter_div ul {
list-style-type: none;
background-image: url(http://www.willsonwebdesign.co.uk/images/twitterBgTop.png);
background-repeat: no-repeat;
background-position: center top;
padding-left: 50px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
margin: 0px;
}

- Style how links that are posted will appear to fit with your site's link scheme (it will inherit, so if you have global link styles, you don't need to do this)
- By setting 'display' to 'block', this ensures the "updated xx hours ago" appears on a separate line

#twitter_div a:link, #twitter_div a:visited {
color: #DF7889;
text-decoration: none;
display: block;
}
#twitter_div a:hover, #twitter_div a:active {
text-decoration: underline;
}

And you're done. The only issue remaining is that, whilst waiting for Twitter to answer the call, it can look a little ugly:

But there's a very simple way of solving this - jQuery.

4. Using jQuery to improve the visual experience

We're already using jQuery on this site to provide the "lightbox" effect for showing case study work. So, let's make the most of jQuery by using it to fade in the 'thought bubble' once it's loaded and ready to show.

First, set the #twitter_div CSS "display" property to "none".

Next, load in the jQuery library. You can either host it yourself (download it from http://jquery.com/), or call it from Google (the way I do it on this site), and link to it from the document <head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Then, put the following jQuery function in the <head> of your page. Make sure it comes after the link to the jQuery library.

<script type="text/javascript">

$(document).ready(function () {
$('#twitter_div').fadeIn(3000);
});

</script>

(You can also put it in a separate .js file, and link to it from the <head> of your page.)

What is this doing? When the document it ready, jQuery executes the "fadeIn" function on #twitter_div, which as part of its function resets the CSS property "display" to "block". You can alter the speed of fadeIn by changing the number, as 3000 represents milliseconds, so for example a quicker fadeIn of 1 second would read

$('#twitter_div').fadeIn(1000);

This isn't an accessibility issue - we're calling the Twitter post with Javascript anyway, so having #twitter_div set to display:none by default isn't denying content to any of our users with their browser's Javascript disabled.

So there we have it - an easy way to keep a website fresh and show visitors your expertise, or personality, or even both...!

Labels: tutorial, web-design

June 12, 2009

Using Blogger as FTP for your own site

-- UPDATE 2/2/2010 --

Google has announced that they're stopping the FTP option for Blogger. See this post on Google stopping FTP for more details

-- END OF UPDATE --

Google has made Blogger much harder to use for publishing a blog to your own, existing website - but only by 'hiding' the options you need. Here, I'll show you how to set up Blogger to publish via FTP to your own site.

(Why have Google changed things? Probably because they're now pushing the 'register your own domain with us' option, to make some more money, but that's only supposition)

Blogger doesn't have the reputation of the likes of WordPress, which is much more customisable and now with myriad, and high quality, free templates on which to base your whole site, rather than just a simple blog page.

But that's where Blogger still fits in - if you've already got a website and want to integrate a blog, but don't want to pay someone to rebuild the whole site, Blogger's the quickest and simplest way of doing it.

Blogger runs on even the simplest of hosting, and writing posts is easy, if a little dull, using the post editor. You can get a web designer to set up a blog that fits into your own, existing site in a couple of hours at most, giving you a blog that's exactly the same in format as the rest of your site (because you aren't tied to Blogger templates, you can simply use the code from your own site as a template).

Anyway, here's what to do (this assumes you've already got your domain name and hosting package bought, and just want to use Blogger to publish to that site):

1) Sign in to Blogger using your Google account (create one if you need).

2) Choose 'create a blog', and fill in the 'blog title' and 'blog URL' with whatever you like (it doesn't matter with what - the title can be changed later, and the URL won't be used)

3) Choose any template, and click continue - it'll tell you 'your blog has been created', so click 'start blogging'.

4) Go to the 'Settings' tab, and chose 'Publish', where you'll see that the 'FTP' option is no longer visible. But don't panic - click where it says 'use a Classic Template'.

5) This takes you to the template screen - scroll to the bottom, and click 'Revert to Classic Template' (you might get a dialogue box - don't worry, it's OK to say yes)