Holly Brewer

» The latest CSS tools

2008-05-09T11:17:00.001-07:00

Check this out: the latest in CSS templating. It is a listing of common styles for reuse.

» Toolbox CSS

Also check out Meyer's resets. These ensure that browsers have the same defaults for the styles of many elements:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Google's hartija print style sheet is totally worth a look too:

http://code.google.com/p/hartija/

- and if you find CSS frameworks useful, check out Blueprint et al:

http://webtecker.com/2008/04/17/list-of-css-frameworks/

If you need to roll up your sleeves and get down and dirty and target browsers, check this out:

http://en.wikipedia.org/wiki/CSS_filter

For choosing fonts:

How many machines have certain fonts? http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Windows/Mac equivalent fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Embed fonts: http://www.alistapart.com/articles/cssatten

For working with grids:

column calculator: http://www.29digital.net/grid/

Dean Edwards' script that makes IE behave:

http://code.google.com/p/ie7-js/

Link style generator:

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/default.php?step=1

My RSS feeds

2008-04-28T22:04:00.001-07:00

456 Berea Street: Articles and news on web standards, accessibility, and usability

Alistapart (duuuuh ;-) )

Web Directions North

2008-04-14T07:05:00.001-07:00

Web Directions North

Slides from the conference

- a summary of the greats by Mark Simmonds (also at Ascentium) et moi =)

Andy Clarke – CSS, beautiful web-stuff

Workshop: Transcending CSS "For A Beautiful Web", Andy Clarke

Thought: If we don't push the edge of web design, what is the incentive for browser developers to innovate?

Wrong design approach: Create baseline that works for lowest common denominator, then add enhancements (sprinkles on top) for modern browsers. Right design approach: Build for newest browsers then degrade gracefully. Good example is TV; B&W to Color to HDTV. B&W still can watch programming, it just isn't as good.

Start building out HTML/CSS ASAP instead of bringing Photoshop comps into the process, allows for quick changes. Don’t show Photoshop/Illustrator comps to clients. They will expect site to look EXACTLY like comp in ALL browsers.

Thought: Can we pitch websites like a movie is pitched to a studio? With lower resolution comps

W3C standardizes on what browsers implement. This is the opposite of what most people think happens.

Thought: It is up to us (developers) to use the latest technologies so users have a reason to upgrade their browsers.

Don’t expect all browsers to see pages the same. Use all that’s available. Use CSS-3, training yourself for the future. Allow browsers (like IE6) that can’t use the modern styles (transparent PNGs, pseudo-elements) to degrade gracefully to acceptable-looking sites.

Use JavaScript & the DOM to plug the holes in CSS: use JavaScript to tell the browser how to render the effect in non-compliant browsers like IE6.

Use semantic markup & Microformats to create markup that is meaningful to search robots and screen readers, and can be effectively crawled and understood by them.

Organize data in semantic groupings – unordered lists, headings, etc.: and organize them in the page as is logical. Then style them to rearrange their order/structure/look. For instance, make an unordered list that contains paragraphs of text, then pull each list item out and position them absolutely to the left and then the right alternately.

Steven Champeon coined the phrase “progressive enhancement” in 2003. It is now widely used to relate to DOM Scripting, Jeremy Keith’s book.

Tantek Celik – built the rendering engine for IE5/Mac - also invented Microformats. (Trivia =) )

Semantic HTML is for machines first, people second.

In the modern web, there’s access to multiple sources and global sharing of data. Other examples of the semantic web (implementations and applications for these applications are years away):

RDF – Resource Description Framework

OWL – Web Ontology Format

Microformat implementations:

www.corkd.com - Wine reviews, contact info, relationships (xfn)

www.flickr.com - Geotagging

www.last.fm - Event info

The naming convention of microformats

Denote an hcard as vcard in html: talk about it as an hcard in reality: it’s just a way of talking about it.

Get these Firefox extensions for microformats

- operator and tails. Tails allows you to implement scripts on the in the page.

Fun selectors to use when styling using future web standards (don’t work in IE6):

Child selectors li > img – direct children

Adjacent selectors h4 + p - element follows another directly

Attribute selectors img [alt ] - element with a certain attribute

img [alt=”me”] - element based on its attribute value

a[rel=”self”] for <a href=”#top”>to top</a>

Pseudo-elements p:first-line; p:first-letter

!important overrides everything, including inline styles. Be very careful with it.

Descendant + class + adjacent - .nav ul li + li

Attribute sub-string selectors **** - new in IE7 & CSS 2.1

Box model

All elements generate a box of some kind.

Block-level elements : generate a box that can contain other elements.

IE6 treats height as min-height.

Sample of semantic markup in a form. Labels can be separate: they are just labels.

<span>your first name:</span>

</label>

</label>

</fieldset>

Expression engine is the CMS that he uses. It can be tricky.

To render page after the css is loaded, set the css to display:none, then at the end of the page (inline) have it load.

CSS3 – what’s coming – see also http://www.alistapart.com/articles/css3multicolumn

Selectors based on attribute/position, tr:nth-child(2n) – which is odd rows, type of child, etc.

Backgrounds, borders: multiples thereof.

Columnar layouts – define how many columns, their width – or both.

Advanced layout (modular) – slot letter: identify a slot to put stuff in; a place where stuff can flow into if the slot’s empty; a slot that can’t have stuff flow into it.

Media queries (dimensions on page, etc.)

Columns already work in Mozilla, multiple background images in Safari.

---------------------------------------------------------------------------------------

Workshop: Frontiers of JavaScript, Cameron Adams

JavaScript libraries are great for abstracting complexity.

Some libraries are much weightier than others.

JQuery is closing in on Prototype for most popular library.

Quality of documentation rated from best to worst; YahooUI, JQuery, Prototype, Dojo

----------------------------------------------------------------------------------------

AJAX Frameworks

Jonathan Snook, www.snook.ca

A basic conceptual structure used to solve or address complex issues.

AJAX is a design approach – data changing every few seconds (like Yahoo stock prices)

3 layers:

Working with the DOM

Application conveniences – the between-part

Can give you widgets

Basic characteristics of libraries:

Working with AJAX Frameworks, Jonathan Snook

Prototype:
- Very object oriented approach.
- Excellent for working with large amounts of data.
- May have issues working with other libraries because it adds methods to the native prototypes.

