Noupe

50 Best-Of Designer’s (NEW) Download Picks and Resources

2009-07-09T04:21:54Z

For months, we have been bookmarking interesting, useful and creative resources every designer is looking for, so you can now rest assured that you will have the necessary tools to get the job done.

Due to this phenomenally vast amount of vector packs, icons, fnts, brushes, patterns available, you can now add dirt, rust, floral effect, swirls, mold, oil stains in your artwork and to give it any look you want.

So in today’s post, you’ll find an assortment of top-notch Vector Packs, brushes, patterns, Free Fonts, Icon Sets and .PSD downloadable files that others have freely contributed to the design community.

Vector Graphic Packs

Doodles and Sketches

The pack comprises of a range of random pieces, including leaves, drops, bolts, arrows, hearts and textures.

Cute Vector Penguin

This Penguin was used for a plumbing website to bring a soft,cold and cuddly image for the brand.

Tropical Jungle Pack

It is a great design element to include for your adventure or tropical island themes.

milky-way donkey

Vector Decorative Ornament

Painting meadow

14 Exclusive Floral Stamps Vectors

Asmaa Murad, from Aivault, has created an awesome set of floral stamps for Vectips! I quickly got lost in creating scatter brushes, patterns, and more with the 14 Floral Stamps.

Wallpaper pattern Free Vector Graphic

Retro Pattern

Skeletons

Inside this pack, you’ll find close ups of bones, teeth, claws, rib cages, silhouettes, and even punk-ready illustrated skeleton characters.

Abstract Tree

Flower Vector

One super hot file of various botanical and flourish like elements.

Textures

Abstract Texture Pack 2

A large set of 10 stunning high resolution (2080×1544) abstract textures, free for both commercial and non-commercial use.

10 Grunge Book Texture

Floral

These textures were made in Photoshop by layering various grunge and paper textures together along with floral patterns.

10 High-Quality Free Brown Paper Textures

In this set, you’ll find 10 free and high-resolution brown paper textures which can be used in a wide range of ways.

Clouds

3 Grunge Textures from FreeStockTextures.com

3 hi-res grunge textures: concentrate, wall, rust, peeling, wood…

9 Spray Paint Textures

Icon Sets

Furry Monster Icon Set

This icon set comes from the Spoon Graphics Blog, they feature a set of four furry multi-colored monsters. The icons are compatible with both Macs and PCs. Along with the icons comes a tutorial showing how to create these furry monsters yourself.

50 Free and Exclusive Twitter Icons

The icons are provided in both raster and vector formats: The transparent PNG versions are 256×256, and also the Illustrator files are included so that you can resize the icons as needed. The icons are completely free for personal and commercial use.

Birdies: Cute Free Twitter Icons For Your Blog

A set of 12 beautiful and lovely Twitter icons. All the icons included in the set have clean shapes and neutral colors that can be used for various contexts, from a “Tweet it” button for your blogs to desktop wallpapers.

40 Cute Free Twitter Graphics: Badges, Icons & Buttons…

The set includes 40 Files in total of cute twitter graphics: Badges, Icons & Button. All in Transparent .png format. The buttons etc come with PSD files too so you can edit and re-size them as needed. The original characters come as a large High Res image which makes it very easy to scale down and use however you want.

Watercolor Free Icon Pack

Each icon is in .png format sized at 256×256px with transparent backgrounds. The 36 different icons have varying opaquness that allow the background and texture seep through the icons like watercolor on canvas.

Photoshop Brushes

Wet Paint Acrylic Photoshop Brushes

This Photoshop Brush Pack includes 16 High Quality, Wet Acrylic Paint strokes, all at super high resolution. Perfect for art projects, personal use, and commercial use.

46 Stunning High Resolution Photoshop Light Effect Brushes

In this set you will find a collection of 46 high resolution Photoshop light effect brushes. These brushes are perfect for creating cool mystical or cinematic looking light effects in your designs.

27 Grungy Film Photoshop Brushes

A set of 27 High Resolution Grungy Film Photoshop Brushes from those textures created by LostandTaken.

10 Free Hi-Res Waterlogged Maps

25 Fingerprint Brushes

These brushes can form great background textures, or even be the central focus of a design related to some sort of mystery.

Old Paper Brush

30 Free Photoshop Swirl Brushes

A set with 30 high-quality swirl Photoshop brushes with an average size 2000px. These brushes were created with Adobe Photoshop CS4 and also work with the version CS, CS2 and CS3.

.PSD Files

Curl Preview Border

This is a Photoshop .PSD File, with a curl preview border.

Windows 7 Box .PSD

Paperbag .PSD

lock PSD

Free Fonts

20+ High-Quality Free Fonts for Retro and Vintage Design

The fonts (20+) of this list are absolutely free and you can freely use these resources for your designs, click on the images below to download them.

Fresh Free Fonts #3

I will look forward to bring a lot of great fonts that will sure help you improve your typography work.

21 Best Fonts for Hand Drawn Style Web

60+ Free Fonts for Big, Bold and Beautiful Headlines

Soraya

Half serif, half sans serif. Capital letters A-Z, available only in Illustrator AI format.

40 Free Calligraphy Fonts

Art of beautiful, stylized, or elegant handwriting or lettering with pen or brush and ink. It involves the correct formation of characters, the ordering of the various parts, and the harmony of proportions. Here is a beautiful collection of 40 Free Calligraphy Fonts to download and use.

40 Fresh Free Fonts To Enhance Your Designs

A Collection of Fresh Free Fonts to Enhance Your Designs by which you can save money and focus on making great applications.

DVD Case Inlay

Inlay for an Amaray DVD case.

How to Create a Slick and Clean Button in Photoshop

This Photoshop tutorial shows you how to create a simple and clean “Web 2.0 style” button sprite with a rollover state. You’ll also learn how to set up the sprite using some basic CSS techniques (CSS background sprite and CSS text image replacement).

A .psd file is available for download.

Worth Checking Freebies

Tiled Ornamental Twitter Background

A free repeating pattern that is ideal to be used as a twitter background, created from some Victorian images from some books.

Old Vintage Paper Tag

The tag is in .PNG format with a transparent background, one with the text and one with it removed. Its great for adding it to web designs or photo manipulations.

Scandinavian-style simple patterns

The tag is in .PNG format with a transparent background, one with the text and one with it removed. Its great for adding it to web designs or photo manipulations.

Stylized Clouds

The theme of this pattern is a subtle blue sky and stylized retro clouds.

PHP Security: Fortifying Your Website- Power Tips, Tools & How to’s

2009-07-05T21:20:57Z

Defining PHP Security and It’s uses

PHP is the most popular web programming languages in use today due in large part to the fact that it’s a highly flexible syntax that can perform many functions while working flawlessly in conjunction with html – Plus it’s relatively easy to learn for beginners, yet it’s powerful enough for advanced users as well. It also works exceptionally well with open source tools, such as the Apache web server and MySQL database. In other words, its versatility is unsurpassed when compared to other scripting languages, making it the language of choice for many programmers.

Though many programmers and developers may be implementing PHP in their websites, the issue of PHP security is often overlooked when building a site. Insecure coding is rather common in PHP due to the fact that it’s such a forgiving language that will often “work” even when there are a few loose ends in the coding. These “loose ends” are what hackers are looking for, and in PHP, they’re not that hard to find. The key is for you to find them first, and to leverage PHP’s unique features to minimize your security vulnerability.

PHP Security involves minimizing programming errors as much as possible, and putting proper code in place to protect against possible vulnerabilities – Often times this means putting 2-3 “layers” of protection in place to guard sensitive data against hackers that could otherwise cause a catastrophic result if compromised. Developers call this principle of redundant safeguarding Defense in Depth, and this concept has been proven over the years to be an extremely effective defense against malicious attacks.

Types of Attacks

There are various types of attacks that PHP is particularly vulnerable to, and any website that sends or receives information is at risk of an attack – ranging from an annoyance to catastrophic – so it’s important to put the proper security in place to minimize the risk. The two main types of attacks are human attacks and automated attacks – Both of which can potentially devastate a website.

The most common type of human attacks are little more than annoyances and are common at file storage sites and forums, such as abusing file storage policy, defamation, lobbying at sites such Amazon or Yahoo Answers, and other similar abuse that doesn’t necessarily involve manipulation of your website’s source code. Humans can also find security holes that allow them to access source code and use it maliciously. This can potentially cause substantial damage to your website, so this is the type of human attack you should focus your efforts on.

