Google Spreadsheets (Apps) now supports Safari

It's true! I tried some seconds ago... With my big surprise, finally Google Apps supports Safari.

So, all Mac users (Safari lovers) can edit Google Spreadsheets files directly with their own preferred browser, without switch every time to Firefox.

Related Posts

Google Spreadsheets: formulas tutorial
Gantt Chart with EditGrid online spreadsheets
Implement a Project Plan and manage activities with Google Spreadsheets
Project Management: a project plan with Excel (template)
Gantt Chart using Google Spreadsheets and conditional formatting

Optimize your CSS files to improve code readability

Some readers have asked to me what is the better way to organize a CSS file to optimize code readability and simplify code management.

Generally, I adopt just some simple rules and, it's my opinion, they are useful in order not to become crazy if you have to manage a CSS file for a page/site with a complex design. In this post, I discuss for simplicity a typical two columns fixed layout like this:

Step 1: redefine HTML elements
I think it's a good rule to redefine HTML elements (body, a, form, input...) in the first rows of your CSS files.

/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...

Step 2: define page elements
In order to improve code readability, I suggest to indent all elements but with some sagacities: if an element have just two-three attributes (for example #navbar), you can use a single line to declare all properties, otherwise it's better to declare every single property in a new line (for example see #navbar li a:link, #navbar li a:visited):

/* ------------------------------- */
/* PAGE Elements
/* ------------------------------- */
#container{width:780px; margin:0 auto;}

#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link,
#navbar li a:visited {

background:#444444;
text-decoration:none;
height:24px;
line-height:24px;
display:inline;
float:left;
width:auto;
padding:0px 10px;}

#main{width:auto; display:block;}

#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}

#footer a{color:#666666; text-decoration:underline;}

Step 3: define custom class
In the final section of your CSS files, you can define all other custom classes with the same rules I specified above:

/* ------------------------------- */
/* OTHER Class
/* ------------------------------- */
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.small-section{background:#CCCCCC;}

div.small-section a{color:#333333; font-weight:bold;}

...

How I said, these are only my personal suggestions and not true rules, but I think you can find them useful in order to deploy a more readable CSS file.

Simple tabbed interface using CSS

This post explains how to implement, in the simpler way (using only CSS and HTML), a tabbed interface without add javascript function to show/hide layers.

Download this tutorial

The result is something like this:

How you can see in the previous picture, we have four tabs and when an user clicks over a tab, the layer below the tab-bar displays a new content, related to the clicked tab. For example if you click over About tag, it will display the following content:



Step 1: HTML code
HTML code is very simple: we have a top bar (<div id="bar">) with some tabs, and a main layer which contains all other layers (hidden) with the content related to each tag:

<div id="bar">
<a href="#tab1">Home</a>
<a href="#tab2">About</a>
<a href="#tab3">Contact</a>
<a href="#tab4">Credits</a>
</div>

<div id="container">
<div class="main">
<div id="tab1">First tab element (HOME)...</div>
<div id="tab2">... the second tab element (ABOUT)... </div>
<div id="tab3">... third tab element (CONTACT)... </div>
<div id="tab4">... fourth tag element (CREDITS) </div>
</div>
</div>

Step 2: CSS code
This is the css code which use target pseudo class to show/hide content layers:

/* Tab Bar */
#bar a{padding:4px 6px; background:#E0E9FE; text-decoration:none; font-weight:bold;}
#bar a:hover{color:#003366;}
/* Content Layers */
#container{background:#E0E9FE; padding:10px;}
div.main div {display: none}
div.main div:target {display: block}

For other infos about target pseudo class, take a look here.

Download this tutorial

Liquid layer with rounded corners using css

This tutorial explains how to design a liquid layer with rounded corners, using CSS and few line of code in HTML.

A simple solution is to define four layers, each ones with the CSS attribute background which contains a rounded corner image:


The result is something like this:


Download this tutorial


Step 1: CSS code
Copy and paste this code in your CSS file:

div.w1{background:#DFDFDF url(pic/w_left_top.gif) no-repeat; width:100%;}
div.w2{background:url(pic/w_right_top.gif) no-repeat top right;}
div.w3{background:url(pic/w_left_bottom.gif) no-repeat left bottom;}
div.w4{background:url(pic/w_right_bottom.gif) no-repeat right bottom; padding:10px;}

How you can see, layer w1 is the main container container with the rounded left-top border in the attribute background.
Layer w2 is contained into layer w1 and it have in the background attribute the rounded right-top border. So, for all others.
Layer w4 will contain your text or other html elements. I added a padding attribute to add 10px space from external borders.


Step 2: HTML code
Now, copy and paste this HTML code into your page:

<div class="w1">
<div class="w2">
<div class="w3">
<div class="w4">
Welcome on my site
</div>
</div>
</div>
</div>

So, add all HMLT elements you want inside w4 layer and your liquid layer with rounded corners is ready to use!

Mydugg preview, an open source platform (php+mysql) to deploy your digg-like site

Some time ago, I started to deploy mydugg a free, open source platform written in PHP and MySQL to create digg-like site just with a click.


I think digg paradigm can be applied to deploy personal site, wiki site, community site and forum, so I decided to create mydugg and distribute it for free in order to simplify the work to people who have to deploy similar sites in easy way. The package also contains a simple istaller which configures the environment and creates a MySQL database, just with a click. After the install, in the administration area, you can define a site's administrator, add the site's description, manage users and posts:

Admin can also defines a set of categories where users can add posts in specific topics (categories are in the top bar):


In the next week, I'm going to deploy a function to design new themes for sites created with mydugg changing css source. Actually I am testing the application and I hope to distribute the first beta version in January 2008. Stay tuned :)

Use Google Spreadsheets to get financial informations about companies

In the past days I wrote some posts about Google Spreadsheets and how to use some common formulas like countIf(), vlookup(), sumIf().

This post explains how to use GoogleFinancial() and GoogleLookUp formulas to get financial informations about a list of companies in Google Spreadsheets.

Take a look at this spreadsheet

Spreadsheet structure
My spreadhseet's structure is very simple. It contains a column (column A) with company's name and other columns (B:L) with the financial data I want to get - using GoogleFinancial() formula - for each company (price open, current price, highest price of the day, erning-per -share...).



To get these informations, take a mind GoogleFinancial() formula take two parameter: symbol (the company code used to identify the company in the market) and an attribute (kind of data you want to display). So, first step, we have to get the symbol (company code) using another useful formula, GoogleLookUp().

Use GoogleLookUp() formula to retrieve company code
To find the Company Code (column B) I used GoogleLookUp() formula, a very useful function which use the web to retrieve information about a serie of questions you have (for example about countries and territories, planets, companies, ecc...).
In my example I want to retrieve the company code for each company in the column A. I used this formula:

=GoogleLookup(A6, "ticker")

...where A6 is the reference to the cell which contains the company name, and "ticker" is the attribute you have to use with GoogleLookUp() formula to get the company name.

In my example the previous formula is like:

=GoogleLookup("Apple Inc", "ticker")

and the result is:

AAPL

You can find a detailed guide about GoogleLookUp() formula, with an explanation about all attributes you can use, here.

Get Financial Data using GoogleFinancial() formula
So, for each company, we have the company code (column B) and now we can use GoogleFinancial() formula to get financial informations about our companies. In my example, column C display the currency in which the stock is traded, simply using this formula:

=GoogleFinance($B6, "currency")

...and the result is:

USD

In my spreadsheet I used the following formulas:

Currency: =GoogleFinance($B6, "currency")
Price Open: =GoogleFinance($B6, "priceopen")
Price: =GoogleFinance($B6, "price")
Price-to-Earnings: =GoogleFinance($B6, "pe")
Erning-per-share: =GoogleFinance($B6, "eps")
Beta: =GoogleFinance($B6, "beta")
Volume AVG =GoogleFinance($B6, "volumeavg")
High (highest price the stock traded at for the current day) =GoogleFinance($B6, "Hig")
Low (lowesest price the stock traded at for the current day) =GoogleFinance($B6, "low")

Take a look at this spreadsheet

You can find a full guide aboutGoogleFinancial() formula here.

Add reddit button with counter in your Blogger Template

This tutorial explains how to add a reddit button with a counter in your Blogger template. I already wrote other posts about integration between Blogger and the most famous social networks (digg, delicious, stumbleupon). To add a reddit button, open HTML view of your Blogger template and add the code below. In reddit, you can choose three different styles:

Style 1

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=1"></script>

How you can see, the code is very simple. You have to add the blogger post url:

<data:post.url/>

...and the blogger post title

<data:post.title/>

Style 2

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=2"></script>

Style 3

<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=3"></script>