JQuery:
- Everything begins with the $ function (the JQuery object).
- Lots of plugins available and very easy to develop your own, custom plugins.
- Works really well with other libraries as all functionality is contained within the JQuery object.

ExtJS:
- Great for application widgets.
- Very flexible library.

Scriptaculous:
- Heavy on effects.
- Requires prototype.

Mootools:
- A little bit of everything.
- Object oriented approach.
- Similar code conventions to Prototype.

YUI:
- Yahoo global object – self contained, will play well with others.
- DOM Collection – for traversing the document.
- Event Utility – event handling.
- Tons of available utilities and application widgets.

Dojo:
- Core – DOM utility
- Dijit – application widgets
- DojoX – cutting edge techniques: drawing, offline support, etc.

------------------------------------------------------------------------------------------------------------

"Plays Well With Others": Simple Things to Make the Social Parts of your Service More Social, Brian Oberkirch

· Do One Thing, Do It Well.

· Write programs to work together

· Axioms of Web Architecture: Simplicity, Modular Design, Decentralization

· Closed system benefits: Control, Speed, Privacy, Clean Experience

· Missing: the power of remixable data (Kayak; Southwest misses out)

· Social networking fatigue

· How is updated data propagated?

· Now we give out a URL instead of just an email address to allow all forms of communication.

· How can we make social networks more hackable? Portable? Efficient?

· Don't make me repeat myself. One location for data.

· Could these sites work together? We have the technology: Microformats, RSS, oAuth, OpenID, Creative Commons

Make it work and be meaningful for non-geeks

· Identity: OpenID

· Profile Import: getsatisfaction.com: pulls profile from other services (Flickr) using hCard import.

