Making a segmented “wheel” image map

By on December 21, 2011

An HTML image map can create “hotspots” on a single image to give it multiple clickable areas.

This example shows how to create a circular “wheel spokes” or “pie” style image map with clickable segments or slices. There are three types of area shapes that can be mapped, “rect”, “circle”, and “polygon” (or “poly”). In this example we’ll only use the “polygon” shape because we’ll need to use custom lines and angles for our slices. This example uses triangle shaped clickable areas for each slice because unfortunately image maps don’t allow arc shaped areas with one curved edge.

Try clicking each coloured segment of this image…

How to create the image map?

  1. Find an image or make one (download sample wheel PNG)
  2. Store the image somewhere reference-able
  3. Write the html (see example below)
    • write the <map> tag and give it a “name” attribute and give it a value e.g. name=”wheel”
    • write an <area> tag, give it a “shape” attribute with value “poly”
    • give the <area> tag another attribute called “coords”. It’s value will be a series of numbers that make up the co-ordinates of each point of the shape in order. e.g. coords=” x coord 1, y coord 1, x coord 2, y coord 2, x coord 3, y coord. (Hint: the reference points for these coordinates are the left side and the top side of the image that is using this map. I.e. the coordinate “0,0″ is the top left corner of the image.)
    • give the <area> tag another attribute called “href” with the value of a URL. This is the address that the particular area of the image will link to when clicked.
    • write more <area> tags as required
    • write the <img> tag and reference the stored image (example below)
    • give the <img> tag an attribute “usemap” with the value “#wheel” (don’t forget the hash “#”)
  4. View the finished HTML in a browser and click away!

Example HTML

<img src="http://dhyanascarano.com/wp-content/uploads/2011/12/Colour-wheel.png" usemap="#wheel"/>
<map name="wheel">
	<area shape="poly" coords="236,236,35,120,35,352" href="http://en.wikipedia.org/wiki/Magenta">
	<area shape="polygon" coords="236,236,236,0,35,120" href="http://en.wikipedia.org/wiki/Blue">
	<area shape="polygon" coords="236,236,436,120,236,0" href="http://en.wikipedia.org/wiki/Aqua_(color)">
	<area shape="polygon" coords="236,236,436,352,436,120" href="http://en.wikipedia.org/wiki/Yellow">
	<area shape="polygon" coords="236,236,236,473,436,352" href="http://en.wikipedia.org/wiki/Green">
	<area shape="polygon" coords="236,236,236,473,35,352" href="http://en.wikipedia.org/wiki/Red">
</map>

References

To learn more about image maps take a look at these resources:

This entry is filed under Learning, Web. | 1 Comment

What is a browser?

By on September 5, 2011

We all use browsers right? You’re probably using one right now if you’re reading this. So it’s quite surprising that many people don’t really know what a web browser is.

Before you read more, ask yourself what is a web browser?. Verbalise your answer out loud in a single sentence (it’s easy to think you’ve got the gist of it until you try saying it out loud). If you found it difficult to put into words, don’t feel too bad, you’re not alone. Watch this video to see what other people said…

…and now lets find out what a browser really is. The good people at Google have put together a really straightforward explanation at http://www.whatbrowser.org (it also tells you what web browser you are currently using).

This entry is filed under Learning, Web. | 1 Comment

Study a Stanford course for free

By on September 5, 2011

The Stanford University School of Engineering are offering an amazing opportunity to the world starting in October 2011. The opportunity for anyone in the world to study a Standford course in Artificial Intelligence for free over the internet.

There are no entry requirements. You don’t have to be a student of Stanford University. You don’t even need to buy a text book. Simply enroll online. Everything you need is provided, including tutelage from two world class minds, Sebastian Thrun and Peter Norvig. The single requirement is that the student will need access to a decent internet connection in order to watch the video lectures and submit online assessments.

So join me and enroll now, and for the rest of your life you can tell snobs at parties that you studied at Stanford.

This entry is filed under Learning. | 1 Comment

Making a Screencast Video – Tips and Tricks

By on June 30, 2011

