HTML lists: what's new in HTML 5?

There is a big and justified interest from the web community about the changes introduced in HTML 5 and in the last weeks I'm frequently receiving a lot of questions and requests about this topic. In this post I want to illustrate a quick roundup of some point of interest about the use of lists in HTML 5.
How you know HTML has three types of lists:

- <ul>, unordered list
- <ol>, ordered list
- <dl>, definition list

The HTML <li> tag defines a list item and is used in both <ul> and <ol> lists. <dt> and <dd> tags define a definition term and the related description in a definition list. These tags are all supported in HTML 5 version but there are some little changes in their attributes, in particular:

<ul> and <ol>
the attribute compact and type are not longer supported in HTML 5 (you have to use CSS instead).

<li>
the attribute type, which specifies the type of the list, is not longer supported in HTML 5 (you have to use CSS instead).
The attribute value, which defines the value of the first item of the list, is not longer deprecated and can be only used with the <ol> tag.

Unordered list for navigation bar
Another lists-related question is about the structure of the navigation bar of a website with the introduction of the new <nav> tag in HTML 5. How you know, unordered lists are commonly used to implement the navigation bar of a website. The typical structure of a navigation bar is a <div> tag that contains an unordered list with some items:

Here is the HTML code to implement the basic structure of a navigation bar

<div id="nav">
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</div>

In HTML 5, the structure of a navigation bar is the same illustrated in the previous code. The only thing that changes is the the external "container" of the unordered list. You have to use the new <nav> instead a generic <div> tag

<nav>
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</nav>

Definition list and the <dialog> tag
Definition lists are not frequently used in web design end a lot of people even ignore their existence! In general their use is mainly suggested when you have to represent a list of items with a related description for each item of the list. Here is the code that describes a generic definition list:

<dl>

<dt>Google</dt>
<dd>Search engine</dd>
<dt>Facebook</dt>
<dd>Social network</dd>

</dl>

Here is the output in a web browser:

Google

Search engine

Facebook

Social network

HTML 5 introduces the new <dialog> tag that uses <dt> and <dl> tags (these tag are used to define a term and its description in a definition list) to describe a conversation. Here is an example of dialog structure

<dialog>

<dt>Anna</dt>
<dd>What time is it?</dd>
<dt>Mark</dt>
<dd>Three o'clock</dd>
<dt>Anna</dt>
<dd>Thanks!</dd>

</dialog>

And here is the output in a web browser:

Anna

What time is it?

Mark

Three o'clock

Anna

Thanks!

*NOTE: the <dialog> tag has been dropped in HTML revision 3859 (2009-09-15). Thanks to Dylan for the suggestion. The new <figure> and <details> tags now use <dt> and <dl> instead of <legend>.

That's all. If you have some suggestion about this topic, please leave a comment. Thanks!

 

HTML lists: what's new in HTML 5?

There is a big and justified interest from the web community about the changes introduced in HTML 5 and in the last weeks I'm frequently receiving a lot of questions and requests about this topic. In this post I want to illustrate a quick roundup of some point of interest about the use of lists in HTML 5.
How you know HTML has three types of lists:

- <ul>, unordered list
- <ol>, ordered list
- <dl>, definition list

The HTML <li> tag defines a list item and is used in both <ul> and <ol> lists. <dt> and <dd> tags define a definition term and the related description in a definition list. These tags are all supported in HTML 5 version but there are some little changes in their attributes, in particular:

<ul> and <ol>
the attribute compact and type are not longer supported in HTML 5 (you have to use CSS instead).

<li>
the attribute type, which specifies the type of the list, is not longer supported in HTML 5 (you have to use CSS instead).
The attribute value, which defines the value of the first item of the list, is not longer deprecated and can be only used with the <ol> tag.

Unordered list for navigation bar
Another lists-related question is about the structure of the navigation bar of a website with the introduction of the new <nav> tag in HTML 5. How you know, unordered lists are commonly used to implement the navigation bar of a website. The typical structure of a navigation bar is a <div> tag that contains an unordered list with some items:

Here is the HTML code to implement the basic structure of a navigation bar

<div id="nav">
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</div>

In HTML 5, the structure of a navigation bar is the same illustrated in the previous code. The only thing that changes is the the external "container" of the unordered list. You have to use the new <nav> instead a generic <div> tag

<nav>
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</nav>

