My CMS testing website

Joomla 3.0.2
http://iambenz.6te.net

Drupal
http://iambenz.drupalgardens.com/

How to Use Captcha in Drupal 7

You've seen Captcha used on many, many websites. Before you can submit a form, it provides a question and asks for a response from you. This prevents many spam comments, form submissions and email submissions.

This tutorial will show you how to use the standard Captcha module for Drupal and will introduce you to several alternatives.

Step 1. Download and Install

You can get the standard Captcha module here http://drupal.org/project/captcha

Download the module from http://drupal.org/project/captcha.
Go to Modules > Install new module and browse to find the file on your computer and upload it.

Step 2. Activate

You will see that two modules have been installed. You can see in the description that they are dependent upon one another so be sure to enable them both.
Click the check boxes and scroll to the bottom of the page and save to enable the the modules.

You will then be able to access the "Configure" option for both modules. Click Configure on CAPTCHA first.
A CAPTCHA can be added to virtually each Drupal form. Some default forms are already provided in the form list, but arbitrary forms can be easily added and managed when the option "Add CAPTCHA administration links to forms" is enabled.
Users with the "skip CAPTCHA" permission won't be offered a challenge. Be sure to grant this permission to the trusted users (e.g. site administrators). If you want to test a protected form, be sure to do it as a user without the "skip CAPTCHA" permission (e.g. as anonymous user).

Step 3. Configure the module

Configure the Default Challenge type. This will be used by all forms unless you change the type for an individual form.
The module comes with two types of challenges built in.

• Math: requires the user to solve a simple math problem.
• Image: presents an obscured image of a word that can't be read by a machine.

Each form you have on the site will be listed and you can customize the challenge type on each form individually from a drop down box in the Challenge Type column.

Step 4. Decide if all forms are going to use CAPTCHA

A CAPTCHA can be added to virtually each Drupal form, in both the user side and the administrative side .Some default forms are already provided in the form list, but arbitrary forms can be easily added and managed when the option "Add CAPTCHA administration links to forms" is enabled.
You can completely control whom is required to fill out capture by editing the permissions in the usual manner. Users with the "skip CAPTCHA" permission won't be offered a challenge. Be sure to grant this permission to the trusted users (e.g. site administrators). If you want to test a protected form, be sure to do it as a user without the "skip CAPTCHA" permission (e.g. as anonymous user).

You can skip this button. For efficiency, the positions of the CAPTCHA elements in each of the configured forms are cached. Most of the time, the structure of a form does not change and it would be a waste to recalculate the positions every time. Occasionally however, the form structure can change (e.g. during site building) and flushing the CAPTCHA placement cache can be required to fix the CAPTCHA placement. There is no need to do this in the original setup. You only need to do it if you make changes to the structure of the forms.

Step 5. Add a description to the form for the visitor.

Click the check box, and the Challenge description field will be available for you to fill in. By default this doesn't show. This description will be visible to everyone. You don't have to use it.

Step 6. Set validation and persistence

Read the choices and you can make the validation more or less difficult by requiring case sensitivity. You can make things simpler for users, by hiding the form once they've logged in and completed the first challenge.
Save the Configuration and you are ready to use CAPTCHA.

Step 7. Configure image CAPTCHA if desired

This is an optional step. This configuration will help you match the challenge image to your design. You can choose colors, type fonts, and other parameters to create the display of the challenge image.
The image is generated on the fly for each request, which is rather CPU intensive for the server. Be careful with the size and computation related settings.

Make your image CAPTCHA configuration choices and you're completely done. There are some other styles of CAPTCHA that you can try if you like them. Here's a list with a brief description.

Other CAPTCHA styles explained

