When discussing code hosting services with my colleagues or friends I usually refer to Assembla as the giant of all the Code Hosting Services. You want to know why?
Because I have been using Assembla for my private projects for a while and never had a single complaint. Because you get SVN hosting, GIT hosting, Mercurial Hosting, ticketing system, issue/bug tracking system, wikis, message boards, file managers, tasks managers and project management in a single platform. Because you may get all of this for free for public projects or one of these for free if you prefer to have your project privately hosted. Because 180,000 Developers and Project Managers can’t be wrong!

I have to admit one thing – Assembla commercial versions are actually a bit expensive. There are several paid plans, all of them offering a 30 day free trial. But I started this post to write a little bit about the free plans and that is what I am going to do. Assembla’s free plans offer you more than any other code hosting service ever did. And Assembla is so much more than just a code hosting platform!

First of all it is important to mention that a single user account may have several spaces. This means that you can have several public or private spaces and they can all use the same tools or you may choose to use different tools in different spaces.

What kind of spaces can you create for free? What are the free plans?

Assembla has several free plans. In every plan you can count on 2 GB of free web space, unlimited users, email alerts of events and an activity stream. You can request and download backups of your spaces, you can control who does what in each project and you can change the appearance of the project’s web interface.

Now that you know what are the free plans’ common features, I bet you want to know what are the specific features of every plan.

Free Plans on Assembla

The free plans on Assembla for public projects are:

• Subversion Hosting with Integrated Tickets (Ideal for agile distributed teams) – is a simple but powerful system for keeping track of tasks, features, and bugs. This free plan comes with 7 pre-installed tools: Messages, Files, Source/SVN, Wiki, StandUp, Milestones and Tickets.
• Issue and Bug Tracking for Agile Teams (A great ticketing, bug tracking and issue management tool for any project) – using this plan you will transform your team, replace meetings, memos and phone calls with a hosted system that organizes all your bugs, issues, trouble tickets and tasks. This free plan comes with 4 pre-installed tools: StandUp, Tickets, Milestones and Wiki.
• Team Collaboration (Helps organize your team even if you are not building software) – you can track project activity, share files and documents, collaborate using a project wiki, and video chat with your team. This free plan comes with 5 pre-installed tools: Files, Messages, Wiki, Chat and StandUp.
• Real-time chat with video (Meet with your team now, and at any time) – track project activity, send instant messages, share files, have face-to-face video conversations with your team to talk about project tasks and deadlines, all in real-time. This free plan comes with 6 pre-installed tools: StandUp, Messages, Dashboard, Wiki, Chat and Files.
• Git Hosting with Integrated Tickets (Our preferred space for GIT users that also need great ticketing) – this full-featured package includes a Git repository, with the Assembla integrated ticket system, and other collaboration tools. This free plan comes with 7 pre-installed tools: Messages, Wiki, Tickets, Milestones, Source/Git, Files and StandUp.
• Trac and Subversion Hosting (If you’re familiar with Trac, this space configuration is perfect for you) – this version of trac is enhanced with email alerts that go beyond the built-in ticket notifications. They added HTML formats, hourly and daily alerts, and SVN commit notifications. Trac includes a ticketing system, a wiki, milestones (for agile iterations or releases) and a subversion code and changeset browser.
• Free Subversion Repository – Commercial Quality (A commercial quality, FREE Subversion repository without any other tools) – a free Subversion repository ideal for consultants and small agile-development teams that want a safe, reliable version control solution.
• Free Git Repository – Commercial Quality (A commercial quality, FREE GIT repository without any other tools) – a free GIT repository ideal for consultants and small agile-development teams that want a safe, reliable version control solution.
• Free Standup tool (daily StandUp report is the fastest and simplest way to manage a distributed team) – stand up meetings were originally derived from the Agile approach to developing software, but can be used by a team working on any kind of project.

NOTE: These are featured configurations for public spaces. You can create your own configuration using some or all of these tools.

There are also 3 free plans for personal private projects.

• Free Subversion Hosting (Unlimited Repositories, Unlimited Users, 2 Gigabytes Storage) – this free SVN hosting provides you with a commercial-quality subversion repository for you to host your code securely, and reliably in a good-looking package. All the free svn repositories allow both public and private permissions so you can share your code with the world, or keep it private only sharing with fellow developers.
• Free Git Hosting (Unlimited Repositories, Unlimited Users, 2 Gigabytes Storage) – this free GIT hosting provides you with a commercial-quality subversion repository for you to host your code securely, and reliably in a good-looking package. All the free svn repositories allow both public and private permissions so you can share your code with the world, or keep it private only sharing with fellow developers.
• Free StandUp/Scrum (The easiest way to manage a distributed team) – Invite Your Team Members. When your team members start their work, ask them to file a StandUp report with 3 simple fields: What You’ve Done, Will Do, and Roadblocks to finishing their work. At-a-glance you can see what everyone is doing and eliminate roadblocks before they slow you down.

Other Code Hosting Services

Other free public and private code hosting services:

• Bitbucket (Mercurial)
• ProjectLocker (Subversion and Git)
• Unfuddle (Subversion and Git)
• XP-Dev.com (Subversion, Git and Mercurial)

Other free public code hosting services:

• CodePlex (Subversion and Mercurial)
• Google Code (Subversion and Mercurial)
• Launchpad (Bazaar)
• SourceForge (Subversion, Git, Mercurial, Bazaar and CVS)

sNews CMS is a very free, very simple and very funny to use CMS. It is written in PHP and uses a MySQL database for the data. I tried sNews about a year ago to build a small personal website and got very pleased with its usability and lightweight.

