DEC
3

Unless you haven’t read much tech news lately, Google just released the Chromium OS. It’s beautiful and OpenSource, and it represents a huge shift in mentality. The reason we use our computers is to access the internet, so Google centered their operating system around the internet and the cloud. Their browser is one of the many supporting HTML5, a real movement to reduce the need of proprietary plug-in-based rich Internet applications, such as Adobe Flash and Microsoft Silverlight. HTML5 with some simple JavaScript will begin to power the front-ends of many of the web apps available on the Internet, and our experience will be as beautiful as the Flashy websites of today. Designers are already trying to push the limits of HTML5; for example see Mr Speaker’s HTML5 Canvas Particle System. HTML5 and these JavaScript techniques, mainly using jQuery, will make our web interfaces feel as rich as the desktop. They are already at our finger tips, available in the latest version of Firefox and Safari, and even in the iPhone.

OpenGL comes to HTML5 and Modern Browsers

OpenGL comes to HTML5 and Modern Browsers

What is holding back the reigns on HTML5? Well the Internet Explorer project isn’t bringing support until IE9, but rumors are that they plan to release another really useful tool, GPU acceleration. This would mean that web developers could take advantage of the GPU on a browsing device. So that means our web enabled interfaces get a direct link with the GPU, no OS really needed to host heavier graphics applications. If the iPhone were to support it, all of those shocking AR experiences would instantly be accessible on a range of compatible devices like our laptops or other devices with some version of WebGL. Well this stuff is already getting a lot of discussion and there are talks of ensuring future browsers include a binding of OpenGL ES to JavaScript, essentially WebGL. Google figured out their own way of doing it and released the O3D API for rich interactive 3D applications in the browsers, Safari and Firefox. More native implementations of WebGL are coming from Firefox and Safari for the desktop and mobile devices soon.

So that’s cool and all, but how much of a competition is this to Flash and SilverLight? Right now, about 90% of machines have Flash installed on them and I would guess that less than 50% of all users are using a browser with HTML5 capabilities. Further more, all of those users probably have Flash and possibly SilverLight installed as well. The competition will be with the 10% or more of browsers that do not have Flash. These are mostly users on mobile devices. iPhone and most mobile browsers do not support Flash. Okay let’s step back a bit and examine the real problem here for a second. The issue lies within the accessibility of content across screens and interaction devices. Content is simply not as easy to browse on some devices or screens as it is on others. That means small screens may not be able to display some collection of content as well as a large screen. Kind of obvious, but it is all about the content.

Lay down content and focus on content before all else. If you have no content, you have no purpose. The next most important layer is to consider the behavior. Ensure that full functionality is available across all devices. The user should be able to preform actions on a small display as easily as on a larger screen. Finally, take care of the visual display and style of your screen space. Chase down some device specific styles if you know you will have a large users browsing with a specific screen size. You can easily use jQuery to sniff out the browser and display an appropriate style. If you want to get crazy and provide some extra-ordinary graphics experience with animations and things, consider using the HTML5 Canvas and JavaScript techniques to make it happen. There is another detection device called Modernizr that can ensure your user has the goods. If you detect that the user is on a mobile device, you may consider using jQTouch which is beautiful, and I really want to find more time so I can play with it. I’ve heard people say it is better to assign separate stylesheets via scripts and conditional comments rather than use a reset style, but I think we just need to make it accessible. If they can use it, and it looks alright, great. Of course, we cannot run around trying every device and screen size on earth to preview our work, but we still want to have some confidence in the universal accessibility of our content. Maybe the next best thing is to use BrowserShots, and then just do a couple simple tests. Make sure your user can fully experience your website with no CSS and no JavaScript (and no Flash or anything, but that was obvious by this point right?).

The accessibility of different technologies used in the web space will continue to challenge all web developers for quite a few years to come. For now, we need to try being progressive and push our interfaces to new limits every time. Take the accessibility challenge with me and design for the future, but never ignore the past. Let’s start to use HTML5 and CSS3 with progressive JavaScript to enhance our sites, but hold on tight to those poor IE6 users. Look around the web and keep finding new ways to be cutting edge, but still support our poor IE friends.