· Friend Import: Dopplr: Add people from other networks (Twitter, hCard and XFN on all contacts

· Identity Consolidation: Pownce: rel="me" added to Other Profiles

· Authentication: oAuth: Open Protocol for API access delegation, "A valet key for your data"

· DISO: Distributed Social Network (Chris Messina): Using Wordpress with: OpenID, XFN formatted friend lists, hCards, OAuth

-------------------------------------------------------------------------------------------------------

Information Visualization as a Medium

- Eric Rodenbeck

www.Stamen.com

projects: http://www.stamen.com/projects

Many excellent examples of dynamic mapping tying in to various APIs – Virtual Earth, Digg, Flickr, etc.

Particularly fun sites:

House price/commute time live maps:

http://www.mysociety.org/2007/more-travel-maps/

Digg swarm: mapping popular sites:

http://labs.digg.com/swarm/?upcoming

-------------------------------------------------------------------------------------------

Web Typography

- Kimberly Elam, Ringling College of Art & Design

http://www.wpdfd.com/profiles/kimberlyelam/

You will vow:

I will not stretch out or squish type

I will not outline type

I will not rotate type 90 degrees (stack type)

I will use prime marks (quotation not “)

En dash & em dash appropriately (-, - ).

Use classic typefaces: Baskerville, Bodoni, Helvetica, Times, Caslon, Century, Serifa, Garamond

Bad typography:

Disorganized, unreadable, unclear

Ways to organize information (LATCH):

Location (where they happened)

Alphabet (alphabetically)

Time (when they happened)

Category (according to their category/type)

Hierarchy (largest to smallest, first to last, etc.)

Organizing information – structures:

Pentagrams’ structure (they’re a design firm):

http://pentagram.com/en/portfolio/

Grid structure: 3 cols, 3 rows. Your eye has expectations, like reading a book,

Top row – heading, nav;

Middle – content;

Bottom – sub nav, incidental text.

TED (Technology, Engineering & Design – they spread ideas):

http://www.ted.com/

User chooses visualization by picking a checkbox to pick options on left:

The images displayed are in a 12 by 12 grid, with a 3:4 ratio – every image.

Biggest image is 8 x 8, then 8 x 8, then 2 x 2, then 1 x 1.

SamataMason

www.samatamason.com

Always a large cropped image, a teaser.

Color image, the rest monochrome.

Vertical transparent column overlapping image for nav, horizontal at bottom for content.

Natural eye flow: a triangle – very ergonomic.

Menu to sub-menu: you never get lost.

Using non-objective elements:

Use rules for: emphasis, organization, direction or balance; they must be functional.

Use circles – carefully – they pull the eye incredibly powerful. Think of bulleted lists.

Use them for emphasis: in successive sizes, in how close they are to text.

Use tone: it’s under used. Use it, even subtly. It imposes hierarchy.

Light colors stick out. Try light color, darker stripe, darker, and so on.

Details:

Pay attention to horizontal – and vertical – grids.

Use 8-11 words a line.

Choosing between text & background? Lose background image.

Lose uppercase text where you can – it’s tougher to read. It screams & makes text very tight J

Think of color deficit folks: 6% of males, 2% of females have some sort of color deficit.

Pictures are more impactful than text – stick important text in them.

Use hyphen (-) for breaking a word into syllables, en dash (–) for direct relationship in two words or time span, em dash (—) for change in thought

Font weight, color, background all affect the way content is interpreted.

-----------------------------------------------------------------------------------------------------

Jeffrey Zeldman

Started Web Standards Project.

Half accessibility is worse than none - story of disabled hospital access road-person gets across the road. The story: a person in a wheelchair crosses the road because there is a wheelchair ramp into the road: then can’t get onto the next sidewalk because there is no ramp there.

Non semantic markup:

Wastes users time
Wastes your bandwidth
Hides your content

Semantic markup = findability (SEO made easy)

The fight for Standards was done piece by piece: they resulted in Netscape taking on the Gecko rendering engine (as Mozilla), and a gradual standardization through petitions & talking..

They told folks to stick to standards – and fix heritage rendering issues before enhanced CSS support.

They got a standard default font size & font scaling & Doctype switch.

Brought in @import tag – Netscape 4 can’t follow, everyone else can.

Separate style from content, so you can use semantic markup: be SEO friendly.

2000 – XHTML came out – supposed to be supportive of xml.

2007 – Bad: xhtml 2 & html 5. They confuse the issue. Good: microformats.

2008 – browser targeting, using the meta tag that IE8 will require.

----------------------------------------------------------------------------------------------------

The Mobile Web Landscape in Canada and Beyond

Brian Fling, Blue Flavor (Seattle)

http://www.blueflavor.com/wdn08 - slides.

Will be at Web Design World, Seattle, July 21 2008.

www.developersmobile.com – building pages for the web

Globally:

2.9bn have mobile devices, as many as there are people in China.

1.3bn have access to the web using mobile devices.

1.1bn have access with a desktop.

The major growth area is in third world: wireless infrastructure is easier to set up

The prediction is that in 2 years: half the population of the world will access the web through mobile devices.

Mobile reaches anyone in any medium – TV, location devices, internet, audio, etc.

LBS (Location Based Services) are being widely used: Tom Toms, etc.

When designing for mobile:

Think where folks are - physical context

Think of which media is appropriate (audio, static, video?)

Think of what the user wants

Think of the user’s expectations of the interface/devices’ capabilities

Find a need and fill it

Balance goals: business goals, user goals, financial goals. Find the sweet spot in the middle.

Watch the 3 Cs:

Cost (to you & to customer)

Content – think of navigation, image sizes, page weight & scripts

Context – how does your info add to their mobility? Do you add value to their physical location?

Mobile is the 7^th Mass Media:

1 - printing press

2 - recordings

3 - cinema

4 - radio

5 - TV

6 - the Internet

It is the first device that feels personal – you don’t even share it with your spouse.

It’s the first always on mass media (always online), always carried.

You can bill stuff to your phone bill, so you can buy ringtones, etc. easily: so they sell more.

It offers a point of thought – you can instantly post/message.

It interacts more closely to your thought patterns than ever before.

It can do everything that all the other media can do – and enhances it.

Companies facilitating the growth of the new web: Google, Apple, Opera

Canada has relatively cheap fixed line telecom, so they don’t use mobile so much.

67% of Canadian homes have a mobile device. The carriers get a lot of volume from data.

There is a growth of around 9% a year.

80% - 90% is normal in the west.

Standards support in the browsers.

Webkit & Opera have much better standards support than the 50 or so other mobile devices currently.

20m iPhones by the end of 2008 – that’s the prediction.

4M were sold in first 90 days - 20% of the market.

Example of the kind of app that’s especially useful in this new world:

http://www.iwantSandy.com & www.jot.com (just bought by Google =) )

Watch the video of Jason Devitt challenging the control that carriers have over the airwaves and restrict use:

http://www.youtube.com/watch?v=UzuD0d0BS4A

Phones should be able to innovate, install applications, change carriers, share networks, etc. – like sharing roads, phone lines & electricity. Currently, to run apps, customize(hack) phones and protocols we have to ask permission: including from our competitors. This will obviously change.

-----------------------------------------------------------------------------------------

Keynote: Innovation is Overrated, Indi Young

· Book: Mental Models: Aligning design strategy with human behavior

· Understand Innovation

o The innovative idea isn't enough to jump ahead of competition

· Book: The Myths of Innovation

· Model Your Customers

o Mental model

· Spend Time with Details

o Moviegoers mental model

§ Decide to Watch a Film

§ Choose a Film

§ Learn more about a Film

§ Choose a time

§ Go to the theater

§ Watch a Film at home

§ Eat Dinner

§ Watch the Film

§ Identify with a Film

§ Interact with people about the film

§ Follow the Industry (movie buffs)

o Look for opportunities to make a difference at a step

§ Identify: partner with other brands (product tie-ins), share online (top 10, favorites)

§ Choose a Film: opportunities to peruse, seasonal films (Halloween, Valentines)

§ Go to the Theater/Eat Dinner: Find restaurants near theaters. SpotScout (parking spot finder)

§ Watch the film: Comparing film to book, compile metacritic reviews mentioning book

o http://www.ok-cancel.com/archives/article/2005/08/mental-model-building-step-by-step.html

o Real Client: Engage.com

§ Figure out how to deal with an attraction

§ Get a better sense of a person

§ Go out with a person for the first time

o Adaptive Path

§ Initiate a project

§ Conduct weekly client meeting

§ Ensure client is satisfied with work

§ Weekly meeting with other PMs

· Looking for insights

o Find a gap to fill

o Look for scarce or weak support

o Redefine & augment existing feature

o Look for surprises

o Combine Related behaviors & features

o Look for emotions

o Examine spaces formerly crossed out

o Rethink features that don't match a behavior

---------------------------------------------------------------------------------------------------

The 3 Stages of Dynamic Systems

Boris Mann

UGC – User Generated Content

CMS – Content Management System

CMSs that he mentioned – Drupal, Expression Engine, Joomla, Wordpress

Frameworks - .NET, Rails (Ruby), Django(Python), Symfony(PHP)

Their characteristics:

They may have calendaring, IPod functionality

They may have the ability to include links to Open ID

When you set it up you should:

Have a structural sitemap, for Search Engines

Have realistic lorem ipsum text

Use structural tags, to make the content more meaningful to Search Engines and accessibility aids

Have a live preview available

Have image resizing available for the users

Need configuration, expertise to interface with client and teach them blogging, forums, ratings systems SEO, etc. etc. People need support after they get the system.

Set up a group of features/plug ins and stick to them. Don’t spend time thrashing new ideas around: focus on what you do well.

Put it into phase 2 of the project if the client has requests out of the box.

Don’t build from scratch. Rest on the shoulders of giants, in other words.

1. Simple content management

· client wants to edit their own pages

2. Beyond the blog

· calendars, forums, wikis

3. Building web applications

· "I'm pretty sure we need a custom function for that"

· User-generated content (UGC)

· strip out/close tags

· live preview

· image resizing (crop/scale/placement)

· WYSIWYG editors: we hate them, clients love them

· Growing demand for Community Managers to attach to clients.

--------------------------------------------------------------------------------------

Serious Business: Putting Social Media to Work, Anil Dash

· OpenID

o 400,000,000 IDs have been created

o Yahoo, AOL, etc.

o Banking industry in Europe is starting to use OpenID

· We have the ability to make these things real.

· We can move the rest of the industry.

· Reliability

· Scalability

· Measurability

· Manageability

o Example: Twitter's intermittent outages during conference

o There will eventually be an enterprise version of Twitter.

· You cannot put your business processes in someone else's hands.

· Point to successes that already exist.

· Finding the opportunities

o Identify where email (or other tech) is failing.

· Find out where serendipity would help. (accidental discovery)

· Think about permanence. (Archiving)

· Think about impermanence. (People come and go. Project groups)

· Emphasize Iteration. (Office 2007 causing problems for clients on older versions)

· Get involved in an appropriate relationship with a coworker. (XFN inside the enterprise)

· Play nicely with others. (Interoperability. Employees are resistant to change.)

· Be patient.

· Find the advocates.

· Choose "all of the above". (Facebook and MySpace are both used by people)

· What's Next

o gesture (poke, tweets)

o implicit expression (inferring meaning)

o more nuance, more empowerment, more control

o Stop rewarding those who shout.

o Action (Action Streams/Life Streams, Facebook News Feed)

o Identification & Expression (OpenID, Avatars)

o Connection & Collaboration (OpenSocial, Widgets & APIs)

o Notification (Jabber, Twitter)

-----------------------------------------------------------------------------------------------

Real World Accessibility for Real-World People

Derek Featherstone – www.37Signals.com, www.furtherahead.com, www.boxofchocolates.ca

Make sure focus isn’t lost/moved after AJAX actions.

Error messages need to be in close proximity to what caused the error, so that users don’t have to move around the page to find them if they are zoomed in, and find them tough to see.

Don’t fall victim to checklist syndrome when attempting accessibility compliance. You don’t have to meet EVERY requirement (unless client says you do) forsaking true usability.

Allow for simple keyboard navigation and usage.

Accessibility isn't limited to visual impairments; physical impairments need to be considered as well – for instance carpal tunnel/arthritis.

Bad examples:

2 advanced search boxes close to each other on same page – unclear to folks with partial sight.

Parentheses around text (as in ‘name(s)’

– problem to partially-sighted because they find it difficult to see.

If people see “News for September 22, 2007” – there is an expectation set up that there will be an

archive somewhere. This happened on one of their sites, so they changed it to “highlights for Sept…”

– the kind of thing that you only see when you test with real people.

When he clicked to enable a friend to see his trips on www.dopplr.com, the notification to say that it

was enabled appeared on the screen above where he clicked. Problem: the screen reader would have passed that point. You could move it with CSS, or notify the user in the title bar.

Using AJAX is great to maintain state & focus. However if you are designing a form, ensure that the user

can tab to the next form field – especially someone using AJAX. Put in tabindexes. www.amazon.com – graphic checkboxes that can’t be operated by a keyboard. They are not recognized by screen readers, and you can’t tab to get to them without performing a few tricks.

Flickr – the titles above the images are editable: you can’t discover this until you mouse over. That’s a negative point against them. You won’t end up at this editable region if you work using a keyboard, and so they put in a list of info and links telling you how to edit the title, and giving you a different way to do it – so no alternative page, but an alternative option for people. That’s a point for them.

Have large radio buttons & buttons so that if they navigate with difficulty with a mouse/touching the screen, it is easier to navigate.

When you zoom in, it can be tough to navigate because you lose parts of the screen as context for

where you are on the page.

Keep explanations and text short so that there is not so much to navigate through, and keep tooltips

short & close for the same reason.

One solution to the various screen readers and how to enable features is to have folks have their local

machines run scripts that make their version look different – an employee, for instance.

-They could use Greasemonkey: https://addons.mozilla.org/en-US/firefox/addon/748

- https://addons.mozilla.org/en-US/firefox/addon/1891

-or bake their http://www.visionaustralia.org.au/ais/toolbar/

Have error messages close to the fields that they pertain to.

Then it is more obvious, and folks who have to zoom in can see it.

WAI: ARIA support – (Accessible Rich Internet Apps):

have attributes in divs that are role=”error”, and have the markup be semantic, and thus meaningful to screen readers.

Voice activated technologies such as Jaws use buttons & links. In Google maps, they use divs with an onclick event. In this situation, you could use image replacement and custom controls, so that a keyboard can focus on them.

An example of a screen reader: JAWS

FireVox, a screenreading Firefox extension: http://firevox.clcworld.net/downloads.html.

Dragon is another accessibility app: http://www.aidis.org/shop/details.php?id=44

Firefox extensions that enable users (or their admins/organizations) to surf with scripts that run to interact with some or all web pages:

https://addons.mozilla.org/en-US/firefox/addon/748

- free translation service for this: www.babelzilla.com

http://groups.csail.mit.edu/uid/chickenfoot/

------------------------------------------------------------------------------------------------------------

What Makes a Design Intuitive?

Jared Spool, User Interface Engineering: uie.com

Know what web defaults are (asterisks for required fields, etc.)

“*” means required (Avis did the opposite), who decided this? When did it become un-intuitive to do it another way?

Let people think they weren’t trained to do stuff.

Designs Can't be Intuitive

o Designs don't intuit anything

o People intuit things

o Calling a design "intuitive" is a shortcut to: users can intuit what to do with the design right away. Or user doesn't perceive training is necessary.

It’s not intuitive when the user:

o Looks at it and doesn't know what to do

o Feels it takes too much time to figure it out

o Becomes frustrated

o Flash scrollbars that don't work as expected

o e.g. Multi day picking for hotel reservation. Am I getting one night or two?

Intuitive is Personal

o What users currently know (audience)

o Their previous experiences

o Use language they understand.

o Intuitive Design is Evolutionary

o Knowledge spectrum

- Know nothing about design to know everything about design

- Current Knowledge Point: What the user already knows.

- Target Knowledge Point: What the user needs to know

- The Knowledge Gap: Space between, where design happens

The Knowledge Gap

The knowledge gap is between the person’s current knowledge point & the target knowledge point.

Different types of knowledge:

tool knowledge – specific to the tool you use

domain knowledge – area of expertise about the site/area of data

- You can train folks how to use the product by giving help text (e.g. wizards)

When is Design Intuitive?

o Either:

- Current = Target Knowledge

- They are at the same point

- The user already knows what to do

o Or

- The knowledge gap is very small

o Two Types of Knowledge

- Tool: new tool means new rules

- Domain: Law, medicine

How to make your site intuitive

Techniques for Creating Intuitive Design

o Field Studies

- Help identify Current Knowledge

o Usability Studies

- Help identify Target Knowledge and Gap

o Personas

o Patterns

- Methods to communicate knowledge about users and solutions to entire team

Making things Intuitive

o Reduce target

o provide clear clues to increase current

- without resorting to training or help

o Wizards work well for this. We go in small steps. Small gap in each step.

- Must be within the gap.

o Reducing Target Knowledge

- Necessary to make design seem intuitive

- Has to match the user's goals

Exploratory Discoverability

o New trend in design

o Popular with AJAX and RIA Support

o Makes interface feel like a game

o Give clues whenever possible

- careful design can reduce/eliminate clutter

Setting up an instant message service

Skype & Microsoft ask a bunch of questions.

Yahoo messenger setup has inline help text for setting it up with/without proxies, watching for firewalls, etc.

AOL has an “Autoconfigure“ button. If it doesn’t work, you’re on your own L

A design is intuitive when:

Site requires the current knowledge level

Site requires a little learning

------------------------------------------------------------------------------------------------

Dash – Serious Money: Putting Social Media to Work

Anil dash - http://dashes.com/anil/

Tools that he finds useful:

TypePad, MoveableType, Vox

The web is used by us the same when we are at home as when we are at work.

The web needs to allow free communication lines at work – texting, file share, twitter etc.

Think about reliability, scalability, measurability, manageability – that’s what management thinks about. They will benefit from seeing these in action at work.

When thinking about which apps to implement, look at successes & learn from them: look at the social impacts.

Email was designed for a different social environment. You get spam & dumb messages, and archiving doesn’t work well. There are better and more dynamic ways.

Blogs, wikis & other web surfing allow you to make more connections.

Think about whether the information that’s passed around needs to be permanent/temporary?

You can iterate incorporating new forms of communication, so that it doesn’t snarl everything up.

Be patient and make sure that the new media forms play nice with existing systems.

Find advocates in your company when you innovate communication techniques like this.

More empowerment, more nuance of expression (how well you know someone, more subtlety in how you say things) & stop rewarding those who shout the loudest.

There will be active tools that can manipulate & organize the data.

You will have many online ids & ways of express yourself.

There will be many ways to connect & collaborate data.

There will be more notification systems: interoperable chat systems.

What is influential in the latest web technologies?

Facebook news feeds,

openID avatars (no login info required for social/chat sites)

openSocial widgets & APIs.

Jabber & Twitter

unobtrusive popups-single & multiple

2008-03-26T21:58:00.000-07:00

It's all about podcasting, baby!

2008-02-12T20:09:00.000-08:00

It's all about podcasting, baby!

As a born multi-tasker, I never have the time to settle to any single thing at one time. Podcasts were totally made for me. There is so much out there for web devs to play with, and it is important to be informed about what is hot - and what is not.
I have been an avid listener to podcasts from the BBC and the NYTimes for a while now: and I love the brief overview that the front page of the NY Times gives me, the
in depth international views from the BBC documentaries: and everything in between.
The subject mattters vary, and I get a wide perspective on many aspects of life.
The only trouble is that there are so many, and they all look so darn good :)

The absolutely grooviest discovery that I have made of late in the podcast world is young Mr. Dan Carlin. My kinda guy. An off-the-cuff and real world look at what's happening - and what happened way back in history.
Dan Carlin, we think you de man

Big in the web geek world - I am finding these intriguing as an overview, and a Brit view on these things:
boagworld, and of course
the .net magazine podcast
- this guy talks a little funny: but I can relate :)