Automated attacks are particularly dangerous because of their efficiency in using the power of automated scripts to wreak havoc on your website in a number of different ways. These attacks may slow down your site, access the error logs, manipulate the source code, or compromise sensitive information – The possibilities are seemingly endless. The most common, and notorious, type of automated attack are viruses and worm, which are slightly different in nature but are similar in the way that they can potentially harm a website.

The goal of PHP security is to minimize, and ultimately eliminate, the potential for both human and automated attacks by putting into place strategic lines of defense to eliminate access to your site by unverified users. The way you go about doing this is to target the most common types of PHP security breaches first, so that you make your website airtight against malicious attacks. So what are the most common types of PHP security breaches?

Most Common PHP Security Vulnerabilities

Experienced hackers know the most common types of security holes to look for in PHP, so it’s important to address these issues first. It doesn’t matter whether you’re a beginner or expert PHP programmer, every programmer makes mistakes now and then, and hackers will find it if you don’t first.

1. Register_Globals

Register_Globals makes writing PHP applications simple and convenient for the developer, but it also poses a potential security risk. This setting is located in PHP’s configuration file, which is php.ini, and it can be either turned on or off. When turned on, it allows unverified users to inject variables into an application to gain administrative access to your website. Most, if not all, PHP security experts recommend turning register_globals off.

For example take a look at the code snippet below. A user could append the end of a page’s url with ?admin=1 to basically force entry to administrative areas that would normally require a password.

With register_globals turned off, this type of forced entry isn’t possible. The good news is that PHP 4.2.0 has register_globals turned off as its default setting, and PHP 6.0.0 has actually removed the feature. While some developers frown upon this move because register_globals off makes programming in PHP slightly more time-consuming, but in terms of PHP security it’s a crucial step in the right direction.

So instead of relying on register_globals, you should instead go through PHP Predefined Variables, such as $_REQUEST. To further tighten security, you should also specify by using: $_ENV, $_GET, $_POST, $_COOKIE, or $_SERVER instead using the more general $_REQUEST.

2. Error Reporting

Error reporting is a great tool for diagnosing bugs and allowing you to fix them quicker and easier, but it also poses a potential security threat. The problem occurs when the error is visible to others on-screen, because it reveals possible security holes in your source code that a hacker can easily take advantage of. If display_errors is not turned off, or have a value of “0”, the output will appear on the end user’s browser – Not good for security! You do, however, want to set log_errors to on, and then indicate the exact location of the log with error_log.

Take a look at the table below from PHPFreaks.com, which points out the recommended settings for both production and development instances of PHP web applications.

3. Cross-Site Scripting (XSS)

Cross-site scripting, or XSS, is a way for hackers to gather your website’s user data by using malicious markup or JavaScript code to trick a user, or their browser, to follow a bad link or present their login details to a fake login screen that instead of logging them in, steals their personal information. The best way to defend against XSS is to disable JavaScript and images while surfing the web, but we all know that’s nearly impossible with so many websites using JavaScript’s rich application environment these days.

To defend against XSS attacks, you need to be proactive – Don’t wait until your website has already been exploited. For instance, PHP applications that use form submission, or POST requests, are much less vulnerable than GET requests. So it’s very important that you spell out which variables and actions will be allowed as GET values, and also which ones must come via POST values. In a nutshell, defending against XSS involves controlling the user input at your site and making sure that it goes through a filtering process to ensure that it’s void of malicious code.

An example of filtering user input can be found in the snippet of code below that was taken from Pro PHP Security by Chris Snyder and Michael Southwell.

This relatively straightforward piece of code works by preventing html and JavaScript from being embedded in the input, which results in a completely safe version of the input. This is especially useful for comment sections of a blog, forums and other web applications that receive user input.

Also useful for protecting against XSS is a useful PHP function called htmlentities(). This simple function works by converting all characters in html to their corresponding entities, such as “<” would convert to “<” (without the quotes).

4. Remote File Inclusion (RFI)

This type of attack is relatively unknown amongst developers, which makes it an especially damaging threat to PHP security. Remote file inclusion, or RFI, involves an attack from a remote location that exploits a vulnerable PHP application and injects malicious code for the purpose of spamming or even gaining access to the root folder of the server. An unverified user gaining access to any server can wreak major havoc on a website in many different ways, including abusing personal information stored in databases.

A great example of an RFI attack can be found atPHPFreaks.com. Here’s an exerpt from that page:

Imagine that at http://example.com/malice.php a file exists and our script is located at http://site.com/index.php. The attacker will do this request: http://site.com/index.php?page=http://example.com/malice. This file will get executed when it is included and it will a write a new file to the disk.

The best way to secure your site from RFI attacks is through php.ini directives – Specifically, the allow_url_fopen and the allow_url_include directives. The allow_url_fopen directive is set to on by default, and the allow_url_include is set to off. These two simple directives will adequately protect your site from RFI attacks.

Other PHP Security Tools

While the most effective way to secure PHP web application is through accurate coding and vigilante monitoring of your site, there are other helpful tools out there that can help to quickly and easily point out possible vulnerabilities in your PHP coding. Here are three useful tools that can be beneficial to PHP developers:

- PhpSecInfo

This useful tool reports security information in the PHP environment, and best of all, it offers suggestions for improving the errors. It’s available for download under the “New BSD” license, and the PhpSecInfo project is always looking for more PHP developers to help improve this tool.

Download PhpSecInfo Here.

- PHP Security Scanner

This is a tool used to scan PHP code for vulnerabilities, and it can be used to scan any directory. PHP Security Scanner features a useful UI for better visualization of potential problems, and it supports basic wild card search functionality for filtering directories or files that are to be searched.

Download PHP Security Scanner Here

- Spike PHP Security Audit Tool

The Spike PHP Security Audit Tool is an open source solution for doing static analysis of PHP code. It will search for security exploits, so you can correct them during the development process.

Download Spike PHP Security Audit Tool Here

Author: Joel Reyes

Joel Reyes Has been designing and coding web sites for several years, this has lead him to be the creative mind behind Looney Designer a design resource and portfolio site that revolves around web and graphic design.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

Premium WordPress Themes Giveaway: Winners Announced

2009-07-05T07:47:25Z

Few weeks ago we announced that Six Leaders in the Premium WordPress Theme industry are offering to give away free copies of their recently-released themes just for you guys. They are giving away 17 single licenses to their most popular Premium WordPress themes.

Over 440 wonderful readers participated in the giveaway. And the winners were randomly selected and are now announced in this post.

And the winners are…

#46878 | Abhijeet
#46978 | Antonio Caldas
#45718 | Ramy Wafaa
#45579 | Balu
#45218 | Cory
#45103 | Savas
#45059 | Jarrod Skeggs
#45050 | Fuad Ahasan Chowdhury
#45048 | brother
#45023 | Ronald Fernandez
#44983 | bhatnaturally
#44946 | Lamin Barrow
#44907 | Jason Pelker
#44857 | Mark
#44818 | Eric Granata
#44779 | Ahmed El Gamil
#44730 | kevinsturf

Thank you to everyone that participated and congratulations to all the winners.

Be prepared, we are working on a big (really) big event very soon, more stunning and fabulous giveaways are coming. Therefore maybe it’s a good time to subscribe to our RSS-feed Subscribe to our RSS-feed.

50 Free High-Quality and “New” (X)HTML/CSS Templates

2009-07-05T07:48:42Z

In this post, we’ll showcase 50 Free high-quality & New (X)HTML/CSS template (some of them include the PSD-source files). You will also find among these elegant templates a very well written step-by-step tutorials showing you how to create your own. Hopefully some of these will meet your expectations and come in handy in your projects.

You will have to check the license first for any restrictions or guidelines before using any template.

Shape

View Demo | Download

2 Breed

This template was fascinated by nature, with attractive and vibrant colors.

View Demo | Download

Environment Brand Design

View Demo | Download

DelliStore

This is a full px-based, cross-browser-compliant (X)HTML/CSS-template (IE 6, IE 7, Firefox, Safari, Google Chrome). It consists of 4 custom pages; the PSD-source is included.

View Demo | Download

WaterColored Portfolio Coded

A valid, standards compliant XHTML and CSS home-page from PSD template. You will also find a useful PSD to HTML Tutorial.

View Demo | Download

Clean Web 2.0 Layout

This tutorial will show you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design. All source files are included.

View Demo | Download

Dark and sleek web layout

A step-by-step tutorial on how to create a beautiful dark and sleek web layout using standards-based HTML and CSS. Source files are included.

View Demo | Download

SindromK

Available in 3 color scheme (violet, green and brown).

View Demo | Download

Business Company