sNews is made of only 6 files: the core file (snews.php), the template file (index.php), the CSS file (style.css), a JavaScript file (admin.js), a language file (EN.php) and a .htaccess. There are several languages, contributed by members of the sNews community, available for you to download.

Originally it comes with a very clean and fast loading template but you can also download templates developed by the already big sNews community. If you are familiar with HTML/CSS you can write your own templates. It is very easy to adapt them to a sNews template file.

It is also possible to install add-ons that extend the content management system’s functionality.

sNews has a very simple administration area that allows users to quickly get acquainted with it. It has a very simple WYSIWYG editor, so it expects you to have some HTML knowledge in order to write your posts or static web pages.

Writing an article or static webpage can be a title and article content creation task. But sNews allows you to configure a lot more in a single article than just the Title and Content. There are a few optional settings that you may change as you like.

As for the features, it supports categories and sub-categories, articles and static web pages. It also has a commenting system to allow your visitors to comment on your posts. Is has a very simple to use file manager that allows you to upload all kinds of files to your server and use them in your website. Besides you can count on an archive section, a contact form, an automatic sitemap generator and RSS feeds.

Originally it comes with some very useful modules: a category list, a search form, a comments list and a latest posts list. But you can download and install other modules made by the community.

As a standards compliant platform, SEF (Search Engine Friendly) URLs were not forgotten. sNews will greatly assist in your site obtaining a good SEO (Search Engine Optimization) ranking.

• sNews Homepage
• Download sNews
• sNews Modules, Add-ons and Language Packs

This is my third post on the ‘CSS 3 Rules’ series and it is once again on how to style borders using CSS 3. This rule is also know as ’rounded corners’ because it allows us to specify a radius value for the border’s corners.
By now it is one of the most used CSS 3 rules since it is interpreted by all decent browsers. It works perfectly using Mozilla Firefox, Google Chrome, Safari and Opera.

Compatibility Table

4	5	3	3.6	10	10.5	4	7	8	9

Usage

Here is how to do it when we need all the corners to have the same value for the radius:

1
2
3
4
5
6

div {
  border: 1px solid #ccc;
  border-radius: 10px; /* for all recent (and decent) browsers */
  -moz-border-radius: 10px; /* for older versions of Mozilla browsers */
  -webkit-border-radius: 10px; /* for older versions of Safari browsers */
}

Example

This is how the code above looks like:

But one great thing about this rule is that it is possible to define a different radius for any of the four corners. This means that you can have a rectangle (or a square) with 4 different corners. Here goes an example:

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div {
  border: 3px solid #ccc;
  border-top-left-radius: 60px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0px;
  -moz-border-radius-topleft: 60px;
  -moz-border-radius-topright: 40px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-top-left-radius: 60px;
  -webkit-border-top-right-radius: 40px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 0px;
}

Example

This is how the code above looks like:

But this is not all you can do with the CSS3 Border Radius rule. You can also specify different values in a single corner. This means that you can have 8 different angles – 2 for every corner.

You do it like this for all the corners:

1
2
3
4
5

div {
  border-radius: [horizontal value] [vertical value];
  -moz-border-radius: [horizontal value] [vertical value];
  -webkit-border-radius: [horizontal value] [vertical value];
}

Or, like this for a specific corner:

1
2
3
4
5

div {
  border-top-left-radius: [horizontal value] [vertical value];
  -moz-border-radius-topleft: [horizontal value] [vertical value];
  -webkit-border-top-left-radius: [horizontal value] [vertical value];
}

Usage

This is how it looks for all the corners:

1
2
3
4
5
6

div {
  border: 2px solid #ccc;
  border-radius: 80px 40px;
  -moz-border-radius: 80px 40px;
  -webkit-border-radius: 80px 40px;
}

Example

This is how the code above looks like:

Don’t forget to check out these other ‘CSS 3 Rules’ posts:

1. The CSS 3 ‘Border Colors’ Rule
2. The CSS 3 ‘Border Image’ Rule
3. The CSS 3 ‘Border Radius’ Rule

In this tutorial I am going to explain how you can develop your own CSS template using HTML and CSS. This template will be a single column template with a header, a top menu, the content section and a footer.

I expect that after this tutorial you will have enough background to be able to write your own customized template.

Part 1 of this tutorial will briefly deal with the software you will need, the developing environment and the HTML code.

1. What will you need?

Before we start it is important to choose the right tools for the job. Fortunately, to write a HTML/CSS template we don’t need lots of tools. A text editor and an Internet browser is all we need.

A few months ago I wrote a post about some great free NotePad alternatives. If you want to have line numbers and syntax highlighting (NotePad does not), you should be more than fine with one of those. I personally use Notepad++ for several years. It’s light, fast, free for both personal and commercial use, and does everything I need.

2. Preparing the Environment

Now that you have your text editor in place, you should create a folder for your project. Create it in an accessible place like your desktop or wherever you like. For the purpose of this tutorial I am going to call it “my-template”

Open your text editor and create a new file. Save it in that folder you just created and name it with the “.html” extension. You can call it anything you like but you shouldn’t have spaces and it needs to end with the “.html” extension – the “.txt” extension will not be properly interpreted by the Web browser. For the purpose of this tutorial I am going to call it “index.html”.

3. The HTML

Now that we have all we need, it is time to start. Lets open the ‘index.html file’ in the text editor.

We are now going to start declaring the doctype (for the browser to know what language it has to interpret) and by separating our HTML code in two main sections – the “head” and the “body”.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8" />
  <title>One Column Template</title>
</head>
 
<body>
 
</body>
 
</html>

Explanation

In the first two lines of code we told the browser that we are writing our template using HTML.

I then opened the “head” of my document where I wrote two lines of code – the first to specify the encoding I am going to use and the second to specify the title of my webpage. This title will show up on your browser’s tab description when this page is loaded.

After this I opened and closed my template’s “body” tags. It’s inside those tags that all the action is going to take place.

Now it is time to create our template’s ‘blocks’ or sections. Like I mentioned above, we are going to create four sections and I am going to use the HTML “DIV” tag to do it.

For the sake of simplicity, in the next code snippet I am only going to show the “body” tags and what will be inside them. I am not going to include the doctype declaration and the “head” tags this time. But bear in mind that you need to have them in your code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<body>
  <div id="mainWrapper">
 
    <div id="header">
      <h1>One Column Template</h1>
    </div>
 
    <div id="navigation">
 
    </div>
 
    <div id="content">
 
    </div>
 
    <div id="footer">
      Copyright &copy; One Column Template 2010. All rights reserved.
    </div>
 
  </div>
</body>

Explanation

I’ve just created five DIVs instead of the four I mentioned before. It was not a mistake. I used a “main DIV” to hold our four sections. Moreover, I gave them all an ID so we can style them independently when we move on to the CSS code.

I created a DIV using the ‘mainWrapper’ ID and I put all the other DIVs inside this one. I wrote a level 1 heading (h1) inside our Header section (the DIV using the Header ID) and I wrote a line for the website’s footer with a sample copyright message.

If you open your index.html file using your favorite Internet browser you will be already able to see what we made so far. Just drag the file to your browser to view it.

Now it is time to put some content inside the “navigation” and “content” DIVs.

In the next code snippet, I am going to use an unordered list to hold my navigation/menu items.

1
2
3
4
5
6
7

<div id="navigation">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Contact Me</a></li>
  </ul>
</div>

Explanation

Above I created a list of three menu items with their respective anchors or links. I used the symbol “#” instead of a real hyperlink because, for now, I don’t want them to work. So, as you can see, I created three sample menu items – Home, About Me, and Contact Me – just as an example.

In the next code snippet, I am going to put some sample content in the “content DIV”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<div id="content">
  <h2>One Column Template - Home</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at leo odio.
  Nulla facilisi. In fringilla imperdiet ullamcorper. Curabitur id lorem elit, eu
  porttitor ligula. Nam tristique vehicula placerat. Etiam consectetur, leo sit
  amet tristique ultrices, neque justo suscipit eros, et consequat diam dolor eu
  tellus.</p>
  <p>Nullam varius luctus egestas. Phasellus feugiat varius eros, sit amet tempus
  nibh viverra at. Morbi tempor mi a nulla imperdiet auctor. Curabitur egestas
  euismod augue nec hendrerit. Cras congue enim non magna consectetur vel
  ultricies urna congue. Vivamus ipsum tellus, semper quis adipiscing non, dictum
  sodales metus.</p>
 
  <h3>An Unordered List</h3>
  <p>Cras et orci vitae mauris sagittis feugiat eget non metus. Cras eget odio et
  risus accumsan vehicula.</p>
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Pellentesque ut sapien eget nisl.</li>
    <li>Donec euismod tellus nec nisi cursus.</li>
    <li>Quisque dapibus sapien vitae.</li>
  </ul>
 
  <h3>An Ordered List</h3>
  <p>Cras et orci vitae mauris sagittis feugiat eget non metus. Cras eget odio et
  risus accumsan vehicula.</p>
  <ol>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Pellentesque ut sapien eget nisl.</li>
    <li>Donec euismod tellus nec nisi cursus.</li>
    <li>Quisque dapibus sapien vitae.</li>
  </ol>
 
  <h3>A Blockquote</h3>
  <p>Nullam varius luctus egestas. Phasellus feugiat varius eros, sit amet tempus
  nibh viverra at.</p>
  <blockquote>Nullam varius luctus egestas. Phasellus feugiat varius eros, sit amet
  tempus nibh viverra at. Morbi tempor mi a nulla imperdiet auctor.<br />Curabitur
  egestas euismod augue nec hendrerit. Cras congue enim non magna consectetur vel
  ultricies urna congue. Vivamus ipsum tellus, semper quis adipiscing non, dictum
  sodales metus.</blockquote>
</div>

Explanation

In this block of code I created some sample content to cover some of the most commonly used HTML tags. By order of appearance:

• H2 – This is a level 2 heading/title. It is a good practice to use level 1 headings on the website’s title only (the one in the header) and H2s for each web page title.
• P – The ‘p’ tag represents paragraphs. Each paragraph should be inside ‘p’ tags. If you need just a line break, you must use a ‘<br />’ instead.
• H3 – This is a 3rd level heading or sub-title.
• UL and LI – The tag ‘ul’ creates an unordered list. The tags ‘li’ must always be inside the ‘ul’ because they are the actual list items.
• OL and LI – The tag ‘ol’ creates an ordered list. The tags ‘li’, just like above, must always be inside the ‘ol’ because they are the actual list items.
• Blockquote – A blockquote is exactly that, a block where you insert quotes. You can use it for other purposes but that’s not a good practice. Inside the blockquote I also have the tag ‘<br />’ to show you how to create a line break.

As a good usability practice, I always create an internal anchor to allow my users to get back to the top of the page quickly, without having to use the browser’s scroll bars. I do this just after the opening ‘body’ tag, like this:

1
2
3
4

<body>
  <a id="top"></a>
  <div id="mainWrapper">
  ...

Now that I created this anchor, I am going to call it in the footer of my webpage. Every time someone reaches the footer, they will be able to get back to the top with a mouse click. I am also going to add a link to the website’s homepage.

1
2
3
4

<div id="footer">
  Copyright &copy; One Column Template 2010. All rights reserved.<br />
  <a href="index.html">Home</a> | <a href="#top">Back to Top</a>
</div>

We are almost done with the HTML code. I am just going to create a link in the website’s title that will also allow my visitors to get to the homepage quickly and painless.

1
2
3
4
5
6
7
8

<body>
  <a id="top"></a>
  <div id="mainWrapper">
 
    <div id="header">
      <h1><a href="index.html" title="One Column Template" rel="home">One Column Template</a></h1>
    </div>
    ...

Now that we have all the HTML we need, it is a good idea to look at the resulting webpage.

Find your file using your file explorer (Windows Explorer if you’re running on Windows) and open it with your favorite Internet browser. You can drag the file over to it.

I guess you’re thinking: WTF! It looks awful!

You’re right. Our webpage has no styles whatsoever and we need to take care of that. But so far we have been doing it the right way. HTML is just for the structure. We need to write CSS for the styling. But that’s not going to happen in this post. Stay tuned for the Part 2 of “Build My Own One Column CSS Template from Scratch”.

Here is the complete code for our HTML file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8" />
  <title>One Column Template</title>
</head>
 
<body>
  <a id="top"></a>
  <div id="mainWrapper">
 
    <div id="header">
      <h1><a href="index.html" title="One Column Template" rel="home">One Column Template</a></h1>
    </div>
 
    <div id="navigation">
      <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </div>
 
    <div id="content">
      <h2>One Column Template - Home</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at leo odio.
      Nulla facilisi. In fringilla imperdiet ullamcorper. Curabitur id lorem elit, eu
      porttitor ligula. Nam tristique vehicula placerat. Etiam consectetur, leo sit
      amet tristique ultrices, neque justo suscipit eros, et consequat diam dolor eu
      tellus.</p>
      <p>Nullam varius luctus egestas. Phasellus feugiat varius eros, sit amet tempus
      nibh viverra at. Morbi tempor mi a nulla imperdiet auctor. Curabitur egestas
      euismod augue nec hendrerit. Cras congue enim non magna consectetur vel
      ultricies urna congue. Vivamus ipsum tellus, semper quis adipiscing non, dictum
      sodales metus.</p>
 
      <h3>An Unordered List</h3>
      <p>Cras et orci vitae mauris sagittis feugiat eget non metus. Cras eget odio et
      risus accumsan vehicula.</p>
      <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Pellentesque ut sapien eget nisl.</li>
        <li>Donec euismod tellus nec nisi cursus.</li>
        <li>Quisque dapibus sapien vitae.</li>
      </ul>
 
      <h3>An Ordered List</h3>
      <p>Cras et orci vitae mauris sagittis feugiat eget non metus. Cras eget odio et
      risus accumsan vehicula.</p>
      <ol>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Pellentesque ut sapien eget nisl.</li>
        <li>Donec euismod tellus nec nisi cursus.</li>
        <li>Quisque dapibus sapien vitae.</li>
      </ol>
 
      <h3>A Blockquote</h3>
      <p>Nullam varius luctus egestas. Phasellus feugiat varius eros, sit amet tempus
      nibh viverra at.</p>
      <blockquote>Nullam varius luctus egestas. Phasellus feugiat varius eros, sit amet
      tempus nibh viverra at. Morbi tempor mi a nulla imperdiet auctor.<br />Curabitur
      egestas euismod augue nec hendrerit. Cras congue enim non magna consectetur vel
      ultricies urna congue. Vivamus ipsum tellus, semper quis adipiscing non, dictum
      sodales metus.</blockquote>
    </div>
 
    <div id="footer">
      Copyright &copy; One Column Template 2010. All rights reserved.<br />
      <a href="#">Home</a> | <a href="#top">Back to Top</a>
    </div>
 
  </div>
</body>
 
</html>

And here is the complete code for our HTML file without the sample content but with some comments for instructions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8" />
  <title><!-- Title goes here --></title>
</head>
 
<body>
  <a id="top"></a>
  <div id="mainWrapper">
 
    <div id="header">
      <!-- Header for the title or the logotype -->
    </div>
 
    <div id="navigation">
      <!-- The navigation section for the menus -->
    </div>
 
    <div id="content">
      <!-- The content section where most of your webpage content will be -->
    </div>
 
    <div id="footer">
      <!-- Footer section for the copyright, fast links and other footer stuff -->
    </div>
 
  </div>
</body>
 
</html>

This is my second post on the ‘CSS 3 Rules’ series, and it’s again on how to style borders using CSS 3. Only this time, we are going to see how to style borders using an image instead of using colors.

That’s right… CSS 3 allows us to use an image instead of a bunch of colored pixels (lets assume an image is not a bunch of colored pixels!) to style borders. Now you can make the borders of your objects look exactly how you want them to.

For Mozilla Firefox and for Webkit based browsers like Safari and Google Chrome, the CSS declaration looks something like this:

1
2
3
4

div {
  -moz-border-image:url(border.png) 30 30 30 30 repeat;
  -webkit-border-image:url(border.png) 30 30 30 30 repeat;
}

Below you can find what those values mean (from left to right):

• url(border.png) is the path to the image that you want to use to style the border;
• 30 is the distance of the slice from the top of the image;
• 30 is the distance of the slice from the right of the image;
• 30 is the distance of the slice from the bottom of the image;
• 30 is the distance of the slice from the left of the image;
• round is the type.

