O novo editor de HTML do Blogger – Análise completa

Já não é mais novidade que o Blogger lançou um novo editor de HTML.

Na noite do dia 09/04, foi disponibilizada uma nova versão do editor, com diversas funcionalidades interessantes e também alguns detalhes incômodos.

Neste artigo, você conhecerá os detalhes sobre a novidade e minha opinião sobre as mudanças realizadas.

Introdução

Dependendo do seu perfil como usuário do Blogger, pode ser que você nunca tenha precisado alterar o HTML do seu template.

Se você apenas publica suas postagens, responde comentários e instala widgets, é bem provável que não tenha ainda precisado acessar essa área.

Se for esse seu caso, esta novidade significará pouco – ou nada – para você.
 

No entanto, se você é um usuário avançado, que gosta de instalar códigos em seu template, faz você mesmo suas customizações e quer deixar seu blog com um visual diferente de qualquer outro, há grandes novidades!

Felizmente, o Blogger investiu para tornar mais fácil a sua vida.

No artigo Como editar o HTML de seu template no Blogger, eu expliquei como realizar alterações no HTML no editor antigo.

Tratava-se de um editor bastante pobre e sem recursos. Por isso mesmo, eu preferia copiar o código para um editor de textos – como o Notepad++ – e fazer nele as alterações.

Com as mudanças, isso pode não ser mais necessário.

Um fato curioso é que presenciei esta mudança “ao vivo”: ela foi disponibilizada pelo Blogger enquanto eu trabalhava em um template.

Após publicar uma alteração, vi a tela totalmente reformulada.

Preferi publicar essa informação de imediato apenas em minhas redes sociais e trabalhar alguns dias com o novo editor para poder expressar minha opinião.

A novidade foi oficialmente divulgada no artigo Improvements to the Blogger template HTML editor.

Abaixo, estão explicações detalhadas sobre como usar o novo editor e minhas impressões sobre ele.

Comparação visual entre o antigo e o novo editor

Nas figuras abaixo, você pode comparar rapidamente como era o editor e como ele ficou agora.

Antigo

Novo

 Em termos visuais, é como se antes você utilizasse o Bloco de Notas do Windows para editar seu template e agora passar a utilizar o Notepad++.

A propósito, muitos dos novos recursos (como a numeração de linhas, o “syntax highlight” e a abertura/fechamento de códigos) já estavam presentes nessa ferramenta e são realmente úteis.

Novidades no novo editor de HTML

Abaixo, você verá quais são as novidades trazidas nesta atualização. Em cada um dos itens, colocarei minha opinião a respeito da alteração realizada.

1. Syntax highlight

Visualmente, esta é a primeira coisa que chama a atenção no novo editor: agora, o seu código HTML vem em cores variadas e não mais somente em fonte preta, como antes. 

 Há um ótimo motivo para isso, que já é conhecido por quem está acostumado a trabalhar com linguagens de programação.

Em um código, há diversos tipos diferentes de elementos: textos, comentários, variáveis, constantes etc.


O que o novo editor mostra agora são justamente esses elementos em cores diferentes.

A vantagem é que, dessa forma, fica mais fácil fazer uma “leitura organizada” do código, identificado rapidamente o que é cada trecho que você está vendo.

MINHA OPINIÃO: É um recurso importante e bem vindo. Quando você se acostuma com as cores, fica mais fácil detectar que você escreveu um termo errado (por exemplo “hiden” em vez de “hidden”), pois ele ficará em cor diferente dos demais elementos.

2. Numeração de linhas

Outra alteração que é facilmente detectada é que agora o editor mostra o número de cada linha do código na margem esquerda.

Com isso, é possível detectar facilmente em que linha do código você está.

Isso traz diversas vantagens:

• Quando ocorre um erro ao tentar aplicar o template e o Blogger informa a linha, é simples encontrar onde ele está.
• Se você faz uma busca no código e identifica diversas ocorrências do resultado, também é fácil descobrir em que ponto do código você está.

Uma observação: não se assuste com as linhas “puladas” ou “faltantes”. Isso será explicado no próximo item.

MINHA OPINIÃO: É outro recurso útil e importante. Para ficar perfeito, poderia ser mostrado também o número da coluna em um rodapé. Mas, da forma como está já é bem interessante.

3. Blocos de códigos contraídos

Na nova versão, há blocos de código que não aparecerão por padrão quando você editar o seu código HTML.

Em lugar do código aberto, você verá uma “seta” na barra esquerda, mostrando que o código está contraído.

Você também verá que a numeração apresentará “falhas” nesse trecho.