This isn’t step-by-step instructions on how to make a screencast. For that you will need to find a tutorial for the specific screencasting software you are using. This is a list of tips, and do’s and dont’s that can be applied to any screencast making experience.

  1. Write a script!

    Before you start, write a script! This is really necessary. You will sound unprofessional and will talk too slowly if you don’t do this. And you will end up spending a lot more time re-doing it over and over again.

  2. Where will you record?

    • Use the same room for all recordings. Your voice will sound different in different rooms, and the light will be different on your face (if you are videoing your face).
    • Make sure there’s no background noise. Every little noise shows up, and one little sound can be very hard to remove.
    • Try recording a bit and see how it sounds. You don’t want to record the whole thing and then have to redo it because your voice sounds tinny.

  3. Keep it short

    People can’t concentrate on one thing for more than about three minutes (seriously, there’s research), so try to keep your video limited to about that long. If you really need more time you should probably consider splitting your message into two separate topics.

  4. Figure out the aspect ratio before you start recording

    If you don’t set your screen to the right aspect ratio before you record, you will either have to crop the video or stretch it out later on (yuk!)

  5. How to speak and what to say

    • Don’t speak to slowly or too quickly. Speak at the speed you would if you were having a conversation.
    • Over-do the tone of your voice. You sound ten times duller than you think you do.
    • Use short sentences and simple language.
    • Don’t stop recording if you make a mistake, just start the sentence again and keep recording. You can cut out the bad bits later, and it’s much easier than doing multiple recordings.
    • If individual parts sounds dodgy after you’ve recorded the whole thing, you can always re-record single sentences later on and splice them in.

  6. On the screen

    • Don’t wiggle the mouse around any more than you absolutely have to. If you are speaking and there’s nothing really happening on the screen, take your hand off the mouse. This will make cutting and splicing the video together later soooooo much easier.
    • Use text pop-ups on the screen to emphasise important points. e.g. If you’re telling people to go to a particular URL, pop the URL up on the screen in large text for a few seconds.
    • Use a zoom in feature, or highlighting feature to focus on a section of the screen when you are doing something small, like typing in a login or choosing a particular check box.
    • Use a cursor highlighter to track the location of your mouse cursor on the screen. I used and like the “Flashlight” feature of OmniDazzle.

  7. Refine after recording

    • Cut out the unnecessary gaps where nothing is happening (like waiting for a page to load in a browser). Even half a second makes a difference to the flow of the video.
    • Use zoom and highlighting features where appropriate to focus the viewers attention on the important part of the screen (but don’t over use)

Screencast Software

I have only used one screencast software program, and that’s ScreenFlow. It was my first experience and I found it really simple to get started. Here’s some tutorials for ScreenFlow: http://www.telestream.net/screen-flow/demos.htm

This entry is filed under Uncategorized. | 1 Comment

What is a positioning statement?

By on June 29, 2011

Good question. Is it a tagline? A mission statement? A slogan? I didn’t know… so I googled, and a lot of people have different ideas. Some talk about the positioning statement being focused on the company and some about a specific product. Some say it should evoke emotion in the customer, some say it should be emotionless. Most of them centre around 7 standard questions that a positioning statement should answer:

  1. who are you?
  2. what do you do?
  3. who do you do it for?
  4. why do you do it?
  5. who are you competing against?
  6. what makes you different?
  7. what unique benefit do you deliver?

That’s kind of a lot to cram into a sentence or two, and it all sounds sort of boring to me. I think they can all be summed up by one question that should really drive the message:

Why should anyone care about what you do?

If you’re interested in the things I googled, here they are in order of my opinion of their value:

http://www.kickstartall.com/documents/KS_Articles/WhatIsAPositioningStatement_Feb2011.html
http://www.brandeo.com/positioning%20statement
http://www.qalfm.org.au/resources/PositioningStatementBasics.pdf
http://marketing.about.com/cs/advertising/ht/writeposition.htm
http://www.marketingprofs.com/Faqs/showfaq.asp?ID=160&CatID=9
http://www.woodsidefund.com/ent/articles/Your_Positioning_Statement.html

This entry is filed under Product and tagged , , , , , .