Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Thursday, August 20, 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.

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.

Tuesday, August 18, 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

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

Monday, July 13, 2009

Freelance Web Designers List

I often receive several requests from my readers that ask to me to collaborate to their web projects but because I'm totally busy with my "real" work, this blog and the book I'm writing, I can't accept their offers. Then, every time, they ask to me to suggest them a friend of mine that can work on their project. So I think could be useful to start on this blog a list of web designers interested to collaborate in freelance projects.

If you are a freelance web designer, please leave a comment with your main information (name, short introduction about you, link to your website/portfolio). Please NO SPAM. Thanks!

People I suggest you

CreamScope
Creamscoop is a small company focused on web developing, formed by two guys who started getting into web technologies since a very young age.

Daniel Howells
I'm a freelance web designer and developer, currently working as the digital director at YCN based in Shoreditch, London. Blog

Grace Smith
A Freelance Web and Graphic Designer in love with web standards and social media. An unashamed Apple Fangirl. Postscript 5 | Blog | Gallery project

Osvaldas Valutis
My name is Osvaldas Valutis. I develop and design functional, creative, details and usability oriented websites as well as web applications by exposing the simplicity and the latest web standards as the main principles. Portfolio

Steve Mullen
I am a web designer and front end developer from Tulsa, Oklahoma. I enjoy making the web a better looking place. Personal Portfolio

Freelance Web Designers List

I often receive several requests from my readers that ask to me to collaborate to their web projects but because I'm totally busy with my "real" work, this blog and the book I'm writing, I can't accept their offers. Then, every time, they ask to me to suggest them a friend of mine that can work on their project. So I think could be useful to start on this blog a list of web designers interested to collaborate in freelance projects.

If you are a freelance web designer, please leave a comment with your main information (name, short introduction about you, link to your website/portfolio). Please NO SPAM. Thanks!

People I suggest you

CreamScope
Creamscoop is a small company focused on web developing, formed by two guys who started getting into web technologies since a very young age.

Daniel Howells
I'm a freelance web designer and developer, currently working as the digital director at YCN based in Shoreditch, London. Blog

Grace Smith
A Freelance Web and Graphic Designer in love with web standards and social media. An unashamed Apple Fangirl. Postscript 5 | Blog | Gallery project

Osvaldas Valutis
My name is Osvaldas Valutis. I develop and design functional, creative, details and usability oriented websites as well as web applications by exposing the simplicity and the latest web standards as the main principles. Portfolio

Steve Mullen
I am a web designer and front end developer from Tulsa, Oklahoma. I enjoy making the web a better looking place. Personal Portfolio

Thursday, February 5, 2009

Simple process to estimate times and costs in a web project

After my previous article about a structured process to develop a web application I received some requests from my readers which asked to me to dedicate a post about how to estimate times and costs of a web project.

In this articles I want to illustrate a simplified top-down process to estimate times and costs of a web process using a simple spreadsheet (in this example I used Google Spreadsheets but if you prefer you can use Microsoft Excel, OpenOffice Spreadsheet or a free online service such as Zoho or EditGrid).


Process main phases
In this simple top-down estimate process you can identify five main phases:

1. Define Activities
2. Define Task
3. Define Human Resources
4. Assign Human Resources to Tasks
5. Estimate times and costs

The process start with a general definition of macro-activities and with a detailed definition of tasks, human resources used, times and costs related to each task.


1. Define Activities
In this first phase you have to define the main activities which compose your project:



For example, in a generic web project you can identify the following main activities:

1. Requirements definition
2. Design
3. Implementation
4. Test
5. Release

In my spreadsheet I created a new sheet called Activityes and I added the following two columns:

A: WBS (work breakdown structure), the ID of each activity/task;
B: Activity name.

Next step is to detail each activity with a certain number of specific tasks.


2. Define Tasks
Each activity is composed from some tasks. Each task is a smaller piece of work which composes a main activity:



In the spreadsheet you can add new tasks adding new rows below related main activity. I suggest you to use a different format to highlight tasks from activities how I used in the following example:

1. Requirements definition
1.1 Define application scope
1.2 Define technical requirements

2. Design
2.1 Application Map
2.2 Database Entity relationship model
...

3. Implementation
3.1 SQL code
3.2 HTML code
3.3 CSS code
...


3. Define Human Resources
Next step is defining human resources in terms of category, seniority and hourly cost:



Each category has a specific hourly cost related to specific seniority. You can organize these information using a simple category/seniority matrix. For example if you have to estimate a big/medium size project you can identify the following categories:

- Analyst
- Programmer
- Project manager
- ...

and the following seniorities:

- Junior
- Senior
- ...

Now, define hourly cost for each category/seniority combination (in a more complex project you can also define a standard rate and an overtime rate for each combination). In the spreadsheet you can create the table above in a new sheet called Resources in the same spreadsheet. At this point you have two sheets:



A first sheet with activities and a second sheet with resources. In this way when you assign resources to tasks you can link the cost of a specific resource with a reference formula (=). This is a good practice because if you have to change the cost related to a specific combination category/seniority, you can do it only once in the sheet "Resources" and automatically all changes will be reported in all instances (task) which use that combination in the sheet "Activities"


4. Assign Human Resources to Tasks
Next step: assigning one or more resources to each task estimating the effort which a task requires. This is a very delicate activity because you have to calibrate the right combination between category and seniority of resources you want to use in your project in order to estimate correctly project times and costs.

In the spreadsheet, in the sheet "Activities" create the following three columns:

1. Num (number of resources assigned to a task)
2. Category
3. Seniority

This is the result:



You can add different resources to each task (different category or different seniority) simply adding a row below the task name (for example take a look at "Define application scope" where I added 1 analyst junior in the first row and 1 analyst senior in a new row below the task name).


5. Estimate Times and Costs
Now, for each resource, estimate the daily effort (Hours/day column), number of days (Days colum), get cost related to category/seniority combination from the sheet "Resources" using a reference formula (Hourly Cost column), and calculate Total costs:



For each task (row) Total Cost is equal to:

Total Cost = Hours/day * Hourly Cost * Days

Take a mind some task could have specific costs which are indipendent from the number of resources you assign to that task. You can add this costs adding a new column to the left of the column Total Cost called "Additional Costs".

In this case Total Cost will be equal to:

Total Cost = (Hours/day * Hourly Cost * Days) + Additional Cost

That's all. Take a look at the spreadsheet or copy it in your Google Documents account to reuse it.

Take also a look at these posts:

- Structured process to develop a web application
- Google Spreadsheets Gantt Chart (Microsoft Project-like)
- Google Spreadsheets: formulas tutorial
- Google Spreadsheets Tips: Add custom charts
- Project Management: Excel Gantt Chart Template

I hope you'll find this post useful. If you have some suggestions about this process or if you want to suggest some interesting link related to this topic please add a comment, thanks!