Thursday, 20 August 2009

Beautiful sets of environment and nature icons

Are you looking for some interesting new icons for your next web project related to environment and nature? Take a look at this collection of some awesome sets of professional icons. A large part of these icons are not totally free but their price is not so expensive respect to their high quality and affordable for everyone.


Gaia 08-09
Climate change and the conservation of our planet is one of the most impartant issues facing us today. Inspired by Live:Earth, a group of Customize.org members tried to find a way of contributing their own part with this beautiful icon set. You can find the new icon set Gaia 09 here.



Environment - Set 72 (download)
This is definitively one of my preferred icon set available on myVectorStore.



Green Icons (download)
A nice set of icons representing the human responsibility to help protect our environment.



Satin Environment and Nature Icons (download)


Environment icons (download)
Another beautiful green icon set.


Tulliana 2 (download)
These icons designed by Umut Pulat are not strictly related to the environment and nature but colors and some characteristic of their design are particularly suitable for this topic.



Environment Icons by Alexey Potapov (download)
An elegant and essential icon set designed by Alexey Potapov.



Environment set by niclienos (download)
This set of icons designed by niclienos is another of my preferred set.



Environmental & Green Energy Icons Set (download)
Environmental & Green Energy Icons Set on white background for Adobe Illustrator.



Eco Design (download)

EPA Icons (download)
A set of rounded icons by the United States Environmental Protection Agency.



WP WooThemes Ultimate Icon Set (download)
This is a nice set with some icons nautre-inspired.

Read More

Starting a freelance career: revenues estimating and time management

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!

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

Read More

Wednesday, 19 August 2009

Fresh resources for web developers you can't miss

This week I found some interesting fresh resources for web developers I want share with you. This list includes an awesome MooTools slider, a free on-line service for cross-browser compatibility testing, a jquery plug-in to implement a notification system (for example Facebook-like) and other interesting links. Take a look and add a comment to suggest other resources.


SlideItMoo 1.1
SlideItMoo is a great slider for MooTools that supports: continuous navigation, elements selection based on CSS selector, direction control (-1: enter from left; 1: enter from right), mouse wheel navigation, effect duration as parameter (when autoslide is enabled, the duration between slides is the sum of the effect duration and the slide duration )


Beautiful jQuery Slider
This tutorial explains how to develop a beautiful jQuery slider. The result is really awesome.

Adobe BrowserLab
Adobe BrowserLab is the perfect on-line solution for cross-browser compatibility testing. It supports, Internet Explorer 6-7, Firefox 2-3 on Windows XP and OS X. It's very useful and fast to rendering pages.


Password Strength
Password Strength is a jQuery plug-in that tries to calculate how many possibilities the hacker needs to try to guess your password.


Growl for jQuery
Growl (for the net & jQuery) is a simple notification system inspired by Growl for the Mac OS X. You can use it to implement a notification system Facebook like.

Mootools Link Tweaker Class
Link Tweaker is a tiny Mootools class to add distinct styles (of your choosing) to external links and/or various types of file download links.

If you want to suggest a new resource please leave a comment, thanks!

Related Post
- Interesting Code Highlighters for blogs and websites
- 10 Useful resources for web designers and developers
- Practical solutions to hyphenate text on web pages
- 10 Useful code snippets for web developers
- Twitter API: How to create your own Monitter with PHP and jQuery
- Ultra versatile slider for websites
- Simple images slider to create Flickr-like slideshows

Read More

Tuesday, 18 August 2009

How to implement a mobile version of your blog in three simple steps

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:

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

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

Related Posts
- The mobile version of Woork is on-line with Mobify.me

Read More

Monday, 17 August 2009

Say hello to the new template: Cordite

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!

Read More

Sunday, 16 August 2009

The mobile version of Woork is on-line with Mobify.me

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.



If you are looking for an awesome free service on-line to create the mobile version of your website or blog quickly and for free you can't absolutely miss this service (http://mobify.me/).

Related Posts

Read More

Saturday, 15 August 2009

Practical solutions to hyphenate text on web pages

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 (&shy;). 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:

<script src="hyphenator.js" type="text/javascript"></script>

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

<script type="text/javascript">
Hyphenator.run();
</script>

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

<p class="hyphenate text" lang="en">
Your text here...
</p>

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!

Read More