Welcome to my journal! I am writing about things that affect me in my day-to-day life meaning everything from web development and computer science research projects to my personal thoughts on some things. Enjoy reading and please leave a comment!

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

JUL
13

First off, what the hell is Web 2.0? For many, Web 2.0 is about the syndication and collaboration. It is also about a migration to the web as a platform for application development. That meant migrating all of the data trapped on everyone’s desktops to the web, allowing your pictures to be shared with friends quickly and easily, or your documents to be saved in the cloud so that you and a bunch of friends could collaborate from the 5 or more different places you are during the day. In my opinion the best part about Web 2.0 was the stunning interfaces it presented. The developers realized they could create all the same eye candy as a desktop application on the web. Most significantly, Web 2.0 is about accessibility and scalability. It is about giving quick and easy access of software to as many people as possible, and on every platform that they may have, be it their computer, mobile device or braille screen. Oh yea, I said all people so that means physically handicapped people must enjoy the same beautiful experience in accessing their data through software as every man with two eyes, ears, and a pair of hands.

Web 2.0 Cloud. CC Markus Angermeier

Web 2.0 Cloud. CC Markus Angermeier

So, how have we done? This is a really tough question to answer, but I am gonna go with a “we’re workin’ on it.” I consider myself a power-user and I would not say I have want I think to be true accessibility to my information. So what exactly do I mean when I say truly accessible data? I mean data that is where you want it, when you want it. This goes further as I take it to include something tailored to me on my particular device. That means that if I want news while I am eating my breakfast, I better get news that includes topics that I like to read or watch on whatever the nearest suitable display is.

What is keeping us from having the news along with our friend’s latest updates (categorized by who you like more of course) next to my bowl of cereal? If you were eating breakfast on a Microsoft Surface, sure we could get you some interesting news over to the side of your bowl of cereal. Problem is that I really cannot afford a Surface of my own (damn economy). Right now, I get my news via my iPhone or my MacBook Pro and a bunch of RSS streams ripped apart by Google Reader. Sure it works, but it is not tailored to me. Sometimes my Facebook does a better job of keeping me in touch with the world. The next generation of web applications will do a better job sorting through this data overload I get from not just my Facebook and Twitter, but all of the RSS feeds that I read.

Fever. Now that is a company with a real Web 2.0 model. A one time fee gets your access to a set of code that allows you to harness the computing power you have to show you the hottest things on the web. The updates and actual installation of the software makes it a little less than ideal for the average Joe, but it remains to be a good example of a next generation web application. I think the next generation will be brining our computers processing powers to the web to enhance our personal experience. I wonder if the Google Chrome OS will actually do just that. Take any multi-player first person shooter game (like Call of Duty) as an example and you will see that each user renders their own experience based on a map of data that is shared through the web. The scary thing is that some of us are sick and scared of the web as a platform for our data. The privacy issues terrify people. I still find it shocking that all our medical records are on paper still. I still wonder how many diseases we could cure with proper sharing of medical information, maybe thats where the cure to cancer is hidden, in the data.

So what really is the next step for the web? Before the web takes another step forward, it is going to need to get the harnesses on its data. People need to always know what parts of their data are visible in the cloud. They really want to know what sensitive data is where, and who has access to a copy of it. The data they want to see should be delivered to them, tailored to fit the needs they are able to express to the machine. The next web is a beautiful looking web taylored to your needs, and it is coming with accessible design and development.

Written For People of the Web

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

MAY
30

If you were looking for a page about me, you can find that on www.mwdesigns.com/about. This page is really just about the blog.

So what on earth is this blog all about? The web is full of trashy blogs with people posting about their own personal crap that no one ever reads, I don’t want to write another one of those blogs. I want this blog to be useful to the people that read it. Who do I expect to read it? You! Most likely you are a client of mine, a friendly face in the web design and development industry, or just one of my friends wanting to see what the hell I am doing with my life. Even if you don’t fit into my top 3 audiences, I want to make this blog interesting for you. I may make some very techy posts aimed right at my fellow designers and developers, but don’t worry normal web browsing friends, I will make sure I sort away the techy posts in a category titled something like “For Nerds”. I will also try to write a bunch of posts “For The Average Joe” that will try to give everyone some tips or tricks on how to use the web just a little bit better and can hopefully save everyone some time.

I don’t see most my posts being this short and sweet because hopefully I’ll be explaining things to some depth that teaches you something new, at least that may be a goal. I think its fun to learn something new everyday. So subscribe to my RSS feed (if you don’t know how to do that or don’t know about RSS you really should head over here) and hopefully you can find something here that is worth spending the two minutes to read. Oh, and don’t forget to comment! Thanks and I hope you enjoy my stuff!

Written Uncategorized