A long time ago in a galaxy far, far away…or more accurately, France, the forces of good and evil do battle once more.

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the Death Star, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

No, it’s not the seventh instalment, by George Lucas, of the Star Wars series, it’s a collection of striking images, created by Cédric Delsaux, involving characters from the franchise in bleak surroundings.

They include robots C-3PO and R2-D2 checking out a smashed up Citroen, overweight crimelord Jabba the Hutt in a derelict room and bounty hunter Jango Fett holding up a car.

Urban Star WarsUrban Star WarsUrban Star WarsUrban Star Wars

(click on the images for more detail)

Darth Vader is also pictured swinging his red lightsaber against a sinister-looking building while Stormtrooper snipers prowl on the roof.

And fans of X-wing fighters and Imperial Walkers have also been catered for in the stunning images.

The Force was clearly strong with French photographer Cédric Delsaux. He also managed to give his photographs a crisp science fiction feel despite the stark urban backdrops in them.

Firstly, Delsaux captured bleak landscapes in Paris and Lille, and then photographed the models, which were between 20cm and 40cm tall. He then merged the two using a computer.

I decided to mix together the common suburbs and some fantastic characters, which I think has created something poetic.

Adam Lamping, of fans’ website jedinews.co.uk, said: “It’s such an unusual thing to see Star Wars characters from this galaxy far, far away juxtaposed with everyday suburban scenes. The pictures of the Emperor’s Royal Guard are particularly impressive with the red against the dark grey skies. It’s been captured perfectly.”

You can see the entire set on Cédric Delsaux’s website.

Many people who have worked on websites know that standard HTML and CSS allows the webpage author to assign any font of their choosing to a text element on a page. However, they also know that there is no guarantee that the element will show the desired font, as the browsing user may not have the same font, or set of fonts, installed on their local system. More often than not, only a set of “common” fonts are installed, for example Arial on the PC and Helvetica on the Mac. This has been a significant issue which has been addressed by two methods: the Fahrner Image Replacement (FIR) method and the Scalable Inman Flash Replacement (sIFR) method.

Fahrner Image Replacement (FIR):

Fahrner Image Replacement (FIR), named after Todd Fahrner, one of the original creators, is a Web design technique that uses Cascading Style Sheets (CSS) to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles.

How it works:

FIR replaces short passages of text by surrounding the text in two sets of HTML tags. At runtime, CSS is used to hide the HTML element and replace it with a background image containing the exact words as an image.

FIR has come under fierce criticism from the opponents, such as Quirksmode, as it bloats the use of CSS, and Joe Clark for its failure in screen readers. FIR has largely been superceded by the Scalable Inman Flash Replacement method.

More in-depth detail can be found at the following links:

http://www.stopdesign.com/articles/replace_text/
http://www.alistapart.com/articles/fir
http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/
http://www.sitepoint.com/article/header-images-css-xhtml
http://www.mezzoblue.com/tests/revised-image-replacement/

Scalable Inman Flash Replacement (sIFR):

Scalable Inman Flash Replacement (sIFR), originally conceived by Shaun Inman, is an open source JavaScript and Shockwave Flash based technology that enables the replacement of text elements on HTML web pages with Flash equivalents.

How it works:

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash. Here is the entire process:

  1. A normal (X)HTML page is loaded into the browser.
  2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
  3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
  4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
  5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

More in-depth detail can be found at the following links:

http://www.mikeindustries.com/sifr/
http://wiki.novemberborn.net/sifr/
http://www.adobe.com/devnet/dreamweaver/articles/sifr_demo.html
http://www.mezzoblue.com/archives/2004/10/26/sifr/

Internet Explorer 6 is notoriously rubbish at supporting PNG transparency resulting in images that appear with a grey background; not very useful. All is not lost. Angus Turnbull has created a work around for this issue. You can get all the information needed at this link http://www.twinhelix.com/css/iepngfix/, including support forums. This is possibly the easiest way to get full PNG transparency and importantly the technique works for CSS backgrounds, albeit when no used with the no-repeat attribute.

The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image.

To download this permanently: iepngfix.zip (15kb).

How to Implement

  1. Put the iepngfix.htc file into your CSS directory
  2. Put the blank.gif file into your CSS directory (otherwise you will need to edit the HTC file)
  3. Edit your CSS to include the following line behavior:url(iepngfix.htc); for the <img> tag

Known Issues

This uses CSS “behaviors”, a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don’t include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).

You should not apply other visual filters to the iamge with the PNG behavior because these other filters do not respect the alpha channels and the result will most likely not be satisfactory.

Alternatives

An alternative source that I recently discovered is found at the following link http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

CAPTCHA

A CAPTCHA (an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”, trademarked by Carnegie Mellon University) is a type of challenge-response test used in computing to determine whether or not the user is human. The term was coined in 2000 by Luis von Ahn, Manuel Blum, and Nicholas J. Hopper of Carnegie Mellon University, and John Langford of IBM. A common type of captcha requires that the user type the letters of a distorted image, sometimes with the addition of an obscured sequence of letters or digits that appears on the screen. Because the test is administered by a computer, in contrast to the standard Turing test that is administered by a human, a captcha is sometimes described as a reverse Turing test. This term, however, is misleading because it could also mean a Turing test in which the participants are both attempting to prove they are the computer.

Captchas are used to prevent bots from using various types of computing services. Applications include preventing bots from taking part in online polls, registering for free email accounts (which may then be used to send spam), and, more recently, preventing bot-generated spam by requiring that the (unrecognized) sender pass a captcha test before the email message is delivered.

Captcha Implementations

ColdFusion: