FLISCORNO

Sobre a "sondagem" anterior

2010-06-03T12:36:00.001+01:00

Obrigado pelo vosso feedback, que acaba por ser uma forma de comunicar com quem por aqui passa. Não sei como é convosco, mas por mim nem sempre me apetece deixar um comentário e esta forma de interacção, na qual se inclui os "Likes" do Facebook e outros, é mais preguiçosamente deliciosa :)

Quanto às respostas obtidas, a chave totoloto será tornada pública no próximo sábado :) A maior parte das respostas é de quem já conhece parte da bonecada. Compreendo que possa ser tedioso para alguns ver a repetição mas, enfim, isto é feito em carolice e quando o engenho ou cronos não ajudam mais vale sacar algo do baú. Sobre a forma de fazer estes questionário, apresento a seguinte umas linhas de orientação.

Como fazer estas "sondagens":

Ir ao Google Documents e depois Criar Novo - Formulário:

Depois é uma questão de preencher o formulário:

O tipo de pergunta apresentada por ser diverso, desde texto livre, passando por escolhas múltiplas (exclusivas ou não). As perguntas tipo "Escala" servem para escolhas tipo "Bom, Razoável, Mau" e as escolhas tipo "Grelha" são como as de tipo escala mas com várias linhas na mesma pergunta.

Em "Adicionar Item" podem-se inserir mais elementos. A apresentação visual é escolhida em "Tema". O formulário pode ser enviado por mail. As respostas podem ser vistas na folha de cálculo ou em resumo gráfico. Em "Mais acções" - "Incorporar" é apresentado o HTML que pode ser colocado no blog (em modo de edição HTML, naturalmente) e também se pode editar a confirmação mostrada quando alguém preenche o formulário.

Depois de terminada a pergunta, clicar em "Concluído" ver-se-á o aspecto da pergunta.

O formulário é criado com duas perguntas vazias. Apagar a segunda se esta não foi precisa. Passar com o rato por cima dos botões à direita para verem o que fazem.

Acho esta funcionalidade do Google Docs interessante, não só para sondagens de opinião mas até para fazer testes de conhecimento. Mas neste caso falta uma parte fundamental que é a validação de identidade de quem está a fazer o teste. Não existindo actualmente, essa funcionalidade teria que ser adicionada por parte do informático de serviço, recorrendo a alguma imaginação (ocorrem-me umas ideias de como o fazer mas não é coisa para o utilizador ocasional). Como me parece que é uma funcionalidade interessante, talvez a Google a venha a incluir. Outro aspecto que falta é a contagem de tempo ao fazer o teste.

A quem interesse, umas dicas sobre segurança no blogger

2010-05-03T07:00:00.000+01:00

Keep your Blogger blog safe!

Hitech Tips post: Google: "Do no evil", é mesmo assim?

2010-02-16T15:21:00.001+00:00

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... continue a ler no Hitech Tips.

Novo blog: Hitech Tips

2010-02-15T05:24:00.001+00:00

Os artigos relacionados com tecnologia que até agora aqui eram publicados passam a sair unicamente num novo blog que criei para o efeito:

http://hitech-tips.blogspot.com

Agradeço a ajuda na divulgação :-)

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

2010-02-10T22:53:00.001+00:00

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.

Blogtip: O blogger já tem páginas autónomas

2010-02-09T18:00:00.000+00:00

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.

HTML 5

2010-02-08T18:00:00.000+00:00

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.

Blogtip: como adicionar os botões de partilha no Twitter e no Facebook

2010-02-08T00:07:00.001+00:00

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.

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

2010-01-18T15:45:00.001+00:00

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

2009-12-22T22:31:00.001+00:00

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

Windows Live Writer - como inserir o separador "Ler mais..."

2009-12-18T09:39:00.001+00:00

Quem usa o Windows Live Writer (WLW) e gosta de partir os posts numa parte visível e noutra acessível depois de clicar num link a dizer "Ler mais" já reparou que o ícone que permite fazer isso está desinibido no Blogger. Parece que a malta da Microsoft ainda não topou que o Blogger também já tem essa funcionalidade.