There are links to these downloads on the same page as CAPTCHA http://drupal.org/project/captcha. They are essentially "extensions to the extension" and are designed to add more security to the process.
reCAPTCHA - Uses the reCAPTCHA web service to improve the CAPTCHA system and protect email addresses.
CAPTCHA Pack - The CAPTCHA Pack module contains several CAPTCHA types for use with the CAPTCHA module. The CAPTCHA Pack module is meant to provide lightweight, yet effective alternatives for the traditional image CAPTCHA, which is undesirable in certain situation (e.g. bandwidth restrictions, cpu restrictions, accessibility constraints, etc).
Text CAPTCHA - This module provides a CAPTCHA which uses logic questions instead of standard visual or auditory challenges. This can help to improve the accessibility of CAPTCHAs, although it should be stated that no solution is perfect. The module uses the web service textcaptcha.com to provide logic questions and a list of possible appropriate answers.

Egglue Semantic CAPTCHA - The Egglue CAPTCHA module uses the Egglue Semantic CAPTCHA web service for generating over 10,000 knowledge-based, accessible CAPTCHA challenges on a Drupal site. The CAPTCHA module is required.

Captcha Riddler - Captcha Riddler is a sub module of Captcha that lets site administrators create their own questions to foil automated spam bots.

Hidden CAPTCHA - Hidden CAPTCHA is an extension to the CAPTCHA module. It offers a hidden CAPTCHA (duh!) The idea is very simple: If you offer an input box in any form, 99% of the time, robots will fill it with something before posting the form. If you offer an input box that has to stay empty, then the CAPTCHA system will prevent posts by robots.

CAPTCHA after - Show CAPTCHA protection on selected forms after specified number of unsuccessful form submit attempts has been made.

Setting up a contact form for Drupal

Drupal vs WordPress

As told in the previous Drupal article, Drupal is far to be “click and we are done” sort of CMS as WordPress. In WordPress, even for your first time installation, setting up a captcha’d contact module will take 15 minutes. In Drupal, if this is your first time, this will easily take a couple of hours. I thought hence it’s important to document the steps.

Module activation

To begin with, given that Drupal has three kinds of modules, the good news is that “Contact” is part of Drupal’s core module. Let’s go to Administer > Site building > Modules (admin/build/modules) and click beside “Contact” to check it from the list of available core modules. We will next submit the page using the Save Configuration button below.

Contact settings

For the next part, we will browse to Administer > Site building > Contact form(admin/build/contact) and will click on add category. We will add a demo category here, let’s say “Website feedback“. In the next field, Recipients, we will add the email address of the website administrator. We can also add an “auto reply” in the next field. Let’s add a weight, selected = yes and then move to settings after saving the configuration.

We will now see that a contact form is created in the list tab, as below. The form just created, can be found by browsing to /contact while still logged in as admin.

Getting the captcha spam protection

We will add a captcha to our newly created contact field protect against spams now. Here is the link. Once we have downloaded the latest version, we will unzip this, and will upload the “captcha” folder to our server’s /sites/all/modules directory.

Captcha settings

Let’s go to Administer > User management > CAPTCHA (admin/user/captcha) and start by setting up the Default challenge type under the Form protection block. We will then add challenge types to individual items, where we can choose among none, math and image. We can also click on Add CAPTCHA administration links to forms and set up other details below as per our taste. Save configuration.

Image Captcha settings

We can next click on the image captcha link above to tweak with the image captcha settings. We can set up the default characters to use in the code, code length, select the fonts, font-size, character spacing, etc. Also you can play around with the distortion and noise level. Be careful (hit and try is the best option) not to add too much distortion / noise to make the captcha illegible.

I have got the above image captcha look by using Code length: 5, Fonts: #2 and #3, Font size: 30pt, Character spacing: normal, Background color: white, Text color: black, Additional variation of text color: moderate, Distortion level: 5, Smooth distortion: 0, Add salt and pepper noise: 1, Add line noise: 1 and Noise level: 1.

Introducing reCaptcha

reCaptcha is an interesting alternative to the traditional math and image captcha, and as you can see, it is visually more appealing and gives more option to the end user. To use this, we will have to download this from here. Like before, we will unzip and upload this to the /sites/all/modules directory.

reCaptcha settings

