web design – Page 3 – Journalistopia

Live from Future of Web Apps Miami

The Orlando Sentinel Posse is here in Miami for the 2008 Future of Web Apps Conference, where he hope to figure out how we can peer into the future of web technology and apply it to the media.

A few quick tidbits: Josh Hallett of Hyku is at the front of the room snapping away, so catch his Flickr photoset and many others tagged fowamiami2008 throughout the day. Sentinel tech writer Etan Horowitz will be blogging today on the new Etan on Tech blog. And, catch Sentinel designer and Twitterholic extraordinaire Bill Couch’s feed here.

Keeping online projects on target

If you’re not careful, “feature creep” can cause a project to get buried under additional requirements, resulting in big delays and a lousy outcome. Photo by wilderdom

Web development and design blog Six Revisions has a fantastic article on how to prevent “feature creep,” otherwise known as the tendency for managers and clients to tack on additional features to a project at later phases, resulting in significant delays, broken code and –often– an overall crappier result.

The number one solution, according to Six Revisions: Dedicate enough time to requirements gathering and making sure stakeholders understand what the outcome of the project should be. If something is an essential feature, it should be documented from the get-go.

From one of the tips:

Be clear on what it is, exactly, youâ€™re developing for them. Donâ€™t promise a grand, exciting, but ambiguous/ambitious end result. Instead of giving broad generalizations such as â€œIâ€™ll be developing a search engine optimized websiteâ€, try to outline the deliverables that you will provide

Along with my previous post this morning about Jakob Nielsen’s top 10 usability sins, this is another article you should read if you have anything to do with projects for your news site.

Six Revisions: Eight Tips on How to Manage Feature Creep

[Via Digg]

Jakob Nielsen’s top 10 application design sins

Usability guru Jakob Nielsen published an article yesterday outlining the top 10 mistakes one can make when designing a Web application. Nielsen says:

Usually, applications fail because they (a) solve the wrong problem, (b) have the wrong features for the right problem, or (c) make the right features too complicated for users to understand.

The last one, (c), is most often found on news sites. One culprit (among many) is editors’ desire to spell out as many details as possible to reade…er…users, often resulting in a clunky and convoluted user experience. Folks, a web application is not an A1 news package.

Nielsen covers such usability sins as standard elements (radio buttons, dropdowns) behaving in unexpected ways, small click targets and not having progress bars or other elements to indicate something is going on.

Even if you don’t personally get into the nitty-gritty of designing Web apps, you should take a look at this article. Nielsen’s article will increase your usability IQ and help you provide more insightful feedback on projects that cross your desk.

More from Nielsen here: http://www.useit.com/alertbox/application-mistakes.html

23 design lessons from eye-tracking studies

Christina Luan over at the Virtual Hosting Blog has put together a must-read list of 23 design lessons learned from eye-tracking studies such as the one put on by Poynter.

Read this list. Love this list. You dare not ignore this list. News sites are often the biggest offenders of this list.

Among the lessons:

Fancy formatting and fonts are ignored. Why? Because users assume they are ads and donâ€™t have the information they need.

Navigation tools work better when placed at the top of the page.

People generally scan lower portions of the page. […] Give readers something to latch onto when theyâ€™re scanning your page.

Many more here.

And, on an unrelated sidenote, the Audacity 1.3.4 Beta was released with improvements galore. Audacity is the cash-strapped news operation’s audio editor of choice due its many great features and low, low price of “free.”

Hat tip to Download Squad on both items.

Morning Call strikes again with widgets

First, the Allentown Morning Call generated lots of buzz with its popular Breeders and Kennels search widget. Now, they’ve gone and done it again with a new 2007 elections tool that allows users to search a plethora of local elections and embed a widget of the results on a Web page.

Run a search, and check out the “Create a Race Widget” link (it’s small and to the far right) to get some embeddable iframe code. The widgets are available for each race.

[UPDATE: Jeff Johns over at Mccall.com comments: “We have widgets built into our project requirements, we try not to launch a project without a widget. We feel it really connects more users with our content.]

Taking that extra step to create some simple widgets can be easily forgotten in the scramble to get data features up. But widgets are a great opportunity to really serve your online audience and have your content reach more people. Don’t pass it up!

Viewing the news as data

adrian holovaty at ONA 2007 Live from the ONA conference in Torontoâ€¦

