wake up!

Tim “Invented the Web” Berners-Lee on a way to evolve HTML without the abrupt disorienting changes characterized by the switch the XHTML: Reinventing HTML | Decentralized Information Group (DIG) Breadcrumbs

Check out this Folder tree with Drag and Drop capabilities based on unordered list tags.

Austin Govella explains why Rapid prototyping tools should NOT generate code:

Why would you need the prototyping tool to generate production code? Is there something about the code they would generate that would make it better than the custom code most applications require? Does the rapid prototyper’s code generator let me tell it how to generate the code, so it codes the way I need it to?

Kaliya “Identity Woman” Hamlin writes:

Webwide distributed SSO is finally happening… Learn more from the core guys behind this emerging standard for user-centric digital identity. August 10th 6-9 in Berkeley at 2029 University, Upstairs. RSVP to me kaliya (at) Mac (dot) com and please pass this along to those who might be interested… OpenID is the emerging standard for web wide distributed single sign-on. It works with OpenID enabled URLs and i-names. The goal of the evening is not to geek out on identity but to connect with developers working on applications that require users to log in. Find out more about what it is… how it works… how you can install it. The incentives to learn are high with the $5000 bounty for having OpenID in Open Source projects. Presenting and answering Questions:

• David Recordon formerly of Live Journal/Six Appart now of Verisign will be presenting a bit about the origins of OpenID but most importantly how it works… and how you install it.
• Andy Dale from ooTao will talk a bit about i-names and how they work with OpenID2 and looking forward to what comes next after authentication - profile sharing. ooTao is also data sharing, are running ibroker services.
• Scott Keveton from Jan Rain a development shop in Portland that has been ond of the leading instigators of OpenID. He just posted a walk through on his blog.
• Mary Hodder CEO of Dabble will talk about the work happening around the development of itags.

If you know a developer - pass the word along.

Perhaps the vision of a universal single sign-on on the Web isn’t just a utopian pipedream after all?

(Reposted from The Power of Many.)

Microformats are standards-compliant structures based primarily on ordinary XHTML tag attributes (such as “rel=” in a link tag). The Knowledge@Wharton website features an excellent interview with Tantek ‚elik and Rohit Khare explaining the concept further.

Prototype is “a JavaScript framework that aims to ease development of dynamic web applications,” sporting an “easy-to-use toolkit for class-driven development and the nicest Ajax library around.”

Ruby on Rails features integrated Prototype support, the famous script.aculo.us library is built on Prototype (but I curse Joshua Schachter for ever starting that ridi.culo.us URL trend), Rico offers Ajax components and effects built on Prototype, and so on.

At the Blue Flavor blog, Nick Finck casts another vote for making XHTML wireframes. I have to admit I find this idea appealing. Granted (and he grants this himself), it may not be the right approach for every client, but the prospect of creating blueprints and schematics that don’t get thrown away after they’re approved but that actually help give the web developers a leg up, is mighty appealing:

So why? Why would we want to do XHTML wireframes? Wouldn’t it take more time to do them in XHTML than it would in Visio or something? Well, yes and no. Yes, you would have to code the XHTML, but that would need to be done at some point anyway. Yes it may seem like it’s slower to create wireframes in XHTML but once you have done your first website using this method a lot of the same markup can be repurposed especially when it comes to navigation and various methods of displaying information on a page like multi-column lists and so forth. In the end it’s actually more efficient to be building wireframes in XHTML and even navigation schemas because you can see exactly how it works and you only spend the energy necessary to create it once, not twice (once in Visio and once in XHTML).

(via Thomas Vander Wal)

Today (April 05, 2006) has officially been earmarked as CSS Naked Day. The aim of this project is to promote web standards by showing the world what each site looks like sans markup. Those who sign up for the project agree to remove all CSS styling from their website for that day. The result is well, a site without a style sheet.

Shimone just sent this guide to printing sections of a web page around to our developers’ list with the comment, “You know this is going to come up.”

Panelists

• Aaron Gustafson: Sr Web Designer/Dev, Easy! Designs LLC
• Ed Shull: CEO, USWeb (Web marketing)
• Eric Meyer: Complex Spiral Consulting, Standards Nazi
• Andy Hagans: works in SEO, blogs at Performancing.com

