[Blogger - Novidade] - Artigo completo sobre o novo visual do Editor HTML do Blogger

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 sintaxe

Como você pode ver na imagem abaixo, e em tempo real no painel de controle do seu blog (Modelo > 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 linhas

A 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" (<) 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ódigos

Talvez, 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ódigo

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

<div><p>Texto qualquer</p></div>

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:

<div>
   <p>
      Texto qualquer
   </p>
</div>


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!

É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 12 comentários neste artigo!

  1. Me parece que foi tirada a opção de depois de editar o modelo e visualizar em outra janela... muito ruim mesmo. Não gostei.

    ResponderExcluir
    Respostas
    1. Olá Adeval, realmente, agora a visualização do template não abre mais em outra janela, onde permitia que víssemos o modelo de uma maneira mais completa. A visualização agora está mostrando o blog dentro de um frame no próprio painel do Editor HTML, o que de fato não agrada muito, já que o espaço é limitado. Contudo, esse novo painel foi implantado no dia 09.04.2013, o tornando um recurso bem recente. E, como tudo o que Blogger implementa, pode ser que nos próximos dias eles façam algumas mudanças com base no feedback dos usuários. Aguardemos. Agradeço a visita e o comentário. Volte sempre!

      Excluir
  2. Eu fiquei um pouco perdida no começo. Para alguém que não sabe muito de HTML, tentar mexer nesse novo painel pode trazer confusão e até prejuízos caso ele clique no lugar errado.

    Hoje, depois de ter mexido mais com ele, vejo que está mais otimizado. Mesmo a opção de visualizar o modelo dentro do frame não me causa mais estranhamento, apesar de realmente ter ficado menor.

    Dependendo da aceitação do público, quem sabe o Blogger deixe esta opção como a anterior, de abrir em uma nova janela? Vamos aguardar.

    Mas acho bem interessante as mudanças realizadas. O Blogger está mais otimizado, melhorando a cada dia. O Wordpress pode ter suas vantagens, mas o Blogger tem melhorado tanto que acho que não deve mais nada para ele. rs

    Abraço!

    ResponderExcluir
    Respostas
    1. Olá Sybylla, no começo causa estranhamento mesmo, mas depois que se acostuma começamos a ver as vantagens que essa mudança traz. Como tudo que é novo, demora um pouco para se acostumar. A respeito da opção de "Visualizar modelo", eu acredito que era melhor da maneira que estava (abrindo em outra janela), pois se você possui um template responsivo, pode ser que o tamanho do frame force o template a aparecer como se estivesse em uma resolução menor (necessário verificar), e isso atrapalharia ao tentar visualizar mudanças feitas para resoluções maiores. Enfim, eu gosto muito do Blogger — e estou aprendendo a gostar do Wordpress (novidades a caminho, rs) —, agora vejo as duas plataformas de maneiras diferentes, e que atendem a públicos diferentes, mas sem dúvidas o Blogger melhorou muito desde 2010 para cá (quando ingressei nele). Aguardemos mais novidades. Agradeço a participação. Um abraço.

      Excluir
  3. Excelente artigo Igor e quanto a visualização em outra janela comentada pelo amigo adeval della logo acima, ao menos em um primeiro momento não achei tão ruim... mas como vc mesmo disse se a galera não gostar muito com certeza eles alteram. abs :)

    ResponderExcluir
    Respostas
    1. Olá SilverHawk2099, que bom que gostou do artigo! E, realmente, essa é uma das grandes vantagens da plataforma Blogger: eles se preocupam com a opinião dos usuários quando são relevantes. Tanto que quando lançaram o efeito lightbox, muitos usuários (dentre eles, eu) reclamaram da implantação forçada do recurso, e eles humildemente voltaram atrás e tornaram o efeito opcional, mostrando que o feedback realmente funciona. Aguardemos mais alguns dias para ver o que vinga e o que não vinga nesse novo editor. Agradeço sua opinião, volte sempre! Um abraço.

      Excluir
  4. Alguém sabe como tirar as bordas/margens das imagens? Agora não consigo fazer com que ache o código, nem existe mais. Ajuda por favor!

    ResponderExcluir
    Respostas
    1. Olá Mariana, desculpe a demora em responder! Caso o problema com suas imagens ainda persista, peço que, por favor, me informe o endereço do blog e indique a borda de quais imagens você deseja remover.

      Excluir
  5. Eu gostei da Visualização no próprio editor, mais eu to tendo Problema na hora de alterar um código no editor, quando eu apago um letra o editor apaga outro, Tipo nesse Código abaixo:

    '#'>Editar Menu

    Quando eu apago a o simbolo (#) o editor automaticamente apaga a letra (d) da palavra "Editar" em vez de apaga o simbolo (#)

    ou qualquer outra letra que eu apaga o editor apaga outro!! Como eu faço pra alterar sem acontecer isso??

    ResponderExcluir
    Respostas
    1. Olá Priscilla, desculpe a demora em responder! Quanto ao problema que você descreveu, até o momento, eu não tive nenhum problema para alterar os códigos. Mas uma solução temporária, caso o problema ainda persista ou volte acontecer com você, seria copiar o código e cola-lo no bloco de notas, depois é só fazer a alteração que você quer e copiar o código alterado novamente para o seu editor. Acredito que isso sirva para contornar o problema. Qualquer coisa entre em contato novamente!

      Excluir
  6. E continuamos sem respostas para modificar os codigos necessarios em um blog.Esqueceu de dizer que agora o google esta jogando com HTML5 e parece,que 90% dos usuarios estao despreparados para tal mudança!
    Vou postar meu problema

    Eu adoro usar tagas divs e hackers para esconder ou mostrar sidebar,menu accordion e css3 .Mas ocorre que não sei como faze-lo,pois estou com o meu blog desmoronado.

    ResponderExcluir
    Respostas
    1. Olá Taillard, realmente, o HTML5 está cada dia mais presente nos blogs e websites, não só por parte da Google, mas por tantas outras companhias também. Quanto ao despreparo dos usuários para esse novo padrão, o Blogger tem como finalidade ser uma plataforma descomplicada para seus usuários, fornecendo ferramentas que permitam a customização de seus blogs sem a necessidade de mexer com códigos. A parte do Editor HTML é recomendada apenas para quem tem conhecimentos em linguagem web. Portanto, quem quiser utilizar essa ferramenta para customizar ainda mais o blog, terá que aprender esse novo padrão — que não é tão complicado assim. E quanto aos problemas no seu blog, o editor continua funcionando da mesma forma, porém, com um visual mais atraente para desenvolvedores. Adicionar estilos CSS continua funcionando da mesma forma, adicionar hacks também continua funcionando da mesma forma etc. Acredito que seja questão de se adaptar. Se eu puder ajudar em algo é só entrar em contato falando em que você está com dúvidas que, assim que possível, tentarei te ajudar. Agradeço o comentário e a sua opinião! Volte sempre.

      Excluir