O botão do meio, para inserir a
quebra de post, está desinibido

É fácil contornar este problema:

Clicar em "Código Fonte:
Localizar o sítio onde se quer colocar a quebra do post e, aí, abrir uma linha em branco
Colocar lá este texto: 
Voltar ao modo "Editar" e está feio.

Aproveito para explicar porque é que funciona. O texto do ponto 3 é um comentário, não no sentido de comentário a um texto mas sim de comentário HTML no contexto da informática. Isto é, é uma nota que será ignorada pelo software, neste caso pelo browser. Estes comentários têm a forma <!- qualquer-coisa-aqui-que-será-o-comentário -->. Tudo o que for colocado entre os dois marcadores azuis será ignorado pelo browser. Por isso, o WLW aceita que se coloque isto no HTML (código fonte), pois é HTML válido. No entanto, para o Blogger, este é um comentário especial e não será ignorado (o que destrói por completo o conceito de comentário; shame on you, Blooger!). Em vez disso, será interpretado e será produzido HTML que implementará a funcionalidade "Ler mais". Aliás, pode-se verificar no editor do Blogger que o que é feito ao inserir o "Ler mais" é apensas a inserção deste comentário especial.

Faça posts de forma rápida e eficaz

2009-12-08T06:00:00.000+00:00

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

2009-12-07T09:13:00.000+00:00

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

2009-12-02T00:38:00.006+00:00

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.

Funcionalidades

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.

Como usar a funcionalidade "Continuar a ler..."

2009-10-07T01:15:00.008+01:00

Há muito tempo que a funcionalidade de posts expansíveis estava na lista de pedidos dos blogspotters. Algo que os wordpressers, por exemplo, já tinham à disposição faz uma eternidade. Com, conversa à parte, a mesma funcionalidade também agora está disponível no Blogspot. Passo a descrever como a tornar disponível.

1. O que é
A funcionalidade de posts expansíveis permite mostrar parte do texto, ficando o restante disponível clicando num link, como se mostra a seguir:

Parte do texto está escondida, ficando visível ao clicar no link "Continuar a ler". Desta forma textos longos não retiram visibilidade aos textos mais antigos. Em contrapartida, há quem não aprecie ter de clicar num link para continua a ler...

2. Como tornar a funcionalidade disponível
Quem usar uma das templates standard do Blogger não precisará de passos adicionais para usar esta funcionalidade. Quem tiver templates personalizadas, mesmo que o ponto de partida tenha sido uma template do blogger, precisará de adicionar uma coisita à sua template.

a) fazer uma cópia de segurança da template (ver as instruções neste link). Este passo é fundamental para voltar a trás caso algo corra mal.

b) activar o novo editor.

c) continuando na mesma página onde se fez a cópia de segurança, seleccionar a opção "Expandir modelos do widget".

d) procurar no código da template o texto

<data:post.body/>

e, imediatamente por baixo inserir uma linha e colar o texto seguite:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

</div>

</b:if >

e) guardar a template e está feito.

3. Como usar
Tendo o cursor na linha onde se quer inserir a quebra, clicar no ícone destacado na imagem seguinte:

O resultado é aparecer a divisória que se mostra a seguir:

Esta divisória pode ser arrastada para outras posições, mudando assim o local de quebra do texto. Em modo de edição de HTML, a divisória tem o seguinte aspecto:

4. Como mudar o texto do link "Continuar a ler..."
Este texto, ou outro similar, pode ser alterado indo à página de esquema da tempate:

depois, clicar no Editar das mensagens do blog:

e finalmente modificar o texto pretendido

Gravar as alterações.

5. Para quem não gosta de obrigar a abrir uma nova página
Pode ser aborrecido - eu acho que é - ter que clicar num link para continuar a ler. É um caso de pesar as desvantagens (clicar no link) com as vantagens (melhor visibilidade dos posts). Aqui no Fliscorno, já antes usava uma alternativa própria que permite esta mesma funcionalidade e sem ter que abrir uma nova página. Isso é feito com javascritpt, que mostra e esconde o texto, sem necessidade de mudar de página. Como exemplo, ver este post. Numa próxima ocasião descreverei a funcionalidade para quem a quiser usar.

