How to make a scrolling image or map using jQuery

If you're trying to make a scrollable map, in a similar style to google maps where there is a fixed element with a moving image inside then jQuery is the way to go..
Here are a couple of useful resources that will get your project started:

The best option is the zoomable jQuery map plugin called Mapbox from Abel Mohler.
Not only is this scrolling, it also allows for zooming into multiple different scaled maps, so you can start with a small scale (small file) and zoom progressively into higher details maps.
Check it out here - http://wayfarerweb.com/jquery/plugins/mapbox/

Abel gives a demo with a map of middle earth as an example.
On top of this you could build your own tooltips or marker system (for example these tooltips over here http://flowplayer.org/tools/tooltip/index.html)

The second resource is CraftMap (previously MobilyMap) which is a jQuery plugin that includes overlay elements and markers -
Check it out here http://www.jscraft.net/plugins/craftmap.html

COMMENT BELOW if you know of similar resources..

How to make a scrolling image or map using jQuery

Free CSS font generating tool

Here's a useful tool - an online font tester that lets you test standard fonts to see what it they look like.. and then generates the CSS.
www.fonttester.com

Nice and functional - you can change all the standard font CSS properties using the user interface on the left. It's also a quick way to check out different browsers - just load fonttester in each browser and compare the fonts.
For more information on fonts and typography, take a look at the following web devil posts:

• using fonts in web design - display fonts Vs text fonts
• how to choose perfect heading size and text size
• why use ems for font size in web design?

Free CSS font generating tool

How to embed high resolution images into HTML

Have you ever wanted to insert a high resolution image into your web page - and make it so it's easy to zoom in so that people can see the details?

The answer is to use JavaScript or AJAX to progressively hand out the correct sized image - rather than loading the full sized (large file) at the start.  This can be a bit tricky - so here's a great free service that does it for you.
Zoom.it allows you to embed a large image (must be already hosted on your website) and adds the necessary controls to let your viewers zoom in and out.
Check it out at http://zoom.it all you need is the URL of your large image, and to add the HTML code that zoom.it supplies into your web page at the appropriate place.
Have a play with the example below...

How to embed high resolution images into HTML

How to embed a PDF document into HTML web page

PDF the Portable Document Format, although created by Adobe in the early 90's is now an open standard ISO format for documents.
It's a great way of converting propriety documents (excel, word etc.) into a easily viewable/exchangable format.

Putting PDFs into web pages is increasing popular - you can view documents as they should appear with images and text formatted as the author intended.

So.. how do you embed a pdf into a web page?

The simple way is to use the <object> element.
This assumes that the web browser has a PDF plugin - if not you can add a message to allow a direct download of the PDF instead.

<object data="filename.pdf" type="application/pdf" width="100%" height="100%">
  <p>Your web browser doesn't have a PDF plugin.
  Instead you can <a href="filename.pdf">click here to
  download the PDF file.</a></p>
</object>

You can then style the div that this object goes in so that it fits with the size and layout of your website.
If you're still not sure, or want more detail about this subject read the info over at pdfobject.com

How to embed a PDF document into HTML web page

Convert Flash swf to HTML5 - free!

I've written posts in the last 18months about the slow demise of Flash (click the Flash label on side panel) and the rise in HTML5.  So wouldn't it be great to convert SWF to HTML5.
Now you can, free!!!!!

Google labs have the swiffy tool www.google.com/doubleclick/studio/swiffy/ - upload your swf file and it converts to HTML5.
There are a few technical restrictions - file size to 1MB and restricted to ActionScript2.0 (read the FAQ for more details)

It does a lovely job of converting vector graphics to SVG and using HTML animation.
This is a major bonus - html5 banners and headers, slideshows.. anything that is a vector and isn't too complex in AS2 code.
There is also a download for an Adobe Flash Extension that integrates Swiffy into Flash - get it here - nice!

Convert Flash swf to HTML5 - free!

More free CSS3 creation tools

To add to previous posts about free online CSS3 tools (/css3-online-tool-to-generate-new-css3) here are a couple more sites that allow generate CSS3 quickly:

css3generator.com
Just use the drop-down menu to pick the style you're interested in.  I really like the multiple columns styler - super quick to get the right CSS code.  It also tells you which browsers will support the CSS3 style you are thinking of using (really handy).

layerstyles.org
Click on the pic to start - and it looks a bit like a photoshop fx wizard - choose what you want and then take the code away with you.  :)

More free CSS3 creation tools

Social media marketing

Interesting article over at businessinsider.com about social media marketing.
The interview with Marc Schiller has some insights into the psyche of consumers of social media, which I've summarised in point form.  Check out the full interview here - businessinsider.com

• In social media marketing behaviours come first, technology second. 
• There is still a fundamental need to be heard - the tools have changed but the behaviours haven't.
• People now have the ability to "curate" the info around them. This means that if they don't hear about something through the social feeds, they assume it isn't important to them.
• "90 percent of the population doesn't have that confirmation that they're being heard. I think that what drives people to express themselves online is a confirmation of their own self-worth… The reason why people write on walls is to say, hey listen, I'm here. I'm a person."
• People who follow creativity, whether its design or fashion, are extremely influential.

So, in a nutshell I think Marc is saying that the culture of "i" is very strong with this social group, and that giving them a stake in the marketing strategy makes them feel important, even special and can be capitalised on by clever marketing.

If you're interested in online marketing check out this web devil post about the quick-guide-to-online-marketing.

Social media marketing