Some High-Tech Tips

Template backup

2011-07-23T11:18:00.001+01:00

Antes de se modificar os aspectos da template do blog, é crítico fazer uma cópia de segurança da template. Se algo correr mal, pode-se depois voltar a trás com esta com esta cópia.

Como fazer cópia de segurança da template (ou modelo, em português)

Entrar no blog e clicar em Design
Clicar em Editar HTML
Clicar em Transferir modelo completo
Guardar o ficheiro algures no disco. É um ficheiro do tipo XML, que é basicamente texto com a template do blog. Pode ser aberto com qualquer editor de texto simples (exemplo: Notepad do Windows; recomendo o uso do Notepad++).

Está feito.

Como usar a cópia de segurança da template para desfazer um erro decorrente de se ter alterado a template do blog

Entrar no blog e clicar em Design
Clicar em Editar HTML
Escolher o ficheiro guardado no ponto anterior (clicar em Browse/Procurar, dependendo da língua usada) e clicar em Carregar.
Podem aparecer mensagens como a que se segue:

Esta mensagem significa que o ficheiro que se está a carregar contém menos coisas do que a template em uso. Se a modificação que se fez na template foi acrescentar coisas, é normal que a versão anterior tenha menos coisas. Por isso, clicar em Eliminar Widgets. Caso contrário, ter a certeza de que o ficheiro que se está a carregar corresponde de facto à última versão da template que esteve online.
Dica: em caso de dúvida, fazer a 1ª etapa (backup da template) para se guardar o que haja a guardar antes de carregar a template.
Depois de carregado o ficheiro, as alterações entram em funções imediatamente.

Nota: se se pretender ver as alterações da template antes de a carregar como se acabou de descrever, pode-se copiar o conteúdo da template e colá-lo na caixa seguinte (depois de se ter apagado o respectivo conteúdo):

De seguida, basta clicar em Pré-visualizar.

Windows Live Writer: formatar imagens

2010-11-19T23:19:00.001Z

Este tutorial explica como formatar imagens nos posts escritos com o Windows Live Writer.

Nível de dificuldade: baixo

Comecei por detestar a abordagem da suite Live, especialmente do Live Messager, que tornava publica informação minha sem meu consentimento (sim, pode-se ir à configuração e mudar mas o default é abusivo). Mas o Live Writer é uma killer app e já escrevi alguns posts sobre a forma de o usar.

Já abordei a forma como se instala este software e alguns aspectos da sua utilização (sobre captura de imagens e sobre o ping para o Twingly e para o Wordpress). Agora debruço-me sobre a inclusão de fotos nos posts. Este aspecto é um pouco manhoso mas depois de umas configurações, é impec.

As imagens seguintes reflectem as configurações que uso regularmente para as imagens. Experimente defini-las (para isso, inserir uma imagem e depois clicar nela para activar os painéis de opções) e depois clicar no guardar como predefinições. Desta forma, a próxima imagem que inserir estará com as definições que deseja.

NOTA: estas imagens são copiadas do Windows Live Writer XP. A última versão (Windows Live Writer 2011) tem um aspecto diferente mas os conceitos são os mesmos. Basta um pouco de esforço para encontrar as mesmas coisas.

Imagem 1	- inline para o uso habitual no blog (por vezes coloco Esquerda para o texto contornar a image) - sem margens (fica o default do blog) - limites (border): gosto da imagem com uma linha à volta. o papel fotográfico tb é interessante especialmente quando o centro do post é a fotografia - hiperligação: na maior parte dos casos não quero nenhuma ligação. mas pode ter interesse ter a ligação para um URL (exemplo: recorte de uma notícia e link para a origem) ou então para a imagem de origem (neste caso ver a imagem 6)
Imagem 2	- tamanho médio (clicar no esquadro para definir o que é tamanho médio (ver a imagem 3) - incluir um texto descritivo da imagem (ajuda o google na pesquisa de imagens)
Imagem 3	- definir os valores dos tamanhos pré-definidos. - no Aventar, uma imagem não deve passar muito dos 550 pixéis de largura (se não passar por cima da barra lateral ou fica cortada).
Imagem 4	nada de especial a referir mas ver a lista de efeitos possíveis
Imagem 5	lista de possibilidades de hiperligações das imagens
Imagem 6	na maior parte dos casos, quero que, quando a imagem liga para a imagem de origem, seja apresentada a imagem no seu tamanho original. fazer esta pré-definição aqui.
Imagem 7	Depois de feitas as pré-definições, clicar no guardar como predefinições e assim a próxima imagem inserida terá de imediato estas características

UM TRUQUE
Por vezes quero inserir uma série de imagens iguais mas diferentes destas predefinições. Exemplo: incluir 10 imagens com tamanho 100x100 e a apontar para a imagem de origem mas redimensionada para um máximo de 800x600. Para poupar tempo, insiro a primeira imagem, formato-a assim e, tendo-a seleccionada clico no guardar como predefinições. Desta forma as próximas 9 imagens que inserir terão as mesmas características. Depois volto a colocar as predefinições genéricas a usar nas restantes postagens.

Fica aqui um link com informação detalhada sobre como instalar o Windows Live Writer.

http://hitech-tips.blogspot.com/2010/02/bloggers-prestem-atencao-ao-windows.html

E aqui mostro como fazer capturas de ecrãs:

http://hitech-tips.blogspot.com/2010/02/faca-posts-de-forma-rapida-e-eficaz.html

Sobre este programa de captura de ecrãs (há muitos), é de realçar um aspecto muito prático e que é o facto do software poder gravar automaticamente em disco a imagem capturada. É especialmente se se estiverem a fazer várias capturas. Também permite copiar automaticamente para o clipboard a imagem capturada (muito útil também). No anterior link explico como se faz isso.

Boas postagens :)

Links para download do Windows Live Writer:

Versão 2011 (aspecto como o Office 2011):
http://explore.live.com/windows-live-writer?os=other
Versão 2009 (aspecto como o Office XP):
http://explore.live.com/windows-live-writer-xp

How to setup the AddThis share buttons

2010-11-04T16:31:00.001Z

This tutorial shows how to add the "Share This" buttons to your blogger blog. At the end, you will have something like this:

tip level: intermediate

1. First of all, backup your template. See how: Template actions: download, backup, edit and restore. If anything goes wrong, this is your chance to go back.

2. Now, setup an AddThis account:

Go to http://www.addthis.com
Choose the sharing style:

Personally, I prefer the first option, but without the "Share" button ( because it makes a popup window to appear). Bellow the instructions will show how to have this:
Choose to have sharing analytics:
Click to have the button code:
Now you will need to register. Bellow I show my registration. Note at the username, it'll be used bellow.
Now, copy the code:

and paste it in some text editor (notepad it's ok). We will return to this code later.

3. Having this done, it's time to modify your template.

Make a copy of your template you downloaded in step one and let's modify it. You can use any text editor (such as notepad).
Search for the text </head> and open a new line above it.
In order to choose the language in use, paste the following text:
<script type='text/javascript'>
    var addthis_config = {
        ui_language: "pt"
    };
</script>

Now search in your template for this text:
<data:post.body/>
If you can't find it, search for
data:post.body
and then make sure it has a similar pattern to <data:post.body/>
Open a blank line bellow this text and paste there the following code:

<div class='sharepost'>
    <div class='addthis_toolbox addthis_default_style'>
        <span class='addthis_separator'>Partilhar: </span>
        <a class='addthis_button_facebook' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_twitter' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_myspace' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_blogger' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_wordpress' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_google' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_friendfeed' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_delicious' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_email' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_favorites' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
        <a class='addthis_button_print' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'/>
    </div>
</div>
<script type='text/javascript'>var addthis_config = {'data_track_clickback':true};</script>
<script type='text/javascript' src = 'http://s7.addthis.com/js/250/addthis_widget.js#username=hitechtips'> </script>

<br/>

IMPORTANT: replace the red text above by your own usernames:
- replace fliscorno with your twitter username
- replace hitechtips with the username you created at step 2. You can copy if from the text you pasted at the end of step 2.

Replace the text Partilhar with whatever you want to say (eg. Share)

Another tip about where to put this last piece of code: it must be in between <data:post.body/> and </b:includable> (see the picture).

Save the template and upload it to your blog (see the link at step 1).
Preview the blog and it's done. If the blog stop working, then restore the older template you have backed up at step 1.

Further steps:

The AddThis button can have Facebook and Twitter counts. See the AddThis help for instructions. See also here.

Help, this doesn't work!

Be sure that all the opening quotes (') have a corresponding closing quote
Make sure the text you have paste is OK
Make sure you pasted the text at the right places

Did you enjoy this tutorial? Make short post on your blog with a link to here :) I will appreciate it.

The search as you type functionality in FF and Chrome

2010-06-23T20:28:00.001+01:00

Firefox has functionality I just love: the search as you type functionality. It's not ON by default and to make FireFox exhibit this behaviour, check the Tools -> Options -> Advanced -> General -> "Search for text when I start typing" checkbox. When active, to find something in a page, one just start typing the text to be found. It's not necessary to press CTRL+F or F3. To find the next match, just press CTRL+G or F3.

Why is this great? Because it improves the browsing usability. Imagine you have goggled something and then open a page. To see where the searched text appears with the search as you type functionality, just start typing the text you have goggled. See, easy and fast. No need for extra keystrokes.

However, this functionality isn't available in Chrome which have keep me away form a more regular use. There is however an extension that just do that: chrome-type-ahead. It looks like that the Chrome developers don't like this search as you type feature but, IMHO, because of stubbornness than anything else. Anyway, the Chrome extension is there, not as perfect as it could be if part of the Chrome core, but still quite ok. Give it a try if you are in the mood.

http://code.google.com/p/chrome-type-ahead

CPU benchmarks and the HP TouchSmart tm2 tablet PC

2010-05-29T13:14:00.001+01:00

So you are about to buy a new computer and suddenly you discover that the number of choices are endless. Distant is the time when choosing a computer was basically choosing among 3 or 4 microprocessors, a graphics card, the amount of RAM and a large hard disk. Even if these items are not so difficult to choose even now a days, you will probably get stuck when it comes to the heart of the computer, the microprocessor. Models and models, speeds, brands, technologies and so on, and so on. The microprocessor commercial approach has made impossible to choose without a reference service. That's here where a service such as the cpubenchmark.net comes to action. Search for a specific CPU model and obtain a position in the performance rank (direct link to the search form).

It was this way that I came to know that the interesting tablet computer concept from HP, the HP TouchSmart tm2-1090eg Notebook-PC, would be quite disappointing when running more demanding software. With a CPU Intel SU7300 @ 1.30GHz, it ranks at the lower level of the performance chart. This make it not suitable for photography field work, what would be my main task for it, specially because of its touch screen and foldable screen.

However, who is looking for an acceptable computer that is also a tablet can find an interesting solution on this HP EliteBook 2740p Tablet PC. But at what price :-S

Note: Intel has a compare functionality for its processors here: http://ark.intel.com/Default.aspx. And AMD has something similar here: http://products.amd.com

Facebook Fan Pages vs. Networked Blogs

2010-05-26T17:52:00.001+01:00

Facebook Fan Pages vs. Networked Blogs

Love it or hate it, Facebook is here to stay. Despite challenges around user privacy and an ever-changing interface, Facebook is rapidly becoming THE gateway to content for many users. As a blogger, Facebook can be a great tool to promote and share your content to potential readers. But the real question is…what’s the best way to do that? (…)

Template actions: download, backup, edit and restore

2010-05-13T09:45:00.001+01:00

This tutorial describes how to perform a backup of your template, how to edit your template and how to restore your template.

tip level: beginner

Some times people find problems editing their template and then I figure out that the root for the problem is because they didn't select the "Expand Widget Templates" check box. So, if you are using the code directly from this check box, be sure to select it:

However, I would recommend that you edit your template another way.

1. Download the full template, by clicking the link "Download Full Template":

2. Choose to save the file and give it a meaningful filename:

Including the date in the filename it's a good idea for backup organization.

3. Keep this file unchanged and perform the edits in a copy of this file. This way, if something goes wrong you can go back by uploading the previous version of the template.

Use a text editor to perform your changes in the .xml file. You can use a basic editor such as Windows Notepad but consider to use an editor that colorize the code. Notepad++ is a good choice and it's free. Links:

- Notepad++ page: http://notepad-plus.sourceforge.net

- Download page; click at the "Download Now!" button:

4. Perform your edits in the template, save the file and upload the new template. The template will be immediately changed and in use.

If you want to preview the changes before applying them, copy the edited template text and replace the text of the text box with it. Then press "Preview":

If it is ok, press "Save Template".

This preview method doesn't always work, particularly if the changes involve JavaScript. The best approach is to create a test blog and performing the template tests there.

5. If your changes become problematic, just upload the original template that you saved at points 1/2.

That's it. Enjoy.

Facebook Like button XFBML tutorial

2010-05-10T00:13:00.001+01:00

While searching for a solution that would let me add the "Like" button plus the ability to leave a comment on the "Liked" item (see picture on the left), I finally found the solution that I share bellow. Just follow exactly the next instructions and that's it.

Technique 1

With this technique, you'll get a like button where someone can add a comment to the liked item. Instead, if you want to have this like button and a comment form, see bellow the technique 2.

Note: If you prefer not using the Facebook API, just have a look here.

First, set up a new application:
1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Likes) > select Agree > click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your site url with an ending slash in Connect URL and click on Save Changes (for example: http://mysitedomainname.com/)
6. You will see your Application ID number (below your app API & Secret)
7. It will take between 2 to 20 minutes until it will be ready to use with.

Second, remove any old Facebook script, for example:

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB.init("123456789000000000","/xd_receiver.htm");
</script>

Or whatever script code of facebook that you got in your page.
(only remove the JavaScript, not the fb: tags)

The setup steps:
1. Add this attribute to your <html> tag:

xmlns:fb="http://www.facebook.com/2008/fbml"

so in the end your <html> tag will look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">

2. Add this code right after the <body> tag:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
      appId : 'YOUR APP ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml : true // parse XFBML
    });
};
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());
</script>

Change 'YOUR APP ID' with your application ID number, not the API like was before in the old version.

3. Go here and set all the attributes you want in the demo, then click on 'Get Code' and copy the XFBML version from the popup window.
Remember to add http:// at the beginning of your url.

4. Drop your <fb:like href="http://yourdomainname.com/your-page-name"></fb:like> tag where you want in your page. (but it must to be somewhere after (below it, not need to be right after) the code in step#2, and not before it)

NOTE 1: to use in a blogger blog, the above code should look like:

<fb:like expr:href='data:post.url' ></fb:like>

This allows you to have individual likes for each post.

NOTE 2: If you prefer that your button says "Recommend" instead of "Like", use this code instead (adapted for blogger):

<fb:like action="recommend" expr:href='data:post.url' ></fb:like>

5. Set the Open Graph protocol meta-tags:
you need to add some new facebook meta-data tags called Open Graph
From this page:

To customize how your site shows up when users share your page with the Like button, you can add meta data to your web pages:
• og:title - The title of your page; if not specified, the title element will be used.
• og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
• og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
For example if you are creating a page about the movie 'The Rock' you would include this meta data:
<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

6. Your page must have a document type tag at the most beginning of it (above <html>) if you do not have one:
For HTML add this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For XHTML add this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Or just this:

<!DOCTYPE html>

DONE!

Technique 2

If you are interested in having the Facebook comments box and the like button (with the option to add a comment to the liked item), use instead the following tutorial (copied from Full: Comments-box + Like-button + Language). You'll get something like this:

First, set up a new application:
1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Comments) > select Agree > click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your site url with an ending slash in Connect URL and click on Save Changes (for example: http://mysitedomainname.com/)
6. You will see your Application ID number (below your app API & Secret)
7. It will take between 2 to 20 minutes until it will be ready to use with.

If you update from the old comments-box version so:
1. Remove:

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>

2. Remove:

<script type="text/javascript">
FB.init("123456789000000000","/xd_receiver.htm");
</script>

3. Then you just stay with your <fb:comments> tag, and the xmlns:fb=http://www.facebook.com/2008/fbml.

4. Follow the steps for the new version below!

The new version setup steps:
1. Add this attribute to your <html> tag:

xmlns:fb="http://www.facebook.com/2008/fbml"

so in the end your <html> tag will look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">

2. Add this code right after the <body> tag:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
      appId : 'YOUR APP ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml : true // parse XFBML
    });
};
(function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());
</script>

