Image

SOBRE CÓDIGOS-FONTE E IMAGENS QUEBRADAS

A migração do Portal Ônibus Paraibanos do Blogger para o WordPress não foi tão simples quanto fazer o mesmo com […]
,
A migração do Portal Ônibus Paraibanos do Blogger para o WordPress não foi tão simples quanto fazer o mesmo com este blog. E explicarei porquê neste post.

Vamos então para o nosso estudo de caso. Porque é literalmente um.

Desde o dia 1º de março, o Portal Ônibus Paraibanos foi transferido, tal como este blog, do Blogger para o WordPress. O projeto visual e a estruturação do novo portal foram feitos pelo Blog Josivandro Avelar.

O Portal Ônibus Paraibanos como ele era no Blogger...
O Portal Ônibus Paraibanos como ele era no Blogger…
Portal Ônibus Paraibanos- março de 2016
…E como ele ficou no WordPress, depois da migração.

Só que a migração do Portal Ônibus Paraibanos tem uma diferença; enquanto o Blog Josivandro Avelar está instalado em um servidor próprio, usando a plataforma WordPress, o Portal Ônibus Paraibanos foi transferido para o WordPress.com, que é um serviço de blogs como o Blogger, porém utilizando a plataforma modificada do WordPress, bem como seu servidor. Aliás, vamos aprender a diferenciar:

  • WordPress.org = Plataforma gratuita para instalação em servidor de hospedagem.
  • WordPress.com = Serviço de blogs do WordPress, utilizando servidor e plataforma.

O Blog Josivandro Avelar paga um servidor e nele instalou o WordPress, podendo fazer tudo aquilo que quiser nele. Já o Portal Ônibus Paraibanos migrou de um serviço de blogs para outro, do próprio WordPress, que utiliza uma plataforma modificada e seu servidor, o qual, tal como uma hospedagem, você paga um valor por ano. Mas ainda assim há limitações; um tema que consigo de graça aqui no WordPress.org eu pagaria no WordPress.com.

Voltando ao Ônibus Paraibanos, o que aconteceu com os posts do blog importados do Blogger – todos os posts publicados do início até 28 de fevereiro de 2016, quando o portal foi atualizado pela última vez no Blogger; os posts do dia 29 de fevereiro foram copiados manualmente – está relacionado à diferenças de código-fonte empregados nas plataformas, bem como nas mídias.

Bem, mas o que é código-fonte? É exatamente a linguagem de códigos que está escondida “por trás” de uma página da internet, que se traduzem em tudo aquilo que você vê nela. O sistema hexadecimal de cores, por exemplo, é para ser interpretado em códigos fonte: a cor azul das bordas do layout deste blog, por exemplo, se traduz no código #1e73be, enquanto a cor branca do resto, no código #ffffff. E um texto em negrito assim aparece por entre a palavra em negrito, aparecerem as tags <strong> abrindo, </strong> fechando. A Internet por trás de uma página bonita, esconde-se numa sequência de letrinhas e símbolos. E eles são o que chamamos de código-fonte.

