Some High-Tech Tips

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.