My thoughts are premature, because I haven’t actually seen Google Friend Connect (GFC; can I call it GFC?) in action, I’ve only seen the few screenshots that google has released. That being said, I thought I’d respond to my impressions or understandings of the service, before seeing what it really is. That way if I’m wrong, I can claim ignorance

In a press release, it was stated that “Google Friend Connect is about helping the ‘long tail’ of sites become more social.” The idea was that “without requiring coding experience”, GFC (geez, I’m totally hurting my search engine ranking by not spelling that out) would provide site maintainers with a way to tap into the benefits of social networks, attracting and engaging more visitors.

As a developer, implementation is always in my mind. I’m interested in how a series of widgets or wizards magically add “social” to your site. When you’re working on a specific platform (say, facebook or myspace), you can tap into a known architecture and codebase to aid in the integration. (facebook apps, wordpress plugins). When you’re not, well, is it really an integrated solution?

Pluck already does a good job at offering blogs, forums and other social goodies to sites, either via javascript or an API. People have long been able to add polls and forums to their sites via services like bravenet or dreambook (remember when it was all the rage to have a guestbook? Now THAT was engagement!) The functionality may be the basically the same, so what’s the big draw?

It’s the data. Isn’t everything about the data these days? Pluck or any other third-party hosted widget has the data living… somewhere. To a user, it may seem like that blog post or poll is on your site, but if it’s being pulled in using javascript, the good ole Google crawler isn’t going to associate it with your site.

Hm… the google crawler… may not index all the information associated with your site (blog postings, reviews, comments) if it’s hosted by a third party social site, if it gets pulled in dynamically.. but what if google DID? What if google provided the hooks into the social stuff? I will definitely be interested to see if they’ve figured this piece of it out. They wrote the rules, so it will be interesting to see if they get re-written.

Update: an article on ReadWriteWeb states that the social magic will be added in via iframe.. so much for my high hopes of making the social in your site actually seem like your site. I thought we’d all communally agreed back about 5 years ago that iframes were evil?

The other consideration about data is related to personal data. Right now a site implementing third-party software retains control of the data. A site integrating a third party product may or may not have the same control. It appears that one limitation with MySpace’s Data Availability initiative is that MySpace retains the control over the data is makes available. If a site implements GFC, can the user hook into one or more existing social networks, and how are any actions taking place on the host site being tracked? I think of Disqus, which centralizes blog comments. When I respond (after having authenticated) to a blog posting where the author has set up disqus, my comments are stored as part of my disqus profile. Disqus purports to “makes your comments more interactive for readers and easier to manage for you — all while connecting your community with other blogs.” - but it does this largely on its own domain. Will google.com/friendconnect serve as a landing pad for user behaviours online? Currently it appears that that is what is the distinguishing feature between Google’s *connect feature, as opposed to the recent offerings by Facebook and MySpace.
Another consideration with the lack of an existing primary platform is how conflicting information will be resolved. I will admit that I don’t yet have a clear understanding how GFC will tie into the authentication of other sites, if a user will be able to select one platform with which to associate (and from which his friends and preferences will migrate), or if he will be able to pick and choose. Just two days ago there was an article in ReadWriteWeb stating that filtering is the next step for social media. We are at a breaking point with too much duplicating information out there, and now we need to do through the tedious work to de-dupe and validate. I don’t have a clear sense what the GFC strategy is for assigning friends to groups with varying levels of privileges, and how referential integrity across platforms may be ensured (if Melissa de-friends iKeif on facebook, what happens to his access to her data on my site?)

I will be very interested to see how this all plays out.. I’ll be eager to read the full reports from the few whitelisted sites that will be trying things out.

Ah, the fun part of a research project: when you know just enough to be dangerous…

Trying to figure out the scope for my capstone, I’ve done some reading on WAI-ARIA, which seems to focus on helping making AJAXy-applications accessible via roles and states. However, we really work more with flash and flex at work, and I want to figure out how to push accessibility via those mediums as well. I came across a great resource at niquimerret.com, a girl geek who is passionate about both Flash and Accessibility. Perfect! I read a post she’d made on accessibility “bugs” in flash, and left her a long rambling comment on some of my questions about flash and accessibility. I figured I may as well leave it here as well in the hopes of garnering some additional responses…

One thing I was wondering about, and maybe you can offer some insight: WAI-ARIA mentions using live regions to make AJAX applications accessible. (AJAX live regions allows text to be spoken without giving it focus. This is good in that it means that users can be informed of multiple updates without losing their place within the content.) Is this something that could be coded into the Flash, perhaps at the actionscript level?

My other stumbling point is at which point this would need to be supported… obviously, the flash player would need to understand these roles/states, but is that enough, or would the browser also need to be aware of it? That is.. would flash on FF be “more” accessible than on IE? Or is WAI-ARIA really a browser thing, not a flash thing?

Graduation is scheduled for May 11, 2008.. now I just have to complete my capstone project and I’ll be the proud holder of a Masters of Computer Science degree.

