Tuesday, September 30, 2008

10 Useful articles about Database design

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 logging
What 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 Design
Many 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 tables
This 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!

Sunday, September 28, 2008

Google Spreadsheets Tips: Add custom charts

In the past months I dedicated several post about Google Spreadsheets about how to use basic formulas, how to design a project plan structure and how to implement a gantt charts using Widgets. Yesterday my friend Ivan ask to me to dedicate a post about how to add custom charts and, in particular, dynamic charts which update themselves when an user update a table with input data.

This tutorial explains how to add custom charts on Google Spreadsheets using Widgets. If you are an Excel user you'll find this very simple!

Take a look at this spreadsheet or copy this spreadsheet in your Google Apps Account.


1. From table to chart
Image to have this table with the following data about a list of products:



For each product I want to display, in the same chart, price, cost and the difference between price and cost. Ho can I do? A good way to do it is using an Area Chart.

2. Select Chart
To add an Area Chart on Google Spreadsheets click on Insert gadget and from the Gadget window select Charts > Area Chart. The chart will be added on you active sheet. Now you have to set all required parameters (Range is necessary!):




If you take a look at the table at the step 1, cost and price values are in the column D and E, so the range is:

Sheet1!D3:E10

...where Sheet1 is the name of the sheet where is the table. Now click on Apply and Close to add your chart on the current sheet. Simple, no?


3. Dynamic Charts
Now, image to have the following table which simulate the selling trend of a set of products (products details at step 1). When an user change quantity (column K) total values in the table will be updated with the new data. Price is taken from the table at the step 1 (column E), using Vertical Lookup function (Vlookup) using the ID Product (column I) as search criteria.



Total (column J) is calculated as Quantity * Price. I want to add a chart which display how revenues are allocate (for each product) on the total revenue. You can do it easy using a Pie Chart. Click on Insert gadget link and from the Gadget window select Charts > Pie Chart. The chart will be added on you active sheet. Now you have to set all required parameters (Range is necessary!):




If you take a look at the simulation table, total values are in the column J and products names in the column I, so the range is:

Sheet1!I4:J6

...where Sheet1 is the name of the sheet where is the table. Now click on Apply and Close to add your chart on the current sheet. At this point every times you change quantity values (column K) your chart will be updated with the new data.

Take a look at this spreadsheet or copy this spreadsheet in your Google Apps Account.


Related content
Google Spreadsheets Tips: Gantt Chart (Microsoft Project-like) using Widget
Use Google Spreadsheets to get financial informations about companies
Gantt Chart using Google Spreadsheets and conditional formatting
Google Spreadsheets: formulas tutorial

Some updates about "Woork", The Daily Inspired

Hello friends! Some news from Woork (now "The Daily Inspired"). I spent the past two days to improve my blog and release this new template. I think now it's simpler to browse and more pleasant to read.

I increased font size, changed my home page and search results page. Let me know what you think about it! In the next days I'll release this template for free for all Blogger user. Stay tuned!

The new Home Page
How you can see, I added a "static" section with a little introduction about my blog and three sub sections (Blogger Template, Tutorials, Advertising).



Below there is "What's news" section with a list of my 10 latest post published on woork.




Improved search results
Now search results display only the post title, number of comments, and delicious link:




I increased to 10 the number of results displayed on the page and I removed post text.


Unlimited Bandwidth for my Box.net Account
In the past days I received a big amount of traffic on my Blog and I had some bandwidth exceeded problems with my Box.net account. Some readers noticed me which was impossible to download my tutorials. So I upgraded my Box.net account and now I have unlimited bandwidth at disposition and direct links to download all resources I upload on my account.

If you have some suggest to improve this layout add a comment. Thanks!

Thursday, September 25, 2008

MooTools Basic Tips (lesson 3): interaction with HTML Form

This post is the third lesson which I dedicate to MooTools for newbie and illustrates how to implement simple interactions with form input elements using this powerful framework and unobtrusive JavaScript code.

Some time ago I wrote this post where I explained some useful tips to enrich HTML Form using simple JavaScript functions. Some readers asked to me to illustrate similar examples using MooTools and unobtrusive JavaScript code, so in this tutorial I implemented the Twitter-like chars counter example of my previous post. This counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field:



Click on the link below to download the full code.


Download full code


1. Add MooTools framework on your page
First, you may download the latest version of MooTools and add a link to the framework within the tag <head> of the page:

<script type="text/javascript" src="mootools.svn.js"></script>


2. HTML Code
HTML code for this example is very simple:

<label for="myInput">Write something here:</label>
<input type="text" id="myInput" maxlength="20" />
<span id="counter_number" class="counter">20</span> Remaining chars

In this code I added an input text field with id="myInput" and a span element with id="counter_number" which display the remaining chars.


3. JavaScript Code
Copy and paste the following code after MooTools link (see step 1) in the tag <head>:

<script type="text/javascript">
window.addEvent('domready', function() {
$('myInput').addEvent('keyup', function() {
max_chars = 20;
/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;
});
});
</script>

If you want, with some lines of additional code, you can change the counter text color for example from gray to red when remaining chars are less then 6:



This is the code:

<script type="text/javascript">
window.addEvent('domready', function() {
$('myInput').addEvent('keyup', function() {
max_chars = 20;
/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;

/* Change color if remaining chars are LT 6*/
if(remaining_chars<=5){
$('counter_number').setStyle('color', '#990000');
} else {
$('counter_number').setStyle
('color', '#666666');
}
});
});
</script>

I added an if statement which checks the value of remaining_chars var. If this value is less then 6, this script change the counter text color to the value #99000, else to #666666.

Naturally this is only a very simple example which helps all MooTools newbie to learn the framework bases.

For questions please add a comment!

Download this tutorial


 
Useful tips to enrich your HTML FormsLesson 1 - Basic Tips for Web Designer

Monday, September 22, 2008

"Woork" in progress...

Hello guys... How you can see I'm working at a new version of this blog. Please have patience!
After a lot of request, I decided to release my new Blogger Template for free for all my readers.

Stay tuned!

Saturday, September 20, 2008

The best accelerators for p2p - Pack with 12

Tired of having slow downloads?Poor search?Bad internet connection?Well, pimp your download and say goodbye to your long days of waiting! Download Boosters is the place where you can download the best accelerators for p2p and file sharing programs! Ever faithful to a customer-oriented philosophy, Download Boosters is dedicated to bring quality software to the internet community and especially to

Thursday, September 18, 2008

10 Beautiful icons set for web developers and designers

This post contains a collection of 10 beautiful and very popular icons set useful to be used in your web applications or your websites.

1. Web development icons Download
Web development icons is a set with 60 free icons in web 2.0 style (24x24). These icons are free to use in any kind of project unlimited times.




2. Function free icon set Download
A great collection designed by Liam McKay. All icons are free for personal non-commercial use:




3. Pixelicious Download
150 beautiful pixel icons designed by PixelResort:




4. Social Web Button Download
Another great collection of social icons set provided from WebFruits:





5. Sweetie Pack Download
Sweetie Pack is a popular clean and beautiful icons set with other 100 icons. I suggest you to read this post. CSS Message Box collection with sweetie pack:




6. FeedIcons Download
This is a beautiful icon set feed




7. Mini Icons Download
Super mini icons set for web applications designed by FamFamFam:




8. Tango Icons Set Download
The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help.




9. Monofactor Download
Monofactor is a beautifu set contains 25 scalable Illustrator format icons:





10. Aquaticus Social Icons Download
Aquaticus is a beautiful social icons set designed by Jwoloh (60x60, 48x48, 24x24, 16x16):



If you have other icons set to suggest add a comment with the related link!