Change 'YOUR APP ID' with your application ID number, not the API like was before in the old version.

3. Drop your <fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name"></fb:comments> tag where you want in your page.
(but it must to be somewhere after (below it, not need to be right after) the code in step#2, and not before it)

NOTE: to use in a blogger blog, the above code should look like:

<fb:comments xid="xxxx" expr:url='data:post.url' ></fb:comments>

4. THE ATTRIBUTES
Go here and check all the attributes you can use.
XID: You better use the xid attribute:
1. Otherwise if you will make a change to your page url,
then all the comments that where on that page will be gone.
2. This is the only way you can add 2+ coments-boxes on the same page for individual items.
3. This is the only way you can show the same comments-box on 2+ different pages.
Because of all these reasons it's kind of making the XID as a "must" attribute, so go and add it!

URL: You better use the url attribute, otherwise visitors who will click on the link from the post on the facebook live stream, they may be redirected to the wrong page. Let's say if you got a website with 2 pages "home" and "news", then you present the latest news article from the 'news' page on your 'home' page, and you let visitors to comment about that article from the 'home' page too, then if you didn't use the right url with the url attribute, your visitors will be directed to the 'home' page and not to the specific news article page they friend commented on. And just the same thing will happen if a visitor click on the Like button that come with the comments-box. So this attribute helps to set correct the comments-box & the Like button that comes with it.

TITLE: use the title attribute so - when a visitor post a comment and that comment will show up on the visitor facebook profile page, then It will present that the comment posted in the page/article with that title you specified in the attribute.

Set or remove the Like botton:
(that comes with the comments-box above it)

Set the Like button - Open Graph protocol meta-tags:
For making the Like button to present your site content (the one that the visitor liked),
you will need to add some new facebook meta-tags called Open Graph
From this page:

To customize how your site shows up when users share your page with the Like button, you can add meta data to your web pages:
• og:title - The title of your page; if not specified, the title element will be used.
• og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
• og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
For example if you are creating a page about the movie 'The Rock' you would include this meta data:
<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Remove (Hide):
To hide the Like botton, you will need to add 2 attributes and create a CSS file.
1. simple="1"
2. css="http://yoursitedomainname.com/fb_comments.css"

<fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name" simple="1" css="http://yoursitedomainname.com/fb_comments.css"></fb:comments>

in the css file add this style code:

div.like {display:none;}

(You can learn more about these and other attributes here)

Programming Language Popularity Index

2010-05-05T01:29:00.001+01:00

Bellow are 3 ranks of popular programming languages. It's build with the "Language Popularity Index" tool, which is "a fully automatic, transparent, open-source and free tool to measure the popularity of programming languages on the Internet".

Surprise, surprise, the C programming language is again on the top (see the post "C programming language back at number 1 position!"). And Ada shows up on the 10th position for general-purpose and compiled languages! Wow.

Image from OpenPhoto

Language category: general-purpose and compiled

Rank	Name	Share
1	C	25.780%
2	Java	25.409%
3	C++	13.739%
4	Basic	10.416%
5	C#	9.613%
6	Delphi	2.925%
7	Pascal	1.601%
8	Objective-C	1.500%
9	Go	1.464%
10	Ada	1.090%

Language category: script

Rank	Name	Share
1	PHP	31.919%
2	Python	16.200%
3	Perl	10.997%
4	Ruby	7.418%
5	JavaScript	6.946%
6	R	3.279%
7	Lisp/Scheme	2.439%
8	MATLAB	2.415%
9	Lua	2.332%
10	Logo	1.646%

Language category: other

Rank	Name	Share
1	PL/SQL	26.769%
2	SAS	16.629%
3	ABAP	14.428%
4	COBOL	11.023%
5	Prolog	7.802%
6	Focus	5.110%
7	RPG (OS/400)	4.519%
8	LabView	3.750%
9	VHDL	2.777%
10	MUMPS	2.618%

Source and details: http://lang-index.sourceforge.net

State of the Internet Operating System

2010-05-02T22:29:00.001+01:00

Something interesting to be read:

State of the Internet Operating System - Part 1, Part 2. By Tim O'Reilly.

Keep your Blogger blog safe!

2010-05-02T18:00:00.001+01:00

This post contains some guidelines to improve the security level of your Blogger blog and some tips to recover control

Two reasons may have driven you to this page:

you are in trouble and I hope you can find some help here;
you came by chance and you had better check the following tips.

Believe me, security problems are real even if they haven't yet hit you. Here are some tips and guidelines you should follow.

Never give your username and password to other people. If you need someone to perform some administrative task for you, instead of giving the user name and password, add that person to the list of your blog administrators. If you what you need is just someone to post posts in your blog, give them only

Go to Permissions:

And invite authors. After the invitation has been accepted, they can become administrators (click "grant... admin privileges"). And you can also remove an existing user or downgrade an admin to a author:
Never give your username and password to other sites. Suppose you discover a site that says for example

"Invite your friends to your network. Just enter your username and password so we can scan your email list. Your account details will not be stored."

Never do this. This a great approach for other people to gain access to your account. Actually, never enter your account credentials in your site other than the one where you are supposed to perform the login (e.g.Gmail or Blogger).
Never grant access from other sites to your Google account. For example, Facebook can ask you access to your Google account to invite friends. It won't ask you the username and password. Instead, you will be redirected to the Google sign in page where you can grant access to Facebook. This is safer than giving the username and password to Facebook (see previous topic) but even thou, any security breach on Facebook can be exploited to access your Google account.
Check which sites currently have access to your Google account and seriously consider to remove all sites with granted access. You can see which sites currently have access to your Google account with the following steps:

- go to you Google account settings:

You can go directly there with this link: https://www.google.com/accounts/ManageAccount

- click "Change authorized websites"

- Click "Revoke Access"
Don't use the same username and password in all websites. Imagine that you are trying a new service and it asks you to register. Suppose that you use your usual username (a Google email) and password. If that site is a malicious one, then it can try to sign in to your Google account with the given credentials and, voilá!, they are in. You would be surprised with the number of persons that always use the same username and password everywhere.

Now you might be thinking about the madness of too many usernames and passwords. So you can define a strategy as follows:

- have a username and password that you only use for very important things and that you only uses in one place (your Google account, for example);

- in websites that requires you to register with your email and a password, never use the email's password in that site;

- even if you always use the same username every where, have 3 different passwords: one for your email, another for safe places (consider variations here to no be exactly the same password) and a password for all the other places that you don't care if you loose control there.
When choosing your password never use correct words. Add some numbers and/or other characters. Example: instead of luisiana use, for example, 1ui5iana<. Remember that it's easy for a hacker to use a dictionary and a software tool to try different password combinations.
In your Google blog, have multiple users with admin privileges. These users can be all different emails that belong to you. This way, if you loose the control of one email, you can use the other users to restore your control.
Fill all the data at https://www.google.com/accounts/UpdateAccountRecoveryOptions. Here you can enter several emails and mobile phone number where you can receive a recover link (in the email) or a SMS with a password-reset code (in your mobile). Also, write your own question/answer pair.
When you create your Google email, Google sends you an congratulations email which also contains a Verification code. This is a very important email because it's the only thing that allows your to recover your account control if all other things fail. Print it and save the email in different locations.
Be very careful with the widgets that you add to your template, particularly if they aren't supported by Google. I'm sure you don't want some malicious JavaScript sneaking around your blog.
Perform backups of your blog from time to time. Click "Export blog" and follow the instructions:

With these backups, later on you can import the blog to the same blog or into a new blog.
Finally, if you really value your blog and you invest lots of work on it, be sure to use a custom domain for it. Therefore, if you totally loose the control of the blog, you still can move to another platform without loosing the Google Rank.

To setup a custom domain, do the following:
- Click at "Custom Domain"

- If you don't have a domain already, you can buy it at Google and let it do all the settings for you:

Otherwise, click at "Advanced Settings":

and don't forget to perform the correct settings at your domain provider (see instructions here).
Security works better avoiding potential problems, so be sure to follow these guidelines before they arrive. When they do, however, use the links that Google to recover the control of your account.

How to regain control of the blog

So, even with all the precautions, you lost control of your blog. Try these approaches:

Start with tip 13.
If you weren't successful or if your blog is still being attacked, then try this:
- perform a blog backup (see tip 11) or use the latest backup you have;
- create a new blog with a new user (that is, create a new Gmail account to be used in this blog);
- import the blog into this new blog (see tip 11);
- change the custom domain (see tip 12) to point to this new blog. If you don't have a custom domain, you have to skip this step and, therefore, you will loose some page rank. This isn't dramatic. What ever made your blog's success will make them return again.

If you have other tips to suggest, just leave a comment. I will be glad to update this post and give you the credits for it :-)

Update: 2010-05-10

While checking for security problems, you should also have a look at your post by mail mail settings:

Be sure that the email posting address was inserted by you. And if you are posting by email, be sure that no one else knows the secret email for posting. Otherwise, new posts can appear on your blog without your consent.

How to Add Facebook's New "Like" Button to Blogger

2010-04-22T20:29:00.002+01:00

Facebook just lunched the "Like" button to be used in any page. To have it in your Blogger blog, do the following steps:

First, do a backup of your blogger template (see it here: Template actions: download, backup, edit and restore) .
Then edit your template and find the following text in the XML code:
<data:post.body/>
Tip: if you can't find it, try to search data:post.body until there is something similar and that ends with />

Place the following code after that line:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Result:

Changing the Like' button to 'Recommend'
If you prefer that your button says "Recommend" instead of "Like", it is just necessary to change the code of point 3: just change the action=like to say action=recommend. The following code does that:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=recommend&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Result:

Save the template and that's it.

There are other ways of doing this but the one recommended by Facebook (see here) won't work because it gives an Blogger gives an error when the template is being saved. Also, the approach given by Facebook won't allow individual "Likes" for each post (only for the whole blog).

Finally, If you prefer using the Facebook API ( to leave a comment on the "Liked" item), just have a look here.

Slate Wars: 15 Tablets That Could Rival Apple's iPad

2010-04-21T17:28:00.001+01:00

The iPad has captured many hearts and minds, but a fleet of rival tablets led by a separatist Android army is about to attack, armed with HD Flash video, multitouch screens, front-facing cameras, multitasking...even Windows 7. Let's take a look.

Windows - no disk Exception Processing Message c0000013 Parameters 75b6bf9c 4 75b6bf9c 75b6bf9c

2010-04-07T23:52:00.001+01:00

Há uns tempos que esta mensagem de erro me chateava de cada vez que arrancava o computador. Finalmente dei-me ao trabalho de procurar uma solução:

How to change your drive letter assignments in Windows XP or Vista to fix the "Windows - no disk" etc error message, and how to uninstall your floppy drive

C programming language back at number 1 position!

2010-04-07T19:12:00.001+01:00

C programming language back at number 1 position!

After more than 4 years C is back at position number 1 in the TIOBE index. The scores for C have been pretty constant through the years, varying between the 15% and 20% market share for almost 10 years. So the main reason for C's number 1 position is not C's uprise, but the decline of its competitor Java. Java has a long-term downward trend. It is losing ground to other languages running on the JVM. An example of such a language is JavaFX script that is now approaching the top 20. (…)

O iPad como mesa digitalizadora

2010-04-06T10:46:00.001+01:00

Por Carlos Martins:

Podem até utilizar o iPad como monitor secundário multitouch, utilizando uma App (ainda um pouco "verde" mas que demonstra as possibilidades que um iPad poderá ter - e considerando o custo de uma mesa digitalizadora com ecrã, abre boas perspectivas para o tipo de uso que se lhe poderá dar.)

Um argumento que (quase) me convence pelo brinquedo. Para ficar mesmo contente, era esta funcionalidade não ter os actuais problemas e meter no iPad USB e um leitor de cartões.

Esta e mais um bom lote de dicas sobre o iPad.

Montagem de um computador, peça a peça

2010-03-22T14:01:00.001Z

Cinco textos de Carlos Martins sobre a montagem de um computador, peça a peça. Muito bom.

[O meu PC - Making of]

Parte 1 - A montagem inicial
Parte 2 - A lista de componentes (e preços) e consumos eléctricos
Parte 3 - Alterações não-planeadas
Parte 4 - Montagem final
Parte 5 - O "Antes e Depois"

URL shortner: escolha o serviço certo

2010-03-17T15:43:00.001Z

Todos conhecem os serviços que tornam os URL mais curtos. Especialmente os utilizadores do Twitter. Escolha no entanto o serviço com ponderação. O goo.gl (da Google) é o melhor nos dois critérios apresentados. Mas não está disponível como um serviço autónomo. Em contrapartida, pode ser acedido através de:

uma extensão para o Chrome: https://chrome.google.com/extensions/detail/iblijlcdoidgdpfknkckljiocdbnlagk
Através do Google Toolbar:

http://googleblog.blogspot.com/2009/12/share-any-web-page-from-your-toolbar.html
Através do Feedburner: http://adsenseforfeeds.blogspot.com/2009/12/socializing-your-feed-with-twitter.html

Mais detalhes sobre o goo.gl num post do blog oficial da Google: Making URLs shorter for Google Toolbar and FeedBurner

Gráficos e texto mais detalhado: URL Shorteners Slow Down The Web – Especially Facebook’s FB.me

Efeito Conan

2010-03-11T15:23:00.001Z

O Conan O'Brien, agora em férias forçadas, decidiu criar finalmente a sua conta no Twitter e decidiu também mudar a vida de uma follower. Inicialmente, o Conan não seguia absolutamente ninguém, mas na semana passada decidiu seguir apenas uma única pessoa e isso mudaria a sua vida. E foi o que aconteceu a Sarah Killen, que já conta com 19.900 followers. continue a ler

Google Maps adds bike routes

2010-03-10T16:54:00.001Z

To create the mapping tool, Google developed an algorithm that uses several inputs — including designated bike lanes or trails, topography and traffic signals — to determine the best route for riding. The map sends you around, not over, hills. But if you really want to tackle that Category 1 climb, you can click and drag the suggested route anywhere you like, just like you can with pedestrian or driving routes. Users can suggest changes or make corrections to routes using the ever-present “report a problem” feature on Google Maps.
Read More http://www.wired.com/autopia/2010/03/google-maps-for-bikes/#ixzz0hnFEmFrg

Temas Wordpress mais ou menos gratuitos

2010-03-09T17:06:00.001Z

Encontram-se com facilidade temas gratuitos para o Wordpress. Mas como alguém disse, não há almoços grátis e algo terá que ser sempre pago, nem que seja apenas um link para o site do criador do tema. Acontece que por vezes algumas surpresas vêm escondidas no tema e é preciso estar a alerta:

Temas do Wordpress – Copyright a troco de segurança

«(…) alguns destes websites incluem “surpresas” nos temas. E por surpresas, digo código ofuscado de maneira a não ser perceptível pelo administrador do blog. Muitos websites alegam que se trata de código para manter os devidos créditos aos autores dos temas, e o ofuscam para mante-los. Mas será apenas esse o conteúdo que está por trás desse bloco de código? A verdade é que muitas vezes também é incluído código que permite rastrear utilizadores, incluir links para blackhat SEO, entre outras coisas» continuar a ler

Por isso se encontrou um fantástico tema Wordpress e acha que seria a cara do seu blog, assegure-se primeiro que faz uma pesquisa no Google com o nome do tema e com o termo "blackhat SEO". Depois perca algum tempo a ver o que se diz sobre esse tema. Poderá nada encontrar mas se não procurar também não saberá se há algo a ter em conta ;-)

Leitura adicional: A Diverse Portfolio of Scareware/Blackhat SEO Redirectors Courtesy of the Koobface Gang (ver também a lista Infowar Blogosphere na barra lateral).

Tools: Cloaking Detector

How to Choose Between Joomla, Drupal and Wordpress

2010-03-06T07:00:00.000Z

This post presents three summaries on how to choose between three content managers systems. These summaries provide you a quick overview but for deeper insight follow the links to the original articles.

The links for these CMS are

Enjoy and give your feedback.

1. From compassdesigns.net:

2. From goodwebpractices.com:

Wordpress Pros

Simple to use - No need for modifications
Excellent for blogging or sharing thoughts in a sequential manner
Even the most elderly of users can get the hang of it quickly

Wordpress Cons

Not developer friendly
The community seems to like to complain
Upgrades bring more bugs than fixes sometimes

Drupal Pros

Extremely developer friendly. If I loved code more I would almost always pick this system.
Strong community to help discern the dozens (hundreds) of functions and tags available.
Can be used to create some really awesome websites that can outperform a majority of other sites out there.

Drupal Cons

Not very designer and user-friendly. It's hard for someone with little code knowledge to make the leaps required to do the very cool things that Drupal is becoming known for.
Theming of Drupal has been a huge case of fail (until recently). Probably because it has been developers, not designers, that are making the themes.
Getting a Drupal website published could cost you more time, and thus more money, than Wordpress or Joomla.

Joomla Pros

Friendly for all types of users - Designers, Developers and Administrators
Huge community is awesome for assisting with creation of websites
Has been rapidly growing and improving itself for the past three years

Joomla Cons

Still not user-friendly enough for everyone to understand
Not quite as powerful as Drupal, and can be a bit confusing for some to jump into
Recently rebuilt the entire system from ground-up, and so there are still many out there sticking to the old versions (1.0.x)

From drupal.org

(yeah, it's one of three opinion's but they are realistic)

Drupal
* Rock solid & high quality platform
* Real multi-site-feature (only one installation for several sites)
* Any Kind of user groups & user permissions, OpenId compliant in Version 6
* Can run membership and community sites, not only CMS etc
* Powerful templating system. Any XHTML or CSS template can be easily converted to Drupal.
* Drupal needs a little time investment to realize all the huge possibilities of Drupal
* Clear, high quality code and API (easy to integrate with other solutions etc)
* Flexibility and no known limitations
* Many high profile sites use Drupal (e.g.: MTV UK, BBC, the Onion, Nasa, Greenpeace UK, New york observer. )

Joomla
* If you are not techy its good to start
* Easy install & setup with your mouse
* Easy learning curve
* Cannot integrate other scripts etc. to your site
* Generally you cannot create high-end sites, without investing huge amount
* No SEO out of the box, URLs are not search engine friendly.
* Server resources utilization is more compared to drupal
* Only one site per installation
* No Single Log-in to several sites
* No User groups & permissions
* More intuitive administration user interface
* Some polished modules for things like calendars, polls, etc.
* Modules cost you money

System Requirements:

* Drupal can work with MySQL and Postgres while Joomla is known to support only MySQL
* Drupal can work with Apache or IIS while Joomla is known to support only Apache
* Joomla support SSL logins and SSL pages. Drupal not known to support it.

Site Management

* Drupal has free add on for Workflow management. Joomla not known to have one.
* Drupal has inbuilt Translation manager. Joomla has a Free ad on for the same
* Drupal has more granular priviledge managment

Interoperability:

* Drupal has iCal support [Add on] , Joomla not known to have one.
* Drupal is XHTML Complaint. Joomla not known to be one.
* Drupal has excellent versioning and Audit trail which Joomla lacks

Browsers share (among web dev people)

2010-03-05T07:00:00.000Z

Here's some stats about the browsers share (among web dev people). Specifically, this data is collected from the visitors of the site W3Schools. So have this in consideration:

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.
These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users

Browser Statistics Month by Month:

Month	IE7	IE6	IE5	IE ALL	Firefox	Chrome	Safari	Opera
January, 2008	21.20%	32.00%	1.50%	54.70%	36.40%		1.90%	1.40%
February, 2008	22.70%	30.70%	1.30%	54.70%	36.50%		2.00%	1.40%
March, 2008	23.30%	29.50%	1.10%	53.90%	37.00%		2.10%	1.40%
April, 2008	24.90%	28.90%	1.00%	54.80%	39.10%		2.20%	1.40%
May, 2008	26.50%	27.30%	0.70%	54.50%	39.80%		2.40%	1.50%
June, 2008	27.00%	26.50%	0.50%	54.00%	41.00%		2.60%	1.70%
July, 2008	26.40%	25.30%		51.70%	42.60%		2.50%	1.90%
August, 2008	26.00%	24.50%		50.50%	43.70%		2.60%	2.10%
September, 2008	26.30%	22.30%		48.60%	42.60%	3.10%	2.70%	2.00%
October, 2008	26.90%	20.20%		47.10%	44.00%	3.00%	2.80%	2.20%
November, 2008	26.60%	20.00%		46.60%	44.20%	3.10%	2.70%	2.30%
December, 2008	26.10%	19.60%		45.70%	44.40%	3.60%	2.70%	2.40%
January, 2009	0.60%	25.70%	18.50%	44.80%	45.50%	3.90%	3.00%	2.30%
February, 2009	0.80%	25.40%	17.40%	43.60%	46.40%	4.00%	3.00%	2.20%
March, 2009	1.40%	24.90%	17.00%	43.30%	46.50%	4.20%	3.10%	2.30%
April, 2009	3.50%	23.20%	15.40%	42.10%	47.10%	4.90%	3.00%	2.20%
May, 2009	5.20%	21.30%	14.50%	41.00%	47.70%	5.50%	3.00%	2.20%
June, 2009	7.10%	18.70%	14.90%	40.70%	47.30%	6.00%	3.10%	2.10%
July, 2009	9.10%	15.90%	14.40%	39.40%	47.90%	6.50%	3.30%	2.10%
August, 2009	10.60%	15.10%	13.60%	39.30%	47.40%	7.00%	3.30%	2.10%
September, 2009	12.20%	15.30%	12.10%	39.60%	46.60%	7.10%	3.60%	2.20%
October, 2009	12.80%	14.10%	10.60%	37.50%	47.50%	8.00%	3.80%	2.30%
November, 2009	13.30%	13.30%	11.10%	37.70%	47.00%	8.50%	3.80%	2.30%
December, 2009	13.50%	12.80%	10.90%	37.20%	46.40%	9.80%	3.60%	2.30%
January, 2010	14.30%	11.70%	10.20%	36.20%	46.30%	10.80%	3.70%	2.20%
February, 2010	14.70%	11.00%	9.60%	35.30%	46.50%	11.60%	3.80%	2.10%

(click to zoom)

Data source: http://www.w3schools.com/browsers/browsers_stats.asp

Basically, FF has stop growing since April 2009, IE is continuously declining an Chrome is gaining ground. But please note the remark at the begin of the text: this is among the visitors of the site W3Schools.

For the global market, these are the numbers:

From: http://it-chuiko.com/internet/2659-top-5-browsers-data-for-february.html

Novo blog: Buzzluso

2010-03-04T22:27:00.001Z

Aí está, um blog de Ramiro Marques sobre buzzers em língua portuguesa.

http://www.buzzluso.com

Ganhando teias…

2010-03-04T14:00:00.000Z

O BaseDadosRamiro tem uma nova cara

2010-03-03T14:08:00.001Z

O BaseDadosRamiro tem uma nova cara

O blog BaseDadosRamiro é isso mesmo: uma base de dados sobre Educação onde guardo toda a legislação, estudos, relatórios e estatísticas.

(…)

A cara nova do blog tem a assinatura do editor do BrasilHighTech e foi construída com base em dois critérios: simplicidade do website e estética. Ninguém gosta de visitar um blog confuso, desarrumado e de cara feia.

Vale a pena manter um design limpo. Por melhores que sejam os conteúdos, a apresentação também conta.

MWSnap: um software de captura de ecrãs óptimo para blogar

2010-03-03T14:03:00.001Z

O software MWSnap serve para capturar ecrãs, mediar pedaços de ecrã e para capturar cores em uso. Uso-o regularmente, em conjunto com o Windows Live Writer, para colocar online imagens que ilustram os textos dos meus blogs. Usar um destes comandos para escolher a área a capturar:

O comando Área pré-definida é particularmente útil se se precisar de imagens com tamanho específico (ver mais a baixo as opções para configuração). Desta forma não é necessário usar um editor de imagem para recortar/redimensionar a imagem.

Adicionalmente, usando um visualizador de fotografias e tendo-se previamente feito o zoom adequado à fotografia, é uma forma rápida de obter um recorte da foto (com o comando Área pré-definida), pronto a usar no blog.

Com a opção auto-copiar após a captura da imagem (ver mais a baixo) logo depois da captura, a imagem fica no clipboard, pronta a colar no Windows Live Writer.

Instalação

1. Descarregar o executável e o pacote linguístico:

Links:

2. Instalar o executável e descomprimir o pacote linguístico para a sub-directoria Lang da directoria de instalação (tipicamente "C:\Program Files\MWSnap\Lang" ou "C:\Programas\MWSnap\Lang")

3. Ir ao menu e mudar a língua:

4. Opções

Note-se a possibilidade de auto-copiar após a captura da imagem.

Note-se na possibilidade de guardar a captura automaticamente.

Note-se a possibilidade de adicionar áreas com dimensões predefinidas, para se ter as capturas no tamanho pronto a usar.

Ver também:

Uma razão para ficar colado ao Firefox

2010-03-01T22:49:00.001Z

Bem, haverá várias. Mas há uma funcionalidade que não encontro em nenhum outro browser

e que me deixa colado ao Firefox, não arredando pé até haver igual noutros. Falo da possibilidade de pesquisar na página mal comece a escrever (se precisar de fazer CTRL+F, CTRL+L ou equivalentes).

É uma opção que não está activada por omissão mas para mim é uma delícia. Activa-se em (ver imagem supra): Tools | Options | Advanced | General | Search for text when I start typing.

A beleza desta funcionalidade é, por exemplo, fazer uma pesquisa no Google, abrir uma das páginas da pesquisa, escrever aquilo que se procura e, plim!, está-se lá. É rápido. Depois, basta fazer CTRL+G para ir para a ocorrência seguinte.

Feedly - A Chrome extension

2010-03-01T14:18:00.001Z

Feedly organizes your favorite sources in a magazine-like start page.

A magazine-like start page. A fast and stylish way to read and share the content of your favorite sites and services. Provides seamless integration with Google Reader, Twitter, Delicious, YouTube and Amazon.

Having it all in one page is nice. Also, specific categories can be added: check the tool bar

And clicking at the arrow of the toolbar, other tools become available:

The karma is nice and shows information about the number of clicks on some subject:

I suspect that this isn't very accurate but can be used to get an idea of the popularity of your posts.

Another thing I enjoy is the summary capability, showing the sites I follow in a list approach, making it easy to decide if it is worth reading:

So, that's it. Enjoy.

Notion Ink's ADAM

2010-02-25T13:57:00.001Z

Três aspectos que me parecem interessantes:

câmara rotativa - permite trabalhar e filmar uma apresentação ao mesmo tempo (com a câmara a 90º)
toutchpad nas costas do aparelho
excelente visibilidade mesmo com luz solar directa

Mais informações no Aberto até de Madrugada

New Wordpress template: Libetarion / web2feel

2010-02-22T10:16:00.001Z

Liberation is the latest News- magazine type of wordPress theme from web2feel.com. This is a widgetized 3 column theme with a magazine layout for the home page. Theme holds a featured post section in which posts from a featured category is displayed in a tabbed content style. a The home page displays latest posts and posts from specific categories. Theme also comes with a customizable “about us section” , Twitter widget, Featured video etc. There is a screencast explaining the setup process of the theme.

Links:

The designs made by Jinsona / web2feel.com are inspiring and it's worth a visit to its website. As if not enough, these templates are available for free!

Vaporware: Microsoft Courier Tablet Booklet

2010-02-21T03:57:00.001Z

Old news from September 24, 2009:

It looks like Microsoft is taking an exuberant stab at stealing the Apple Tablet's thunder. Microsoft's Courier tablet ...err "notebook" computer is reportedly in the "late prototype" stage of development. It is a tablet style computer that features dual multi-touch 7 inch displays in a clamshell configuration. A video posted on YouTube by Gizmodo (see below) demonstrates a mock-up of its exceptionally advanced interface. While there's no promising that this device will ever actually make it to production, if it does, it will satisfy the demands of both the tablet and netbook markets. (more)

Well, if it does what the video shows, then I'll want one of theese!

Pictures source

Let's see if this is just vaporware agains the Apple iPad.

Making Facebook 2x Faster

2010-02-21T03:10:00.001Z

An interesting post from the Facebook engineers about how they made the Facebook twice as faster.

Making Facebook 2x Faster

by Jason Sobel (notes) Thu at 11:25pm

Everyone knows the internet is better when it's fast. At Facebook, we strive to make our site as responsive as possible; we've run experiments that prove users view more pages and get more value out of the site when it runs faster. Google and Microsoft presented similar conclusions for their properties at the 2009 O'Reilly Velocity Conference.
So how do we go about making Facebook faster? The first thing we have to get right is a way to measure our progress. We want to optimize for users seeing pages as fast as possible so we look at the three main components that contribute to the performance of a page load:network time, generation time, and render time.

Components Explained

Network time represents how long a user is waiting while data is transmitted between their computer and Facebook. We can't completely control network time since some users are on slower connections than others, but we can reduce the number of bytes required to load a page; fewer bytes means less network time. The 5 main contributors to network time are bytes of cookies, HTML, CSS, JavaScript, and images.
Generation time captures how long it takes from when our webserver receives a request from the user to the time it sends back a response. This metric measures the efficiency of our code itself and also our webserver, caching, database, and network hardware. Reducing generation time is totally under our control and is accomplished through cleaner, faster code and constantly improving our backend architectures.
Render time measures how much time the user's web browser needs to process a response from Facebook and display the resultant web page. Like network time, we are somewhat constrained here by the performance and behavior of the various browsers but much is still under our control. The less we send back to the user, the faster the browser can display results, so minimizing bytes of HTML, CSS, JavaScript, and images also helps with render time. Another simple way to reduce render time is to execute as little JavaScript as possible before showing the page to the user.
The three metrics I describe are effective at capturing individual components of user perceived performance, but we wanted to roll them up into one number that would give us a high level sense of how fast the site is. We call this metric Time-to-Interact (TTI for short), and it is our best sense of how long the user has to wait for the important contents of a page to become visible and usable. On our homepage, for example, TTI measures the time it takes for the newsfeed to become visible.
First Steps

From early 2008 to mid 2009, we spent a lot of time following the best practices laid out by pioneers in the web performance field to try and improve TTI. For anyone serious about making a web site faster, Steve Souders's compilations are must-reads: High Performance Web Sitesand Even Faster Web Sites. We also developed some impressive technologies of our own to measure and improve the performance of Facebook as described at the 2009 O’Reilly Velocity Conference by two Facebook engineers, David Wei and Changhao Jiang.
By June of 2009 we had made significant improvements, cutting median render time in half for users in the United States. This was great progress, but in the meantime, Facebook had exploded in popularity all across the globe and we needed to start thinking about a worldwide audience. We decided to measure TTI at the 75th percentile for all users as a better way to represent how fast the site felt. After looking at the data, we set an ambitious goal to cut this measurement in half by 2010; we had about six months to make Facebook twice as fast.
Six Months and Counting...

On closer inspection, our measurements told us that pages were primarily slow because of network and render time. Our generation time definitely had (and still has) significant room to improve but it wouldn't provide the same bang for the buck. So we devoted most of our engineering effort towards two goals: drastically cutting down the bytes of cookies, HTML, CSS, and JavaScript required by a Facebook page while also developing new frameworks and methodologies that would allow the browser to show content to the user as quickly as possible.
Cutting back on cookies required a few engineering tricks but was pretty straightforward; over six months we reduced the average cookie bytes per request by 42% (before gzip). To reduce HTML and CSS, our engineers developed a new library of reusable components (built on top of XHP) that would form the building blocks of all our pages. Before the development of this component library, each page would rely on a lot of custom HTML and CSS even though many pages shared similar features and functionality. With the component library, it’s easy to optimize our HTML in one place and see it pay off all across the site. Another benefit is that, since the components share CSS rules, once a user has downloaded some CSS it’s very likely those rules will be reused on the next page instead of needing to download an entirely new set. Due to these efforts, we cut our average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip). These dramatic reductions mean we get our content to users faster and browsers can process it more quickly.
Cutting back on JavaScript was another challenging problem. Facebook feels like a dynamic and engaging site in large part due to the JavaScript functionality we've created, but as we added more and more features, we wrote more and more JavaScript which users have to download to use the site. Remember that downloading and executing JavaScript are two of the main issues we need to combat to improve network and render time. To address this problem our engineers took a step back and looked at what we were using JavaScript to accomplish. We noticed that a relatively small set of functionality could be used to build a large portion of our features yet we were implementing them in similar-but-different ways. This common functionality could be provided in a very small, efficient library that is also cacheable on the user's computer. We set out to rewrite our core interactions on top of this new library, called Primer, and saw a massive 40% decrease (after gzip) in average JavaScript bytes per page. Since Primer is downloaded quickly and then cached for use on future page views, it also means that features built exclusively on Primer are immediately usable when they appear on the screen; there's no need to wait for further JavaScript to download. An example of such a feature is our feedback interface which allows users to comment on, like, and share content and appears all across Facebook.
Another project I'd like to highlight requires a little more setup. As described earlier, the traditional model for loading a web page involves a user sending a request to a server, the server generating a response which is sent back to the browser, and the browser converting the response in to something the user can see and interact with. If you think about this model there is a glaring problem. Let's say it takes a few hundred milliseconds for the server to completely prepare and send a response back to the user. While the server is chugging through its work the browser is just sitting there uselessly, waiting for something to do and generally being lazy. What if we could pipeline this whole procedure? Wouldn't it be great if the server could do a little bit of work, say in ten or fifty milliseconds, and then send a partial response back to the browser which can then start downloading JavaScript and CSS or even start displaying some content? Once the server has done some more processing and has produced another bit of output it can send that back to the browser as well. Then we just repeat the process until the server has nothing left to do. We've overlapped a significant portion of the generation time with the render time which will reduce the overall TTI experienced by the user.
Over the last few months we've implemented exactly this ability for Facebook pages. We call the whole system BigPipe and it allows us to break our web pages up in to logical blocks of content, called Pagelets, and pipeline the generation and render of these Pagelets. Looking at the home page, for example, think of the newsfeed as one Pagelet, the Suggestions box another, and the advertisement yet another. BigPipe not only reduces the TTI of our pages but also makes them seem even faster to users since seeing partial content earlier feels faster than seeing complete content a little bit later.
Success!

I'm pleased to say that on December 22nd, as a result of these and other efforts, we declared victory on our goal to make the site twice as fast. We even had 9 whole days to spare!

After hitting the 2x site speed goal the team celebrated with t-shirts. And dinner (not pictured).

I hope that you've personally experienced and appreciated the improvements we've made in site speed and that this post has given you some insight in to how we think about and approach performance projects at Facebook. Stay tuned for more details on many of the projects I mention here in future blog posts and industry conferences. In 2010 look for the site to get even faster as we tackle new challenges!
Jason, an engineer at Facebook, wants to remind you that perf graphs go the wrong way.

Como fazer cópia de segurança dos posts do blog

2010-02-20T14:03:00.001Z

Neste post mostra-se como fazer cópia de segurança dos posts do blog. Pode exportar o seu blogue para o formato de exportação Blogger Atom. Pode fazê-lo para mover o seu blogue para outro serviço de blogues ou apenas para o armazenar no disco rígido. O seu blogue não será alterado, continuando online como antes.

Entre no blog em www.blogger.com
Clique em Definições e depois em Básico
Clique em Exportar blogue
Clique em TRANSFERIR BLOGUE e depois, na janela de diálogo, seleccione Guardar para ficheiro (Save to file), clique em OK e escolha o nome do ficheiro onde ficará guardado o blogue.

Fácil, não é? Desta forma, se perder o acesso ao blogue, não perde os conteúdos.

Note que são guardados os posts, os comentários e as etiquetas dos posts.

Tendo o blog guardado, pode criar um novo blog e para ele transferir os posts, comentários e etiquetas que antes tinha guardado. Para isso clique em Importar blogue e siga as instruções.

Leitura adicional: How do I import and export blogs on Blogger?

Como adicionar o seu site ou blog ao Buzz

2010-02-19T15:41:00.001Z

O Google associa a maior parte dos seus blogs à sua conta Google. Estes podem ser adicionados ao seu Buzz clicando em no link "Connected Sites" ao lado do seu perfil:

Desta forma, os seus blog posts são automaticamente adicionados ao Buzz.

Mas como fazer se o blog ou site a conectar não estiver na lista "Connect more sites"? Neste caso, siga estas instruções:

Faça uma cópia de segurança da template (ver aqui como)
edite a sua template e procure o texto </head>
abra uma linha por cima e adicione o seguinte texto

<link rel="me" type="text/html" href="http://www.google.com/profiles/profilename"/>

nota: substitua profilename pelo perfil da sua conta Google.
Grave a template
Vá a https://sgapi-recrawl.appspot.com/ e clique em Recrawl

nota: se o site pretendido não estiver nesta lista, terá que aguardar uns dias até que o robot do Google volte a passar no seu site
Volte ao Buzz e clique no link "connected sites" e adicione os que novos sites

F*ck You, Google

2010-02-19T15:19:00.001Z

Um texto interessante sobre a questão da privacidade do Google Buzz (destaques meus). É de notar que há uma diferença fundamental aderir livremente a uma rede social, como se pode fazer com o Facebook e tantas outras, ou ser incluído sem permissão prévia numa delas, como fez a Google. A tecnologia do Buzz é muito interessante mas a atitude da Google é imperdoável.

F*ck You, Google

I use my private Gmail account to email my boyfriend and my mother. There's a BIG drop-off between them and my other "most frequent" contacts. You know who my third most frequent contact is. My abusive ex-husband.

Which is why it's SO EXCITING, Google, that you AUTOMATICALLY allowed all my most frequent contacts access to my Reader, including all the comments I've made on Reader items, usually shared with my boyfriend, who I had NO REASON to hide my current location or workplace from, and never did.

My other most frequent contacts? Other friends of Flint's.

Oh, also, people who email my ANONYMOUS blog account, which gets forwarded to my personal account. They are frequent contacts as well. Most of them, they are nice people. Some of them are probably nice but a little unbalanced and scary. A minority of them - but the minority that emails me the most, thus becoming FREQUENT - are psychotic men who think I deserve to be raped because I keep a blog about how I do not deserve to be raped, and this apparently causes the Hulk rage.

I can't block these people, because I never made a Google profile or Buzz profile, due to privacy concerns (apparently and resoundingly founded!). Which doesn't matter anyway, because every time I do block them, they are following me again in an hour. I'm hoping that they, like me, do not realize and are not intentionally following me, but that's the optimistic half of the glass. My pessimistic half is of the abyss, and it is staring back at you with a redolent stink-eye.

Oh, yes, I suppose I could opt out of Buzz - which I did when it was introduced, though that apparently has no effect on whether or not I am now using Buzz - but as soon as I did that, all sorts of new people were following me on my Reader! People I couldn't block, because I am not on Buzz!

Fuck you, Google. My privacy concerns are not trite. They are linked to my actual physical safety, and I will now have to spend the next few days maintaining that safety by continually knocking down followers as they pop up. A few days is how long I expect it will take before you either knock this shit off, or I delete every Google account I have ever had and use Bing out of fucking spite.

Fuck you, Google. You have destroyed over ten years of my goodwill and adoration, just so you could try and out-MySpace MySpace.

Harriet Jacobs is the nom de plume of the author of Fugitivus. She's a mid-twenties white girl living in the Midwest, working at a non-profit that assists families and deals with a lot of racial politics. Harriet has had a fucked-up life, and Fugitivus
—fugitive—is her space to talk, where the fucked-up people who did the fucked-up things couldn't find her and be creepy.

Bad Valentine is our own special take on the beauty—and awkwardness—of geek love.

Update: The original blog posting has been updated and made private.

The author of this post can be contacted at tips@gizmodo.com

Porque falham os projectos de software?

2010-02-19T07:00:00.000Z

Os projectos de software, como quaisquer outros, por vezes falham. Projectos de longa duração (anos) e de maior dimensão têm maior risco de serem cancelados. E é precisamente quando o prazo de conclusão se aproxima que a decisão acaba por se colocar em cima a mesa: vale a pena investir mais uma pipa de dinheiro num projecto que não vai estar concluído no prazo esperado ou para o qual as funcionalidades serão substancialmente diferentes daquelas que se havia projectado? Esse é o momento em que se faz mais um esforço ou em que se decide secar o sorvedouro. A título de exemplo, estatísticas mostram que os projectos com pleno sucesso (terminados no prazo e dentro do orçamento) andarão pela casa de apenas 30%.

O artigo no fim deste texto, em inglês, é uma interessante dissertação sobre o tema. Entre os factores de falha apontados no artigo, estes são destacados:

Objectivos irrealistas ou desarticulados para o projecto
Inadequada estima dos recursos necessários
Requisitos de sistema mal definidos
Informação deficiente quanto ao estado do projecto
Riscos não geridos
Comunicação deficiente entre cliente, implementadores e utilizadores
Uso de tecnologia imatura
Incapacidade para gerir a complexidade do projecto
Práticas de desenvolvimento desleixadas
Deficiente gestão de projecto
Parceiros de negócio políticos
Pressões comerciais

Vem esta conversa a propósito do anuncio do governo em gastar 15 milhões de euros num projecto de software para o Ministério da Educação e em gastar outros 15 milhões na manutenção operacional deste software durante quatro anos.

15 milhões para desenvolver um projecto de software é uma pipa de dinheiro. Para se ter uma percepção, uma pesquisa no Google devolve alguns exemplos que permitem contextualizar esta grandeza (para simplificação, asumo 1€ = $1USD). Ver por exemplo este, este e este. Ou visto ainda de outra forma, 15 milhões de euros daria para manter uma equipa de cerca 100 pessoas a trabalhar durante dois anos, com cada membro da equipa a "ganhar" 6000 € brutos (valor bruto para incluir impostos, despesas de funcionamento e lucro do negócio). É mesmo um negócio-lotaria.

Assim sendo, supõe-se que as melhores práticas tenham sido usadas para definir os objectivos do projecto, minimizando desde logo o primeiro dos riscos da lista anterior. Supõem-se igualmente que se tenha elaborado um bom caderno de encargos e que este tenha sido apresentado a concurso, para assim se obter a melhor solução.

Não. Nada disto foi feito. Pelo contrário, o governo decidiu gastar uma página A4 do Diário da República em propaganda e optou por entregar um projecto desta dimensão por ajuste directo. Quais são os objectivos do projecto? Não se sabe. Apenas foi publicada uma descrição lacónica.

A questão aqui está em não ser possível saber se 15 milhões de euros é muito ou pouco para o projecto em causa. Pela simples razão de não se saber o que se pretende construir. Apenas sabemos, como vimos,que um valor desta grandeza corresponde um projecto de dimensão considerável. Portanto, ainda mais espanta a leviandade na sua definição.

Mais surpreendente do que o valor do projecto de desenvolvimento são os 15 milhões de euros para gastar durante quatro anos em manutenção operacional do projecto. São mais de 10 mil euros por dia durante quatro anos (365 dias por ano). Que produção tão astronómica vai ser então produzida diariamente? Não se sabe.

Na anterior lista de riscos que levam os projectos a falhar hão-de ser poucos os que não se venha a concretizar neste projecto. É isto a visão Simplex deste governo?

Artigo: Why Software Fails

Why Software Fails
By Robert N. Charette
First Published September 2005

We waste billions of dollars each year on entirely preventable mistakes
Have you heard the one about the disappearing warehouse? One day, it vanished—not from physical view, but from the watchful eyes of a well-known retailer's automated distribution system. A software glitch had somehow erased the warehouse's existence, so that goods destined for the warehouse were rerouted elsewhere, while goods at the warehouse languished. Because the company was in financial trouble and had been shuttering other warehouses to save money, the employees at the "missing" warehouse kept quiet. For three years, nothing arrived or left. Employees were still getting their paychecks, however, because a different computer system handled the payroll. When the software glitch finally came to light, the merchandise in the warehouse was sold off, and upper management told employees to say nothing about the episode.

This story has been floating around the information technology industry for 20-some years. It's probably apocryphal, but for those of us in the business, it's entirely plausible. Why? Because episodes like this happen all the time. Last October, for instance, the giant British food retailer J Sainsbury PLC had to write off its US $526 million investment in an automated supply-chain management system. It seems that merchandise was stuck in the company's depots and warehouses and was not getting through to many of its stores. Sainsbury was forced to hire about 3000 additional clerks to stock its shelves manually [see photo, "Market Crash"]

This is only one of the latest in a long, dismal history of IT projects gone awry [see table, "Software Hall of Shame" for other notable fiascoes]. Most IT experts agree that such failures occur far more often than they should. What's more, the failures are universally unprejudiced: they happen in every country; to large companies and small; in commercial, nonprofit, and governmental organizations; and without regard to status or reputation. The business and societal costs of these failures—in terms of wasted taxpayer and shareholder dollars as well as investments that can't be made—are now well into the billions of dollars a year.

The problem only gets worse as IT grows ubiquitous. This year, organizations and governments will spend an estimated $1 trillion on IT hardware, software, and services worldwide. Of the IT projects that are initiated, from 5 to 15 percent will be abandoned before or shortly after delivery as hopelessly inadequate. Many others will arrive late and over budget or require massive reworking. Few IT projects, in other words, truly succeed.

The biggest tragedy is that software failure is for the most part predictable and avoidable. Unfortunately, most organizations don't see preventing failure as an urgent matter, even though that view risks harming the organization and maybe even destroying it. Understanding why this attitude persists is not just an academic exercise; it has tremendous implications for business and society.

SOFTWARE IS EVERYWHERE. It's what lets us get cash from an ATM, make a phone call, and drive our cars. A typical cellphone now contains 2 million lines of software code; by 2010 it will likely have 10 times as many. General Motors Corp. estimates that by then its cars will each have 100 million lines of code.

The average company spends about 4 to 5 percent of revenue on information technology, with those that are highly IT dependent—such as financial and telecommunications companies—spending more than 10 percent on it. In other words, IT is now one of the largest corporate expenses outside employee costs. Much of that money goes into hardware and software upgrades, software license fees, and so forth, but a big chunk is for new software projects meant to create a better future for the organization and its customers.

Governments, too, are big consumers of software. In 2003, the United Kingdom had more than 100 major government IT projects under way that totaled $20.3 billion. In 2004, the U.S. government cataloged 1200 civilian IT projects costing more than $60 billion, plus another $16 billion for military software.

Any one of these projects can cost over $1 billion. To take two current examples, the computer modernization effort at the U.S. Department of Veterans Affairs is projected to run $3.5 billion, while automating the health records of the UK's National Health Service is likely to cost more than $14.3 billion for development and another $50.8 billion for deployment.

