Web 2.0 Reflection using HTML and CSS only

You’re most probably familiar with the Web 2.0 reflection technique.  This technique is used to make products appear as if they’re on a shiny surface.  Apple most probably have it in use in their current campaign on the Apple website.

I was thinking about this technique as it can be quite fiddly to put together.  Normally you would use Photoshop or The Gimp or Inkscape to apply a gradient to an existing image, and then save that image as a seperate one, making sure you keep your original should you need it.

I then realised that by using a combination of CSS background images, background-position and opacity you could reproduce this effect purely with HTML and CSS.  I’m yet to wrap up the finer points but here’s the idea.

1. Include your image on the page with an <img …/> tag as per usual.
2. Underneath the image, include a number of 1px high empty <div> tags.
3. On each div tag, set the background-image to be the same as the image referenced in step 1, set the background-position such that the 1px high div is displaying the correct row from the image, and set the opacity such that it fades out a little more on each subsequent div.

This image illustrates the effect up close:

My concerns at this point are:

1. What effect will this technique have on older browsers?
2. How will this break across browsers? (I’m assuming it won’t be perfect)
3. The extra HTML for one image is maybe acceptable, but many images on a page would significant slow down load time for the sake of some shine
4. What effect – if any – will this have on SEO?

I’m considering writing a jQuery plugin that you could use to apply this technique.  You can see the technique in actual use on this page.  View the source code to see how it’s done.

Installing MagentoCommerce – problems

MagentoCommerce is an open-source enterprise level ecommerce system suitable for high end ecommerce websites. We’re in the throes of developing a large solution for a local company, and the developers involved in provisioning the site are installing local copies of Magento on their Apache servers to test with.

Here’s a list of issues that I’ve come across with installing Magento, and how I’ve solved them. For the record I’m using Magento 1.3.2.2 (released 19.07.2009)

1. Can’t get past the second install step

This is the step that asks you for your database password. If the database you’re specifying doesn’t exist then you can’t proceed. I’m sure there’s a bug here because it’s like an error message isn’t displayed. Would love to dig into this but our project is on a tight time frame. MAKE SURE YOU CREATE THE DATABASE YOURSELF FIRST (no tables required).

2. Can’t log in after installation

If after logging in you go to the /admin directory and you can’t log in, it’s probably because of the URL that you used to install it. I tried installing it to http://localhost/, http://127.0.0.1/ and http://192.168.2.10/ (my IP) all with the same result. After googling it seemed to be something to do with Magento refusing to set a cookie for a top-level domain (or somesuch). Workarounds are to use a host name that has a dot in it, e.g. http://localhost.localdomain/ (or in my case, http://bob-desktop.local). Add this to your hosts file, you may have to restart your browser for it to pick it up.

3. Firefox keeps asking you to download a PHTML file.

After doing a completely fresh install of Apache2, PHP5, mysql, Magento etc on a fresh machine (Ubuntu 9.04, Firefox 3.0.11) Firefox kept asking me what I wanted to do with the PHTML file when accessing the freshly untarred Magento directory. It took me ages to find an answer to this, but it was as simple as clearing your cache in Firefox. I dicked around with the Apache configuration, permissions, .htaccess files etc and finally found a comment about the Firefox cache.

4. AllowOverride All

Magento uses a .htaccess file in the root directory. I noticed that the default for /var/www is AllowOverride None which prevents Apache from looking at the content of .htaccess files. While this didn’t cause me trouble, I did set it to “AllowOverride All” while trying to solve #3. The file is /etc/apache2/sites-enabled/000-default, line 11. Note there may be security implications of doing this if you’re the administrator of a shared hosting environment and as such you should read about the AllowOverride directive.

Installation requirements:

From a stock Ubuntu 9.04 machine I had to install the following packages to support Magento:

• libapache2-mod-php5
• php5-curl
• php5-mcrypt
• php5-mysql
• php5-gd
• mysql-server

Also, I have this command on standby to reset the Magento environment back to scratch (deletes the magento directory, drops the database, untars the source file and creates the empty database again)

cd /var/www ; rm -Rf magento ; tar xvfz /home/bob/magento-1.3.2.2.tar.gz ;
   chmod -R a+rw magento ; mysqladmin -uroot -proot -f drop magento ;
   mysqladmin -uroot -proot create magento

That’s all for now.