Written For Nerds and For People of the Web

AUG
4

Let’s face it, IE 6 is old. Windows XP and the original iPod (and a whole bunch of other things) are younger than it. Sadly, there are still a ton of people out there using IE 6. I think about 25% or greater of all Internet Explorer users are using IE 6, and those people still need to be able to use your site. Not ensuring full functionality in IE 6 is a terrible idea and you should be ashamed of yourself for ignoring those people. Everyone knows IE 6 needs to die, but I can only pray that those people are just stuck browsing with the computer in their boring little cubicles working for some firm with a retarded IT department.

I use PNG-24s and even like to use them with rollovers because they look really sharp with their nice transparency and lossless quality. Damn you IE 6 for not supporting them. It is stupid not to use PNGs just because IE 6 doesn’t support them. That doesn’t mean you should be satisfied with that gray background behind your images in IE 6. Those users shouldn’t be stuck with such terrible looking graphics. I have 2 quick and basic strategies for making IE 6 users happier (and another trick to knock their heads straight).

1. Use jQuery pngFix

It is way too easy to use jquery.pngFix.js. You can use it with $(document) to try and fix everything or you can use other jQuery selectors to get the job done for only a couple elements. Don’t feel bad about using the document selector because this code won’t affect any normal web browsers. It will only slow down IE 6 a bit more, but do you really care? The browser is already painfully slow, and we can only assume the poor user is used to it by now. I know it is hard, but you can just stop arguing about efficiency for a second and save yourself some work by using that slow document selector.

2. Use Conditional Stylesheets

You should also probably use a ie6.css stylesheet via a conditional comment in your header like this:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->

If you have rollover PNGs (like I do with my top navigation), you will notice that the pngFix doesn’t work for the regular rollover technique (using PNG sprites). For those things, I basically use one of two techniques. The first and easier one is to replace the background PNG image with a GIF or JPEG image. Yes, IE 6 supports GIF transparency (even as sprites! wow!) but every designer knows it is not even comparable to PNG-24′s transparency. On my main website, I just loaded up the PNG for my navigation in Photoshop and added a solid blue to the background. I saved it as a GIF and added 2 lines of CSS for those IE 6 users (yes we are making their experience slower by adding extra images). On this blog I used a different approach. I stripped the background image of the navigation and set the CSS to show the text (I also had to do it for my portfolio “Visit Site” buttons). You can apply any CSS styles you want, but make sure you load ie6.css after you load your other stylesheets so that it overwrites any previous rules. I stripped a bunch of graphic goodies from the blog and changed some basic styles just because I didn’t feel like spending the time to correct all the float/margin/padding issues with backgrounds and things. I think that is an acceptable approach as it provides a better experience for those users (no more out of place float objects!). Sadly it just doesn’t look as cool, and that’s a nightmare when you are a designer. Someone is missing out on our art.

Optional: Save Their Souls

Convince your user to upgrade, even if it means doing so by evil deceptive methods. Place some kind of a sweet upgrade suggestion to get all those IE 6 people into the 21st century. I happen to really like this nifty little warning that the guys over at Done21 cooked up (again using some jQuery power).

To Sum It Up

IE 6 is terrible, but making your website function in IE 6 is a necessary evil. Make it work, but inform your users they should know better than to come around your cool site with that clunker of a browser. We know IE 6 is cramping the web’s style right now. We also know supporting IE 6 sucks, but understand that to call your site accessible it is absolutely necessary to make sure it functions and looks acceptable in IE 6 until there is no one using it.

Written For Nerds and For People of the Web

JUL
31

A lot of people frequently ask me what I am studying at school. Well I am studying Computer Science, and trying to focus my projects on human-computer interaction and advanced user interface design. Part of my research happens to be in a field called augmented reality. I have one video of an application I created last spring (you may want to fast-forward past the setup of fiducials to about 1:30, sorry this is the only video I have right now):