Abaixo está um exemplo, mostrando todo o bloco onde fica seu CSS contraído:

Neste outro trecho, há o código de alguns widgets contraídos:

Para mostrar o código completo desses trechos, basta clicar na “seta” da barra e ele será aberto naquele ponto.

É uma opção semelhante à que havia antes, chamada “Expandir modelos de widgets”.

A diferença é que agora você deve fazer a expansão em cada widget que deseja visualizar, não sendo mais possível expandir todos de uma vez.

Outra diferença é o fato do código CSS também vir contraído por padrão. Isso significa que, para visualizar seu código CSS, você deve clicar na seta ao lado de “skin”.

Embora eu tenha dito antes que não seria possível voltar a contrair o código após tê-lo expandido, a informação estava errada.

Basta clicar na mesma linha que antes mostrava a contração para que isso ocorra.

Agradeço ao Osvaldo Correia e ao Rubens Takiguti Ribeiro pela dica!

Outra dica dada pelo Rubens e que eu não tinha percebido é que é possível também contrair outros elementos que vêm abertos por padrão.

Clique em uma linha que tenha o início de um IF ou de uma DIV por exemplo para ver o efeito.

O objetivo da alteração parece ter sido deixar um código mais limpo visível, mostrando somente os trechos que, teoricamente, são os mais alterados.

MINHA OPINIÃO: Gostei – mas não muito – da mudança. Em meu caso, o CSS é um dos pontos onde faço mais alterações, então não vejo sentido em ele vir contraído por padrão. Outro ponto negativo é que, quando se usa a busca do navegador, as palavras não são encontradas nos trechos contraídos.

4. Busca no código

Outra novidade é que agora o próprio editor possui um mecanismo de busca de palavras dentro do código. Antigamente, isso só será possível pela busca do navegador.
 

Para ativar a busca, é necessário clicar em qualquer trecho do código e pressionar as teclas CTRL+F.

Será aberta uma caixa no canto superior direito para você digitar o termo a pesquisar. Depois é só pressionar ENTER para procurar.

Você também pode utilizar as teclas CTRL+SHIFT+F para procurar e substituir um termo específico (primeiro, digite a palavra a procurar, depois ENTER, depois a palavra a substituir, depois ENTER novamente).

E pode também procurar e substituir todas as ocorrências de uma palavra com CTRL+SHIFT+R.

Uma boa notícia é que essa busca funciona inclusive dentro dos blocos contraídos.

Ou seja: se você utilizá-la para procurar um termo que está dentro de seu CSS, ele será encontrado com com a “skin” fechada.

MINHA OPINIÃO: É um recurso útil, especialmente por conseguir localizar termos no código contraído. Mas, é também bastante limitado nas opções de busca, sem poder procurar para cima ou por palavras inteiras, por exemplo. Para quem estava acostumado a utilizar somente a busca do navegador, é uma boa opção.

5. Ir para um widget

Esta é uma opção bastante interessante e disponível somente no Blogger (ou seja, nem no Notepad++ é possível fazer isso).


A clicar na baixa “Ir para um widget” é mostra uma lista com todos os widgets que existem em seu modelo.

Clicando no nome dele, você será levado para o código daquele widget, facilitando o trabalho de edição.

MINHA OPINIÃO: Este é um ótimo recurso, especialmente em blogs que contenham muitos gadgets. Com ele, os widgets são localizados rapidamente, não importa em que parte do código estejam.

6. Visualizar modelo

A opção “Visualizar” já existia na versão antiga do editor.

Ela permite visualizar como ficará seu blog após as alterações no template atual, antes mesmo de salvá-las.

Isso é muito útil para ter certeza do efeito que elas trarão ao template, pois, após salvá-las, todos os seus leitores as versão;

A diferença é que antes, a visualização era feita em uma nova guia ou aba do navegador.


Agora, ao clicar no botão “Visualizar modelo” a visualização é feita na própria janela, no mesmo local onde é mostrado o código do template.

Para voltar à edição, é necessário clicar no botão “Editar modelo”.

MINHA OPINIÃO: De todas as alterações, esta foi a mais infeliz. A forma anterior era muito melhor, pois mostrava exatamente como o blog se comportaria ao ser visualizado em uma janela inteira. Agora, o espaço é limitado e não permite ver o blog por completo. O pior é que não há como você não utilizar essa forma de visualização.

7. Formatar modelo

Esta opção foi uma ótima ideia!

Quem trabalha com HTML (ou outras linguagens de programação) sabe como um código bem organizado facilita sua compreensão e manutenção.

Um dos aspectos importantes para essa organização é a indentação (ou endenteção, como prefere alguns) do código.