Definition list and the <dialog> tag
Definition lists are not frequently used in web design end a lot of people even ignore their existence! In general their use is mainly suggested when you have to represent a list of items with a related description for each item of the list. Here is the code that describes a generic definition list:

<dl>

<dt>Google</dt>
<dd>Search engine</dd>
<dt>Facebook</dt>
<dd>Social network</dd>

</dl>

Here is the output in a web browser:

Google

Search engine

Facebook

Social network

HTML 5 introduces the new <dialog> tag that uses <dt> and <dl> tags (these tag are used to define a term and its description in a definition list) to describe a conversation. Here is an example of dialog structure

<dialog>

<dt>Anna</dt>
<dd>What time is it?</dd>
<dt>Mark</dt>
<dd>Three o'clock</dd>
<dt>Anna</dt>
<dd>Thanks!</dd>

</dialog>

And here is the output in a web browser:

Anna

What time is it?

Mark

Three o'clock

Anna

Thanks!

*NOTE: the <dialog> tag has been dropped in HTML revision 3859 (2009-09-15). Thanks to Dylan for the suggestion. The new <figure> and <details> tags now use <dt> and <dl> instead of <legend>.

That's all. If you have some suggestion about this topic, please leave a comment. Thanks!

 

Elegant ScrollPanes with jQuery and CSS3

Some day ago I twittered a link about TweetTab a nice on-line service (similar to Monitter) to monitor in real time Twitter trends and custom searches. I like the design of TweetTab, clean and simple and I like in particular scrollpane used in each search tab. Take a look at this screenshot of TweetTab for a preview of the scrollpane used:

Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.
I prepared a simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .





Step 1. HTML code
First of all, you have to include jQuery and jScrollPane into the <head> tag of your web page:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>

Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example &lt;p> tags:

<div id="section-scroll" class="scroll-pane">

<p> ... </p>

<p> ... </p>

<p> ... </p>

<p> ... </p>

</div>

<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:

.scroll-pane {

width: 400px;
height: 250px;
overflow:auto;

}

It's important set a fixed height and the property overflow to "auto". This is the result:

Now add this JavaScript code below the inclusion of jScrollPane (in the <head> tag) to initialize the script for the layer with ID="section-scroll":

<script type="text/javascript">

$(function()
{

$('#section-scroll').jScrollPane();

});

</script>

You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:

<div id="section-scroll-1" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>

...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:

<script type="text/javascript">

$(function()
{

$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();

});

</script>

Step 2. CSS Code
Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.

.scroll-pane {

width: 400px;
height: 250px;
overflow:auto;
float: left;

}

/*JScrollPane CSS*/
.jScrollPaneContainer {

position: relative;
overflow: hidden;
z-index: 1;
padding-right: 20px;

}
.jScrollPaneTrack{

position:absolute;
cursor:pointer;
right:0;
top:0;
height:100%;

}
.jScrollPaneDrag{

position:absolute;
background:#CCC;
cursor:pointer;
overflow:hidden;
-moz-border-radius:6px;
-webkit-border-radius:6px;

}

.scroll-pane{padding:0;}
.scroll-pane p{

-moz-border-radius:6px;
-webkit-border-radius:6px;
background:#232323;
padding:12px;
color:#CCC;
font-size:14px;
line-height:16px;

}

The final result is something like this:

You can change it how you prefer for your web sites. That's all! Download the source code.
For other information about jScrollPane, thake a look at the official page.

Elegant ScrollPanes with jQuery and CSS3

Some day ago I twittered a link about TweetTab a nice on-line service (similar to Monitter) to monitor in real time Twitter trends and custom searches. I like the design of TweetTab, clean and simple and I like in particular scrollpane used in each search tab. Take a look at this screenshot of TweetTab for a preview of the scrollpane used:

Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.
I prepared a simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .





Step 1. HTML code
First of all, you have to include jQuery and jScrollPane into the <head> tag of your web page:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>

Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example &lt;p> tags:

<div id="section-scroll" class="scroll-pane">

<p> ... </p>

<p> ... </p>

<p> ... </p>

<p> ... </p>

</div>

<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:

.scroll-pane {

width: 400px;
height: 250px;
overflow:auto;

}

It's important set a fixed height and the property overflow to "auto". This is the result:

Now add this JavaScript code below the inclusion of jScrollPane (in the <head> tag) to initialize the script for the layer with ID="section-scroll":

