Como Hospedar Javascript no seu Googlecode

CLASSIFICAÇÃO DO TUTORIAL
 AVANÇADO

Existem muitas formas de hospedar os seus arquivos javascript e uma delas é utilizando o Google code.

Vou ensinar aqui como fazer para hospedar e utilizar os arquivos javascript no Google code. Pode parecer meio complicado, mas uma vez feito, fica bem legal e facilita bem o trabalho de usar javascript no blogger.

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

1º Passo – Salvar o Javascript

Salve o arquivo javascript no seu computador para fazer o upload posteriormente.

Você pode fazer isso de várias maneiras.

A maneira mais comum é usando o bloco de notas:

1- Copie o arquivo javascript que deseja hospedar
Este javascript que estou usando como exemplo é do próximo tutorial que vou publicar sobre Como criar Gadgets de Marcadores com Thumbnails.

function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7i2rRvrQLM_vdJp-S-FTbBF7dTWacjILuMaM9khyJMmnsLa1ou2TvWSl-SpwjSoepQ9JXAE_KYS-jzhEAjfX4t4llUZu8aFex1xQPu4p7SRU_uGCU7FOxEs-hcjNcXX7nenx6mcdZtphZ/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More ?</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}

Obs: Se você encontrar um arquivo javascript que esteja entre as tags:

<script type='text/javascript'> 
//<![CDATA[ 
CÓDIGO JAVASCRIPT
//]]> 
</script>

Copie apenas o javascript que estiver entre as tags e cole no bloco de notas

2- Cole em um bloco de notas.

Clique em Arquivo » Salvar como


Irá aparecer esta tela▼


» Configure o Nome do código javascript com a extensão .js

» Selecione o Tipo como Todos os arquivos

» A Codificação deve permanecer como ANSI

Clique em Salvar. Salve em uma pasta do seu computador.

Outra maneira é usando o programa [Notepad ++]

Você pode também usar o programa Notepad ++ e já salvar o arquivo no formato .js automaticamente sem ter que ficar fazendo o que descrevi  para o Bloco de notas.

Para baixar o Notepad ++ clique nesta imagem:



» Instale-o.
» Abra o programa.
» Selecione Novo para abrir um novo arquivo.
» Copie e cole o código javascript.

Clique em Arquivo » Salvar como » Coloque o nome do arquivo apenas(sem extensão .js) » Selecione o Tipo: JavaScript file (*.js) » Clique em Salvar.

Pronto! Seu código javascript já está salvo como [.js]!

2º Passo – Criar o Projeto

Entre no Google code com o seu login.


Clique em Create a new project


Preencha esta tela como está na imagem acima

» Em Project name: Coloque o nome do seu projeto.
Coloquei tpvjava em relação ao Templates para VOCÊ. Crie o seu.

» Use os mesmos da imagem para Project summary e Description

» Version control system marque Mercurial

» Source code license selecione: GNU GPL v3

» Project label(s) selecione as labels referentes ao seu projeto.

Sugestão estas que estão na imagem, mas pode acrescentar mais se quiser.

Clique em Create project.

Observação Importante:

Após criar o projeto e precisar fazer mais uploads de arquivos javascript você abre o Google code e vai em Meus favoritos » Escolha o projeto salvo e proceda da forma que é explicado nos próximos passos.

3º Passo – Fazer Upload do Arquivo JavaScript

Após clicar em Create project → Irá aparecer esta tela▼

» Clique em Downloads


▼ Aqui clique em New download


Nesta etapa você vai fazer o upload do arquivo javascript que salvou anteriormente.



» Em Summary →coloque o nome do seu arquivo javascript

» Em File → Selecione o arquivo java onde você o salvou em seu computador » Clique em abrir

» Clique em Submit file

4º Passo – Como usar o JavaScript

» Clique no link do nome do arquivo.


» Clique com o botão direito em cima do link do arquivo » Selecione Copiar link (no Firefox) ou Copiar endereço do link (no Chrome)

5º Passo -

Agora como você vai usar este link em seu blog:

Se no html do seu blog você estiver usando o arquivo JavaScript inteiro, ou seja, hospedado no código do próprio blogger. Para entender leia este artigo→ Como Hospedar Javascript no HTML do Seu Blogger.

Você pode substituí-lo pelo arquivo hospedado no seu Google code:

Veja as imagens abaixo▼

▲Selecione o javascript antes de ser hospedado no Google code.

Substitua pela linha:

<script src='URL do arquivo javascript' type='text/javascript'/>

Espero que vocês tenham gostado!


Esta dica é muito boa para diminuir o tempo de carregamento do seu blog/site. Porque o arquivo javascript hospedado no SEU Google code será menos usado e quanto menos pessoas usarem mais rápido sua página irá carregar.

OBSERVAÇÃO IMPORTANTE

Se você criou uma conta nova no Googlecode, muito provavelmente não irá aparecer a opção "Download" para hospedar o seu Javascript. Ainda não descobri como contornar isso.
Mas....
Você tem outra opção: Hospedar o código Javascript no Google Drive
Clique neste link e aprenda como fazer!

NÃO é Permitido redistribuir os tutoriais/hacks ou os templates do TPV sem a prévia autorização de sua Autora.     A Citação da Fonte é Obrigatória.

Fonte:
♦ Tradução e adaptação do artigo: Mengatasi Loading Blog dengan Google Code