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.
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>
</div>
<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><li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>
</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>
</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><li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>
</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><dd>Search engine</dd>
<dt>Facebook</dt>
<dd>Social network</dd>
Here is the output in a web browser:
Google
Search engine
FacebookSocial 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><dd>What time is it?</dd>
<dt>Mark</dt>
<dd>Three o'clock</dd>
<dt>Anna</dt>
<dd>Thanks!</dd>
And here is the output in a web browser:
Anna
What time is it?
MarkThree o'clock
AnnaThanks!
*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!
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:
Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example <p> tags:
<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:
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":
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:
...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:
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.
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.
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>
<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 <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;
}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()
{
</script> {
$('#section-scroll').jScrollPane();
});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>
<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()
{
</script> {
$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
});$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
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 {
/*JScrollPane CSS*/
.jScrollPaneContainer {
}
.jScrollPaneTrack{
.jScrollPaneDrag{
.scroll-pane{padding:0;}
.scroll-pane p{
width: 400px;
height: 250px;
overflow:auto;
float: left;
}height: 250px;
overflow:auto;
float: left;
/*JScrollPane CSS*/
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
padding-right: 20px;
overflow: hidden;
z-index: 1;
padding-right: 20px;
}
.jScrollPaneTrack{
position:absolute;
cursor:pointer;
right:0;
top:0;
height:100%;
}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;
}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;
}-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 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!
- 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
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
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:
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!
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>
<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.meRelated Posts
- The mobile version of Woork is on-line with Mobify.me
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!
- How to manage a small web project: a simple approach
- Simple process to estimate times and costs in a web project
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
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.
This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter. In this example I used PHP, jQuery and a very useful Twitter Search API for PHP based on the work of David Billingham and actually developed by Ryan Faerman. This implementation is very simple to customize and integrate on your project. The result is something linke this:
You can download the full code here and reuse it for free on your projects.
I suggest you to take also a look at these posts:
- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API
1. A little introduction
This package contains the following files:
- index.php: page with the search form + search results
- search.php: PHP search
- twitterapi.php: Twitter Search API for PHP
- jquery/jquery-1.3.2.min.js: jQuery framework
How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).
I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.
2. index.php: HTML code
HTML code is very simple. Copy the following code in the tag <body>:
...and add into the tag <head> of the page a link to jQuery:
The result is a simple search form:
3. search.php
Now copy and paste the following code into search.php:
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
... and to get a specific attribute of the array I used this simple code:
Take a look at this post for info about the search on Twitter.
4. index.php: JavaScript Code
Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:
This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.
That's all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.
You can download the full code here and reuse it for free on your projects.
I suggest you to take also a look at these posts:
- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API
1. A little introduction
This package contains the following files:
- index.php: page with the search form + search results
- search.php: PHP search
- twitterapi.php: Twitter Search API for PHP
- jquery/jquery-1.3.2.min.js: jQuery framework
How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).
I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.
2. index.php: HTML code
HTML code is very simple. Copy the following code in the tag <body>:
<div class="twitter_container">
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>
...and add into the tag <head> of the page a link to jQuery:
<script type="text/javascript" src="jquery.js"></script>
The result is a simple search form:
3. search.php
Now copy and paste the following code into search.php:
<?php
include('search.php');
if($_POST['twitterq']){
?>
include('search.php');
if($_POST['twitterq']){
$twitter_query = $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
}$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
?>
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
foreach($results as $result){
...
}
...
}
... and to get a specific attribute of the array I used this simple code:
$result->name_of_element
Take a look at this post for info about the search on Twitter.
4. index.php: JavaScript Code
Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:
<script type="text/javascript">
$(document).ready(function(){
var twitterq = '';
function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){
},2000);
}
$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({
return false;
});
});
</script>
$(document).ready(function(){
var twitterq = '';
function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){
window.setTimeout(function () {
clearInterval(myInterval);
});
}clearInterval(myInterval);
});
},2000);
}
$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({
type: "POST",
url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}
});url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}
return false;
});
</script>
This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.
That's all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.
In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What's a launching soon page? In general it's a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line. A typical launching soon page contains a countdown and a form that collects emails from interested visitors. In this tutorial I implemented a launching soon page like this:
Take a look at the live preview here.
This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!
A little introduction
How I said this package is ready to use and contains these files:
- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script
1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.
The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:
The only thing you have to do is to add this line of code in the <head> tag of the page:
Then, in the tag <body> add the following lines of code to display the countdown:
To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):
...if your target date is 25 December the previous line becomes:
If you want to change the style of the countdown you have to modify the following CSS classes:
In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".
jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:
Now, in the tag <body> add a simple form with an input field:
...and add this layer to display a custom message when an user submit the form:
...the result after the submission is here:
The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:
2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:
Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!
Take a look at the live preview here.
That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!
This page is very simple to modify and customize using just some lines of CSS code. You can also add the logo of your company and all elements you want with some lines of HTML code. Download the source code of this tutorial you can customize and reuse in your web project for free!
A little introduction
How I said this package is ready to use and contains these files:
- index.php: the launching soon page final interface (countdow + form)
- config.php: enables database connection
- insert.php: PHP code to add emails into a database table
- js/jquery-1.3.2.min.js: jQuery framework
- js/countdown.js: the countdown script
1. index.php
index.php is the final interface of your launching soon page. How I said it contains a countdown and a form to allow users to leave their emails.
The countdown script
In order to implement the countdown I used this dynamic countdown script that lets you count down to relative events of a future date/time. This future date, while the same for everyone, occurs differently depending on the time zone they're in. The result is here and it's fully customizable changing some lines of CSS code:
The only thing you have to do is to add this line of code in the <head> tag of the page:
<script type="text/javascript" src="js/countdown.js"></script>
Then, in the tag <body> add the following lines of code to display the countdown:
<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
To set a target date you have to change this line modifying July 6 and the hour 0:0:00 with your target date (for example 25 december):
new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
...if your target date is 25 December the previous line becomes:
new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")
If you want to change the style of the countdown you have to modify the following CSS classes:
.count_down{...}
.count_down sup{...}
.count_down sup{...}
In particular .count_down{} changes the format of the numbers and .count_down sup{} changes the style of the text "days", "hours", "minutes".
jQuery and the input form
Ok, the countdown is ready! Next step: add this line of code to include jQuery in the <head> tag of the page:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>
Now, in the tag <body> add a simple form with an input field:
<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>
...and add this layer to display a custom message when an user submit the form:
<div id="update_success">E-mail added!>/div>
...the result after the submission is here:
The form with the input field disappears with a nice fade-out effect and a success message appears in its place. Now, in the <head> tag, after the line of code that includes jQuery, add this script to enable ajax functionalities to insert emails added from users into a database table without reload the page:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
</script>var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
2. insert.php
insert.php contains some lines of PHP code to insert an email address into a database table. In this example I created a table EMAIL with just one attribute "email". PHP code is very simple:
<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);
$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php');
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);
$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>
Now, remember to modify your database connection parameters in config.php and upload all files on your testing server. Than load index.php and see the result!
Take a look at the live preview here.
That's all! Download the source code of this tutorial you can customize and reuse in your web project for free! Leave a comment for your suggestions, thanks!
After my previous tutorial that illustrated how to implement a super simple way to work with Twitter API (PHP + CSS) I received a lot of emails from my readers that asked to me to write a post about how to implement a simple Twitter search and display search results in a web page with a custom format. So in this tutorial I want to illustrate how you can implement that using a very useful Twitter Search API for PHP developed by David Billingham.
Using this simple method you can obtain, just in some lines of PHP and CSS code, awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects just in some seconds!
1. A little introduction
In this package you'll find two PHP file:
- index.php: the search page (search form + search results)
- search.php: Twitter Search API for PHP
You have to customize only index.php and your Twitter Search will be ready to be integrated into yor web projects in one minute!
2. Index.php
Take a look at index.php. This page contains a simple search form:
...and some lines of PHP code:
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
... and to get a specific attribute of the array I used this simple code:
The structure of a tweet contains the following attributes (take a look at the Twitter API home page for a full list):
...so, if you want to display the text of a tweet you can use this code:
The following line of code get the text of the current tweet and convert a textual link into a clickable link:
That's all! Now download the source code, open and upload all files in your test server, open index.php and try to search for something!
If you have some suggestion, please add a comment!
Using this simple method you can obtain, just in some lines of PHP and CSS code, awesome results like this:
You can download the source code at the following link and reuse it for free in your web projects just in some seconds!
1. A little introduction
In this package you'll find two PHP file:
- index.php: the search page (search form + search results)
- search.php: Twitter Search API for PHP
You have to customize only index.php and your Twitter Search will be ready to be integrated into yor web projects in one minute!
2. Index.php
Take a look at index.php. This page contains a simple search form:
<form action="index.php" method="submit">
<input name="twitterq" type="text" id="twitterq" />
<input name="Search" type="submit" value="Search" />
</form>
<input name="twitterq" type="text" id="twitterq" />
<input name="Search" type="submit" value="Search" />
</form>
...and some lines of PHP code:
<?php
include('search.php');
if($_GET['twitterq']){
?>
include('search.php');
if($_GET['twitterq']){
$twitter_query = $_GET['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
}$search = new TwitterSearch($twitter_query);
$results = $search->results();
foreach($results as $result){
echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
?>
$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:
foreach($results as $result){
...
}
...
}
... and to get a specific attribute of the array I used this simple code:
$result->name_of_element
The structure of a tweet contains the following attributes (take a look at the Twitter API home page for a full list):
[text]: Text of the current tweet
[to_user_id]: User Id
[from_user]: User name
[id]: Tweet Id
[from_user_id]: User id
[source]: Source of the current tweet
[profile_image_url]: User profile image URL
[created_at]: Date of the current tweet
[to_user_id]: User Id
[from_user]: User name
[id]: Tweet Id
[from_user_id]: User id
[source]: Source of the current tweet
[profile_image_url]: User profile image URL
[created_at]: Date of the current tweet
...so, if you want to display the text of a tweet you can use this code:
$result->text
The following line of code get the text of the current tweet and convert a textual link into a clickable link:
$text_n = toLink($result->text);
That's all! Now download the source code, open and upload all files in your test server, open index.php and try to search for something!
If you have some suggestion, please add a comment!