Note: The distance of the slice can be measured in pixels or in percentage. For percentage you have to put the ‘%’ symbol after the value. For pixels you put nothing after the value.
Note 2: The type of the border image can be ‘repeat’, ’round’ or ‘stretch’.

Compatibility Table

4	5	3	3.6	10	10.5	4	7	8	9

Usage

I’ve just made a simple image to use at the examples below. This is the image that I am going to use in both examples.

Using ‘Stretch’

1
2
3
4
5
6
7

div {
	border-width:16px;
	-moz-border-image:url(border-image.png) 16 16 16 16 stretch;
	-webkit-border-image:url(border-image.png) 16 16 16 16 stretch;
	width:380px;
	height:150px;
}

Using ‘Repeat’

1
2
3
4
5
6
7

div {
	border-width:16px;
	-moz-border-image:url(border-image.png) 16 16 16 16 repeat;
	-webkit-border-image:url(border-image.png) 16 16 16 16 repeat;
	width:380px;
	height:150px;
}

Example

This is what the first code above, using ‘Stretch’ does.

This is what the second code above, using ‘Repeat’ does.

Don’t forget to check out these other ‘CSS 3 Rules’ posts:

1. The CSS 3 ‘Border Colors’ Rule
2. The CSS 3 ‘Border Image’ Rule
3. The CSS 3 ‘Border Radius’ Rule

• A Regra ‘Border Image’ em CSS 3 (Versão PT)

A very important aspect to have in mind when deploying a website or any other web application is the loading speed. Nobody wants to wait centuries before a web page is displayed.

One way to accomplish this is optimizing the size of all the files that are going to be downloaded by the user. And, as you know, images can be the most demanding files in a website.

A few months ago I found Yahoo Smush.it – an incredible web tool that lets you reduce the size of your images. Smush.it is a lossless tool which means that you can optimize all your images for the web without changing their look or visual quality.

Smush.it is very easy to use. All you have to do is tell it what image or images you want to optimize and download the optimized versions. You can do this using one of two available methods:

• you can bulk upload a set of images, or
• you can type a list of URLs with the online path of the images.

You can optimize JPG, GIF, and PNG images that are up to one megabyte in size. There is a chance that, when processing a GIF image, Smush.it converts it to PNG. The tool only does that when the resulting image is smaller in the PNG format. Most of the images in the GIF format could be smaller if you used the PNG-8 (PNG with 8 bits per pixel) format.

As an example, I saved the screenshots from the smushing that I did in the images of my previous post – Online Background Images Generators.

Here you can see how I saved 47.28 KB or 19.43%. This may not look much but imagine if you had 1000 visitors downloading these images every day.

Smushing your images has three big advantages:

• You give a better experience to your users by allowing them to surf a fast loading website;
• You get better search engine rankings because, at least Google, is penalizing slow loading websites;
• You save disc space and bandwidth;

As for the disadvantages, I can only think of one:

• You ‘waste’ about 45 more seconds every time you write a post using smushed images.

• Optimização de Imagens para a Web (Versão PT)

Let me guess! You need a fancy background for your website, blog, Facebook or Twitter page but you do not have the skills or the touch to make one yourself.

A few years ago that could be a problem, but not anymore. Today there are a lot of free online background image generators that allow you to easily produce a background like a pro. You create the background and, in the end, just need to download and use it wherever you want. Besides, you can use these generated images for any purpose you feel fit – backgrounds, buttons, header images, etc.

Here are a few examples:

BgPatterns

BgPatterns allows you to create very nice background images, with lots of cool patterns, in four easy steps.

1. Colors
   • Select the color of the pattern that you will choose afterwards
   • Select the background color of the whole image
2. Canvas
   • Select the “background noise” or texture from a list of available ones
   • Select the scale of the texture
   • Select the opacity of the texture
3. Image
   • Pick a pattern from a huge list of available patterns
   • Scale the pattern as you like
   • Pick your preferred position for the pattern
   • And finally control its opacity
4. Rotate
   • Use the available pre-defined angles to rotate your patterns
   • Or type the exact angle you see fit

At any time of the process you can “Apply background” to see, real time, how your background is turning out.
When you are done just press the “Download Image” hyperlink.

Stripe Generator 2.0

Unlike what you do with BgPatterns, using Stripe Generator you do not choose patterns or any other image to create your background. It is all done with stripes. Seems lame? It’s not. Believe me, if you’re inspired enough, you can generate all sorts of crazy backgrounds.

This great platform is just as easy to use as the previous, and you have all the editing controls in one page.

• Choose the stripe size
• Control the spacing between stripes
• Choose the stripe color, background style and shadow
• Pick a background color for the image
• Choose the shadow orientation or angle

You can preview the progress of your stripes’ image at any time. When you finish generating it you only need to hit the download button.

Plus you have a bonus. If you create a free account, your generated stripes’ images will remain safe, waiting for you if your ever lose the ones you downloaded.

Dotter

Ok, you don’t like crazy patters and stripes are not your thing. What about dots?

If you find an easier to use background generator than Dotter I will give you one completely white background image for free.

To generate an image background using Dotter you just have to define 5 things:

• 2 colors for the dots (if you want all the dots to have the same color, define the same color for both)
• 2 colors for the background (if you define different colors for the background, you will get a gradient background)
• the image size

Click “Ok” and the preview image will be the actual background of the tool. To get the image, you will have to check the web page’s code to view the background image and save it. As stupid as it may seem, that was the only way I found to download the image that I created.

Gradient Image Maker

If you reach this far, maybe you don’t like patterns, stripes or dots. Fortunately that’s not a problem. Just use a Gradient image instead.