Adrian Holovaty looks at a photo of the world’s ugliest dog and sees 1s and 0s.

Displaying a photo of the hideous animal, Holovaty –the big brain behind ChicagoCrime.org and the Python framework Django— says there are loads of data in the ugly dog image. Who/what is the subject? Who took the photo? Where was it taken? When was it taken? What kind of camera was used? What colors are in the photos?

So how can that image, if tagged with metadata, give your site a big advantage? A good example is Flickr, which allows users to search photos by all sorts of non-traditional criteria. The result is a site that is stickier and allows a high degree of browsability, a trait that users nowadays are beginning to view as essential, Holovaty said.

News organizations have reporters attending city council meetings, high school sports games and covering local crimes — something Google doesn’t or can’t do. But rather than just having reporters gather facts and fuse them into a “blob” that is unreadable by machines (aka, a news story), Holovaty wants to also see news organizations compiling that information into a database format that can be easily browsed by users.

“We have all those killer advantages, but the tragedy is that we haven’t actually leveraged the information we collect,” Holovaty said.

How to get started

Being that crime databases are all the rage these days –no thanks to Holovaty– here is a set of processes and tips to get one rolling:

-Analyze the raw data you get from the police department.

-List the data’s fields (Date, time, crime type, address, etc.)

-Identify the key concepts. If a user clicks on a field, is it useful to that user to see the data sorted by that criteria? For instance, browsing by date ishelpful, but case numbers are unique and not really browseable.

-Make list pages with multiple records that are browseable by a certain criteria.

-Then, make detail pages for individual crimes.

-Every piece of information needs to have a permalink. Linkability/bookmarkability is critical, not just for users but also for search engines. “Your Google juice will go up,” Holovaty said.

Getting started with online data

david milliron at ONA 2007, Toronto Live from the ONA conference in Torontoâ€¦

This shall be the year of the “data center.”

Gannett’s online data initiative has hit it big with online news industry types who are now itching to put up databased treats such as school report cards, crimes, property sales, public employee salaries and restaurant inspections.

Easier said than done.

David Milliron, now at Caspio but formerly a data guru at the Atlanta Journal-Constitution, provided some insights on what’s needed to get a news organization started putting up great searchable databases.

Of the many things about which Milliron spoke (getting advertising on board, worrying about server load), the thing that struck me the most was the need for getting educated the right way and having a solid network of other pros to lean on. When the crap hits the fan and your site goes down because of a bad query, it’s essential to have the “under the hood” knowledge of how the database and application work. That means understanding the programming language behind the framework, Milliron said.

Furthermore, having a network of pros –whether its at your shop or otherwise–means you tap those other folks’ wisdom, have them give you great ideas on how to write good, efficient code and have them spot-check your work. For some without a mentor in-house, that may mean finding a local users group or joining a listserv (such as the ones offered by NICAR and other organizations).

Some things Milliron says you need to consider before starting database projects:

-Are there other people in your shop or at other shops in your industry developing with the programming language and framework you’re picking?

-Can you get someone knowledgable to review your code?

-If the person developing your applications gets hit by a train or hired away, will you be able to bring in someone else?

-What are the costs and time associated with maintaining the database, not just what it takes to slap it up.

As Milliron said, it’s a rare thing to find one person who knows how to gather data, analyze it, clean it, draw meaningful conclusions from it, put it up on a server, build a rocking database application and then fix it when the thing blows up. And if you do run across such an individual, they probably already have a startup or work at Google…

Now if you want to get your hands dirty with code, Milliron suggests checking out your local community college or professional development programs for database classes. That comment struck me because yours truly has been going to a local community college since August to learn some honest-to-goodness programming (in C++ of all things). I can tell you that after banging my head against a PHP/MySQL book for weeks and making little progress, having a pro hold my hand through those concepts helped me build a useful PHP app for our web producers in about four hours.

Creating interesting, functional, user-friendly databases is a big undertaking. Just don’t be afraid to get your hands dirty, and don’t fear failure. You will probably write a bad query, crash a server and have some whiz kid rewrite your 70 lines of code into seven.

But if it means gaining the knowledge to build great apps, it’ll all be well worth it in terms of page views for your site, value for your readers and –most poignantly– your job security.

Journalism is becoming a high-tech industry

Live from the ONA conference in Toronto…

