Blog Archives

Latest Posts

Monthly

Categories

All Posts in

February 22, 2008 - 10 comments

NY Web Standards Meetup—Web Mapping Part Two: Google Maps and Beyond

Notes and links from last night's presentation on web mapping and the Google Maps API to the New York Web Standards Meetup Group. Thanks to everyone who made it!

Please contact us if you'd like to present at the March or April meetup.

Listen to Part 1 of this event

[audio:BarKode-Episode2-WebMappingPartTwo.mp3]

Listen to Part 2 of this event

[audio:BarKode-Episode3-WebMappingPartTwo.mp3]

Subscribe to the podcast of the event

Feedburner podcast link

Web Mapping Part Two: Google Maps and Beyond

We'll discuss best practices, our favorite mashups, and what makes the good ones so good. We'd also like to see if anyone in the group has any experience with the Mapstraction library.

Google Maps Wrap-up

Last month we talked a little bit about web mapping in general and ran through a Google Maps tutorial. All of the materials from last month's meetup are available on our website, including a podcast of the presentation.

Any questions about developing Google Maps? Any observations?

Other Mapping APIs

Has anyone here worked with Yahoo! Maps, Live Earth, or MapQuest? If so, what do you think?

I remember that Marco was very concerned about the fact that Google is a corporation last month, but OpenLayers is an open source solution.

I briefly worked with MapQuest in 2006, prior to driving directions in Google Maps, but I found it kind of a pain and would stick with Google—their API is faster, cuter, and easier

When initially working with the the MapQuest OpenAPI, I had a lot of difficulty getting the map to render correctly. The culprit turned out to be the DOCTYPE directive! Remove it if you want your map to display at all in Firefox and correctly in IE. Not sure if this is still true.

Open Discussion

What are the best practices when doing a mashup? Is it using abstraction layers? What makes a good UI? What are people's favorite mashups and why? What makes a good one so good?

Google has a New Year's Resolution to help produce more usable maps.

Favorite Mashups

Vincent Lim sent this one: http://www.onnyturf.com/subway/. Custom tiles. Stemless markers.

From Dominic Espinosa: Stamen Design: Oakland Crimespotting

They also released an open source interaction library called Modest Maps for displaying tile-based maps like Google's in Flash.

NYC bike maps
CrimeStat 2.0

MapCruncher

Mapstraction—Client-side abstraction layer

Published by: jeffreybarke in The Programming Mechanism

February 21, 2008 - 6 comments

Mash your way to a better world [reblog]

From Google Maps API Blog:

This seems like a very cool idea and I think theMechanism will get involved:

Posted by Mano Marks, Geo APIs Team. Our friends up at NetSquared recently opened a mashup challenge to engage developers in helping nonprofits realize some of their web ideas. The concept is pretty simple. First, nonprofits post ideas on data they have and what they'd like to be able do do with it on the web. Then, product managers and developers peruse projects and sign up to help produce specs and bring them to life over the course of the next month. Nonprofits with the coolest mashup at the end are eligible for grants totaling $100k at this year's NetSquared conference in May. This year there's extra emphasis on openness, from standards and data to software and ideas. If your mashup can itself be mashed up, all the better. Mix and match APIs from different sources as you see fit—the only goal is to meet a need that a nonprofit has expressed. We like this idea a lot, and we want to help it—and potential volunteers like you—succeed. On March 7, we'll be hosting a hackathon at the Googleplex in Mountain View, California, for participants, where you'll be able to talk shop with API experts from Google. We'll also be inviting gurus from other API providers in the area to join us so you get all the help you need. If you sign up to work on a project you'll hear more from NetSquared about this event and others like it. Go check out some of the projects, think about how you might be able to apply your design skills and API wizardry to help these groups out, sign up, and mash away!

Published by: jeffreybarke in The Programming Mechanism

January 25, 2008 - Comments Off on NY Web Standards Meetup—Web Mapping Part One: Google Maps

NY Web Standards Meetup—Web Mapping Part One: Google Maps

Below are links to materials from last night's presentation on the Google Maps API to the New York Web Standards Meetup Group. Thanks to everyone who made it—there were a lot of great questions and input.

Listen to the podcast of the event

[audio:BarKode-Episode1-WebMappingPartOne.mp3]

Subscribe to the podcast of the event

Feedburner podcast link

Rashmi, here's the link I promised: Sasha Maps—A Google Web Toolkit-based library that provides functionality similar to the Google Maps API. I've never used it, because I don't know Java.

Next month will be less of a presentation and more of a roundtable as we continue our web mapping discussion. While the focus will remain on Google Maps, we'll also talk about alternatives, both commercial and open source. Other topics include: best practices, our favorite mashups, and what makes the good ones so good.