There's also Talk Crunch and
The Web 2.0 Show - crazy stuff. Looking forward to diving into these very much. So much to hear...

post-Web Directions North

2008-02-09T12:02:00.000-08:00

Fabulous!

Talented line up: it is really incredible to me how many people are involved in working on mind-bending apps and tools on the web. It was fun to discuss where standards are headed with folks like Erik Saltwell, dev manager of Expression Web and other star-studded celebs.

Microformats, mashups and forward-looking site designs were all the rage - designing for standards-based browsers (bearing in mind that IE6 users will lose out on certain features), looking at different hardware for accessing the web/receiving feeds, incredible ways to build mashups, and on and on.

Links:

NGenworks

Flickr pics

More later....

Incredibly useful web tools

2008-01-15T21:02:00.000-08:00

Mozilla extensions:

Web dev toolbar - enable & disable scripts, CSS, etc. Highlight elements, classes, etc.
ColorZilla - detect and identify hex colors
Firebug - identify elements & classes, view the node tree, debug scripts
YSlow - see page load times, and how to improve it

IE extension:
Dev toolbar - identify elements & classes, view the node tree

General tool:
Meazure - pixel tool, see the grid

Web Directions North

2008-01-12T15:16:00.000-08:00

I will be at Web Directions North at the end of the month: and it will be an awesome opportunity to swat up on the latest developments in the web world. I am particularly excited about the JavaScript workshop with the fabulous Mr Adams - and I can't wait to transcend CSS with the venerable Mr. Clarke.