Such megasoftware projects, once rare, are now much more common, as smaller IT operations are joined into "systems of systems." Air traffic control is a prime example, because it relies on connections among dozens of networks that provide communications, weather, navigation, and other data. But the trick of integration has stymied many an IT developer, to the point where academic researchers increasingly believe that computer science itself may need to be rethought in light of these massively complex systems.

When a project fails, it jeopardizes an organization's prospects. If the failure is large enough, it can steal the company's entire future. In one stellar meltdown, a poorly implemented resource planning system led FoxMeyer Drug Co., a $5 billion wholesale drug distribution company in Carrollton, Texas, to plummet into bankruptcy in 1996.

IT failure in government can imperil national security, as the FBI's Virtual Case File debacle has shown. The $170 million VCF system, a searchable database intended to allow agents to "connect the dots" and follow up on disparate pieces of intelligence, instead ended five months ago without any system's being deployed [see "Who Killed the Virtual Case File?" in this issue].

IT failures can also stunt economic growth and quality of life. Back in 1981, the U.S. Federal Aviation Administration began looking into upgrading its antiquated air-traffic-control system, but the effort to build a replacement soon became riddled with problems [see photo, "Air Jam"]. By 1994, when the agency finally gave up on the project, the predicted cost had tripled, more than $2.6 billion had been spent, and the expected delivery date had slipped by several years. Every airplane passenger who is delayed because of gridlocked skyways still feels this cancellation; the cumulative economic impact of all those delays on just the U.S. airlines (never mind the passengers) approaches $50 billion.

Worldwide, it's hard to say how many software projects fail or how much money is wasted as a result. If you define failure as the total abandonment of a project before or shortly after it is delivered, and if you accept a conservative failure rate of 5 percent, then billions of dollars are wasted each year on bad software.

For example, in 2004, the U.S. government spent $60 billion on software (not counting the embedded software in weapons systems); a 5 percent failure rate means $3 billion was probably wasted. However, after several decades as an IT consultant, I am convinced that the failure rate is 15 to 20 percent for projects that have budgets of $10 million or more. Looking at the total investment in new software projects—both government and corporate—over the last five years, I estimate that project failures have likely cost the U.S. economy at least $25 billion and maybe as much as $75 billion.

Of course, that $75 billion doesn't reflect projects that exceed their budgets—which most projects do. Nor does it reflect projects delivered late—which the majority are. It also fails to account for the opportunity costs of having to start over once a project is abandoned or the costs of bug-ridden systems that have to be repeatedly reworked.

Then, too, there's the cost of litigation from irate customers suing suppliers for poorly implemented systems. When you add up all these extra costs, the yearly tab for failed and troubled software conservatively runs somewhere from $60 billion to $70 billion in the United States alone. For that money, you could launch the space shuttle 100 times, build and deploy the entire 24-satellite Global Positioning System, and develop the Boeing 777 from scratch—and still have a few billion left over.

Why do projects fail so often »

Among the most common factors:

* Unrealistic or unarticulated project goals
* Inaccurate estimates of needed resources
* Badly defined system requirements
* Poor reporting of the project's status
* Unmanaged risks
* Poor communication among customers, developers, and users
* Use of immature technology
* Inability to handle the project's complexity
* Sloppy development practices
* Poor project management
* Stakeholder politics
* Commercial pressures

Of course, IT projects rarely fail for just one or two reasons. The FBI's VCF project suffered from many of the problems listed above. Most failures, in fact, can be traced to a combination of technical, project management, and business decisions. Each dimension interacts with the others in complicated ways that exacerbate project risks and problems and increase the likelihood of failure.

Consider a simple software chore: a purchasing system that automates the ordering, billing, and shipping of parts, so that a salesperson can input a customer's order, have it automatically checked against pricing and contract requirements, and arrange to have the parts and invoice sent to the customer from the warehouse.

The requirements for the system specify four basic steps. First, there's the sales process, which creates a bill of sale. That bill is then sent through a legal process, which reviews the contractual terms and conditions of the potential sale and approves them. Third in line is the provision process, which sends out the parts contracted for, followed by the finance process, which sends out an invoice.

Let's say that as the first process, for sales, is being written, the programmers treat every order as if it were placed in the company's main location, even though the company has branches in several states and countries. That mistake, in turn, affects how tax is calculated, what kind of contract is issued, and so on.

The sooner the omission is detected and corrected, the better. It's kind of like knitting a sweater. If you spot a missed stitch right after you make it, you can simply unravel a bit of yarn and move on. But if you don't catch the mistake until the end, you may need to unravel the whole sweater just to redo that one stitch.

If the software coders don't catch their omission until final system testing—or worse, until after the system has been rolled out—the costs incurred to correct the error will likely be many times greater than if they'd caught the mistake while they were still working on the initial sales process.

And unlike a missed stitch in a sweater, this problem is much harder to pinpoint; the programmers will see only that errors are appearing, and these might have several causes. Even after the original error is corrected, they'll need to change other calculations and documentation and then retest every step.

In fact, studies have shown that software specialists spend about 40 to 50 percent of their time on avoidable rework rather than on what they call value-added work, which is basically work that's done right the first time. Once a piece of software makes it into the field, the cost of fixing an error can be 100 times as high as it would have been during the development stage.

If errors abound, then rework can start to swamp a project, like a dinghy in a storm. What's worse, attempts to fix an error often introduce new ones. It's like you're bailing out that dinghy, but you're also creating leaks. If too many errors are produced, the cost and time needed to complete the system become so great that going on doesn't make sense.

In the simplest terms, an IT project usually fails when the rework exceeds the value-added work that's been budgeted for. This is what happened to Sydney Water Corp., the largest water provider in Australia, when it attempted to introduce an automated customer information and billing system in 2002 [see box, "Case Study #2"]. According to an investigation by the Australian Auditor General, among the factors that doomed the project were inadequate planning and specifications, which in turn led to numerous change requests and significant added costs and delays. Sydney Water aborted the project midway, after spending AU $61 million (US $33.2 million).

All of which leads us to the obvious question: why do so many errors occur?

Software project failures have a lot in common with airplane crashes. Just as pilots never intend to crash, software developers don't aim to fail. When a commercial plane crashes, investigators look at many factors, such as the weather, maintenance records, the pilot's disposition and training, and cultural factors within the airline. Similarly, we need to look at the business environment, technical management, project management, and organizational culture to get to the roots of software failures.

Chief among the business factors are competition and the need to cut costs. Increasingly, senior managers expect IT departments to do more with less and do it faster than before; they view software projects not as investments but as pure costs that must be controlled.

Political exigencies can also wreak havoc on an IT project's schedule, cost, and quality. When Denver International Airport attempted to roll out its automated baggage-handling system, state and local political leaders held the project to one unrealistic schedule after another. The failure to deliver the system on time delayed the 1995 opening of the airport (then the largest in the United States), which compounded the financial impact manyfold.

Even after the system was completed, it never worked reliably: it chewed up baggage, and the carts used to shuttle luggage around frequently derailed. Eventually, United Airlines, the airport's main tenant, sued the system contractor, and the episode became a testament to the dangers of political expediency.

A lack of upper-management support can also damn an IT undertaking. This runs the gamut from failing to allocate enough money and manpower to not clearly establishing the IT project's relationship to the organization's business. In 2000, retailer Kmart Corp., in Troy, Mich., launched a $1.4 billion IT modernization effort aimed at linking its sales, marketing, supply, and logistics systems, to better compete with rival Wal-Mart Corp., in Bentonville, Ark. Wal-Mart proved too formidable, though, and 18 months later, cash-strapped Kmart cut back on modernization, writing off the $130 million it had already invested in IT. Four months later, it declared bankruptcy; the company continues to struggle today.

Frequently, IT project managers eager to get funded resort to a form of liar's poker, overpromising what their project will do, how much it will cost, and when it will be completed. Many, if not most, software projects start off with budgets that are too small. When that happens, the developers have to make up for the shortfall somehow, typically by trying to increase productivity, reducing the scope of the effort, or taking risky shortcuts in the review and testing phases. These all increase the likelihood of error and, ultimately, failure.

A state-of-the-art travel reservation system spearheaded by a consortium of Budget Rent-A-Car, Hilton Hotels, Marriott, and AMR, the parent of American Airlines, is a case in point. In 1992, three and a half years and $165 million into the project, the group abandoned it, citing two main reasons: an overly optimistic development schedule and an underestimation of the technical difficulties involved. This was the same group that had earlier built the hugely successful Sabre reservation system, proving that past performance is no guarantee of future results.

Inicialmente publicado a 21-05-2009

Nota: com este texto termina a série de republicações.

5 dicas para melhor aproveitar o Google Buzz

2010-02-18T22:22:00.001Z

Ler em 5 dicas para melhor aproveitar o Google Buzz

Microsoft Outlook Social Connector

2010-02-18T12:32:00.001Z

Depois do estrondo que foi o Google Buzz, é a vez da Microsoft apanhar o comboio, com o Microsoft Outlook 2010.

Detalhes no blog do Miscroft Outlook: Announcing the Outlook Social Connector.

O Linkedin, rede social mais vocacionada para o mercado de emprego, já disponibiliza no seu site um conector para esta nova funcionalidade.

Web PC

2010-02-18T07:00:00.000Z

Quanto a este novo fôlego na guerra dos browsers, abriu JCD do blog Blasfémias a discussão com o post "Competição a Zero €uros".

Sobre o tema em questão, há sem dúvida muito dinheiro evolvido. Com a largura de banda a aumentar regularmente e com o advento do DSL (ou ADSL para os "pobres"), a computação distribuída ganhou novo fôlego. Do servidor central com terminais passámos para a informática pessoal do PC. Um notável percurso que culminou com o domínio da Microsoft graças a estratégias diversas - e nem todas de cariz tecnológico. No universo Windows o consumidor, perdão, o utilizador, compra uma máquina e licenças de utilização dum conjunto completo de software, desde o sistema operativo até aos pacotes de produtividade. O core businesses da Microsoft reside precisamente nesta particularidade de se estar agarrado à plataforma pelo sistema operativo e pelas suas aplicações.

Neste ponto entra em jogo o factor "Internet & banda larga". Estas ligações em rede, cada vez mais rápida e de maior capacidade, permitem voltar ao conceito do servidor com os seus terminais. Excepto que estes, contrariamente aos primeiros, não são "estúpidos" - têm capacidade de processamento local. Este facto aliado à ligação em rede traz um novo conceito de computação para a generalidade dos utilizadores, sendo a peça chave o software que permita integrar a capacidade de processamento local com a do servidor à qual se está ligado em rede e que, até ao momento tem sido o browser.

O Google Chrome não é apenas mais um browser. Constitui a entrada dum novo actor num momento de mudança de paradigma. Opções tecnológicas, descritas num anterior texto, como um site web corresponder a um processo, a existência duma framework para alargar as funcionalidades do browser e o suporte à comunidade de programadores indicam que o Chrome poderá vir a constituir uma nova plataforma aplicacional. Em vez de se desenvolverem aplicações para Windows, Mac ou Linux, desenvolvem-se para o Chrome . Não importa que máquina e que sistema operativo está o utilizador a usar. Basta que corra o Chrome e tenha ligação à net.

Em certa medida, os actuais browsers já são usados como plataformas aplicacionais mas apenas para áreas específicas. O lucrativo feudo das aplicações de produtividade como processamento de texto, imagem, dados, etc. ainda é praticamente exclusivo ao tradicional software para computador pessoal. Quem quiser entrar e vencer neste mercado tem que fazer melhor e mais barato do que a concorrência. E mesmo assim não tem garantido o sucesso. Vejam-se os casos do OpenOffice (gratuito) e do StarOffice (cerca de 70 dólares) que são funcionalmente equivalentes ao Microsoft Office, mais baratos, compatíveis até ao nível do formato de documentos (até a Microsoft ter mudado e patenteado um novo formato de ficheiros no Office XP) e, no entanto, estas aplicações não arrasaram o mercado da Microsoft.

Com a computação distribuída que a web actualmente permite, as empresas de software deixam de ter que competir no terreno Microsoft. Por outro lado, os utilizadores deixam de estar agarrados ao sistema operativo e às suas aplicações específicas. Talvez fiquem agarrados ao browser ou à nova plataforma que o substitua. Mas, garantidamente, deixam de estar dependentes dum sistema e das suas aplicações.

Esta mudança é substancial, comparável à mudança do MS-DOS para Windows. O Wordperfect perdeu para o Microsoft Office. Veremos a repetição do dono da nova plataforma conseguir impor o seu pacote aplicacional como o standard de mercado? É um caso a seguir, até porque a concorrência não dorme.

Publicado originalmente a 11-09-2008

Imagem: Linutop touts tiny diskless Linux web PC (artigo de Nov. 2006)

Digital Rights Management

2010-02-17T14:56:00.001Z

Um excelente artigo sobre Digital Rights Management (DRM):

How to break DRM (iTunes, DVD, etc) for lawful purposes

(copying for back-up, transcoding into different devices)

This page was written with non-techie people in mind. If you read SlashDot or BoingBoing, if you're active in the anti-DRM movement, etc, then this page will have nothing new for you. But if you are an "average computer user", then you probably think that breaking DRM is too hard, too complicated, impossible, or illegal. This page is for you.

9 anos de Google

2010-02-17T07:00:00.000Z

Ora aí está, 9 anos a googlar. Entre nós não é costume mas no inglês da América é prática corrente construir novos verbos a partir de substantivos (É curioso, não seria capaz de dizer isto usando a TLEBS!) Assim, no contexto anglo-saxónico, "to google" é equivalente a pesquisar. Até existe uma entrada na Wikipedia sobre este assunto: link.

Estava na faculdade quando isto do serviço Internet www começou a fervilhar entre a comunidade universitária. "Ir à net" era então uma expressão inexistente, mas existindo significaria ir até ao laboratório da faculdade, utilizar uma estação de trabalho Sun e, usando o Netscape, e consultar uma ou outra página nova, já que as existentes raramente eram actualizadas.

Recordo-me perfeitamente dum colega que tinha encontrado a página pessoal - era assim que eram chamadas as páginas web - onde o autor mantinha uma lista de endereços favoritos. Na altura já ia em centenas! Estas páginas terão sido os primeiros portais. Alguém lhes antecipava a importância que viriam a ter? Eu não, infelizmente. No entanto houve que visse esse potencial e apostasse forte. Yahoo, Infoseek, Altavista e vários outros foram desbravando o caminho. O Google foi dos últimos a chegar e triunfou graças à velocidade com que devolvia os resultados e à capacidade em apresentar resultados relevantes, com o algoritmo PageRank (link).

Curiosamente, foi também graças a este algoritmo que sugiram as chamadas Google Bombs (link). Consiste em diferentes páginas web conterem uma frase igual a apontar para um mesmo endereço. Na campanha eleitoral de Bush em 2004, o termo "miserable failure" foi usando sistematicamente como texto do link para página da biografia de GWBush. Assim, uma pesquisa com estes termos enganava o algoritmo do Google e uma página não relacionada aparecia no topo dos resultados.

Nove anos depois, esta empresa continua a inovar em grande escala e, neste momento, é o rival da Microsoft, com reais possibilidades de lhe fazer o que ela havia feito à IBM: destrona-la do lugar de nº 1 da informática mundial. E o infortúnio, para a Microsoft, acontece pela mudança de paradigma. Tal como o mainframe, o servidor central, foi destronado graças ao computador pessoal, também o conceito "um sistema operativo+um conjunto de aplicações=um utilizador", ganha pão da Microsoft, se tornará obsoleto perante o reaparecer do conceito dum servidor central e múltiplos clientes a ele ligados. Isto está a tornar-se possível graças ao ADSL e as suas crescentes velocidades de ligação.

A Microsoft, claro, não está a dormir e já lançou o serviço Windows Live, cópia chapada dos serviços do Google. Mas este sinal é precisamente o pronuncio do fim, em que o líder passa a seguir a concorrência, em vez do contrário. Vamos ver se, como no Triunfo dos Porcos, apenas se troca um dominador por outro, até tendo este a particularidade de querer saber tudo sobre todos.