Dynamic Drive’s, Gradient Image Maker allows you to create, for free, a gradient image for your backgrounds, buttons, or anything else you need a gradient to. Creating a gradient image online couldn’t be any easier.

• Choose what type of gradient you want from the three available options: horizontal, vertical, oblique
• Configure a height and a width for your gradient image
• Select the top and bottom colors
• And choose to download the image in JPEG or PNG formats.

It couldn’t get any fast and easier than this!

Other great Background Image Generators

• PatternCooler
• Patterns (by COLOURlovers)
• Stripemania
• Striped Backgrounds
• Tartan Maker
• Online Gradient Image Maker
• Gradient Maker (by secretGeek)
• Background Image Maker (by rails2u)
• bgMaker (by Ventd’Aval)

• Geradores de Imagens Online (Versão PT)

CSS 3 is the latest CSS version and it brought us, web developers, lots of cool features. Unfortunately some browsers still do not interpret it fully and some other (Internet Explorer, of course) not even a bit.

However, CSS 3 is not only the future but a big part of the present. That is why I am going to explore a new great CSS 3 rule – Border Colors (note the ‘s’ on ‘colors’).

The CSS 3 Border Colors rule allows us to define more than one color to the borders of an object. It is possible to have as many colors as pixels in the border width. This means that, if we have a 3 pixels border, we can have 3 colors for that border. If, by any chance, we define only two colors, the last color will be present in the remaining pixels of the border.

Compatibility Table

4	5	3	3.6	10	10.5	4	7	8	9

Usage

1
2
3
4
5
6
7

div {
	border: 6px solid #ccc;
	-moz-border-bottom-colors: #aaa #bbb #ccc #ddd;
	-moz-border-top-colors: #aaa #bbb #ccc #ddd;
	-moz-border-left-colors: #aaa #bbb #ccc #ddd;
	-moz-border-right-colors: #aaa #bbb #ccc #ddd;
}

Example

This is what the code above does.

This is a zoomed corner of the example above. Notice that the color #ddd is present in 3 pixels because we defined 4 colors instead of 6.

Don’t forget to check out these other ‘CSS 3 Rules’ posts:

1. The CSS 3 ‘Border Colors’ Rule
2. The CSS 3 ‘Border Image’ Rule
3. The CSS 3 ‘Border Radius’ Rule

• A Regra ‘Border Colors’ em CSS 3 (Versão PT)

There are a lot of free online hosting services over the World Wide Web. But most of them are unreliable, slow, low featured and even dishonest.
However, it is still possible to host a low traffic website in a free web hosting platform, as long as you choose the right one for your needs.

A few months ago, I did a little research on the web for another website of mine – Free Web Hosts – and came up with a small list of free hosting services that I would like to share with you.

• Os 5 Melhores Alojamentos Gratuitos para Websites (versão PT)

I will be giving one example in the post and four examples in the demo but the amount of possible uses has no limits.

Basically what I am going to do is style a DIV using CSS, with a background image on the left, a background color, and top and bottom borders to make it more stylish. This works across all Internet browsers (Yes… Internet Explorer too!) so you can use it everywhere.

The xHTML is very simple and consists only on a DIV, with a class and some text:

1
2
3

<div class="info">
	This is a div with the <em>info</em> class.
</div>

The CSS is also easy – no CSS 3 involved – and anyone with basic CSS knowledge knows exactly what this is.

1
2
3
4
5
6
7
8

.info {
	width: 90%; /* Because I like it that way */
	margin: 10px auto; /* Because I want to */
	padding: 15px 10px 15px 50px; /* To move the text away from the borders and from the image on the left */
	border-top: 1px solid #A7C1DF; /* Top border's width, style and color */
	border-bottom: 1px solid #A7C1DF; /* Bottom border's width, style and color */
	background: #DFEEFF url('img/info.png') 10px center no-repeat; /* From left to right: background color, background image, horizontal position, vertical position and background repeat */
}

• Demo: css-information-and-error-messages.html
• Download the Demo files

• Mensagens de Informação e Erro em CSS (Versão PT)

I have just completed the ‘migration’ from Joomla 1.5 to WordPress 3. Well… it was not exactly a migration since all I did was re-write my custom template – or should I call it ‘theme’ now? – and copy/paste some of the posts I had in my previous platform.

I had no big reason for doing this. I still love Joomla, but there were a few minor reasons for it:

1. Joomla still has big issues with SEF URLs (even with extensions). With extensions, they may be search-engine-friendly URLs but they are far from website’s-owner-friendly. WordPress SEF URLs work like a charm.
2. Joomla is heading for 1.6 and, like what happened with the release of version 1.5, I would have to re-write my template anyway. With WordPress the differences in the themes structure from major version to major version are not usually that drastic.
3. Although a bit more demanding on web development knowledge, WordPress is lighter and apparently faster.
4. I really wanted to learn a little more about WordPress and, the best way to do it, is having your blog powered by it.

I am still very anxious for the release of Joomla 1.6 stable. I will surely give it a try. But, for now, my blog will be Powered by WordPress.

• De Joomla para WordPress (Versão PT)

I put together a small list of the best and most popular free text editors. You can find it below.

Notepad++ (Notepad Plus Plus)

Notepad++ is a free, GPL licensed, source code editor and Notepad replacement for Windows, that supports several languages. Based on Scintilla, a powerful editing component, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size.

Some of it’s features are: Syntax Highlighting and Syntax Folding, WYSIWYG, User Defined Syntax Highlighting, Auto-completion, Multi-Document, Multi-View, Regular Expression Search/Replace, Full Drag ‘N’ Drop, Dynamic position of Views, File Status Auto-detection, Zoom in and zoom out, Multi-Language environment, Bookmark, Brace and Indent guideline Highlighting, Macro recording and playback, and much more.