I am extremely passionate about creating a solid script library for Ascentium: and evangelizing best practice in the industry, so this stuff really lights my fire.

Creating buildings became more complex when government agencies and legal bodies got involved: it is now mandatory to include wheelchair access, fire escapes, air circulation, sprinklers, etc. When institutions become available to the public, the public develop expectations. The web is becoming an increasingly important tool on the world stage for: brand image, PR, advertising, community building, retail, and on and on. People feel possession of what they read online: they feel that the web must enable them. They expect search engines to show them realistic listings of relevant content. They want to be able to resize text, view pages on mobile devices, quickly download video, be able to check out sites with screen readers, and so on. Professional web developers are therefore finding that our page structures and content have to take into account new factors as the web matures. Semantic HTML, SEO-aware AJAX, accessible markup, separating content from markup and behavior - these are all admirable ways to achieve many of the new challenges.

On a personal note, it will be interesting to see how fellow web developers see their role. As the web expands and develops, the roles required to produce quality sites also develop. The front end developer's role has increased exponentially in the last year or two. it now requires an in depth understanding of: HTML, XHTML, XML, CSS, JavaScript, SEO, accessibility, Microformats, meta tags, mime types, favicons, behaviors, expressions, hacks, design concepts, pngs, PhotoShop - and various server-side languages.