Publicado inicialmente a 27-09-2007

Ainda a recuperar textos antigos

2010-02-16T20:51:00.001Z

Acabo de republicar os textos relativos ao iPad. Tenho mais uns quantos que valem a republicação, sobretudo sobre software, que sairão diariamente às 7h00, para não saturar o blog.

Leituras: iPad therefore iWant? Probably. Why? iDunno

2010-02-16T20:42:00.001Z

Um artigo de Charlie Brooker escrito com humor sobre o iPad. Deixo uma tradução caseira de algumas partes:

iPad therefore iWant? Probably. Why? iDunno

Numa primeira impressão parece um iPhone numa forma não manuseável e fora do tamanho de bolso. Mas olhe-se mais demoradamente e.... Não. Tinha-se razão na primeira vez.

(...)

O iPad fica entre dois conceitos - não é bem um laptop e não é bem um smartphone. Por outras palavras, é o utilitário do consumidor de bens electrónicos. Ou seria, não fosse um factor crucial: parece ideal para navegar na net enquanto se vê televisão. E suspeito que para isso será usado maioritariamente. Milhões de pessoas vêem TV enquanto consultam os seus emails: é a combinação perfeita para elas.

(...)

Algumas pessoas queixam-se que não tem uma câmara. Que tecno-bebés mimados. Lá porque uma coisa é tecnologicamente possível, isso não significa que tenha que ser feita. É tecnologicamente possível fazer uma batedeira de ovos que faça chamadas, um leitor de MP3 que doseie salgadinhos ou um carro com pára-brisas de pão. A humanidade continuará a prosperar na sua ausência. Nem tudo precisa de uma lente de 15 megapixéis espetada nas traseiras, tal como um pequeno ânus de vidro. Dêem a estes ingratos uma câmara e eles choramingarão que não tinha uma segunda câmara incluída. O que é que estão a fotografar, já agora? A vossa colecção de câmaras?

(...)

Quanto a mim, não tenho a certeza que compre um iPad, embora me pareça - me pareça - que estou para comprar um MacBook.

(...)

iPad: os pontos negativos

2010-02-16T20:40:00.001Z

Passada a euforia da revelação, eis que chega o momento de uma análise dos pontos negativos do iPad.

Sem USB e sem leitor de cartões, fazer entrar dados* no aparelho fica mais complicado. Pode-se comprar adaptadores que permitirão transformar o conector de 30 pinos em USB, leitor de cartões SD ou carregador da bateria. Mas francamente, longe ficará a expectativa de se ter um computador portátil.

Na imagem: a base para o iPad; os adaptadores para USB e para SD; o adaptador para carregar a bateria.
*fotos, documentos, música, vídeo, etc.
Imagine-se por exemplo um fotografo em trabalho de campo. Levaria a sua bela D-SLR e o iPad. Depois de fotografar, transferiria as fotos para o iPad para as visualizar e, eventualmente publicar. Assim para o fazer terá que comprar mais uma geringonça.
Não tem câmara pelo que não pode ser usado para vídeo-conferência. Nem para colocar uns clips no Youtube.
Não corre mais do que uma aplicação de cada vez, dado que o sistema operativo não é multitasking (multi-tarefa). Por exemplo, ao escrever-se um texto no "Pages" (o processador de texto incluído) se se quiser copiar um pedaço de texto do browser, ter-se-á que fechar o "Pages", abrir o browser para copiar o texto e voltar ao "Pages" para colar o texto copiado. Pela mesma razão, não se pode ouvir música enquanto se trabalha noutra coisa. De facto, esta particularidade é bem mais limitativa do que o USB/SD. É ridículo que um computador (?) não tenha multi-tarefa nos dias de hoje.
O browser não suporta flash! Bye bye Youtube e mais uma carrada de sites que usem o flash player.
Quando o iPad está ligado à base (comprada à parte), ganha-se um porto USB. Um! Compre-se um hub USB se se quiser ligar mais do que um dispositivo ao mesmo tempo. Isto admitindo que a Apple não restringiu o uso de hubs…

Apesar dos aspectos muito positivos (tamanho, ecrã táctil, autonomia, design), o facto é que opções de desenho do aparelho parecem querer torna-lo num iPhone com esteróides (como li algures) e sem concretizar o potencial que se lhe antevia em certos nichos de mercado. Estamos perante um Kindle a cores, ao que parece.

Num próximo texto, abordarei as alternativas ao iPad. Um cheirinho:

Apple iPad: vídeo e características

2010-02-16T20:39:00.001Z

Pode-se dizer que o iPad (site oficial) parece um iPhone do tamanho A4 e com a performance de um computador portátil. Não tem teclado e o ecrã é sensível ao toque, tal como no iPhone. Traz de raiz a banda larga móvel 3G (depende do modelo).

Há um antes e um depois com este produto. Entrámos no depois.

Características

Dimensões e peso: 24.3 x 19.0 cm (altura x largura), 1.3 cm de espessura, 680 g de peso (modelo Wi-Fi) / 730 g (modelo Wi-Fi + 3G)
Ecrã: 24.6 cm (diagonal), 1024x768 pixéis a 132 ppi, resistente a dedadas,
Memória: Disco (solid state) de 16, 32 ou 64 GB
Processador: 1 GHz Apple A4
Wi-Fi: 802.11n
Banda larga móvel 3G (opcional) UMTS/HSDPA (850, 1900, 2100 MHz), só para dados
Bluetooth 2.1 + EDR
Autonomia da bateria: 10h
Inclui: altifalantes, microfone, conector de 30 pinos, acelerómetro e compasso.
Não inclui leitor de CD/DVD/Blue Ray!

Software

O iPad corre as aplicações do iPhone, o que é óptimo para quem já as tenha e mesmo para quem as queira comprar / usar (há-as gratuitas) pois já encontrará uma oferta aceitável de software (cerca de 140 mil aplicações). Como novidade, traz um calendário inovador (segundo a Apple), um aparentemente muito interessante gestor/visualizador de fotografias, toca música e passa filmes, vem com browser (Safari) para navegar na net, programa de mail, mapas e traz um leitor de ebooks. Traz o software de desenho (Brushes) que tira partido da sensibilidade do ecrã. Mais detalhes aqui.

Preço

O modelo mais básico anunciado a 499 dólares! Os modelos com 3G custam mais 130 dólares.

Acessórios

Pode funcionar com teclado externo.

Comunicações

3G, dependendo dos modelos modelos; Wi-Fi em todos
Nos EUA, e com a AT&T, 250MB de dados por mês custará 14.99 dólares e sem limite custará 29.99 dólares. Não será obrigatório contrato e poder-se-á cancelar o serviço 3G.
Nos EUA, a AT&T permite o uso gratuito de todos os seus pontos de Wi-Fi
A internacionalização ocorrerá em Junho ou Julho
Usa o USB para se sincronizar com o computador pessoal

Portanto, lá para as férias do Verão há brinquedo novo por estes lados.

Notícias relacionadas na imprensa nacional

Nota: este texto é essencialmente uma tradução adaptada deste, ao qual acrescei informação de fontes diversas

Google: "Do no evil", é mesmo assim?

2010-02-16T15:14:00.001Z

A Google decidiu entrar na senda das redes sociais. Fê-lo com o Google Buzz, passando por cima de todas as questões de privacidade dos seus utilizadores. Comecei por usar o Buzz no Fliscorno, para saber do que se trata e por o email do blogue não estar associado ao email pessoal. Sinceramente, é algo que não quero na minha conta pessoal. Vejo-lhe utilidade para a divulgação de conteúdos, tal como o Facebook ou o Twitter mas há uma diferença de nota: neste dois últimos, a adesão não é imposta. Pior, quem aderir ao Facebook ou ao Twitter sabe que o está a fazer numa rede onde as coisas serão públicas. Já com o Buzz, as pessoas aderiram com um certo nível de privacidade e este foi drasticamente alterado com a adição do Buzz. De um momento para o outro, passo a saber com quem outras pessoas trocam emails mais frequentemente, sem que elas tenham tido uma palavra no assunto. "Do no evil" é o slogam da Google. Certo...

Mas nestas coisas, cada qual sabe de si. Se o novo serviço da Google lhe agrada, tudo bem. Se não, segue-se um artigo que explica como desactivar o serviço. Num caso como noutro, convém é que saiba ao que está ;-)

February 11, 2010 10:01 AM PST

Buzz off: Disabling Google Buzz

by Jessica Dolcourt

Updated: February 11, 2010 at 12:15 p.m. PT to share a new rollout that Google implemented to better manage (and block) contacts. Also added a note about profile privacy.

My colleague Molly Wood called it a privacy nightmare, but to many, Google's new social-networking tool Buzz is at its root an unwanted, unasked for pest. The way some of us see it, we didn't opt in to some newfangled Twitter system and we don't particularly want to see updates from contacts we never asked to follow creep up in our Buzz in-box. Call us what you will, but for curmudgeonly types like us, Buzz isn't so much social networking as it is socially awkward networking. We tried it, we didn't like it, and now it has to go.

Here's how we silenced Buzz from the desktop:

Step 0: Don't disable Buzz--yet

The automatic reaction is to scroll to the very bottom of Gmail and click the words "turn off buzz." But all this does is remove active links, leaving your profile still publicly available, along with any public buzzes you might have made while trying Buzz out. In fact, you're still technically following people, and they're following you. Not OK.

Disabling Buzz isn't enough. My previous buzzes are still visible to anyone looking for them.

(Credit: Screenshot by Jessica Dolcourt/CNET)

Step 1: Purge your profile

One way to find your profile is to go to http://www.google.com/profiles and search on your name. Next, permanently delete buzzes in the public timeline by clicking the "Delete" tag. Then get to work unfollowing those that Google has "helped" you automatically follow.

From your profile, (1) click the hyperlink first and then (2) manually unfollow individuals.

(Credit: Screenshot by Jessica Dolcourt/CNET)

However, it's as if the Buzz team never envisioned anyone would want to completely opt out. You'll need to unfollow individuals one by one, which takes some time if Google subscribed you to a long list of followers. Despite what it said in our profile, we had to keep loading pages to unfollow a big chunk of friends.

Also take a moment to make sure that your profile isn't broadcasting anything you don't want it to. Click the "Edit Profile" link to the right of "Contacts" and "About me" to give your profile a once-over.

Note: If your profile was never public (and if you never experimented with Buzz), you'll have fewer privacy concerns. However, if you are getting rid of Buzz, it's a good idea to scan your profile to make sure you're not exposed on anyone's automatic list of followers.

Step 2: Block your followers

If you're serious about removing traces of yourself from Buzz's public record, you'll need to make sure you're invisible to others as well. Go back to Buzz in Gmail (if you already disabled it, you can turn Buzz back on at the bottom of the page to complete this step.) In the absence of an obvious "block all" button, we manually blocked each individual by clicking their picture from the list of followers and then selecting "Block."

Blocking: Another option.

(Credit: Screenshot by Jessica Dolcourt/CNET)

At noon PT on Thursday, we noticed that Google rolled out a better interface that includes some management tools you can use to more easily block users. Prior to that, we noticed a few leftovers that were still visible in our public profile because we weren't previously able to access their profile tab. Thanks to Google's tweak, we unblocked them in a hurry.

Blocking someone won't alert them and you can always unblock them later if you change your mind about Buzz.

A Thursday tweak adds drop-down tools to better manage followers.

(Credit: Screenshot by Jessica Dolcourt/CNET)

Step 3: Disable Buzz in Gmail

Now it's safe to disable Buzz in Gmail, thus removing the offending links and updates from your eyes.

Last step: Unplug Buzz in Gmail

(Credit: Screenshot by Jessica Dolcourt/CNET)

This worked for us, but leave your own tips and travails in the comments.

Related stories:
Rafe and Josh debate Google's Buzz
Google Buzz: Privacy nightmare
Google's social side hopes to catch some Buzz

Hitech Tips

2010-02-15T05:11:00.001Z

É oficial, o blog Hitech Tips está no ar. Começa com uma séries de textos publicados noutros locais, aqui ficando reunidos (do mais antigo para o mais recente):

Este será um blog de cariz IT, orientado para as tecnologias da web. Como se pode ver na template, o inglês anda por estes lados. Com efeito, o blog não será escrito unicamente em português. Daqui para a frente haverá posts que sairão em inglês e outros em inglês e português. Esta parte ainda não está bem decidia. Porquê a questão do inglês? Porque é a língua franca da informática e porque os artigos na forma de tutoriais são trabalhosos de fazer, daí procurar alargar a audiência.

Os contactos e demais informações estão na página About deste blog.

Boas blogagens.

Teste as velocidades do seu blog e da sua ligação à net

2010-02-15T04:51:00.003Z

Testar a performance do blog

É frequente ir-se adicionando coisas giras ao blog até que, a certo ponto, torna-se impossível abrir a página do blog. Acontece a muitos e aconteceu-me a mim. Nos últimos dias tem sido uma chatice abrir o blog desde que instalei os ícones para partilhar no facebook e no twitter. Depois de algumas experiências, conclui que o AddThis e o Tweetmeme entram em conflito, fazendo disparar o tempo de carregamento do blog dos 8 segundos para os 35 segundos! Optei por inibir, pelo menos temporariamente o AddThis.

Mas como cheguei a esta conclusão?

Instalei a ferramenta HttpWatch Basic Edition (freeware) e experimentei diversas combinações da template. Esta ferramenta mede o tempo de carregamento de uma página e mostra quanto tempo demora cada conteúdo a ser carregado.

A forma de funcionamento da ferramenta é algo fora do vulgar, já que corre integrada no browser. É conveniente ler o ficheiro "Getting Started", instalado com a aplicação, para ver como começar. Basicamente, no Firefox basta clicar no ícone no canto inferior direito:

e no Internet Explorer, clica-se no ícone equivalente existente na barra de ferramentas:

Dicas:

em cada teste, carreguei em "Record" antes de refrescar a página e carreguei em "Stop" depois da página carregada (o ícone do browser pára de mexer), o que me permitiu ter as temporizações de cada página carregada.
Testar no Internet Explorer é mais fácil, pois o Firefox abre vários canais de comunicação e fazer a soma do tempo gasto não é directo.
Usar esta configuração quando se repetirem testes seguidos, pois facilita a comparação:

Testar a velocidade da sua ligação à net

A segunda ferramenta não precisa de ser instalada. Basta aceder ao site

http://www.speedtest.net

e correr o teste. A imagem seguinte mostra o resultado da minha ligação:

Para comparação, a ferramenta mostra outros resultados. Por exemplo, para a Alemanha e Portugal, os quadros são os seguintes:

Fico a saber que a minha velocidade fica 60% das melhores ligações portuguesas. Nesta tabela destaca-se também a boa posição global ao nível dos downloads mas muito má no que respeita os uploads.

Experimente para optimizar

Com estas duas ferramentas pode optimizar o seu blog e tirar as teimas quanto à habitual explicação "ah e tal, é da ligação" :) Boas experiências.

O blogger já tem páginas autónomas

2010-02-15T04:51:00.001Z

Entre em http://draft.blogger.com e navegue até Editar páginas como se vê na imagem supra.
O que são páginas autónomas?
http://www.google.com/support/blogger/bin/answer.py?answer=165955
Com mais tempo, voltarei ao tema.

NOTA: a página About é um exemplo destas páginas autónomas. Note-se que o URL é diferente do habitual.

HTML 5

2010-02-15T04:49:00.001Z

O HTML é a linguagem da web e o HTML 5 é a versão que se prepara para ser a próxima.

Veja no site http://html5gallery.com exemplos de sites que já usam HTML 5. Para ver estes sites precisará de um dos seguintes browsers: Chrome, Firefox 3.5, Opera ou Safari.

Um bom artigo de introdução está disponível aqui: Get Ready for HTML 5.

