Archive for the 'HTML and CSS' category

It is well known that the human brain has pattern matching capabilities much further advanced than those of the best equivalent software programs. This explains that failure rates of OCR (Optical Character Recognition) program may be as high as 1% (or even 2%) of errors, which is requiring later human proof-reading to ensure a reasonable quality for document scans. But when the document is old, badly printed, or degraded, error rates may climb further into the unusable (even more so when we address the scan of thousands of documents like is done by libraries and cultural institutions all over the world).

On another issue, the SPAM problem on the Internet became a major problem: Prorams try to make believe that they are human beings in order to insert advertisment anywhere a user can write (in the messages of a forum, in the comments of a blog, etc). For some time now, it became common that human users must identify themselves by their capacity to recognize a badly written word. Theoretically, this is a very efficient Turing test allowing to differentiate a human from a machine only by the results of their actions. Practically, the abilities of software programs have become so impressive that SPAM is slowly coming back again through those filters named CAPTCHAs (those images that you must read and copy back in order to be identified and approved for a specific action).

The problem appears to be: create CAPTCHA tremendously difficult for the automated software and, simultaneously, bring human beings to the task of checking scans of documents difficult to read by program.

The solution: reCAPTCHA.

The idea is to provide a CAPTCHA service to thousands of bloggers and forum administrators (WordPress, phpBB, etc.) Users are invited to recognize two words specifically difficult to read (profesional OCR programs failed during scans done by Carnegie Mellon University). The user must recognize them both. One is used to check that this is a human being, the other will fill a database of OCR translations that will be used to deliver even more CAPTCHAs and to improve the quality of a document scanned by Carnegie Mellon. Dual core technology: efficiently fight spammers and deliver millions of human users to improve the scan quality of thousands of ancient documents (without using slave labor).

Example of a difficult to read/scan document:

One of the key advantages is that most pro OCR programs can tell when they fail to recognize a character or a word (when they are not confident enough).

This is a delicatessen reserved for HTML- and CSS-loving palates. It could be helpful to some CSS developers : in an article titled “Really undoing HTML and CSS“, Eric Meyer offers a CSS file that undo all default values preset by the default interpretation of HTML by some browsers.

As a matter of fact, some additional explanations may be useful and they can come from another article written by Richard Rutter: “Resetting default padding and margin“.

Additional thoughts from Eric Meyer on the same issue:

• Reworked reset
• Reset reasoning

For HTML and CSS specialists.

When, as I do, you want to include some bits and pieces of software code in a WordPress post, it starts to become a serious headache. As a matter of fact, WP has not really been prepared for this and it creates a number of issues. Those I already encountered here:

• The <?php tend to disappear (unless you start juggling)
• Some charcaters would not display at all (or badly)
• The overall presentation is pretty bland if you use <code>

So, I looked for a plugin (nearly everything in WordPress is done by adding on of those marvellous little code gems that can be included in a few seconds into the basic configuration) adapted to this task, easy to install (I don’t want to be stuck with heavy maintenance just for this), easy to use.

Here is the summary of what I checked and my opinion regarding them.
(more…)

You are using Firefox, you want to use it at its best, you should go to the FireFox tweak guide.

Software programs to do anything you want with your PC if you are a bit more geeky than most but do not want to pay much. Freeware & shareware.

In the spotlight: Sony Alpha 900 Canon EOS 5D Mk II Nikon D700 FX Download Nero for free

Webcron is an automated task service at set hours. If you know Unix or Linux you already heard about the Crontab. Webcron is a Web adaptation of this well-known Crontab. But nothing complicated at all!

Webcron allows you to do tasks at set hours by looking for a page on your website. For example, save your database, therefore you only have to prepare a script database_save.php that saves the database to a file. Add then a task to you Webcron to do the http://www.domaine.com/sauvegarde_base.php request.

Very simple and recommended.

After a previous post about the reasons there are not to use the HTML tables (and to prefer CSS tables), I want to come back to this issue with my own experience.

When I went to the fifth version of this web site interface (the one you see at the time of posting this article), I tried to build the site theme using as much CSS as possible in order to ease future migrations and to lighten the result by separating content and styles. However, it soon appeared clear that the 3-column organization (with footer) i sone of the most difficult contruction for CSS tables and it always creates problems of rendering on different browsers.

This is why I decided to choose the best of both worlds. Let’s clarify this position. HTML tables are very simple to build and are correctly implemented in the vast majority of Internet browsers (their definition is so old now…). I decided to build the basic squeleton out of HTML tables. But I limited myself to the structure only. All the styling and formatting is done in CSS tags.

This is a very powerful solution. Use one technique for what it’s best. HTML tables allow easy definition of columns, clear grouping, etc. CSS tags allow splitting content and structure, defining clearly sizes, margins, paddings, borders, cell backgrounds, colours, etc. This gives a theme that is very tolerant (e.g. HTML tables behave well when an image is sized erroneously big -a quite common error- and forces the column dimensions). But the styling is very flexible in CSS.

If you are interested, I invite you to check the sources of this page and the associated CSS file.