<script type="text/javascript">

$(function()
{

$('#section-scroll').jScrollPane();

});

</script>

You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:

<div id="section-scroll-1" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>

...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:

<script type="text/javascript">

$(function()
{

$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();

});

</script>

Step 2. CSS Code
Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.

.scroll-pane {

width: 400px;
height: 250px;
overflow:auto;
float: left;

}

/*JScrollPane CSS*/
.jScrollPaneContainer {

position: relative;
overflow: hidden;
z-index: 1;
padding-right: 20px;

}
.jScrollPaneTrack{

position:absolute;
cursor:pointer;
right:0;
top:0;
height:100%;

}
.jScrollPaneDrag{

position:absolute;
background:#CCC;
cursor:pointer;
overflow:hidden;
-moz-border-radius:6px;
-webkit-border-radius:6px;

}

.scroll-pane{padding:0;}
.scroll-pane p{

-moz-border-radius:6px;
-webkit-border-radius:6px;
background:#232323;
padding:12px;
color:#CCC;
font-size:14px;
line-height:16px;

}

The final result is something like this:

You can change it how you prefer for your web sites. That's all! Download the source code.
For other information about jScrollPane, thake a look at the official page.

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: the quantity 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

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: the quantity 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

How to implement a mobile version of your blog in three simple steps

After launching of the mobile version of woork I received a lot of messages from my readers that asked to me to dedicate a special post about this topic. So in this post I want to illustrate you a simple way to implement a mobile version of your blog/website in three simple steps using Mobify.me, an awesome on-line service that allow you to design mobile versions of a website just with some clicks.


Step 1: Select sections for your mobile layout
First thing to do is to create an account on Mobify.me. It's simple and free. Than you have to choose the URL of the website you want to "Mobify". It appears an interface that allows you to choose sections to add to the mobile version of your website. The only thing you have to do is to pass your mouse over a section (red borders appear automatically around the section) and click on to select it:

Remember that, in order to improve readability, templates for a mobile device have to be simple, preferably with a single-column layout. I suggest you to select only the section that contains your posts (selected in red in the previous image). You can add the header and footer in the next step using the Design view that allow you to have more control over the CSS and HTML code.

Step 2: Design CSS + HTML code
At this point you are ready to customize the layout of your mobile template using the Design view and adding for example a custom header and footer. How you can see in the following image, Design view is divided in two parts:

Left section contains the CSS code and right section a preview in real time of your website (you can choose several mobile devices such as iPhone, Nokia, BlackBerry). To customize header and footer choose the related link on the right menu. This is the window that appears:

You have only to add some lines of HTML code and press "save and close". Then you can add CSS code to customize all HTML elements of your template using the left section of the Design view:

How I said all changes you make to your code are in real time, so you can see how your template looks immediately in the right section of the Design view. When your code is ready click on the button save to save your mobile template.


Step 3: Publish your website
Now you are ready to publish the mobile version of your website. Publishing is very simple. You can publish your blog using your hosting service or directly Mobify.me hosting choosing an URL like this: http://yourname.mobify.me (if you use Blogger this is the best solutions!).

At this point you have to add in the tag <head> of your original template some lines of JavaScript code that allows to redirect visitors that use mobile devices to browse your website. The code is very simple:

<script type="text/javascript" src="http://yourname.mobify.me/mobify/redirect.js"></script>
<script type="text/javascript">try{_mobify("http://yourname.mobify.me/");} catch(err) {};</script>

Save your template and don't forget to publish it otherwise the redirect doesn't works! Ok, your mobile version is now ready! Take a look at the final result trying to load your website from a mobile device. Simple no? And also free! Try to take a look at the mobile version of woork loading woork from your mobile device and tell me what you think about.

Any suggestion about this topic? Please leave a comment, thanks!

External Links

- Mobify.me

Related Posts

- The mobile version of Woork is on-line with Mobify.me

How to implement a mobile version of your blog in three simple steps

After launching of the mobile version of woork I received a lot of messages from my readers that asked to me to dedicate a special post about this topic. So in this post I want to illustrate you a simple way to implement a mobile version of your blog/website in three simple steps using Mobify.me, an awesome on-line service that allow you to design mobile versions of a website just with some clicks.


