[Blogger - Novidade] - Artigo completo sobre o novo visual do Editor HTML do Blogger
Autor: Igor Sousa | Publicado: 2013-04-13T17:37:00-03:00

Olá querido leitor, depois de um tempinho sem publicar nenhum artigo — por causa da correria no trabalho —, hoje vou falar sobre a mais nova mudança na plataforma Blogger: o visual do Editor HTML. Como você deve saber a equipe do Blogger trabalha bastante para implantar melhorias em sua plataforma de acordo com o feedback dos usuários, e há alguns dias a equipe do Blogger anunciou uma melhoria que será muito útil para os desenvolvedores que criam templates para a plataforma, e para os aventureiros do código-fonte.

Novo visual no "Editar HTML" dos templates da plataforma Blogger


Blogger implanta novo Editor HTML com realce de sintaxe, numeração de linhas e muito mais...

É comum que em tutoriais para "melhorar" o visual e/ou recursos do blog, seja necessário que você inclua/exclua códigos diretamente em seu template (código-fonte). Porém, antigamente essa tarefa era aconselhável somente para os usuários com conhecimentos em linguagens web (HTML, CSS, Javascript etc.), até porque o visual dos códigos eram um tanto quanto monocromáticos e apareciam como um monte de códigos dentro de uma caixa de texto — uma espécie de bloco de notas —, e isso podia causar muita confusão se você não soubesse, e prestasse atenção, no que você estava mexendo.

Porém, com essa nova melhoria no Editor HTML do Blogger, ficou mais fácil identificar o que está sendo alterado, e o código-fonte ficou mais organizado. Agora o código-fonte pode ser visualizado com realce de sintaxe, numeração de linhas, agrupamento de códigos, auto-identação — que antes só podiam ser obtidos se você usasse programas próprios para desenvolvimento web, tais quais: Notepad++, Adobe Dreamweaver, e outros menos conhecidos. Houve também a implantação de novos recursos, que serão descritos mais abaixo.

Realce de sintaxeComo você pode ver na imagem abaixo, e em tempo real no painel de controle do seu blog (Modelo &gt; Editar HTML), agora o estilo monocromático, e de texto plano, do seu código-fonte foi substituído por linhas com códigos totalmente coloridos — um pouco atrasado para o carnaval, mas tudo bem. Essa coloração nas linhas, num primeiro momento, pode acabar confundindo os usuários, e até passando a impressão de um código bagunçado, mas isso é questão de se acostumar!


Essa coloração facilita bastante na identificação de erros — geralmente códigos "quebrados" —, e também ajuda na formatação do código, pois fica mais fácil de visualizar a estrutura do código-fonte. A coloração é adiciona automaticamente, e está ligada ao tipo de código que está presente no seu template.

Numeração de linhasA numeração de linha, sem dúvida nenhuma, é uma das melhorias mais importantes e úteis que a equipe do Blogger implantou. Chega daquelas mensagens de erro ao tentar salvar o template, que dizem que um erro foi encontrado, mas que não mostram aonde o erro está. Quando esse tipo de coisa acontecia era necessário, dependendo da alteração que você fez, olhar todo o código-fonte para encontrar o erro que você cometeu — pior ainda quando o erro era a falta de uma única letra no código.


Como você pode ver na imagem acima, eu apaguei o sinal de "menor que" (&lt;) que indicava o começo da tag b:section, na linha 1902. Ao apagar esse único caractere eu quebrei o código-fonte do template e não consigo salvá-lo. Como eu disse no parágrafo anterior, se o Editor HTML do Blogger não tivesse sido melhorado, eu, provavelmente, teria um baita trabalho para descobrir que faltava esse caractere.

Mas agora, com a opção de linhas numeradas, o Blogger informa a você o número da linha aonde está o erro. Como você também pode ver na imagem acima, fui informado que o erro está na linha 1918, que é aonde se encontra a tag de fechamento do código b:section. Na verdade, o erro se encontra na linha 1902, que foi aonde eu apaguei o código, mas só de a plataforma informar a tag de fechamento como erro, eu consigo visualizar que o erro está nessa tag.

NOTA: veja que ao encontrar o erro, a plataforma realçou a linha de azul claro e alterou a cor do texto para vermelho, reforçando o que eu falei no tópico "Realce de Sintaxe" quanto a ajuda que a coloração do texto proporciona no momento de encontrar erros.

Agrupamento de códigosTalvez, ao olhar seu código-fonte, você deva ter notado que algumas partes do seu código "sumiram", destacando principalmente a parte do CSS que é uma das partes mais alteradas de um template, e que é responsável por adicionar as cores, formas e efeitos do seu blog. E deve ter notado também que o tamanho do seu código-fonte reduziu consideravelmente — mas apenas visualmente!


Não se assuste com esse sumiço e com essa redução do seu código-fonte, pois continua tudo em seu devido lugar. A equipe do Blogger apenas ocultou algumas partes do seu código. Note na imagem acima, que em alguns trechos a numeração de linha dá um salto, por exemplo, da linha 13 a contagem pula para a linha 572. Note também que após o número 13 há uma pequena seta. Essa seta, e esse salto na numeração, indica que o código da linha 14 até a linha 571 está oculto. Para mostrar o código oculto, basta que você clique sobre a numeração da linha 13 — ou, se você for uma pessoa perfeccionista, basta que você clique exatamente sobre a pequena seta. Ao fazer o clique o código que estava oculto será mostrado automaticamente, permitindo que você o edite normalmente.