You may have noticed a new logo appearing on our web site since the redesigned interface went online.

If your web browser supports it (Opera 9, FireFox, Internet Explorer 7), a similar orange icon may appear on the web address bar.

This is a feature that is good both for users and for web site designers. For the users, it provides a simple way to access to the information on our web site by allowing FireFox or Opera to directly collect the news from the web site without even opening the page. If you click on one of these RSS feed icons , your web browser should propose to subscribe to the feed. After that, you will be informed more directly about news on Roumazeilles.net even if you do not open the web site. You will never miss interesting headlines!

The RSS feed icon is a standardized way (proposed by FireFox) to easily point you to this fast access to the web site information. By itself, this is good news for the web designer because it gives a common recognition standard: I don’t have to explain (like I do here) the meaning of the icon, I don’t have to invent some explanation or title. It looks the same on all web sites supporting this feature.

Initially, it RSS feeds were created to syndicate content (to allow other sites to seamlessly include the content of Roumazeilles.net in their own pages). This is still possible (this is what is used by news management web sites like MyYahoo!, MyAOL, Google, or Bloglines), but it has been greatly extended by the creation of specific tools integrated in your own browser.

As you certainly noticed, we changed significantly the look-and-feel of our web site. The plastic surgeon used its scalpel to give a new face to the web site: reduce the size of the pages (faster downloads for you), improve readability (the white background increases the contrast), come back to a more sober graphic design (only a few graphic signs and homogeneous colours).

But there are some new functionalities too. The most important one is certainly the addition of the ability to send an email to your friends to let them know about a post that you would find particularly interesting (for whatever reason). Just before sending, do not forget to copy the code that is provided (it allows to protect us against robots that would be trying to send automated emails using this form). In any case, be reasonable and polite with your use of this nice little feature.

Just look at the link at the bottom of articles on the front page (or in the box at the bottom right for post pages).

N|vu is a web development application with a WYSIWYG interface that is aimed to be user friendly, easy and powerful. It is supposed to be a serious competition for major commercial tools like DreamWeaver (N|vu is a free download making it a good contender).

Unfortunately, since it comes from the Open Source world, N|vu tends to receive a lot of reviews, but not often from the professional web designers. This is why I appreciated a lot to find a specific review that is aimed at comparing N|vu with DreamWeaver and includes very real-life issues of every-day life of a web programmer/designer. It is not only scratching the surface (looking at the menus), but rather trying to extract the best of it (digging into CSS code generation, consistency of the interface, etc.)

If you consider using N|vu for your professional (or serious) HTML/CSS editing and web site design, I advise you to take 10 minutes to read this review. Even if it dates back to 2004, it contains very neat information.

finally, it’s happened! Microsoft announced officially the end of FrontPage (Microsoft Office SharePoint Designer 2007 and Microsoft Expression Web Designer will come in Spring to replace it).

As a matter of fact, FrontPage did not really succeed in penetrating the pro market for web designers. Its utterly simplistic approach to web design was obviously far behind some serious competitors (or leaders) like DreamWeaver. But, non-specialists now stop using it -essentially- because they no longer need it. Today, ready-to-install blogs (like WordPress, or Joomla or Mamba or SPIP) have already marginalized web site design, but solutions including both the blog software and the web hosting (like WordPress.com) allow to forget completely about both the tool and the installation. You can immediately start using it… without even looking at FrontPage.

So, FrontPage saw its public disappear. FrontPage lost its justification. We won’t cry.

This is the tough question that BrowserShots.org web site anwsers for you. They provide a simple way to test your web site in a large variety of configurations and browsers. This is a very nice idea founded on the voluntary help of computers installed all over the world (widely distributed architecture).

This way, you will know how Roumazeilles.net looks on a number of exotic (or not) browsers:

Recommended to any web designer.

Even if I am usually in favor of designing web sites using tables, I wanted to provide a link to an interesting article taking exactly the opposite position: Why tables for layout is stupid.

For those wondering, my preference goes to HTML tables because they are easier to implement the 3-column designs that I prefer (those are really difficult to grasp in pure CSS).

Mark James, a part-time web developper, produced more than a thousand slick little icons that are distributed freely on famfamfam.com. This work is licensed under a Creative Commons Attribution 2.5 License, which means that if you want to use them, you only have to remember to state clearly that Mark James is the author and to include a link back to his web site.

I like the silk icon collection, but there is also a very useful collection of 239 small country flags.

I previously presented here my opinion about several tools to collect statistics for a web site (Alexa.com, Performancing metrics, Webalyzer). Then, I started by writing about the existence of Google Analytics, the still-in-beta-test offer from the American search engine giant. But I could not test it because Google did not provide an invitation to the evaluation in time for the review. This is correted now. Google sent me an invitation last month and, with the added experience, I can now share my understanding of this product.

(more…)

I need to look into this quickly now that Internet Explorer 7 is seriously ready to reach all of our PCs. There will be news, there will be chanes and uour web sites may suddenly break down because of that.

For it, RegDeveloper offer its help with an article on preparing your web site for the arrival of IE 7: “Getting your site sorted for IE 7“.