Some High-Tech Tips

This post in English

 

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)

1. Entrar no blog e clicar em Design
   
    
2. Clicar em Editar HTML
   
    
3. Clicar em Transferir modelo completo
   
     
4. 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

 

1. Entrar no blog e clicar em Design
   
   
2. Clicar em Editar HTML
   
   
3. Escolher o ficheiro guardado no ponto anterior (clicar em Browse/Procurar, dependendo da língua usada) e clicar em Carregar.
   
    
4. 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.
   
5. 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.

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
  

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: &quot;pt&quot;
      };
  </script>

Where it's written pt you can place the letters for your language. After this change, it should look like this:



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

<script type='text/javascript'>   
var addthis_share = {
    url: &#39;data:post.url&#39;,
    title: &#39;data:post.title&#39;,
    templates: {
        twitter: &#39;RT @fliscorno {{title}} {{url}}&#39;
    }
};
</script>

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

At the end of this step, it should look as the following picture:

(click to enlarge)

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.

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.

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.

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

1. First, do a backup of your blogger template (see it here: Template actions: download, backup, edit and restore) .
   
2. 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 />
   
   
3. 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:
   
   


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

 

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.

1. Entre no blog em www.blogger.com
2. Clique em Definições e depois em Básico
3. Clique em Exportar blogue
4. 
   
   
   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?

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:

1. Faça uma cópia de segurança da template (ver aqui como)
2. edite a sua template e procure o texto </head>
   
3. 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.
   
4. Grave a template
   
5. 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
   
6. Volte ao Buzz e clique no link "connected sites" e adicione os que novos sites

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.

 

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:

1. 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.
2. 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.
3. 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.

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:

1. 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
2. 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).
3. 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.

4. 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'>
   <!-- FACEBOOK share –>
   <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> 
   <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/> 
   <br /><br />

   <!-- TWEETER share --> 
   <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>
   <!-- SHARE end -->

5. Altere o texto vermelho em cima para ser o seu utilizador twitter.
6. 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.
7. 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.

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