I haven’t looked at the code at either site, but there is a principle
called Progressive Enhancement that I know quite a bit about, and
champion where I can.
The idea is that you first build a site that delivers information to
anyone with a browser. (No script, no Flash, heck, no images even!)
Next, you layer on the goodies using techniques that provide those
goodies to the people who can use them.
You don’t alter the HTML pages of the site one whit – you use
JavaScript to add JavaScript support, for example, or Flash to enable
the Flash components. What you don’t do is start from Flash and then
add a warning that the customer must “upgrade” their browser. That
will merely get you the arched Spock eyebrow from every iPhone user in
the world. “As if!”, they snort derisively.
This takes a bit more planning and frankly a lot more technical
knowledge, than merely slapping an interface together in Flash,
placing it smack in the middle of an otherwise blank page in an
tag, and saying “site’s done!” cheerfully. But that
investment is paid back hundred-fold by the inclusion of otherwise
completely missing customers.
So, for example, how do you bootstrap JavaScript into a site? Well,
let’s say you have a form that you want to “Ajaxify” so the form page
never appears to reload. You start with a normal HTML page with a
normal form tag. You set it to post to a handler page, say call it
form_handler.php. You have integrated success and failure messages in
the form page itself, using inline PHP or similar. You don’t have to
do anything special to layer the Ajax function on to that base. Make
sure your form tag has an ID (Freeway won’t add this by default, but
that’s what Extended is for), and then add a listener function to the
head of the page:
<script type="text/javascript">
document.observe('dom:loaded',function(){
$('yourFormId').observe('submit',function(evt){
evt.stop();
var f = this;
this.request({
onComplete: function(transport){
$('messageArea').update(transport.responseText);
f.select('input[type="submit"]').invoke('enable');
},
onSuccess: function(){
f.getInputs().invoke('clear');
},
onCreate: function(){
$('message').update('<img src="Resources/spinner.gif" />');
f.select('input[type="submit"]').invoke('disable');
}
});
});
});
</script>
And you’re done. Because this listener will simply not be fired in the
absence of JavaScript, nobody gets stuck. The Prototype request()
function takes a normal form tag, reads its method and action, and
constructs an Ajax call to the same handler that it’s set to use
normally. Your handler script will only need to check one extra thing
to decide if the request was sent through Ajax or not:
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')){
//only output the error or success message, not the entire page
//then exit
}
And thus decide whether or not to return an entire page or just a
little bit of text with the form results.
And again, only the people who are prepared to enjoy this effect will
ever see it, and those who cannot (like Google, or visually
handicapped people) will never mark you down for trying and failing,
or worse, locking them out. This last part bears repeating,
particularly if you are working for any client in the public sector.
There are strict rules and penalties when it comes to discriminating
against people who are “differently abled” (to use the bloodless PC-
ism).
Walter
On Feb 25, 2010, at 8:55 AM, Robert B wrote:
Well, maybe you can convince “bo” to make them an alternate html
site. Some folks just can’t handle Flash sites.
Lots of companies make a Flash and No Flash sites.
Not sure why it plays while javascript is off. Don’t know enough
about either.
Bob
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options