Lisa Williams, founder of H20Town and Placeblogger, says journalism is becoming a high-tech industry that is moving toward the way technology firms operate.

“You guys have mooched much closer to me,” said Williams, a veteran of the technology industry.

When Williams began H20Town, she took delight at working faster than the local newspaper and gaining an audience “because I could hit ‘Enter’ first.” But now, she says, the local newspaper is publishing breaking news and implementing more Web 2.0 tools.

Williams offered several strategies for media organizations trying to navigate the online world. Among my favorites:

-Take something that used to cost money and make it free. Why let the next Craig Newmark steal your readers?

-The Web rewards “narrow comprehensiveness.” Create a product that is “everything about something” very specific.

-Limits are good. Because newspapers try hard to be all things to all readers, media organizations subsequently port that same mentality to their online products. Instead, focus on creating great, key features that will gain many fans, such as Twitter has done with their service. Get more info at carrefour-maires .

I think most mainstream media organizations have slurped the Kool-Aid and realized that we need to embrace technology. But how?

Sitting in this room full of journalists from some of the biggest news organizations in the world, I can’t help but realize that we just might be somewhat like the blind leading the blind. Nearly every group of journalists I come across asks the same questions. We desperately need to seek out the wisdom of other industries to help us navigate through the dark.

Let’s be totally shameless and emulate the ways technology companies operate. Let’s start swiping great talent from Apple, Microsoft and Google. Let’s gain some street cred among technology enthusiasts so they can help us evangelize our journalism. Let’s become educated about the techniques used to develop software. And, as many others have said before, let’s nurture real entrepreneurship in our news organizations backed with actual rewards.

Smashing Magazine a must-read for online designers

If you’re big into CSS, Flash or just design in general, then mosey on over to Smashing Magazine.

Though Smashing Magazine isn’t specifically geared toward the news industry, this is a treasure trove of insight for online news designers. I’ve linked to Smashing before for its excellent compilation of data visualizations — a post I’ve shown to many of the designers here at work and that I believe encompasses the future of news organizations’ Flash graphics.

Today, I found an awesome site that automatically generates those trendy striped backgrounds, an excellent list of usability suggestions (hat tip to NewsroomNext), a neat site for generating Flash charts and a plethora of other items. So go check it out!

PLUS: Here are a handful of particularly useful or enjoyable resources for online design: A List Apart, Vitamin, CSS Zen Garden (there’s a book out too), Kirupa, Flash Kit and –if you need some serious CSS help– the CSS-Discuss listserv run by Eric Meyer.

If you have any others you just can’t do without it, then share em in the comments. Every day is a great day to add Bookmarks…

Get yer free Ruby on Rails PDF book

Sitepoint.com is offering its 439-page book, “Build Your Own Ruby on Rails Web Applications,” for free as a downloadable PDF on its Web site. I got mine, and it’s fantastic (especially at the low price of $0)! Check it out here.

Ruby on Rails, or RoR for short, is a programming language and framework for web applications that specializes in working with databases and is all the rage nowadays. See these Orlando-based misfits and their RoR commercials.

The free PDF version of the book, which sells for $26.37 on Amazon, will only be available on Sitepoint.com for 60 more days.

And, if you’re looking for a different Rails book, most of the Rubyheads here in Orlando highly recommend “Agile Web Development with Rails.”

Journalistopia online crime maps directory

crime maps

Crime maps of all flavors are the rage nowadays ever since developer/journalist Adrian Holovaty created the now-famous ChicagoCrime.org in May, 2005.

These days, everyone from independent designers to large newspaper companies are creating crime maps, causing severe headaches for police PIOs nationwide. So for all your crime map perusing needs, below is a directory of maps pulled together with tremendous help from the denizens of the Online News Association listserv. If you know of any other neat crime maps, drop a note in the comments. Or if you’re shy, just message me at dansanufATyahoo.com.

Some maps, such as the LA Times’ homicide map, only map killings but go into extraordinary detail for each incident. Others, such as Oakland Crimespotting, pull in a broad range of data. Many of the crime maps –and some of the slickest– were put together by small publications and designers not directly affiliated with news organizations. (NOTE: I did not list online maps created by police agencies.)

You’ll find maps here that have been created using the Google, Yahoo! and Microsoft Virtual Earth mapping APIs. You’ll also find maps that are created using anything from Ruby on Rails, Python/Django and PHP to using WYSIWYG tools such as Google My Maps, ZeeMaps and CommunityWalk.

