iphone4

Saturday, December 6, 2008

Window Vista Wallpaper

Tuesday, December 2, 2008

Simple ul list with a nice slide-out effect for <li> elements

In the past weeks some readers of this blog asked to me what's a simple way to implement an animated "disappear" effect (using unobtrusive JavaScript code) for an element of a list when an user clicks on a link contained into a <li> element of that list.

I think a very simple way to do that is using MooTools slideOut() effect. This tutorial explains how to implement that using "five" lines of JavaScript code.

Download source code

Live Preview

Step 1: Include MooTools framework

First, you may download the latest version of MooTools and add a link to the framework in the tag <head> of the page:

Step 2: HTML code

Image to implement a simple list of products and for each product into that list add a link "Hide":

</ul>

The result is something like this:

How you can see, we have a products list with ID="myList" and some <li> elements with a progressive ID: l1, l2, l3, l5, l5. We want to obtain this effect: when an user clicks on a link ("Hide"), the related <li> element disappear with a nice animated slide out effect. How can we do that? Take a look at the following step!

Step 3: Unobtrusive JavaScript code

Copy and paste this code below the code at the step 1 to enable slideOut() effect:

/* From the list with ID myList, for each li element of the list...: */
$('myList').getElements('li').each(function(e){
/* ...get the ID of the selected item */
e.getElement('a').addEvent('click', function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});

});
</script>

That's all! Download the source code or take a look at the live preview.

Download source code

Live Preview

Sunday, November 23, 2008

Google SearchWiki: vote and add your comments about Woork

Google SearchWiki it's a new Google features which allows users to vote and post comments on web pages. Now you can customize your search results with your rankings and notes in a simple way directly for Google search results page.

This is a Google screenshot with search results about "Woork":

Try to vote this site and post your public comments. Thanks!

Saturday, November 22, 2008

10 Free powerful Content Management Systems

Content Management Systems help web developers create, manage and publish quickly blogs, portal or social collaboration websites. Probably you know the most popular CMS tools such as WordPress, Movable Type, Joomla!, Mambo but there are a lot of similar CMS tools for all needs.

This list suggest you some interesting alternatives you have to try. Please add a link if you want to suggest a CMS tool not included in this list.

1. Frog CMS
Frog CMS simplifies content management by offering an elegant user interface, flexible templating per page, simple user management and permissions, as well as the tools necessary for file management.

Frog requires PHP5, a MySQL database or SQLite 3 with PDO, and a web server (Apache with mod_rewrite is highly recommended).
Read more...

2. SilverStripe
SilverStripe open source content management system and framework intuitive and user-friendly, fast, flexible, and free, to build powerful websites quickly.
Read more...

3. Liferay
Liferay is a leading provider of open source enterprise portal and social collaboration software. Liferay Portal is all about choice. It gives you over 60 portlets and the most innovative technologies to let you do everything from web publishing, to building an intranet, to simply getting the right documents and applications to the right people.
Read more...

4. miaCMS
MiaCMS is a powerful, flexible, and easy to use open source content management system. It can be used to build websites of all shapes, sizes, and scenarios. MiaCMS features simple installation, graphical (WYSIWYG) HTML editors, RSS content syndication, a powerful 3rd party extension system, flexible theming capabilities, site search, RESTful content access, user management, multilingual capabilities, plus much more.
Read more...

5. MoinMoin
MoinMoin is an advanced, easy to use and extensible WikiEngine with a large community of users. Said in a few words, it is about collaboration on easily editable web pages.
Read more...

6. ImpressCMS
ImpressCMS is a community developed Content Management System for easily building and maintaining a dynamic web site. Keep your web site up to date with this easy to use, secure and flexible system. It is the ideal tool for a wide range of users: from business to community users, from large enterprises to people who want a simple, easy to use blogging tool.
Read more...

7. MODx
MODx is 100% buzzword compliant, and makes child's play of building content managed sites with validating, accessible CSS layouts – hence Ajax CMS. It empowers its users to build engaging "Web 2.0" sites today, with its pre-integrated MooTools, Scriptaculous and Prototype libraries.
Read more...