This template comes in 3 colour themes: blue, green and violet.

View Demo | Download

Fluid 960 Grid System Templates

960 pixel fixed width, 12-column fluid width and 16-column fluid width, which have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.

View Demo | Download

Symisun

View Demo | Download

JET 30

View Demo | Download

FreshPick 1.0

A simple, minimal, fresh looking design which focus more on content. Great for blogs and small business websites.

View Demo | Download

Creative Media

View Demo | Download

HTML Resume

View Demo | Download

Featuring

View Demo | Download

Green Solutions

View Demo | Download

Facing

View Demo | Download

TreeHouse

View Demo | Download

RamblingSoul

View Demo | Download

Treasure hunters

View Demo | Download

Free Admin Template For Web Applications

This is an admin template which you can use for web applications like: E-commerce projects, Content management systems.

View Demo | Download

Urban Artist

A light on dark template. Has a fixed width, two columns layout. The design is a combination of a dark background and bright colored text and headers.

View Demo | Download

Catalogio-01

View Demo | Download

Futuremag-aio

All in one with style switcher.

View Demo | Download

Design Newsletter Templates

Free newsletter templates which you can find handy for using them in your own e-mail marketing processes.

View Layout | Download

Business

View Demo | Download

DragonFly

View Demo | Download

Black Eyed Susan

View Demo | Download

Black berry

View Demo | Download

Solitude

View Demo | Download

Redish

View Demo | Download

Individual

View Demo | Download

Trial Impact

View Demo | Download

Blog Division

View Demo | Download

Free Software

View Demo | Download

The Sky Was Blue

A free XHTML portfolio template, built using the 960 grid system.

View Demo | Download

The Ultimate Joomla Toolbox: Themes, Extensions and Resources

2009-06-30T11:56:55Z

Joomla is one of the most popular CMSs out there, and it’s no surprise considering how extensible it is. The great thing about Joomla is the extensions (components, modules and plugins), that can be added to your Joomla website. This allows the average user to add more functionality and dynamic content to their website without being a developer or programmer.

In this post you will find a thorough collection of all kinds of resources that will aid designers and developers working with Joomla-powered websites. This collection is intended to simplify your tasks and save you time when working with Joomla.

This post covers essential resources related to Joomla— Themes, Extensions, Tutorials, Forums, Cheat Sheets and Useful Documents.

Joomla’s current version is 1.5, however, some people are still using 1.0. Some of the extensions are only compatible with 1.0, we tried to mix between both version while prioritizing 1.5.

Beautiful Free Joomla Themes

MyPortfolio

Xtreme Sports

Manuscript

Ditystyle

Business

Fashion and Style

Decayed

Sublime

Siteground

ManiFolio

Happiness

Red Evo Aphelion

JW Getty

Beautiful Day

Rainbow

Anemone Colourful

Transparent Bliss

Color Paper

Xblog

Contaminated

Must Have Joomla Extensions

JoomlaPack

Backup is the most important thing for any bloggers. JoomlaPack is an open-source backup component for the Joomla. It allows to create a site backup that can be restored on any Joomla!-capable server.

sh404SEF

sh404SEF is really useful and essentianl Joomla extensions. sh404SEF creates Joomla SEF URL, and turn them to a more user-friendly format for your site visitors, as well as for search engines.

JoomSEO

It is necessary to have correct metadata and keyword get discovered by Search Engines. JoomSEO adds heading tags to content titles and descriptions relevant for the search engines, improving ranking and accessibility.

JoomlaComment

This is a useful comment extension which has features such a threaded comments, CAPTCHA Protection and more.

Avatar/Gravatar Plugin

Avatar/ Gravter is widely used in website. This extension add the gravter functionality to your site.

JoomlaStats

No matter what CMS you are using, Knowing your site stats such as hits, pageviews, search engines & keywords are improtant. JoomlaStats is the great tool to be aware of what users/bots are doing with your site .

Community Builder

Community Builder suite (CB) extends the Joomla! user management system such as : extra fields in profile, enhanced registration workflows, user lists, admin defined tabs and user profiles, image upload, front-end workflow management, Forum, Galleries.

Page Peel Banner

This module is developed based on a wonderful Pageear Script, which shows a Page Peel effect on the site

AllVideos

If you have media site or want to add videos is AllVideo is a must have extension . You can use the plugin to easily embed videos hosted on popular services like YouTube, Metacafe, Vimeo (and many more) inside your Joomla! articles (content items). or playback almost any video/audio filetype directly from your server or a remote server.

JoomGallery

JoomGallery is a gallery component completely integrated into Joomla, with support for Joomla 1.0 and 1.5 native. Easyto configure with fullscreen animated JavaScript view (Lightbox, Slimbox or Thickbox3).

The Ultimate Social Bookmarking Plugin

Blogger all over the world knows how important it is to have a good social network. This plugin will adds social bookmarking buttons to your content, making it easy for your visitors to submit your articles and build traffic to your website.

Joomla! AddThis

Another useful module that intergrates AddThis on your site on specified position.his module only works with Joomla 1.5.x. You can customize any AddThis Parameter easily within the module it self.

Joomulus

A Flash based tag cloud that works with Joomla 1.5

Jumi

If you are web designer or web developer this is a must have plugin. This plugin allows you can include php, html, javascript scripts into the modules position, articles, category or section descriptions, or into your own custom made component pages.

Slick RSS

This is a really cool plugin . It parse and display RSS Feed News with DHTML Teaser Tooltip

AJAX Shoutbox

This Joomla module adds live chat functionality to your Joomla site. Your visitors can chat with each other right in your website without refreshing their browsers.

Contact Enhanced

Getting feedback or allowing your readers to communicate is vital for any kind of website. Contacts Enhanced is a contact component allows to have contact form with CAPTCHA and custom fields.

Mini FrontPage

MiniFrontPage module provides you with a lightweight but powerful news headline style of your most recent content items.

AdSense Module

A really simple handy solution for implementing Google AdSense ads in Joomla.

PixSearch Ajax Search module

Another cool module that mimics search like the one on apple.com. It shows result as you type.

Joomla Tutorials and Resources

A Beginners Guide to organizing content in Joomla

How to administer your Joomla system (set meta info, manage emails, stats)?

How to Move Your Joomla! 1.5 Site to a New Server

How to Convert an existing Web site to a Joomla! Web site?

How to Create Your First Joomla Template

How to make your Joomla admin panel rock?

Writing a Simple Module

Joomla CSS Drop Down Menu Tutorial

How to Speed Up - Optimize Joomla Performance?

Install Joomla locally

Joomla Cheat Sheets and Useful Documents

Joomla Template Cheat Sheet

A cheatsheet for Joomal Templte files and useful syntax

Joomla! Official Documentation

The best place to start for any kind Joomla tips, tricks, questions.

Joomla Database Structure

Joomla Developer Manual

All the helpful information behind Joomla development.

Web Developer SEO Cheat Sheet

Joomla Glossary

A Glossary of all terms related to the Joomla. Very useful.

Joomla 1.5 Basic Template Cheatsheet

Cheatsheets for your Joomla! development

Lots of Joomla related references and chat sheets

Joomla! 1.5 API Reference

The Joomla! Framework API, and A number of third-party libraries used by Joomla! and/or available for use by third-party Joomla! extension developers are listed here.

Joomla! and Common CSS debug tools

Forums and Where to Get Started

Here are some of the sites on the web to find any Joomla related news, tips, tricks and resources:

We tried to bring you the best Joomla resources on web, but it is obvious to miss a great theme, extensions or Joomla related site. Please share it with everyone in the comment.

Author: Kawsar Ali

Kawsar Ali is a web designer, graphic designer, and wannabe photograper based in NY, U.S. He’s also the founder of Desizn Tech, a site for web designer and web developer. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

A Simple Twitter App with Ruby on Rails - Messages With Ajax

2009-06-25T21:39:22Z

Ruby on Rails is a web application framework that promotes rapid development. Clients’ demands are ever increasing yet they still expect the same quality of output.

Frameworks, like Rails, help to achieve this; why?… here are some of the reasons:

Convention over Configuration (CoC):

This is used to reduce the amount of up-front configuartion. The idea is; if you abide by certain coding conventions, you will have little, to none, configuration to do.
Object-Relational Mapping (ORM):

ORM reducing coupling to the database. This abstraction allows you changed the DBMS provider with little trouble.
Structured Code:

The MVC pattern forces you to organise your code in a clean, structured way. This results in more maintainable code.
Plugins:

Plugins save you from re-inventing the wheel every time you want to add functionality to your app. For instance, making you web app capable of performing searches can be easily added with the acts_as_ferret plugin. There are many more plugins!

Who is this Tutorial for?

This tutorial is for people who have learnt the basics of Rails and want to take things to the next level. This tutorial is not a beginners guide for getting started with Rails. If you are just starting out with Rails I suggest this article from Six Revisions.

What this Tutorial Covers

In the first part of this three part series, we cover setting up a simple message model, which will hold the messages posted. Further to this, we will learn how to post a message asynchronously, using AJAX.

View Demo of Twitter App with Ruby on Rails

Basic Application Design

Ok, so you’ve decided to create a “twitter” style micro-blog using Ruby on Rails. First, we need to think about our basic requirements and from this we can model our application.

There are many ways that this can be done, but we will use a simple technique in which you jot down a few paragraphs about how and what the application is expected to do then highlight the nouns. So, lets try it.

My web app should work in a similar way to twitter. Users should be able to register with the site and create short posts. Users should be able to follow other users. Each user should be able to see their own posts plus the users they are following.

Note that I’ve been selective in what nouns I’ve highlighted. You only really need to take notice of the nouns which you feel will need to store data to the database.

I know there is more to twitter than this, but lets leave it simple. As you can see the “nouns”, which will need to store data to the database are “posts” and “users”. So we require two models:

In the first part of the tutorial, we are going to deal with posts only.

Post
User

Creating the Project Files

Before we do anything we need to create a project for our twitter web app.

  > rails twitter -d mysql

As you can see, I will be using MySQL as the DBMS, however, feel free to use whatever database you want.

Open the database.yml file in the config folder and modify the password as required. An example is shown below.

development:
  adapter: mysql
  encoding: utf8
  database: twittest_development
  pool: 5
  username: root
  password: yourpassword
  host: localhost

Now, create the database with the “rake” command.

  > rake db:create

Implementing the basic Message Model

So let’s go right ahead and generate the “Post” model and migrate it.

  > ruby script/generate model post message:text
  > rake db:migrate

Controller

Now, let’s create a controller for the post model.

  > ruby script/generate controller posts

We need to set up some methods for interacting with the model. Edit your “posts_controller.rb” file and add the following methods:

class PostsController < ApplicationController
  def index
    @posts = Post.all(:order => "created_at DESC")
    respond_to do |format|
      format.html
    end
  end

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end
end

We only need two methods, “index” and “create”. The index method creates an instance variable containing all the posts in descending order. The create method is used to create a new post.

Views

Let’s create the “index” view. First, we’ll create a partial for posts. Create a file called “_post.html.erb” in the views/posts folder and add the code below.

<p><b>Posted <%= time_ago_in_words(post.created_at) %> ago</b></p>
<p><%= post.message %></p>

The index view is now very simple. Create a file called “index.html.erb” in the views/posts folder and add the code below.

<%= render :partial => @posts %>

Create some Posts

Open a console session and create a few new messages, as shown below.

  > ruby script/console
  Loading development environment (Rails 2.3.2)
  >> Post.create!(:message => "My first post" )
  >> Post.create!(:message => "Post number two!" )

Create a Form for Posts

Obviously you’re not going to get the user to use the console to create messages. So, our next task is to inject some functionality into our web app to allow the user to create messages. Twitter has an input box above the indexed messages, which is used for submitting a new message; We will keep our web app the same.

First, we will create a partial for the form, then we will render that partial at the top of the index view. Create a file called “_message_form.html.erb” in the posts view folder and add the following code:

<% form_tag(:controller => "posts", :action => "create") do %>
  <%= label_tag(:message, "What are you doing?") %><br />
  <%= text_area_tag(:message, nil, :size => "44x6") %><br />
  <%= submit_tag("Update") %>
<% end %>

Now, we need to modify the index view to render this partial at the top. Open the index.html.erb file and modify the code as follows:

<%= render :partial => "message_form" %>
<%= render :partial => @posts %>

For this to work we need to make one last modification. Open the route.rb file and map a new “posts” resource, as shown below. (Note: the comments from this file have been removed).

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
end

This creates a few named routes. If you look back to the “create” method in the posts controller, you’ll see that we make use of the posts_path named route; Defining the posts resource makes this named route available.

So, lets fire up the web server and a see how things look.

  > ruby script/server

Now open a browser and go to http://localhost:3000/posts. You should see a screen, as shown below.

Adding some AJAX

AJAX allows you to make asynchronous requests to the server using JavaScript. We will make use of AJAX to make the posting a message a bit smoother.

When the user clicks on the “Update” button, we want the message to update without refreshing the browser. We have a few things to do to add AJAX functionality. First, lets change the “create” method in the posts controller:

  def create
    @post = Post.create(:message => params[:message])
    respond_to do |format|
      if @post.save
        format.html { redirect_to posts_path }
        format.js
      else
        flash[:notice] = "Message failed to save."
        format.html { redirect_to posts_path }
      end
    end
  end

The only change here is the “format.js” code, allowing the create method to respond to JavaScript. Next, we need to create a posts layout file. In the views/layout folder create a file called “posts.html.erb” and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <%= javascript_include_tag :all %>
</head>
<body>
  <div id="content">
    <%= yield %>
  </div>
</body>
</html>

The main purpose of this is to make use of the “javascript_include_tag” call, which includes the relevant JavaScript files for AJAX and some visual effects. Next, we need to make a small addition to the index view (”index.html.erb”).

<%= render :partial => "message_form" %>
<div id="posts">
  <%= render :partial => @posts %>
</div>

As you can see all we have added is a div block surrounding the posts partial. This will be used later when we are specifying where the AJAX response should be placed. Nearly there! Now we will add a div_for block to our post partial (”_post.html.erb”).

<% div_for post do %>
  <p><b>Posted <%= time_ago_in_words(post.created_at) %> ago</b></p>
  <p><%= post.message %></p>
<% end %>

Edit the “_message_form.html.erb” partial and change the form_tag call to form_remote_tag as show in the code extract below:

<% form_remote_tag(:controller => "posts", :action => "create") do %>

The div_for operation create a div block with a unique id, this is especially useful when looping through several records. Finally, we need to create the rjs template. To do this, create a file called “create.js.rjs” in the views/posts folder and add the following code.

page.insert_html :top, :posts, :partial => @post
page[@post].visual_effect :highlight

The first line specifies that a new post partial will be rendered at the top of the posts div when the asynchronous call responds. The second line specifies that a “highlight” visual effect will be applied to that block when it is rendered.

That’s it! Start you web server again, browse to http://localhost:3000/posts and give it a go.

Make it Look Pretty!

I’ve created a stylesheet, which we can use to make things look a bit more respectful. Create a file called layout.css in the public/stylesheets folder then add the following CSS code:

body
{
  font-family: tahoma, sans-serif;
  font-size: 18px;
  background-color: #4B7399;
  width: 100%;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

#content
{
  width: 800px;
  margin: 0 auto;
  text-align: left;
}

.post
{
  padding: 5px 20px 5px 20px;
  background-color: #ffffff;
  margin: 20px 0 20px 0;
  color: #000000;
}

Finally, you will need to add stylesheet_link_tag call to the posts.html.erb layout file. As per below, the call should be placed in the head tag.

<head>
  <%= javascript_include_tag :all %>
  <%= stylesheet_link_tag 'layout' %>
</head>

OK! It doesn’t look that pretty, but it will do for our purposes.

Setting up a Home Page

To have the root URL (http://localhost:3000) direct the user towards your posts you will first need to delete the public/index.html file. Do this now.

The second thing you need to do is set up a route in your config\routes.rb file. Open routes.rb in notepad and add a new line to the end using map.root, as shown below.

ActionController::Routing::Routes.draw do |map|
  map.resources :posts
  map.connect ':controller/:action/:id'
  map.connect ':controller/:action/:id.:format'
  map.root :controller => "posts"
end

For more on routes, try the Rails API Documentation

Now if you browse to http://localhost:3000. The request will be routed to the posts controller.

Summary

This concludes the first part of the series. Depending on the popularity of this article, parts 2 and 3 will follow shortly.

What have we Learnt?

You’ve learnt how to carry out basic application design and how to use this design to work out what models are required. Further to this, you’ve learnt how to use the console to help with the development of your application. Finally, you used AJAX to perform asynchronous requests to the server.

Author: Phil McClure

Phil McClure is a Software Developer from Belfast, Northern Ireland. His main interests are software architecture, design patterns and how these can be applied to web development. Phil blogs at Therailworld. Follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

7 Rich & Creative User Interfaces and How to Create Your Own

2009-06-12T19:11:29Z

There are plenty of perfectly acceptable and functional websites out there that don’t use dynamic content. But what if you want to give your site that little something extra that makes your visitors say “Wow”? What then?

Maybe you’ll find your answer below. There are tons of great, creative user interface options featured below, from modal windows to live search to hover effects. But they aren’t just for looks; each one also adds valuable functionality and improves the user experience of your site. And to help you try out each of these techniques, we’ve also included tutorials and plugins to get you on your way to creating your own dynamic user interface.

Modal Windows

Modal windows, the descendent of annoying popups, are being put to great use all over the Internet. Examples range from using them for simple functions like replacing a dedicated login screen to creating a single-page website that uses modal windows to provide additional content. And there are plenty of usages that fall somewhere in between.

Below are some examples of great modal windows that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Nasi Briyani Lounge uses a modal window to login. It’s a simple but effective use of this option, saving time by not requiring visitors to navigate to a separate page to login.

The Typographic Desk Reference uses a simple modal window to view interior pages of the book. It’s another simple but effective example, and allows the site to be a single page while still providing plenty of information to potential buyers.

The First Twenty is another single-page site that uses modal windows to provide additional information without requiring users to navigate to new pages. The use of a blue shadow behind the window works well with the site’s overall color scheme.

Third & Grand uses modal windows to display video content on their site. Again, it allows the page to be simpler while still allowing more information to be displayed without having to move to a new page.

Art Republic uses modal windows to provide a quick overview of different prints they sell. The window is slightly transparent, giving it a very elegant appearance.

How To Create Modal Windows »

Modal Windows in Modern Web Design from Smashing Magazine
Simple jQuery Modal Window Tutorial from Queness
Lightbox Gone Wild from Particletree
fumodal for jQuery from fudini.net
20+ Ways to Create Javascript Modal Windows and Dialog Boxes from Design Label
GreyBox from Orangoo Labs

Sliding Layouts

Sliding layouts are most commonly used to create sites that exist on a single page, where navigation causes the page in one direction or another to a new section (rather than linking to a new page). Effectively, this means that an entire website can be built on a single page, speeding up a user’s experience.

They’re also implemented to show additional information under a topic heading or other subject. This type most often pushes content on the page out of the way when they’re expanded, but don’t actually move to a new section.

Below are some examples of great sliders that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Goodworks Media uses sliders to keep their website a single page. When you click on any of the links on the homepage, a slider opens up below, showing the content for that topic. Each slider stays open until you click on it again to close it.

Viget Labs is another site that uses sliders to keep all of their content on a single page. But this time the entire page slides left or right to show new content. They also use a number of other, smaller sliders within in the site to provide even more information. Overall, it’s a very slick interface.

Volll uses a vertical slider to display each section (page) within the site. One of the best bits about this site, though, is that the background makes a complete image (sky, shore, in the ocean, and on the ocean floor). It’s a nice touch to give the site an overall sense of cohesiveness while also giving each section its own look.

Danny Blackman Web & Graphics uses a very deliberate vertical scroll and points it right out on the homepage. Instead of a traditional navigation menu, it simply instructs users to click for the next section. There are interesting transitional elements between some of the sections, too.

SeventhStreet uses a slider that requires users to click and drag to get to the next section. A hover effect instructs users of this. You can also “flick” the slider, a bit like the iPhone interface.

How To Create Sliding Layouts »

Sliding JavaScript Menu Highlight 1kb from Leigeber.com
Sexy Sliding JavaScript Side Bar Menu Using Mootools from Andrew Sellick
Scroll Your Internal Links Smoothly from mad4milk
Animated Collapsible DIV v2.2 from Dynamic Drive
Accordian from Mootools
Fx.Slide from Mootools

Hover

Hover effects are often used to provide additional, useful information without cluttering up a page. Some uses include showing additional information about a file download, a preview of a project or another page, or simply to highlight an element.

Below are some examples of great hover effects that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Legwork Studio uses hover in their portfolio to give a preview of their work. When you hover over a project name, not only does it highlight the name, it also displays a modal window with an image of part of the project. It’s a great way to give a brief overview of their work without requiring users to click through to each separate project page.

Household uses a hover effect that displays the name of the particular project and puts a light shadow over other projects on the page. It’s simple but effective.

Coda uses another simple hover effect to provide more information about the download, such as the file size, system requirements, and a link to release notes, when hovering over the download link.

Dragon Interactive uses a colored hover effect on their navigation. When you hover over any button on the page, it transforms into a blue gradient button. It’s simple but offers a big impact.

Squared Eye uses a hover effect in their slideshow to show the next or previous image when you hover over the respective navigation control.

How To Create Hover Effect»

How to Create a Block Hover Effect for a List of Links from Smiley Cat Web Design
Hover Effect with jQuery and CSS from Sohtanaka.com
CSS Link Hover Effects (aka Rollovers) from IfYouCodeItTheyWIll.com
Animate a Hover with jQuery from Timothy van Sas

Slideshows

Slideshows are most often used to display portfolios or similar content, though there are other uses. The key to an effective slideshow is to make it relevant to what your visitors are looking for, whether that’s your portfolio or something else entirely.

Below are some examples of slideshows windows that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

FreeAgent uses a slideshow to show visitors the different kinds of people using their app. It’s a simple but effective use, with obvious “next” and “previous” controls, along with a tabbed navigation for checking out each image.

Tea Round App uses a slideshow with a slider effect to showcase the different parts of their iPhone app. Since the slideshow actually shows up in an iPhone mockup, it’s quite effective.

thirtytwoRound uses a vertical slideshow to showcase their projects. Within each project there’s also a more traditional slideshow with more detailed images. It’s simple but effective. The only drawback is that you can’t use the scroll wheel on your mouse to scroll up and down the page.

Piotr Kulczycki uses a slideshow in his header to showcase some of his travel photography. Navigation is obvious with “next” and “previous” buttons and each image is labeled with the city and date.

Cade Martin Photography uses a very simple slideshow for displaying her work. But because the emphasis should most definitely be on her photography, it’s a stunning example. “Previous” and “next” links are below the images, along with which number slide you’re on.

How To Create Slideshows»

30 Scripts for Galleries, Slideshows and Lightboxes from Smashing Magazine
Ajax Slideshow Gallery Plugin
XML Based Ajax Slideshow from Greepit!
35 Scripts for Galleries, Slidshows, and Lightboxes from I Love You WP
Smooth Gallery from JonDesign

Embedded Audio and Podcasts

Podcasts and other audio content are becoming incredibly common place online. So many designers miss the opportunity these kinds of content provide for creating unique user interfaces. Whether it’s simply offering up more than your standard MP3 or iTunes download or creating a completely custom UI for listening, there are plenty of ways to make the audio content on your site stand out.

Below are a few examples of great embedded audio and podcasts that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Shaun Inman embeds audio into his site between earbuds, allowing the content to be immediately identifiable without any obvious labels.

College Park Church offers a number of options for accessing their online sermons. You can listen online, download an MP3, download a transcript of the sermon, or download a zipped file that includes the audio, transcript, a study guide, the service bulletin, and other information. They also include an option to subscribe via iTunes. It’s an effective layout that offers plenty of options without becoming cluttered by using icons instead of text for each choice.

Grooveshark has one of the nicer interfaces for listening to music online. Searching is simple with results displayed in real time. It’s easy to add songs to your playlist, to listen to those songs, and to control how your playlist is played (via shuffle and repeat options). Overall, a very intuitive and user-friendly interface.

Last.fm’s radio stations use a great interface that integrates images with their audio (kind of like an automatically generated music video) while also providing additional options to users, like the option to download the track, tag it, share it, or get it as a ringtone. Other option are intuitive (a heart to favorite the song, a square for the stop button, etc.)

NPR offers a great interface for getting their podcasts. There are three different options for adding the podcast subscription to iTunes, My Yahoo!, or Zune, as well as for downloading into another podcast tool. Or you can opt to just download the MP3 file for the podcast of your choice. It’s user-friendly and offers the major options their listeners might be interested in without cluttering up the page.

Beatbox - Slick jQuery Animated Audio Portfolio from ThemeForest.net
Making a Podcast from iTunes
Podcast Suite for Joomla!
Streampad Audio Player for WordPress
podPress for WordPress

Search

Most sites have a basic search box somewhere. But search is another one of those areas that’s often overlooked by designers. There are tons of different ways to make search more useful and more user-friendly if you’ll only take the time to do so.

Below are a few examples of great search features that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Footnote uses modal windows for offering more information when performing a search. Again, using modal windows for providing additional content without new page loads is a popular theme.

Get Satisfaction uses a real-time drop-down menu to give you search results as you type. The drop-down also offers tips for better searching.

Accept Innovation Community uses a search box with a modal window that shows ideas that have already been submitted, and to offer users the option of adding an idea that isn’t already there.

SideStep is a travel search engine that allows you to search across multiple travel sites at once. The search function for choosing an airport shows real-time results as you type in the name of a city. It’s a very useful feature that saves time for visitors.

Roost uses a standard search box but what sets it apart is the addition of sliders for refining your search results before actually performing the search. Sample searches below that round out the search experience and make it very user-friendly.

HOWTO: Animated Live Search from OrderedList.com
CakePHP Livesearch from Justkez.com
How-To: Build An Animated Ajax LiveSearch with jQuery and PHP from AbhiTech
Sikbox: Add Live Search Box on Your Website from Jowki
Live Search Explained from JustAddWater.dk
Live Search Popup plugin for WordPress

Tabbed Navigation

Tabbed navigation is more intuitive than most other types of site navigation. A tab suggests moving from one page to another, as you would if you used a tab within a notebook. But tabs don’t need to be limited to the regular horizontal variety (though those are still very effective). There are tons of other options for using tabs, including outside of your main navigation.

Below are a few examples of great sites with tabbed navigation that showcase some excellent uses. In addition are some tutorials and plugins to help you create your own.

Outlaw Design Blog uses oversized tabs for their primary navigation. It’s immediately apparent to new visitors and extremely effective.

Kuantic uses tabs with vertical text for their main navigation. It’s more unique than standard horizontal tabs while still being very user-friendly.

Fancast uses tabs for navigation their popular videos. The active tab turns into an opaque arrow, while the inactive tabs are rectangular and semi-transparent.

BART uses tabbed top navigation with hover-activated drop-down menus. It’s effective while remaining simple and uncluttered.

Veer’s tabbed navigation uses slightly different shades of gray for each tab and a drop shadow to emphasize their separation. It’s a very elegant design that still has plenty of personality.

50+ Nice Clean CSS Tab-Based Navigation Scripts from Hong Kiat
Sliding Doors of CSS from A List Apart
Tabbed Navigation Case Study from JakeO.com
56 CSS Tabs and Navigation Menu Scripts and Examples from TechFlaps
Tabbed Navigation, and What Makes it Useful from UX Booth

Author: Cameron Chapman

Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

How To Create Your Own Stats Program (JavaScript, AJAX, PHP)

2009-06-25T21:31:20Z

When creating a website, one main goal is to attract visitors. Traffic generation is a necessity for monetary purposes, showing off your work, or just expressing your thoughts. There are many ways to create traffic for your website. Search engines, social bookmarking, and word of mouth are just a few examples. But how do you know whether this traffic is genuine? How do you know if your visitors are coming back for a second time?

These questions have raised the concept of web statistics. Often times, webmasters use certain programs, such as Google Analytics or Awstats, to complete this job for them. These programs obtain a wide variety of information about visitors to a site. They find page views, visits, unique visitors, browsers, IP addresses, and much more. But how exactly is this accomplished? Follow along as we present a tutorial on how to create your own web statistics program using PHP, JavaScript, AJAX, and SQLite.

View Demo of your Own Stats Program

To begin, let’s start with some simple HTML markup that will act as the page we are tracking:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Web Statistics</title>
</head>
<body>

<h2 id="complete"></h2>

</body>
</html>

The h2#complete element will be filled dynamically with JavaScript once the page view has successfully been tracked by our web statistics. To initiate this tracking, we can use jQuery and an AJAX request:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
	// Set the data text
	var dataText = 'page=<?php echo $_SERVER['REQUEST_URI']; ?>&referrer=<?php echo $_SERVER['HTTP_REFERER']; ?>';

	// Create the AJAX request
	$.ajax({
		type: "POST",                    // Using the POST method
		url: "/process.php",             // The file to call
		data: dataText,                  // Our data to pass
		success: function() {            // What to do on success
			$('#complete').html( 'Your page view has been added to the statistics!' );
		}
	});
});
</script>

