Haseebzone template: November 2008

Sunday, 23 November 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!

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..

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...

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

CSS coding: semantic approach in naming convention

Naming convention in CSS coding is an "hot" discussion topic. In this post I want to illustrate some suggests and guidelines to use a semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout.

I also added a list of some useful articles about naming convention and a list of CSS frameworks which can help you to develop CSS code quickly and easier.

Semantic vs structural approach in naming classes

In general, a semantic approach defines classes names considering the "meaning" a certain element has on your page, independently from its "position" or specific property (structural approach). Some examples of a structural approach are: left-bar, red-text, small-title...

Take a look at the following example:

...and image now to change the position of the elements on your page. If you used a structural approach (1) you have to change all classes names because sections, in the new configuration (3), are inverted: right-bar is now "left-bar", and left-content is "right-content". Using a semantic approach you don't have this problem (4):

In other words using a semantic approach, you can think to modify your site's layout only redefining some properties of CSS elements without changing consequently classes names.

Some guidelines...

Before to start, I want to suggest two simple guidelines for developing a better CSS code:

1. Use lowercase characters to define your class and use "-" or uppercase letters to separate multiple-words classes (ex. "main-content", or "mainContent).

2. Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements (h1, h2, p, ul, li, blockquote,...). For example, don't use this approach:

</div>

...but use this:

</div>

Example of semantic approach using a three columns layout

Take a look at this simplyfied example which illustrates how to use a semantic approach to design a classic three columns layout:

Using a semantic approach CSS code could be something like this:

#container{...}
/*---- Top section ----*/

#header{...}
#navbar{...}

/*---- Main ----*/
#menu{...}
#main{...}
#sidebar{...}

/*---- Footer ----*/
#footer{...}

1. Container
"#container" is the section which "wrap" all elements of your page in a specific position within the browser's window. For this section you can also use these names: "wrapper", "wrap", "page".

2. Header
"#header" is the website's top section. In general, it includes site's logo and other elements. For this section you can also use these names: "top", "logo", "page-header" (or pageHeader).

3. Navbar
"#navbar" identifies the horizontal navigation bar, a classic elements for every web site. For this section you can also use these names: "nav", "navigation", "nav-wrapper".

4. Menu
"#menu" section contains general links and menu. For this section you can also use this names: "sub-nav ", "links".

5. Main
"#main" is the site's main section; if you have a blog it's the section which contains your posts. For this section you can also use these names: "content", "main-content" (or "mainContent"),

6. Sidebar
"#sidebar" section can contain secondary content, for example recent entries, some info about the site, ads elements... For this section you can also use these names: "sub-nav", "side-panel", "secondary-content".

7. Footer
"#footer" contains additional information about the website. For this section you can also use the name: "copyright".

If you have some suggest about other "semantic" names about these elements, please add a comment!

CSS naming convention articles

If you want to deepen this topic, take a look at the following articles:

1. More on developing naming conventions, Microformats and HTML5
2. Standardizing CSS class and id names
3. User interfaces and CSS Naming convention
4. Structural naming
5. Smart CSS Ain’t Always Sexy CSS
6. Semantic coding
7. Semantic naming conventions for HTML and CSS
8. What's in a name (pt1)
9. What's in a name (pt2)
10. Most popular naming conventions
11. Semantic and Structural aspects of HTML

CSS Framework

1. Blueprint CSS
2. 960 Grid System
3. Yahoo! UI Grids
4. Content with Style CSS Framework
5. Boilerplate
6. Typogridphy
7. Schema
8. BlueTrip
9. Elastic
10. Logic CSS

Ice: the new Blogger template for Woork

Hello guys, today I released a new template for Woork: "Ice". What do you think about the new layout? Let me know your opinion and send me some suggests to improve it.

I'm working to release xml code of this template for all Blogger users for free... I hope to complete this work asap. For all people which wrote to me in these weeks... I was very busy and it has been almost impossible add new contents on this site. I really appreciate every day your interest about me and my blog.

Thanks to everyone,

Antonio.

Haseebzone template

Pages