Como adicionar os botões de partilha no Twitter e no Facebook

2010-02-15T04:48:00.001Z

Neste post vou mostrar como adicionar os os botões de partilha no Twitter e no Facebook. É fácil. O aspecto final será algo como na imagem seguinte, em que os botões aparecerão do lado direito do título do post:

Siga então os passos seguintes:

Antes de mais, faça uma cópia de segurança da sua template. Muito importante! Permitir-lhe-á desfazer algum erro caso se engane. Veja aqui como: Fazer cópia de segurança da template
Depois terá de modificar a template. A melhor forma de o fazer será fazendo uma cópia do ficheiro descarregado e depois editando a cópia com o Bloco de Notas do Windows (Notepad) ou, ainda melhor, usando o excelente Notepad++ (freeware).
Na template, procure este pedaço de texto:
]]></b:skin>
e imediatamente por cima abra uma linha em branco e cole o seguinte texto:
.retweet { /* estilo da div de partilha */
float:right;
padding: 5px 0px 0px 5px;
}

Isto cria um estilo CSS para posicionar os botões de partilha.
De seguida, procure o seguinte pedaço de texto
<div class='post'>

nota: se não encontrar o pedaço de texto anterior, procure algo parecido. O importante é que comece por <div e contenha class='post'
e imediatamente a seguir abra uma linha em branco e cole o seguinte texto:
<!—SHARE begin -->
<div class='retweet'>

<script type='text/javascript'>
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = TwitterUserName;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
Altere o texto vermelho em cima para ser o seu utilizador twitter.
Grave o ficheiro. Vá ao blogger e carregue a nova template. Para isso, vá a Esquema – Editar HTML, clique em "Choose File" (ou o correspondente em português), seleccione o ficheiro que gravou e clique em carregar.

A template será automaticamente carregada.
Veja o resultado. Se houver algum erro, reponha a template anterior (veja aqui como: Fazer cópia de segurança da template) e analise em detalhe se fez as alterações indicadas.
E é isto, está feito. Boas blogagens.

Operação Aurora: deixe de usar o Internet Explorer

2010-02-15T04:47:00.002Z

Quem o recomenda é o governo alemão, que incentiva os utilizadores da web a escolherem outro browser. Há quem defenda que esta recomendação deva ser tomada em conta não apenas por aqueles que ainda usam o Internet Explorer (IE) 6 como também por todos todos os que usem as versões 7, 8 ou outra que aí venha.
Operação "Aurora"
Vem este assunto a propósito do recente ataque a mais de 30 empresas americanas, incluindo a Google, a Adobe e a Juniper Networks. O ataque ocorreu na época natalícia, possivelmente para minimizar as possibilidades de detecção e recorreu a uma nova falha de segurança no IE, como descreve a McAfee, ainda não conhecida publicamente. Os intrusos ganharam acesso às organizações em causa lançando ataques a muito personalizados a uma ou a um restrito grupo de pessoas com acesso a informação sensível. Estas pessoas foram o ponto de acesso ao material que se pretendia roubar: propriedade intelectual.
"Aurora" é nome como está a ser conhecido este ataque e resulta da análise feita pela McAfee. Investigando o código binário do "malware", a McAfee descobriu que a palavra "Aurora" fazia parte do "filepath" (localização no disco) da máquina atacante. O "filepath" pode ser inserido pelos compiladores de código para ajudar à correcção de erros de software (debug) e para indicar onde o código fonte está localizado na máquina do programador. A MCafee acha que "Aurora" foi o nome interno que o(s) atacante(s) deu(deram) à operação.
Novo patamar
Até agora temos visto ataques para obter informação bancária. Com o presente ataque, é a propriedade intelectual o que está em causa, o que coloca a guerra virtual noutro patamar. Quando a actual tendência é tudo estar ligado, é altura das empresas de software pensarem seriamente mais nas questões de segurança do que nos "press release". Começar por não lançar no mercado software mal testado, numa estratégia comercial de antecipação, é um bom começo.
Leituras:

Adenda:
Segundo o i, a França está a fazer a mesma recomendação.

Windows Live Writer, Ping

2010-02-15T04:47:00.001Z

Como enviar pings automáticos para o Twingly e para o Wordpress.
Dica válida para quem publique em Wordpress e em Blogger

Aos leitores dos jornais Público e i não será estranho o serviço Twingly que lista os blogs que ligam para uma notícia. Funciona assim:

O dono do blog escreve um texto com uma referência a uma notícia;
Envia-se uma notificação (ping) ao Twingly;
O Twingly actualiza a sua lista de blogs que ligam para a notícia.

Fantástico, não é? Nim. Se o leitor publica na plataforma Wordpress, então o este serviço é automático. Se, por outro lado, publicar no Blogger, então terá que ir manualmente ao site do Twingly e fazer um ping manual. Uma seca! Para menorizar o problema, também pode guardar a página de ping nos favoritos (algo como http://www.twingly.com/ping?url=http://fliscorno.blogspot.com) e sempre poupa tempo.

Mas se já estiver a escrever os seus textos no Windows Live Writer (WLW) como eu, então tenho boas notícias: o ping pode ser automático! E mais, além do Twingly também pode mandar mandar pings para outros servidores, tal como o Ping-o-matic e ver nos blogs da plataforma Wordpress os respectivos pingback.

Para tal, basta no WLW ir ao menu Ferramentas | Opções e em "Enviar Ping aos Servidores" colocar o texto seguinte:

http://rpc.twingly.com
http://rpc.pingomatic.com

O resultado fica assim:

Fácil, não é?

Sugestão: siga esta e outras dicas assinando o feed
http://feeds.feedburner.com/fliscorno_blog_tips

Faça posts de forma rápida e eficaz

2010-02-15T04:46:00.001Z

1. Use o Windows Live Writer

Com o WLW, escreverá posts como se estivesse num processador de texto. Pode copiar imagens e coloca-las no post directamente a partir do clipboard, que o WLW colocará a imagem no seu álbum Picasa. Pode também copiar HTML de outras páginas e colar-lo no seu post sem que perca a formatação. Além disso, toda a edição é feita usando a formatação do blog, o que aumenta a produtividade. Duas dicas:

quando colar uma imagem, clique nela e depois vá às propriedades "Avançadas" (na barra lateral) e escolha o tamanho "original" na lista. Se precisar de redimensionar a imagem, pode ir ao às propriedades "Efeitos" e adicionar o efeito nitidez.
quando está a escrever e prime enter, está a inserir um novo parágrafo. Este comportamento é diferente daquele que o editor do blogger tem, pois no blogger o enter produz uma quebra de linha. A diferença é que o parágrafo geralmente tem algum espaço vertical entre o texto e a quebra de linha não (neste aspecto, o WLW segue o standard). Para inserir uma quebra de linha, basta fazer SHIFT ENTER e, assim, mudará de linha sem adicionar um parágrafo. Note que há formatação que se aplica a parágrafos inteiros (o estilo de parágrafo, por exemplo), pelo que não se surpreenda se esta mudar texto em linhas quebradas com o SHIFT ENTER.

2. Use um programa para capturar ecrãs

Quando preciso de copiar uma parte de outra página web (ou de outra aplicação de software), uso o programa de captura de ecrãs MWSnap, que é freeware. Tenho a opção para auto-copiar a imagem seleccionada (ver imagem) e assim basta-me fazer a captura da imagem (CTRL SHIFT A) e depois fazer colar-la no post (CTRL V) e está feito. Actualmente, até uso o MWSnap para redimensionar as imagens da forma que quero. Assim, visualizo a imagem num qualquer programa e depois faço a captura e colo a imagem no post. Desta forma poupo dois passos tediosos que são redimensionar a imagem num programa de tratamento de imagens e não preciso de fazer o upload da imagem (pois o WLW fá-lo automaticamente). Uma dica:

Imagine que precisa de imagens com uma dimensão específica, por exemplo com 650x250 pixéis. O MWSnap é a ferramenta ideal para isso! Coloque a dimensão da imagem como se segue:

e depois é só clicar no botão. A janela do MWSnap esconder-se-á (*) e ao arrastar o rato está a escolher área que irá copiar. Claro que antes de fazer a captura terá que ter a imagem visível no ecrã, com um zoom adequado à captura.
* se isso não acontecer, vá ao menu Tools | Settings e depois verifique que tem estas opções activas:

Conclusão

O WLW e o MWSnap constituem um ambiente produtivo para editar o blog. O primeiro permite-lhe concentrar-se na escrita e o segundo na ilustração do texto. Boas postagens.

Firefox continua a ganhar terreno

2010-02-15T04:45:00.001Z

60% dos visitantes deste blog usam o Internet Explorer (IE) e 30% usam o Firefox (FF). Este indicador não é o estatisticamente relevante mas não andará longe dos padrões de visitas globais. Ilustra o terreno que o FF tem conquistado ao IE, especialmente quando houve tempos (por volta de 2002) em que o IE chegou a ter 90% do mercado. Nessa altura, o IE era nitidamente o melhor browser do mercado, tanto em termos de performance como ao nível das especificações. Aliando a então boa apresentação do HTML e bom suporte para scripting ao facto de o browser vir de raiz com o sistema operativo mais popular, o Windows, eis como o IE se tornou um campeão no mundo dos browsers.

O que é que mudou então? O gigante dormiu à sombra do sucesso e investiu mais em práticas comerciais do que na melhoria do produto. Além disso, a estratégia da Microsoft de dominar os mercados onde esteja que sempre passou por incluir especificidades suas também passou pelo IE, o que no caso significou adicionar elementos de HTML que não eram padrão, mau suporte para estilos CSS e tentativa (falhada) de tornar o VBScript como linguagem de scripting no browser.

É neste contexto que surge o FF, com uma estratégia assente em três pontos:
- aumentar a performance do produto;
- seguir os standards definidos pelo W3C;
- ter uma plataforma de extensões, aberta aos programadores, que permita expandir o browser.

O FF tem desta forma ganho terreno no mercado dos browsers e, apesar do percalço chamado Chrome, desde há vários anos o melhor browser para o utilizador final e para o programador de software. Neste último aspecto, está mesmo anos luz à frente da concorrência, graças a extensões específicas que foram sendo criadas para facilitar o desenvolvimento de software (exemplos: EditCSS, JavaScript Debugger, Web Developer, etc., etc.).

Por isso caro blogger, quando mudar o aspecto do seu blog (template, mini-aplicações, cores, fontes, etc.) confirme que o aspecto desejado não é exclusivo do IE. Não queira perder 40% dos seus visitantes e experimente pelo menos como fica o seu blog no FF e no Chrome.

Bloggers: prestem atenção ao Windows Live Writer

2010-02-15T04:43:00.001Z

Ainda há dias escrevi cobras e lagartos sobre o Windows Live Messenger. Mantendo o que então afirmara, venho agora tecer um elevado elogio a uma outra aplicação que faz parte do mesmo pacote, o Windows Live Writer (WLW). Caros editores, sejam do Blogger, do Wordpress ou de outro serviço, experimentem que vale a pena.

Ora, então porquê toda esta excitação? Simplesmente porque o WLW resolve-me uma série de problemas com que me tenho deparado nos tradicionais editores online:

Colar texto copiado de outros sites com opção de escolha quanto a manter ou remover a formatação. Por exemplo, optando pela opção "Remover Formatação", apenas fica o texto, quebras de linha e links. Com o "HTML Optimizado", fica adicionalmente alguma formatação básica.

Este foi sempre um aspecto que me fez perder imenso tempo ao compor os textos do blog quando queria citar outros textos. Tinha que colocar o texto no notepad (para remover toda a formatação) e depois adicionar os links, bolds, itálicos, etc. etc. Uma canseira. Este cuidado é necessário para não haver HTML mal formado nos posts, o que acaba com frequência por estragar a apresentação do blog.
Só pelo aspecto anterior já vale a pena usar o WLW. Mas há mais. Inserir imagens nos posts é sempre uma seca. Implica ter a foto no disco, carregá-la no blog e depois inseri-la no post. Com o WLW é mais simples. Se a foto estiver no disco, pode ser inserida directamente no post; se estiver noutro site, pode ser copiada e colada como se faz num editor de texto, sem necessidade de a guardar em disco primeiro. Tanto num caso como no outro, as imagens carregadas desta forma irão parar ao serviço de alojamento de imagens do blog (por exemplo, no Blogger, as imagens são carregadas para o álbum do Picasa que esteja associado ao blog).
Fazer tabelas também fica bem mais fácil. Mas com a funcionalidade de colar especial (ver o primeiro ponto), este aspecto até é secundário, pois a tabela pode ser feita no editor de texto ou na folha de cálculo!
O WLW tem uma funcionalidade de álbum de fotografias mas é algo rudimentar. O slide.com faz bem melhor. De qualquer das formas, está à mão de semear. É produzida uma imagem que serve de ante-visão. Quando se clica na imagem é-se levado para uma página do Windows Live (é preciso uma conta no Live, o que é fácil e gratuito).

Note-se que se podem inserir imagens de forma isolada.
Finalmente, toda a escrita é muito semelhante a trabalhar num editor de texto, usando a formatação do blog. O post pode ser pré-visualizado antes de publicar, sendo mostrado no contexto do blog. E também se pode editar manualmente o HTML. As restantes funcionalidades são o que se poderia esperar delas, com uma nota negativa para a colocação individual de fotografias: as fotos são publicadas sem link para uma versão de tamanho grande! Mas há volta a dar: usar o plug-in Polaroid Picture.

Instalação

Ir a http://download.live.com/writer, descarregar e instalar o software. As imagens seguintes mostram alguns passos da instalação

Apenas precisa de instalar o Writer. Os outros componentes, se não os usar, podem ficar de fora. De seguida, optei pode desmarcar todas as opções como se vê na segunda imagem.

Como o meu blog é no serviço Blogger, escolhi "Outro serviço de blog". O mesmo para quem usar Wordpress. De seguida introduzi as credenciais de acesso a blog.

Nesta pergunta é importante responder "SIM". Dessa forma, o WLW faz uma cópia do aspecto do blog, o que permite tornar a edição mais próxima do resultado final.

Finalmente, basta clicar no "Concluir" e está feito.

Plugins

Na página http://gallery.live.com/default.aspx?pl=8 encontram-se alguns plugins disponíveis. Experimentei o Flickr4Live e o Polaroid Picture e gostei.

Conclusão

Finalmente, um bom editor para produzir conteúdos para o blog, sem necessidade de pensar nas questões acessórias de alojamento e de HTML.

Fazer cópia de segurança da template

2010-02-15T04:40:00.001Z

Antes de fazer qualquer alteração à template do blog, fazer sempre uma cópia de segurança primeiro. Assim, caso algo corra mal, pode-se sempre voltar a trás. As imagens seguintes mostram os sucessivos passos.

1. Cópia de segurança

Depois de entrar no blog, clicar em Esquema.

Clicar em Editar HTML

Clicar em Transferir modelo completo e gravar o ficheiro.

Está feito! Simples, não é? Pois pouca imenso trabalho quando algo corre mal. Sugestões:

a) guardar as sucessivas cópias de segurança da template, o que permite comparar duas versões;

b) nomear os ficheiros com a data de criação e incluindo-a no início do nome do ficheiro - assim os ficheiros estarão sempre ordenados temporalmente, mesmo que sejam alterados posteriormente. Exemplo: 2009-10-06_a_minha_template.xls

2. Para colocar em uso uma template antiga

Na mesma página onde se fez a cópia de segurança da template, clicar

em browse, escolher uma template antiga, e depois clicar em Carregar.

A nova template será colocada em uso logo de seguida.

Personalizar caixa de comentários do Blogger

2010-02-15T04:38:00.001Z

No Usuário Compulsivo:

Que tal deixar a sua caixa de comentários incorporada as páginas de postagem do Blogger / Blogspot melhor integrada ao seu template?