Consider the above code step by step:

When the DOM is ready, we first set our dataText. This text is in query string format and will be sent as data to process.php, which will track this page view.
We then create an AJAX request that uses the POST method to send form data.
Our form data (dataText) is then sent to process.php in the root of our server.
Once this request is completed, the h2#complete element is filled with a successful notice

Our next job is to write process.php. Its main goal is to obtain information about the web statistics and store it in a database. Since our database has not yet been made, we must create a simple file, install.php, which will do this for us:

<?php
	# Open the database
	$handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'stats.db', 0666, $sqliteError ) or die(  $sqliteError  );

	# Set the command to create a table
	$sqlCreateTable = "CREATE TABLE stats(page text UNIQUE, ip text, views UNSIGNED int DEFAULT 0, referrer text DEFAULT '')";

	# Execute it
	sqlite_exec( $handle, $sqlCreateTable );

	# Print that we are done
	echo 'Finished!';
?>

This code is mostly straightforward. It opens up a database (stats.db) in the root of the server and creates a database for it. The string inside $sqlCreateTable is a SQLite command that makes our statistics table. This table contains four colums: Page, IP Address, Views, and Referrer:

Page is a String that contains the page being viewed as a relative link (i.e. /index.php).
IP Address is also a String that contains a list of IP Addresses that visited this page. It is in the format of numVisits1(IP Address1) numVisits2(IP Address2) numVisits3(IP Address3) etc. For example, if we obtained 10 visits from 74.35.286.15 and 5 visits from 86.31.23.78 (hypothetical ip addresses), this String would be "10(74.25.286.15) 5(86.31.23.78)".
Views is an integer containing the number of times the page has been viewed.
Referrer is a String in the same format as IP Address. It contains all referrers to this page and how many referrals have been made.

And now onto process.php:

# Connect to the database
$handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'/stats.db', 0666, $sqliteError ) or die( $sqliteError );

# Use the same-origin policy to prevent cross-site scripting (XSS) attacks
# Remember to replace http://yourdomain.com/ with your actual domain
if( strpos( $_SERVER['HTTP_REFERER'], 'http://yourdomain.com/' ) !== 0 ) {
     die( "Do not call this script manually or from an external source." );
}

# Obtain the necessary information, strip HTML tags, and escape the string for backup proetection
$page = sqlite_escape_string( strip_tags( $_POST['page'] ) );
$referrer = sqlite_escape_string( strip_tags( $_POST['referrer'] ) );
$ip = sqlite_escape_string( strip_tags( $_SERVER['REMOTE_ADDR'] ) );

# Query the database so we can update old information
$sqlGet = 'SELECT * FROM stats WHERE page = \''.$page.'\'';
$result = sqlite_query( $handle, $sqlGet );

This first snippet connects to our stats database and gets the information we need for the current visit. It also queries the database and obtains any information previously stored. We use this information to create an updated table.

The next job is to find old information:

# Set up a few variables to hold old information
$views = 0;
$ips = '';
$referrers = '';

# Check if old information exists
if( $result && ( $info = sqlite_fetch_array( $result ) ) ) {
	# Get this information
	$views = $info['views'];
	$ips = $info['ip'].' ';
	if( $info['referrer'] )
		$referrers = $info['referrer'].' ';

	# Set a flag to state that old information was found
	$flag = true;
}

The above code finds all previous information in our table. This is vital, as we need to update the number of views (increase it by one), IP addresses, and referrers.

# Create arrays for all referrers and ip addresses
$ref_num = array();
$ip_num = array();

# Find each referrer
$values = split( ' ', $referrers );

# Set a regular expression string to parse the referrer
$regex = '%(\d+)\((.*?)\)%';

# Loop through each referrer
foreach( $values as $value ) {
	# Find the number of referrals and the URL of the referrer
	preg_match( $regex, $value, $matches );

	# If the two exist
	if( $matches[1] && $matches[2] )
		# Set the corresponding value in the array ( referrer link -> number of referrals )
		$ref_num[$matches[2]] = intval( $matches[1] );
}

# If there is a referrer on this visit
if( $referrer )
	# Add it to the array
	$ref_num[$referrer]++;

# Get the IPs
$values = split( ' ', $ips );

# Repeat the same process as above
foreach( $values as $value ) {
	# Find the information
	preg_match( $regex, $value, $matches );

	# Make sure it exists
	if( $matches[1] && $matches[2] )
		# Add it to the array
		$ip_num[$matches[2]] = intval( $matches[1] );
}