The admin/user/captcha page will now hold a link to reCaptcha, and on clicking the link, we will see that we will need private and public keys to use reCaptcha in our site. Getting the keys are instant however, like getting the Google API key (reCaptcha is a Google project). Once we have added the keys, we can tweak with the theme settings and after saving the configuration, we can go to the Captcha tab above, and do changes if we feel.

Alternative Captchas

We also have to choice to choose some alternative captchas proposed by other developers, like text CAPTCHA or the Egglue CAPTCHA.

Setting the permission right

Even if the contact form is by now installed in www.example.com/contact address, you will see an access denied page if you browse there. To see a proper contact page there, let’s set the permission right. Rendez-vous for this at Administer > User management > Permissions (admin/user/permissions). Let’s find the contact module> access site-wide contact form and check the anonymous user. The page www.example.com/contact on refresh will now show the contact page.

Integrating into menu / navigation

Okay, let’s now go to Administer > Site building > Menus (admin/build/menu) for the final step. Once there, under the List menu tab, we will click on Primary links, and then Add item. In the form, Path: contact (assuming that in Administer > Site configuration > Clean URLs, the Clean URLs: are Enabled), Menu link title: anything you find suitable, say Contact us. Also, Enabled: 1, Expanded: 0, Parent item:<Primary links>, Weight: 0 (you will have to play around with this value later).

And that’s it. The contact form is up and ready. Go and check the front end of your website. Cheers.

Responsive Web Design

Designing for many devices

Research into mobile device use on the Web shows a large gap between supply and demand. More consumers use a mobile phone than a computer to access the Web. At the same time, only nine percent of websites are actually completely mobile compatible.

Largely this is due to complexity. Designing for desktop alone is complex. When you include mobile it becomes exceedingly complex. There are many factors to take into account:

• The number of Web enabled devices on the market increases.
• Different devices have different capabilities.
• Smartphone models are upgraded rapidly but older phones still need support.
• Old browsers in corporate environments don't support recent functionality.
• Compared to fixed data connections, mobile networks tend to be slower and often have a measurably higher latency. This can lead to long retrieval times, especially for lengthy content and navigation between pages.
• Mobile users have different interests to users on fixed or desktop devices.
• Mobile users have to pay for bandwidth.

Year 2011 was commonly recognized as the year of mobile commerce in Web design circles. The rapid and extensive adoption of mobile devices to access the Web really hit the mainstream. This forced the design community to come up with better ways to build websites.

Origins of Responsive Web Design

Much debate followed about best practices for designing mobile websites. Ethan Marcotte proposed that addressing browser capability, screen sizes and orientations by creating flexible, fluid and adaptive websites was the answer. This approach, known as Responsive Web Design, seemed to overcome most challenges in most circumstances.

Today, RWD is considered a best practice. Google and Bing endorse it and Google uses it on their own pages. W3C opposes the idea of creating separate mobile and desktop versions and advocates that any web page should have one set of HTML available at one URL, implicitly endorsing RWD. New articles in support of Responsive Web Design appear on the Web daily. One commentator describes it as the "new black".

Benefits

Responsive Web Design offers the following benefits:

• You can start from an existing desktop website and adapt what already works rather than start from scratch.
• The need to maintain multiple sites is eliminated. This can be a dramatic cost-saver.
• All renditions of the site are available at the same URL. This is good for search engine optimization.

How Magnolia CMS uses Responsive Web Design

Magnolia CMS implements the principles of RWD in the Standard Templating Kit. Web pages rendered with the system are compliant with HTML5 and CSS3. Content is abstracted from presentation and fed from a single back-end. You can serve multiple devices without unnecessary replication.

A website built with the STK uses a flexible grid. For desktops browsers, the design adapts dynamically to the viewport. Below is the Standard Article page from the demo-project sample website at screen widths of 1200, 1024 and 768 pixels. Note how the extras and promos areas float from the top right to the bottom. This is an example of reorganizing page elements to fit the viewport.

The same reorganization takes place when the site is viewed on a smartphone. Content that does not work well on the small screen or is not of interest to smartphone users is either left out or reformatted. An iPhone user sees a minimized, modified version of the site.

