[uf-discuss] Tutorial on AHAH (such a cool technology!)

[Mike Schinkel]

Paul Wilkins wrote:
> Mike Schinkel wrote: Printable version please! Ane that
> doesn't take 12 pages to print... (He also grumbles about
> lack of back button in presentation but glad the
> presentation was not 96 pages...)
> 
> The slideshow was built using S5, A Simple
> Standards-Based Slide Show System from Eric Meyer.
> http://meyerweb.com/eric/tools/s5/
> 
> Eric built S5 to scratch an itch, and now many others
> have taken to using it too.
> 
> There are several ways to go back, arrow keys, page up,
> or mouse down to the info back and click on the arrows.
> 
> Keyboard controls for it can be found at
> http://meyerweb.com/eric/tools/s5/features.html#controlcha
> t
> 
> The keyboard controls aren't easily discoverable,
> especially for people viewing the slideshows and perhaps
> that's an improvement that can be suggested.

Thanks for the link. I had seen various HTML slideshows used from evidently
different sources, some with and some without visible controls, but didn't
know Eric Meyer was the source of this one of them. I may be old school, but
to me if there is no visible indicators of a control, or at least a link to
a help file, they doesn't exist. As least not from a usability perspective.
What's incredibly ironic is someone such as Eric Meyer who focuses on visual
presentation would make such an error.  Heck, his example presentation does
not have visible controls; at least he could have included a "help" link to
his keyboard shortcuts!

> You're right about the printing issue. a page per screen
> is too much. I wonder if there's a way to print on a
> virtual a5, and have two of those a5's appear on a single
> a4 page.

BTW, it seems one can press "T" to toggle and get a printable view.
If he added visible controls it would sure be the heck out of Powerpoint for
the web!

> > Another alternative that seems cleaner to me would be
> > to code it like this and let your ahah.js annotate the
> > link for you:
> > 
> > <a href="Waldorf-Astoria-Photo.html"
> > rel="ahah">photo</a>Oh course this last suggestion will
> > probably run me afoul of the microformat police since
> > rel="ahah" hasn't even been officially proposed yet and
> > I didn't bring it up on [uf-new]... ;-P
> > 
> Give it an id and the script can be robust while you're
> at it.
> 
> I don't like the idea of javascript scraping the page for
> class names. Dustin Diaz covers this particular issue
> very well in

Did I say "class"?  No, I said "rel" ;-)  

Interestingly reading Diaz' article there were a lot of people with good
points that disagreed with his suggestion. But whatever, I was more
discussing an overall concept, not a specific implementation of Javascript
or how to optimize it.  Seems like I accidentially hit on one of your
hotbuttons, though? :-)

> While it's convenient, it's slow, demanding, 
> and at high
> risk of breaking.

And microformats, as currently envisioned, are *not* at a high risk for
breaking?  As an aside, rel="ahah" wouldn't be at a high risk of breaking
because the author using the technique would author it so it didn't break
(or can you see potentials where his authoring would break that are not
abstract hypotheticals?)

Also, how would Diaz' article apply if these AHAH links were littered
throughout the document?  His article addressed what seemed like typically a
single widget, not multiple instances of the same widget scattered
throughout a document. I think it would be a heavy burden to place on a
content author to require them to write the Javascript code he talks about
if they had to tag 10 different segments rather than just scan for <a
rel="ahah">.  I think these may well be two different use-cases that might
deserve two different approaches.

On a similar note, one a partner of mine is would on, how do you feel about
scraping a document to find heading tags (H1..H3) so as to build a table of
contents?

> How close would something like this get to cleaning
> things up?

Anyway, I'm fundamentally not really a Javascript guy, I'm a URL guy.  So my
comments were focused on ensuring the URLs were treated right. If you are a
Javascript guy that can optimize that stuff so it is still usable for the
content author, it's all yours!

-- 
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org - http://t.oolicio.us
"It never ceases to amaze how many people will proactively debate away
attempts to improve the web..."




> If we're going to try to not use the class tag as an
> identifier for javascript functions, the trouble comes in
> making it easy for people to add the script to their page
> and use it.
> 
> The following seems to do the trick.
> 
> <a href="Waldorf-Astoria-Photo.html" rel="ahah"
> id="waldorf">photo</a>
> 
> <div class="ahah-waldorf">&nbsp;</div>
> 
> Then the script can get only what it needs, like the
> anchors, filter through them much more rapidly, perhaps
> with the wonderful forEach technique from
> http://dean.edwards.name/weblog/2006/07/enum/ and add the
> behavior to those elements with something like addEvent
> from http://www.dustindiaz.com/rock-solid-addevent/
> (Yeah, more Dustin, he does great stuff)
> 
> And if the script uses object notation, like the
> searchplay object at
> http://www.dustindiaz.com/javascript-searchplay/ then
> there won't have to be a lot of functions like ahahinit,
> ahahdoit, ahahdone.
> 
> It might start to look something like this
> 
> // beware, untested code, dragons may be lurking ahah = {
> init : function() { var els =
> document.getElementsByTagName('a'); Array.forEach(els,
> function(el) { if ('ahah' == el.getAttribute('rel')) {
> var href = el.getAttribute('href'); var id = 'ahah-' +
> el.getAttribute('id'); addEvent(el, 'click',
> 'function(){ahah.get("'+href)+'", "'+id+'")}'); } } },
> get : function(url, target, delay) { // code as per
> normal } };
> 

> -- Paul Wilkins
> 
> _______________________________________________
> microformats-discuss mailing list
> microformats-discuss at microformats.org
> http://microformats.org/mailman/listinfo/microformats-disc
> ss