Up until last trimester, the capstone was like a thesis: the student selected a topic, found an advisor and did self-directed study. They recently changed the format to a more traditional class with an instructor and weekly assignments. I was fortunate enough to be allowed to be grandfathered into the old format.

I’m excited about this because it will afford me the opportunity to do some really indepth research into a topic of my choosing. The challenge? The selection of a topic! From what I understand, this was part of the rationale for the format change: students were having trouble finding a topic. My problem is the opposite: there are several topics I would want to write on!

I’ve mentioned in this blog for quite a while that I wanted to write my capstone on “usability-supporting architectural patterns”. I then started thinking about Accessibility in RIAs. I briefly considered doing some research on the Adobe AIR platform, which would have likely meant porting some existing web applications over to the platform to access their differences. Now, however, the term has started and Accessibility/RIAs it is!

The program chair will be overseeing my work, and while I have the general topic in mind, I’m not entirely sure yet what direction it will go in. I fear 12 weeks will simply not be enough to really touch on everything I want to look into. I suppose this is why academics work in the same field for years and years — one can’t really hope to condense everything into a matter of weeks (or a single document).

Some of my thoughts to incorporate into the scope of the project include:
– definitions of: WCAG, Section 508, ADA, RIA, AJAX
– if/how the guidelines apply to non-traditional web apps
– how to make RIAs accessible
– overview of existing testing tools for web accessibility
– ROI/rationale for caring about accessibility

Possibly: how SEO/Accessibility complement/contrast with each other

When I attended Access U last Spring, one of my key interests was in how to sell accessibility to an organization, and who was responsible for it. At the time, the development team I was working on was well informed in best practices wrt accessibility and compliance testing. However, now that I’ve started to fall into a realm of more rich interactive online experiences, there seems to less knowledge of what it means to be accessible, and in fact, the extent to which it is even possible. Obviously I want to sell it to my organization, but I first need to become informed myself as to what that means.

My long term organizational goal would be to sell accessibility to my company, so my capstone will help me to clarify what accessibility means in this new interactive online space. Once we know the “what” and “where” (and hopefully the “how”), we can identify the “who” (and the “how much”)?

I am VERY excited to announce that the redesign of www.pcavote.com went live! This is the project I’ve been working on since starting at Resource at the end of June. I’ve learned so much through working on it, but I wanted to reserve comment until it went live. So here it is–

I really enjoyed working on this project, although there was a bit of a learning curve in some cases. I am a front-end developer but I don’t have the flash skills we needed to pull the site off, so we enlisted some fantastic flash designers/developers. It was interesting to see how we were able to put a stylish skin on a very data intensive site. Although I don’t ever see myself becoming a good flash-motion designer, I would really be interested to learn more about the development site of it.
We are using a CDN to serve up our images/flash/css and so I got to learn all about cross domain limitations. We actually had some really interesting flash bugs that cropped out purely as a side effect of how we were serving up our data, and I was in there mucking about the code to figure them out. Sure, I couldn’t FIX the problem once I found it, but it gave me a better idea of some of the intricacies of actionscript.

We also included a variety of different javascript libraries and snippets, and it was interesting to see how the played (or didn’t play) together. I had never actually worked with mootools before, but I dipped my feet in a little. A graphic designer suggested the use of curvy corners, and one of our developers improved modified it to integrate with mootools. Throw in swfobject, and we just had a ton going on! I learned about the difference of domready vs load (which safari doesn’t respect), and I think it all came together pretty well…

Before we start working on the next release, I have a few other smaller projects on my plate. I’m working on a microsite with a few other developers, which is great because I have the opportunity to see how they approach projects. I will admit, TM’s crazy chaining javascript was intimidating at first, but it was great to do some ‘peer programming’ with TM and BV, and find out their opinions and best practices.
I believe I’ve also already mentioned hackfight, which is a non-project flex prototype project a few of us are working on. The final presentations are next Wednesday. We have a pretty neat idea, I’ll be excited to see how the presentation/demo works out, and how the other teams fared. It’s a really neat concept: we dream it up and build it ourselves, outside the scope of actual client work.

If work weren’t keeping me occupied enough, I am also entrenched in my classwork. Both classes seem incredibly timely: “verification and testing” as we just went through a release cycle for PCA, and “distributed systems” as that’s really what we build As we went through testing for PCA, it was painfully apparent that there are challenges associated with testing for UI and RIA that haven’t really been fully met. Just this morning I stumbled upon some documentation on testing flex, that I am thinking about exploring for a project for my testing class.

I know that our affinity for a certain subject area can ebb and flow, and I am definitely in a space where I am open and engaged in all this technology/systems architecture mumbo-jumbo. There is so much to think about, so many connections between all these concepts and ideas - it is just about refining them all into a cohesive system..