Blogger: o novo editor

2009-10-06T01:06:00.002+01:00

Quem não tenha andado a par das novidades do blogger, poderá não ter dado por uma mudança de nota ao nível do editor. Este tem novas e úteis funcionalidades! Mas para isso é preciso activá-las:

Guardar as alterações e de repente passa a dispor de:

undo e redo multiplos;
melhor colocação de imagens, sem o irritante efeito lateral de colocar as imagens sempre no topo;
remover formatação;
partir os posts com o link "ler mais" * ;
caixa de edição do post ajustável em altura.

Vale a pena tentar e, não gostando, pode sempre voltar a trás.

* voltarei a esta funcionalidade ainda esta semana.

Fazer cópia de segurança da template

2009-10-06T00:42:00.001+01:00

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

2009-06-12T05:00:00.000+01:00

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

2009-05-22T18:56:00.003+01:00

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

2009-05-07T00:30:00.005+01:00

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

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

Para que serve o Twitter?

2009-05-04T05:00:00.001+01:00

Todas as ferramentas são úteis ou inúteis conforme o uso que se lhe dê. Para ilustrar esta banalidade, todos compreenderão que, apesar de ser possível, faz pouco sentido limpar os dentes com uma chave estrela.

No caso do Twitter, há uma certa netiqueta em seguir quem nos segue. O resultado é óbvio: quem tem 5000 seguidores não vai seguramente ler as suas actualizações. E, paralelamente, também esses 5000 seguidores, os quais por sua vez seguem cada um deles uma multidão de outros twitters, não irão ler as nossas actualizações. Fica assim criado um sistema "legal" de spam que para pouco serve.

