Jeremy Osborn: Designer, Educator, Writer

Jul 28

Paging Dr. Milwaukee Shaffer

Every so often on my way to dumping my spam filter, something catches my eye (and no, it’s not the acai berry viagra shakes, but thanks for asking). This was too good not to share: with the subject line “Next of Kin (Payment)” here was a classic 419 scam, a certain “CHAVEZ RUDENICK FLAHARTY” had left me $125 million dollars, estate in Liberia, etc. All very exciting, but what really caught my eye was the sender’s name “Dr. Milwaukee Schaffer”.

Milwaukee. . . Schaffer. Seriously, Mr. Liberian Scammer?

I’ll have you know that “Schaefer” beer was originally brewed in New York, not Milwaukee! Hah!

Jul 22

Firefox 3.5 Geolocation Part 1

The latest version of Firefox (3.5) has a feature called geolocation. Simply put, through a series of calculations based on your wireless signal and other factors, your geographic location can be pinpointed and this information used to send you relevant data based on your whereabouts. (For a much more technical explanation read the Geolocation API spec. ) Simple example: you’re traveling and want pizza. You fire up a browser in your hotel room and go to a site (Google maps, Tripadvisor . .) which uses your current location to automatically show you all the pizza places within 5 miles of your location.

When I first explain this concept to people, the first response is usually something like: that’s scary. Understandably so, as this brings up new privacy concerns for web browsing. The ramifications of this technology are better left for another post, but I think Firefox does a good job of managing concerns. Whenever you visit a site that wants to make use of the feature, you are given a prompt that you can either accept or reject. This concept doesn’t seem so odd if you use the GPS features on an iPhone or other mobile devices, in this case, a mobile feature has paved the way for the web.

Actually, this technology has been usable as a plugin since Firefox 3.1, but is now built into the 3.5 version of the browser. One of the best places to see this in action is Flickr. The photo community site has long been on the leading edge of geotagging photos, there are roughly 80 million geotagged images on Flickr today. In addition to Flickr’s own geotagging tools, photographers have been able to add metadata to images for latitude and longitude since Photoshop 7 and you could cheaply and automatically add gps data to your images in 2006 (and perhaps earlier). Now, of course with millions of iPhones geotagging images with each shot, there is a mountain of gps data floating around.

See geotagging in action on Flickr

  1. Go to flickr.com/map
  2. Click on the FInd My Location button (As of this writing if you’re not in a geolocation aware browser, you won’t see this.)

    3. find_my_location_flickr

  3. You will be prompted by Firefox to either Share Your Location or Don’t Share. If you want to see it in action, click “Share . .”
  4. The Flickr map will now update to your location. Assuming there are geotagged images in your immediate area, you will see pink circles representing images on a local map. Additionally, a row of thumbnails representing these images appears at the bottom.

geotagged_in_flickr

Click map to enlarge view.

The ability to view the connections between the geography of a location and images associated with this location is interesting to me. Here’s an example: last month some friends and I reserved a spot at a campsite none of us had ever been to. By using the Flickr map and browsing to the location it’s pretty obvious that there’s something of interest by the inlet near the eastern side of the lake. Might be a place to check out, right? What is interesting about this is that all things being equal, the “filter” of interesting images is generated by the collection of photographers and (in theory) was created organically. So you, the viewer, are making the connections, not a mapmaker or a moderator.

To learn how to add the geolocation code to your web pages and connect it with a web service, check this excellent tutorial from Studiowhiz.

Tags: , , , , —

Jul 13

Html “duh” moment #56372

I was recently doing a short tutorial on how to create named anchors in html. This is html 101 material, a basic concept most people learn on their first day or two of class. It’s a concept I’ve taught dozens of times before. However, today I learned something about anchors that made me think I should go back to remedial html class.

As a refresher, when you want to link to a section of a page rather than the top, you place a named anchor somewhere in your code. That might look like this:

<a name="myanchor">Yakety yak yak</a>

Then, you need to link to this named anchor using the following syntax:

Click <a href="#myanchor">here</a> for the yaks.

