I had an interesting discussion yesterday with the owner of LaLa Media (lalamedia.ca).
The conversation focused on the issues of developing web sites that are cross platform friendly. Invariably the problem dealing with browser bugs came up. In particular how IE6 appears to be especially buggy and how it tends to have problems with CSS/XHTML div positioning (among other things).
Side note: As I’ve mentioned before, the upkeep of this site is a financial burden (but I think this blog does provide value to the community), as such I often collaborate on web projects to help with the server fees etc., which lead to the discussion at hand.
One particularly vexing issue we discussed was how IE positions DIV elements (via CSS) compared to other browsers such as Firefox, Opera etc. A site structure that looked great in other browsers often presented design challenges when using IE. Of course many of the Firefox fan boys were quick to jump in and say “don’t design for IE”, I think that is somewhat unrealistic, even though I’d love 
to comply (I’m smiling here). A case in point, if the client uses IE, the finished site has to work properly in IE as well. 
In terms of browser adoption, many of you might find this resource helpful: Browser Statistics. According to the W3schools.com statistics, in March of 2008, IE comprises 53.1% of web users and non-IE browsers are used by 41.6% of users. Hence the importance of cross browser compatibility.
A specific issue encountered, that motivated me to post Part 1 (the introduction and ground work) was that the designer uses a Windows 2000 platform and unfortunately he cannot install any IE browser greater that IE6 (the buggy one). One pertinent observation was the viewing of the site via browsershots.org. For those not familiar:
“…Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the BrowserShots central server… ” where you can see how your site looks on the large, growing number of browsers available. That is one tool I suggested he use to garner an understanding of how different browsers render (because Windows 2000 could not move beyond IE6).
As he (the designer) also uses Apple, I assumed that perhaps he could make use of a Linux box in his network which would allow him to view all versions of IE without having to upgrade his existing Windows to XP. Open source does have it’s benefits! IE on Linux you ask? Yes, on Linux. last year I bumped into a great tool that someone sent me. It’s called IEs 4 Linux and here’s what they have to say:
“…IEs4Linux is the simpler way to have Microsoft Internet Explorer running on Linux (or any OS running Wine).
No clicks needed. No boring setup processes. No Wine complications. Just one easy script and you’ll get three IE versions to test your Sites. And it’s free and open source…“
and
“…Who is the target public? WebDesigners that want to move to Linux but still need to test their sites on IE, People who have to open IE-only sites.
The IEs installations are smaller than usual because they include only the necessary files to have a good test browser (there is no Outlook, Media Player etc)…”
Their IE7 is currently working in Beta here: http://www.tatanka.com.br/ies4linux/page/Beta
So… Here’s the game plan.
I’ll be using Shuttle box to install Linux and VirtualBox. VirtualBox will be used to install different versions of Linux (and perhaps Windows too), with which applications, settings, etc. can be installed or changed without damaging the the primary OS. I think it’s a great tool for any web developer or designer as it allows for maximum viewability (is there such a word?), without having to boot up an extra PC or reboot the existing PC to a different OS. Here’s what we’re going to use:
Software:
Linux (Ubuntu 8.04): http://www.ubuntu.com/getubuntu/download
VirtualBox: http://www.virtualbox.org/wiki/Downloads
IEs 4 Linux: http://www.tatanka.com.br/ies4linux/page/Installation
Hardware:
1) Shuttle SN68SG2 Socket AM2 Barebone - NVIDIA 7025, Audio, Video, PCI Express, Gigabit LAN, USB 2.0, Firewire, Serial ATA, 250 Watt Power Supply.
2) AMD Athlon 64 X2 4200+ Processor ADA4200CUBOX - 2.20GHz, 1MB Cache, 1000MHz (2000 MT/s) FSB, Windsor, Dual-Core, Retail, Socket AM2, Processor with Fan.
3) Kingston 1024MB PC5400 DDR2 667MHz Memory (2 of these for 2GB).
4) Western Digital Caviar SE16 500GB Hard Drive - 7200, 16MB, SATA-300, OEM.
The above is a bit hard financially, (it’s at a cost of $473 CAN), but worthwhile because I can put it to very good use (in great part because of VirtualBox). Besides, someone already gave me a used monitor, keyboard and mouse.
I’ve done my best to check Linux compatibility, and I don’t think I’ll have much issues in terms of this.
Part 2 of this post will describe any OS installation problems an solutions I may have encountered. It will also provide the installation steps I took for VirtualBox (they are very easy). And as a side note I’d also like to install XvidCap (so I can show videos of some things in future posts).
As always, please feel free to comment as I often find I learn a lot from all of you!
Cheers!
Update: Part 2 of this post is here: Browser Problems - Creating a Linux Based Virtual Box - Part 2 of 2
Technorati Tags: shuttle, linux , ubuntu, video, network, drivers, fix, how to, SN68SG2, ethernet, virtualbox, marvell, envyeng, nvidia
Loading ...
There are 11 comment(s) added so far...
IE6 from IEs4linux doesn’t display right - I’ve found IE6 in a virtualized XP to be a wiser option. VirtualBox also boots faster then IEs4Linux.
@Arp - Really? I didn’t know that, thanks for the heads up. I should include this comment in the Part 2 conclusion! Thanks.
This a fantastic tutorial. You don’t really realise how useful virtualization could be until you read things like this one. I have just read another tutorial about Xen in servers in Howtoforge, and it’s a great idea from the security point of view for websites.
Thanks so much for everything.
:O)
@Olga - Thanks! It’s fun to do, not to mention how helpful a virtual environment is!
I’m still waiting on the parts, so that I can write Part 2 (and report any hardware issues).
Thanks again.
I use virtualbox too, but just for compiling on Windows. Just don’t fully shut down the guest OS when closing, simply save the state. Then it’ll start really quickly, just 1-2s for me.
@Vadim P - Thanks. I was not aware of that (saving the state for a quick start). Appreciated!
Post a comment here: http://www.braindonkey.com/2008/02/18/linux-on-a-sn68sg2-shuttle-hates-penguins/
when you get this working. I’m looking to do the same thing, so hopefully you will have any issues fixed. (Which will make this easier for me). Wheeee….
Well, it should work according to these guys: http://on-disk.com/cms/index.php?wiki=OS_Compatibility_Shuttle_SN68SG2_barebones
They say: “This unit (Shuttle SN68SG2) and available options should work with any up to date Linux Operating System, or any up to date Linux Distribution released in or after October 2007.”
You are going to use Hardy, right?
[…] this month, I posted Part 1 of “Browser Problems - Creating a Linux Based Virtual Box” where the issue of being able to load different environments to test web site development […]
I think the device is Ok to install Linux. I have even played games on the same device, the computer works quite well
@cncoke - Thanks, I also find that it is faster than I originally thought. One thing I noticed is that I had to flash the bios with the new one from here: http://global.shuttle.com/download03.jsp?PCI=19&PI=647 (Because a cold start kept trying to boot off the network).
For other people reading this comment, the AWDFLASH utility is found at the same URL by clicking the “Utilities” tab.