Adding random static images to your web-site

Posted on August 4, 2012 by mpatek

There are times when one wishes to add just a “simple” static photo to improve feel and presentation of our/client’s site or photo blog. The idea usually goes like this:

I have a series of images that I want to display on my website.
I do not need a slideshow.
I just want to display one image (on the page load) and I want to grab it at random.
My site is either based on WordPress theme or it is just a plain xhtml site.

To accomplish this task, three web components are needed: html, css, and some sort of JavaScript. For the latter, I picked jQuery library which is well suited for this task. In addition, other standard web technologies will be used, such as JSON and Ajax.
[space]

Prerequisites:

For the following part, we will need to be comfortable with a simple editing of html code, preparing JSON list of our photos, including jQuery/Ajax script, and with a little bit of css styling.

[space]
[space]

Continue reading →

Retiring Windows XP to VMware Virtual Machine

Posted on April 15, 2012 by mpatek

Background:

After many years of working with Windows XP OS, I recently (and finally) upgraded my OS system to Windows 7. I liked the XP system quite a lot, however, with so many recent software applications that were only working under newer OSs (e.g., Adobe Lightroom 4), I realized that it was the time to move on. I did a “clean” install on my current C: partition, which obviously meant that I lost all my programs and settings as installation went through the partition formatting. Another challenge was to maintain my disk partitioning scheme as I am used to have four partitions:

Drive C: the main and boot partition with system maintenance software
Drive D: productivity software (Photoshop, Lightroom, Office, …)
Drive E: web and internet software
Drive F: data only

Since C: partition contains Windows registry, links and registration info for the remaining software on those other partitions is lost. Having so many customizations and applications working well on my XP machine, I did not feel like losing them all at once. This is where the virtual machine comes in.
[tip]A little bit of background – virtual machine is a software implementation of a computer system (real physical computer) that runs programs like a physical machine. It can be thought of as a computer in another computer. It comes handy when one wants to test a software outside of the main computer system or wants to keep older computer setup (or operating system), like in this case.
[/tip]
[space]
Continue reading →

Browsers & Color Management II – the Code

Posted on December 23, 2011 by mpatek

This post follows on the Browsers & Color Management I – Sending Color Patches in through the Web Browser with more details on the code used to drive images through the browser window. As one might have expected, three components were needed: html, css, and some sort of JavaScript. For the latter, I picked jQuery library (jquery-1.7.min.js) which is well suited for this task.

About the code:

jQuery code used in this project is essentially a slideshow script that works on the client side. That explains why we do not need any active connection to the Internet. It will run in our browser providing that JavaScript is enabled. Since it turns images into a slideshow, it can be used for many other purposes, e.g., to display photos on our personal web site. jQuery is free, open source software, dual-licensed under the MIT License or the GNU General Public License, Version 2 and it is included in the “js” folder inside the zip file.

[space]

If you have not done so before, download it here:

[space]

[download id=”2″ format=”Marcel1″]

[space]

[note]The code below is just a sample of the whole script with associated files, shown only to outline the structure and logic of the script.[/note]

[space]

Continue reading →

Browsers & Color Management I – Sending Color Patches through the Web Browser

Posted on November 27, 2011 by mpatek

While writing my previous posts on color management and web browsers [1, 2], I realized that instead of guessing as to whether a browser understands how to manage colors, a few measurements of color patches would go a long way. Questions, such as, what will happen with untagged images in Chrome 11 or is it safe to use sRGB profile for photos displayed on a wide-gamut monitor would then be easier to answer. By all means, these questions are not trivial and would deserve an in-depth study of the browser documentation and perhaps many hours spent on Google. Unfortunately, with many browsers one would still be unclear on the exact way by which are the (un)tagged images processed.

[space]

To address browser color capabilities in the most straightforward way, we would just send images of RGB primaries through the browser and record their colorimetric values. In order to do that, we would need a set of images that are either untagged (no color space information is associated with them) or images that carry color space information in the form of icc/icm profile. After the measurement is done, a quick comparison with known CIE 1931 chromaticity coordinates of RGB primaries of standard color spaces (sRGB, Adobe98 RGB, Pro Photo RGB) would reveal any color processing done by the browser. To measure the radiometric output, we can use the same device that we use to calibrate our display.

