Structured process you must know to develop a web applicationhttp://woork.blogspot.com/2009/01/structured-process-you-must-know-to.html

Developing a web application is a hard work which requires much time you have to spend doing

a myriad of things. If you don't use a methodic approach, especially in case of a complex

project, you run the risk of losing sight of the project, not respecting times of delivery and wast

your time for nothing.

This post illustrates a structured process which helps you to simplify the approach to develop

your web applications saving time and more efficiently.

Download The Woork Papers N1 | Structured process you must know to develop a web

application

Process main phases

In a generic web application developing process you can

identify five main phases:

1. Requirements definition

2. Design

3. Implementation

4. Test

5. Release

Planning and Monitoring is a "cross phase" which follows developing process defining

a project plancomposed from a list of activities which you have to monitor during project

execution. For each activity you have to define a set of information useful for its monitoring, for

example:

- owner

- duration

- costs

- ...

Take a look at these posts I wrote some time ago about how to implement a project plan with a

Gantt chart using Excel or Google Spreadsheets:

How to organize a project plan

Excel Gantt chart template

Implement a project plan and manage activities with Google Spreadsheets

1. Requirements Definition

In this first phase you have to define the scope and needs of your web application in terms of

what your application must do, main features and technical requirements:

Scope

In order to define the scope of your web application is sufficient to compile a detailed list with a

clear description of application features. At the moment is not important "how" you'll realize

them but "what" you have to realize!

Needs

Needs analysis is a crucial part of developing process. In this step you have to estimate your

potential traffic, choose a server-side language (PHP, ASP, Coldfusion...), database, choose an

hosting service... Place a big attention on not to overrate/underrate your estimates! Evaluate

every thing with a right balance between times, costs and objectives!

2. Design

After requirements definition phase, you have to "design" your application with a clear project. In

this phase you can identify the following steps:

Design: Application Map

An application map contains just meaningful and essential information about the structure of

your application: pages (represented with some blocks) and main relationships between them.

Your application map could be something like this:

In this way you have a map with some "locations" (pages) and a "path" (relationships between

pages) which you simply have to follow in order to proceed, page-by-page, to implement your

application in the next phase. In this way you'll save a lot of time, having clear in mind what you

have to implement.

Design: Database

Ok, now it's time to design application database. A simple way to do that it's using a entities-

relationships (ER) model. In general you can follow this order: define first tables, than attributes

and relationships between tables. Your ER model will be like this:

1:1 expresses the cardinality of a relationship (in this case for example 1 user is assigned only

to 1 task, 1 user live only in a city). For more information about this topic take a look at my old

posts:

Define the entities-relationships model

A correct approach to define relationships between database tables

10 Useful articles about Database design

Design: Page Structure

Next step is to design an approximate structure of the

page, identifying all main sections using a name (for

example #header, #navbar,#mainContent, #sidebar).

Design: Server-side Language

Taking a mind an object-oriented approach for developing your application, you can defining

classes, functions and all server-side features you need. Remember... that's not the

"implementation" but a way to have a "guide" for that you'll implement in the next phase.

Design: JS Framework

In this step choose a JavaScript Framework (jQuery, Scriptaculous, MooTools...), than pass to

identify the main features you want to implement (drag and drop, animation effects...) compiling

a simple list which associates each specific feature to one or more pages identified in you

application map.

A this point design phase is completed. Let's start with implementation!

3. Implementation

Ok.. now starts the real challenge because "implementation" is the realization of your

application. You can divide this phase in the following steps:

Implementation: Database

Create a new database and write SQL code defining tables, attributes and relationships. In the

past I dedicated some posts about this topic. Take a look at the following links for more

information:

How to use PHP and SQL to create DB tables and relationships

Create tables and relationships with SQL

Implementation: HTML

Use the page structure you defined in Design phase to implement HTML code:

<div id="header"> </div><div id="navbar"> </div><div id="mainContent"> </div><div id="sidebar"> </div><div id="footer"> </div>

This is the moment to add all HTML elements you need in sections identified during Design

phase. For example if the sections mainContent contains a post with a title, a text body and

post tags, add these elements:

<div id="header"> </div><div id="navbar"> </div>

<div id="mainContent"><h1><!-- Post title --></h1><p><!-- Text body --></p><small><!-- Post tags --></small>

</div>

<div id="sidebar"> </div><div id="footer"> </div>

Implementation: CSS

When the main structure is ready, start to write CSS code to add styles to your application. If

you need some suggestions about how to write a better CSS code take a look at these posts:

CSS coding: semantic approach in naming convention

Useful guidelines to improve CSS coding and maintainability

Implementation: Server-side language

Implement application class, application functions, DB interactions, queries, and every thing

requires a server-side interaction.

Implementation: JavaScript

Implement Ajax features (drag and drop, animation effects...) using the framework you chose in

Design phase (jQuery, Scriptaculous, MooTools...).

4. Test

During this phase you have to "stress" your application executing your code in various

conditions (for example using different browser). Your objective is to detect all application bugs

and fix them before the final release.

Remember, this process must be methodic and require a lot of patience! Test each page and

each features (also in this case can help you application map to proceed in a certain order). If

you find a bug during test esecution, fix it modifying the code and than proceed with the final

validation (an ulterior test) of the code.

5. Release

Finally you are ready to release your application! Publish it in a test folder and make a final test.

If it's all ok proceed to the final release.

Read and download this post on Scribd

Download The Woork Papers N1 | Structured process you must know to develop a web application

That's all. I hope this post can halp all of you which asked to me to add a post about this topic.

If you have suggestions to improve this process add a comment! Thanks :)

Related posts- Structured process you must know to develop a web application- Simple process to estimate times and costs in a web project- How to manage a small web project: a simple approach- Simple process to estimate times and costs in a web project- The Deming Cycle: an application to web design

Saturday, October 13, 2007

Project a database: define relationships-entities model (tables, attributes, and relationships)http://woork.blogspot.com/2007/10/project-database-define-relationships.html

This lesson explains how to project a typical relationships-entities model for a database to be

used in our web projects. My approach is:

1. 1. Define database entities (tables)

2. 2. Identify attributes for tables

3. 3. Define relationships and cardinality between the istances (records) of tables

Step 1: define database entities

The first step when you project a database is to identify all entities (tables). For example if we

want to project a simplified del.icio.us-like web site, our database will have these entities:

1. - USER (to store data about users, email, password, nickname,...)

2. - SITE (to store data about the sites added by the users)

These are only the main entities required from our project but, take a mind, that we will add

other tables to store data about relationships between istances (records) of these tables in case

of cardinality (M:M), many to many (see Step 3).

Step 2: define attributes

The next step is to define attributes for the tables USER and SITE. In this semplified example

we will have something like this:

USER-----------id_user_pk (Primary Key)nickemailpassworduser_data_reg (user signup date)

SITE-----------id_site_pk (Primary Key)site_urlsite_descriptionsite_data_reg (when a site is added)totale_share_user (total number of users that share a site)

Step 3: define database relationships

Our simple application del.icio.us-like works in this way: an user add a site that can be shared

by other users. The relationship's cardinality beetwen USER table and SITE table is:

USER > SITE (M:M) - Many to Many (an user can add many sites).SITE > USER (M:M) - Many to Many (a site can be shared by many users).

In this case ( cardinality M:M) we have to add a new table (SHARE) that contains all possible

combinations between all instances of USER table and SITE table . In this new table, SHARE,

to identify an user that share a site added by another user or by itself, we will add two Foreign

Key:

SHARE-----------id_share_pk (Primary Key)id_user (Foreign Key > USER)id_site (Foreign Key >SITE)submitted_by (boolean: flag only if the current user has submitted the site)

Implement your database using SQL

Now, our database is ready to be implement with a DBMS (for example using MySQL). The next

lesson will explains how to implement this database using SQL language andphpMyAdmin.

Simple process to estimate times and costs in a web projecthttp://woork.blogspot.com/2009/02/simple-process-to-estimate-time-and.html

After my previous article about a structured process to develop a web application I

received some requests from my readers which asked to me to dedicate a post about

how to estimate times and costs of a web project.

In this articles I want to illustrate a simplified top-down process to estimate times and

costs of a web process using a simple spreadsheet (in this example I used Google

Spreadsheets but if you prefer you can use Microsoft Excel, OpenOffice Spreadsheet

or a free online service such as Zoho or EditGrid).

Process main phases

In this simple top-down estimate process you can

identify five main phases:

1. Define Activities

2. Define Task

3. Define Human Resources

4. Assign Human Resources to Tasks

5. Estimate times and costs

The process start with a general definition of macro-activities and with a detailed

definition of tasks, human resources used, times and costs related to each task.

1. Define Activities

In this first phase you have to define the main activities which compose your project:

For example, in a generic web project you can identify the following main activities:

1. Requirements definition

2. Design

3. Implementation

4. Test

5. Release

In my spreadsheet I created a new sheet calledActivityes and I added the following two

columns:

A: WBS (work breakdown structure), the ID of each activity/task;

B: Activity name.

Next step is to detail each activity with a certain number of specific tasks.

2. Define Tasks

Each activity is composed from some tasks. Each task is a smaller piece of work which

composes a main activity:

In the spreadsheet you can add new tasks adding new rows below related main

activity. I suggest you to use a different format to highlight tasks from activities how I

used in the following example:

1. Requirements definition

1.1 Define application scope

1.2 Define technical requirements

2. Design

2.1 Application Map

2.2 Database Entity relationship model

...

3. Implementation

3.1 SQL code

3.2 HTML code

3.3 CSS code

...

3. Define Human Resources

Next step is defining human resources in terms of category, seniority and hourly cost:

Each category has a specific hourly cost related to specific seniority. You can organize

these information using a simple category/seniority matrix. For example if you have to

estimate a big/medium size project you can identify the following categories:

- Analyst

- Programmer

- Project manager

- ...

and the following seniorities:

- Junior

- Senior

- ...

Now, define hourly cost for each category/seniority combination (in a more complex

project you can also define a standard rate and an overtime rate for each combination).

In the spreadsheet you can create the table above in a new sheet called Resources in

the same spreadsheet. At this point you have two sheets:

A first sheet with activities and a second sheet with resources. In this way when you

assign resources to tasks you can link the cost of a specific resource with a reference

formula (=). This is a good practice because if you have to change the cost related to a

specific combination category/seniority, you can do it only once in the

sheet "Resources"and automatically all changes will be reported in all instances (task)

which use that combination in the sheet "Activities"

4. Assign Human Resources to Tasks

Next step: assigning one or

more resources to each task estimating the effort which a task requires. This is a very

delicate activity because you have to calibrate the right combination between category

and seniority of resources you want to use in your project in order to estimate correctly

project times and costs.

In the spreadsheet, in the sheet "Activities" create the following three columns:

1. Num (number of resources assigned to a task)

2. Category

3. Seniority

This is the result:

You can add different resources to each task (different category or different seniority)

simply adding a row below the task name (for example take a look at "Define

application scope" where I added 1 analyst junior in the first row and 1 analyst senior in

a new row below the task name).

5. Estimate Times and Costs

Now, for each resource, estimate the daily effort (Hours/day column), number of days

(Days colum), get cost related to category/seniority combination from the

sheet"Resources" using a reference formula (Hourly Cost column), and calculate Total

costs:

For each task (row) Total Cost is equal to:

Total Cost = Hours/day * Hourly Cost * Days

Take a mind some task could have specific costs which are indipendent from the

number of resources you assign to that task. You can add this costs adding a new

column to the left of the column Total Cost called "Additional Costs".

In this case Total Cost will be equal to:

Total Cost = (Hours/day * Hourly Cost * Days) + Additional Cost

That's all. Take a look at the spreadsheet or copy it in your Google Documents account to reuse it.

Take also a look at these posts:

- Structured process to develop a web application- Google Spreadsheets Gantt Chart (Microsoft Project-like)- Google Spreadsheets: formulas tutorial- Google Spreadsheets Tips: Add custom charts- Project Management: Excel Gantt Chart Template

I hope you'll find this post useful. If you have some suggestions about this process or if you want to suggest some interesting link related to this topic please add a comment, thanks!

How to manage a small web project: a simple approach

http://woork.blogspot.com/2009/05/how-to-manage-small-web-project-simple.html

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!

External links

Take also a look at these links:

- Software development methodology

- Agile software development - Wikipedia, the free encyclopedia

- Manifesto for Agile Software Development

Related posts- Structured process you must know to develop a web application- Simple process to estimate times and costs in a web project- How to manage a small web project: a simple approach- Simple process to estimate times and costs in a web project- The Deming Cycle: an application to web design

Project Management: a project plan with Excel (template)

http://woork.blogspot.com/2007/11/project-management-project-plan-with.html

In the previous lesson I explained some general rules about how to organize a project plan

structure and implement it with an excel worksheet to manage your projects. I implemented the

Excel worksheet that contains two sheets: WBS and HR. WBS is thework breakdown

structure of our project and HR contains data about the resources assigned to each task.

 Download Project Plan Template (excel)

WBS Sheet: Activity-Task status

Columns A:F contains general information about Activities and Tasks:

Before assigning a resource to a task,

you have to add all information about the task's owner into the sheet HR.

HR: Define Project Resources

In this sheet you can add resources and assign them to your project's tasks:

Task Assigned counts the number of task assigned to each resources. It is calculated

using COUNTIF() Excel function. This is an example of use of this function:

=COUNTIF(WBS.D:D;B5)

... in other words: "update the counter only if, in the interval of reference, WBS.D:D(column D of the WBS worksheet), find a value qual to the cell's value B5 in the sheet HR".

WBS Sheet: Project DatesColumns G:I contain informations about activity start-date/finish-date/total days. For each task, you have only add a value for Start Date and Finish Date. Days will be calculated automatically such as difference between columns H - columns G.

WBS Sheet: Re-planned Date

Columns K:Q, contains info about re-planned dates and the project delay.If you want to re-plan start-date or finish-date of an activity, you have check the column K with an "X" into the cell relative to the task you want to re-plan.

So, you set SD Delay (start day delay - in terms of days) and/or FD Delay (finish day delay - in terms of days) - Column L:M. Re-Start Date, Re Finish Date, Re-Days(replanned days) and Project Delay will be calculated from the sheet.

WBS Sheet: Costs ControlColumns S:X contains informations about cost management. You can specify hours andhour cost for each resource assiged to a task.

You can also add Fixed Cost and an Adjust (flat) to simulate cost's trend.

 Download Project Plan Template (excel)

More updates about this topic coming soon :)

Starting a freelance career: revenues estimating and time management

Starting a freelance web designer/developer career is an exciting challenge to attempt.

In this post I want to reply to several requests I received in the past about this topic, in

particular how to estimate potential revenues and manage time during the start-up

phase of your freelance activity.

Revenue estimating

A frequently asked question is: how much can I earn in one year with my freelance

activity? Find an answer to this question is not simple because there are a lot of factors

that affect your potential revenues, for example: market conditions, your commitment,

your appeal to attract customers, competitors, ...

Some of these factors can't be directly controlled by you (for example market

conditions and competitors) and require a complex analysis that, in this post, is not in

scope. Anyway, elaborate a realistic estimate of your potential revenues could be not

so simple... but you can quickly find an answer in two simple steps.

Step 1. Try to think in this way, asking you: "What could be my monthly target in terms

of revenues?". This value is simple to determinate analyzing your needs and defining a

realistic value, for example $ 1,800/month.

Step 2. Then: What's the effort I have to spend to reach that value?

The leverages you can use to reach your monthly target value are fundamentally two:

thequantity of projects on which you can work on during a month and the

fixed price for each project. For example, if you want to reach a monthly value equal to

$ 1000 consider the following two scenarios:

In the first scenario (high quantity - low price), you decide to fix a low price ($ 100) for

your services but consequently you have to work on a lot of projects during a month

(10) to reach the expected value in terms of revenues ($ 1000).

In this case, other things being equal, you have a big advantage respect to your

competitors: you offer the same their services (with the same quality, this is absolutely

important) at a lower price. This is a recommended strategy during the start-up phase

in order to attract new customers, offering them a more attractive price respect to your

competitors. But, how much lover should be the price of your services respect to other

competitors? Lower, but not too lower. Why?

First is a question of credibility. In some situations a price too low is perceived as lack

of quality of a product or service. Second, if you set a price too low, the only way to

reach your monthly target revenue is to work on a too large number of projects. The

problem is if you are able to work simultaneously on a lot of projects! The risk is not be

able to respect milestones and contribute consequently to create a bad reputation of

yourself. Neither you can think to work seven days a week for twenty-four hours a day!

In the second scenario (low quantity - high price), you decide to fix a high price ($

500) for your services and consequently you can work on not many projects during a

month (2) to reach the expected value in terms of revenues ($ 1000).

The problem is that a "high price" could mean a higher price respect your competitors.

In this case, you have to be able to offer to your customers a sensible value added in

your services respect to market standard. But have you the necessary credibility and

reputation to do it during the start-up phase? Probably you have not!

All things considered, a good balance between all these aspects is necessary for a

realistic estimate of your potential revenues. I suggest you to use this very simple

approach: define the average number of projects on which you can work on during a

month, for example two projects/month; then define the average price for each website,

for example $ 900US/website. Each month you average revenue will be 2 x $ 900 =

$ 1,800. Your average annual revenue will be $ 1,800 x 12 = $ 21,600.

What could be the problem whit this estimate at first sight? Probably this linear and

constant trend will be difficult to reproduce in the real life and find two new projects

every month (twenty-four projects/year) could be a hard challenge, if not almost

impossible. But not let discourage you and try to adjust your first estimate.

Time management during the start-up phase

Another important aspect to consider, if you decide to star a freelance career, is you

can't think to dedicate 100% of your working time only implementing code. Especially in

the first months, during the start up of your activity, you have to dedicate a large part of

your time searching new customers and managing relationships whit them. This time-

consuming activity is very important for two aspects: first, no clients, no job; second,

maintain good relationships with your clients is a crucial point to establish long-term

relationships and take further opportunities whit them.

If you are freelance looking for take a look at these useful online resources where you

can find interesting job proposals:

- oDesk

- GetAFreelancer

- Guru

- Elance

Good luck!

Related Posts- Structured process you have to know to develop a web application- How to manage a small web project: a simple approach

- Simple process to estimate times and costs in a web project- The Deming Cycle: an application to web design

The Deming Cycle: an application to web design

http://woork.blogspot.com/2009/08/deming-cycle-application-to-web-design.html

In this post I want to illustrate an application of the Deming Cycle - also know as

thePDCA Cycle (Plan, Do, Check, Act) - to web design. If you never heard of Deming

Cycle, this model (made popular by Edwards Deming) describes an iterative process

designed to drive continuous improvement typically used in business process

reengineering and in quality management.

This process has four main steps:

- Plan: establish objectives and define methods to reach them;

- Do: implement what you planned;

- Check: measure and compare obtained results against expected result;

- Act: take action to improve what you implement.

In general, a popular way to represent the Deming Cycle is the following:

This circular approach can be very useful if applyed to web development expecially in

order to:

- improve the quality of your work;

- organize your code in code snippets (or classes) to reuse in your projects in order to

work faster and more efficiently;

- simplify and rationalize the workflow of activities during development process;

Plan: in this phase you have to establish what are your objectives and the expected

output of development process. It's very important to have a clear idea about what you

have to do to reach the final result. A plan of main activities can help you manage times

during the implementation phase and have a to-do list to follow in order to monitor

everyday your progress.

Do: in this phase you have to implement what you planned in the previous step

executing the plan of activities identify in the first phase.

Check: in this phase you have to assess the output of development process against

expected result in terms of general quality of the final product. You can image

the qualityas results/total effort. High effort and low results is index of low quality of

your work (you spent a lot of energies to reach a bad final product). In general, what

you have to do is to find a right compromise between results and effort.

A way to assess your results it is to define "indicators" that measure the differences

between what you planned against what you implemented. A simple and very intuitive

example of these indicators is the delay between a milestone and the effective date of

completion of activities. For each delay, in this phase, you have to study why you fail to

respect the plan defined in the first phase of the Deming Cycle. Too ambitious

objectives? Bad planning? The study activity is very useful to find answers and avoid

the same errors the next time you execute the same process, for example working to a

new web project.

Act: in this phase you have to take action in order to improve what you implemented

and, more in general, the entire process you followed to develop your output. For

example you can organize some parts of code you often use in your web projects in

classes or in ready to use code snippets , in order to save a lot of time when you

implement them in a new web project.

For a deepening about the Deming Cycle take a look at the following links:

- PDCA Cycle

- Deming Cycle (PDSA)

- W. Edwards Deming

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

Related Posts- Structured process you must know to develop a web application- How to manage a small web project: a simple approach- Simple process to estimate times and costs in a web project

Project Management: organize a project planhttp://woork.blogspot.com/2007/11/project-management-organize-project.html

This is a first lesson about how to organize a project plan structure to manage a project

using Microsoft Excel.

Define the Work Breakdown Structure

What is it a Work Breakdown Structure? We can say it is a hierarchical tree structure

useful to organize all necessary task to complete a project. In this example I chose a

simplified structure wih only two level (Activity - Task):

An activity is composed from many tasks and every task has some informations about

its status, for example: percentage of completion, owner, start date, finish date...

I suggest you not to exaggerate with the levels' structure. A three level plan such as the

following is the in many situations:

Level 1. Macro Activity

Level 2. Activity

Level 3. Task

Calculate Start Date, Finish Date and POC of an activity 

Let's look an activiy is an group of tasks therefore, all informations about its status

depend from the single tasks that compose it.

Start Date of an activity is calculated such as the minimum value of all start date of

tasks that compose it.

Start Date Activity = SDAi = min(SDTi)

...where SDTi are the start date of tasks that compose the activity i.

In the same way, Finish Date of an activity is calculated such as the maximum value of

allstart date of tasks that compose it.

Finish Date Activity = FDAi = max(FDTi)

...where SDTi are the finish date of tasks that compose the activity i.

POC, percentage of completion (%), is calculated such as the average value of all

percentage:

POC = POCAi = AVERAGE(POCTi)

...where POCTi are the percentages of completion of tasks that compose the activity i.

Adding a control for replanned task

It can be useful to mantain a trace of original dates, in case you want to re-plan start

dateor finish date for one or more tasks . In this case, you can add the following

columns on your file: Replanned Start Date, Replanned Finish date, Replanned Days

(total), Delay (days):

Delay is calculated like the difference of:

Delay = (Replanned Start Date - Start Date) + (Replanned Finish Date - Finish Date)

In the next lesson I will explain how to add a cost control on this plan and how to implement it with Excel.

Optimize your CSS files to improve code readabilityhttp://woork.blogspot.com/2008/01/optimize-your-css-files-to-improve-code.html

Some readers have asked to me what is the better way to organize a CSS file to

optimize code readability and simplify code management.

Generally, I adopt just some simple rules and, it's my opinion, they are useful in order

not to become crazy if you have to manage a CSS file for a page/site with a complex

design. In this post, I discuss for simplicity a typical two columns fixed layout like this:

Step 1: redefine HTML elements

I think it's a good rule to redefine HTML elements (body, a, form, input...) in the first

rows of your CSS files.

/* ------------------------------- *//* HTML Elements/* ------------------------------- */html {font-family:arial, verdana, sans serif; font-size:13px;}a:link, a:visited{color:#0033CC;}a:hover{color:#003366;}h1, h2, h3, h4, h5, h6,form, input, text-area{border:0; padding:0; margin:0;font-family:arial, verdana, sans serif;}h1{font-size:24px; color:#000000;}h2{font-size:18px; color:#666666;}...

Step 2: define page elements

In order to improve code readability, I suggest to indent all elements but with some

sagacities: if an element have just two-three attributes (for example #navbar), you can

use a single line to declare all properties, otherwise it's better to declare every single

property in a new line (for example see #navbar li a:link, #navbar li a:visited):

/* ------------------------------- *//* PAGE Elements/* ------------------------------- */#container{width:780px; margin:0 auto;}

#topbar{width:auto; display:block; height:80px;}#navbar{width:auto; display:block; height:24px;}#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none;float:left;}#navbar a{color:#FFFFFF; font-weight:bold;}#navbar a:hover{background:#777777;}#navbar li a:link,#navbar li a:visited {background:#444444;text-decoration:none;height:24px;line-height:24px;display:inline;float:left;width:auto;padding:0px 10px;}

#main{width:auto; display:block;}#column_left{width:560px; margin-right:20px; float:left;}#column_right{width:200px; float:left;}

div.spacer{clear:both; height:10px; display:block;}#footer{width:auto; display:block; height:24px;}#footer a{color:#666666; text-decoration:underline;}

Step 3: define custom class

In the final section of your CSS files, you can define all other custom classes with the

same rules I specified above:

/* ------------------------------- *//* OTHER Class/* ------------------------------- */.small{font-size:11px;}.underline{text-decoration:underline;}div.small-section{background:#CCCCCC;}div.small-section a{color:#333333; font-weight:bold;}...

How I said, these are only my personal suggestions and not true rules, but I think you can find them useful in order to deploy a more readable CSS file.

Useful guidelines to improve CSS coding and maintainability

http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html

Developing CSS code for websites with a complex layout structure can be an hard

work for a web designer. But in this situation, an harder work is writing code in order to

simplify the continuous maintainability process.

In this post I want to reply to all readers of this blog which in the past asked me some

FAQ about this topic and illustrate some simple guidelines and tips which can help you

to improve CSS coding and maintainability process following this simple rules: reduce

code complexity and optimize your CSS structure.

Single or multiple CSS files?

Some developers use to separate CSS code in multiple files and import them into an

external CSS file in this way:

@import "reset.css";@import "layout.css"; @import "typography.css";...

What is the better practice? Separate CSS code using multiple files or writing CSS

code in a single file?

There is not a specific rule, but you have to do this choice each time, after an objective

valuation about the real complexity of the layout structure. If layout is not so complex in

order to justify multiple files, I suggest you to write all code in a single file. In fact, in this

case, managing a single file is better than managing too many.

CSS table of content: it's really useful?

I often read some articles which suggest to add a table of content of the elements

contained into the CSS file in order to keep an overview of the structure of your code

useful to simplify the maintainability process. A CSS table of content is something like

this:

I tried to add a table of content into a CSS file in different situation, sincerly with some

doubt about its real utility for these two simple reasons:

1. If you have a simple CSS file you don't need to add a table of content to manage it.

You can manage it without difficulties, without a table of content.

2. If you have a complex CSS file you could need one... but in this case the problem is

you have to modify your table of content each time you make a change of the CSS

structure. So, if your CSS structure change dramatically, you have to spend a lot of

time for developing the new CSS code and updating the table of content. You work

twice... Is an overview of the structure of your code really necessary ?

I think not. In general, a good approach to write CSS code is following the gerarchical

order of the page's elements

(#wrapper, #navigation, #maincontent, #sidebar, #footer...), so you know

"approximately" the point where this element is placed on your file.

In any case, if you prefer to add a table of content, I suggest you don't enumerate CSS

elements how I did in this example:

If you change the order of one or more element you have to change every time the

numbering of the other elements!

Use "sections" for organizing logically similar attributes

This is a simple tip I find very useful: create “sections” in order to separate logically

similar CSS attributes and use alphabetical order for listing attributes into these

section:

In this way will be simpler to manage each single section with the related attributes.

Separate CSS attribute name from attribute values using tab space

Another tip to improve the readability of your CSS code is: use a tab space in order to

divide the attribute name from its value:

In this way your code looks like a tabular data sheet and will be simpler to read and

manage it.

If you have other useful suggests add a comment!

Related content

Optimize your CSS files to improve code readability

Write a well structured CSS file without becoming crazy

Write a well structured CSS file without becoming crazy

http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html

Big CSS files can be complex to manage but a good structured code can help you to

make your life simpler.

This is a descriptive post about how to write a well structured CSS file. I already

spoken about code readability in CSS files, but after several most specific requests

about this argument (mainly about the difficult of some readers to manage CSS file with

a big quantity of layout elements), I decided to illustrate the process I use in these

cases.

I experienced, proceeding without "order" or a clear vision about what you want to

realize can be harmful and you risk to add, change, remove classes and properties,

with the only result to have untidy code with a lot of unused elements on your final

product.

Before you start writing directly CSS code, I suggest you to prepare a "draft" with all

sections your site will have. Then follow these simple "rules" to optimize your work:

1. Be simple

2. Be "elegant-code" oriented

3. Be methodic

Be simple

Avoid everyting is not strictly necessary. Don't use six <div> layers if you can obtain the

same result with only two. If you think a certain design structure is too complex to be

realized with CSS probably you are mistaking something. Try to find another way to

implement it. In general, almost everything is simple. We are too complex.

Be "elegant-code" oriented

Indent your code to highlight dependencies between CSS elements, use white spaces

and comments to separate portions of code logically different. Use clear, in-line,

comments like this:

Don't write a "book" about a div ID called #column-left. If you coose the right name, it's

clear enough.

Be methodic

Use the same name to identify the same sections in all your projects

(#logo, #navbar,#left-column, #footer...). Group CSS classes for typology and add CSS

properties in alphabetical order for improve the readability. Once you find the right

method to proceed, reuse it every time you work on a new project. So, the code will be

more "familiar", more simple to manage and you'll write it more fastly.

Before start coding ask you: where do you want to go?

This is a good question you would to do before opening your preferred editing software.

The only things you need now is a pencil, an eraser and a white paper where to trace a

"draft" with all main sections of your site:

At this level, you have not to add too many details in your write-hand "draft": size

(width) of every single element (in pixel or percentage), paddings, borders and margins

are enough.

Let's go. But first reset CSS default browser styles

This practice reset the default browser style for HTML standard element (h1, p, ul, li...).

Recently I read a lot of interesting post about this topic. I don't know you... but the only

"common" tags I use in my project which required a "reset" are:

body, h1, h2, h3, p, ul, li, form

Nothing else. Very rarely table elements (<table>, <tr> and <td>). In any case, for a

complete overview about CSS reset technique take a look at these links:

- Yahoo! UI Library: Reset CSS

- Eric's Archived Thoughts: Reset Reloaded

Start writing CSS code

Now, you are ready to proceed. My typical CSS code looks like this:

Nice, elegant and clear :) Because the code also has a certain charm!

Page structure

Ok, now you can start to design the site structure adding the main sections. If you

prepared a "draft" with the site layout it's very fast. Whichever choice you do in terms of

layout (liquid or fixed), I suggest you to define a class .container which set one time

only, the width of all element which it contains. In this way, if you want to change the

width of the page, you'll do it for a single CSS element (.container) instead of all

elements which it contains (these elements will fit automatically with the new size).

This is for example my welcome section (in green below the navbar):

...and tese are my column-left (with post body) and my sidebar):

HTML Code

When a CSS definition of main site sections is ready, you can start writing HTML code.

There is nothing simpler, just adding DIV layers with the right ID in the right order:

<div class="container"><!-- Header --><div id="logo"></div><div id="navbar"></div><div id="welcome-section"></div>

<!-- Main Content --><div id="column_left"></div&gt;<div id="sidebar"></div>

<!-- Footer --><div id="footer"></div>

</div<

Test it on your browser and if it's ok, you can start to add new details to the CSS code

and proceed step-by step, section after section (navigation, sidebar, footer...), to

complete your CSS in a well structured way and integrate id with HTML

code. Indent code you write to higlight dependencies between all elements of the same

class:

This little sagacity increase dramatically the code readability when you have to find a

specific element in your CSS code.

Custom Class to the end

In general, if I have some classes which can be applied to more than a section, I add

them to the end of the CSS file in this way:

I use a descriptive name for each class which identify immediatly the main properties.

I hope this tips can help you to simplify the way you use to write and manage CSS files.

Related contentOptimize your CSS files to improve code readability

10 Useful articles about Database design

http://woork.blogspot.com/2008/09/10-useful-articles-about-database.html

This is a list of ten useful articles about database design which includes some tips and

practical suggests to help you to design quickly databases for your web projects.

The list includes some tips to define relationships-entities model, common database

design mistakes, database normalization, how to use PHP and SQL to create tables

and relationships and a correct approach to define relationships between tables.

1. Ten Common Database Design Mistakes

By Louis Davidson - No list of mistakes is ever going to be exhaustive. People (myself

included) do a lot of really stupid things, at times, in the name of "getting it done." This

list simply reflects the database design mistakes that are currently on my mind, or in

some cases, constantly on my mind.

Read More...

2. Define relationships-entities model (tables, attributes, and relationships)

This post explains step-by-step how to design a typical database relationships-entities

model.

Read More...

3. Database Design and Modeling Fundamentals

This article covers the basics of database design including normalization, relationships

and cardinality. A great tutorial on database design.

Read More...

4. Create tables and relationships with SQL

A simple tutorial which illustrates how to implement a database using SQL and

phpMyAdmin.

Read More...

5. Database Normalization and Table structures

Normalisation is the term used to describe how you break a file down into tables to

create a database. There are 3 or 4 major steps involved known as 1NF (First Normal

Form), 2NF (Second Normal Form), 3NF (Third Normal Form) and BCNF (Boyce-Codd

Normal Form). There are others but they are rarely if ever used. A database is said to

be Normalised if it is in 3NF (or ideally in BCNF).

Read More...

6. How to use PHP and SQL to create tables and relationships

A simple tutorial which explains how to use PHP and SQL to create quickly tables and

relatioships.

Read More...

7. Table and Database Operations in PHP

In this article by Marc Delisle, we will learn how to perform some operations that

influence tables or databases as a whole. We will cover table attributes and how to

modify them, and also discuss multi-table operations.

Read More...

8. Practical database design, normalization, history, and event loggingWhat are the best choices when designing the schema for a relational database? What is the rationale in deciding in favor of one and against some other alternative? Given the amount of vendor-specific recommendations, it is all too easy to overlook basic relational database fundamentals. In this second of two parts, author Philipp K. Janert presents an introduction to database normalization and to the five Normal Forms. He also discusses other possible uses for a database in a project, for example as a repository for configurational or logging data.Read More...

9. Relational Database DesignMany web designers understand what a database is. Some have even written queries to access a database or even designed their own database. Unfortunately, many web designers suffer from unnecessary problems and setbacks because they do not understand the basics of relational database design. This tutorial teaches the basics of relational database design.Read More...

10. A correct approach to define relationships between tablesThis post explains how to adopt a correct approach to define database relationships.Read More...

If you want to suggest other interesting links add a comment! Thanks!

PHP components: login systemhttp://woork.blogspot.com/2008/03/php-components-login.html

A PHP component ready to use to implement basic login features.

This is another PHP component ready to use and reuse in your project which

implements a "ready to use" login system with PHP. In the past week I received several

emails about the difficult (from some PHP beginners) to implement this functionality in

their projects, in particular for these two common issues:

- cannot maintain session value after log-in if you visit a new page

- cannot redirect an user in a specific page after the login

So I prepared this component to help everyone which have the same problems. This

post is not so short... but don't worry... It's just because I want to exagerate with the

words to be clear :)

 Download this PHP component

Before to start

Take a quick look at the package content:

In detail:

- login-form.php contains a standard form with two fields, email and password.

- common-functions.php contains two functions: redirect and remove HTML tag from

the input field

- config.php includes DB connection parameters

- login.php contains a basic query to verify if an user exists and in this case it creates a

PHP session.

- logout.php contains delete session code (if you are logged-in)

I supposed your login form has these fields: email and password. If login fails an error

message will be displayed:

...otherwise if login is ok will be displayed a simple logout link:

You can modify everything how you prefer customizing the code. How? Read the

following paragraphs...

Step 1: include login-form.php

Create a new PHP page (for example index.php) in the same folder where is login-

form.php(don't change it, ok?) :

Open index.php and include login-form.php where you want into the <body>tag using:

<?php include('login-form.php')?>

...in this way you are including the login form into your page. Now, add this line of

code on top of index.php before any kind of code in your page (it's important in order

to mantain session created after the user login... you can't forgot it ok? Otherwise it

doesn't work!):

<?php session_start(); ?>

Step 2: modify config.php

Change MySQL connection parameters in config.php:

Step 3: modify login.php

You have to modify some parameters in login.php so that this component works well. In

this example I used a table "USER" to store the user data (email, password, name...)

so, in the line 13 in my FROM clausule there is "USER". Change it with the name of the

table you have in your database which store the user data:

It's a good practice using the primary key value to store a session ID. At line 19 change

ID_USER_PK with the name of the primary kay you have in the user data table.

Change line 25 and line 31 to customizing a redirect page when an user submit the

login form.

Step 4: change redirect in logout.php

Last step, modify the URL to redirect an user in a certain page after logout:

It's all! Tell me more infos if you have some problems with this component.

 Download this PHP component

Related contentPHP components: Autosuggest