white hat vs. black hat SEO

Shull:

• cloaking (visible only to search engine)
• linkspamming
• comment spamming
• hiding tables in javascript to make the content show up higher in results (“cheating?”)

Meyer:

• blackhat is anyone who’s cheating
• sneaky techniques… at least grayhatting
• I’m asked too speak at search engine conferences for reasons I don’t understand. At one
• I was spammed in person on the conference floor

Hagans: As an SEO I make it my business to know all the weapons in the arsenal. Search engines are getting smarter, so the business case for blackhat getting weaker. I don’t like to get into the moral argument… its gets kind of old.

Professional SEO involves regular testing and writing software. In the long run blackhat doesn’t make sense: you’ll get caught and penalized. Accessibility and web standards = whitehat SEO already.

Copywriting and SEO

Gustafson: Good content for the page, semantic markup all help.

Shull: We work with a lot of publishers (example: Forbes). Copy is the thing. Every title on their page said “Forbes.com.” They were excited to learn they could change it, but they just wanted “Forbes.com: The capitalist tool.” We got them to put the article names up there.

When the Hummer H3 coming out, we let our clients know about search terms coming up in their space. The Forbes article title was “Baby Hummer” which didn’t help them with “Hummer H3.” Instead of “Martha Stewart Goes to Prison,” “Stewart Goes to Prison” [so we had to get them to use better descriptive titles on the web pages].

Meyer: The role of copywriting is to get people to like the site and link to it.

Hagans: I agree: being linkable more important than the code. Re copywriting, you need to understand usability, accessibility, and SEO as well as marketing. Use alt text. Don’t use “click here.”

Meyer: The alt attribute is important. Title is most often used for snarky comments.

Hagans: Linking algorithms have killed most of the old tricks. Using common structural elements: h1, good link anchors are the most important things.

Question: Better to use h1 for name of site or page/article title? Answer: The title.

Descriptive page titles, good navigation, good anchor text

Someone (I forget who): Personally, I love site maps. another way to make sure every page on your site has a link into it

Google allows you to upload an xml version of your sitemap.

Microformats

Meyer: Microformats have a whole lot of potential, not yet a lot of payoff. One example, link rel=”license”, Yahoo has a Creative Commons search that looks for that rel attribute/value.

In the works: hresume. Would enable, for example, a search among resumes of people Jeffrey Zeldman regards as friends

Shull: You can use SEO as a way to sell web standards.

Hagans: Getting to 508 helps, but after that you don’t get much. Still, it’s important to get the low-hanging fruit.

Question: Clients view SEO as a different project. How do you explain to them that it’s inherent in good web design? Answer: Educate them.

Mention of Matt Cutts, Google search engineer who outs black hats on his blog.

tags: sxsw2006, sxsw

For today’s daily Ajax news I recommend Scot Hacker’s notes from a panel I wasn’t able to attend yesterday.

tags: sxsw2006, sxsw

A discussion on a BayCHI mailing list led an Oracle UI engineer to post a link to these user interface guidelines. They present a fascinating look at a meticulously documented set of user-interface standards. The documentation specifies overarching standards, page elements, page-type templates, and numerous process flows. The description of partial page rendering provides a great deal of detail and guidance without ever once mention the A**x word.

On the downside, the actual web page titles are fairly cryptic. Isn’t there a standard for that?

Here are today’s Ajax links:

• advAJAX / AdvancedAJAX 1.0
• My-Bic = Easy Ajax

This concludes the daily Ajax.

No? Me neither.

But if yes, check out Javascript in Ten Minutes at the new infogami website.

Stu Nicholls has created a little web-native video game powered by CSS. It’s maddening, though. I can’t seem to win.

Yahoo! has really taken it to the next level in terms of reaching out to the developer community. As I mentioned earlier, there’s the new User Interface Blog and I coincidentally stumbled on the Graded Browser Support article around the same time.

Digging deeper I found the Design Pattern Library which Yahoo! defines as “an optimal solution to a common problem within a specific context”. The pattern library describes a problem and the best approach to undestanding and solving it.

Current examples include: auto-complete, breadcrumbs, drag and drop modules, module tabs, navigation tabs, object pagination, search pagination, object ratings, and writing a review.