[space]

To make measurement of colors from within a browser easier, I provide jQuery script that displays different color patches and allows measurement in a semi-manual manner. The script runs in any browser that has JavaScript enabled. Included are gray and RGB ramps in four different variants; untagged and tagged with sRGB, Adobe98 RGB, and ProPhoto RGB icc profiles. After measuring these patches directly from the browser, we can both judge its color management capabilities and also obtain display characteristics, such as, display gamma, color temperature and gamma values for each RGB channel. On that later (link).

[space]

The Upshot of the Script:

Inter-browser compatibility (IE, Chrome, Firefox, Safari, Opera, …)
No installation (all necessary files are included)
No need to be connected to the Internet
Simple navigation (NEXT, PREVIOUS, RESET)
Customizable (supply your own images)
Free

[space]

Continue reading →

Enabling color management in Google Chrome

Posted on November 19, 2011 by mpatek

In my previous post, I provided a step-by-step guide to enable full color management in the Mozilla Firefox browser. While Firefox handles colors in a very respectful way, there are other browsers that cannot be setup (yet) to effectively manage colors (IE, Opera). For some time, Google Chrome was not capable of managing colors also or its setup was just undocumented. However, while there are several pages on the Internet describing how to enable color management in Chrome, results are often unreliable (read more below).

[note]In general, the first part of troubleshooting annoying color shifts is checking that our monitor is calibrated and profiled.[/note]

This post will show modification in a simple start-up option that enables management of colors in the Chrome browser (I am intentionally avoiding the term “color management” for the reasons explained below).

Continue reading →

Full color management in Firefox – settings

Posted on November 2, 2011 by mpatek

Every day, hundreds of thousands of photos are uploaded to the web. There are many web surfers, photography amateurs, pros and photo agencies browsing for the best pictures. Nothings gets more frustrating then seeing an image that took several hours of editing and rigorous color management discipline, only to realize that colors got shifted and that the whole visual experience is compromised. Main culprit is often wrong setup of the web browser or use of browser that cannot be setup to effectively manage colors (IE, Opera).

[note]In general, the first part of troubleshooting color shifts is checking that our monitor is calibrated and profiled.[/note]

This post will guide you through the powerful options in Firefox that enable color management of images that are tagged with icc profile. If the image is not tagged with icc profile, its color interpretation will default to the computer system color space, which in most cases is close to sRGB and and then converted to the monitor RGB. If the image is tagged with icc profile and if there is no monitor profile available, monitor RGB values are assumed and the monitor default profile is used for conversion. For calibrated and profiled or any decent monitor, results for tagged and untagged (but edited on standard sRGB gamut monitor) images will be just fine. However, troubles will most probably arise on a wide-gamut monitor.

Continue reading →

Detect iPad and iPhone in web browsers

Posted on October 9, 2011 by mpatek

In this short post, I will share a web page redirection code for users of iPad, iPhone or ipod who have no access to Adobe Flash media.
[note]In the first week of November 2011, Adobe announced that it will cease developing its Flash Player plug-in for mobile browsers. The next most affected devices(besides the iPad, iPod, iPhone) are those based on Android OS.[/note]
Below is simple javascript that needs to be inserted into the top section of your web page (between the and tags) to re-direct those users to an alternative page.

[sourcecode language=”js”]
<!–ipad redirect–>
<script language=javascript>
if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)
|| (navigator.userAgent.indexOf(‘iPad’) != -1)) {
document.location = "http://www.yourdomain.com/directory/index1.html";
}
</script>
[/sourcecode]

In this example, /directory/ is optional (in case that your site or iPad friedly version of your site resides in another directory) and index1.html is an alternative index.html that does not contain any Flash code. Index1.html is essentially a copy of the index.html where the Flash part is replaced with JQuery or html5 code to display the original slides or movie. It is where the visitor will be re-directed to.

Continue reading →