# Update the array with the current IP.
$ip_num[$ip]++;

The above two loops are very similar. They take in the information from the database and parse it with regular expressions. Once this information is parsed, it is stored in an array. Each array is then updated with the information from the current visit. This information can then be used to create the final String:

# Reset the $ips string
$ips = '';

# Loop through all the information
foreach( $ip_num as $key => $val ) {
	# Append it to the string (separated by a space)
	$ips .= $val.'('.$key.') ';
}

# Trim the String
$ips = trim( $ips );

# Reset the $referrers string
$referrers = '';

# Loop through all the information
foreach( $ref_num as $key => $val ) {
	# Append it
	$referrers .= $val.'('.$key.') ';
}

# Trim the string
$referrers = trim( $referrers );

The final strings are now created. IPs and Referrers are in the form: “numVisits1(IP/Referrer1) numVisits2(IP/Referrer2) etc.” For example, the following could be the referrer String:

5(http://www.noupe.com) 10(http://css-tricks.com)

It means that 5 referrals came from http://www.noupe.com and 10 came from http://css-tricks.com. This format saves space and is easy to parse as web statistics.

Now for the final few lines:

# Update the number of views
$views++;

# If we did obtain information from the database
# (the database already contains some information about this page)
if( $flag )
	# Update it
	$sqlCmd = 'UPDATE stats SET ip=\''.$ips.'\', views=\''.$views.'\', referrer=\''.$referrers.'\' WHERE page=\''.$page.'\'';

# Otherwise
else
	# Insert a new value into it
	$sqlCmd = 'INSERT INTO stats(page, ip, views, referrer) VALUES (\''.$page.'\', \''.$ips.'\',\''.$views.'\',\''.$referrers.'\')';

# Execute the commands
sqlite_exec( $handle, $sqlCmd );

That’s all there is to it for process.php. As a review, it finds the IP Address and Referrer of the visitor, uses the values to create two Strings, increases the number of views of the page by one, and places all of these values into the database.

There is now only one task left. We have to display the web statistics. Let’s call the following file display.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Web Statistics Display</title>
</head>
<body>

<?php
	# Open up the database
	$handle = sqlite_open( $_SERVER['DOCUMENT_ROOT'].'/stats.db', 0666, $sqliteError ) or die( $sqliteError );

	# Get all the statistics
	$sqlGet = 'SELECT * FROM stats';
	$result = sqlite_query( $handle, $sqlGet );

	# Create an unordered list
	echo "<ul>\n";

	# If there are results
	if( $result ) {
		$page_views = 0;
		$unique_visitors = 0;

		# Fetch them
		while( ($info = sqlite_fetch_array( $result ) ) ) {
			# Get the page, views, IPs, and referrers
			$page = $info['page'];
			$views = $info['views'];
			$ips = $info['ip'];
			$referrers = $info['referrer'];

			# Print out a list element with the $page/$views information
			if( $views == 1 )
				echo "\t<li>\n\t\t<p>$page was viewed $views time:</p>\n";
			else
				echo "\t<li>\n\t\t<p>$page was viewed $views times:</p>\n";

			# Update the number of page views
			$page_views += $views;

			# Parse the data of IPs and Referrers using process.php's code
			preg_match_all( '%(\d+)\((.*?)\)%', $ips, $matches );

			# Find the size of the data
			$size = count( $matches[1] );

			# Create a sub list
			echo "\t\t<ul>\n";

			# Loop through all the IPs
			for( $i = 0; $i < $size; $i++ ) {
				# Find the number of visits
				$num = $matches[1][$i];

				# Find the IP address
				$ip = $matches[2][$i];

				# Print the info in a list element
				if( $num == 1 )
					echo "\t\t\t<li>$num time by $ip</li>\n";
				else
					echo "\t\t\t<li>$num times by $ip</li>\n";

				# Update the number of unique visitors
				$unique_visitors++;
			}

			# Repeat the whole process for referrers
			preg_match_all( '%(\d+)\((.*?)\)%', $referrers, $matches );
			$size = count( $matches[1] );

			# Loop through each one
			for( $i = 0; $i < $size; $i++ ) {
				$num = $matches[1][$i];
				$referrer = $matches[2][$i];

				# Print out the info
				if( $num == 1 )
					echo "\t\t\t<li>$num referral by $referrer</li>\n";
				else
					echo "\t\t\t<li>$num referrals by $referrer</li>\n";
			}

			# End the sub-list
			echo "\t\t</ul>\n";

			# End the list element
			echo "\t</li>\n";
		}

		echo "\t<li>Total unique visitors: $unique_visitors</li>\n";
		echo "\t<li>Total page views: $page_views</li>\n";
	}

	# End the unordered list
	echo "</ul>\n";

	# Close the database
	sqlite_close($handle);
?>

</body>
</html>

It may seem daunting, but it is very similar to process.php. It parses the page, views, ip addresses, and referrers from the database. It then continues to output these in an unordered list format.

The final output is as follows:

View Demo of your Own Stats Program

Thank you for reading and good luck!

Author: Karthik Viswanathan

Karthik Viswanathan is a high-school student who loves to program and create websites. You can view Karthik’s work on his two blogs, Resource Mania and Lateral Code. He has also developed a PHP library for traversing HTML documents, which can be found here.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

How AJAX Works: 10 Practical Uses For AJAX

2009-06-22T22:42:59Z

AJAX has gotten more and more popular over the years, and has allowed web applications to act more and more like desktop applications. AJAX can provide a lot of additional functionality that could not be accomplished any other way.

What Is AJAX? How Does It Work?

AJAX stands for Asynchronous JavaScript and XML. It is used for allowing the client side of an application to communitcate with the server side of the application. Before AJAX, there was no way for the client side of a web application to communicate directly with the server. Instead, you would have to use page loads. With AJAX, the client and server can communicate freely with one another.

Here is how the usual AJAX script goes:

Some action triggers the event, like the user clicking a button.
The AJAX call fires, and sends a request to a server-side script, using XML
The server-side script (PHP, ASP, or whatever) takes the input from JavaScript, can access the database if it needs to, and processes the data.
Using XML again, the script sends the data back to the original client-side page that made the request
A second JavaScript function, called a callback function,catches the data, and updates the web page

Throughout this tutorial, we will discuss how various scripts use this routine to accomplish a wide variety of effects.

1. Login Forms

Instead of going to a login page, and then navigating back to the page you originally wanted, with AJAX, a user can type in their user name and password directly into the original page. From there AJAX will send a request to the server to log them in. The server let’s the page know they’ve been logged in, and the page you are on can update as needed. Digg has a login-system that works like this.

Example: Digg.com (top of page)

Plugin: jQuery Form Plugin

2. Auto-Complete

Google was one of the first major companies to start using AJAX, and Google’s search suggestion tool was one of the first ways they used it, and one of the first auto-complete tools made. When typing into the Google search bar, it starts to use AJAX to get common results from the database on each keystroke. Auto-Complete is great for forms where you have a lot of possible inputs, and making a select drop down would be too long and cumbersome.

Example: Google Search

Plugin: jq autocomplete

3. Voting and Rating

Social bookmarking sites like Digg and Reddit let the users decide the main content of the site by voting on content that the users like. They use AJAX to handle all of the voting, so that the users are able to voice their opinions on a number of stories quickly and easily.

Example: Reddit

4. Updating With User Content

One of the things that made Twitter so popular was their simple and easy-to-use interface. When someone makes a ‘tweet’, it is instantly added to their feed, and everything is updated. Recently, Twitter has started using AJAX with their ‘trending topics’ pages. Every few seconds, the page lets the user know that more tweets have been made about the subject, giving them up-to-the-second updates.

Example: Twitter

5. Form Submission & Validation

Forms have always tricky to work with, but AJAX can make them a lot better for the users. AJAX can be used in a variety of ways, from the auto complete mentioned above, to validation and submission as well. Some sites use AJAX to check if a form meets certain requirements, such as password strength, or if something is a valid email or URL.

Example: 10 Cool jQuery Form Plugins

6. Chat Rooms And Instant Messaging

Chatting online has come a long way from the days of IRC. Chat rooms and instant messaging can now be handled in the browser completely. There are two main AJAX processes in a chat room or IM application. Think of one of them as your ears, and one of them as your mouth. Your ‘mouth’ updates the server and lets it know that you have sent a message. The ‘ears’ check with the server constantly, and updates your page with messages that have been sent by whoever you are chatting with.

Example: Meebo Chat (Uses Ajax)

Plugin: GMail/Facebook Style Chat Script

7. Slicker UIs

Creating a clean, slick user interface is a very popular use of AJAX. It allows users to accomplish more on a single page. The benefits of this are twofold: First, it makes using the web application quicker and easier for the user; Secondly, it cuts down on the number of requests you have to make to the server, which cuts down on bandwidth and load times. A free file upload service called Drop.io uses this well. Google has also really pushed the envelope of what is possible with AJAX by making desktop-like applications like Google Docs and Google Maps.

jQuery UI Library

8. External Widgets

When using AJAX, the page that is using the JavaScript isn’t just limited to the server it is located on. The AJAX can make a call to any server online. This is how a number of plug-ins for Content Management Systems like Wordpress work, and other various scripts like Google Adsense.

Example: Google Adsense

Plugin: Script for loading external content into div

9. Lightboxes instead of pop-ups

Pop-up blockers are very common place these days, and for a good reason: pop-ups are annoying. Using light boxes, which are pop-ups inside the browser window, the pop-up blocker can’t stop it, and they aren’t quite as irritating to the user. Some people use them for advertising, like on Darren Rowe’s ProBlogger.com. They can also be used for something like a login or register box, like Reddit does when you try to vote and you are not logged in.

Example: Logo Sauce

Plugin: Lightbox Plugin

10. Using AJAX With Flash

Using AJAX along with Flash is a rarely used technique, but it can be used to generate some impressive results. The flash game website Kongregate uses this to great effect. Using their API, they have their own achievement system that involves winning ‘badges’ for completing various accomplishments in games. When a badge is earned, the API in Flash sends a response back to JavaScript, which then uses AJAX to update the user’s profile with the newly earned award.

Example: Kongregate

Plugin: jQuery Flash Plugin

I hope this article has given you a lot of ideas of how you can use AJAX to improve and expand your web applications. What are some other uses you can think of for AJAX?

Author: Joel Reyes

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

15 Effective Tips and Tricks from the Masters of CSS

2009-06-10T21:40:48Z

There are thousands of sites out there offering tips and tricks for using CSS. But how do you know where that information is coming from? Who says the people writing these “tips” know what they’re talking about? For all you know, it could be someone who has not clue what CSS even stands for, let alone how to use it effectively.

But that’s not the case with the experts below. They’re all well-known for their mastery of CSS and all that goes along with it. Read on for their tips and tricks with regards to everything from avoiding hacks to understanding the box model.

Peter-Paul Koch: Avoid CSS Hacks

As web design has progressed, the endlessly nested table has transformed into the endlessly complicated CSS hack. In many cases, CSS hacks solve one bug by exploiting another one; not exactly the most stable way to fix something. When the next version of the browser is released, it might fix neither or both bugs, or it might fix one but not the other. In any case, it’s likely your hack might end up not working, or not being necessary any longer.

Jonathan Snook: Avoid Unnecessary Selectors

To keep your style sheets as short and condensed as possible, avoid repeating yourself by only specifying the minimum number of selectors. In other words, do you really need to specify UL and LI? Why not just specify the UL? The same goes for other elements likely to be nested. Just specify the upper-most level and leave the rest to inherit those styles.

Roger Johansson: Specify a Maximum Width for Em-Based Layouts

Creating an elastic layout that don’t specify a maximum width in anything other than em units is a quick way to make a very uncomfortable site. As your visitors increase the text size, your layout gets wider. But what happens when they increase the size by more than one or two em units? Your layout just gets wider and wider and pretty soon they have to scroll horizontally in order to read an entire line. Specify a maximum width to avoid that problem and make your site more user-friendly.

Trevor Davis: Set a Consistent Base Font Size

By setting your base font size at 62.5%, you end up with a font size of 10 pixels. This makes 1 em equal to 10 pixels. 1.2 em is then equal to 12 pixels. It simplifies font sizing in all of your selectors thereafter.

Dan Cederholm: Use Negative Margins

Using negative margins can greatly simplify your code. Instead of specifying positive margins for a dozen or more elements, why not just specify a negative margin for one? It makes your style sheets shorter and less complex.

Ben Henick: Don’t Add Markup Unless Context Encourages It

When transitioning from table-based layouts, many designers are tempted to add in an abundance of container elements. But CSS isn’t the same as tables. Thinking through your design ahead of time is one way to avoid this, as is focusing on the information first. Try to only use divs and spans for content elements that share a common purpose or classification and are repeated across multiple pages.

Eric Meyer: Use Print-Specific Style Sheets

Forget about creating separate printer-friendly pages for your content. Use CSS to create media-specific styles for your documents instead. Printer-friendly style sheets are easy to create and avoid problems designers used to encounter regarding the regular version and printer-friendly version being slightly different from each other. After all, with this method you’re not touching the page markup at all.

Wolfgang Bartelme: Center with CSS

For people just starting out with CSS, centering an entire website can sometimes seem like an impossibility. But it’s definitely possible and actually relatively easy to achieve.

Trenton Moss: Use Mobile-Specific Stylesheets

With more and more people browsing the web primarily through mobile devices, it’s important to make sure your website is optimized for those visitors. While most handhelds will render pages reasonably well using standard CSS, it’s still not the best user experience on a 3″ screen. Create a separate mobile style sheet to optimize the experience for mobile users.

Chris Coyier: Use the CSS Overflow Property Correctly

There are four different values available for the CSS overflow property: hidden, visible, scroll, and auto. By understanding what each of these does and how each behaves, you open up a lot more options for your site’s layout.

Ethan Marcotte: Create Fluid Grids with CSS

The idea of creating a fluid grid design, especially with CSS, is likely to send shivers down the spines of many web designers. But it is possible, and is definitely preferable to creating them with tables.

Jonathan Snook: Use CSS Shorthand

Using shorthand is another way to simplify and shorten your stylesheets. Instead of declaring separate styles for each margin (margin-left, margin-right, margin-top, margin-bottom), just declare them for all four at one time. The same goes for other elements, such as font, border, or background.

Chris Coyier: Understand the CSS Box

Everything element in CSS is a rectangular box. Padding, margins, height, width and borders all interact with these rectangular boxes. Gaining a real understanding of how these things interact will make life as a designer infinitely easier.

Roger Johansson: Be Wary of Hiding Things With CSS

It’s tempting when you want to hide an element on your page to use “display:none.” The problem with this, though, is that this particular declaration means that the contents within that element are completely hidden—they aren’t printed, displayed, or spoken. This can cause issues for those using screen readers as opposed to viewing your website. It can also cause issues when you’re going to hide something until a user performs a certain action (most likely with JavaScript).

Peter-Paul Koch: Know When to Use Strict Mode or Quirks Mode

Strict mode and quirks mode apply to the two different ways modern browsers use to interpret CSS. By understanding what each one does and then implementing the correct one for your design, you can greatly improve your site’s functionality.

Author: Cameron Chapman

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

Noupe

50 Best-Of Designer’s (NEW) Download Picks and Resources

Vector Graphic Packs

Textures

Icon Sets

Photoshop Brushes

.PSD Files

Free Fonts

Worth Checking Freebies

PHP Security: Fortifying Your Website- Power Tips, Tools & How to’s

Defining PHP Security and It’s uses

Types of Attacks

Most Common PHP Security Vulnerabilities

1. Register_Globals

2. Error Reporting

3. Cross-Site Scripting (XSS)

4. Remote File Inclusion (RFI)

Other PHP Security Tools

- PhpSecInfo

- PHP Security Scanner

- Spike PHP Security Audit Tool

Author: Joel Reyes

Premium WordPress Themes Giveaway: Winners Announced

And the winners are…

50 Free High-Quality and “New” (X)HTML/CSS Templates

Shape

2 Breed

Environment Brand Design

DelliStore

Organic Template Design

The Old Forest

Motion

Package

101 design blog

ec mania

Fashion Club

Charcoal

WaterColored Portfolio Coded

Clean Web 2.0 Layout

Dark and sleek web layout

SindromK

Business Company

Fluid 960 Grid System Templates

Symisun

JET 30

FreshPick 1.0

Creative Media

HTML Resume

Featuring

Green Solutions

Facing

TreeHouse

RamblingSoul

Treasure hunters

Free Admin Template For Web Applications

Urban Artist

Catalogio-01

Futuremag-aio

Design Newsletter Templates

Business

DragonFly

Black Eyed Susan

Black berry

Solitude

Redish

Individual

Trial Impact

Blog Division

Free Software

The Sky Was Blue

The Ultimate Joomla Toolbox: Themes, Extensions and Resources

Beautiful Free Joomla Themes

Must Have Joomla Extensions