(And on a personal note, please make sure to follow good search engine optimization practices if you build a crime map. Some of these maps are really hard to find without a direct link!)

CRIME MAPS

Auto Crime Map & Alcohol Violations: Minors in Possession Map
Lawrence Journal-World
http://www2.ljworld.com/data/alcohol_violations/mip/
http://www2.ljworld.com/crimes/auto/
And the award for most booze sold to minors in Lawrence, Kansas goes to The Hawk at 1340 Ohio St. See it on a map of venues that got busted selling alochol to minors. And, see a Google Map of auto thefts/burglaries, broken down by item value, car type and more.

Arizona Crime Reports
Arizona Republic
Uses a search-form based interface with the Google API
http://www.azcentral.com/CrimeMaps/

Anniston Crime Map
Anniston Star
Interactive map made with ZeeMaps
http://www.annistonstar.com/crimemap/

Bakersfield.com Homicide Map
Bakersfield Californian
ZeeMaps-based Google Map of homicides with sidebar and multi-colored points
http://www.bakersfield.com/homicidemap/

Berkeley CA Crime Log
Unknown
ChicagoCrime.org-style interface with multiple pages of Google Maps
http://berkeleyca.crimelog.org

Bloodhound
Northwest Florida Daily News
Google Map with color-coded markers, filtering options and text from police reports
http://www.nwfdailynews.com/crimemap

Boston Crime
Boston Online
Violent crime map with nice detail-view pages and ability to comment
http://www.universalhub.com/crime/

ChicagoCrime.org
Adrian Holovaty
The original gangsta that started it all
http://chicagocrime.org/

Copenhagen Crime Map
Features a beautiful fullscreen map of crime data. This is one of the most visually engaging crime maps.
http://www.dognrapporten.dk/

Crime in D.C. (Washington)
Some guy called Tom
http://www.crimeindc.org/

Crime Watch Newport News
Daily Press (Newport News, Va.)
Searchable database and interactive map with way cool tag cloud features
http://dailypress2.com/crime/nn/

Delaware Crime Map
DelwareOnline/The News Journal
Crime map with various search parameters and polygons delineating neighborhood boundaries
http://php.delawareonline.com/crime/

Duval County Homicide Data Search
Florida Times-Union
Uses a search-form based interface with the Yahoo Maps API. Maps homicide data only
http://www.jacksonville.com/databases/news/homicides/index.shtml

EvanstonNow Crime Map
EvanstonNow
Google map with detail record view
http://evanstonnow.com/crime/map

EveryBlock
Adrian Holovaty and company
Another Holovaty production, this time including highly browseable crime data, inspections, news stories and much more about Chicago, San Francisco and New York.
http://www.everyblock.com/

FresnoBee.com Crime Map
Frenso Bee
Google Map with multi-colored points and a polished interface
http://www.fresnobee.com/static/crime/

Grand Rapids, Michigan Crime Map
John Winkelman
Google Map of crime incidents in Grand Rapids, Michigan created via XML file
http://crime.eccesignum.org/

Houston Crime Maps
Unknown
ChicagoCrime.org-style interface with multiple pages of Google Maps
http://houstoncrimemaps.com

Kansas City Crime
Kansas City Star
A near-exact duplicate of the Fresno Bee crime map (both are McClatchy papers)
http://crime.kansascity.com/

Indy 911 Calls
Indianapolis Star
Yahoo Map of recent 911 calls with description abbreviations and nice police badge icons
http://indy911calls.com

LakelandLocal.com Crime Map
Lakeland Local, using CommunityWalk
Weekly links to CommunityWalk Google maps with unique icons
http://lakelandlocal.com/archives/crime_map/

LA Times.com The Homicide Map, Lost Angeles County victims
Los Angeles Times
An intensely statistical look at homicide information in Los Angeles complete with photos and short bios about many of the victims
http://www.latimes.com/news/local/crime/homicidemap/

Memphis Crime Tracker
Commercial Appeal
Browseable crime data with somewhat of a clunky search/browse interface. Uses the Yahoo! Maps API.
http://www.memphiscrimetracker.com

Misdaadkaart.nl
A series of searchable Google Maps using slick icons
http://www.misdaadkaart.nl/

