May 16, 2012

20+ most installed modules of Drupal

There are more than thousands of contributed Drupal modules, but sometimes it's necessary for us to find out which is the most installed Drupal module that can be perfectly suitable for our project.

Below I've listed some of the most used/installed & essential Drupal modules:

Views


What is Views


The Views module provides a flexible method for Drupal site designers to control how lists and tables of content, users, taxonomy terms and other data are presented.

This tool is essentially a smart query builder that, given enough information, can build the proper query, execute it, and display the results. It has four modes, plus a special mode, and provides an impressive amount of functionality from these modes.

Among other things, Views can be used to generate reports, create summaries, and display collections of images and other content.

Token


Tokens are small bits of text that can be placed into larger documents via simple placeholders, like %site-name or [user]. The Token module provides a central API for modules to use these tokens, and expose their own token values.

Note that Token module doesn't provide any visible functions to the user on its own, it just provides token handling services for other modules.

Pathauto


The Pathauto module automatically generates URL/path aliases for various kinds of content (nodes, taxonomy terms, users) without requiring the user to manually specify the path alias. This allows you to have URL aliases like /category/my-node-title instead of/node/123. The aliases are based upon a "pattern" system that uses tokens which the administrator can change.

Chaos tool suite (ctools)


This suite is primarily a set of APIs and tools to improve the developer experience. It also contains a module called the Page Manager whose job is to manage pages. In particular it manages panel pages, but as it grows it will be able to manage far more than just Panels.For the moment, it includes the following tools:

  • Plugins -- tools to make it easy for modules to let other modules implement plugins from .inc files.

  • Exportables -- tools to make it easier for modules to have objects that live in database or live in code, such as 'default views'.

  • AJAX responder -- tools to make it easier for the server to handle AJAX requests and tell the client what to do with them.

  • Form tools -- tools to make it easier for forms to deal with AJAX.

  • Object caching -- tool to make it easier to edit an object across multiple page requests and cache the editing work.

  • Contexts -- the notion of wrapping objects in a unified wrapper and providing an API to create and accept these contexts as input.

  • Modal dialog -- tool to make it simple to put a form in a modal dialog.

  • Dependent -- a simple form widget to make form items appear and disappear based upon the selections in another item.

  • Content -- pluggable content types used as panes in Panels and other modules like Dashboard.


Content Construction Kit (CCK)


The Content Construction Kit allows you to add custom fields to nodes using a web browser.

Administration menu


Provides a theme-independent administration interface (aka. navigation, back-end). It's a helper for novice users coming from other CMS, a time-saver for site administrators, and useful for developers and site builders.

Administrative links are displayed in a CSS/JS-based menu at the top on all pages of your site. It not only contains regular menu items — tasks and actions are also included, enabling fast access to any administrative resource your Drupal site provides.

Wysiwyg


Allows to use client-side editors to edit content. It simplifies the installation and integration of the editor of your choice. This module replaces all other editor integration modules. No other Drupal module is required.

Wysiwyg module is capable to support any kind of client-side editor. It can be a HTML-editor (a.k.a. WYSIWYG), a pseudo-editor (buttons to insert markup into a textarea), or even Flash-based applications. The editor library needs to be downloaded separately. Various editors are supported (see below).

Wysiwyg module also provides an abstraction layer for other Drupal modules to integrate with any editor. This means that other Drupal modules can expose content-editing functionality, regardless of which editor you have installed.

Date


This package contains both a flexible date/time field type Date field and a Date API that other modules can use.

IMCE


IMCE is an image/file uploader and browser that supports personal directories and quota.

Google Analytics


Adds the Google Analytics web statistics tracking system to your website.

The module allows you to add the following statistics features to your site:

  • Single/multi/cross domain tracking

  • Selectively track/exclude certain users, roles and pages

  • Monitor what type of links are tracked (downloads, outgoing and mailto)

  • Monitor what files are downloaded from your pages

  • Custom variables support with tokens

  • Custom code snippets

  • Site Search support

  • AdSense support

  • Tracking of Goals

  • Anonymize visitors IP address

  • Cache the Google Analytics code on your local server for improved page loading times

  • Access denied (403) and Page not found (404) tracking

  • DoNotTrack support (non-cached content only)


Webform


Webform is the module for making surveys in Drupal. After a submission, users may be sent an e-mail "receipt" as well as sending a notification to administrators. Results can be exported into Excel or other spreadsheet applications. Webform also provides some basic statistical review and has and extensive API for expanding its features.

ImageAPI


This API is meant to be used in place of the API provided by image.inc. You probably do not need to install this module unless another module are you using requires it. It provides no new features to your Drupal site. It only provides an API other modules can leverage. Currently GD2 and ImageMagick support are distributed with ImageAPI.

Note: Requires PHP5!

Backup and Migrate