Please send the URLs of your favorite mashups, any development questions, and any tutorial requests to Jeffrey prior to part two. Thanks!

Please contact us if you'd like to present at the March or April meetup.

→ Web Mapping Part Two

Published by: jeffreybarke in The Programming Mechanism

January 24, 2008 - 4 comments

Edward Tufte on the iPhone

Still from iPhone Resolution by Edward Tufte

From Ask E.T.:

The iPhone platform elegantly solves the design problem of small screens by greatly intensifying the information resolution of each displayed page. Small screens, as on traditional cell phones, show very little information per screen, which in turn leads to deep hierarchies of stacked-up thin information—too often leaving users with "Where am I?" puzzles. Better to have users looking over material adjacent in space rather than stacked in time.

To do so requires increasing the information resolution of the screen by the hardware (higher resolution screens) and by screen design (eliminating screen-hogging computer administrative debris, and distributing information adjacent in space).

This video shows some of the resolution-enhancing methods of the iPhone, along with a few places for improvements in resolution.

Read the rest of Tufte's thought's and view the video here.

Thanks for sending this to us, Aline!

Published by: jeffreybarke in The Design Mechanism
Tags: ,

January 23, 2008 - Comments Off on First HTML 5 working draft is now available for comment

First HTML 5 working draft is now available for comment

The first working draft of HTML 5 has been published here and the guide "Differences Between HTML 5 and HTML 4" has been published here.

Comments on the draft should be sent to public-html-comments@w3.org. The Working Group is particularly looking for feedback with regard to the accessibility features. The comments archive is located at http://lists.w3.org/Archives/Public/public-html-comments/.

Published by: jeffreybarke in The Programming Mechanism

January 17, 2008 - 6 comments

Easy charts with Google Chart API and Chartpart

If you're looking for a fast, easy way to generate parameters for the Google Chart API, check out Chartpart: Google Chart API and Chart Generator Tool. It features a form-based interface for setting the chart parameters, a preview of the output chart, and the code necessary to implement the chart on one's own site or blog (background on Chartpart here).

I entered:
stacked bar
320x200
Crime Summary 07
jul,aug,sep,oct,nov,dec
violent crimes,#3e606f, 10, 30, 9, 12, 15, 22
property crimes,#91aa9d, 64, 120, 130,170,175
and received the following preview and output:

Fake crime summary 2007 graph
http://chart.apis.google.com/chart?chs=320x200&cht=bvs&chtt=Crime Summary 07&chd=s:DKDEFI,Wqt79&chco=3e606f,91aa9d&chdl=violent crimes|property crimes&chxl=0:|jul|aug|sep|oct|nov|dec|&chxt=x

While I think this service is very easy two use and I'm grateful Leancode produced it, I do have two small complaints:

  1. The title field in the form limits one to 16 characters. This is not a limitation of the API, so I'm not sure why Leancode is limiting us here.
  2. I wish the ampersands (&) were escaped (&) in the output chart link. This would make it simpler to cut and paste valid code.

Published by: jeffreybarke in The Programming Mechanism

January 12, 2008 - Comments Off on 456 Berea Street: Two on Accessibility

456 Berea Street: Two on Accessibility

Post-holidays, I'm finally getting a chance to catch up with my favorite blogs. Over the next couple of days, I plan to summarize and include links to some of my favorite posts.

Roger Johansson, of 456 Berea St., wrote two interesting posts about accessibility in December of 2007. The first is primarily an exhortation to practice accessibility, while the second examines some bad practices that masquerade as accessible.

On 14 December, in "Accessibility is part of your job, Johansson included this quote (which he agrees with and so do we!) from James Edwards's "Why Accessibility? Because It's Our Job!:"

If we call ourselves professionals, we owe it to our clients, their clients, and ourselves, to do our job properly. A chef must care about health, a builder must care about safety, and we must care about accessibility.

Caring about accessibility, however, means more than mindlessly applying a few HTML attributes to a web page. In "Overdoing accessibility" (17 December), Johansson writes about the mis- and overuse of the accesskey, tabindex, title, and alt attributes. In one egregious example, he mentions a webpage containing 185 spacer GIFs with an alt attribute of "Typographical space"!

Published by: jeffreybarke in The Programming Mechanism, The Thinking Mechanism

January 8, 2008 - 115 comments

Safari CSS hack redux

In March 2007, I wrote about a Safari CSS hack called the "Pound Safari Post Semicolon" hack (coined by Tony at Simian Design). As of Safari 3.0, this hack no longer works. However, there is a way to target Safari 3.0:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

As always, the disclaimer: nobody condones the use of hacks, but we all (well, most of us) have to make use of them at least once in a while. The above code targets both Safari 3.0 and Google's Chrome. Hopefully, it will be a future-proof hack, since the -webkit part of the selector will probably not be adopted by other browsers.

