Christian Heilmann

Posts Tagged ‘images’

Adding a world globe and location information to your site with YQL

Sunday, August 1st, 2010

Whilst looking around the open tables in YQL I found a table with earthquake information released by the United States Geological Survey. One thing the RSS feeds returned from that service had was quite a cool picture of Earth with the location as a star:

Example of the globes rendered by the USGS web service

Looking at the source I realised that the image URL has a certain logic to it:

http://earthquake.usgs.gov/images/globes/50_40.jpg

The first number is the latitude, the second the longitude of the location. Each of them need to be multiples of 5 to result in an image. Try it out by changing the values.

Using this, I put together an open YQL table to render some HTML that shows a the globe image and the information the Yahoo GeoPlanet web service has available about that location.

You can use the table with the following YQL statement:

select * from geo.globeimage where place=”sfo” and type=”data” and location=”true”

Open this in the console here or see the results as XML.

The different parameters are:

place
The geographical location, like SFO for San Francisco Airport or London, UK for London, England
type
the type of the image. If you provide data as the parameter the image gets returned as inline data. This renders the badge much faster as the image doesn’t need to get loaded from the USGS server.
location
A Boolean if want to show the list of location information or not

The above statement would render the following HTML:


sfo

  • Name: San Francisco International Airport

  • Placetype: Airport

  • Country: United States

  • Latitude: 37.614761

  • Longitude: -122.391876

  • WOEID: 12521721

In order to use this without going through YQL, I’ve put together a small JavaScript:

globebadge.init({
element:’ID or reference of element to add the badge to‘,
location:’the geographical location you want to show‘,
showlist:true or false – if set to true the script displays the place information as an HTML list.
});

For example:

globebadge.init({
element:’badge’,
location:’Batman’,
showlist:true
});

This will render in your browser like the following image:

globebadge

You can find the source of the badge script on GitHub:

Notice that I am testing for the browser. If we have IE6 I do not return the image as a data URI, otherwise I do.

If you want to see it in action and try it out with a few locations, check out the demo page for Geoglobes.

You can see the globeimage open table for YQL at the YQL table repository:

Another example how you can find cool stuff and then turn it into a web service with YQL :)

So how do you add alternative text to background images?

Wednesday, February 25th, 2009

One thing that drives me up the wall is the inertia that happens in the accessibility world. We do our best to keep the web development world aware of accessibility concerns but in the other direction I just don’t see much drive to even understand the basic principles of web design.

My favourite example is the question that crops up almost every 3 weeks on different communication channels:

The WCAG guidelines state that every image needs alternative text but we are using CSS background images a lot [Ed: sometimes this question is also about CSS sprites] – how do you define alternative text for background images?

OK, here is the scoop, people:

CSS background images which are by definition only of aesthetic value – not visual content of the document itself. If you need to put an image in the page that has meaning then use an IMG element and give it an alternative text in the alt attribute. You can also add a title attribute to add extra information that will be displayed to every user as a tooltip. If your image has a lot of content (for example a graph) then consider using the longdesc attribute to link to a textual representation of the same data or display the same data for example as a data table in the same document.

That is it – images in CSS are only visual extras, not page content, hence they never need alternative text. “Rounded corner” or “blue-yellow gradient” does not help anybody as alternative text – on the contrary, it annoys the end users.

It is not rocket science, really!

People I’d like to see on stage more: Nicole Sullivan

Sunday, January 18th, 2009

This is a new series of posts I am starting, tying in with things I’ve been saying in presentations and at interviews lately: I think it is time we mixed the speaker circuit up a bit and hear from different people than the “rock stars” of web development.

In this series I will talk about people I very much enjoy following and had great experiences witnessing as presenters or colleagues. Hopefully it’ll inspire some conference organizers to consider them and you to have a lookout for them.

First up is Nicole Sullivan, which is the name of her real life mild-mannered self.

On the web she is known as Stubbornella and writes a lot about performance, image optimization, CSS maintenance and other things that are both highly technical and very related to the grey area of web development that is the blurry border between design and engineering.

nicole sullivan

Nicole is right now writing on a book about image optimisation together with Stoyan Stefanov one of her partners in battling those extra bytes clogging the web. Together they built Smushit, a ridiculously useful tool to optimize your images without changing their visual quality. She used to work in Yahoo in the exceptional performance team and was a large part of the research team that brought the best practices for images and CSS when it comes to performance.

Nicole gives presentations both in English and French and has a wonderfully pragmatic approach to her work. While a lot of performance presentations can be highly technical, academic or deal with edge cases, Nicole keeps her “down in the trenches web developer” hat firmly on that curly head of hers and gives advice you can use immediately and get a result for your sites. Want proof? Check out this video of her speaking at the internal Yahoo developer summit:


Nicole Sullivan: "Design Fast Websites" @ Yahoo! Video

I’ve seen Nicole several times, been with her at Paris Web and The Ajax Experience and can safely say it’ll be cool to have her share her wisdom with more people out there.