Step 1: Select sections for your mobile layout
First thing to do is to create an account on Mobify.me. It's simple and free. Than you have to choose the URL of the website you want to "Mobify". It appears an interface that allows you to choose sections to add to the mobile version of your website. The only thing you have to do is to pass your mouse over a section (red borders appear automatically around the section) and click on to select it:

Remember that, in order to improve readability, templates for a mobile device have to be simple, preferably with a single-column layout. I suggest you to select only the section that contains your posts (selected in red in the previous image). You can add the header and footer in the next step using the Design view that allow you to have more control over the CSS and HTML code.

Step 2: Design CSS + HTML code
At this point you are ready to customize the layout of your mobile template using the Design view and adding for example a custom header and footer. How you can see in the following image, Design view is divided in two parts:

Left section contains the CSS code and right section a preview in real time of your website (you can choose several mobile devices such as iPhone, Nokia, BlackBerry). To customize header and footer choose the related link on the right menu. This is the window that appears:

You have only to add some lines of HTML code and press "save and close". Then you can add CSS code to customize all HTML elements of your template using the left section of the Design view:

How I said all changes you make to your code are in real time, so you can see how your template looks immediately in the right section of the Design view. When your code is ready click on the button save to save your mobile template.


Step 3: Publish your website
Now you are ready to publish the mobile version of your website. Publishing is very simple. You can publish your blog using your hosting service or directly Mobify.me hosting choosing an URL like this: http://yourname.mobify.me (if you use Blogger this is the best solutions!).

At this point you have to add in the tag <head> of your original template some lines of JavaScript code that allows to redirect visitors that use mobile devices to browse your website. The code is very simple:

<script type="text/javascript" src="http://yourname.mobify.me/mobify/redirect.js"></script>
<script type="text/javascript">try{_mobify("http://yourname.mobify.me/");} catch(err) {};</script>

Save your template and don't forget to publish it otherwise the redirect doesn't works! Ok, your mobile version is now ready! Take a look at the final result trying to load your website from a mobile device. Simple no? And also free! Try to take a look at the mobile version of woork loading woork from your mobile device and tell me what you think about.

Any suggestion about this topic? Please leave a comment, thanks!

External Links

- Mobify.me

Related Posts

- The mobile version of Woork is on-line with Mobify.me

The Deming Cycle: an application to web design

In this post I want to illustrate an application of the Deming Cycle - also know as the PDCA 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 quality as 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

The Deming Cycle: an application to web design

In this post I want to illustrate an application of the Deming Cycle - also know as the PDCA 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 quality as 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

15 Awesome tutorials and resources for web developers

A new week is coming and in this post I want to suggest you some interesting tutorials and resources for web developers I bookmarked this week. If you want to suggest a link, please leave a comment.

1. InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. It supports multiple data representations: treemaps, radial layouts, hypertrees/graphs, spacetree-like layouts, and more.

2. Vaadin
Vaadin is a Java framework for building modern web applications that look great, perform well and make your user happy.

3. Flip!
Flip is a jQuery plugin for jquery that will flip HTML elements in four directions. It's really simple to implement and customize.

4. Uploadify
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

5. Create a Twitter-Like "Load More" Widget
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

6. FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

7. HTML5 drag and drop in Firefox 3.5
In this tutorial you can learn HTML 5 specification section on new drag-and-drop events, and Firefox 3.5 with an included implementation of those events.

8. Music Player with mouse gestures
This tutorial illustrates how to implement an amazing music player using mouse gestures & hotkeys in jQuery. You can Click & Drag with mouse to interact with interface�s music player or use directional keys & spacebar instead of mouse.

9. jQuery Image Magnify
jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined.

10. Creating a Keyboard with CSS and jQuery
Sometimes it's just fun to play around with the programming languages we know and see what we can create. It might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes "action" keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. This tutorial it'll show you how to build it.

11. Img Notes
Img Notes is an useful jQuery plug-in to add notes over images in a Flickr-like style. It's simple to implement and customize.

12. WriteMaps
WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.

13. Simple vibration effect for your form box with jQuery
This effect can be used to validate certain criteria in your form. Other than using highlighter to highlight the error area, we can use a more creativity approach by vibrating that particular input box to alert the user. This tutorial demonstrate a very easy way to understanding how vibration works on the web and how it can be used in your web design.

14. epiClock
epiClock is an extremely lightweight jQuery plugin which gives users the ability to easily create and manage any number of javascript powered clocks.

15. ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.