I was recently asked how I approached coding, in terms of validation and standards. I said that when I had complete control over the code, I coded to xhtml1.0 strict. “for all browsers?” I was asked. The question took me aback. Yes, of course for all browsers. I wouldn’t even know how to code differently for separate browsers. Sure, CSS and JS take some work to standardize, but for me, coding to xhtml1.0 strict is a no-brainer. [I did give the disclaimer that when using an imposed infrastructure, I had to take a step back down to HTML4-.10 transitional for when we were using struts, and I'm still not sure we'd validate]

Further in the conversation I realized that while I can strongly claim adherence to xhtml1.0, I can’t do the same for a certain version of CSS or javascript. I know there has recently been a call for CSS2.2, but honestly, I just use code that works. So too for javascript. In a similar case, I skimmed something that mentioned some new functionality for javascript1.6. Are we up to 1.6? Who knew?

That’s what struck me: the aspect that I consider ’stable’ (xhtml), I code to completely and I’m familiar with it. The other two, that require more knowledge of ‘what works’ and ‘what doesn’t', I have more applied knowledge. I don’t know if it is due to the age of the technologies and how well they are handled by user agents or not. That is, (x)HTML is a markup language, and is platform- and device-independent. It is when you get into presentation and behaviour that the browser quirks rear their ugly heads, so it is not simply a matter of knowing the technology, but also how it interacts with the various platforms.

Will I ever get to a point where I can say “I code to CSS3?” I’m not sure..

One of our Human Factors Engineers just asked us to compile a list of “what makes good code”. He had a few initial suggestions, and they were added to for the following list. Although I think we are aware of certain principles, how do we create a checklist of what is “good” versus “poor”.

1. The code is valid
2. Inline comments are used consistently and effectively
3. Alignment and structure of the code display allows for easy scanning and reading
4. The code is accessible
5. Tables are not used for layout
6. CSS is used appropriately via an imported style sheet, a linked style sheet, or styles in the header (in that order).
7. The code is as slim and compact as possible
8. The code uses semantic markup
9. Inline styling and scripting is kept to a minimum
10. Graceful degradation is kept in mind

“The purpose of JavaScript is to add an extra layer of usability to a Web page.”

“At the time of writing, the Ajax hype is still running at full speed. Nonetheless I believe that it will end just as DHTML did: people will simply lose interest and it will fall apart into a bit of JavaScript and a lot of hot air—though I don’t know when this will happen.”

Screen readers

“Suffice it to say that you cannot assume anything about screen-reader event support.

The situation is in fact so bad that I fear accessibility is just not possible in the generation of screen readers current at the time of writing. It was Derek Featherstone who drew the harsh but correct conclusion, “We can deal with JavaScript on or off, but we can’t deal with in between,” and therefore he feels it’s better to ask users of older screen readers to disable JavaScript entirely. If they do, they’ll fall back to a noscript page, and that’s a situation we can handle.

At the moment, and speaking from the scant knowledge we have about screen-reader JavaScript support, I’m forced to agree with him, albeit reluctantly. Noscript screen readers are far easier to cater to than script-enabled screen readers.”

Hiding content

“Without JavaScript, though, the content will never become visible, and the page is inaccessible. If you create a page that hides information until the user activates a script, you should always give the “hide content” commands in JavaScript, not in CSS.”

Redirecting users

<head>
<title>Noscript page</title>
<script type="text/javascript">
var isSupported = [check JavaScript support];
if (isSupported)
    location.replace(’scriptpage.html’);
</script>
</head>

Never ever use location.href in such situations. Using location.href creates a new entry in the browser’s history (which we’ll discuss fully in 6C). If the user arrives at the noscript page, she is redirected to the scripted page. Once she presses the Back button, however, she’s sent back to the noscript page, where the script promptly fires up and sends her back to the scripted page. The Back button is effectively broken—one of the worst usability sins in existence.”

Object Detection

var W3CDOM = document.createElement && document.getElementsByTagName;

You can’t currently use CSS to target input elements of a specific type. (i.e. radio, text, etc). This can be a pain when you want to set padding on radio buttons, or a width on textfields. Today’s issue was adding left padding to a button.

I decided to throw together some script to find these elements and apply the appropriate style info, and this is what I came up with:

function cssInputTypeFix(tipe, stile,val) {
  <!-- until browsers support CSS input type -->
  var inputs = document.getElementsByTagName("input");
     for (var i = 0; i < inputs.length; i++) {
         if (inputs[i].getAttribute("type") == tipe) {
             inputs[i].style[stile]= val;
         }
      }
   }

I then applied this when the page loaded, with Simon Willison’s handy dandy addLoadEvent script

addLoadEvent(function() {
   //cssInputTypeFix(type,style,val)
   cssInputTypeFix('button', 'marginLeft', '5px');
   }
)

And of course, as soon as I finished I did a search on the web and found this article: http://www.dustindiaz.com/input-element-css-woes-are-over/ It is along the same lines, although he creates styles such as input.text, input.button and uses the onload event to append the appropriate classname. Well, mine can do that too

cssInputTypeFix(‘button’, ‘className’, ‘button’)

where you have a class named button.