8. Textpattern
Textpattern is a flexible, elegant and easy-to-use content management system PHP-based. It is both free and open source.
Read more...

9. Radiant
Radiant is a no-fluff, open source content management system designed for small teams. Main features: elegant user interface, flexible templating with layouts, snippets, page parts, and a custom tagging language, first-class extension/plugin system, simple user management and permissions. Platform: Ruby.
Read more...

10. CMS Made Simple
If you are an experienced web developer, and know how to do the things you need to do, to get a site up with CMS Made Simple is just that, simple. For those with more advanced ambitions there are plenty of addons to download. And there is an excellent community always at your service.
Read more..

Wednesday, November 19, 2008

20 Great PHP frameworks for developers

A good PHP framework can help you develop a PHP application quickly, with more simplicity and with a vision "best-practices-oriented".

Take a look at this list with 20 great PHP frameworks and suggest that you prefer or a new link to a framework not included into this list.

1. CodeIgniter
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.
Read more...

2. CakePHP
CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.
Read more...

3. Symfony
Symfony is a full-stack framework, a library of cohesive classes written in PHP5. It 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.
Read more...

4. Prado
PRADOTM 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.
Read more...

5. Qcodo
It is a completely object-oriented framework that takes the best of PHP and provides a truly rapid application development platform. Initial prototypes roll out in minutes instead of hours. Iterations come around in hours instead of days (or even weeks). As projects iterate into more cohesive solutions, the framework allows developers to take prototypes to the next level by providing the capability of bringing the application maturity.
Read more...

6. Zend Framework
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 catalogers like StrikeIron and ProgrammableWeb.
Read more...

7. Akelos
The 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.
Read more...

8. Maintainable
The Maintainable PHP Framework was originally built only for our own projects, then released to open source at the request of our customers. Like any framework, it's certainly not appropriate for every application. It's designed primarily for use with small- to mid- sized applications.
Read more...

9. evoCore
evoCore is the framework at the heart of the b2evolution blogging application. It is freely available for anyone to use. It is dual licensed so you can choose to use it either under the GNU GPL or the Mozilla MPL license. (b2evo for example is using it under the GPL).
Read more...

10. Stratos
The Stratos Framework is an open-source, object-oriented web application framework that facilitates the rapid development of well-organized, secure, and maintainable PHP web applications. Stratos frees you from working on tedious, routine tasks, and allows you to focus on specific software requirements.
Read more...

11. Seagull
Seagull is a mature OOP framework for building web, command line and GUI applications. Licensed under BSD, the project allows PHP developers to easily integrate and manage code resources, and build complex applications quickly.
Read more...

12. Zoop
The Zoop Framework is inclusive, cooperating with and containing components integrated from some existing projects including Smarty, the Prototype JS Framework, and a number of Pear Modules.
Read more...

13. php.MVC
php.MVC implements the Model-View-Controller (MVC) design pattern, and encourages application design based on the Model 2 paradigm. This design model allows the Web page or other contents (View) to be mostly separated from the internal application code (Controller/Model), making it easier for designers and programmers to focus on their respective areas of expertise.
Read more...

14. AjaxAC
AjaxAC is an open-source framework written in PHP, used to develop/create/generate AJAX applications. The fundamental idea behind AJAX (Asynchronous JavaScript And XML) is to use the XMLHttpRequest object to change a web page state using background HTTP sub-requests without reloading the entire page. It is released under the terms of the Apache License v2.0.
Read More...

15. xAjax
xAjax is an open source PHP class library that allows to create quickly Ajax applications using HTML, CSS, JavaScript, and PHP.
Read more...

16. PHOCOA
PHOCOA (pronounced faux-ko) is PHP framework for developing web applications. PHOCOA's primary intent is to make web application development in PHP easier, faster, and higher-quality.
Read more...