So that’s a simple application. It just lets users grab virtual objects and move or scale them. You do not have to physically interact with virtual objects for the application to be considered augmented reality. AR (the short term) is really just about relating the real and virtual worlds. It is the cross between the two that separates it from virtual reality. Watch out for applications that are coming to iPhone and other mobile devices that incorporate real world video and computer generated graphics (your online profiles might actually become physically attached to you).

You can see my application that I shared here uses fiducial markers to track the position and orientation of different real world objects, but the future is in tracking things without these strange looking pieces of paper. My final project last semester for a class in Augmented Reality with Steve Feiner did not use markers, but rather relied on compass and GPS information from an Android device to render relevant information on a heads-up display presenting possible donor to the Manhattanville project with information (I am looking for the demo video). In addition to these kind of interfaces, I am also interested in computer vision and I am currently working on a project that will be include an immersive interface (using a heads-up display) that uses tracking without these fiducials in a quest to give computers a better understanding of the real world and make our jobs  easier. The tracking will use work done by Georg Klein and the result should be pretty cool. Stay tuned for updates from my research projects and other side projects I find myself getting into.

Written For Friends and For Nerds

MAY
30

I love SVN. It frequently saves my life when I go to update one of my sites and end up crashing the whole thing. Hopefully all the developers out there are using SVN too. If not you really should head over to http://subversion.tigris.org and get dirty with it (I may make a post later about creating/adding repositories, but I think that is pretty well documented). One of the daily issues I face is that Dreamweaver forgets to tell SVN that I added or removed a file. I work in Dreamweaver about 80% of the time when I am coding for a website (the rest the time I use VIM on my Fedora box), and I use their built in FTP to manage files. Lets take todays example where I am checking in a new version of a template for a site that involved deleting and adding tons of images. Heres what my svn st looks like:

?      images/st.gif
?      images/wt.gif
?      images/lb.gif
?      images/lc.gif
?      images/nav.png
?      images/lt.gif
?      images/sb.gif
?      images/sc.gif
?      images/wb.gif
?      images/wc.gif
!      images/product_1.jpg
!      images/shadow_l.png
!      images/shadow_bl.png
!      images/shadow_r.png
!      images/shadow_br.png
!      images/shadow_t.png
!      images/nav_buttons
!      images/nav_over.png
!      images/shadow_tl.png
!      images/shadow_tr.png
!      images/nav_inactive.png
!      images/nav_active.png
!      images/shadow_b.png
M      teamr4r_add.php
M      css/tr4r.css
M      css/main.css
M      index.php
M      functions.php
M      teamr4r.php

Checking this stuff in right now would be a newb mistake. We need to add all the files with a ? and delete all those files with ! from our repository on the next check-in. Maybe I have ADHD or maybe I just like saving time, but either way I found this cool trick online a long time ago to quickly clean this kind of mess up (sorry to the person that shared it, but I forogot who you are). I have two really useful entries in my ~/.bash_profile that helps me to check-in a lot quicker. I used to use svn add –force * to add all the files, but that’s a couple more letters of typing than I would like so I added these aliases:

alias svnadderall="svn st | grep '^?' | cut -b 8- | xargs svn add"
alias svnridallin="svn st | grep '^!' | cut -b 8- | xargs svn rm"

So what on earth do they actually do? Hopefully you understand what svn st does, look at the man svn pages for help if you don’t. We then pipe that output to our buddy grep, which will find every line that starts with a ? and output that. So we then pipe that cut that output’s first 8 characters (the ? and the spaces after it) so that all that is left is the filenames of each of the files that we want to add to the repository, each on their own line. That ouput is thrown over to xargs, which will take each line and pass it as a parameter to the following command. Since we want to add each of those files to the repository, we run svn add on each line and we are done! svnridallin does the same kind of thing, but instead it finds all our ! files (files that we deleted but forgot to tell SVN about) and runs svn rm on them. After quickly typing svnridallin and svnadderall, we can finally run our svn ci -m “thanks aliases!”.

These two little aliases may not save a ton of time, but I found them to be quite useful. I use them all the time now. If you end up using them or if you find another useful SVN trick, drop me a comment and let me know!

Written For Nerds