Flash is to websites what airconditioning is to a car: you might call it luxury, you might call it indispensable, but you cannot call it a car. It’s just airco.

For some reason, people that have experience with creating Flash applications also think they can make websites. “Just throw some Javascript on the homepage and it plays beautifully”, right? Wrong! If you have never heard of proper markup, SEO, the limitations of Javascript and Flash, you should leave making websites to professionals. If you insist that your branding cannot be properly expressed with just HTML/CSS/Ajax, you can add a Flash object to your site. But on its own, it’s a sorry excuse for a website.

Case: Le Fabuleux Marcel de Bruxelles

Le Fabuleux Marcel de Bruxelles is a new brand of singlets (’wifebeaters‘ in English, or ‘marcellekes’ in Bruxellois). The idea is good, the branding is beautiful, the advertising is top-notch (not surprisingly, since the founder is also one of the founders of the ad agency LG&F).

But then you take a look at the brand’s URL: it’s not a website, it’s a Flash blob. The first page is just a Flash detector with no useful information what-so-ever. For search engines, it might as well be empty:

• the only information that’s not style or Javascript is the following line: <title>Le Fabuleux Marcel de Bruxelles</title>. No hint of what the page is about, what the product is about. No description, no keywords, not a word of text. Not one.
• the homepage only checks Flash compatibility and if your browser can do Flash, shows a clickable image to the actual Flash blob. This link,however, is not in HTML, only in Javascript. So it is not recognized as a link by search engines. For non-human readers, the whole site consists of only 1 page, and a useless one at that.
• Since Google does show the “One more click and you will be on Marcel, le site officiel (…)” text, which is not in readable HTML on the page, it must be that Google spiders get a different page than regular browsers. That would be cloaking, and Google doesn’t like it.
• if the search engines would get to the Flash movie page, it would not help. It is totally devoid of anything resembling meta-data. The movie itself is a auto-running slideshow(!) with pretty pictures.
• In the movie there are moments where you can click on words to get the high resolution photos. Those are beautiful, huge (3MB!) and offered in TIFF(!!) format.

We can only conclude that “Le Fabuleux Marcel de Bruxelles” is determined to stay as obscure as possible. God forbid some interested person would find them in Google.

Related posts:

1. Playing MP3 with an embedded Flash player (There is an updated post at Click to hear the...
2. Adsense also looks at search terms I had been wondering just how much information Google Adsense...

Rant: the way external CSS stylesheets are included in HTML now is not logical nor convenient.
So: <link type="test/css" href="(...).css" rel="stylesheet" /> is wrong,
it should be <style type="text/css" src="(...).css" />.

Why?

Because src is for now, href is for later

In a HTML page, there are a number of files (URLs) that have to be fetched to display:

• any text in the document, within <h1>, <p> or <div> tags or not
• any images, specified as <img src=”" /> (always external)
• any iframes, specified as <iframe src=”" /> (always external)
• any javascript, specified as <script src=”" /> (external or in-line)

There are also links to other URLs that are not for now: maybe one click away, maybe just there to be interpreted by the web browser:

• anchor links, specified as <a href=”"></a>
• links: prev/next, archive links, feed link, specified as <link rel=”" href=”" />

So: you need the src="" referenced files immediately, and the href="" ones not. The way stylesheets are referenced now breaks this logic.

Because <style> is for stylesheets

Why can you embed in-line CSS style information within <style> tags, but not external stylesheets? Compare that to Javascript:

Inline JS: <script>...</script> and
External JS: <script src="" />

That makes sense. The same should be possible for <style>. The way it works now is counter-intuitive and antiquated. So please add it to XHTML 1.1.

Related posts:

1. There are no Flash websites Never say “we have a Flash website”; there is no...

Since the attributes alt and title also serve an accessibility purpose: what do screen readers (text-to-speech) make of the combination? Do they cite both, or also choose one of the two?

Related posts:

1. Styles should not be referenced by a <link> (If you don’t work with HTML, this next post will...
2. Using movies on a web page So you recorded those first steps of your youngest,...
3. There are no Flash websites Never say “we have a Flash website”; there is no...

We can get a group discount:

• 5 or more delegates and get 10% discount
• 10 or more delegates and get 15% discount

This is the reason why I’m asking this now:

• May 15th and pay just £400/delegate
• May 30th and pay just £425/delegate
• June 30th and pay just £450/delegate
• July 30th and pay £475/delegate
• August 30th and pay £525/delegate
• September 10th and pay £575/delegate

So: leave your details here if you want to join: if we get to 5 people by May 15, we take the 10% discount (£360 = 526 euro), if we don’t, but we get to 10 people by May 30th (Barcamp Brussels might help), we take the 15% discount (also £360), if not, it’s everyone to themselves.

Confirmed speakers:

The conference is already packed with exciting speakers, including the creator of Rails, David Heinemeier Hansson, Pragmatic Programmer Dave Thomas, best-selling author and passion maven Kathy Sierra, Rails core developers Jamis Buck, Marcel Molina, Jr., Thomas Fuchs, Rails authors and trainers David Alan Black, and Chad Fowler, Rake author Jim Weirich and many more to be announced.
(from europe.railsconf.org)

Related posts:

1. Web 2.0 conference in Brussels The guys from Shoob are organising a Belgian Web...
2. LeWeb3: the Babel effect I went to see the movie “Babel” recently, and I...
3. Two days at LesBlogs Paris What I saw I just spent 2 days at the...

If you have no interest in programming and/or database management, go hug somebody and skip this article.

PRINCIPLE
In the most simple version, you have 1 extra table in your database that looks like this:

query_id   int % unique ID of the query
template   varchar(1000) % or even longer
var_list   varchar(255) % comma separated list of vars

An example:
[ 33 , "select * from users where user_id = %user_id% AND type = '%status%' " , "%user_id%,%status%" ]
Instead of constructing your SQL code in your (PHP) code by making one big string and then executing it, you call a function my_exec_query(query_id,array_params)
This function will

• get the template text
• walk through the comma-separated list var_list and for each variable inside, look the corresponding value up in the array array_params (or this can be a dictionary or a hashtable).
• when all substitutions are finished, execute the SQL code and return the result as (connected/disconnected) recordset or an array.

The advantages of this approach are (without taking into account all kinds of optimisations that are possible):

1. no SQL code in your programs.
2. every version of the database contains the correct queries that work on it
3. the SQL template can be reused in different location of the code
4. the SQL template can be edited through a web interface
5. all SQL activity goes through one component, making it the ideal place to add statistics: which are the slow procedures, which ones bring back the most data

Main disadvantage: if you execute it in the naive approach as above, you have to execute 2 SQL queries for each function call (1: fetch the query template and build the real SQL, 2: execute the real SQL). But that is easy to fix.

OPTIMISATION #1: caching of the templates
You keep the whole table of queries in memory. When a specific query template or parameter list is updated, the new version is loaded into memory. Even if you would have 500 different queries, this would take something like 600KB in memory. That is normally not a problem (if the application servers have e.g. 2GB memory).
If you have more than 1 application server, and a query template is edited from server A, the other servers (B, C) should be instructed to reload too. This smells like we need some versioning.

OPTIMISATION #2: version control

query_id   int % unique ID of the query
template   varchar(1000) % or even longer
var_list   varchar(255) % comma separated list of vars
version   int % version number
created   datetime % creation time of the query
modified   datetime % last modification date
remarks   varchar(100) % can contain author, ...

Every time we execute a query, we check if it was constructed with the current template version. If not, the template and parameter list are reloaded, and the query is reconstructed with the new template. If you’re gonna do this every time, you might put it in a stored procedure.
Another advantage: if we make an error while editing, chances are the procedure will not compile properly. That’s alreadya good way of avoiding sloppy updates.

OPTIMISATION #3: stored procedure
For each query, a stored procedure is created with variable @parameters.

CREATE PROC procedure_name
    [ { @parameter data_type }
    ] [ ,...n ]
AS sql_statement [ ...n ] 

This stored procedure will check versions, but more importantly it can be precompiled (so your SQL server already knows which indexes and joins to use and in which sequence), and will run faster. But what significant name can we give it? query_33 doesn’t mean a lot to a database admin or a programmer.

OPTIMISATION #4: taxonomy/significant names
We give each query a name. What I did was the following:

query_id   int % unique ID of the query
category  varchar(20)
name  varchar(20)
template   varchar(1000) % or even longer
var_list   varchar(255) % comma separated list of vars
(...)

The ‘category’ is something like ‘user_management’ or ’statistics’ and the ‘name’ is the name of the individual query: e.g. ‘insert_user’ or ‘top-tags’. You can also use the ‘category’ to decide on who is responsible for editing. Or you could set-up a stronger authorisation scheme, with authors having editing rights on certain queries and not on others.
The stored procedures that are automatically created will now have understandable name ‘user

OPTIMISATION #5: how to give a variable number of parameters to a function
I started with a Dictionary (VBScript style) for the parameters: I created it, filled it with the variables I needed (maybe one, maybe 10) and used it as a parameter in the function call my_exec_query(query_id,dict_params). This can also be done with (a pointer to) an array, a RecordSet, … Anything that maps ‘keys’ onto ‘values’ would work.
Wordpress uses another trick: they use the URLencoding or query string syntax: wp_list_cats('exclude=10,11,12');. This is basically a well-known way to do serialisation into a string; you could put them in an XML document too, but that’s a lot of overhead.

OPTIMISATION #6: error checking
When the substitution of variables in the template is done, you can still check for obvious errors: a %PARAMETER% that has not been substituted (forgotten?), a string where there should be a number (no enclosing quotes). You could think about ways to distinguish between required parameters (e.g. SELECT * FROM users WHERE id = %ID%) and optional parameters (e.g. INSERT INTO log VALUES ('%PLACE%', '%ERROR%' )). This can be done by adding a ‘!’ after the name in the parameter list: ID! is obligatory, PLACE is not.
One can also wonder wether we need the list of parameters as a separate field, we could also search the template text for any occurrence of %[A-Z][A-Z0-9_]*%. I just used the list because it made the substitution faster.

And I’m still forgetting truckloads of enhancements.

Now if someone is attracted by the advantages of this method, and wants to create a PHP/Python/Ruby component that neatly puts all this functionality into one package, let me know!

No related posts.

my own WikiRAD article (July 2005)

Playing around with PHP and wikis at the same time made me think on how web-based editing and compiling would be a good way to develop and run web applications

Feed43

Create an RSS feed out of any web page by using regular expressions with a nifty Web2.0 user interface. Lots of services are based on URLs and use RSS as input, so this can be the start of a first application. E.g. I just created an RSS feed for the Stubru playlist pages out of a Stubru Javascript file. Imagine I could now tell Feed43:
for each item in feed_that_I_just_created {
parse_the item_url
publish an rss feed for this item_url as feed_url_X
}
and then start working with that content too.

Amazon S3

web-based outsourced storage for any application, which made John Keyes and Peter Van Dijck to ask themselves: “Can you use Amazon S3 to create the new Flickr killer?”, and which made me think: but what if not only the storage, but the whole program was run by a 3rd party?

Iamalpha (via Richard McManus)

AOL’s new initiative for building microformat-based applications. It’s a bit early to grasp the extent what what they’re trying to accomplish, but I think it’s potentially more than just widgets. They don’t have a web-based IDE yet, but they do have a copy/paste code-validator. Most importantly: the applications are run by AOL!

YouOS (via Jeremy Zawodny)

a web-based OS that allows you to develop Javascript-based applications in a web-based IDE, with version control and compiling. It’s one of the products coming out of Paul Graham’s Y-combinator startup incubator.

For me, these are all indicators of a trend: there will be a day when you don’t need your own machines to run your complete (complex) web applications: the storage, the authentication, the aggregation, the statistics will all run on 3rd party servers, some of which you pay, some of which you don’t. I’m not talking about service providers like Ning: they allow you to configure/customize a web app that they developed, not you.
I see a web-based IDE for RubyOnRails coming, I think Yahoo, Google and Amazon will building the bricks too, and pretty soon you will be able to develop a Flickr-like photo management application and run it without having a machine of your own:

• user/group management: Yahoo or Google or Microsoft’s single sign-on
• photo storage: Amazon S3
• database: some future version of Google Base
• email: some future version of Yahoo or Google groups
• photo tags/folksonomy: some future version of del.icio.us (see my Folksonomizer post)
• comments: some future version of Gtalk or Campfire (mental note to self: write something about commentalizer and use of URI as web API)

Give it another year.

Technorati Tags: rss, feed, ruby, webdev, web2.0, yahoo, google, amazon, aol

Related posts:

1. RAD frameworks: development bliss in 20 min or less Ruby On Rails started a nice trend: post a screencast...
2. Online software development: the WikiRAD I love the idea of social software. Specifically, while...
3. Pipes + SQL = Structured Web Query Language Let’s remix 2 original observations: In Yahoo! Pipes, what used...

WHAT IS A BARCAMP?

(photo by miss_rogue)

Barcamp was first organised in LA by Chris Messina and some buddies.

BarCamp is an ad-hoc un-conference born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos, and interaction from attendees.

It is not your regular conference:

• No spectators, only participants: Attendees must give a demo, a session, or help with one. All presentions are scheduled the day they happen. Prepare in advance, but come early to get a slot on the wall.
• No fixed agenda: talks, demos and topics are proposed by the attendees when they arrive on a central whiteboard.

ORGANISATION

(photo by nickgray)

The way it’s probably gonna be (lots of details still have to be filled in): everyone arrives in the morning, gets a badge and a T-shirt and add their stuff to the presentation wall. After some breakfast chatting, presentations start in 4 separate rooms. Between (and during) sessions people escape to the central space for coffee and gossip. There is a small lunch, and afterwards the presentations continue. Around 17h there is a closing session and all return happily home.

WHO SHOULD ATTEND

(photo by Breyten)

When you come, be prepared to share with barcampers.
When you leave, be prepared to share it with the world.

You should be willing to learn and meet new people. The central topic is “technology and its influence on life/society“, so you should have at least some interest/experience in topics like: blogging, group dynamics, CMS, Webdesign, digital photography, ‘long tail’, blogger’s psychology, Bubble 2.0, guerilla marketing, mobile, interactive TV, Web APIs, aggregation, podcasting, timeshifting, (electronic) music … (more details on Barcamp Brussels)
Just remember: No spectators, only participants!

HOW TO PARTICIPATE

(photo by blakeburris)

You can register by adding your name to the Barcamp Brussels page. That’s all. And actually show up, of course.

If you’re gonna join, please spread the word by adding this badge to your blog or one of your blogposts:

Want this badge?

DETAILS
We already kind of have a location, but we first have to fix the date. Good candidates, by looking at the page, are May 19 or May 20. Participation is free and we will try to get all catering and apparel sponsored. More details will follow on the Barcamp Brussels page and on this blog.
All feedback and suggestions are welcome and can be added to the wiki page or by contacting me through peter @ forret.com .
See you there!

Related posts:

1. Barcamp Brussels: May 20 2006 So there it is: after some feedback on my Barcamp...
2. Barcamp Brussels: 10 days to go! Saturday 20 May Like M.A.R.R.S. said: “Countdown is progressive“. Ten...
3. Barcamp Brussels #4: 10 days to go Barcamp Brussels #4 is coming closer: Saturday Dec 1st...

Highlight a few evergreens in your navigation system and link directly to them. For example, my own list of almost 300 Alertbox columns starts by saying, “Read these first: Usability 101 and Top Ten Mistakes of Web Design.”
Also, remember to link to your past pieces in newer postings. Don’t assume that readers have been with you from the beginning; give them background and context in case they want to read more about your ideas.

As you can see in the sidebar on the right (if I haven’t changed my layout by the time you read this), “This blog covers stuff like [...]“ and then I have some links that show up when you click the [...] button. I list some of the more typical posts (Podcasting with Blogger and Feedburner – Oct 2004 as well as tango moves) and some ideas/projects I launched (folksonomy, photofeed).

So what kind of links to your own posts could you make:

• ‘classic’ posts: posts that are typical for the subjects you address
• ‘remarkable’ posts: posts that are are maybe not typical, but that you are somehow proud of (in my case, “Imperial time units” comes to mind)
• ‘popular’ posts: the posts that people visit most, link most to, have most comments on, …

The first 2 are probably links you better indicate yourself, the last one could be based upon aggregated stats. Let’s say you want to make each list as an RSS feed, so you can display it through PHP or Javascript on each blog page.

• handpicked (’classic’, ‘remarkable’, ‘controversial’) posts: put them in del.icio.us or furl and use the RSS feed
• ‘popular’ posts: imagine a statcounter of somekind, that measures the #page hits and visitors, that also checks Technorati, Google Blog Search and Yahoo stats, that also uses the Feedburner item stats (if any) and the # of comments per post (don’t know where that could come from) and that aggregates these together according to your own wishes. The end result should be the Top 20 of your own blog posts, in RSS format.

Any ideas on this?

UPDATE: I created an overview page for my blog, linked from the blog homepage.

Technorati: blog – stats – design – stats – nielsen – usability

Related posts:

1. Styles should not be referenced by a <link> (If you don’t work with HTML, this next post will...

Moroccan Blue topped the list of colors at New York Fashion Week’s Fall 2005 collections, according to Pantone, Inc., the global authority on color and provider of professional color standards for the design industries.
Each season, Pantone surveys designers showing at New York Fashion Week and collects feedback on prominent collection colors, color inspiration, color philosophy and each designer’s signature shades. This information is used to create the PANTONE Fashion Color Report.
The top 10 most directional women’s ready-to-wear colors for Fall 2005 (along with printing values) are
(converted by me to RGB):

from creativepro.com

Technorati: pantone – color – webdesign – graphical

Related posts:

1. When (if) Spring comes, these are its Pantone colors According to Pantone, Inc., the global authority on color and...
2. Shades of purple Have you ever gotten into a discussion with a woman...
3. Poor-man’s sepia conversion Working for Pixagogo makes digital imagery my daily bread,...

On a seemingly unrelated point, I am currently developing some stuff in PHP (codeword ‘photcasting‘ but more on that later) and I realise my development environment is so amateuristic: I use a text-editor with FTP support (the last couple of years it has always been Editplus), and everytime I save some code, I overwrite the older version on the ‘live’ server. I also develop on different PCs in a typical week (easily 3) and so I don’t have 1 development PC with PHP running where I could stage everything before I deploy it to my ‘production’ site. With a bad broadband connection, when a ’save’ operation goes wrong, you end up with a ‘crucialstuff.php’ script file that is empty (0 bytes) and brings your whole site down. Unfortunately, I know this from (repeated) experience.

Earlier today, I was thinking about these 2 issues one right after the other and bam: they collided. I have a new development paradigm: the WikiRAD.

‘WikiRAD’ development

WRITE CODE

• you write your code with your browser in a Wiki-style editor, with syntax colouring added (haven’t seen that in a Wiki editor yet). The code resides on a WikiRAD server (with RAID5 disks, daily backups, …). You need no other software on your PC to be able to develop software.
• the Wiki system takes care of version management and comparing of sources (Wikis already do this). Check in, check out, rollback, branching, merging, several developers on 1 codebase, … all possible!
• you can search your whole codebase for certain keywords, jump to class definitions – just like normal IDE
• when you look at your code, the names of classes, templates, libaries, .. become clickable, just like in a … wiki!
• there are tools to make writing code easier (class wizard, sample code, forum for questions)
• there’s a Google-like crawler that indexes code so it becomes available for other developers – this is real “open source”!

COMPILE AND RUN

• the WikiRAD server lets you develop in a ’stage’ mode (separate from your real system) and lets you deploy it to ‘production’ once you’re sure. The production server can be your own server, with deployment via FTP or SSH.
• for the most popular languages, you also have a lint system that can detect obvious errors in your code before compiling.
• if the language you write in requires compiling (like C++, C#, VB.NET, …) the server takes care of that – probably faster than on your own Pentium III.
• you no longer need to set up a ’similar’ server to test your software, it will run on the same kind of system, behind the same combination of routers and firewalls, with the same libraries installed.
• you can add breakpoints, see the console output, view values of variables, …

So take Sourceforge, drop in a Wiki system for writing the code, a system for online debugging and profiling and tada: life has just become so much easier for a programmer.

All remarks are welcome!

Technorati: social software – wiki – software – open source

Related posts:

1. Web-based web development Writing code in your browser, it’s coming this way, I...
2. My online charmap of HTML character entities Geeky as hell, but I need it quite often, and...
3. Port redirection in Windows We use port redirection/proxy often on our platforms. In the...

ANCHOR tag – a plain link

Works: everywhere

Description: Provide just a link to the movie file, and count on the user’s browser to figure out which application it should give the URL to. WMV files will generally open in Windows Media Player, MOV files in Quicktime, but there is no way to be sure what AVI and MPG files will open in. This depends on the client’s configuration. An additional disadvantage is that a lot of browsers will first download the whole file and only then play it, so you lose the quasi-immediate start of a streaming experience.

<a href="http://www.example.com/movie.mpg" title="The movie">Click to play</a>

EMBED tag

Works: everywhere

Description: even if it is not part of the HTML specification, it should work everywhere. It can be as minimal as <embed src="http://www.example.com/movie.avi">, but also allows the specifying of size, mime-type and player controls. It does not allow you to specify what program (and what version) should be used to play it. It’s again the user’s (browser) configuration that decides.

<embed width=320 height=250 src=”http://www.example.com/movie.wmv” name=”player” id=”player” pluginspage=”http://www.microsoft.com/windows/windowsmedia/download/” type=”video/x-ms-wmv” ShowControls=”1″ ShowDisplay=”0″ ShowStatusBar=”0″ autostart=”1″ autorewind=0 ShowPositionControls=”1″ ShowTracker=”0″ ></embed><br />

OBJECT tag

Works: everywhere

Description: this is the official way to do it (according to the HTML specs). You create an <OBJECT> ... </OBJECT> pair with a bunch of PARAM in between. Here is the way to do it with Windows Media Player, RealPlayer, QuickTime and Shockwave/Flash. A very common practice is to combine the EMBED with OBJECT, like in the example below.

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" HEIGHT="250" WIDTH="320" > <PARAM NAME="src" VALUE="http://www.example.com/movie.mov" > <PARAM NAME="AutoPlay" VALUE="true" > <PARAM NAME="Controller" VALUE="false" > <EMBED SRC="http://www.example.com/movie.mov" HEIGHT="250" WIDTH="320" TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOPLAY="true" CONTROLLER="false" /> </OBJECT>

IMG with dynsrc

Works: only in Internet Explorer (Windows)

Description: very easy to use, but poorly supported. Allows for combining the classic SRC with the DYNSRC property, so that even if the browser does not show the movie, it can still show an image.

<img width="160" height="120" alt="The movie"/>

MEDIAPLAYER page

Works: everywhere (if it’s done right)

Description: if you’re a bit handy, you can create a wrapper page for your streaming media. I use my Cinema Tool to show movies. I just input the URL, the format and the size, and the rest is automatic. On podcasts like Traxsource, I use a special audio-only player page (not yet generally available) that shows the playlist (a web page) within the media player (SMIL for Real & QuickTime/ASX for WMV).

<a href="http://www.forret.com/tools/cinema.asp?w=320&h=260&type=video&format=WMF&url=http%3A%2F%2Fwww.example.com%2Fmovie.wmv">Click to play</a>

IFRAME with MEDIAPLAYER

Works: everywhere (but watch out for Javascript scripts like Adsense/counter pages – they can give errors in frames)

Description: If you don’t want to send your visitors to a new or a popup page, consider inserting a IFRAME into your page. You can then even trigger new movies by just adding a link with the right TARGET. Remark: if you add a link like described in the ANCHOR example above, even with the right TARGET specified, the file will probably open outside of the browser, and not in the IFRAME where you want it. Webmastering shouldn’t be THAT easy!

<a href="http://www.forret.com/tools/cinema.asp?w=320&h=260&type=video&format=WMF&url=http%3A%2F%2Fwww.example.com%2Fmovie.wmv">Movie 1</a> – <a href="http://www.forret.com/tools/cinema.asp?w=320&h=260&type=video&format=WMF&url=http%3A%2F%2Fwww.example.com%2Fmovie2.wmv">Movie 2</a> <br />

Also see: fluffbucket.com – Comparison of media players

Technorati: media – html – blog

Related posts:

1. Podcasting trick #5: play-it-now buttons While working with Jurriaan on a podcast for BeyondJazz.net...
2. QuotePlay and portable SMIL Matt Round had released QuotePlay, a Flash-based MP3 player...
3. There are no Flash websites Never say “we have a Flash website”; there is no...

Remark: there are ways to make all Right-Click functionality inaccessible. I think this is a bad practice (for the reasons, check jeffdav), so I will not cover these methods.

Trick #1: Table Background

You use the image as the table background: <TABLE STYLE="background-image: url(...)">. If you do just that, the “Save Picture As” option goes away, but a new “Save Background” is created. So you cover up the image by placing a transparent gif before it, in the <TD> cell.

The end effect is that is looks like you can copy or save the picture, but you will be saving the GIF file.

Remark: you have to explicitly specify the dimensions of the table, it will not autoscale to the size of the image.

Trick #2: Div Background

You can do basically the same thing with a <div>: you use the picture as the background image, and you put another <DIV> above it with the transparent GIF.

You would again need to specify the exact dimensions of the whole thing, but wait, there’s another trick: put the image in an <IMG> tag inside the second DIV and give it a visibility: hidden. This way it takes up the size of the picture without actually showing up, or appearing right-clickable.

Trick #3: Flash image

The third is a no-brainer: using a Flash object. Almost 100% of browsers have Flash built-in, so compatibility problems are limited. For the exact OBJECT and EMBED, check the HTML source of this text or the Macromedia site.
Here also, you need to give the right dimensions to the Flash object, otherwise it will take a default (square) size.

Remark: using the menu="false" option ensures that the only options showing up on a right-click are: “Settings…” (disabled) and “About Macromedia Flash Player …”.

Conclusion
It is possible to use some simple tricks to make right-click copy or save functionality impossible. I wouldn’t go as far as to call this ‘copyright protection’, but it helps. At least no one can claim they just copied it because they thought it would be OK.
I used the last option (Flash) on my Tango Steps site, to protect the images I use from my teachers, Marisa and Oliver.

Technorati: css – copyright

Related posts:

1. Flickr changes image URLs with some glitches Old URL: photos23.flickr.com New URL: static.flickr.com/23 Just this week...
2. Playing MP3 with an embedded Flash player (There is an updated post at Click to hear the...
3. Using movies on a web page So you recorded those first steps of your youngest,...