A few years ago, it was as if the front end was a low-entry point for developing pages: and if you wanted to get serious, you had to go into programming, and you probably would never put too much effort into the front end again after that. Now that more and more sites are regularly over a thousand pages and need to be maintained over many years, there is an increasing need for web devs who can maintain searchable and maintainable sites with light and modular pages.

It will also be interesting to see if there is any discussion about a future front end certification. I am sure that this idea is germinating somewhere: and I am sure that unobtrusive JavaScript that degrades gracefully will be a big part of it.

Exciting times: more later....

=)

Excerpt from our JavaScript class, part of the front end group I co-run with my posse at Ascentium.

2007-12-09T08:30:00.000-08:00

I am one of Ascentium's rock stars =)
Ascentium
I am a front end dev at Ascentium: working with peers to ensure the quality of our work by learning & teaching best practice in all aspects of front end code. We look at up-to-date methods in CSS, JavaScript and page structure: and teach how to make our sites perform well for SEO, accessibility, page load times, maintainability & the cross-browser experience. We are blessed to be in an organization where many folks from many job roles are fired up about these things.

My experience at Microsoft as a user tester at Expression Web is incredibly useful in this. The Expression team at Microsoft are passionately serious about web standards and ensuring that the web sites of the future will be standards-based, and therefore adhere to the standards brought to the table by the many interest groups that require this. They are an incredibly well-informed and intelligent group of people in the center of the team creating the future of web design.

This blog post is a taste of the type of information that we share in our JavaScript class at Ascentium.

Concepts from Jeremy Keith's fine DOM Scripting book

JavaScript’s History
Netscape enabled JavaScript for the first time in 1995 with Navigator 2.
Microsoft struggled to play catch up, enabling JScript in IE3.
Netscape & Sun worked with the ECMA (the European Computer Manufacturers Association) to standardize the language. The standardized version was called ECMAScript. By 1996, the standardized script was taken up in varying degrees by browser versions 3 and above: the script version is widely known as JavaScript 1.1. The current version of JavaScript is JavaScript 1.6. The W3C encourage browser coders to standardize JavaScript implementations.

Best-practice JavaScript
Degrade gracefully means that the page appears acceptable and behaves in an acceptable manner in older browsers/browsers with incomplete support for the JavaScript functions, or no JavaScript functionality at all. For instance, navigation must not depend on JavaScript.

Backwards compatibility means compatible with older browsers, or browsers with limited or no JavaScript functionality.

Another aspect of best-practice JavaScript scripting is enabling pages to load as quickly as possible. This comes from: externalizing scripts, so that they download once for the entire site (and then are cached by the browser and reused by the pages of the site); and limiting the size of the script by thinking carefully about its syntax.

Jeremy Keith's book

Server Side XML Transformation

2007-09-28T18:21:00.000-07:00

Let's do it!

To transform an XML node
try something like this (the related XML is below):
<asp:xmldatasource id="MySource" datafile="~/xml/articles.xml" xpath="articles/article" runat="server">

<asp:datalist id="MyDataList" datasourceid="MySource" runat="server">
<itemtemplate>
<ul class="linklist2">
<li><a href="<%# XPath">"><%# XPath("title") %></a></li>
</ul>
</itemtemplate>
</asp:DataList>

Explanation:
XmlDataSource – defines data source
- Its XPath attribute defines the part of the doc it will draw from.
DataList – data instance drawing from the data, referring to it by id. There can be more than one.
ItemTemplate – looping template, writing data into the html where indicated by XPath controls.

The XML:
<?xml version="1.0" encoding="utf-8" ?>
<articles>
<article>
<id>1</id>
<title>1 Title Name</title>
<author>1 AuthorFirst AuthorLast</author>
<pubdate>1 Published Date</pubdate> <content>article1.html</content>
</article>
<article>
<id>2</id>
<title>2 Title Name</title>
<author>2 AuthorFirst AuthorLast</author>
<pubdate>2 Published Date</pubdate> <content>article2.html</content>
</article>
</articles>

To transform according to/using attributes
try something like this (the XML follows below):
<asp:xmldatasource id="MySource" datafile="Default.xml" xpath="Bookstore/genre/book" runat="server">

<asp:datalist id="MyDataList" datasourceid="MySource" runat="server">
<itemtemplate>

<table>
<tr>
<td>
<img alt="Cover Image" src='<%# "images/" + XPath("@ISBN") + ".gif" %>' >
</td>
<td>
<h4><%# XPath("@Title") %></h4>
<b>ISBN:</b> <%# XPath("@ISBN") %><br />
<b>Price:</b> <%# XPath("@Price") %>

</u>
<br />
<%# XPath(".") %>
</itemtemplate>
</asp:DataList>

</itemtemplate>
</asp:DataList>

The related XML:
<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
<genre name="Business">
<book isbn="BU1032" title="The Busy Executive's Database Guide" price="19.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">
Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
<book isbn="BU2075" title="You Can Combat Computer Stress!" price="2.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
<book isbn="BU7832" title="Straight Talk About Computers" price="19.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">
Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
</genre>
</bookstore>
- Yeah, baby
=)

========================================================================
another way - for repeating controls, using the XML control:
========================================================================

The asp.net control:


<asp:Xml ID="xmlArticle" runat="server" DocumentSource="~/xml/articles.xml" TransformSource="~/xsl/articles.xsl"></asp:Xml>

the XML:
<?xml version="1.0" encoding="utf-8" ?>
<articles>  
<article>    
<id>1</id>
<title>1 Title Name</title>
<author>1 AuthorFirst AuthorLast</author>
<pubdate>1 Published Date</pubdate>    <content>article1.html</content>
</article>  
<article>    
<id>2</id>    
<title>2 Title Name</title>    
<author>2 AuthorFirst AuthorLast</author>    
<pubdate>2 Published Date</pubdate>    <content>article2.html</content>  
</article></articles>

The XSL:
<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform%22&gt; 
<xsl:output method="xml"></xsl:output>
<xsl:template match="/articles">  
<xsl:for-each select="./article">    
<div>      
<xsl:attribute name="id">article-<xsl:value-of select="id">
</xsl:value-of>      
</xsl:attribute>      
<h2>        
<xsl:value-of select="title"/>      
</h2>      
<h3>        
<xsl:value-of select="pubdate"/>      
</h3>      
<p>        
<xsl:value-of select="content"/>      
</p>    
</div>  
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

