Some times ago I wrote a post about a structured process you must know to develop a web application and many readers asked to me to write something simpler about how to manage a small web project. I think there are not general rules for that but, without doubt, a correct approach can help you manage your projects more efficently and achieve quickly the final result.

I prepared this picture that illustrates a simple process with 3 main phases you can use as reference to manage a small web project:

1. Planning

Plan what you have to do, how you have to do it and in which time.

1.1 Define project scope

First step: Identify 4-5 high-level points which define the scope of your project. Don’t underrate the importance of this step because if you are able to describe your project in a nutshell, it means you have a clear idea about what you have to do. So it will be simpler to realize it.

1.2. Identify main features to implement

Second step: Identify main features of your web project and add, for each of them, some details such as relationships, general notes, ecc. For example image to have a simple project with only two main features: user login and profile management. You can represent them in this way:

That’s a simplified example only to give you an idea.

1.3. Define sitemap

Next step: define a sitemap of your project with files and folder. Be accurate in identifying all files to implement (HTML/PHP page, JavaScript files,…) because they are final deliverables to implement.

1.4. Plan a daily to-do list

Set daily milestones using a simple to-do list. So everyday you’ll know exactly what you have to do. In this way, you can easy monitor your progress measuring what you did a certain day and what had to do.

2. Developing and testing

In this phase: write HTML, CSS, PHP, JavaScript… code and test small portions of code during developing (preliminary test). So it wil be simpler find bugs and errors. When your web application is ready, stress it with a final test to catch errors you didn’t find during preliminary test which cause unexpected behaviors .

3. Publishing

Now you are ready to publish your project on-line. When your website or web application is on-line do a last test on what you published to assure you that it’s all ok. That’s all!

If you have some suggestion please leave a comment, thanks!

In this post I want to suggest you some interesting tools and resources for web developers. This list includes a CSS framework to design sitemaps using HTML lists, some interesting JavaScript frameworks, some interesting jQuery plug-in, a PHP face detection script, a tutorial to work with the Twitter API and a tutorial about how to retrieve your Gmail emails using PHP.

1. SlickMap CSS, A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

2. WaveMaker 5
WaveMaker gives you an easy and productive way to build Web 2.0 applications. Typical applications include a rapid prototyping and development, a form-driven database apps, a front end “face” for SOA architecture.

3. QuickFlip jQuery Plugin
QuickFlip is a jQuery plugin that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

4. Face detection in pure PHP
Maurice Svay released this interesting face detection script to detect automatically faces in photos with PHP.

5. PHP.JS
PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side. Using PHP.JS may speed up development for PHP developers who are increasingly confronted with client-side technology.

6. jQuery Blend
Blend is a jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds (just 1.4KBs).

7. Twitter API: Simple Twitter Search using PHP
This post illustrates how to implement a simple Twitter search and display search results in a web page with a custom format.

8. Flapjax
Flapjax is a new JavaScript framework designed around the demands of modern, client-based Web applications. Its principal features include: Event-driven, reactive evaluation; An event-stream abstraction for communicating with web services; Interfaces to external web services.

9 Glow
Glow is a JavaScript library which aims to make working with JavaScript and the DOM easier. It tries to do this by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets.

10. Retrieve Your Gmail Emails Using PHP and IMAP
Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Take a look at this interesting post of David Walsh.

Do you have any suggestion? Please leave a comment. Thanks!

In this post I want to suggest you ten interesting lightweight jQuery plugins for web developers. This list includes a lightbox, an HTML markup editor, some plugins to work with images, a tooltips creator and a PHP interface for jQuery.

1. ColorBox
ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3 (only 9KB). It supports photos, photo groups, slideshow, ajax, inline, and iframed content; appearance is completely controlled through CSS so users can restyle the box; behavior settings can be over-written without altering the ColorBox javascript file. ColorBox is completely unobtrusive, requires no changes to existing HTML, preloads background images to avoid flash of unstyled content on first use. It can preload upcoming images in a photo group.

2. markItUp!
markItUp! is is a JavaScript plugin built on the jQuery library (just 6.5 KB). It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

3. jFlow
jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 2KB minified.

4. JPolite
JPolite – jQuery POrtal Lite – is a lightweight front-end web portal framework based on jQuery (5 KB). The focus is easy content integration at the front-end, through an intuitive naming system and conventions plus simple and easy configuration. Developers can make use of various server side technologies and frameworks to generate content for the portal. Features: Flexible layout configurations, Module drag-drop (thanks to jQuery UI Simple UI controls (Tabs, accordion, …), Sample RSS Reader. Take a look at the demo here.

5. vTip

vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work. Using the jQuery framwork any element with a class of vtip will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

6. jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a “slide”. Options control how and when the slides are transitioned.

7. Wilq32.RotateImage
Wilq32.RotateImage is a lightweight and very simple to use plugin to rotate images.

8. jqModal
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.

9. jQPie
The idea of jQPie is to provide a lightweight PHP interface to jQuery. The lightweight interface allows multiple ways to interact. jQPie is lightweight, supports XML, HTML and JSON, handlers
API is simple, while the handlers engine is PHP based the javascript library is usable by any language and includes a powerful autocomplete plugin, plans to provide other plugins for use and as examples.

10. jContext
jContext is an ultra-lightweight right click context menu for jQuery. How lightweight is jContext? It’s approximately 0.6kB when minified.

Do you have any suggestion? Please leave a comment. Thanks!

Colors – it sets the tone (no pun intended) and message of a website. Designers often spend hours, even days, researching and coming up with a harmonious and usable color scheme.

In this collection, you’ll find 30 brilliant (alright – pun intended) web designs with vivid and colorful themes that evoke feelings of vivacity and dynamism – to inspire your color palette.
Colour Pixel

Matt Dempsey

Fall for Tennessee

FontShop

DrupalCon

Sourcebits TangledDecals

Matt Mullenweg

CakePHP

The English Riviera Comedy Film Festival

VCU Office of Undergraduate Admissions

Miki Mottes

ZenSender

Boompa

alisa.mtv.ru

Portfolio of Adit Shukla

Maria Filó

Cheesetique

DivVoted

erguvanplatin.com

Design Disease

singularityconcepts.com

Macalicious

Radu Ceucă

cocorino

AdaptD.com

Soundsplash 08 Eco Reggae Festival

Silverback

Sitesquared

Dulles Dodgeball

meril’s Holiday to Go

FREE CSS TEMPLATES:

• Free CSS Templates
  There are 105 CSS Templates in the database at the moment.
• Art for the web
  Free web templates
• TemplatesBox
  Free Website Templates, Free Photoshop Web Templates
• Template Monster
  Web Templates, Flash Templates, Website Templates Design
• TemplateNavigator
  Free Web Templates | Free Flash Templates. TemplateNavigator.com is the largest on the net catalogue of free and professional website templates and free flash templates.
• DotcomWebDesign Providing free site layouts, web page layouts, website templates & site templates for the free Content Management System, cmsimple.
• Entheos
  
  
  Free Dreamweaver Templates and Fireworks Layouts
• Dezinehub
  Free Website Templates, Free Logo Templates
• Free-Flash-Template
  Free Flash Templates
• Free Layouts
  Free Web Templates and Flash Templates
• Free Photoshop browser templates
  Free Photoshop browser templates for professional web layouts
• Free Templates Online
  Free Web Templates Resource
• Free Web Templates
  Free website templates and page layouts, flash templates, business templates and more
• FreeWebTemplates.de
  Free Design Templates




• FreeWebsiteTemplates
  Free Web Templates
• Groovy Lizard
  Free Templates – please read the Terms of Use
• Hot Free Templates
  Free Photoshop Templates, Free Flash Templates, Free Web Templates & Graphics
• Interspire
  Free web templates, Frontpage and Dreamweaver Templates
• Joyful Heart Designs
  Linkware Sets – please read the Terms of Use
• Layouts 4 Free
  Free Web Templates – html, dhtml, xhtml / css, flash.
• MasterTemplates
  Free Website Templates and PowerPoint Templates
• OpenSourceTemplates.org
  Free Website Templates and Custom Web 2.0 Designs
• Open Source Web Design
  Download and upload free web designs
• Open Web Design
  Download and upload free web designs
• Ricky’s web templates
  Ricky’s free web templates, web logos, web buttons
• Snakeye Web Templates
  Free Dreamweaver Web Site Templates & Web Page Templates
• Steve’s free website templates
  Free Website Templates




• Template Perfection
  Free Templates
• TemplateWorkz
  Free Website Templates, Free Logo Templates, Free Newsletter Templates
• ThemesBase
  FREE Templates and Themes for Mambo, Joomla, PHPNuke, vBulletin, WordPress, phpBB, e107, PHP-Fusion and XOOPS
• WebDesignHelper.co.uk
  FREE Full page templates, containing all the graphics and html code you need to create your own personal web site
• Webmaster Resources
  Free Web Templates
• Webtemplates
  Web site templates for free
• Zymic
  Free website templates