woork.blogspot
TRANSCRIPT
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><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