This article contains 3 images. You will find them at the very end of the article.

This article contains 10958 words.

web directions north 07 | February 6

Web Directions News

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Posted by john on 5/01/08 at 12:57 am | 1 Comment »

The social pages

It cannot be every day that a web conference closing party makes the social pages of a major newspaper. But Web Directions closing party, a fantastic night put together by Media Temple, did just that. Don’t believe us? Check out the evidence.

.

More photos of the party, the conference, the reception supported by Adobe, and the now legendary wrap up ski trip to Whistler, supported by Microsoft, at Flickr.

Posted by John on 16/02/07 at 1:32 am | 4 Comments »

Vancouver developer job

Web Directions North attendees, and cool Vancouver based company Active State are looking for developers and designers.

ActiveState, who was represented by web developers Chad Lindstrom and Brad Touesnard at Web Directions North, is now hiring web developers and web designers.

ActiveState is the Vancouver company behind Komodo IDE and other tools for web development and dynamic languages. Check out their careers page for detailed requirements and to apply online.

BTW, if you were at Web Directions North, and are hiring, drop us a line, and we’ll post your ad.

Posted by John on 15/02/07 at 8:10 pm | 6 Comments »

Presentation Slides Online

And we’re done! Thanks again to everyone who came out to be a part of it, for your support, and definitely for your understanding when things like, say, the wifi didn’t quite pan out the way we had hoped…

We’ve spent the past few days catching our breath after the close of what seems to have ultimately been a successful and well-received conference, and from what we’ve heard, a great time for everyone who came.

We’ll have a few more wrap-up posts around these parts in the coming weeks with good stuff like session podcasts, but since we’ve already got a few of them, I wanted to post the first batch of presentation slides. I’ll keep adding to this list as new ones come in, so if you can find the slides for your favourite presentation, check back here in a few days. (To those who couldn’t attend WDN: obviously many of these slides will make more sense in context when the podcasts are available. To everyone: Apple’s Keynote produces large PDFs, sorry about the file sizes.)

• The Disciplined Designer — Cameron Moll, 10.8MB PDF
• Ajax & Accessibility — Jeremy Keith, 7MB PDF
• Accessibility Feng Shui — Derek Featherstone, 2.2MB PDF
• Transcendent Design with CSS & Javascript — Andy Clarke & Aaron Gustafson, 33.1MB
• Microformats: The Big Picture — Tantek Çelik
• Microformats for Developers — John Allsopp, 2.1MB PDF
• Microformats for Designers — Dan Cederholm, 12.2MB PDF
• The inaugural “wireside chat” — Joe Clark
• Designing for Lifestyle — Kelly Goto, 23.4MB PDF
• Finding Creativity in the Design Process — Veerle Pieters & Dave Shea, 22.5MB PDF
• The Dawning of the Age of Experience — Jared Spool, 9.7MB PDF

By the way, there are around a thousand photos over on Flickr under the wdn07 tag if you haven’t noticed yet…

Posted by Dave Shea on 15/02/07 at 10:50 am | 22 Comments »

The Design Process

Note: check the podcast and download the presentations to get all the details that were likely missed in this entry.

Dave Shea & Veerle Pieters