• Notepadd++ Homepage
• Download Notepadd++

PSPad

PSPad is a freeware programmer’s editor for Microsoft Windows operating systems.

Among other things it allows you to: work with several documents at the same time (MDI), save desktop sessions to later reopen all session files, edit files directly from the web (FTP client), record, save and load macros, search and replace in files, text difference with color-coded differences highlighted, use templates (HTML tags, scripts, code templates…), syntax highlighting according to file type, defined highlighters for exotic environments, use auto correction, and a lot more.

• PSPad Homepage
• Download PSPad

Crimson Editor

Crimson Editor is a professional source code editor for Windows. This program is not only fast in loading time, but also small in size. While it can serve as a good replacement for Notepad, it also offers many powerful features for programming languages such as HTML, C/C++, Perl and Java.

You can count on these features: Edit multiple documents, Syntax highlighting, Multi-level undo/redo, Directory tree view window, Find and Replace, Column mode editing, Natural word wrapping, Spell checker, User tools and macros, Edit remote files directly using built-in FTP client, Print and Print preview.

• Crimson Editor Homepage
• Download Crimson Editor

EditPad Lite

EditPad Lite is a general-purpose text editor, designed to be small and compact, yet offer all the functionality you expect from a basic text editor. EditPad Lite works with Windows NT4, 98, 2000, ME, XP and Vista. EditPad Lite is free for non-commercial use.

EditPad Lite offers you some very interesting features like: open as many files at a time as you want, change between the open files by clicking on their tabs, unlimited undo and redo, directly edit Unicode text files and text files encoded in a variety of legacy code pages, save parts of your text to disk and insert a file in the current text, specify many print settings: font, margins, headers/footers, etc. and immediately see the effects in the print preview, keep the EditPad window on top of all other windows, reopen menu that lists the last 16 files opened, etc.

• EditPad Lite Homepage
• Download EditPad Lite

TotalEdit

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is free for commercial and non-commercial purposes (its freeware). TotalEdit delivers a broad range of features and tools and it can be configured to work the way you want to.

Some of it’s features are: file editing and tools, built-in tool and explorers, project explorer, customization and configuration, search and replace, macros, printing and preview, backup and version comparison, formatting, spell checker, USB memory key support, syntax color formatting, column editing, and more.

• TotalEdit Homepage
• Download TotalEdit

TextPad

TextPad is a powerful, general purpose editor for plain text files. Whether you simply need a powerful replacement for Notepad, a tool for editing your web pages, or a programming IDE, TextPad does what you want, the way you would expect. Easy to use, with all the features a power user requires. You can find international editions for TextPad in Dutch, English, French, German, Italian, Japanese, Polish, Portuguese (Brazilian) and Spanish.

Some of it’s features are: edit huge files, up to the limits of 32-bit virtual memory, supports Universal Naming Convention (UNC) style names, and long file names with spaces, CUA compliant keyboard commands, English, French, German, Italian, Polish, Portuguese and Spanish user interfaces, a spelling checker with dictionaries in 10 languages, multiple files can be simultaneously edited, with up to 2 views per file, warm start feature lets you restart exactly where you left off, selected text can be case shifted and block indented, and characters, words and lines can be transposed, cut and copied text can be appended to the clipboard, as well as replacing its contents, text can be automatically word-wrapped at the margin, or at a specified column if it does not fit on a line, text can be split into separate lines where wrapping occurs, or lines can be intelligently joined, preserving paragraphs, etc.

• TextPad Homepage
• Download TextPad

Araneae

Don’t let your web development tools take over your project. Take control of your own code. Araneae (pronounced ah-RAN-ee-ay) is a simple, yet powerful text editor, providing only the features necessary to create websites and scripts using the latest web technologies. Best of all, Araneae is absolutely free for non-commercial use. Use it as long as you like for your personal projects.

Features: syntax highlighting, support for HTML, XHTML, CSS, JavaScript, PHP, Ruby, and more, instant browser preview, even without saving, insert customizable quick clips, tabbed multi-document interface, drag and drop support for files and images, downloadable extensions, and more.

• Araneae Homepage
• Download Araneae

• As Melhores Alternativas ao NotePad (Versão PT)

Here I was again thinking about finally posting another article on my website. I have been working on some xHTML/CSS tutorials but they are far from over. This is why I decided to make a new tableless CSS template. But this time I made it with three columns for bigger content space and better display.

Deep Blue is a three columns tableless css template that I am giving for free to all my readers. This template has the following “blocks”:

• Top menu
• Header (for the logo)
• Main column
• Center column (for links – menus, weblinks, friends websites, etc.)
• Right column (for more content – sponsor ads, etc.)
• Footer

This time I made two versions of the same template at once: The regular xHTML/CSS version and the CushyCMS version. You can download and use them for free. You can make all the changes you wish as long as you don’t sell it.

Regular Version (xHTML/CSS):

• Demo: demos/templates/deep-blue/
• Download: Deep Blue (160)

CushyCMS Version:

• Download: Deep Blue for CushyCMS (110)

• Deep Blue – Template Gratuito de Três Colunas (Versão PT)

But it does not do it all by itself. You need to have a web server that allows uploads by FTP which is, nowadays, a very easy thing to find – even for free. Two examples of free web hosting platforms that provide FTP accounts are AwardSpace.com and 000webhost.com.

