Hello everyone! I'm very, very excited... this evening I released the new template of woork called Cordite. How you can see, the structure of the blog is the same of the previous version (three columns) but I changed almost totally the design by following all suggestions I received from you in the past months. In particular I dedicate a lot of time to improve the readability of the pages. I changed the font (from Lucida to Arial), I added a section with some clean icons reserved to Twitter, my RSS feeds and finally I added a decent footer! I hope you'll like the final result (and remember... this is Blogger not Wordpress!).

I also want to anticipate some news that will come in the next months. Actually I'm working to a new section dedicated to podcasts and I'm going to launch a network of websites called shweps... subscribe to my RSS feed to stay updated!

And now it's your time... what do you thing about the new template? Leave your comments, thanks!

Hello everyone, some interesting news from Woork. I just released the mobile version of my blog. Now you can read this blog more easily using your favorite mobile device (you'll be redirected to the mobile version at this link: http://woork.mobify.me/)
To implement the mobile version of Woork I used a great free service called MOBIFY that provides websites with seamless, integrated mobile views. It lets publishers quickly monetize mobile users and gives web designers a powerful mobile toolkit. MOBIFY is compatible with thousands of devices, integrates with most web publishing platforms and is free to use.

In this post I want to suggest you three simple and useful ways to hyphenate text on your web pages using JavaScript or PHP. If you take a look at W3.org documentation you can find this explanation about hyphenation:

"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."

To hyphenate text I found the following practical solutions:

Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (­). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:


The usage of this script is really simple. You have to include the script into your pages in the <head> tag:


...then you have to invoke the script adding this code after the previous code:


...and use this HTML code to active hyphenation:


Take a look at this example for a live preview.

You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).


phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.


Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.



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

In the last weeks I frequently received a question about how to use CSS3 border-radius property to draw HTML elements with rounded corners in Internet Explorer. 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.

So to draw rounded corners in IE you have to use some trick, for example using CSS classes with a background image (take a look at this post).


The simpler and quick solution I know to draw rounded corners in every browser is to use a mix of CSS3 and JavaScript. CurvyCorners is a free JavaScript library for creating gorgeous rounded corners for HTML elements. The final result looks like this:



The big advantage of this script is that lets render rounded borders in Safari, Chrome and Mozilla (which support rounded borders via -webkit-border-radius and -moz-border-radius) natively with CSS3 property and in IE and Opera with JavaScript.

The only thing you have to do is to include curvycorners.js into the <head> tag of your page:


Then you have to write a CSS class like this:


At this point add the following code into the <head> of your page, after the previous CSS code:



tl, tr, bl, br are: top-left, top-right, bottom-left, bottom-right borders.

If you have different CSS classes (ex. roundedCorners, roundedCorners_1, roundedCorners_2) you can apply them changing the previous code in this way:



Now if you want to apply rounded corners to a DIV element use this code:


This is the result in every browser:


I think this is actually the simpler and quick solution to implement rounded corners in every browser. Ok... and what's if JavaScript is disabled? Sincerly I think this case is not so frequent... but if you don't want to use JavaScript, the most realiable solution is to use CSS classes with background images. Any suggestion about this topic? Please leave a comment, thanks!

Download the source code here:

In the past weeks I switched from Blogger comments system to Disqus. I like this service that provides (for free) a powerful and versatile comments platform, actually the best available for Blogger. In the past days some readers of my blog, that decided to pass to Disqus, wrote me saying to have encounter several problems during the integration process with their Blogger template.
In particular, comments didn't appear in their pages.
I had the same problem when I added Disqus to my template. I think the problem is due to the use of highly customized Blogger templates (for example like my template). In this case, if you encounter this problem, try to install Disqus choosing Generic code (not Blogger!) from the menu you find in Admin > Tools:



Follow all related instructions... the only thing you have to do is to add into your Blogger template some lines of code like these:


Now save all changes on your template and try to if it's all ok!

Today I want to suggest you this new website called Slicejobs made to assist designers in chosing the right slicing freelancer and company to turn photoshop-design into html/css template.
Freelancers and companies that offer slicing services can sign up for free and define their own specific rates. This way, when a visitor shows up, looking for slicing services, their information and calculated rates will be displayed on the fly.


If you are looking for the services of a slicing artist or agency for your website’s needs all you have to do is visit the site and over a few weeks, you can easily compare the services of numerous slicing providers based on your personal needs.

If you are a freelance slicer, web designer, web coder or agency owner, all you have to do is register at the site so you can showcase your services and designs to attract more clients who are looking for your services. This is one fast and easy way to keep your hands filled with projects at no cost (only a few minutes of your time to set up an account).

Slicejobs will officially launch at the first of September.

Today I want to present you a selection of some useful resources for web designers and developers. This list contains in particular some awesome fonts, a simple PHP Content Management System, a JavaScript Cart, a PHP application for job boards, a weekly calendar (Google Calendar like, made with jQuery), an open source knowledge base application and interesting links with jQuery and MooTools plugins.


1. 52 Really High Quality Free Fonts For Modern And Cool Design
This post contains a great collection of awesome fonts



2. Beautiful New Free Fonts For Your Designs
In this collection Smashing Magazine presents high-quality fonts: Calluna, Andika Basic, Mentone, Sovereign Regular, Medio, Tiresias Infopoint and many other high-quality free fonts.

3. GetSimple CMS
GetSimple is a powerful and very simple CMS that has everything your client needs, and nothing a CMS doesn't.

4. SimpleCart(js)
No databases, no programming, no headaches. SimpleCart(js) is a simple javascript shopping cart in under 20kb that you can setup in minutes. It's lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.

5. jQuery Week Calendar
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

6. JoobsBox
JoobsBox is the most flexible software for job boards, allowing community expand it to unlimited needs. Plugins and Themes allows you to extend JoobsBox to do almost anything with your job board.

7. jCryption
In short words jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form.

8. 68Kb Knowledge Base Software
68KB is an open source PHP MySQL driven knowledge base script. Built with you in mind to make it easy to configure and setup.

9. Moowheel
The purpose Moowheel is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.

10. SlideItMoo
SlideItMoo is a simple MooTools plugin to display thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right.