Backup and Migrate simplifies the task of backing up and restoring your Drupal database or copying your database from one Drupal site to another. It supports gzip, bzip and zip compression as well as automatic scheduled backups.

With Backup and Migrate you can dump some or all of your database tables to a file download or save to a file on the server, and to restore from an uploaded or previously saved database dump. You can chose which tables and what data to backup and cache data is excluded by default.

Link


The link module can be count to the top 50 modules in Drupal installations and provides a standard custom content field for links. With this module links can be added easily to any content types and profiles and include advanced validating and different ways of storing internal or external links and URLs. It also supports additional link text title, site wide tokens for titles and title attributes, target attributes, css class attribution, static repeating values, input conversion, and many more.

Advanced help


The advanced help module allows module developers to store their help outside the module system, in pure .html files. The files can be easily translated simply by copying them into the right translations directory. The entire system can appear in a popup or not as the module prefers (and by taking away access to view the popups, a site can force the popups to not exist).

The system ties into Drupal's search system and is fully indexed, so the entire contents can be searched for keywords. the help files can be placed in a hierarchy as well, allowing for top down navigation of the help.

By itself, this module doesn't do much; it requires another module to support it, but it does come with a nice little sample of text from Wikipedia to demonstrate the system.

Accessing Advanced_help


When this module is installed, users with the view advanced help index permission can access the advanced help index by going to Administer -> Advanced Help (http://www.example.com/admin/advanced_help). Additional view advanced help popup and view advanced help topic permissions enable them to access the actual help pages and popups.

Libraries API


The common denominator for all Drupal modules/profiles/themes that integrate with external libraries.

This module introduces a common repository for libraries in sites/all/libraries resp. sites/<domain>/libraries for contributed modules.

External libraries
Denotes libraries ("plugins") that are neither shipped nor packaged with a project on drupal.org. We do not want to host third-party libraries on drupal.org for a multitude of reasons, starting with licensing, proceeding to different release cycles, and not necessarily ending with fatal errors due to conflicts of having the same library installed in multiple versions.
Drupal 7 only has built-in support for non-external libraries via hook_library(). But it is only suitable for drupal.org projects that bundle their own library; i.e., the module author is the creator and vendor of the library. Libraries API should be used for externally developed and distributed libraries. A simple example would be a third-party jQuery plugin.

CAPTCHA


A CAPTCHA is a challenge-response test most often placed within web forms to determine whether the user is human. The purpose of CAPTCHA is to block form submissions by spambots, which are automated scripts that post spam content everywhere they can. The CAPTCHA module provides this feature to virtually any user facing web form on a Drupal site.

XML sitemap


The XML sitemap module creates a sitemap that conforms to the sitemaps.org specification. This helps search engines to more intelligently crawl a website and keep their results up to date. The sitemap created by the module can be automatically submitted to Ask, Google, Bing (formerly Windows Live Search), and Yahoo! search engines. The module also comes with several submodules that can add sitemap links for content, menu items, taxonomy terms, and user profiles.

CKEditor - WYSIWYG HTML editor


CKEditor is the next version of FCKeditor. The editor has been rebranded and completely rewritten. It is now much faster (the code has been optimized), loads faster (the number of files has been reduced, so the browser will perform less HTTP requests) and developers friendly.

jQuery UI


A wrapper module around the jQuery UI effects library that lets module developers add swooshy, swishy effects to their code.

jQuery Update


Upgrades the version of jQuery in Drupal core to a newer version of jQuery.

Panels


The Panels module allows a site administrator to create customized layouts for multiple uses. At its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout. Integration with other systems allows you to create nodes that use this, landing pages that use this, and even override system pages such as taxonomy and the node page so that you can customize the layout of your site with very fine grained permissions.

Poormanscron


A module which runs the Drupal cron operation using normal browser/page requests instead of having to set up a crontab to request the cron.php script. The module inserts a small amount of JavaScript on each page of your site that when a certain amount of time has passed since the last cron run, calls an AJAX request to run the cron tasks. Your users should not notice any kind of delay or disruption when viewing your site. However, this approach requires that your site gets regular traffic/visitors in order to trigger the cron request.

Lightbox2


The Lightbox2 module is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on most modern browsers.

Views Slideshow


Views Slideshow can be used to create a slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavily customizable: you may choose slideshow settings for each View you create.

Potential uses



  • News item slideshow (such as the title, image and teaser of the last 5 news articles submitted)

  • The Last X number of X submitted (images, videos, blog entries, forum posts, comments, testimonials, etc.).

  • Rotate any image, based on any filters you can apply in views.

  • Hottest new products for any ecommerce drupal site.

  • Rotate contact links, share links, etc.

  • Heck, you could rotate entire nodes, categories, image galleries, etc. I wouldn't suggest it, but you have that power.

  • Its also a great space saver. Places where you had multiple images or multiple items such as RSS feeds or category listings can now be presented in a slideshow.


The possibilities are really endless, as the more ways you can think of to categorize and add to views, the more you can rotate.

Find Color Codes of Websites by using Photoshop

When we browse through internet we come across several websites several images and many more things and sometimes we like some colors of some websites or images which we like but we don’t know how to add or use those colors in your website. This tutorial will help you to do that in very easy & simple steps. By following these steps you won’t require the source file or source code or the time ruining method of trying to figure out the one from 100’s of different shades of the required color. It will help you to get the hexadecimal code of the desired color you need for your website.

1st Step: Getting the screen-shot of the desired website

The first step to do is to get a screen-shot of your desired thing (like I have selected our website for example). Locate the "Print Screen" key on the keyboard. The key may be labeled with an abbreviation, such as "PrtScn", and is usually found in the top row of keys. Copy the content you are viewing to the clipboard by pressing "Print Screen." If your "Print Screen" or "PrtScn" command is located inside a small box on the same key as "Insert" or another command, press "Function" or "Fn" and the key at the same time. Otherwise, just press the "PrtScn" key, the same procedure can be used for laptop keyboards too.

2nd Step: Adding screen-shot of the website to Photoshop

Launch Photoshop and create a new document form the ‘File’ tab on the menu bar (or just press Ctrl+N). When you get to the size selection option, select a desired size (like I have selected the size of 1024*768 pixels) according to your requirement.

You can see in the below image a preview of Bridge option:



Then paste the PrtScn item in it (Ctrl+V can also be used) as shown in the below figure:



Now we have copy your desired website screen-shot on your Photoshop to process the colors in it.

Step 3: Using the Eyedropper Tool in Photoshop to find color codes:

We’ll be using the eyedropper tool from the Toolbar at the left side of the screen like the below figure at the center of the picture.



The eyedropper tool helps to determine the color code of the selected color in the like the red color of our menu bar.

Select the ‘Eyedropper Tool’ from the eyedropper button on the toolbar and click on the desired color (like I used the red menu bar in our website) and you’ll see the red color selected in the foreground color on the Color Picker on the bottom left of the toolbar. The color identification process can look like the below picture:



The circular red thing shows the selected color in the foreground color block.

If you click on the Color Picker you would get a window popped up with the color details (as in the below picture) which also contains the hexadecimal color code with a symbol ‘#’of the selected color which is ‘b8011b’ in my selected color.



You can also check the other color’s codes by following the same procedure for other colors (as shown below):



The color code of the secondary selected color is ‘e7e7e7’ as in the below picture below:



What are the uses of the color codes information in this tutorial?

As you have followed the tutorial you can see that the basic purpose of this tutorial is to acquire the hexadecimal color code of any required color which is given or desired by you. It the simple and easiest method to the get the results by following the basic steps provided in this tutorial.

May 15, 2012

CSS3 & HTML 5 Login Form With Validation

Today's tutorial is based on simple and attractive CSS3 HTML5 login and registering form with fields validation. In html5 we can actually do validation without using any external JQuery or other scripts.

In this tutorial we would:

  • Design a toggle functionality using checkbox.

  • Make two forms with HTML5 validation inputs

  • And CSS3 toppings


css3-login-form
So the logic for toggle is simple, if checked then show the form else hide the form. With CSS3 we can give transition effects.

So here is the HTML markup for Toggle:

[html]
<input type="checkbox" id="login_toggle" checked=""/>
<label id="toggle" for="login_toggle">Click here to login</label>
[/html]

CSS3 Markup for its effect and styling:

[css]
#login_toggle:checked + #login-form {
top: -210px;
}

#toggle {
background-image: url("bg.png");
border: 3px solid #FFFFFF;
float: right;
padding: 5px 50px;
position: relative;
right: 80px;
top: 210px;
color: #fff;
border-top: 0px;
text-shadow: 0 0 1px #000000;

border-radius: 0 0 4px 4px;

-webkit-box-shadow: 1px 4px 4px #000000;
-moz-box-shadow: 1px 4px 4px #000000;
box-shadow: 1px 4px 4px #000000;
cursor: pointer;
}
[/css]

In html5 we can set a new attribute to input type named as required. When this attribute is inserted then the form won't process until its validated.

HTML5 form markup

[html]
<form id="loginForm" class="right">
<div id="input">
<input class="input username" type="text" placeholder="Username" name="username" required />
<span>A</span>
</div>

<div id="input">
<input class="input password" type="password" placeholder="Password" name="password" required />
<span>L</span>
</div>

<div id="input">
<input type="submit" class="submit" value="Login">
</div>
</form>
[/html]

Simple isn't it? Just try the demo and have fun with CSS3, there's so much creativity you can do with it.