Monitor Cuidadano
Lavoz.com.ar
Interactive crime map of the city of Corboda, Argentina (in Spanish) done using Flash
http://monitor.lavoz.com.ar/

Nashville Crime Locator
The Tennessean
Simple Google map with date search and limit by crime type functionality.
http://data.tennessean.com/v2/bin/crimeMap/display/index.php

Newark Crime
The Star-Ledger
An in-depth crime map with loads of interesting statistical graphics. Built using the ASP.NET framework.
http://www.starledger.com/str/indexpage/crime/nwkneighborhood.asp

New Haven Crime Log
New Haven Independent
Drills down deep into crime categories with multiple Google Maps, a color-based severity scale and an hour-by-hour time slider
http://www.newhavencrimelog.org/

Oakland Crimespotting
Stamen Design
A slickly designed map using Microsoft Virtual Earth, featuring a chronological slider and e-mail alerts http://oakland.crimespotting.org/

Orlando Crime Map
Orlando Sentinel
Crime map of Orlando incidents, updated weekly, with two ways to search: via Google Map menu or via ChicagoCrime.org-style browsing.
http://www.orlandosentinel2.com/data/crime/

Paso Robles Crime Map
The Tribune
Easy-to-use searchable map with crime details and IRC-channel-esque color palette.
http://www.sanluisobispo.com/553/

PhillyCrime.org
Joshua B. Plotkin with Amir Karger
Uses data from the Philadelphia Inquirer to map searchable data from 2006 and 1996
http://www.phillycrime.org/

Philadelphia Homicides
Philadelphia Inquirer
Flash-based interactive map containing age and weapon data
http://inquirer.philly.com/graphics/homicide_map_2007/

PostACrime
Gathers crime reports for various cities and actively encourages users to help catch criminals. Displays mugshots.
http://www.postacrime.com/

RichmondCrime.org
PharrOut
Uses search forms to navigate a series of Google Maps; also has an interesting crime graph generator http://richmondcrime.org/

Richmond-Area Homicide Report
Richmond Times-Dispatch
Capsio-built map of homicides in the Richmond area
http://www.inrich.com/cva/ric/databases/richmond_area_homicide_report.html

Sacramento Bee CrimeMapper
Sacramento Bee
Crime map with proximity search (nice!) and various other search criteria (funky police bee mascot included).
http://crimemap.scoopytube.com/crimemap/map.html

San Joaquin County Crime Map
San Joaquin Media Group
Nearly duplicates the navigation and look of ChicagoCrime.org (but in a darker hue)
http://www.sjcrime.com/

Seattle 911 Calls
Public911.com
Plots the latest 911 calls on a Google map
http://www.public911.com/911/seattle

Spec’s Police Blotter
Hamilton Spectator
A weekly Google My Maps map of the Spectator’s police blotter
Blotter Link (Click The Spec’s Police Blotter” link under “What’s Hot” at http://www.thespec.com/)

Springfield (Ore.) crime map
The Register-Guard, Eugene, Ore.
Google Map with hand-edited incident descriptions covering the previous week
http://projects.registerguard.com:8080/springfield/crime-map/

SpotCrime
SpotCrime
A national aggregator of mapped crime data featuring reports from nearly every U.S. city.
http://spotcrime.com/

TBO Crime Tracker
Tampa Tribune
A map of law enforcement calls using a Django-based back end
http://data.tbo.com/crime/

Toronto Marijuana Grow Operations & Homicides Since 2005
Toronto Star
Two Google Map-based plotting killings and marijuana houses with some custom Javascript in the sidebar.
http://www3.thestar.com/static/googlemaps/starmaps.html?xml=growops.xml
http://www3.thestar.com/static/googlemaps/starmaps.html?xml=homicides.xml

WashingtonPost.com LocalExplorer
Washington Post
Interactive map with very useful marker clustering and loads of other community data
http://www.washingtonpost.com/wp-srv/local-explorer/index.html

Wichita Crime Map
Wichita Eagle
Simple Google map showing the last day’s crime reports
http://projects.kansas.com/crime/

***

More geotopia in the Maps category. More lists and tutorials in the Journalistopia Tutorials category.

Roundup of Minneapolis bridge collapse interactive coverage

st. petersburg times bridge graphic Below is a roundup of links to interesting infographics, maps, databases and other types of interactive coverage of the Minneapolis bridge collapse. Also, IRE has an excellent set of bridge-related resources.