General great info & sites

2007-07-31T22:09:00.000-07:00

Another busy month, but here's a few gems:

Found a great site for browser stats:
http://marketshare.hitslink.com/report.aspx?qprid=6

SiFR:
http://www.mikeindustries.com/blog/archive/2004/08/sifr

Check out widgipedia:
http://widgipedia.com/widgets/gallery/

Design inspiration:
http://www.styletheweb.com/

Great PNG solution:
http://www.satzansatz.de/cssd/tmp/alphatransparency.html

JS to find element's properties:
for (p in seeEmbedded.style) { alert(p+": "+seeEmbedded.style[p]) };

Av Event Apart

2007-06-30T16:30:00.000-07:00

Here follow my notes from An Even Apart - an incredible conference for people who make web sites:

Sites to look up:

lightroom.com
37signals.com
subtraction.com
istockphoto.com
websidestory.com
mediatemple.com
swfir.com
bulletproofajax.com
developer.yahoo.com/ypatterns
dean.edwards.name

Books to read:

Gap – Marty Neumeier – recommended by Santa-Maria
Thinking in Type – Ellen Lipton
Making & Breaking the Grid – Timothy Samara
Agile Web Development with Rails – Dave Thomas
Beautiful Evidence – Edward Tufte
Communicating Design – Dan Brown

Secrets of the CSS Jedi
Eric Meyer

Default browser styles
To change the defaults in your web browser, find html.css in your computer, and change it.

*{border:1px solid #000} – applies a style to every element in the page.
If you apply display:block to this selector, it will even show your styles (CSS) & title J
- or you can reference rendering of your styles by using the style selector:
style {display:block}

It is good to apply universal styles thus so that you can override browser defaults:
* {margin:0; padding:0; line-height:15px; font-size:10px}
You then need to override them for form elements, headings, paragraphs, etc.

1em is a good distance to have between paragraphs.

There is a parent element of html: it has no name. It takes on the styles of its child / descendant. For instance, if you give html a background color of blue, it will have it. If there is no background color on html, it will take on the body’s.

Crazy stuff with tables
They can be pulled from their default relationships, and be positioned independently.

Use caption, thead, tbody & tfoot to make tables more legible to the browser:
And also this code: .
It gives information to screen readers.

Design
Jason Santa-Maria

How to Design
Have inspirational material in your environment:
Print material, decorations, sheet music, daguerrotypes, typography, stuff from different cultures.

Design using grids on a page. A common technique is 12 columns subdividing a page.

When trying to draw the eye, use colors, size, and remember that people look more on the left side. (They expect ads on the right.) They also start top left.
Use “ ” instead of " for quotes.

His method of design:
sketches to
grey box design (uncolored containers arranged and measured out in a Photoshop comp) to
added colors

When speaking to clients, set yourself up as the authority. Make it clear that you are in charge of the design and you know what you are doing.

How it is
Tim Bray

Web 2.0
Blog to people, let them comment.
Don’t treat them like idiots – be honest.
Blogs are what people treat as the authorities now, many times.
According to Technorati, there’s 78m already.

The new hole in the market is styled blogs: shops and books are styled, unique and elegant – they should be too.

Modern Dev Technologies
PHP is scalable
Rails wins on time to market (it’s quick to work with) & maintainability.

Use Atom – it’s the new RSS protocol: universal standard. There’s a layer on top of the http protocol, the atom protocol.

Blogging will evolve: every application should have “Publish” button: to go straight to a blog, not just “Save” and “Print” buttons.

Accessibility
Shawn Henry

Use an empty alt tag for all spacer gifs.

View your site through a voicing browser: screen readers are expensive and complex. A common screen reader: IBM HomePageReader.

Try navigating the site using a keyboard, no mouse.

Turn off images to see if you have your alt text. Turn off CSS, JS, sound. See if your site makes sense and is navigable.

Markup headings, so that assistive technologies can enable users to skip through them to get through the page.
Toolbars:
Opera enables you to jump through headings;
Firefox allows you to outline headings;
IE has an accessibility toolbar.

Have a “skip links” link, so that people can skip over them in the page.

Markup lists correctly, so that assistive technologies can group them.

Make link text meaningful (inline and in main navigation), so that people can jump to them and through them.

Look at your site using Lynx.

Resize the fonts to check the structure.

Check the language and usability for those with cognitive disabilities.

Use evaluation tools like screen magnifiers to check the pages. Also have real people test.

Find people in support groups and rehab groups. Probably best to have experienced users: they have developed techniques for navigating their way around.

Look at your color contrast.

Her free book, about accessibility:
http://uiaccess.com/justask/
Are You Experienced?
Andy Budd

People learn about things by exploring these days – not so much by reading manuals, not like they used to. They like to have a feeling of a flow, time passing easily.

Make error messages obvious: be aware that they are probably multi-tasking, busy: and could be in various emotional states.

If you are nice, and make it easy: you’ll have it over everyone else by far: you’ll delight them.

Use people’s names and personalize their experience, remember their preferences. They love it, and relate to you.

His design process: wireframe to Flash / html prototype.

Design for users – not according to how your business is organized / feels about it.

Look at people’s root motivations - not that they want a Tupperware: but that they want a Tupperware because they have just been cooking / bought in bulk / took home froma restaurant.

Build personas to know your customer.

Civil Disobedience in Interactive Media
Mike Davidson – invented Flash Image Replacement.
www.mikeindustries.com

Organizations that design major browsers mostly attempt to follow Web Standards.

In reality, though, they realize that they need to follow the needs of the people. Examples: Safari’s use of the “content:editable” attribute and webkit.

There are many web tools developing quickly: and they need more flexible web technologies to enable this. Examples: 37 Signals & Mint, or Mike Davidson’s latest, wedje:
http://www.mikeindustries.com/blog/archive/2007/06/widget-deployment-with-wedje

It costs $50k per company / $5k per person to join the W3C. There’s 60 people, bad focus: and people leaving.

Grid Design
Khoi Vinh
www.subtraction.com

In 1025 x 768, count on about 960 after chrome.

Use a 12 column layout as the basis: it can broken down in many ways. Have 10px margins between them. Have it as 3 then 3 then 3 then 3; or 6 then 3 then 3: you get the picture.

When listing and the list items have borders, leave more space at the bottom – the eye naturally drops the text a little.

Evolving an Interface
Shaun Inman
www.shauninman.com

You can define constants server side in CSS, and call them within your property-value sets:
http://www.shauninman.com/archive/2005/08/20/css_ssc_quickie
This needs to be used in conjunction with PHP or another server side technology. It makes your CSS more flexible.

Shaun Inman made Mint & ShortStat. In Mint, you click on an upside-down tab, and “drawer” drops a huge div down with multiple stat options. Nice UI.

He put a JavaScript in there that determines how wide the page is, and then stretches the divs to fill it, and drops them lower if they don’t fit.

Hijax is a hybrid of AJAX - see:
http://bulletproofajax.com/

The Yahoo! Developer Library has a great list of web defaults (placing widgets like Login areas, for instance):
http://developer.yahoo.com/ypatterns/

CSS in an IE7 World
Meyer

Between Oct 06 and Jan 07, there were 100m downloads of IE7.

25% of visitors use IE7.

Check this out for great cross-browser solutions, and making IE6 play nice:
http://dean.edwards.name/ - wow!
It can have issues with AJAX, though.

To target just IE7, use: * + html {blah blah}
To target just IE6, use: *html {blah blah}

Selling Design
Zeldman

http://mosquito.happycog.com/ - example of showing a client how useful & easy to moderate a chat area / community group can be.

General advice about choosing & working with clients.

Next Generation of Web Apps
Jeffrey Veen – works on Google analytics site.

http://www.veen.com/apart07.pdf

Match user’s wants into patterns: and map your UI to the patterns.
Make it intuitive to get stuff.

Great General DHTML Sites & Web Utilities

2007-05-28T08:49:00.000-07:00

Awesome JavaScript Toys & Effects:
http://www.dynamicdrive.com/,
http://www.codebelly.com/

Great DHTML & Other Links - and many of them.
Includes royalty-free images & fonts: http://www.alvit.de/handbook/index.php
Also see http://www.go2web20.net/
& Jason Cranford Teague's code repository http://webbedenvironments.com/css_dhtml_ajax/codeBrowser/

A more fun way to search for images http://www.airtightinteractive.com/projects/related_tag_browser/app/

Client Side Login Utility http://javascript.internet.com/passwords/login-coder.html
Client Side WYSIWYG editor http://www.webreference.com/programming/javascript/gr/column11/
Toggle Script & Link to Drop-Down Script http://www.samspublishing.com/library/content.asp?b=STY_JavaScript_24_hours&seqNum=236&rl=1

JavaScript to embed Flash objects http://blog.deconcept.com/swfobject/

Crazy DHTML Effects ;-) http://www.dhteumeuleu.com/