The examples are sectioned into: when to use, the solution, the rationale, and accessibility. A sidebar includes links to related patterns, where Yahoo! has applied it to their own sites, a related blog article, and code examples.

Coupling the Pattern Libraries are the UI Libraries with in-depth examples and BSD-licensed code available for download.

These libraries are shaping up to be an essential resource for developers and designers alike!

Yahoo! Design Pattern Library Yahoo! UI Library

Nate Koechley, Senior Web Developer for Yahoo! has written an interesting (if a bit high-level) article on what he’s calling “graded browser support”. Instead of using the more commong “graceful degradation” approach, Nate looks at browser support using a graded system.

The system puts browsers into 3 seperate categories based on their distribution.

See the article for more information. The graded chart will make a lot more sense after reading it.

Yahoo! Developer Network: Graded Browser Support Yahoo! Developer Network: Browser Grade Chart

Some interface designers may feel threatened by the idea of Greasemonkey scripts altering the intended look-and-feel of their web pages (at least in Firefox and Mozilla), but I like the idea of users getting more control over their experience (even if the scripts are brittle and sometimes hack-y), and in the best scenario I would imagine you could improve a site’s design by selectively adoping popular interface improvements.

Mark Pilgrim, the guru of Atom and Accessibility who wrote the Greasemonkey script Butler (which removes ads from Google results pages among other things) and the online tutorial Dive into Greasemonkey, has now written a book for O’Reilly called Greasemonkey Hacks:

More than just an essential collection of made-to-order Greasemonkey solutions, “Greasemonkey Hacks” (O’Reilly) provides complete, fully developed user scripts you can use to modify web pages, the tools to customize these scripts, and the guidance to develop your own scripts from scratch. You’ll learn how to:

• Install, configure, and debug your first Greasemonkey script
• Insert links into web pages, fix broken pop-up links, and follow links without clicking them
• Beautify the Web by enhancing fonts, images, tooltips, lists, and tables
• Intercept and modify web forms, generate developer reports, and debug Ajax web applications
• Make search engines auto-complete your search terms, prefetch your results, and remember where you’ve been—without invading your privacy!
• Add accessibility features that make sites easier to read and navigate
• Download embedded movies, automate site registrations, and route around brain-dead browser sniffers

This should save some effort for JSP developers building out Ajax interfaces.

This has been your daily Ajax link (via Dan).

Todd tells us that Microsoft released the public beta of Internet Explorer 7 today, and he sent us this link to the Beta 2 developer checklist, including these items (among others):

• Verify your User Agent string detection detects Internet Explorer 7.
• Check your website for the use of CSS hacks that may have been turned off in Internet Explorer 7
• Verify that transparent images on your website are rendered correctly
• Verify that your website hasnÕt been adversely affected by Internet Explorer 7 Security changes.
• Verify that your website doesnÕt get flagged as a Suspicious or Known Phishing site per MicrosoftÕs Anti-Phishing White Paper.
• If you would like to add/implement access to your site’s search provider, implement the window.external.AddSearchProvider(URL) call in your webpage to prompt the end user (see the Internet Explorer blog).
• Utilize the Internet Explorer 7 Developer Toolbar to explore the DOM tree and find elements on the page, disable Internet Explorer settings, view information, outline elements, control images, view the toolbar, resize pages to common screen resolutions, and have a powerful ruler that lets you measure pixel perfect content on your page. It also will help you to validate against existing standards and provides pointers to W3C specs.

The folks at Google Code have published some interesting analyses of HTML markup statistics and trends, complete with nice bar charts for us visual learners (Google Code: Web Authoring Statistics):

In December 2005 we did an analysis of a sample of slightly over a billion documents, extracting information about popular class names, elements, attributes, and related metadata. The results we found are available below. We hope this is of use!

They have separate reports covering a large number of categories (elements in pages, attributes in elements, classes, metadata, the body element, link rel microformats, the a element, custom markup from web editing tools, and more). Each of the separate mini-reports is well worth reading, with a lot of amusing “stupid markup tricks” revealed.

(via reddit: what’s new online)