Neste tutorial você vai aprender como colocar bordas na mensagem que aparece antes do formulário de comentários. Como deixar a área do formulário de comentários mais larga, igual a largura da coluna das postagens, e como otimizar o cabeçalho da área de comentários. (...)

Conselho que vale ouro

2010-02-15T04:35:00.001Z

Há tempos, o email de suporte a este blog foi tomado de assalto. Não sei a origem deste ataque mas sei que o email foi usado para enviar um mail de spam a todos os contactos os meus contactos. Ainda para mais, esse mail foi enviado sem BCC, tornando públicos todos esses contactos. Apesar de ser alheio a este abuso, quero deixar na mesma aqui as minhas desculpas pelo incómodo.

Creio que terá sido alguma falha de segurança no Gmail terá sido explorada. Uma vez que não me mexeram no blog, suponho que terá sido "apenas" para mandar spam. Mudaram-me a password e neste momento não tenho acesso a esse email. Só não fiquei também sem acesso ao blog porque, apesar de eu ser o único editor do blog, tinha dois emails associados ao blog, cada qual com permissões de administração.

Deixo aqui aos companheiros de blogosfera um conselho que considero valer ouro: ter mais do que um utilizador do blog com privilégios de administração (podem pertencer à mesma pessoa mas com com diferentes emails). Apresento a seguir instruções para o Blogger:

entrar no blog e ir à página de administração do blog (http://www.blogger.com/home)
clicar em Definições
clicar em Permissões
clicar em Adicionar Autores
na caixa "Convide mais pessoas para escreverem no seu blogue", inserir um email seu, diferente daquele que estiver actualmente associado ao blog
clicar em Convidar
entrar no email definido no ponto 5 e abrir o mail enviado pelo Blogger
clicar no link que o mail refere e seguir até ao fim as instruções que o Blogger dará
voltar a entrar no blog mas com o utilizador do ponto 1
repetir os passos 1 a 3 para chegar à página das permissões
clicar "conceder privilégios de administrador" na linha correspondente ao email inserido em 5

A partir deste momento passará a haver dois emails a partir dos quais é possível administrar o blog. Se se perder o acesso a um dos emails, pode entrar no blog com o outro email. Como ambos são administradores do blog, na página das permissões do blog pode remover o acesso a um dos emails.

Boas blogagens.

HTML e templates do Blogger

2010-02-15T04:31:00.001Z

Este texto apresenta conceitos básicos sobre HTML e sobre a estrutura de templates do blogger, mas sem entrar demasiado pelo informatiquês. Servirá de apoio a à descrição de outras técnicas bloguísticas.

Se não se sente à vontade com o HTML e pretende aprender aprender, recomendo este curso online: http://pt-br.html.net

Conteúdo:

Estrutura de um documento HTML
Conceito de servidor/cliente
CSS e DIV
HTML ou XML?
Estrutura de uma template do blogger
Estrutura dos contentores da template
Conclusão

Estrutura de um documento HTML

Um documento HTML é um simples documento de texto onde se misturam comandos para o browser interpretar com texto como este que está a ler. Genericamente, a estrutura de um documento HTML é a seguinte:


<html>
<head>
.....
</head>
<body>
.....
</body>
</html>

Neste exemplo podemos notar que:

O pontinhos são conteúdo e comandos diversos; o resto são comandos HTML;

Os comandos HTML (chamados de HTML tag ou simplesmente tag) estão contidos entre os caracteres < e >.

Um comando HTML é formado por uma parte de "abertura do comando" (tal como "<html>") e outra de "fecho do comando" (tal como "</html>"). A parte de abertura de um comando começa por "<", seguindo-se-lhe o comando propriamente dito (caracteres até ao primeiro espaço ou até ao sinal ">"), continua com parâmetros específicos do comando e termina com ">". A parte de fecho do comando começa por "</", seguindo-se-lhe os mesmos caracteres do comando de abertura e termina por ">". Assim, os comandos das linhas 1 e 8 formam o respectivo par de abertura e fecho.

Apesar de não mostrado no exemplo, alguns comandos fecham-se a si mesmos, como é o caso do comando que insere uma imagem: <img ..... />. Estes comandos começam "<", segue-se-lhes o comando propriamente dito (caracteres até ao primeiro espaço), continuam com parâmetros específicos do comando e terminam com "/>".

Um documento HTML começa necessariamente com a linha 1 e termina com a linha 8. As linhas 2 a 4 e as linhas 5 a 7 formam os dois blocos principais. O primeiro bloco contém instruções para o browser e o segundo bloco contém o que o browser irá mostrar numa página. Antes da linha 1 deve constar a informação sobre que versão de documento se está a construir, o que é feito com o comando "<!DOCTYPE HTML PUBLIC ..... >".

Há comandos específicos de cada um destes blocos.

Genericamente, os comandos HTML que contenham parte de abertura e de fecho podem ser encadeados uns dentro dos outros, desde que se respeite a ordem "primeiro a abrir, último a fechar" (ver os comandos nas linhas 5 e 7).

Conceito de servidor/cliente

Chama-se cliente ao dispositivo onde o documento HTML será mostrado (o browser, geralmente) e chama-se servidor ao software que corre no computador ao qual se acede por um URL (o http://bloger.com, por exemplo).

Quando se coloca no browser o endereço de um site, o servidor processa o pedido e devolve um resultado. De seguida, o browser recebe o pedido e poderá realizar processamento adicional até que, finalmente, o resultado é mostrado. Exemplo:

no browser digito http://fliscorno.blogspot.com;

ao primir enter, o browser envia ao blogger o pedido da página inicial do blog;

o blogger, que contém os textos dos posts numa base de dados, lê as configurações do blog, pega nos posts a mostrar e mistura-os com a template que estiver em uso. De seguida devolve o resultado ao browser;

o browser pega na resposta devolvida pelo blogger e interpreta a resposta recebida. Além do conteúdo a exibir, entre os comandos podem estar comandos de formatação, de posicionamento e de processamento adicional (com javascript). Havendo javascript a ser processado, o browser executa-o, podendo alterar profundamente a resposta devolvida pelo servidor;

finalmente, o resultado é apresentado ao utilizador.

CSS e DIV

A formatação e posicionamento dos conteúdos de uma página HTML pode ser feita com CSS, colocando o atributo class num elemento HTML. A propriedades definidas por pela classe de uma elemento serão válidas para esse elemento, bem para os que dentro dele estejam (salvo se forem redefinidos, por outra classe ou por formatações específicas).

DIV é um elemento estrutural do HTML e serve sobretudo para definir o posicionamento de conteúdos numa página. Um DIV associado a uma classe permite posicionar os conteúdos e atribuir-lhes formatações específicas.

HTML ou XML?

Um documento HTML é uma particularização de um documento XML. Neste âmbito não entrarei em especificidades mas quem quiser saber mais pode ler aqui: http://pt.wikipedia.org/wiki/Xml

Estrutura de uma template do blogger

Um template do blogger é um documento especial, em formato XML, semelhante a um documento HTML mas com comandos adicionais. Uma template pode ter várias estruturas, sendo os seguintes blocos uma abordagem bastante comum:

Cabeçalho (header);

Área de posts (posts area);

Área de componentes (widget area);

Rodapé (footer).

Nestas imagens (adaptadas daqui) vemos a disposição destes blocos. Também está realçado o facto de as áreas de componentes, frequentemente chamadas de "barra lateral", poderem ter número e posição variáveis. A seguir está uma simplificação do que poderia ser uma template correspondente à primeira imagem. NOTA: esta template não é funcional. Apenas serve para ilustrar conceitos.


<?xml .... ?>
<!DOCTYPE ... >
<html .... >
<head>
<b:skin><![CDATA[/*
#outer-wrapper {
....
}
#header-wrapper {
....
}
#main-wrapper {
....
}
#sidebar-wrapper {
....
}
#footer-wrapper {
....
}
]]></b:skin>
... outras definições ...
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
.....
</div>
<div id='main-wrapper'>
.....
</div>
<div id='sidebar-wrapper'>
.....
</div>
<div id='footer-wrapper'>
.....
</div>
</div>
</body>
</html>

As linhas 1 e 2 classificam a template. Partir de uma template existente e deixá-las como estiverem.

As linhas 3 a 40 são o HTML a enviar para o browser. Contém comandos que serão interpretados pelo blogger antes de enviar a resposta ao cliente.

O bloco head do documento HTML está entre as linhas 4 a 23. Neste bloco é onde se incluem ficheiros de javascript, de CSS e onde se define o CSS estrutural do blog (linhas 5 a 21). O CSS estrutural do blog define um conjunto de classes (contentores) que posicionam os blocos como os das figuras anteriores em locais específicos da página HTML.

Entre as linhas 24 e 39 fica contido o conteúdo propriamente dito do blog (cabeçalho, posts, barra lateral e rodapé). Na figura são mostrados os blocos correspondentes aos da primeira das três figuras anteriores. De realçar:

os diversos blocos da template estão contidos entre tags DIV;

cada DIV tem uma propriedade "class" que identifica a classe d CSS correspondente. Essa classe está definida no bloco de CSS do head.

Estrutura dos contentores da template

Dentro de cada DIV que formam os contentores da template, existem blocos como os que se seguem:


<b:section ... >
<b:widget id='HTML1' type='HTML' ... >
<b:includable id='main'>
   ... conteúdo .....
</b:includable>
</b:widget>
</b:section>

As "section" agrupam blocos como por exemplo múltiplas colunas na barra lateral. Dentro de cada uma delas existem "widget" que são a "engenhoca" que mostra os conteúdos da secção. Finalmente, dentro do widget existem "includable" que são os conteúdos propriamente ditos: texto, fotos, javascript, etc.

Os widget aceitam conteúdos específicos em função do seu "type" e têm que ter uma identificação (id) única em toda a template. Esta identificação tem que ser formada pelo type seguindo de um número.

Os widgets podem ser do seguinte tipo:

BlogArchive

Blog

Feed

Header

HTML

SingleImage

LinkList

List

Logo

BlogProfile

Navbar

VideoBar

NewsBar

Para uma leitura mais aprofundada, o blogger tem alguma informação disponível (em inglês):

Page Elements Tags for Layouts

Widget Tags for Layouts

Layouts Data Tags

e mais uns quantos tópicos aqui

Conclusão

Uma template do blogger é um misto de HTML e comandos interpretados pelo blogger antes de enviar o resultado ao browser. Depois do browser receber uma página do blog, poderá haver lugar a processamento adicional com JavaScript.

As templates são formadas por blocos onde os conteúdos são mostrados. O seu posicionamento e formatação são feitos por CSS.

Criar ou alterar templates é um trabalho essencialmente de pachorra (para identificar os principais blocos da template) e de criatividade (pelo uso de CSS e outras técnicas no design).

Blogger: associar ícones às categorias do post - parte 2/3

2010-02-15T04:30:00.001Z

Esta é segunda parte de três artigos sobre a forma de ter um ícone dinamicamente associado às categorias escolhidas para cada entrada no blog.

O problema
Implementação (este texto)
Juntando as peças

No primeiro texto abordou-se o objectivo pretendido com estes ícones associados às categorias do post e as limitações do blogger para implementar esta funcionalidade. Neste texto irá ser descrita, de forma genérica, a solução encontrada.

(…. sorry, ainda n está terminado)

Blogger: associar ícones às categorias do post - parte 1/3

2010-02-15T04:27:00.001Z

Este artigo explica como fazer para ter diferentes ícones antes do título

Quem por aqui passa já terá reparado que associado a cada post aparece um ícone e que não é constante. Com efeito, cada conjunto de categorias do blog (labels) está associado a um ícone, o qual é escolhido automaticamente. Assim, quando se cria um post, escolhe-se a categoria para o marcar e plimmmm depois de publicar o respectivo ícone aparece. Mais tarde, se alterar a categoria do post, o ícone mudará em correspondência.

Passo a expôr como implementei esta funcionalidade na template. Dada a extensão do artigo, este será partido em 3 partes:

O problema
Implementação
Juntando as peças

Associar ícones às categorias do post- parte 1/3: O problema

O objectivo

Dizem as regras da boa blogagem, as quais supostamente ajudam a aumentar o número de visitantes, que se deve manter coêrencia no género de conteúdos abordados no blog. Por exemplo, evitar falar dos negócios da política num blog de culinária sob pena disso causar indigestão. A ideia subjacente é que quem vai a um site espera encontrar lá um certo tipo de conteúdos e isso fidelizará o visitante. Pela minha experiência pessoal, sei que assim é. E se não se quiser ter vários blogs para malhar em áreas diferentes conforme a pachorra do momento? Claro que para o visitante poderá ser algo frustrante, daí que optei por facilitar a identificação visual dos conteúdos pelo uso de um ícone que esteja relacionado com a categoria do post. Já agora, na mesma linha da separação da separação de conteúdos, também abordarei noutro artigo a forma de ter um feed por cada categoria.

As limitações do Blogger

Olhado para uma template genérica, vemos que a parte onde as categorias são mostradas é esta (ir a Layout | Edit HTML | Download Full Template e abrir o ficheiro XML descarregado):

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'>
  <data:label.name/></a>
  <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>   
</b:loop>

Mais à frente explicarei este pedaço de código mas por agora basta verificar que existe um clico (loop) dentro do qual são listadas as categorias associadas ao post.

Portanto, para ter um ícone diferente para cada post, bastaria olhar para cada categoria e decidir sobre o ícone a usar. Algo assim:

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'>
  <data:label.name/></a>
  <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>   
  IF categoria = gracinha THEN
    usa o ícone da gracinha
  END IF
</b:loop>

O problema desta abordagem está no facto de o Blogger não ter o bloco IF ... THEN ... ELSE!

A solução

Como resolver então o problema? O truque que encontrei para contornar este problema foi:

parte do processamento é feito pelo Blogger

a parte restante é feita pelo browser ao receber a página.

Assim, na template do Blogger coloquei comandos para gerar um javascript. Este script é depois interpretado pelo cliente (o browser) para escolher o ícone certo a apresentar.

Na próxima parte deste artigo detalharei a solução implementada. Entretanto, se a curiosidade apertar, experimente ver o código fonte desta página e olhe para o script gerado (procure o texto "var all_labels")

Twitterfeed

2010-02-15T04:24:00.001Z

O http://twitterfeed.com é um serviço para lançar os posts do blog no Twitter. Para ver o resultado, dar uma olhada no meu Twitter: http://twitter.com/hitech_tips É um serviço que uso há algum tempo e é de tal forma transparente que agora, querendo recomenda-lo, precisei de fazer uma busca no Google para encontrar o respectivo site.

Yahoo Pipes

2010-02-15T04:12:00.001Z

Os Yahoo Pipes, ou numa tradução livre, a Tubagem do Yahoo, é uma tecnologia com dois anos, lançada em Fevereiro de 2007. É uma interessante ferramenta para agregar, manipular e misturar conteúdos dispersos pela web, produzindo uma única saída. Tal como nos canos de água, em que vários tubos se vão unindo, com torneiras selectivas, para formar uma conduta única. Acresce que é uma tecnologia ao alcance de todos, mesmo para pessoas sem formação específica em informática.

Há vários vídeos a demonstrar o uso do Yahoo Pipes, seja no Youtube, seja no próprio Yahoo Pipes. Mas o melhor mesmo é vê-los em acção. Por exemplo, a pesquisa http://pipes.yahoo.com/pipes/search?q=flickr+blogger&x=0&y=0 devolve Pipes que usem o Flickr e o Blogger para juntar dados e mistura-los num único RSS. Em particular, este Pipe http://pipes.yahoo.com/pipes/pipe.info?_id=sqpS5Mzy3BGLF4Jz8jxBKg cria um slideshow com imagens obtidas num mashup do Google Reader composto por feeds do Flickr e do Picasa.

Por aqui, estou a usar os Pipes na nova template para este blog. Isso inclui filtrar os conteúdos para os agrupar por labels e juntar a bonecada do Flickr num misto de slideshow e textos do blog. Voltarei ao assunto quando a template sair.