These folks do great sites. Check it out: http://www.2advanced.com/

Free. I mean FREE. We like free ;-)
Free Bulletin Board. http://46.freebb.com/signup.php
Free Wiki. http://www.wikispaces.com/
Free blog. http://www.blogger.com
http://3steps.com/signup.php
Web-Based Games. Yippee! http://www.popcap.com/

Make Cute cards from your Flickr images http://www.moo.com/

Learn CGI: http://www.cgi101.com/book/index.html

Wicked CSS Sites

2007-04-29T21:58:00.000-07:00

CSS techniques: yay!

Check out my links @ www.TheStaplerIsMINE.com as a jumping off point. On from that, here's a few fun places to try:

Dynamic Drive:
http://www.dynamicdrive.com/style/

53 CSS Techniques You Can't Live Without:
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

CSS Nodes:
http://www.html-kit.com/poster/css/

CSS Play - many fun techniques, including a CSS-only dropdown menu:
http://www.cssplay.co.uk/menus/final_drop.html

The best CSS-generating tool out there ;-) : Expression Web:
http://channel9.msdn.com/Showpost.aspx?postid=263566

Glish.com on CSS-P:
http://www.glish.com/css/

Notes from the gods of CSS at Mezzoblue:
http://www.mezzoblue.com/zengarden/resources/

IE Transparency Reference:
http://msdn.microsoft.com/404/default.aspx

Nifty Corners - "So hot right now":
http://www.html.it/articoli/nifty/index.html

Great AJAX Sites

2007-03-31T00:00:00.000-07:00

Implementing AJAX With ASP.NET 1.1

http://www.15seconds.com/issue/050526.htm

The Mozilla Developers' take on AJAX

http://developer.mozilla.org/en/docs/AJAX

Tutorial: dhtml Nirvana

http://dhtmlnirvana.com/ajax/ajax_tutorial/

asp.net AJAX Toolkit

http://ajax.asp.net/ajaxtoolkit/

Implementing AJAX Utilizing Java

http://today.java.net/pub/a/today/2005/08/25/dwr.html

AJAX Loading an XML doc: Dynamic Drive

http://dynamicdrive.com/dynamicindex11/ajax.htm

Great asp.net Sites

2007-02-23T12:07:00.000-08:00

asp.net Quickstarts - these are incredible: http://quickstarts.asp.net/QuickStartv20/aspnet/

quickstarts & labs: http://www.learn2asp.net/web/Campaign.aspx

Scott Guthrie at MIX06 building an asp.net app: http://sessions.mix06.com/view.asp?pid=NGW054

Official asp.net site: http://asp.net/

Virtual labs: http://msdn.microsoft.com/virtuallabs/asp/default.aspx

Webcasts

developing the ui in asp.net apps: http://www.microsoft.com/events/EventDetails.aspx?CMTYSvcSource=MSCOMMedia&Params=%7eCMTYDataSvcParams%5e%7earg+Name%3d%22ID%22+Value%3d%221032318775%22%2f%5e%7earg+Name%3d%22ProviderID%22+Value%3d%22A6B43178-497C-4225-BA42-DF595171F04C%22%2f%5e%7earg+Name%3d%22lang%22+Value%3d%22en%22%2f%5e%7earg+Name%3d%22cr%22+Value%3d%22US%22%2f%5e%7esParams%5e%7e%2fsParams%5e%7e%2fCMTYDataSvcParams%5e

Fritz Onion's series: intro to asp.net: http://pluralsight.com/fritz/webcasts.aspx

old webcasts: http://www.microsoft.com/events/series/msdnwebdev.mspx