Ok, so far so good. Now, I was double-checking the details for the name attribute on the W3C site, a place I seldom visit because it usually ends up  scaring and confusing me. This time, I ran into something that was surprising. Because the name attribute and the id attribute both share common syntax: the pound sign (#), this means you can link to an id the same way you do with the name attribute.

So for example, I have an id named “social” at the bottom of my home page. I can directly link to this using the following syntax:

<a href="http:www.jeremyosborn.com#social">social</a>

In real usage it works like this

This tells me I might have to go back to remedial html class, because I had either overlooked or forgotten this. Looking at the syntax it makes perfect sense, both the name attribute and the id attribute use the ‘#’ sign. This knowledge exposes my old skool HTML training as I was using named anchors long before I started flinging Id’s all around with CSS.

Now that the veil has lifted from my eyes, I can see how this knowledge could be convenient when trying to link to an external site. You can  try this yourself in the browser, because all you need is the id name. For example, to link to the footer on Dan Cederholm’s Simplebits site, simply type http://www.simplebits.com/#extra into your browser. Crazy ey? (Of course, feel free to tell me everyone knew this already and I must be either a fraud or a dope).

The “duh” moment I had is that I’ve been targeting Id names for a while, it’s what allows for all that juicy Ajax goodness as in this example that smoothly scrolls your page to your anchors. Looking ahead, a  peek into the future tells me that naming everything with ids is the way the W3C wants us to go. According to the HTML 5 spec the “name” attribute will become obsolete, so goodbye “name” we hardly knew ye . . ..

Tags: , , , , —

Jul 12

A book of famous Old New Orleans Recipes

This weekend I was at my parent’s house roaming around and I found this old cookbook in the attic named “A book of famous Old New Orleans Recipes.” I like cooking, was married in New Orleans and am a sucker for well designed old books, so this was pretty much the trifecta. After flipping through the pages I noticed that half the recipes required lard so I flipped to the front to see when the book was printed. Let’s see, “Copyright, 1900″. 1900?!

I love the simplicity of these pages with their sans-serif headings and readable measurements and directions. Even with the abbreviated recipes, some personality of the author peeks through the descriptions. (Although there is no author listed for the book anywhere, just a credit for the “Peerless Printing Company” in New Orleans). Compare these pages to modern cookbooks which fit one or two recipes per page and have luxurious color photographs every other page. Don’t get me wrong, I like food porn as much as the next person, but there’s something refreshing about a cookbook that fits 200+ recipes into 55 pages.


nawlinscover

crayfish_bisque

beautycake

Click on thumbnails to see samples, you can also see these scans on my Flickr page.

Tags: , —

Jul 11

Wolfram Alpha and some Soba noodles

Sometime in May  (which feels like a year in Internet time) Wolfram Alpha was released to the public. Billed as a “computational knowledge engine” there was a bit of hype surrounding the technology behind it, the threat (if any) that Alpha might pose to Google and some backlash against Stephen Wolfram, the man lending his name to the technology.

Join me now, after the hype has died down,  in looking at a small slice of Alpha. On a whim I decided to jump over to the site when I became curious about Soba noodles. I wasn’t really sure what they were made of so I typed the phrase “Soba Noodles” into the input field.

I’m not sure what I was expecting, but it wasn’t the Nutrition Facts for a cup of Soba noodles:

One result for "Soba Noodes" on Wolfram Alpha

I was curious to know what kind of tech was behind this generated image: was it a .png, jpg, Flash? So I clicked on the image and was again surprised that a window appeared with the plaintext of the Nutritional Information making it easy to copy the data to your clipboard. (This is a feature of most results in Alpha, I discovered.)

Further down the results page, the Nutritional Information was divided into sections, my favorite was the “Highest nutrients in Soba noodles compared to other foods”. If you have a hankering for magnanese go get some Soba noodles.highest_nutrients_Soba_noodles

I modified my input to “2 cups soba noodles” and the results were quickly updated, which is kinda cool. This illustrates that Alpha’s name is apt, it is a “computational knowledge engine”, not a search engine. In fact, although it’s subtle, you can search either Google, Yahoo or Bing using your input by clicking the “Search the Web” section on the right hand side. In my case it was necessary, because nowhere on the page did it tell me that Soba noodles are made from buckwheat flour. It will be interesting to see how the technology behind the site evolves, I’m guessing it will gain a devoted but relatively small audience. I suspect if the company ever wants to have a larger profile their challenge will be explaining to the average user what it is they do.

Tags: , , —

Jul 08

Signs, signs everywhere are signs . . .

There’s an exercise I once gave to my graphic design students which required they create a road sign using Illustrator. The catch was that they had to illustrate a concept such as “Fortune Teller Ahead”. In addition to the comedy value, the exercise forced students to consider the challenge of creating these visual symbols.

What makes a “good” sign is somewhat straightforward: the average person needs to parse the sign from a distance (especially in a fast-moving car), the shape and color of the sign carry important cues and so on.

So I wanted to share this sign that I often pass  on my way to work.  I’ve scaled the sign and placed it next to some other familiar signs in order to compare and contrast at thumbnail size.

557px-Yield_sign_svgCircular_Intersection_signshare_the_roadphoto

See the sign up close.

This road sign is found in the town of Concord (MA) and it’s a curious one. The shape of the sign is for a road warning, however the message “Share The Road” is less of a warning than a gentle reminder. The amount of information on the sign doesn’t work in its favor. The multi-color palette is unusual as well as the non-standard typeface. Also, the details point to the designer getting a bit carried away: Why do we need  the tagline “Concord” on the sign? Was it necessary to put a dog in the back seat? What about the jogger and the biker in the foreground. Wouldn’t one or the other be enough?

Since I first thought of this post I’ve noticed in other areas that the “Share the Road” concept usually requires two signs: one for an image of a bicycle and another for the text. Is the concept too big for a single sign?

Tags: , , —

Jeremy Osborn's Blog

This is the weblog of Jeremy Osborn, a designer, educator and writer living in the Boston area. I write here about design, technology and other matters. Subscribe to the jeremyosborn.com RSS feed and follow me on Twitter.

Your message has been sent successfully!

Sorry. No data so far.