• both independent designers, both run their own studios
• Dave designs icons, web sites, print, logos, css dev
• Veerle does about the same as Dave, but more illustration focused - has never worked for anyone else, started her own company right out of school
• creative organization: office environment, lighting, organization methods, etc. (see presentation for full list)
• having your office set up well helps foster a creative environment
• Veerle’s old office used very bright colors, because they were cheerful - being in a relaxed mood helps her design and become inspired; the colors of your environment directly affect your mood
• everyone has a different way of creating their environment - some have too much freedom
• perfect example are creative companies: pixar gives employees the freedom to do whatever they want with their workspace
• in Duoh’s new office, they have large windows, a great view of open spaces, which is very inspiring and can be relaxing when under tight deadlines; taking a break to look out the window is helpful
• Dave: working in dull environments can be a challenge, but you can make small changes to help make them better (fish tank on the desk, art on the walls, etc.)
• shared working spaces: rent a desk, get a great view, the chance to work with other creative types in person
• the café office: Dave prefers it to a hotel room, especially when traveling
• for freelancers/small studios, getting out into a shared environment, working with other people around is much better than working in isolation
• proper lighting is important - if doing print work, you need to be able to judge color chips, proofs, etc.
• in the winter, bathing yourself in light, reducing contrast between the screen and surrounding environment
• match the brightness level of the screen with your environmental lighting
• Veerle is most comfortable with lots of space to work
• Dave finds that the constant change of working environments is inspiring
• comment from Molly H.: her house is clean and neat, but her office is a mess, and she thrives in that environment
• Audience comment: talks to figurines when he’s stumped, asks them what they would do
• Audience comment: having dogs around is comforting, forces you to get out
• organizational tools: both use Basecamp, Dave uses it for personal organization as well. Veerle uses it to share wireframes and prototypes with clients, but doesn’t use it for time tracking (she uses iBiz - monitors the hours you spend on a project; also has an invoicing feature, but she doesn’t use it - Veerle & Geert are designers, so they use Filemaker to help create custom designed invoices)
• Daylite - Veerle has heard lots of good things about it, but hasn’t tried it. works with iCal and Mail
• keeping a sketchbook: Veerle uses 2 books, one for doodling, notes, etc., the other for real sketches and artwork
• Dave finds that he doesn’t use his sketchbook as often as he used to - does more within design apps directly, but misses the sketchbook every once in a while
• Dave uses iCal a lot - would be lost without it
• incoming job requests: both receive many requests, the challenge is going from a request for a “website” to an actual project description.
• consistent project types: easy to deal with, quick responses
• varied project types: more difficult to scope
• project related questions: time frame, project goals/problems to solve, existing branding material, existing wireframes
• Veerle tries to avoid jobs where the client doesn’t really know what they want - those take a lot more organizing time, wireframing, etc., and take away from her creative focus
• task related questions: site navigation/structure, number of templates, desired browser window size, browser compatibility list
• both tend to design for fixed-width rather than liquid - quotes are based on fixed, liquid/flexible designs require more work to keep design consistent
• quick Q&A about screen resolution (listen to the podcast)
• getting started: once you’ve analyzed the material from the client, coming up with inspiration for the project
• getting inspired: hardest thing to do - Veerle likes to browse CSS design galleries, or look at books, Flickr - finds inspiration in many places. doesn’t always get the entire idea, but some guidance, color schemes, or just a direction in which to head
• music as inspiration: sometimes totally blocking yourself off from the world can help (but phone calls still have to be answered, there are still distractions)
• looking at others work and transform them into new ideas
• “Good artists copy; great artists steal” - Pablo Picasso
• gradual inspiration - don’t have the total design in your head
• start with a header on a website, then start thinking about the next step
• eventually it all comes together
• look at a blank slate and think about the many different directions you can go
• creativity limits: restrictions in scope make it easier to come up with ideas
• self-imposed restraints can also help - give yourself restraints that a client might normally give you, and use those throughout the process
• acting out the interaction: Dave as “the client”, Veerle as “the designer” (listen to the podcast for the full experience
• client contacts designer (RFP request)
• asking basic questions of the client
• responding/sending the quote to the client
• approval on the quote from the client - pre-payment is requested
• on budget questions: Dave finds that asking “what’s your desired budget range?” results in more favorable responses than “what’s your budget?”
• design feedback from the client
• this experiment gave Dave the chance to feel like a client, and experience some of that side of the relationship
• discovered differences in the way Dave/Veerle handle proposals - Dave takes lots of time for discovery and sends proposals selectively (and his tend to be longer); Veerle sends proposals quickly and often, and typically uses a shorter proposal format
• Audience questions (listen to the podcast)
• presenting mockups: 1 vs. 3 - both Veerle and Dave prefer to present one design direction - the process involves considering and rejecting many ideas on your own before the client sees the design
• often, the degree of “polish” in your comps affects the type of feedback and the expectations of the client (finished-looking comp results in very narrow feedback, sketches result in more feedback about high-level functions and features, etc.)
• working with developers - top-down: not ideal
• having to work with developers who aren’t familiar with web standards = more work/effort
• iterative process works best
• templating languages: good, if you know how to use them - they provide a connection between the underlying logic of an application and the design/front-end layer, and allow you (the designer) more control without having to really learn how to develop apps
• working remotely: trust issues - clients may come to you based on your reputation, but they don’t know who you are
• communication methods - our industry requires working across timezones, using applications like Skype, IM, email, Basecamp, etc. to communicate
• audience Q&A (listen to podcast)
• proposals: at the top of Dave’s, he has a summary box: problem (what the client needs), solution (what he’s going to do for the client), then the methodology - states number of rounds of feedback; client can buy additional rounds of feedback based on an hourly rate, and if they still aren’t happy after those rounds, they can find another designer and vice versa.
• horror stories (listen to podcast)

Posted by Dan Rubin on 14/02/07 at 1:58 am | No Comments »

Old Media, New Technology

Transcribed by Patrick Haney (patrickhaney.com)

Note: check the podcast and download the presentations to get all the details that were likely missed in this entry.

Craig Saila

• how many people have read a newspaper? (laughter)
• who pays to read a newspaper? (3-4 people in the room)
• parents (30s to 50s) read the paper
• where I came from: journalism, editing webzine, editing business magazines, Canoe Money
• bias on newspapers (primarily national papers), viewpoint is (very) Canadian

Newspapers: the first 300 years

• Gutenburg to the first newspaper, The Times of London, the telegraph, Reuters established and first photos
• The Victorian Internet (dissemination of information) on the history of the telegraph
• appear in newspapers in 1880

Newspaper: the next 100 years

• USA Today was newspaper’s reaction to television
• November of 94 strike of the Newspaper Guild in San Francisco
• 18,000 recognized newspapers

• Broadcasting: Fast Starts
• History of radio to television to online
• How many people are Canadian?
• CBC experiments with FTPing audio files, pretty revolutionary for the time
• GNN, O’Reilly created
• Screenshot of GNN
• First banner ad on Hotwire (”Have you ever clicked your mouse right HERE?”)
• CBC begins streaming radio with Real Audio, 16 Canadian newspapers are online
• Taking the emphasis off of the newspaper with online journalism
• The Globe and Mail offered discussion forum, and Canadian PointCast (pushing out of news, similar to RSS, similar to a screensaver)
• PointCast Canada had 150,000 subscribers in February of 1997
• CBC sends first online journalist to cover federal budget
• Mergers and convergence of AOL and Time Warner, Bell Globemedia

September 11th, 2001

• News sites, blogs, search
• People looking at online news as a serious medium
• Very key event
• Online traffic increased, servers swamped
• News sites strip down design to reduce the bandwidth required
• Making pages more efficient, removing ads
• Just posting actual facts
• Bloggers offered eyewitness accounts, photos, and information
• Offering up links to what was going on
• Blogging exposed as a genuine form of expression to mainstream media and mainstream audience
• Google traffic patterns happened, they offered up news to what was going on
• Cached copies of everything
• Direct result: Google News
• Post Bubble Breath
• Web developers who are unemployed and self employed
• Interesting experiments with RSS and AJAX
• 62% of Canadians are online every month, 57% of Americans
• North Americans spending more time online than with newspapers
• 7% of ad buys were online in 2006
• Looking at registration and paid content
• Targeted audience by registering
• Ads that are directed towards users
• Downsides include personal information that changes, no longer applicable
• Unique loyal visitor growth has flat-lined
• Pay Per View content (subscription)
• Buy an article from New York Times (renting the articles)
• Full subscription access, some content for subscribers only
• NY Times generates $10 million on 600,000 subscribers
• Many users don’t pay, get information elsewhere
• original content is behind pay wall
• Online readers aren’t ready for subscription model
• Pricing is determined by offline business needs and not necessarily what users expect on the web
• Newspaper subscription and online subscription have to be competitive
• Long tail model is ignored
• Try adopting what has worked in the past
• Blogs are unbelievable successful
• Newspaper mentality integrating into blogs is a struggle
• Ethical issues, style rules and oversight are issues
• Blogger is limited to linking to things due to newspaper rules
• Hub and spoke idea is no longer working, people are visiting story pages directly
• Readers encouraged to explore the site with newer story pages
• Dave Winer introduces RSS to mainstream in 2003
• Forums: Concept of reader commenting on journalist’s work was scary; creates a “citizen-powered” site
• Registration of forum users creates more security
• Most common commented stories gives users and bloggers idea of the most popular stories
• Emotional attachment to a site created by allowing comments
• Community grows due to this
• 50,000 comments a month, peer pressure to keep comment quality up
• Editors get complaints about censorship, but things are usually wide open
• Podcasts: Newspaper journalists tend to write since they usually have squeaky voices (not always, but…)
• People can skip through the ads, no one knows how many people have listened to it
• Video has gone huge
• Advertisers love it because it’s like TV and they can drop ads in
• Google and YouTube merger
• Expensive to produce, limited content, low quality video
• Need to still figure out a way to deliver video over the web effectively
• Web video does not TV
• Successful videos on YouTube tend to be short, not long like TV shows
• Advertisers struggle to figure out where to put ads in videos
• Before, you get bored… after, you skip it
• Experimenting with giving users a quick video break and putting ads in the middle
• Customization
• Early versions of My Yahoo
• Over slow modem, moving bricks around, causing reloads
• Version 2 does things much better with AJAX and less reloads along with better internet connections
• 1 or 2% like to customize any application typically
• How do you make money off of personalization?
• Personalization (getting something relevant to you) and Customization (moving bricks around the page)
• Newsbot is hovering along
• Crowdsourcing, Newsvine model
• Friends are interested in similar things that I am, and vice versa
• Best model for personalization
• Big problem is media’s fear of loss of authority
• Devaluing the value of what they’re offering as the news
• Friends recommending the news, not the editors
• Advertisers still want large ad buys
• Media’s Problem: Audiences are going online for news, revenue per user is much lower
• mainstream media “gets” the web
• Many newspapers are having online journalists and traditional media working together
• New technologies are harder for most to understand
• Current ad purchasing trends are still for large ad buys
• People are spending more time on the pages, new ads are not being displayed
• Click through rates are declining dramatically
• Advertisers aren’t seeing the real problem
• Old revenue model
• Question: “Wondering why advertisers are sticking with old model? Why do they think the click through model is valid?” Aaron says “worked for an ad agency, sold my soul” “the fact that the data is there to collect information, they continue to do it. But they’re starting to realize what’s going on.” Craig: “Change is happening, movements toward other methods.”
• News is now officially a commodity
• market has fragmented
• 4 newspapers available down the street, online news can come from anywhere
• What’s It Mean?
• media will adopt or purchase trends and move them to the mainstream
• Newsvine, del.icio.us and digg being exposed to mainstream
• Advertisers are accustomed to how to sell these new technologies
• Smaller media outlets begin to suffer
• Fragmented media causes them to become even smaller
• salia.com
• Question: “Local papers are sort of suffering the same thing. Addressing by changing focus editorially with names” “Will that effect national newspapers doing a local edition, driving up print sales?” Craig: “Holding onto print because it’s the brand it knows. Don’t know that much about local scene. Don’t have direct answer.”
• Question: “Thoughts on NowPublic, local company.” Craig: “Interesting organization. Problem in Canada is critical mass, getting everyone online. They’re branching out to India to generate more content. Uptake is always been a problem. Need a lot of content coming through.”
• Question: Andy Clarke: “How do companies feel about the rise of this sort of online media?” Craig: “they don’t fully get it yet”
• Question: “How much can people read online before they give up?” “How many Canadians read the news online?” Craig: “the bulk of them do. more of them read online than read traditional papers, no hard numbers though.”
• “journalism right now is broken”
• Not issues of credibility, not story selection, not political bias, not declining circulation or stock prices, not loss of classified revenue due to Craigslist
• We gather so much information, and throw it all out (journalists)
• “What’s the latest?” Cop talks about burglary, address, time, what was stolen
• reporter rights it down, key value pairs
• Goes back to news room and writes it into a big blob of text
• Takes nice clean data and puts it into a big block
• Why is that a problem?
• It’s like tag soup
• Comparison to HTML and an unordered list
• Markup information
• same philosophy applies to journalism
• Information is mixed together and clarity is lost
• Journalists need to start adding value in this way with semantics
• Journalists need to separate presentation from content in news stories
• Back issues: so many issues, they’re back there in history
• Why? Makes data reusable (reuse styles like in CSS)
• Allows for automation (journalists know next to nothing about automation)
• Computer can do a lot more with narrowly defined information than with a big block of text
• The tragedy: news organizations have a fantastic infrastructure
• People going to sports events, political events, etc.
• So many data gatherers due to this infrastructure
• Copy editors and people to verify information
• Mechanical infrastructure to get information out to people
• They don’t take advantage of it by leveraging the data
• Spitting out tag soup and not doing anything cool with the data
• Contrast to this, Wikipedia, Craigslist, Flickr/del.icio.us
• Traditional media has great data desperate for a framework
• What kind of data do journalists collect?
  • Police and crime: Journalists report about it, write about it, all the time
  • Sports
  • Real estate data
• Not so obvious examples
  • Obituaries
  • All sorts of things in common
  • Who died, how old they were, where their funeral is
  • Data points lost in big block of text
  • Weddings
  • Lots of interesting information about couples and individuals
  • Data not being browseable
  • Birth announcements
  • Government data
• Information is mind-numbingly the same
• Guantanamo Bay has a lot of granular information (Washington Post)
• Gathering information about where the president travels but not doing anything useful with it
• Births for a given day on an online newspaper site
• Explaining in it a block of text
• Not able to browse by any data set
• example: New York Times - Recent helicopter crashes in Iraq (block of text explaining what happened with a lot of repetition)
• NICAR: National institute for computer-assisted reporting
• Compile data and sell it to news organizations
• Getting raw data, but not actually doing anything but creating a big blob of text, which is pretty stupid
• Why are journalists so dumb
• They don’t understand technology
• You don’t go to journalism school to learn about separation of content and presentation
• You learn about writing or being on TV
• A class with a unit on combing your hair, for example
• Newspapers and journalists are not innovative
• Horrible CMSs
• Don’t know HTML, just use CMS to past data into a big blob
• Not conducive to doing anything interesting with separation of content and presentation
• Arrogance
• Personalization? Our job is to tell people what’s important
• Our job is to collect information, not to give it out to do cool things with it
• There’s more to news than deciding what’s important (ie. digg)
• Examples of non-tag-soup journalism
• war in Iraq, people dying almost every day
• Washington Post writes articles about Iraq
• Each has little statistics that are interesting
• They have a spreadsheet of casualties and stats
• But only using this data to throw a few numbers here and there
• ojects.washingtonpost.com/fallen
• Casualties in Iraq
• Using data to display information on soldiers
• Pictures, hometown, family, information
• Google map integration of where they were from
• Link to family tribute pages on Blogger, etc.
• Browse by age with graphed data on all casualties
• Get information on age, by state, etc.
• Every state gets an RSS feed
• Sounds morbid, but people are interested in keeping track, reminding everyone with updates daily
• Not just writing a blurb and doing nothing with the data
• Take the extra step and put data in a database
• Already collection the information, taking a few extra seconds to put it into a database to automate the site
• Video Game Reviews
• Similar philosophy
• Classic way: click a headline, read a review
• Parse with eyes to find interests
• Instead, browse by name/platform/year/category
• Find $51-65 games
• Get full review with tagged/linked data
• Everything that can be linked, should be linked
• Not sure why someone is interested in this page, link out to all information
• lawrence.com: Every band has its own page
• Database every fact
• Type of music, where they formed, musicians have individual records in database
• Browse through all the data
• Had information, now just opening it up to users
• Events calendar with cool database underneath
• Offer up drink specials at event locations (most popular part of the site)
• Restaurant search with obscure things (buffet? locally owned? Type of payment?)
• If you’re taking the time to get the information, do something cool with it
• Featured audio page that highlights audio on site
• Added spontaneity to page by showing audio clips by bands that are playing soon
• Mobile version with drink specials, movie listings, events, restaurants open right now
• they type it into a computer at some point
• Local little league, same philosophy
• Treat them like the New York Yankees
• Gave every team its own page with full schedule
• Every league, every field with own page
• Sign up to get SMS about game being rained out
• Stuff that’s already being collected, going to the next level with it
• KU Graduates
• List of all the graduates, high school and higher
• Show all people from given home town, etc.
• automated information retrieval
• US Congress Votes Database
• Updated 9 or 10 times a day, automatically
• Every vote gets its own page with detailed information
• Even astrological sign
• Full voting record of individuals
• RSS feed for every member of Congress
• Getting more interested in local politics after being notified of votes
• Spend no time maintaining the site (screens scraper grabs vote information from elsewhere)
• Goes through biographical information to get person’s information
• chicagocrime.org
• Old school Google maps mashups
• Browse through crimes that happen in Chicago on a map
• Mob action page
• Click on crimes and get detailed information
• A lot of links to other pieces of information (don’t know what people are interested in)
• Crimes by street blocks with map and information about it
• RSS feed for crime in your block
• Nearby crimes feature with GIS information
• Use Google Maps to center on area and find out district
• See crimes by hour/day/year
• Pretty URLs: “Because if they’re not pretty, they’re ugly.”
• Question: “Feeling that this is ethically frightening. Are you being approached by ethical groups about this and its impact?” “People don’t tend to have that reaction. Journalists need to write the whole story, which is important. Associating crime information with an actual story. But it’s tough to get access to.”
• Joe Clark rants.
• Question: “Excited about this, but does the Post have any reservations about offering up the information and having someone else jump on it and use it.” “People at The Post are very competitive, and some people are hesitant about the information. Don’t want competitors to use data as well.”
• Concepts have URLs (in a taxi, at a barbershop, etc.)
• Walking route crimes
• No time spent on maintenance
• Citizen iCam site in Chicago has data
• Data is searchable with a map
• No real information was being offered up
• Raw data is screen scraped from site
• what’s the difference between the official police site and chicagocrime.org? (other than gradients)
• Journalist is transcribing what police officer is saying
• Same concept: collecting information and offering it up
• so what IS journalism?
• simple wrapper around the messiness of today’s world
• human consumed API to current information
• lose the tag soup so we can do cool stuff
• Question: Aaron: “where do you draw the line in terms of a layer of abstraction?”
• Question: “does it generate revenue when you do something like that?” “argument I would give is that making data browseable leads to richer experiences which leads to more page views and then more revenue”
• Question: “what are you doing to provide an API, microformat so people can do their own thing?” “Would love to have APIs to do all this tuff. RSS feeds. Condone reuse of content, make your own mashups. It’s only RSS feed at this point. It’s just a matter of time. Other people at the Post are also open to it.”
• Question: “model that might be helpful is Bloomberg with news and data collection. Do I want information about me used to decide what advertisers use for targeting me? How do we keep the balance?” “I don’t know.”
• Question: “Observation: journalists are information gatherers. Labeling people as content creators or platform managers.” “kind of dehumanizing because your job is to gather information. People wouldn’t be happy about doing that, it’s not very fun. Being able to write the news story is your incentive for gathering the information in the first place.”

Posted by Dan Rubin on 14/02/07 at 1:58 am | 2 Comments »

Microformats - More Than Just Promise

Note: check the podcast and download the presentations to get all the details that were likely missed in this entry.

John Allsopp - Microformats for Developers

• probably the first 3 hour session on microformats
• if you’re an HTML developer, none of this is going to be really new - just the application

Part 1: know your microformats

• XHTML Friends Network (XFN) - taking the existing practice of linking to friends, associates, etc., and giving them more context (e.g. John links to Taktek on his site, adds rel=”colleague met friend” to the <a> element, signifies that Tantek is a friend, colleague and that John’s met him)
• XFN provides a “controlled vocabulary” for describing relationships.
• tools exist: XFN Creator, WordPress (built into “add links”), missed the rest, check the presentation
• hCard
  • hCard example: cambodian yellow pages
  • what is hCard? a simple, distributed format for representing people, companies, etc. - a 1:1 representation of the properties and values of the vCard standard - uses an existing standard rather than inventing something new
  • how do you use hCard? add vCard field names as class values on any HTML element
  • microformats use existing markup
  • compound microformats have a root element - hCard root elements have the class value “vcard”
  • most things are optional in the microformats standard
  • hCard: Names (formatted names and optional structured names)
  • class and rel can have multiple, space-separated values, and this is used extensively - e.g. class=”fn n url” - formatted name, name, and “a” url
  • hCard: Addresses (street-address, locality, region, postal-code, country-name)
  • the “adr” construct is so common, it is actually a microformat itself and can be used separately
  • all sounds a bit hard? hCard Creator, Dreamweaver toolbar, plugins for TextPattern and WordPress
• hCalendar - a simple, distributed calendaring and events format
  • how do you use hCalendar? add the semantics of iCalendar using classes
  • hCalendar root elements have the class value “vcalendar” (the old name for iCalendar)
  • again, using values from the existing standard and using them for class names
  • date and time - uses ISO8601 date time standard, plus the abbr design pattern, and the properties of hCalendar to add a start and end date and time (machine readable)
  • abbr design pattern - Date format = YYYYMMDD or YYYY-MM-DD; Time format = Date format + T + hh:mm:ss + (+/-TZ) - seconds and Timezone are optional
  • e.g. today’s Date format: Feb 7th 2007 is 2007-02-07
  • using the element, the machine readable part is in the “title” attribute, the human readable part is within the element
  • hCalendar also enables marking up other properties, such as urls, locations, participants (attendees, organizers, etc.)
  • lazy? tools include: hCalendar Creator, Dreamweaver toolbar, plugins for blog tools, etc. (see microformats wiki for links)
• hReview - used for embedding reviews
  • how do you use hReview? no existing specification to model after, so a combination of common conventions is used, also reusing other microformats (e.g. reviewer is embedded in an hCard)

Part 2: engines using microformats

• technorati microformats search indexes microformatted content, supports hCard, hCalendar and hReview
• Pingerati - notify Pingerati of new or changed microformatted content to distribute/update any services that use it as their central repository
• edgio aggregates classifieds from around the web, including those marked up in the draft hListing format

Part 3: publishers using microformats

• Flickr - geocode uses microformats
• Yahoo! Tech uses hReview, hCard
• Upcoming uses hCalendar, hCard
• LinkedIn uses the draft hResume format
• microformats aren’t hard, and aren’t a gamble - Firefox team is already talking about incorporating microformat features into FF3, lots of industry support, plus extensions like Tails for FF
• blog: http://microformatique.com
• book: Microformats: Empower your markup for Web 2.0 (friends of ED, coming in March)

Dan Cederholm - Microformats for Designers

• focusing on the visual side of microformats: styling microformats with CSS, the microformats logo, cork’d etc.
• what Dan hears a lot of: microformats are: confusing, a waste of time, something geeks do with a lot of time on their hands
• microformats spread by word of mouth - I markup some data this way, then someone else does, and so on…
• use what works today
• we’re not waiting around for organizations to get their act together, we’re using things like (X)HTML that exists today
• XFN example: uses rel element; XFN + CSS: use attribute selectors to style
• “ignore everything I’m saying, it doesn’t work in IE ”
• e.g. use CSS attribute selector to assign different icons in a list depending on relationship
• Wolfgang Bartleme’s microformat icons (url?)
• right off the bat, microformats are easy to style with css, and are semantic
• why *wouldn’t* I use them? no good reason not to
• the logo - download the presentation to see the progression of the design
• hCard styling example: using the technorati contact service, and hCard on your site, you can allow users to automatically import your contact data
• hCard Creator - really valuable for someone who thinks visually - all the classes/markup is there, and usually you don’t need extra markup.
• Just because the creator generates divs and spans, doesn’t mean you need to use those elements
• Keep in mind: use the most appropriate element available, div and span as a fallback, don’t worry about block-level vs. inline
• (see presentation for example of styling an hCard and live examples)
• Cork’d - microformats are used throughout, e.g. hReview, rel-tag for “tasting tags”, hCard for profile information
• (see presentation for example of styling an hReview)
• oblivious development - examples of developers extending site functionality based on microformats, extending cork’d without a public api existing (”accidental api”)
• references Drew McLellan’s “Can your website be your api?” presentation (link?)
• microformats work together - when you start combining microformats, you discover they are even more useful
• what good is one brick? but multiple bricks can build a wall…
• exposing microformats - e.g. John Hicks’ user stylesheet for styling microformats, microformats bookmarklet, operator extension for Firefox, Tails extension for Firefox
• Audience question: is there a way to limit access to microformats to people you trust? Tantek’s answer: microformats aren’t about access policies, but about consistent formatting. The site using the data determines the level of access to visitors, the same as any other data on that page.
• Audience question: what kind of sites are aggregating microformat data right now? Tantek’s answer: a bunch of sites, check on the microformats wiki (on the kreview-implementations page) for an up-to-date list
• Audience question: what are some existing standards that may be on the horizon for microformat implementation? Tantek’s answer: there’s interest in citation (brainstorm proposal exists) and media info (no proposal yet)
• Audience question: how concerned should developers be when working on a production site, about draft specifications changing when they go final, breaking early implementations? General answer: there’s already concern about forward compatibility, and there is something in the specification about retaining backward compatibility after a certain point in the development of the specification. If you’re depending on being aggregated, be more mindful of the changes that may occur when I microformat goes from draft to final.
• Audience question: can microformats be integrated with RSS feeds? is it normal? Tantek’s answer: yes, but there’s no real magic - microformats are just HTML, no voodoo. Use hAtom to mark up your blog posts and you just use one format in your HTML.
• Audience question: how are the naming conventions developed? Tantek’s answer: some use existing standards, others use logical, contextual property names. Root names define the scope, child properties are more generic and thus more flexible.
• check podcast for last few questions (inaudible from the back of the room)

Posted by Dan Rubin on 14/02/07 at 1:58 am | 1 Comment »

Web Apps - Ajax Kung Fu Meets Accessibility Feng Shui

Note: check the podcast and download the presentations to get all the details that were likely missed in this entry.

Jeremy Keith

• jeremy = john the baptist, derek = jesus christ
• “AJAX” is just a word, but that’s ok - it’s a good buzzword (it saves time to describe something that would otherwise take longer to say)
• problem is AJAX gets associated with another buzzword that decreases its importance (”2.0″)
• term comes from JJ Garret/Adaptive Path
• AJAX gives the illusion of speed
• “Ajax is a way of communicating with the server without refreshing the whole page” - Jeremy Keith
• the important bit is “communicating with the server”
• Ajax isn’t: DHTML, DOM Scripting - you can do cool things with them, but they don’t communicate with the server
• AJAX: Asynchronous JavaScript And XML - more a “backcronym” because he came up with the word first
• isn’t really a good acronym, because the point is asynchronous communication with the server
• other things that could, based on the definition, be described as Ajax: Flash, frames, iframe (because they all communicate with the server without refreshing the page)
• XMLHttpRequest is what most people mean when they say Ajax
• it’s one thing to define Ajax, another to define accessibility
• one way: universality - access for any user agent (anyone can access your content)
• another: progressive enhancement (begin with the content, add structure, then presentation, and finally behavior)
• content, structure ((X)HTML), presentation (CSS), behavior (Ajax)
• problem is that most web apps these days are built Ajax-first (users without JavaScript don’t get the content)
• example: Amazon’s rating system (your selection is stored without refreshing the page, and a great example of Ajax - creates illusion of speed)
• another good example: Flickr (editing the title of a photograph - enter title in a form, form processes data without refreshing the page; allows you to complete a task faster, without waiting)
• yet another example: Google Maps: dragging maps
• and yet again: meebo (chat client in the browser, all Ajax)
• Ajax implementations are on a sliding scale: from simple documents to complex applications
• in Jeremy’s opinion, Ajax is better used for things at the document end of the scale - makes it easier to use progressively; complex applications make it more difficult to provide access to the content because of the amount of reliance on Ajax
• if you’re planning to make an app that isn’t accessible, look to Flash and similar technologies instead of Ajax
• in communication between the browser and the server (thin client, classic model)
• with a fat client, the front end (browser) does a lot of the processing - not a good idea, browser support issues, unstable environment; if you have the option between processing on the browser or on the server, choose the server
• traditional web is like a self-service restaurant: you get your food, sit down, get up again for more food, etc. etc.
• Ajax is like getting a waiter for your web site: you raise your hand, the waiter comes over, takes your order, gets your food and brings it to you - if you’re going to add a waiter to your web site, use a “dumb waiter”
• enter Hijax - applying progressive enhancement to Ajax
• Hijax model: build a traditional web site, where the entire application and site works normally: page refreshes, etc.
• to the user, the browser seems to be doing all the work (”deceptively fat client”), even though it is all occurring on the server
• if you want to build an Ajax application, start without it, and add the Ajax after the fact
• example: Jeremy shows an example of a music shopping cart, allowing shopping cart additions and ratings without any page refresh
• rather than sending a full page, hijack the individual parts of the page you need to update - the whole page will continue to work without Ajax, without the illusion of speed, but will still function
• rule/paradox? plan for Ajax from the start, implement Ajax at the end
• classic example of communicating with the server with Ajax: forms - log on, comment, add to cart,
• example of a contact form: validation appears to happen in the browser (ala JavaScript), but is actually happening on the server. Logic remains on the server, JavaScript is just a dumb waiter, shuffling the data back and forth, but not touching it otherwise
• another example of when to use Ajax: links - rate this, table sorting (temptation is to do it in JavaScript, but you don’t have to - you can do it with DOM Scripting, but letting the server handle it is much better)
• don’t worry about extra server load - if your complaint is that too many users are using your system, that’s a good complaint: you can increase server load, improve queries, etc. (vs. fixing a user’s browser, or a user that doesn’t have JavaScript, etc.)
• be careful about using interactions such as: drag ‘n’ drop (if you’re going to borrow such conventions from the desktop, you can’t do it half-assed - be prepared to do a lot of work to mimic the interaction)
• another to be careful about: mouse over (e.g. Snap previews - mousing over a link shouldn’t initiate an action)
• be careful about going beyond traditional web interactions with Ajax
• “WTF?” Ajax is scaring people - you have to tell the user what’s going on, so they know something’s happening (borrow conventions from Flash developers, they’ve been dealing with the same issues for years)
• also need to tell users what just happened - e.g. yellow fade technique ala 37signals
• must think beyond the browser: traditionally, the browser tells the user something is happening or has happened (browser logo spinning, progress bar, etc.) - with Ajax, you have to notify and communicate with the user
• don’t make assumptions about users: test, see how users interact with your UI choices, and improve it as needed
• universality is easy - access for any user is harder, and is accessibility
• Audience question: mousing over can be useful (e.g. book details when mousing over a book title) - Jeremy’s answer: depends on context, and such interaction can be useful, but he still prefers clicking on a link to initiate interaction
• Audience question: it’s easy to say that processing on the server is better, but in the real world, latency and other issues may make for a sub-optimal user experience. Jeremy’s answer: that’s the point of communicating with the user, telling them what’s happening - it’s a design issue, but there’s still a benefit to the user in that they can still interact with other parts of the page while one area is busy communicating with the server
• Audience question: regarding JavaScript libraries (general question). Jeremy’s answer: they can be used for good or for evil, and can be used for very powerful things - should be used responsibly, and not without understanding. If you use a library to save time, but you still understand how it works and what it does, that’s a good approach

Derek Featherstone

• start with a brief history of Ajax and Scripting
• early .Net: postbacks, bad for accessibility (posting things to the server without updating the page display)
• in early days of WCAG, JavaScript was either on, or off
• problems with screenreaders and Dreamweaver-created JavaScript prompted Derek to dig into the incompatibilities between older screenreaders and scripting
• at the time of WCAG 1.0, the concept of pages working with JavaScript on or off made sense - Derek prefers a different approach now: when JavaScript is on, make sure content is still accessible
• What about Hijax? The approach is great, but is it enough? How does it fit into making accessible web applications and sites for today?
• example: Chapters (Canadian equivalent of Amazon) - did a massive redesign 2 years ago and it was horrible. No semantic structure, tag soup, everything that could be bad, was. Have now redesigned, using CSS, (X)HTML, tagging - shows example of their “what’s this” link, that works with JavaScript, loads a separate page without JavaScript, but link fails in a screenreader (what’s the best way to address this kind of situation? maybe Hijax isn’t the best solution for everybody)
• Are you a web site or an application?
• Shows example of a job postings site, login form is hidden within the clutter of the page. Remember the purpose of each page.
• use model similar to Jeremy’s - separate content from presentation from behavior
• examples: edgeio, basecamp, air canada (check the podcast, examples/discussion too complex to present here)
• book reference: Designing the Obvious (Robert Hoekman, Jr.) - good for coworkers who don’t “get it”
• example form: username, email address, first name, last name - “username” is the label, plus emphasized text within for more information (same thing with <strong> for error messages). Screen readers will associate the message with the label/field. If a screenreader user leaves one field, goes to another, and returns to the previous field, they will receive updated content (e.g. Ajax), but involves counter-intuitive user action
• Audience question: for a web developer, what screenreader should be used for testing? Derek’s answer: none of them. Take the money you would spend and use it on user testing, it’s much more valuable.
• example of page updating in JAWS 7 - innerHTML vs. Ajax (listen to podcast to hear the example)
• example: username field, checking for availability - what would a screenreader user expect the button to do? Load a page - in this instance, since the page isn’t reloading, take the user to the part of the page that displays the error or success message
• more examples that are difficult to describe…
• the future is emulation - example: xhtml2:role= “alert” - things like this will allow easier communication with screenreaders
• Audience question: is there a better language than (X)HTML to offer visually impaired users a more accurate description of the web? e.g. most of us don’t surf the web using “view source”. Derek’s answer: there are things being worked on, and maybe something other than HTML would be a better solution, but also 95% of the web is crap, and screen readers still have to deal with that.

Posted by Dan Rubin on 14/02/07 at 1:58 am | No Comments »

Keynote: The Dawning of the Age of the Experience with Jared Spool

• study how people interact with technology in ‘98 started workig with web stuff
• this is a snapshot of where we are in a multi-year project
• talk about the sansa sandisk mp3 player, they think it has what it takes to take on the industry
• two people in the audience only have a sansa. all have or know someone with an ipod.
• itunes, apple has turned ipod into a fashion statement
• apple has turned the ipod into an experience
• have sold over 2 billion songs
• hadn’t sold a song 4 years ago, now #1 online retailer.
• #6 music distributor
• sold more than 2 every second last christmas season
• noticed by wall street. everybody wants to be the ipod of the industry.
• blockbuster allows you to have movies mailed to you… but #1 in the industry is Netflix. Have 6 million members.
• Netflix use metrics, surveyed, many started up due to hearing it from friends and family
• 93% of subscribers say they evangelize Netflix to friends and family. Only interface is the web site. no stores.

Experience Design Disasters

• $100 million on a design that lost 20% in revenue
• lawyer firm lauched new intranet with sharepoint and employees revolted.
• sharepoint is a very powerful application. like friend dropping you off at Home Depot and telling you “everything you need to build a house is here”
• successful experience design = integrates the user and the business
• for about six weeks there’s no way to tell the gender of a chick. there are some people who can tell with about 97% in about 2-3 weeks. These people are called Chicken Sexers.
• standing next to other sexers, you’ll everntually get up to a 90% accuracy.
• like WWII plane spotter or a sushi chef
• Successful Experience Design is learned yet not open to introspection
• nobody mentions the social networking or the ajax or the info bubbles about what they love about netflix
• Successful Experience Design is invisible

Experience Design

• copywriting, IA, Iteration, Usability Practices, Interaction design, Information Design, Visual Design, editing
• ethnography, domains, analytics, marketing, business knowledge, ROI, social netowkrs, technology, use cases,
• Successful Experience Design is Multi-Disciplinary
• (example showing diagram of aneuryism
• (example from FEMA)
• Successful Experience Design is Cultural
• Components: Communications
• clear vision, focus on vision. (what do we want the experience of using our stuff to be like in 5 years)
• Good feedback loop; fast iterations, need to have the right people involved.
• Design / Use (circle)

Making fast iterations happen

• don’t do major redesigns, design challenge into small chunks
• too much risk redesigning the whole thing
• emphasis on feedback mechanisms (select as much infromation as possible) can’t get it from the logs, get it from people who actually use the site
• bad design happens from misinformed designers.
• get everyone involved - decisions happen everywhere

Approaches to facilitiating experience design

• consulting approach - design team can only handle a small number of projects
• review and improve - makes design team into a bottleneck preventing progress
• educate and administrate - entire organization focuses on successful experience design
• (avis example) use of asterisks to denote optional

Successful experience design

• integrates user and business
• learned but not open to inspection
• invisible
• multi-disciplinary
• cutltural
• still learning - and we’re getting better everyday

Posted by Jonathan on 13/02/07 at 11:22 pm | 3 Comments »

Mashups

Some audio troubles in the beginning. Sound was coming in from another presentation. An audience member exclaimed, "it’s a mashup!" Laughter ensued.

Presentation by Steffen Meschkat, Kaitlin (Ducky) Sherwood

piece of web 2.0 technologies,

• designed to combine code and data from different sources into the same application.
• reuse
• recombination
• leverage for scalability (Ajax applications)
  • You don’t have to build your own backend to maintain the size of data and the bandwidth required to host these complex applications

Reuse

The difference between theory and practice: In theory, there is no…

• .50s: algorithms
• .60s: programs
• .70s: libraries
• .80s: components
• .90s: patterns
• .00s: services

Recombination

• Web 1.0 (IMG, FRAMESET, IFRAME, APPLET)
• Web 1.5 (RSS, XML, Server-side web services in HTML Applications, portals)
• Web 2.0 (JSONP, Browser-side web services in Ajax Applications)

Mashups 0.1

• IFRAME
• Java Applets
• Ads
• Foreign source fills a rectangular screen name

Mashups 1.0

• APIs - provide behaviour
• Services - provide data
• Use (ie. abuse) vintage web technologies
• Most centrally, cross-site services and libraries
• Foreign source implements the semantics of specific elements (eg: microformats)

Cross Site Script (XSS) Restrictions

• Script in a page cannot access data from another site: no windows, IFRAMEs, XMLhttpRequests, Cookies
• Script can send requests to another site: dynamically load IFRAME, post FORM, load IMG
• but cannot load the response, except for more SCRIPT,
• (Note on XMLHttpRequest: the core Ajax technology doesn’t support maships)

XSS Restrictions Explained:

I have achieved two things by this: first, it solves all phili

Concepts (Maps API)

• a library of IMG tags for places
• an IMG tag with augmented behaviour
• an alternative page format for your content
• a mashup application component
• a collection of browser-side web services

Geocoding translates names into locations

"a successful technology is used for things it was never meant to be used for, and inevitably people will complain…"

More Technology Issues

• DOM (no transactions, clumsy animation, incoherent API, defined in - at the time fashionable - OMG IDL)
• SCRIPT (lexically, syntactically, and semantically not well integrated with HTML)
• Browsers: xbrowser compatibility, history, bookmarks
• Graphics: SVG, VML, PNB, CSS; Flash

compares this to pop music, allows anybody to just jump in and contribute

Mashup Business

• literally, outsourcing
• "data banking"
• "web services industry"

Conclusion

• Conceptually, mashups are just more of what the web is about all along
• Technologically, it’s a brilliant abuse of the dynamic script element
• There is much more to it, and it’s all a mess, and nothing new.
• Progress comes from innovative use of existing technology much more than from deployment of new technology.

Kaitlin (Ducky) Sherwood introduced by Jeremy Keith.

What terms do I need to know

• GIS (Graphical Information Systems)
• Framework
• Markers, pushpins, placemarks, items, points of interest
• Info windows, info balloons, detail windows, descriptions
• Geocoding (finding the lat/long of a location)

How to do a map, how to choose a framework, advantages and disadvantages

The big Picture

• you can make a map, it’s not that hard
• there are a number of maps frameworks, none of which will give you everything you want.
• frameworks get more powerful all the time (and change all the time)

who are the players

• ESRI - high end
• Open Source (GeoServer, MapServer)
  • don’t come as packaged as nicely; ugly street maps
  • they’re servers you need to set up and administer
• Google Maps, Google Earth
  • most robust of the Big 3
• Yahoo! Javascript, Flash
  • Flash API is a nice way to deal with vector data
• Microsoft
  • has a server solution and costs money

What do I need to consider in choosing a framework

• License
• Geographical coverage (changes all the time)
  • check the areas you need
  • check the api as it may not return the same info
    • licensing restrictions
  • api data not usually as detailed
• Browser coverage (MS: No Safari)
• Community
  • is there a mailing list, a wiki, tutorials?
  • Gmaps has best community
• Beauty
• Services available
• Development speed vs beauty/control

License: what can’t you do

• Illegal activities
• Things lives or property rely upon
• Remove or tamper with logos
• Sketchy products
  • basically no porn, alcohol, gambling, etc
• Restrict Access and cannot charge money
  • starting at $10,000 (with Gmaps) you can forego access restrictions
• Bang on their servers too hard
  • you’ll have to pay more otherwise
• Non-compete
• Can’t upload real-time GPS info (Y!)
• Yahoo maintains the right to audit your setup
• Google and Yahoo! require you to sign up for an application ID/Key

What services do the major api frameworks provide

• Street maps
• Satellite images
• Geocoding street addresses
• drawing on the map: markers, polygons, lines, images, info balloons
• driving directions (MS)
• Bird’s Eye vew (MS)
• Traffic (Y!)
• Business listing search (Y! and MS)
• Custom tiles (G and MS)
• Whatever other APIs they support: search, chat, spreadsheets…
• open source services

Can only get about 100 markers on a tile before it chokes

(example using custom tiles to display census information)

How do I do it?

• Data
• "Splat" data onto framework
• Javascript
• Flash*
• Server-side*

(demonstration of Y! maps using the splat technique)

(demonstration of Google Earth using splat technique)

Uses a KML file that can be used on Google Earth and on Google Maps.

decent with only a few markers but there’s a limit to the file size of the markers and the number of different markers you can use

next level up…

• using script with MS maps, looks nicer, have more control. Can do HTML for the info balloons (but doesn’t work in Linux)
• can specify the icon

3rd level of difficulty

• full-fledged application
• own background tiles
• nice info balloons
• nice markers

At an intermediate level

Google Javascript + GeoRSS

• used the same georss as the Yahoo file, but had to parse the file myself
• most work, but gives most control
• can do polygons and polylines (Y! and MS doesn’t do it)
• can do custom tiles

(went through the javascript that pulled of the GMaps example)

The future is polygon based mashups

audience question: "can you rely on the services being available tomorrow?"

It’d be very expensive for the companies to pull the services. huge PR costs.

Posted by Jonathan on 13/02/07 at 11:21 pm | No Comments »

« Previous news stories