Example: The following code set the background color of the <body> element red in all browsers and then resets it to blue in Safari 3.0 and Chrome.
body { background-color: red; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    body { background-color: blue; }
}
[demo]

Tested on Mac OS X version 10.5.1 with Safari version 3.0.4 (5523.10.6) and Mozilla Firefox version 2.0.0.11. Tested on Windows XP Professional Version 2002 SP 2 with Mozilla Firefox version 2.0.0.11, Opera 9.10, and Microsoft Internet Explorer 6. Hack from CSS, JavaScript and XHTML Explained.

Update 2008-11-26: Since this hack targets Webkit-based browsers, Chrome is also affected. At the original time of writing, it also affected Opera (9.10); it hasn't since 9.50. The post copy has been updated to reflect these developments.

Published by: jeffreybarke in The Programming Mechanism
Tags:

December 20, 2007 - 6 comments

24 ways… Transparent PNGs in Internet Explorer 6

For the past three years, 24 ways has been the Advent calendar of choice for web developers. This year started off with an excellent article and script by Drew McLellan dealing with PNGs in IE5.5 and 6.

If you work with PNGs or plan to, this is a very concise and informative article. It quickly describes how PNG transparency works, outlines the problem with IE 6 and below, provides a solution, and details the limitations of this solution. I really can't recommend it enough.

SuperSleight

As if this information wasn't enough, Drew then introduces SuperSleight, a JavaScript that automates support for PNG transparency in IE5.5 and 6. Based on sleight by Aaron Boodman and bgsleight by Drew McLellan, "SuperSleight adds a number of new and useful features that have come from the day-to-day needs of working with PNGs:"

  • Works with both inline and background images, replacing the need for both sleight and bgsleight.
  • Will automatically apply position: relative to links and form fields if they don't already have position set. (Can be disabled.)
  • Can be run on the entire document or just a selected part where you know the PNGs are. This is better for performance.
  • Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
  • Can be re-applied by any other JavaScript in the page—useful if new content has been loaded by an Ajax request.

Since we use PNGs quite a bit at theMechanism, SuperSleight was of great interest to us, particularly in the London office. When I looked at the code, however, there was one thing I didn't like—to change two of SuperSleight's properties required changing values hard-coded in the object. To change the third required a separate call to the limitTo method.

Enter theMechanism

To make SuperSleight easier to implement for my colleagues in London, I added three parameters to the init and run methods of the supersleight object. Our version of SuperSleight (which I'm calling 1.1.0) is available here and partial instructions on how to use it are below. The primary documentation on SuperSleight is still Drew's 24 Ways article. You can see SuperSleight 1.1.0 in action here.

How to Use

  1. Download SuperSleight and unzip. Upload supersleight.js and x.gif to your webserver.
  2. Add the following code to the <head> element of any page that contains PNGs:

<!--[if lte IE 6]>
<script type="text/javascript" src="path/to/supersleight.js"></script>
<![endif]-->

That's it! By default, SuperSleight will run on page load, look for a transparent GIF named x in the same directory as supersleight.js, apply relative positioning to anchor and input elements, and process every PNG on the page. To change any of these default behaviors, open supersleight.js and edit or remove line 17:

supersleight.init();

The init method of the supersleight object takes three optional parameters:

  1. String path to the transparent gif file. Note this path is relative to the actual document, not the JavaScript document.
  2. Boolean value to apply relative positioning to anchor and input elements. Pass false to leave the elements as they are.
  3. String ID of an element to limit SuperSleight's operations to.

To see these parameters in operation, plese view our SuperSleight demo in IE 6 or less.

To call SuperSleight from a script, use the run method of the supersleight object. This method takes the same three optional parameters as the init method.

Download SuperSleight 1.1.0
View SuperSleight Demo

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,

August 29, 2007 - Comments Off on Firefox extensions to avoid

Firefox extensions to avoid

While searching for something completely different, I ran into an interesting article on Firefox extensions to avoid. The article was published by Computerworld on 10 April 2007 and discusses ten add-ons that are “bad” because they waste network resources or don’t provide enough benefits to be worth running. The extensions to avoid:

  • Fasterfox
  • NoScript
  • Adblock and Adblock Plus
  • PDF Download
  • VideoDownloader
  • Greasemonkey
  • ScribeFire (formerly Performancing)
  • TrackMeNot
  • Tabbrowser Preferences
  • Tabbrowser Extensions

To learn why you should avoid these extensions, you’ll have to read it.

This article complements one published 7 March 2007 on 20 must-have Firefox extensions. It’s interesting to note that in March Greasemonkey was a must have, but by April it became one to avoid. And web developers who don’t know about these add-ons will definitely find them worth checking out.

Published by: jeffreybarke in The Programming Mechanism
Tags: