Tuesday, July 28, 2009

How to solve Internet Explorer cache issue in Ajax


This is a frequent asked question which can be solved simply with a line of code with javascript.

The problem
If you use Internet Explorer you can find an annoying problem when you send multiple requests using Ajax. All new requests after the first request (using http.open method), mantain the same value of the first request. This problem is caused by Internet Explorer use of cache.

Solution

When you call the method:

http.open


add a random variable using Math object and add it in the method's URL argument, for example:

nocache = Math.random();
http.open('get', 'page.php?url_parameter='+parameter+'&nocache = '+nocache);


In this way all the new request will have an URL parameter (&nocache) which force the browser to "refresh" the old value with the new value.

Bookmark and Share
Digg this

How to design a sexy header for your site using CSS


Step by step tutorial to implement a typographic style header using Photoshop and CSS.

Yesterday I received a lot of positive messages about the new template of my site. Expecially for the new header (in particular the green bar on top of the page). Some of my readers asked to me to dedicate a post about how to realize a similar "graphic composition", so I decided to publish a post with the "process" I use in general to design graphical sections for my web sites.

First approach: be simple.
The most important rule is: be simple. Avoid complex CSS structure beacuse in most cases it is not necessary. Woork header is composed from three DIV elements:

- Logo layer
- Navigation bar
- Green site introduction section

Each element has a fixed width but how navigation bar and site introduction section fit the page size. So you need other two liquid layer (width=100%) which will contain your navigation bar and introduction section. You can schematize this layout in this way:



Another solution to avoid container layers is applying a background picture to the <body> section using css, but I prefer working with pure layer instead of images to have more control on the design. In fact if you use a background image for the body, if you decide to change for example height or color of the navigation bar you have every time also changing the background image.


Design the header with Photoshop
A good practice is trying to design first your header in Photoshop to have an idea about how it will look. Replicate with Photoshop the header structure and choose some colors for its elements until you are not satisfied for the result:


When you think your header is ok you can start to convert the picture into HTML and CSS code. Before you leave Photoshop, create an image to apply to site introduction section background. This is a small image like this:

HTML and CSS code
HTML code for your header is very simple:

<div id="logo"></div>
<div id="navbar-container">
<div id="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<!-- Other links here...-->
</div>
</div>

<div id="int-site-container">
<div id="int-site">
</div>
</div>

... and CSS code is:

/* Reset Body Property */
body{border:0; margin:0; padding:0;}
#navbar-container{background:#000000;}
#int-site-container{
background:url(img/int-bg.png) left top repeat-x;
height:166px;
}
#logo, #navbar, #int-site{
width:800px;
margin:0 auto;
}
/*------------------*/
/* LOGO */
#logo{height:54px;}

/*------------------*/
/* Nav Bar */
#navbar{
height:26px;
line-height:26px;
}
#navbar a:link, #navbar a:visited, #navbar a:hover{
color:#FFFFFF;
font-weight:bold;
margin-right:20px;
text-decoration:none;
}

Create Rays of Light for introduction section background
To improve the look of my header I choose to add a background with a simple graphical element: some rays of light. To create this effect, create a triangle using Photoshop Pen Tool. Copy this object and rotate the new object of 20 degrees (set the rotation point to left-bottom):


Repeat this action until you designed a semi-circle. Select all element and create a smart object (selecting all "ray of light" layers and clicking on right mouse button -> create smart object). Then create a selection on the orange background and paste into the selection the smart object with your "rays of light". Set the Fill percentage to 19% and apply Color Burn filter to "rays of light" layer. The result is like this:


...and now free your creativity adding graphical element to your site introduction section. On my site I chose a simple typographic style adding a tag cloud of the main topics which my readers can find on woork.


If you are looking for nice fonts to download for free, I suggest to try on dafont.com, a great resource to find inspiration and all fonts you need.
Now, last step, add the image background you created into your CSS code:

#int-site{background:url(img/site-intro.png) left top no-repeat; height:166px;}

It's all!

Download to see the result

I hope this post can help you to find inspiration from "simplicity" to design your site.

Bookmark and Share
Digg this

One shot, one kill: how to become popular with (almost) each post you write on your blog


Do you need traffic for your website? Take a look at these simple tips...

This post is dedicated to every people who wrote me asking to me how I made popular a lot of my posts on delicious in the past weeks. There is a "simple" way to make popular your post and assure a costant high traffic on your site for a medium period conquering a place on delicious home page... and this is what you have to do.




Step 1: Write something interesting
...otherwise it's all useless.

Step 2: your link on delicious/popular page
If you want to conquer delicious home page with your new post, the first step is do appear your new post/link on del.icio.us/popular page:




How can you do it? It's not so difficult if you have a medium daily traffic and a god number of feeds subscribers. I noticed in average 10-12 votes on delicious (users who save your link to their bookmars) in 30 minutes are enough to do appear your link on delicious/popular page and - this is the good news - immediatly you'll receive a high number of new visits from this page.

The "bad" news is: if you want to remain for a long time on delicious/popular page page (and in this way have a possibility to conquer delicious home page) you have to mantain an increasing votes trend for your link. And how can you do it? The faster way is using social network to promote your new post.


Step 3: Publish it and promote it on social networks
In general I use this simple... let me say... "rule" which works very well: when I publish a post on Woork the first thing I do is add it to some general news sites (I use only digg, mixx, reddit) and other niche websites related to the topics about which I write on my blog (Dzone, Design Float and CSS Globe).




Combined effect in terms of visits from these websites produces in general the hoped result and the number of people who save your link on delicious will increase quickly. In this way after one / two hours your link on delicious will catch up 100 votes, enough to appears on delicious home page!

Bookmark and Share
Digg this

How to create an awesome eBook Template using Word or Apple Pages


Today I received some requests about The Woork Handbook template I published yesterday. Some readers asked to me to distribute that template for their eBooks. So in this post I want to illustrate some guidelines to create an awesome eBook template, quickly and in few steps.

I prepared the template which you can download (for Apple Pages and Microsoft Word) and reuse it for your eBooks (I used Apple pages to write the eBook!).

Download Apple Pages template Download Microsoft Word template


eBook Format
You can print the eBook on A4 format page (2 pages for each facade). This is the screenshot:




Document structure
The document is divided in sections. Each section is a chapter. Use "section break" to separate each chapter in this way:



Adding a section break:

- Apple Pages: Insert > Section Break
- Microsoft Word: Insert > Break > Section break (next page)


Page header
This is a not necessary element but i like have a short description in the header of the my pages. It's a simple text on top of your page with above a line which separete the header from the rest of the page:




In general "page header" isn't placed on the first page of the chapter:

- Apple Pages: select layout button on the inspector and flag the option: First Page is different.



- Microsoft Word: double click on the page header and select different first page from the header/footer toolbar.


Chapter structure using document styles
When you work with a text document (using Word, Apple Pages, OpenOffice...), a very good practice is to define your custom styles for the elements of your pages. In this way, every time you decide to modify the look of an element (for example "chapter title"), it will be update automatically in all elements of your document which use that style. For example take a look at the following picture which represents a generic chapter structure:



We have the following elements with related styles:

Chapter title -> Heading 1
Article title -> Heading 2
Paragraph header -> Sub header paragraph
Normal text -> Body
Code box -> Code
Footnotes -> Notes
Article footer -> Small header + small body

You can define your custom style in this way:

- Apple Pages: View > Show Style Draver and then selecting a style and modifying style properties, or creating a new style.
- Microsoft Word: Format > Style and then selecting a style and modifying style properties, or creating a new style.

Note: I used Qlassik font for the title of chapters and articles. You can download it here. In this version of template I used Arial in case you don't have Qlassik font.


Table of contents
Adding a TOC it's very simple:

- Apple Pages: Insert > Table of content.
- Microsoft Word: Insert > Document element > Table of content

Your TOC will be updated automatically every time you add a new content in your document but (this is really important!) you have to use style elements created for the chapter title and article title (Heading 1 and Heading 2).

It's all! I hope this template can help you to prepare quickly your eBook.

Every suggestion is appreciated :)

Note: I used Apple Pages to create my eBook, and I simply converted Pages template for Word. I experienced there are some litte problems with formatting which you convert a document in Word from Apple Pages... tell me if you have them!

Bookmark and Share
Digg this

How to skin HTML form elements in seconds


In the past weeks I received some requests from my readers which asked to me to suggest a simple way to skin HTML form elements. There are a lot of ways to do that and a lot of posts with interesting resources about this topic. But if you want to save time and obtain a nice result I suggest you to use jqTransform or NiceForms.

Both scripts are very useful and simple to use. If you want to use a "native" script which doesn't use an external JS framework (such as jQuery or MooTools) I think a good choice is NiceForms otwerwise, if you use jQuery, a good alternative is jqTransform. Take a look how they work.

1. jqTransform
jqTransform is a jQuery styling plugin wich allows you to skin quickly form elements in a very easy way. The only thing you have to do is to add a javascript inclusion to this plugin in the header section of your web page, create your form and add two lines of JS code to apply the transformation to your form.

Use this code to add a javascript inclusion to jqTransform:

<script type="text/javascript" src="jquery.jqtransform.min.js">
</script>

...now create a form with class property equal to jqTransform:

<form class="jqTransform">
<!-- Add form elements here... -->
<form>

...then add this JS code to apply the transformation:

<script type="text/javascript">
$(function() {
$("form.jqtransform").jqTransform();
});
</script>


2. NiceForms
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

To implement form style transformation you have to add a javascript inclusion to NiceForms in your web page using this code:

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

...then create a form with class property equal to niceform:

<form class="niceform">
<!-- Add form elements here... -->
<form>

It's all. Really simple and fast!

Any suggestion? Please leave a comment.

Bookmark and Share
Digg this

How to implement a Post-to-Wall Facebook-like using PHP and jQuery


In the past months I received a lot of request to write a tutorial for beginners in order to explain how to implement a Post-to-Wall Facebook-like. So, I prepared this very simple example which helps everyone understand how to implement this feature in a website using just some lines of PHP and JavaScript code.

Take a mind, every post in the Facebook Wall contains a lot of information (user, sender, message content, date, number of comments, ...):



But how I said, this tutorial is for Ajax/jQuery/PHP beginners. So I decided to simplify the original Wall using just a single information: the message content.





In this tutorial we have these files:
- confing.php (database connection parameters)
- index.php
- insert.php
- jquery.js
How the Wall works?



index.php contains a form with id "submit_form" with an input text with id "message_wall". When an user submits a new message. Then the new message is appends to top of the ul list with id "wall" with a nice fade-in effect (with jQuery). Ok, now take a look at the code.


1. index.php
index.php is very simple and contains just simple HTML code:

<form id="submit_wall"&gt;
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>

<ul id="wall">
</ul>

The <ul> list with id "wall" is the "container" of messages which are posted into the wall.


2. JavaScript Code
Open index.php and include jQuery in the <head> tag of the page:

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

...then add this simple function to enable Ajax functionalities to insert the message posted from the user into a database table without reload the page:

<script type="text/javascript">
$(document).ready(function(){
$("form#submit_wall").submit(function() {

var message_wall = $('#message_wall').attr('value');

$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
</script>

.prepend(...) is a jQuery function to insert elements inside, at the beginning, of a specific element (in this case UL list with id wall -->$("ul#wall")). When the new message is added into the list is hidden (display:none). Then it appears with a fade-in effect:

$("ul#wall li:first").fadeIn();

ul#wall:first: gets the first li element (the last added) into the ul list with id "#wall".


3. insert.php
insert.php contains some lines of PHP code to insert the new message into a database table. In this example I created a table WALL with just one attribute "message". PHP code is very simple:

<?php
if(isset($_POST['message_wall'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);

$sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
mysql_query($sql);
echo $message;
} else { echo '0'; }
?>


That's all! Download the source code ready to use in your web projects.




Add a comment for questions or suggestions, thanks!

Bookmark and Share
Digg this

How to manage a small web project: a simple approach


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

Bookmark and Share
Digg this