Pessoalmente, no twiter do fliscorno opto por seguir poucos twitters (sou mal-neticado, escolhendo-os geralmente pela pertinência e pelo uso que lhe dão. Leio-os volta e meia e por vezes encontro coisas interessantes. Já as minhas actualizações são essencialmente a notificação de novos posts e, esporadicamente,comentários à actualidade. Por enquanto é uma utilização básica mas logo se vê como evoluirá.

Os 140 caracteres constituem uma barreira redutora, de facto. Mas é um conceito com utilidade se usado como teaser e fornecendo um URL. E até já dei por mim a constatar que frases deste tamanho são úteis para elaboração de cartoons. Por exemplo, este cartoon sobre a entrevista de Sócrates teve origem na twittagem que fiz da respectiva entrevista.

O twitter permite também uma rápida publicação, o que torna possível comentar uma entrevista em tempo real. Quando foi a entrevista de MLR tentei fazer isso com o blogger mas foi penoso. Com a entrevista de Sócrates usei o Twitter e foi canja.

Portanto, respondendo à questão inicial, o Twitter serve comunicar com um grupo de pessoas numa base de muitos para muitos. No meios convencionais, a comunicação faz-se de um para um ou de um para poucos (telefone, SMS, MSN, chat) e de um para imensos mas só num sentido (rádio, televisão, jornais, blogs). É um misto entre a difusão em que não se conhece a audiência (aqui reside a maior diferença entre Twitter e MSN/afins/chats) e telefone, em que a comunicação é bidireccional.

O Blogger está aberto a novas ideias

2009-04-27T14:56:00.003+01:00

O blogger lançou o Product Ideas for Blogger. É uma plataforma que permite aos utilizadores sugerirem ideias, widgets e blogs de nota. Permite também votar em ideias existentes, favoravel ou desfavoravelmente.

Sugeri algumas ideias, baseadas nas funcionalidades que me fazem falta.

Aproveite para visitar este forum e contribuir com as suas ideias e votar noutras que ache úteis (ou votar desfavoravelmente as que achar inúteis). Mas atenção: a possibilidade de adicionar sugestões termina já a 30 de Abril. Que tal re-encaminhar este post para os seus amigos? Quantas mais ideias surgirem, maiores serão as possibilidades da plataforma blogger vir a incorporar melhores funcionalidades.

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

2009-04-15T00:29:00.008+01:00

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
Aqui no Fliscorno há uma certa misturada de conteúdos. 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 encotrar lá um certo tipo de conteúdos e isso fidelizará o visitante. Pela minha experiência pessoal, sei que assim é. Mas o facto é que não me apetece ter vários blogs e gosto de malhar em áreas diferentes conforme a pachorra do momento. Claro que para o visitante poderá ser algo frustante, 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")

Twiterfeed

2009-03-19T19:07:00.003+00:00

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/fliscorno É 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.

Nota: os posts com dicas sobre o blogger podem ser encontrados com a categoria blog: http://fliscorno.blogspot.com/search/label/blog

Twitter Search Form

2009-03-06T00:21:00.004+00:00

Aqui na barra lateral, mais uma novidade: pesquisa no Twitter. "Pesquisa no Twitter? Mas para que raio quero eu isso se o Google é tão omnisciente?", perguntará o leitor.

No meu ponto de vista, o Google está a tornar-se num mau motor de busca. Experimente o leitor pesquisar "JavaScript $" com ou sem as aspas (supostamente, as aspas são para pesquisa literal" e verá quantos resultados obtém com esta expressão. Zero. Pois. Uma página certa para devolver perante esta pesquisa seria a seguinte: "JavaScript Dollar Sign ($) - What is it for?". Quem se lembrar do Altavista logo dirá "ah e tal, o Altavista fazia isso". Pois. Já não faz. Googlelizou-se.

Bom, a pesquisa do Twitter não resolve esta questão. O ponto aqui era apenas por causa da deixa do motor de pesquisa do Google estar a perder qualidades. Mas a pesquisa no Twitter resolve um outro aspecto, onde o Google e demais ainda não têm resposta: procurar sobre o que se estiver a falar num dado momento. E neste aspecto é fantástico! Experimente, vá. Procure, sei lá, assim uma coisa sobre a qual ninguém escreverá coisas de interesse. Olhe, procure por Sócrates, por exemplo.

Vem este texto na sequência duma passagem pelo Twitter do Paulo Querido, onde encontrei o link para este interessante texto: Twitter's Search Threat to Google, Yahoo and Microsoft.

Se o leitor quiser colocar uma geringonça destas no seu blog, basta seguir os seguintes passos:

Ir a Esquema (Layout)
Clicar em Adicionar miniaplicação (Add a Gadget)
Clique no "HTML/JavaScript"
Pode deixar o título em branco e, no conteúdo adicione o código seguinte (no código, logo ao princípio, altere http://twitter.com/fliscorno para o seu Twitter):
<a href="http://twitter.com/fliscorno"><img width="170" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5YQZH4zrObrn96KPhTllKiJDPzWf4WSxXFNmUvKS0GvYdjRE_XeLUr5yJzq0lKnavDLOXgRL1MhyphenhyphenxY1kT6XDqMz9ft_WEvvHquAgBZ1xUzqFTrBDPoG4Ng3FTJyHBTQU4RjN9CA/s192/twitter_follow_me.gif" border="0"/></a><br /> <br /> <b>Procurar no Twitter</b><br /> O que estiver a acontecer <i>agora</i>.<br /> <form id="searchForm" action="http://search.twitter.com/search" target="_blank" method="get"><input id="searchBox" autosave="com.twitter.search" placeholder="Digite a sua pesquisa" value="" name="q" results="10" type="search"/><input value="Procurar" type="submit"/><br /> <a href="http://search.twitter.com/advanced">Pesquisa avançada</a></form>
Clique em Guardar e já está. Ganhará uma imagem como esta que fiz para mim a dizer "Twitter follow me" (pode usa-la livremente) mais a caixa de pesquisa do Twitter.

Nota: este código o que faz é usar o código do search form da página do Twitter. Caso os tipos do Twitter modificarem este form, então será necessário mudar manualmente este Gadget. Se isso acontecer, pode sempre passar pelo Fliscorno que cá terei a nova versão.

Já agora, já reparou no botão, mais em baixo, que diz PARTILHAR? Se gostou desta entrada, porque não partilha-la? :-)