» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Como Hospedar Javascript no seu Googlecode

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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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
googlecode02

Irá aparecer esta tela▼
googlecode03

» 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:

downloadLogoNotepad

» 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.
googlecode01

Clique em Create a new project
googlecode04

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


3º Passo – Fazer Upload do Arquivo JavaScript
Após clicar em Create project → Irá aparecer esta tela▼

» Clique em Downloads
googlecode05

▼ Aqui clique em New download
googlecode06

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

googlecode07

» 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.
googlecode08

» 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)

googlecode09

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▼
googlecode10
▲Selecione o javascript antes de ser hospedado no Google code.

Substitua pela linha:

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


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
Como Hospedar Javascript no seu Googlecode Como Hospedar Javascript no seu Googlecode Reviewed by Aurea R C on 2/16/2013 Rating: 5

15 comentários:

  1. O nome do programa é Notepad ++ (Notepad Plus Plus). Apenas Notepad é o bloco de notas padrão do Windows. ;)

    ResponderExcluir
  2. @Helen FernandaOlá Helen,

    Tem razão! Obrigada pela ajuda.
    Artigo corrigido!
    Valeu! :D

    ResponderExcluir
  3. Eu posso usar esse mesmo esquema com o código css?

    Me retorne por favor.


    www.planetadablogueira.com

    ResponderExcluir
  4. @Vanda AlvarengaOlá Vanda,

    Realmente não sei se dá para usar com o CSS. Mas seu raciocínio procede. Entendi o que deseja.
    Precisaríamos de testes para fazê-lo.
    Infelizmente não estou conseguindo fazer isso agora por total falta de tempo.
    Assim que tiver uma posição te aviso.

    ResponderExcluir
    Respostas
    1. olá no meu eu não achei a opção e "download" para poer fazer o upload do arquivo javascript. Me retorne o mais rápido possível.
      Obrigado!

      Excluir
    2. Boa Noite Thomas,
      A resposta para sua dúvida está no final deste artigo!

      Excluir
    3. Obrigado Aurea, vim aqui para falar que descobri um novo jeito pra fazer os uploads dos arquivos tanto .js quando para .css é fácil.

      1° Crie um site no Google Sites(https://sites.google.com), o site já criado, abre o site(como qualquer outro) clique em "Mais" e em "Administrar site".
      2° No canto Esquerdo vai estar algumas opções entre elas "Anexos" clique nele.
      3° Ao você clicar no "Anexos" vai aparecer em cima a opção "Fazer Upload" clique lá escolha o arquivo e faça o upload(lógico).
      4° Quando o download já estiver pronto vai aparecer a opção "Download" ao lado do nome do arquivo.
      5° Clique com o botão direito do mouse e depois em "copiar endereço e link".
      6° Link copiado, você cole ele em qualquer lugar e retire a parte "?attredirects" em diante.
      7° Depois recopie o link editado e cole no lugar desejado. Pronto salve o HTML e atualize a página em questão.

      Caso queira substitui o arquivo sem precisar refazer o upload e exclui o antigo:
      1° Ainda na página "Anexos" selecione o arquivo desejado clicando na caixinha abaixo do "Nome" e clique em substitui.
      2° Clique na opção "Escolher arquivo" selecione o arquivo atualizado e clique em "Substituir" novamente.
      3° Atualize a página novamente e pronto, tudo atualizado.

      Lembrando que o Google Sites tem 100MB disponível e não é necessário fazer o processo de edição do link contanto que for o mesmo nome do arquivo.

      Espero ter ajudado. ;)

      Ótimo tutorial afinal, pena que tenham tirado a opção de upload/download do Google Code.

      Excluir
  5. Muito bom o tutorial!! Migrei boa partes dos scripts para o google code e os resultados foram considerados. muito obrigado pela iniciativa de compartilhar deste conhecimento.

    ResponderExcluir
  6. @fichariodematematica.comOlá Rafael,
    Fico muito feliz que tenha aprendido e gostado deste tutorial.
    Seja sempre bem vindo!
    Um abraço,
    Áurea

    ResponderExcluir
  7. Oi Aurea, eu não consegui passar do 3º passo: depois que criei o novo projeto, fui ver que não aparece a guia "Download" pra mim, atualizei a página, tentei várias coisas e realmente não aparece, porque será? Se puder ajudar, novamente eu agradeço!

    ResponderExcluir
    Respostas
    1. Claudia,
      Realmente não sei o que pode ser.
      Tentei criar um projeto novo e também não apareceu a opção downloads.
      Vou procurar outra alternativa e posto aqui assim que encontrar.
      Obrigada por avisar.

      Excluir
  8. aqui também não apareceu a opção downloads

    ResponderExcluir
  9. Não vejo mais o link DOWNLOAD na página de configurações e agora? como subir o arquivo java?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.