File this one under its about time. A grassroots movement for better cross-client compatibility. The major targets? Gmail and Outlook. Here's to hoping they can have some success. Here's a link to their test email and the properties they are focusing on
A List Apart is featuring an article on the future of CSS. Their prediction? Increased compatibility with web fonts, decreasing reliance on browser compatibility. Today, if a user doesn't have a font, tough luck. But in the future? CSS coding could allow for a broader range of fonts, pulling the font-families from the web rather than from a user's library.
Like the author of the article, I'm all for this particularly because it would reduce the amount of unnecessary image files floating around to convey text. I'm a desigin minimalist-- try to keep code as trim as possible. But even I get frustrated at the (lack of) font compatibility on the web. I haven't messed around with True fonts yet, but am certainly going to incorporate them into my 419 class next semester.
I haven't put up a technology-oriented post in awhile, but, then again, I haven't been doing much web design this summer. This week I've started working on my course website for the fall, and thought I might share a cool, free web2.0 tool that really helps with standards compliance: tinyURL.
Next semester I am requiring my students to read one book on the social / economic / cultural / political / legal impact of technology. I created a list of possible books (and am looking for more--please leave suggestions in the comments) for my syllabus, creating a link to the amazon page for each suggestion. Since students will end up writing a review of the book for amazon, this seems like a good place to have them start. The problem: Amazon uses hideously long URLs full of the kind of code that drives the w3c (x)HTML standards validator crazy. As in 150 errors crazy. Solution: tinyURL. TinyURL creates a redirect that it stores on its servers--users will never know that they've clicked on this redirect. Amazon looses the page rank benefits of the link, but, hey, that's what they get for not providing standards- compliant URLs in the first place.
I recently finished working with a local dog group on a website redesign. Intially, I was particularly proud to recreate what was a table-based layout in xhtml and css. Later, the group decided they wanted to make some significant changes and I taught my wife enough Fireworks and Dreamweaver for her to redesign the color scheme. We worked together and remain married. Go us. But that's not today's victory.
From the beginning of the project the group wanted some kind of photo gallery for the site. The problem: how do I create a standards-compliant site that group members can easily update? My first idea was to use Flash to create a gallery. But this didn't seem like a good option, since images need to be re-sized before they are added to a collection, and every update means going in and editing the flash file. No...no..no. I also thought about using Javascript (I've done this before for Purdue's GradSEA), but this technique isn't standards-compliant.
Reading a Mashable article on image editing resources yesterday, I came across a link to ImageShack--a photo hosting service that allows users to easily create slideshows and pumps out code to embed the shows on other websites (kind of like the libraryThing widget Michael uses on Wishydig, but using Flash rather than Java). The problem? Embeds are banned by the w3c--use the easy widget, lose your validation. All seemed lost. Especially since the classic fix for embed, McLellan's satay method, works best when you can create a container moive. This wasn't the case. Then I remembered (via del.icio.us) Elizabeth Castro's article on how McLellan's technique can be used on Google Video and YouTube movies without the satay...
When you complete a slide show with ImageShack (and you don't have to register to create a slideshow, but you do have to register to be able to edit a show), it will produce this code:
<embed src="http://img515.imageshack.us/slideshow/smilplayer.swf" width="426" height="320" name="smilplayer" id="smilplayer" bgcolor="FFFFFF" menu="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=img515/8742/1182697433ltj.smil"/>
Following along with McLellan and Castor, we want to transform this embed into an object:
<object type="application/x-shockwave-flash"
data="http://img515.imageshack.us/slideshow/smilplayer.swf"
width="400" height="326" id="VideoPlayback">
<param name="movie"
value="id=img515/8742/1182697433ltj.smil"/>
<param name="allowScriptAcess" value="sameDomian" />
<param name="FlashVars" value="playerMode=embedded" />
<param name="FlashVars" value="id=img515/8742/1182697433ltj.smil"/>
</object>
The key to getting this puppy working is to include the unique id as a FlashVars parameter (the final line of the code). Google and Youtube supply each movie with its own URL, ImageShack doesn't--rather, it assigns each slideshow a unique id in its database. So, bottom line, you have to include this id to get the show rolling. The only line I am unsure of is the "allowScriptAcess" line--it was in Castor's code, but I'm not sure if its necessary. I tried removing it and the slideshow still played in Safari, but I'm not sure if it is an IE command (with the satay method, IE doesn't like auto-starting... if anyone has IE, let me know if this is working, I promise not to chastise you too much for using IE).
Victory is mine! And, best of all, ImageShack is an awesome 2.0 app--it automatically resizes images, allows for easy captions, allows users to re-order images, determine background color, tag presentations, import images from Flickr or other URL's (as well as direct upload), choose transition effects, add music (please don't), and make shows public or private. And now, thanks to A List Apart and some wranglin', it can be standards-compliant. Cool.
Here's the final, standards-compliant code in action:
Go to ImageShack® to Create your own Slideshow
UPDATE: Things aren't going quite so smoothly with my actual dog park moive. Yesterday, while working on the slideshow above, I noticed that the ImageShack server was reacting really slowly at times. I finished a sample dog park slide show last night, and it works fine through the standard embed method, my object method is running into problems:
Go to ImageShack® to Create your own Slideshow
I have no idea why this movie isn't loading....
UPDATE: I am dumb. Problem solved. Already sent "I'm an idiot" email to ImageShack (see my comment... before I delete it). Now I have to write this post up into something a bit more constructive and submit it to imageshack's tutorial contest...
UPDATE:
Apparently the video is only working in Safari. I'm going to play with it this evening. If any visitors are looking at this post, can you tell me 1) what browser you are using [IE 6, Firefox 1.5 etc.] and 2) whether you see two movies above. Thanks.UPDATE: O.k., its working in Firefox 2.0.0.1. But IE is being terribly tiresome. Back to the drawing board later?