You also need to have a template. If you don’t know HTML you can download one of the thousands free available templates in the World Wide Web. Just search Google for “free html templates” or “free css templates”.

After this, it is all set for you to configure your CushyCMS dashboard. Look at their brief designer documentation. It is so easy to use that it will take you no more than 10 minutes to figure out how it works.

You can have multiple pages, upload images and all kinds of files, add friends, family or clients to edit the website and much more.

• CushyCMS – Qualquer Pessoa pode ser Webmaster (Versão PT)

Although I’ve been working for both the Information Technologies and the Marketing and Communications department of my company, I’ve been challenged recently to give a slice of my time to the HR team, where a more technically supported approach to some of their human problems was to be tried out.

One of the things I have to do is create some video tutorials using the footage taken in some of our training sessions and the PowerPoint files used by the teacher in those sessions. I have to do some cool effects like showing a presentation slide while running the video on a small corner window at the same time, and a lot of things like that.

The first obstacle I faced was about the software to use. I had never done anything like this and I knew nothing about this type of software.

I did some inquiries and was told to try Microsoft Movie Maker 2 – “It is free and easy to use!” – they said.

They were right!… It is free and pretty easy to use. But it is also very basic, with few editing features.

Anyway, for those that need an easy to use video editor and are not looking for advanced features, I found some great, free video tutorials that will make you a powerful Movie Maker user in no time. Check the free Atomic Learning Movie Maker 2 video tutorial. They helped me a lot.

P.S. – I ended up where I am now – preparing myself to the painful task of having to learn Adobe Premiere CS4 in a day or two.

• Tutorial em Vídeo do Windows Movie Maker 2 (Versão PT)

If you are like me, there are some HEX color codes that you know by heart. But most of them are very hard to memorize and we always have to use a color picker of some kind to find the HEX color code we want. If you don’t need to use strange colors, here goes a great solution that makes it a lot easier to memorize colors for CSS.

Did you know that you can use colors names in CSS? And did you know that the list of available colors is actually quite big?

Take a look at the list and feel free to bookmark this page to get to it every time you need.

• Nomes das Cores em CSS (Versão PT)

There is nothing faster than the bookmarks toolbar but there is, at least, one solution as fast as the bookmarks toolbar and much more versatile – a locally hosted web page with a collection of the most often used links.

I created and use one for a few months now and I’m so addicted to it that I decided to give it to you. I provide it under a GPLv2 License so you can do whatever you want with it.

• Demo: demos/templates/startpage-template/
• Download: Start Page Template (182)

You can find the usage instructions below but bear in mind that you need to have basic HTML knowledge and know how to resize and crop an image. Please use the comments section below if you need help setting it up.

1. Download the Start Page Template (182).
2. Extract the contents of that ZIP file to a folder of your choice.
3. Edit the index.html file and add the links and images to the websites you visit more often. As you’re at it, edit the footer too and add your name.
4. Open the index.html file in your favorite web browser and copy its address from the browser’s address bar.
5. Paste the copied address in the browser’s “Homepage” field.
6. That’s it!

• Uma Página de Abertura Porreira (Versão PT)

You can use CSS to give levels of opacity to some objects in all browsers.

Most recent browsers (except, of course, Internet Explorer) already accept CSS 3 for opacity. So, for the great majority of recent browsers you will have to use this line of code to give a 60% opacity for a certain object:

1

opacity: 0.6;

For older Mozilla browsers, like Netscape Navigator, use this instruction:

1

-moz-opacity: 0.6;

For oldest Safari versions, you have to use this instruction:

1

-khtml-opacity: 0.6;

Incredibly, for recently released Internet Explorer 8, a specific instruction is needed:

1

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

For olders versions of Internet Explorer (IE5 to IE7) and for Internet Explorer 8 rendering as IE7, use the following:

1

filter: alpha(opacity=60);

So, if we wanted to give an image, with the class ‘transparent’, 60% of opacity using CSS, we would have to do the following:

1
2
3
4
5
6
7

image.transparent {
   opacity: 0.6;
   -moz-opacity: 0.6;
   -khtml-opacity: 0.6;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60);
}

• Opacidade com CSS em todos os Browsers (Versão PT)

Google has a free online platform – Google Webmasters Tools – that allows us, webmasters, to register a website and submit its sitemap. After some weeks the website is indexed by this search engine and we start getting some relevant analytics. Hopefully some visitors too.

But, before submitting my sitemap to Google, I need to create one. This is the best way to tell Google how many and what URLs it should add to it’s database. For this, I am going to use another amazing free web based platform from “Audit My PC” called Google Sitemap Generator. It is very easy to use and very effective.

If you have a dynamic website you will probably get URLs that you didn’t even know existed. All the explanations on how to use the tool are there so it shouldn’t be difficult to get your sitemap in a few minutes.

After downloading your website’s sitemap, rename it to “sitemap.xml” and upload it to your server. Place it in your website’s root folder. Then, head back to Google Webmasters Tools and submit it. Google will download and analyze your sitemap but you may have to wait a few hours before you see the confirmation that your website’s status is OK.

It is done! All you have to do now is wait and update your sitemap every once in a while to alert Google about your new URLs.

• Submeter o meu Blog no Google (Versão PT)

“Bubbles” is a GPL v2 licensed template that you can use wherever you want to. You can download it, modify it, do whatever you want with it. It is structured using xHTML and styled using CSS and successfully validates as XHTML 1.0 Transitional. It’s tableless and has only one column where you can find four blocks: a header, a top menu, the content area and a footer.

• Demo: demos/templates/bubbles/
• Download: Bubbles (302)

• Bubbles – Template em CSS, de uma só Coluna (Versão PT)