Assim sendo, o que aconteceu com o blog foi o seguinte:

  • O acervo do portal precisava ser importado do Blogger para o WordPress. O WordPress.com aceita arquivos até 15 MB – o que no WordPress.org vai até 64 MB. O arquivo do Blogger tinha 54 MB, logo seria impossível importá-lo diretamente;
  • Foi criado um “blog clone” no servidor do Blog Josivandro Avelar, que gerou os arquivos de importação para a nova plataforma do Portal Ônibus Paraibanos. Logo, o processo seria realizado em suaves prestações, uma vez que o WordPress permite, tanto numa como em outra plataforma, exportar arquivos por períodos. As imagens vieram junto com os posts.
  • Quando o “blog clone” foi encerrado, as imagens foram quebradas. Isso porque os links <img src> (que são onde se encontram as imagens incorporadas” eram do blog clone, porém se clicados, levariam aos links da mídia do portal, que abriam tranquilamente. Lembra que eu disse que as imagens vieram junto? Vieram, mas como links das imagens quebradas, como tags <a href>.
  • Como muito material do Portal é recebido via clippings e releases, ele era copiado para o editor do Blogger, que quebrava os textos no código-fonte. Eles apareciam normais no Blogger, mas se revelaram no WordPress. Além disso, os textos também herdaram do Blogger as tags <div>, que no WordPress emendam parágrafos com imagens, bem como parágrafos com parágrafos.

O que vou mostrar a seguir é uma verdadeira aula de código-fonte. Vamos mostrar aqui alguns exemplos de estrutura de imagens.

Estima-se que cerca de 400 posts foram restaurados desde a migração do servidor. Todo dia o blog é verificado, e 10 posts do mesmo são “sorteados” para restauração pelo editor deste blog. Muito embora eu já tenha conseguido recuperar 15 posts ou mais num dia.

Como essa identificação é feita

A maioria absoluta dos posts do portal vieram com as imagens, porém elas não estão incorporadas nos posts pelo fato da tag “img src” apontar para o link do servidor de origem do arquivo de importação – que foi um “blog clone” criado no servidor do Blog Josivandro Avelar, e não para o arquivo de mídia que está na plataforma do portal. Essas imagens são identificadas ao clicar no botão direito do mouse, e selecionar a opção “Copiar link” – bem como na aba de “Texto” do editor de posts do WordPress.

A título de exemplo, as imagens aparecem desse modo, quebradas. Aqui fiz um print ilustrando como é que as imagens quebradas aparecem nos posts do Portal Ônibus Paraibanos, já que como o layout do Blog Josivandro Avelar é avançado, as imagens quebradas não aparecem na estrutura do layout.

imagem quebrada

Esta é a estrutura de uma imagem quebrada contendo um link válido:

<a style="margin-left: 1em; margin-right: 1em;" href="https://onibusparaibanosblog.files.wordpress.com/2015/05/80e28-gb2b4902b7.jpg"><img src="https://josivandroavelar.com.br/portalonibusparaibanos/wp-content/uploads/2015/05/Gb4907.jpg" alt="" width="640" height="426" border="0" /></a>

Onde o link destacado em verde indica a imagem válida, e o link destacado em vermelho, a imagem que aparece.

Substituindo a imagem ou o link destacado na cor vermelha, a imagem já aparece, conforme exemplo abaixo:

80e28 gb2b4902b7

Aqui substituí o link em vermelho pelo link verde. O link válido, ao ser clicado, aponta para a imagem, que de fato aparece. Em alguns casos, a imagem não foi importada junto, mas isso aconteceu com um grupo menor de posts. Quando isso acontece, o link rebate para a página 404 do Blog Josivandro Avelar, e rebate para as estatísticas do mesmo. É aí que identifico os posts com imagens não recuperadas.

Quando a imagem não foi importada junto com o post, o que aconteceu com um pequeno número de posts, ela irá direcionar para a página de erro 404 do Blog Josivandro Avelar. Esta é a estrutura da página:

<a style="margin-left: 1em; margin-right: 1em;" href="https://josivandroavelar.com.br/portalonibusparaibanos/wp-content/uploads/2014/12/Splendour2611-1024x744.jpg"><img src="https://josivandroavelar.com.br/portalonibusparaibanos/wp-content/uploads/2014/12/Splendour2611-1024x744.jpg" alt="" width="640" height="464" border="0" /></a>

Os links em vermelho são inválidos, daí porque rebate para a página 404 do Blog Josivandro Avelar.

Assim sendo:

  • https://josivandroavelar.com.br/portalonibusparaibanos/wp-content/uploads/ (inválido, foto não recuperada)
  • https://onibusparaibanosblog.files.wordpress.com/ (válido, foto no acervo)

Assim sendo, quando um post contém imagens com os links válidos, as imagens incorporadas terão seus links substituídos pelos links ativos, das imagens que estão na biblioteca de mídia. Do contrário, aí sim, as fotos são repostadas – ou pelas mesmas, ou substituídas.

Estrutura dos textos

No que diz respeito a textos quebrados, o problema é causado por uma tag que emenda parágrafos com imagens e parágrafos com parágrafos no código-fonte dos posts. Por conta disso, estão sendo retiradas as seguintes tags:

</div>
<div style="line-height: 150%; text-align: justify;">

E todas aquelas tags que se iniciam com a sigla <div>.

São essas tags que “emendam” os parágrafos entre si ou nas imagens. Elas são dispensáveis e devem ser limpas da estrutura do post. O WordPress utiliza estrutura <p>; muitos textos do Blog Josivandro Avelar já utilizavam as tags <p> porque eram escritos no Windows Live Writer, não diretamente no editor; o software da Microsoft gerava o código-fonte dos textos já baseado nessa estrutura.

Os textos estão quebrados justamente porque é assim que estavam na estrutura do Blogger; um texto oriundo de outro editor de imagens geralmente é “quebrado” pelo Blogger. Por essa razão assim vieram, mesmo aparentando estarem normais na antiga plataforma. Em algumas situações o texto já estruturado é colado para substituir o quebrado.

Os consertos realizados por mim são diretamente em código – algumas tags são retiradas e o texto é todo formatado novamente já no estilo do WordPress. Até aqui, não estão havendo maiores prejuízos, uma vez que há identificação de cliques em imagens do portal. Principalmente as que os leitores conseguem ver.

Ainda assim, o importante é recuperar o maior número possível de posts do Portal Ônibus Paraibanos. Em alguns meses todo o acervo estará íntegro aos leitores. Isso mostra a facilidade de lidar com o editor do WordPress, bem como treinar o próprio editor, no que estamos obtendo êxito.

Estamos treinando ainda mais para deixar os blogs cada vez mais redondos. Foi descobrindo como importar os posts do portal que descobri como instalar o WordPress no meu próprio computador, e assim poder instalar dois blogs de testes. Já adequei o Blog Josivandro Avelar e o All types & Fotoartes para o AMP – Accelerated Mobile Pages – que permite um carregamento mais rápido e leve para os cada vez mais crescentes acessos em celulares e tablets. E em breve os blogs serão adequados ao Instant Articles do Facebook.

Mais alguma dúvida sobre blogs? Pode perguntar para mim na página de contato ou pelo e-mail contato@josivandroavelar.com.br. Farei questão de tirar suas dúvidas.


Receba os posts do site em seu e-mail!

Toda vez que um post for publicado no site, você irá receber na hora.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Antes de deixar o seu comentário, leia a Política de Comentários do site.

Luneta Sonora

Um podcast sobre tudo e o nada ao mesmo tempo.
  1. Luneta Sonora 130: Mais uma semana trazendo novidades
  2. Luneta Sonora 129: Um episódio organizado no meio da desorganização
  3. Luneta Sonora 128: Só mais um episódio com recados da semana
  4. Luneta Sonora 127: Sério que eu esqueci dos três anos do podcast?
  5. Luneta Sonora 126: Se eu esqueci de alguma coisa, eu não me lembro
  6. Luneta Sonora 125: Como eu esqueci de oito desenhos?

Assine A Luneta

Receba os posts do site em uma newsletter enviada às segundas, quartas e sextas, às 8 da manhã.