Blogging Sueblimely » Images and icons

Yahoo Shortcuts plugin for Wordpress

Sueblimely — Mon, 28 Jan 2008 20:28:04 +0000

I have been trialling the Wordpress ‘Yahoo Shortcuts‘ plugin for a week or so now. As I found it a little tricky to come to grips with, I thought I would give you a bit of a run down on how to use it and a review based on my experiences. The images and popup links in this post have mostly been embedded using the plugin.

This plugin uses Yahoo Shortcuts to add Yahoo search popups and Creative Commons-licensed Flickr photos to blog content.

The image to the left is an example of a Yahoo Shortcuts “badge”.

As you are writing your post, the plugin searches for media relevant to your content. A message, at the top of the sidebar in your post window, alerts you to the number of ‘Shortcuts’ that have been found, allows you to review the post and choose whether to include all or some of suggested links and images:

The information suggested is based on various Yahoo search topics and services. A ‘Shortcut’ may lead to a Flickr image, a financial data, stock quotes , a map , a news item or information about specific companies, products, and people. More services are to be added (maybe maybe sports, movies, and music?)

If you want to view and add what has been suggested for inclusion in your post, click on the “Review this Post” button. You will be taken to an edit screen, which shows your post with the suggested shortcut ‘keywords’ underlined with a blue dotted line and a small arrow icon to the right of them. Hovering over the underlined word gives you a preview of the link suggested. Clicking on the arrow brings up options based on the type of content suggested. From here you can delete the link. Where graphical representations are available you can choose to convert the link into a badge, which embeds an image instead.

A section at the bottom of the Yahoo post review window post shows Flickr thumbnails based on keywords in your post. If there are no images to your liking, a search function allows you to browse for more within the same window.

Hovering over a thumbnail will produce a popup window showing you a larger version of the image. If you decide to include it, clicking the “Add to Post button in this window produces another popup window where you can choose the size of image. Pressing “Submit” here will insert the image into your the review post window. Once you are happy with the shortcuts included, press save and you will be taken back to your post window.

Opinion:

Flickr Image placement - if you wish to move the image from its automatically embedded position at the top of the post to somewhere else, care has to be taken that your post layout is not messed up and that text is not floating in places you don’t want it to go. Center placement may be the safest. This image came up for the words “Flickr Image” and he is cute so I thought I would leave him here:

I have not found much use for the linking and badge features, but it was only its Flickr image capabilities that initially attracted me to the plugin.My blog topics do not lead to many automatically suggested and relevant Flickr images. I can, however see this feature being of great use to some blogs.

Once I got used to the interface the plugin became much quicker to use.

Let me try some words to see what the plugin comes up with:

“Funny Sign”‘

“Chocolate”

That is too tempting, I feel a chocolate attack coming on.

Links:

Post from: Blogging Sueblimely

Yahoo Shortcuts plugin for Wordpress

The “Alt” Attribute

Sueblimely — Tue, 22 Jan 2008 06:28:19 +0000

When discussing accessibility techniques in blogs, I mentioned the importance of using the “alt” attribute. Here I am going to define it further, show you the positive aspects of using “alt” and how to use it to its best advantage.. Although alt is used for other page elements, such as image map areas, I am concentrating on its use for images.

Definition of the alt attribute

The alt attribute is a method of providing a descriptive text alternative for images. Example:

Reasons for using the alt attribute

To display a text equivalent for an image in browsers where images have been turned off.. Reasons:
- To speed up page load time for users on slow dial-up connections.
- To avoid viruses that can be spread through image files, where the user does not have adequate virus protection.
- To save bandwidth when users are concerned about using up download limits.
- To save download amounts if using a pay per download scheme (e.g. when connecting to internet via a mobile phone)
- To aid browsing when using a handheld device e.g. PDA, mobile phone, electronic books, Blackberries.
Accessibility purposes for users with disabilities:
- For those who use assistive technologies such as screen readers which convert text-to-speech, sound icons, or a braille output
- For those with color blindness which precludes them from distinguishing detail in images.
- For those using audio-based browser technologies
Search engine optimization:
- Most search engines interpret the meaning of objects by analyzing their alt attribute. They cannot see images!
- Use keywords in alt text to help with indexing and pagerank.

How to add alt text in blogs

In Blog Posts:

Blogger - In your “Create” post screen upload or point Blogger to your image location using the “Add Image” icon in either the visual or html post tabs. Once this is done look in the Edit HTML window and you will find an empty alt attribute which looks like this alt=”" . Add your text in between ” and ” e.g. alt=”this is the descriptive alt text”

Wordpress - add your image using the image icon in the new post visual tab. Add your “alt” text in the Image description box of the Insert/Add Image window.

Elsewhere in your blog:

If you are manually adding an image to your blog via widgets or straight html coding add the alt code to the image tag: For example:

will produce:

If you are using IE, hovering over the image will show this text. Another attribute, “title”, can be used for displaying image description and this does show up in Firefox.

Tips for the text in the “alt” attribute

Keep the text short - if too long it may break page layout where images are turned off.
Ensure the text is meaningful and adquately descriptive for accessiblity purposes or where graphics are not being displayed.
Include keywords for search engine purposes but still take account of the first two points above.
If the image is a text image, use the same text for the “alt” attribute - e.g for blog titles
Use CSS background images for bullets, lines or other decorative elements where descriptions are not necessary to make sense of the page. If you need to add them directly to your page you can leave the alt tag empty (alt=”") or, for example, use alt=”*” for a bullet and alt=”—” for a seperator.
Use the “title” attribute in addition to the “alt” where you want to add longer descriptions. Example:

Checking out your page:

If you wish to see how well you are using the alt attribute,

Turn off images in your brower - see if your alt attributes make sense -try reading your page out loud.
Convert your blog post into audio using a service such as Odiogo

I guess my blog topics do not lead to relevant Yahoo Shortcut images but as this was suggested for the term “alt”, I liked it and appropriate or not I am using it

Post from: Blogging Sueblimely

The “Alt” Attribute

Feed and Social Networking Buttons

Sueblimely — Thu, 03 Jan 2008 07:07:35 +0000

I have been trawling the net trying to find some tasty morsels for your hungry feeds. Well, mine are hungry at least - for subscribers. (That was not really a hint but more a way of justifying my bad puns - but you can take it as a hint if you wish :-))

This is what I caught:

The images here were all captured using “Kwout” which I mentioned in a recent post Blogging Toolchest Kwout . This really saved me some time, although the images are being hosted by Kwout rather than on my own server. If you wish to download copies of any of these buttons please click on the text links or the images themselves, as I reduced the quality of the images to speed up page loading.