Trata-se de usar espaços no início da linha, de forma a mostrar qual código está “dentro” de outro.

Utilizando como exemplo um código que mostrei no artigo Como otimizar o título das suas postagens para o Google, é mais fácil entender o funcionado do código

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
    <title>Palavras-chaves – <data:blog.title/></title>
<b:else/>
    <title><data:blog.pageName/> – <data:blog.title/></title>
</b:if>

do que deste

<b:if cond=’data:blog.pageType == &quot;index&quot;’> 
<title>Palavras-chaves – <data:blog.title/></title>
<b:else/> 
<title><data:blog.pageName/> – <data:blog.title/></title>
</b:if>

Agora, ao clicar no botão “Formatar modelo”, a indentação será feita de forma automática em todo o seu template, permitindo melhor compreensão. Veja abaixo o exemplo do template antes e depois a alteração.

Antes

Depois

Outra alteração interessante que este recurso faz é eliminar as linhas em branco que existem ao longo do template, que realmente não servem para nada.

MINHA OPINIÃO: A ideia deste recurso bastante útil e bem vinda! Trabalhar com um código organizado é muito mais simples e rápido do que um código desorganizado e difícil de entender. Mas, é necessário extremo cuidado ao utilizá-lo: em um teste em meu template oficial, essa operação fez alterações em meu código que fizeram com que alguns recursos deixassem de funcionar. Por isso, antes de utilizá-la é essencial guardar uma cópia do seu template, para poder voltá-la em caso de erro. Outro porém é que a organização não funciona bem com códigos “comentados” ´do HTML, deixando-os sempre alinhados à esquerda.

8. Botão “Voltar”

Este botão simplesmente faz com que você volte à tela anterior à edição de HTML.

MINHA OPINIÃO: Não é um recurso significativo.

Recursos que foram mantidos da versão anterior

Além dos novos recursos, há dois que já existiam na versão anterior e foram mantidos:

1. Salvar modelo

É nesse botão que você deve clicar quando terminar todas as alterações que deseja realizar em seu template e quiser salvá-las para que tenham efeito em seu blog. Uma vez realizada, não é mais possível desfazê-las – a menos que você tenha o código anterior para poder colá-lo no editar e salvar novamente.

2. Reverter alterações

Este botão serve apenas para descartar as alterações que você fez em seu HTML e que não estão salvas. Ao clicar nele e confirmar a operação, será recarregado seu código da mesma forma que estava da última vez em que foi salvo.

3. Reverter modelos de widgets para o padrão

Este é um recurso interessante – mas que deve ser utilizado como extremo cuidado. Ele pode ser útil no caso de recursos que não estão funcionando corretamente em seu template, seja porque estão errados ou porque o Blogger lançou alguma novidade. Há informações completas sobre ele no artigo Reverter modelos de widget para o padrão.

Conclusão e opinião geral

É sempre uma boa notícia ver que o Google continua investindo no Blogger e aplicando tempo e dinheiro em novas funcionalidades.

O editor antigo era pobre demais e dificultava a edição do HTML diretamente nele.

Por esse motivo, sempre fiz minha alterações copiando o template, colando-o no Notepad++, fazendo lá as mudanças e devolvendo o código para o Blogger.

Em linhas gerais, as novidades ficaram interessantes.


Para quem fazia a edição diretamente pelo editor antigo, será um grande avanço, que permitirá mais agilidade e facilidade para realizar as mudanças no código.

A grande “pisada na bola”, a meu ver, foi a mudança da visualização, que era notadamente melhor na versão anterior. Já a opção de “Formatar modelo” foi o grande ganho, pois é algo muito interessante e que eu não tinha em nenhum outra ferramenta.

Mesmo no meu caso, onde houve erros na interpretação do modelo, é possível fazer a correção manualmente e se beneficiar da funcionalidade.

Algo que seria uma evolução enorme – mas não foi feito – seria a possibilidade do próprio Blogger guardar as versões anteriores do template a cada edição.

Dessa forma, seria simples recuperar o blog após uma mudança feita de forma errada. O Google Sites, por exemplo, possui essa funcionalidade.

Em meu caso específico, prefiro continuar utilizando meu método de edição pelo Notepad++ para grandes alterações – mesmo porque gosto de armazenar as versões do meu template a cada mudança.

Mas, com certeza utilizarei a ferramenta de “Organizar código” para torná-lo mais “limpo”.

Em alterações pequenas, já estou utilizando o novo editor e gostando muito!

E você, o que achou da novidade?

Quais foram os ganhos e perdas?

Compartilhe sua opinião em um comentário!