One of the oldest rules of Search Engine Optimization is the importance of meta description and keyword tags. They help search engines understand the content and context of each page they query. On my drive in to work today I thought a bit deeper about a strange occurrence I’ve begun to notice. I recently spent several months recoding two of my personal sites (more sites = more experience) and the result has been a steep spike in referrals to both sites from search engines. Each site ranks very high (top 5 results) for related queries and yet the strange thing I’ve noticed is the description for each result is the meta information rather than content from the page itself. This is true for both sites.

An example query for “Sony Launches Music With a Twist” produces some 500 thousand results. My recoded site Jungle-Life is the 2nd result just below About.com and above Sony’s own music blog. This proves the power of the new method which I’m using to code websites, and after this experiment I’ve begun applying the methods I used on my personal sites to the sites I code here at Extractable.

Check the screenshot below (I’m using Firefox’s handy Google Preview extension btw). Pay special attention to the description beneath each title. The first result produces a contextual summary for the article as does the third and fourth results. The second result however is only the meta description. What is it about my site that causes this to happen?

Digging deeper I find that About.com is using content directly from the article as meta description information (a clever SEO tactic) and the article title for meta keyword information (equally clever).

Checking the Sony blog I see that they are using neither meta keyword or description tags and have left out the title tag altogether. The summary Google is using appears on Sony’s page only after the second sentence of the fifth paragraph!

Continuing my quest I check the QueerDay Magazine site to find that they too are lacking meta tags. It appears that Google has used the document title as the search result link and portions of the second and third sentences as a summary.

So what can we learn from this? It seems clear from this expirement that the importance of meta tags can surely be downplayed. A site will show up in relevant search queries regardless of meta diligence. How high they will rank may require further research (both the About.com and Jungle-Life websites use meta tags) but whether they are something worth investing time and money implementing on each page is something else.

On the one hand, I like seeing content summary results for the other sites, it allows a person to quickly scan the content for relevance. On the other hand, the simple meta description displayed on the Jungle-Life query allows you to see if the site itself has what you’re looking for - not just the search result.

In the end, the jury is still out and while the major search engines are constantly changing their techniques, Search Engine Marketers scramble to keep pace. One thing is for sure: Content is still king. Provide quality, relevant content and the customer will find you both organically and through search engine referrals. No amount of search engine optimization can trump a person’s desire to find accurate results. They may find a black-hat SEO marketer’s website first - but does that website provide the results they seek or does yours?

In the meantime, I will continue to monitor search engine, site analytic and referral statistics. Perhaps I will consider implementing the content-as-meta trick for better search summaries. Or maybe the best idea is not to mess with a good thing. Either way, research is key and the more we know the more we can offer our clients.

Addendum: After all that, I’ve just discovered that the anomaly appears inconsistently. So a search for “free encryption softwar” (the ‘e’ is deliberately missing since that is how it appears in my referral stats) returns contextual summaries while the earlier query does not. See the screenshot below… Will have to explore this further!

FireBug aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.

Here are some of the listed features:

• XMLHttpRequest Spy - Ever wonder what all them newfangled Ajax websites are up to? Watch the requests fly by in the console!
• One web page, one console - Tired of slogging through a zillion errors in the JavaScript Console trying to find the one you want? The FireBug console is built into the bottom of the browser, and only shows you errors and log messages that came from the page you’re looking at.
• JavaScript Error Status Bar Indicator - It’s a sin that Firefox doesn’t include this by default, like IE does. When there is an error in the page, the status bar will let you know with a big red blob.
• Logging for web pages - Sick and tired of “alert debugging”? Jealous of all your C programmer buddies with their fancy printf? Now you can log text and objects to the FireBug console from any web page.

Because a day can’t go by without something about Ajax appearing onscreen, I’m stealing a news item that Todd posted to our project portal that IE7 will have a native XMLHttpRequest Object:

In IE6, 5.5, and 5 (yes it’s been there for 8 years) you had to use MSXML as an ActiveX control to get use of the XMLHttp object, but in IE7 the implementation will more closely resemble the defacto-standard that Firefox and Safari use.

When I asked Todd what this means effectively for developers, he told me (via IM): “It removes the requirement that the IE user have ActiveX enabled in their browser to use AJAX sites,” and that it helps establish “a common platform for the developer writing AJAX sites: Firefox, Safari and IE7 will all use XMLHttpRequest object.”

Anything that saves work for developers is a Good Thing in my book.