# SOBRE CÓDIGOS-FONTE E IMAGENS QUEBRADAS

- Link: https://josivandroavelar.com.br/sobre-codigos-fonte-e-imagens-quebradas/
- Published: 2016-03-17T23:12:47-03:00
- Author: Josivandro Avelar

##### 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...](https://i0.wp.com/josivandroavelar.
com.br/wp-content/uploads/2016/03/Portal-%C3%94nibus-Paraibanos-Blogger-mar%C3%A7o-
de-2016.jpg?resize=840%2C477&ssl=1)

O Portal Ônibus Paraibanos como ele era no Blogger…

![Portal Ônibus Paraibanos- março de 2016](https://i0.wp.com/josivandroavelar.com.
br/wp-content/uploads/2016/03/Portal-%C3%94nibus-Paraibanos-mar%C3%A7o-de-2016-1.
jpg?resize=840%2C457&ssl=1)

…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](https://i0.wp.com/josivandroavelar.com.br/wp-content/uploads/
2016/03/imagem-quebrada.jpg?resize=661%2C662&ssl=1)

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:

[[

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](https://josivandroavelar.com.br/contato/)
ou pelo e-mail [contato@josivandroavelar.com.br](https://josivandroavelar.com.br/sobre-codigos-fonte-e-imagens-quebradas/contato@josivandroavelar.com.br).
Farei questão de tirar suas dúvidas.

### _Relacionado_
