New week, new inspiring playlist for web designers with eight new beautiful tracks.
Archive for October, 2009
Inspiring Music Playlist for Web Designers n. 02
Thursday, October 15th, 2009How To Implement a Twitter Reactions Badge with Juitter and jQuery
Tuesday, October 13th, 2009Juitter is an interesting jQuery plugin to put Twitter live on your website. Juitter is lightweight, fast, in real-time, fully customizable and doesn’t slow down your page while tweets are loading. In this article I want to illustrate how you can use Juitter to implement a powerfull Twitter reactions badge that displays in real time the reactions of Twitter users to your posts. The only thing you have to do is to download Juitter Beta (the package includes two JavaScript files: jquery.juitter.js and system.js) and include them in the tag of your page after the link to jQuery:
<script type="text/javascript" src="jquery.juitter.js"></script>
<script type="text/javascript" src="system.js"></script>Then you have to add the following layer where you want reactions appear.
<div id="juitterContainer"></div>system.js original source code. Open system.js and modify the firs,t lines of the code:
$(document).ready(function() {
$.Juitter.start({whit the following ones:
$(document).ready(function() {
var mysearch = $(".post h1").html();
$.Juitter.start({and set searchObject with the value of mysearch in this way:
searchObject:mysearch,In the previous code I simply added a new var mysearch that gets the title of the post using a jQuery selector. Important: I'm assuming that the title of posts is wrapped by the h1 tag and the container, within which the title is, has the class property set to .post. You have to change the selector $(".post h1")coherently with the structure of your pages.
Change the parameter total: with the number of tweet to be show and change the number after live:live- with a number that indicates the time in seconds to wait before request the Twitter API for real time updates. You can also customize a lot of other parameters following the instructions on the system.js file.
Each tweet is contained within a li tag with the class property set to .twittLI. So, if you want to customize the look of the badge that display search results the only thing you have to do is to add a simple class .twittLI to your CSS file. Here is an example:
.twittLI{
border-bottom:solid 1px #DFDFDF;
clear:both;
padding:4px;
}5 Must Have Sans Serif Fonts for Web Designers
Monday, October 12th, 2009A new week is coming with a fresh collection of five beautiful must have sans serif fonts. This collection includes: Harabara, Puritan, Resavska, Roadway and Oceania (the last one is one of my favorite fonts).
Harabara
Puritan
Resavska
Roadway
Oceania
HTML Quick Guidelines
Monday, October 12th, 2009PSD to HTML We’ll convert your design to xHTML/CSS
With this post I want to start a new series of articles dedicated to a collection of sort, one-sheet documents about the web design called Fast Paper.
Each Fast Paper will treat, not with an exhaustive detail, a specific argument (html, css, jQuery,…). This first issue is dedicated to some simple HTML quick guidelines.
Setster: Appointment Scheduling for Freelancers and Small Business
Sunday, October 11th, 2009If you are a freelancer or a small business and are looking for a simple and powerful tool to list your availability and your services directly on the pages of your website I suggest you to try Setster.
Setster is an interesting on-line service that allows you to schedule appointments with your customers trough an easily embeddable widget you can quickly add to your website in seconds. In this way your clients will be able to check your availability and request an appointment for a specific service using a simple elegant and intuitive interface. You can see how Setster looks on this site by clicking here.
You can sign-up to Setster for free or buying a professional plan, which offers more advanced features, and start adding your business details, types of services, working hours, and other options in order to customize your profile and be ready to receive new appointment requests. Setster is also integrated with FreshBooks which invoices your clients and PayPal providing payments. Setster can help you improve dramatically relationships with your clients and grow easily your business by allowing you to manage your time with greater efficiency.
Really simple CSS trick for equal height columns
Sunday, October 11th, 2009PSD to HTML We’ll convert your design to xHTML/CSS
This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS properties position:absolute and border. Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post.
Image to have this situation: you have to implement a two column layout and you want the height of the sidebar column is equal to the height of the main content column. The following image illustrates our problem:
HTML structure
The first step is to define the HTML structure of our document. In this example I used a simple two columns layout like this:
<div id="wrapper">
<div id="maincontent">...</div>
<div id="sidebar">...</div>
</div>#wrapper
The #wrapper layer will contain our two columns, #maincontent and #sidebar:
#wrapper{
margin:0 auto;
width:600px;
}#maincontent
The #maincontent layer is the left column of the document that will contains the main content of the page (for example the text of posts). The following image illustrates the basic concept I used to implement this trick:
We have to add an extra border to the #maincontent layer (200px) above which will be placed the #sidebar. In this way we’ll have a fake background for the #sidebar, represented by the right border of the #maicontent column, that will have the same height of the #maincontent layer. Here is the CSS code:
#maincontent{
border-right:solid 200px #DFDFDF;
position:absolute;
width:400px;
}#sidebar
Now we have to define the #sidebar using the following properties:
The width of the #sidebar is the same of the #maincontent right border width (200px) and the property margin-left is equal to the #maincontent layer width. Here is the CSS code:
#sidebar{
background:#DFDFDF;
margin-left:400px;
position:absolute;
width:200px;
}In this way the height of the #sidebar column will seem the same of the #maincontent column height.
Best PHP Frameworks to build quickly complex web applications
Saturday, October 10th, 2009Choosing a good PHP frameworks can help you develop complex Rich Internet Applications quickly, with a best practices oriented approach, and saving a lot of time reusing code snippets that are already available. There are a lot of interesting PHP frameworks you can choose for your next web project. Here is a roundup of the best ones.
For a detailed comparison of web application frameworks I suggest you to take a look at this page on Wikipedia.
CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you’re a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you’re tired of ponderously large and thoroughly undocumented frameworks.
CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications. Using commonly known design patterns like MVC and ORM within the convention over configuration paradigm, CakePHP reduces development costs and helps developers write less code.
Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase. Zend Framework is focused on building more secure, reliable, and modern Web 2.0 applications & web services, and consuming widely available APIs from leading vendors like Google, Amazon, Yahoo!, Flickr, as well as API providers and cataloguers like StrikeIron and ProgrammableWeb.
Yii PHP Framework is a high-performance component-based PHP framework best for developing large-scale Web applications. Yii comes with a full stack of features, including MVC, DAO/ActiveRecord, I18N/L10N, caching, jQuery-based AJAX support, authentication and role-based access control, scaffolding, input validation, widgets, events, theming, Web services, and so on. Written in strict OOP, Yii is easy to use and is extremely flexible and extensible.
PRADO is a component-based and event-driven programming framework for developing Web applications in PHP 5. PRADO stands for PHP Rapid Application Development Object-oriented.
Symfony provides an architecture, components and tools for developers to build complex web applications faster. Choosing symfony allows you to release your applications earlier, host and scale them without problem, and maintain them over time with no surprise. Symfony is based on experience. It does not reinvent the wheel: it uses most of the best practices of web development and integrates some great third-party libraries.
Akelos PHP Framework is a web application development platform based on the MVC (Model View Controller) design pattern. Based on good practices, it allows you to write views using Ajax easily, control requests and responses through a controller, manage internationalized applications, communicate models and the database using simple conventions.
eZ Components is an enterprise ready general purpose PHP components library used independently or together for PHP application development. With eZ Components, developers do not have to reinvent the wheel, instead they can concentrate on solving customer-specific needs.
Methodic approach to CSS coding: Four Bubbles Model
Friday, October 9th, 2009Which approach is better to write CSS code? In general I always prefer to use a methodic top-down approach I want to present you in this post. I called this process Four Bubbles Model.
The model is based on four progressive phases that helps you quickly develop CSS files and maintain a better control of code you’re writing. The following picture illustrates the four main phases that compose the model:
This model is thought to help web designers develop optimized, simple to maintain CSS files, minimizing the number of classes and avoiding redundant and inconsistent declarations. The following paragraph contain a quick explanation about each single phase.
HTML standard elements
The first phase of the model concerns the reset and redefinition of browser styles for HTML standard elements. For the reset I start adding only a small set of elements that I’m sure to use in my pages, gradually adding new ones when I need.
body, h1, h2, h3, p, ul, li, form, input{
border:0;
margin:0;
padding:0;
}
ul{list-style:none;}
I follow the same approach to redefine HTML standard elements. For example, here is the basic set of HTML elements with which I start:
h1{...}
h2{...}
h3{...}
p{...}
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
input, textarea{...}
...
<p> for paragraphs, <a> for links, <h1> to define the title of your posts, <h3> to define subtitles and so on.
Main sections
The second phase of the model concerns the definition of the main sections that compose the structure of HTML pages. The picture to right illustrates the main sections of a typical two columns layout. I always use the following standard declarations to identify each section:
#wrapper{...}
#header{...}
#nav{...}
#main{...}
#sidebar{...}
#footer{...}Then, for each section, I define the style of its child elements. For example here is the code for the unordered list that I use for the navigation links:
#nav ul{...}
#nav ul li{...}
#nav ul li a:link{...}
#nav ul li a:visited{...}
#nav ul li a:hover{...}
#nav ul li a:active{...}And here is the code for the links of the footer and for paragraphs within which to add some final information about the web site (such as copyrights and so on.)
#footer ul{...}
#footer ul li{...}
#footer ul li a:link{...}
#footer ul li a:visited{...}
#footer ul li a:hover{...}
#footer ul li a:active{...}
#footer p{...}
Custom classes
The third phase of the model concerns the definition of custom classes for all custom elements that compose web pages. An example of custom class is the class .right that I use to align to right HTML elements or the class .feed-icon that I use with a background image for the title of RSS Feeds section.
.right{float:right;}
.feed-icon{...}
In this phase it’s frequent to add a lot of unnecessary declarations that add lines of “garbage” code into your CSS file. A typical example of unnecessary declaration is the definition of a class .title for the title of posts when you can simply use the tag h1>.
Code optimization
The last phase of the model concerns the optimization of developed code, removing unnecessary or not used declarations, grouping properties where it’s possible and reducing the length of comments. Final steps is to make a lightweight version of your CSS file using a CSS compressor. These tools allow you to remove exceeding spaces and lines break form your code minimizing dramatically the size of your files. There are some interesting resources that compress CSS files for free such as CssCompressor or CssOptimiser. The only advice if you use these tools is to avoid overwriting the original source file otherwise could be very difficult to modify it afterwards using a basic editor. If you use an advanced editor like Dreamweaver this is not a problem because you can use the option “Apply Source Formatting” to revert compressed files to their original formatting.
Conclusions
How you can see the model is very simple and intuitive and I’m sure it can be very useful to help you adopt a methodic approach to CSS coding. For suggestions and improvements about this model please leave a comment.
Inspiring Music Playlist for Web Designers n. 01
Thursday, October 8th, 2009When I work on my blog or a web project I like to have background music. It’s relaxing and help me find inspiration. In general I like to listen web radios with iTunes. iTunes allows you to access to a huge number of web radios indexed by category. My favorite station is All Chilled @ 181.FM (Radios > Ambient > All Chilled @ 181.FM) that plays a great selection of ambient and soft songs. With this post I want to start sharing with you a selection of my favorite music playlists dedicated to web designers. Here is the first playlist with ten beautiful songs. Good listening!
Stateless – BloodStream
World Citizen – David Sylvian and Ryuichi Sakamoto
The Cinematic Orchestra – To Build a Home
Gotye – Hearts A Mess
Cary Brothers – Ride
Sigour Ross – Saeglopur
The Go Find – New Year
Ivy – Four In The Morning
Skye – Love Show
Little Dragon – Twice
How to distribute elements horizontally using CSS
Wednesday, October 7th, 2009In this post I want to reply to a frequently asked question that I receive from my readers about how to distribute horizontally a certain number of elements within a main container using CSS. This problem is not particularly complex and can be solved simply using the CSS selector :first-child.
Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post. The picture below illustrates an example of horizontal distribution:
This is the HTML code you can use to define the structure of your document:
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
In order to distribute horizontally the three elements contained into the wrapper we have to use some lines of CSS code. At first sight, a practical solution could be to define a class (.section), with the properties width and margin-right set to a specific value, and apply it to each <div> element contained into the wrapper. The problem is the right margin of the last <div> element that exceeds the width of the wrapper:
This is a problem because web browsers render the page in this way:
The last <div> layer is moved below. The question is: How can you remove the external margin of the last element without using a different CSS class with the property margin-right sets to 0?
Solution
As I said at the beginning of this article, the simplest solution is to use the CSS selector :first-child and invert the position of the margin from right to left. :first-child allow you to get an element that is the first child of another element. In this way the selector allows you to remove the left margin easily.
The first step is to define the wrapper using the following CSS code:
#wrapper{
width:320px;
height:60px;
background:#EFEFEF;
}The following code define the class.section to apply to each element within the main wrapper.
.section{
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
width:98px;
}In this example I used fixed values for the properties width and margin-left but you can also use relative value (percentage). Now we have to remove the left margin adding the following code:
#wrapper div:first-child{margin-left:0px;}Browsers interpret the previous line in this way: get the first <div> element contained into the element with ID=wrapper and set the property margin-left to 0. And this is the result:
The only advice is the following: IE 6 doesn’t support the selector :first-child. You can use conditional comments to define a specific CSS file for IE6 and add a new class (for example .section-first) with the same properties of the class .section but the property margin-left sets to 0.
