domingo, 15 de maio de 2016

Hospedando CSS e Javascript do Blogger no Google Drive

Olá pessoal, quem se lembra de mim? Sim, estou de volta ao blog, depois de quase 2 anos afastado por motivos pessoais. Uma hora dessas eu explico para vocês. Nesse tempo, agradeço imensamente o meu amigo John, que vem cuidando do blog com todo o cuidado que vocês sempre mereceram. Ele vai continuar postando também, pois ele é tão importante para o sucesso desse blog quanto eu, juntamente com vocês. Agora, chega de demoras pois vamos para o post de hoje!

Hospedando CSS e Javascript do Blogger no Google Drive

Armazenar arquivos CSS e Javascript em nossos blogs do Blogger sempre foi motivo de preocupação, pelo fato de não termos um CDN que possa nos atender à contento. Por causa disso, muitas pessoas preferem adicionar as folhas de estilo usadas pelos seus sites inteiramente inline, pelo fato dessa limitação do Blogger em si.

No entanto, com o advento do Google Drive, tornou-se possível adicionarmos arquivos de qualquer tipo, e compartilhá-los para todos na internet. Ante a esse fato, nós vamos mostrar como adicionar estes arquivos CSS e Javascript no Drive, para usarmos nos nossos blogs, ok?

Por que armazenar no Google Drive?

Você deve estar se perguntando "Mas por que armazenar no Google Drive? Vai funcionar?" e eu respondo abaixo o porquê.

Espaço de sobra: Como o Google Drive lhe provê 5Gb de espaço fica extremamente fácil enviar muitos documentos (inclusive seus próprios layouts e arquivos relacionados).

Facilidade de atualização: Se você, por exemplo, compilou aquela biblioteca CSS que você usa, e quer atualizar seu site, é bem mais fácil ir ali no Drive e mandar atualizar o mesmo, sem precisar editar seu layout.

Segurança: Estamos falando de Google. No caso do Drive, mesmo na versão gratuita nós temos banda ilimitada para nossos arquivos. E adicionalmente, ainda podemos ter a segurança de poder carregar nossos arquivos usando HTTPS.

Preço: Nem preciso falar, é free (até 5Gb).

Quais as vantagens de hostear nossos arquivos CSS/Javascript no Drive?

Como vocês já sabem, o Blogger não nos provê a opção de armazenar CSS e Javascript em um CDN. Infelizmente, para que possamos usar, hoje, CSS ou Javascript no nosso blog, precisamos ou adicioná-los inline dentro do código (fazendo com que o carregamento das páginas fique mais lento) ou nos casos de bibliotecas já conhecidas, usar de algum CDN popular, sem permitir que possamos alterar os mesmos.

Armazenando CSS e Javascript no Drive

Primeiramente, para hostear seus CSS ou JS no Google Drive, vamos copiar o CSS que está dentro do seu template, dentro das tags <b:skin> e </b:skin>, conforme a foto abaixo...



Depois de copiar o CSS, salve o mesmo com algum nome descritivo, por exemplo, estilo.css.

O próximo passo é fazer o upload do arquivo que acabamos de criar para sua conta do Google Drive. Em nosso caso, para separar os arquivos do layout do blog de outros arquivos, vamos criar uma pasta chamada layout.

Agora, você vai enviar seu arquivo para dentro dessa pasta. Depois de enviado, você vai clicar com o botão direito no arquivo e escolher Ativar Compartilhamento de Link, depois Configurações de Compartilhamento, depois Avançado e por último a opção Alterar, conforme as imagens abaixo...






Na última tela, você irá selecionar a opção Público e depois Salvar. Depois disso, você vai pegar o link de compartilhamento e copiar a sua ID. Depois de copiado o link de compartilhamento, você vai mudar seu link de compartilhamento, conforme as próximas imagens...



No caso, nosso link mudou de https://drive.google.com/open?id=0B3LdhAvlixePb0lFM2otOXJEOW8 para https://googledrive.com/host/0B3LdhAvlixePb0lFM2otOXJEOW8 e agora é só usar esse link em nosso layout...


Depois disso, é só fazer o mesmo com outros scripts que voccê porventura tenha em seu layout, dessa forma diminuindo o tamanho do mesmo e ajudando seu blog a melhorar no ranking do Google, pois esta é uma das coisas que eles levam em consideração ao avaliar um blog ou uma página hospedada no Blogger.

Uma dica: Caso seu blog funcione tanto em http quanto em https, você pode remover o prefixo do link e deixar ele começando com //, conforme a imagem acima, daí o próprio navegador vai escolher a melhor versão que se encaixa com seu blog.

Espero que tenham gostado desse post. Nos próximos posts, estarei falando de layouts do blogger, como você fazer o seu de maneira bem profissional (e apesar do que possam lhe dizer, não é a ferramenta e sim a habilidade da pessoa que define se um site é profissional ou não). Aguardem os próximos posts!

E é isso! Estou de volta para postar para vocês coisas interessantes como sempre fiz. Agora daqui de Curitiba!