Here are the two layouts side by side. Note how the navigation is pushed down in the smartphone layout, giving preference to the main area which typically has the most important content such as the story of a news item. This has the benefit that the important content is displayed "above the fold". The phone user can see it in the first screenful without having to scroll. The promos area is left out altogether in the smartphone variation. The red line is an approximate viewport size.

Tip

If you don't have a smartphone at hand, you can view the smartphone variation on a desktop browser by adding the mgnlChannel=smartphone attribute to the URL:http://demopublic.magnolia-cms.com/demo-project/about/subsection-articles/article.html?mgnlChannel=smartphone

Technology

Responsive Web Design relies on three technical ingredients to detect the requesting device's capabilities and adapt the design accordingly:

• CSS media queries detect the type of device and the viewport size.
• Flexible grids allow page elements to float, reformat and reorganize depending on the viewport size.
• New variations of images are generated on-demand to fit in the available space.

These mechanisms implement the basic tenet behind Responsive Web Design: that it is better to design one website that adapts to the ever-increasing number of devices than to create many disconnected designs. Each device is treated as a facet of the same experience.

CSS media queries

CSS media queries is an extension to CSS3 that allows you to control how page elements are rendered on different devices. Media queries are always used in conjunction with media types. The media type identifies the device. The media query is a logical expression that evaluates to either true or false.

Here is an example of a media query:

only screen and (min-width: 1200px)

The query targets the media type screen which is intended for desktop browsers. The expression evaluates to true if the website is viewed with a browser where the viewport size is very large, 1200px wide or more. When true, a style sheet that optimizes the experience for a wide, cinematic screen is applied.

In Magnolia CMS, media queries are configured in a theme. The media attribute contains the media query and the link attribute the style sheet that is applied when the expression evaluates to true. Here is an example from the pop theme. Pop includes several style sheets. The wide sheet that is expanded in the screenshot show the media query and a link to the associated style sheetwide.css. Note how the link property contains just a reference to the style sheet. The actual sheet is stored in the resources workspace. You can edit it in Templating Kit > Resources.

Magnolia CMS ships with a basic collection of style sheets targeted at different media types:

• styles is the basic style sheet that optimizes the experience for desktop browsers
• print is intended for printed documents and the print preview mode.
• wide is for wide screens. It displays the promos area since there is more screen real estate.
• small is for narrow screens. The main area displays two columns of teasers instead of three.
• ie6 is a specialized CSS only used for Internet Explorer 6.
• ieStyles includes styles for IE7 and IE8, applied with a conditional comment.
• mobile is for smartphones and other handheld devices, see also Device Detection

In addition to the basic set, you can create your own stylesheets. Define matching media queries if you need to render content for other types of devices such as Web-enabled TVs.

Magnolia CMS uses conditional comments to overcome the limitations of legacy browsers. The ie6 and iestyles configuration nodes have an additional attribute conditionalComment that contains a statement that is interpreted by Microsoft Internet Explorer. Magnolia CMS uses them to provide and hide code to and from Internet Explorer.

In the page HTML, the media query and the style sheet link are rendered as a link element inside the head.

<head>
   <link rel="stylesheet" type="text/css" 
      href="/demo-project/resources/templating-kit/themes/pop/css/wide.css" 
      media="only screen and (min-width: 1200px)">
</head>

Typically you will find several link elements like this on the page. The style sheets are loaded incrementally. The basic styles sheet contains a lot of style information that is used on all devices and viewports. The more specific sheets loaded later such as wide define only additions and exceptions.

Here is the viewport comparison again, this time with the style sheet name included.

Note

The mobile media query is used when the default site is rendered on a desktop browser. It is a kind of fallback. Magnolia CMS has a more advanced mechanism for tailoring the mobile experience. The Device Detection module and the channels functionality allow you to format existing content but also target unique content to mobile users. The smartphone variation uses its own theme, pop-mobile, with the media property set simply to screen. The pop-mobile theme is loaded when the User-Agent header identifies the requesting device as a smartphone.