17. Kohana
Kohana is a PHP 5 framework that uses the model view controller architectural pattern. It aims to be secure, lightweight, and easy to use.
Read more...

18. Limb
Limb is an OpenSource(LGPL) PHP framework mostly aimed for rapid web application prototyping and development. The current actively developed branch of framework is Limb3(there is also Limb2 but it's not maintained anymore).
Read more...

19. Solar
Solar is a PHP 5 framework for rapid application development. It is fully name-spaced and uses enterprise application design patterns, with built-in support for localization and configuration at all levels.
Read more...

20. BlueShoes
BlueShoes is a comprehensive application framework and content management system. It is written in the widely used web-scripting language PHP. BlueShoes offers excellent support for the popular MySQL database as well as support for Oracle and MSSQL.
Read more...

Tuesday, November 18, 2008

Useful guidelines to improve CSS coding and maintainability

Developing CSS code for websites with a complex layout structure can be an hard work for a web designer. But in this situation, an harder work is writing code in order to simplify the continuous maintainability process.

In this post I want to reply to all readers of this blog which in the past asked me some FAQ about this topic and illustrate some simple guidelines and tips which can help you to improve CSS coding and maintainability process following this simple rules: reduce code complexity and optimize your CSS structure.

Single or multiple CSS files?

Some developers use to separate CSS code in multiple files and import them into an external CSS file in this way:

@import "reset.css";
@import "layout.css";
@import "typography.css";
...

What is the better practice? Separate CSS code using multiple files or writing CSS code in a single file?

There is not a specific rule, but you have to do this choice each time, after an objective valuation about the real complexity of the layout structure. If layout is not so complex in order to justify multiple files, I suggest you to write all code in a single file. In fact, in this case, managing a single file is better than managing too many.

CSS table of content: it's really useful?

I often read some articles which suggest to add a table of content of the elements contained into the CSS file in order to keep an overview of the structure of your code useful to simplify the maintainability process. A CSS table of content is something like this:

I tried to add a table of content into a CSS file in different situation, sincerly with some doubt about its real utility for these two simple reasons:

1. If you have a simple CSS file you don't need to add a table of content to manage it. You can manage it without difficulties, without a table of content.

2. If you have a complex CSS file you could need one... but in this case the problem is you have to modify your table of content each time you make a change of the CSS structure. So, if your CSS structure change dramatically, you have to spend a lot of time for developing the new CSS code and updating the table of content. You work twice... Is an overview of the structure of your code really necessary ?

I think not. In general, a good approach to write CSS code is following the gerarchical order of the page's elements (#wrapper, #navigation, #maincontent, #sidebar, #footer...), so you know "approximately" the point where this element is placed on your file.

In any case, if you prefer to add a table of content, I suggest you don't enumerate CSS elements how I did in this example:

If you change the order of one or more element you have to change every time the numbering of the other elements!

Use "sections" for organizing logically similar attributes

This is a simple tip I find very useful: create “sections” in order to separate logically similar CSS attributes and use alphabetical order for listing attributes into these section:

In this way will be simpler to manage each single section with the related attributes.

Separate CSS attribute name from attribute values using tab space

Another tip to improve the readability of your CSS code is: use a tab space in order to divide the attribute name from its value:

In this way your code looks like a tabular data sheet and will be simpler to read and manage it.

If you have other useful suggests add a comment!

Sync Windows Mobile devices with your Mac

It was long time that I was looking for a good tool for synchronizing my Samsung device (Windows Mobile 6 based) with my iMac. Finally I found SyncMate, a great application which helps you to sync your Mac with your Windows Mobile devices for free.

SyncMate is a free useful tool for synchronizing Windows Mobile devices with you Mac. Free Edition provides basic sync features for applications like Address Book, iCal, and the possibility to read SMS directly from your Mac. This is an screenshot of this application:

You can also buy an Expert Version of SyncMate with advanced sync features for iTunes, Internet Explorer, iPhoto, Mail, Notes...

I suggest you to try it. It's absoultely useful.

Download SyncMate