Auto-identação do códigoA auto-identação, caso você não saiba, é a estrutura em "escadinha" do código-fonte. Quando escrevemos o código-fonte de alguma página, precisamos estruturar esse código de uma maneira que possamos visualizar aonde cada código se encaixa. Por exemplo, no trecho de código abaixo temos uma tag DIV, em seguida uma tag P e, em seguida, um texto qualquer.

&lt;div&gt;&lt;p&gt;Texto qualquer&lt;/p&gt;&lt;/div&gt;

A maneira que o código foi escrito está correta, pois não há nenhuma tag quebrada e todas elas estão na posição correta, porém, ao olhar o código rapidamente fica difícil identificar sua estrutura, ou em palavras mais simples: "o que é que está dentro do quê". Okay, esse código é pequeno e dá para visualizar sua estrutura sim, mas pense no enorme código-fonte do seu template ao ler a explicação.

O código acima, ao ser analisado, informa que temos uma DIV e que, dentro dessa DIV, temos uma tag P que por sua vez, possui um texto qualquer dentro de si, voilà! Nada muito complexo, certo? Okay, ainda não entendeu? Então, visualmente "falando" temos o que é demonstrado na imagem abaixo.


Pronto. Acho que agora ficou bem explicado. Contudo, o código que foi mostrador acima teria permitido uma análise muito mais rápida se tivesse sido escrito da seguinte maneira:

&lt;div&gt;
&nbsp;&nbsp;&nbsp;&lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Texto qualquer
&nbsp;&nbsp;&nbsp;&lt;/p&gt;
&lt;/div&gt;

Pois bem, esse espaço que existe a frente das tags, fazendo com que ganhem uma estrutura de "escadinha", é a tão falada "identação" do código-fonte. Quando um código é escrito com essa "identação" fica muito mais fácil de analisá-lo e de entender sua estrutura. E esse recurso de auto-identação do Blogger, permite que, ao escrever algo em seu código-fonte, ele seja estruturado automaticamente.

Novos recursos do "Editar HTML" da plataforma Blogger
Além do visual propriamente dito, a equipe do Blogger adicionou novas opções e reformulou outras com o intuito de agilizar a edição do template e/ou para facilitar a procura por trechos específicos do seu código-fonte. Confira abaixo uma explicação do que cada um desses novos recursos pode fazer por você.


Opção "Voltar"Essa é a opção mais avançada de todas as opções presentes no novo Editor HTML da plataforma, pois através dela você voltar para o menu Modelo. Ooh!

Opção "Salvar modelo"Após ter feito todas as alterações que você encontrou na web para deixar o seu blog do jeito que você quer, é esse o botão que você deve clicar para terminar de ferrar com o seu template salvar o seu template. Ou, em palavras mais simples, é através dele que você salva todas as modificações que você fez.

Opção "Ir para um widget"Essa opção permite que você pule diretamente para o código dos gadgets/widgets que você possui instalado em seu blog. Muito útil para evitar o famoso "Ctrl+F", quando se está procurando o código-fonte de um gadget específico. Basta escolher um gadget na lista (como ilustra a imagem abaixo), e clicar sobre ele para visualizar seu código.


Opção "Editar modelo"Essa opção já aparece selecionada quando você acessa o Editor HTML do Blogger, e ela permite que você volte a visualizar/editar o seu código-fonte caso você tenha clicado na opção "Visualizar modelo".

Opção "Visualizar modelo"Essa opção permite que você visualize seu blog antes de salvar as modificações feitas. Muito útil para quem quer apenas fazer alguns testes, sem precisar aplicar as modificações ao blog para visualizá-las em ação. Para voltar a visualizar/editar o código-fonte basta selecionar a opção "Editar modelo".


Opção "Reverter modelos de widget para o padrão"Essa opção, além de ser a que tem o nome mais comprido no Editor HTML, permite que você reverta ao padrão do código-fonte dos seus gadgets, caso você tenha feito alterações nele. Ao clicar sobre ela, uma janela como a mostrada na imagem abaixo se abrirá, e você poderá escolher dentre reverter o padrão do código-fonte de um (ou mais) gadget específico, ou de todos os gadgets que estão instalados.


Opção "Formatar modelo"Essa opção permite que você organize o código-fonte do template. Ao clicar sobre ela, a estrutura do seu código-fonte será automaticamente "identada" (estruturada em escadinha).

Opção "Reverter alterações"Essa opção permite que você apague todas as alterações que você fez no seu código-fonte, e que ainda não foram salvas. Portanto, caso você tenha alterado algo e tenha clicado sobre a opção "Salvar modelo", as alterações não poderão ser revertidas.

INFORMAÇÃO: note que esse novo editor está disponível para todos os usuários da plataforma, e os recursos podem ser utilizados também por quem possui um template não-oficial do Blogger.

Com informações: Blogger Buzz.

O que achou do novo Editor HTML? Gostou? Não gostou? Deixe sua opinião!