Pubblicato il 07/02/13e aggiornato il

Caricare file .js, .css e .html su Google Drive e averne il link diretto.

Come usare Google Drive come hosting gratuito per file javascript, CSS e HTML per usarne il link diretto anche in domini personalizzati.
Nell'articolo precedente dedicato agli Articoli Simili con Miniature ho accennato alla possibilità di caricare file javascript, CSS o XML direttamente su Google Drive invece che nella solita cartella Public di DropBox. Siamo stati informati di questa possibilità direttamente dalla Pagina Ufficiale di Google Drive su Google Plus. Il documento Host Webpages in Google Drive dice più o meno che Google Drive è un ottimo luogo in cui memorizzare file html, css e javascript con la possibilità di condividerli.

Il mio iniziale scetticismo è stato fugato da un test che ha dato ottimi risultati. Ho infatti caricato su Google Drive un file javascript che poi ho usato per il classico effetto della neve che cade e il file .js caricato con il metodo che vi illustrerò ha funzionato regolarmente anche in un sito con un dominio personalizzato. Per prima cosa bisogna avere nel computer il file che può essere .js, .css o .html. Se fosse sul web si può aprire la sua pagina, cliccare sul destro del mouse e andare su Salva con nome.

Se il file fosse in formato .html si lascerebbe così com'è mentre i file .js e .css vanno rinominati in modo da avere una estensione .html. Facendo un esempio pratico che è sempre la cosa migliore se abbiamo il file cristallidineve.js, questo va rinominato in cristallidineve.js.html 

file-js-rinominati

Per cambiare nome a un file ci si clicca sopra con il destro del mouse e si sceglie Rinomina. Il computer ci avvertirà che modificando l'estensione il file potrebbe diventare inutilizzabile. Dopo questa operazione che va fatta anche per eventuali file CSS si accede a Google Drive. Nella colonna di sinistra si va su Crea > Cartella, si inserisce il nome (p.e. Public) e si clicca nuovamente su Crea 

creare-cartella condivisa

Si clicca sopra la freccia verticale a lato del nome  e si va su Condividi > Condividi

creazione-cartella-condivisa

Le cartelle di default sono Private quindi per renderle Pubbliche bisogna andare su Cambia quindi mettere la spunta su Pubblica sul web, quindi cliccare su Salva

cartelle-condivise-google-drive

Le cartelle condivise con tutti avranno una icona leggermente diversa che potrà anche essere personalizzata nel colore. Si clicca sulla cartella appena creata e si va sulla icona dell'Upload


caricare-file-google-drive

Si seleziona il file javascript appena rinominato che verrà caricato nella cartella condivisa che nel mio caso ho chiamato Public. Oltre che i file si possono caricare anche intere cartelle. Si va su Carica e Condividi e prima dell'upload ci verrà chiesto se vogliamo modificare le impostazioni di caricamento

impostazioni-caricamento

Vanno tolte le flag dalle opzioni che convertono i file nel formato nativo di Google Documenti mentre è opportuno lasciare la spunta a Conferma impostazioni per avere sempre il pieno controllo nei successivi upload. Si va su Avvia caricamento e si attende il temine del processo

caricamento-file-google-drive

Si clicca sulla crocetta per chiudere la finestra di Caricamento completato e si va con il cursore sul file condiviso per aprirlo su Google Drive. Verrà visualizzato in un'altra finestra del browser

condividere-file-su-google-drive

Si tratta sempre di un file HTML perché questa estensione è stata aggiunta a quella originale. Si clicca quindi su Anteprima per ottenerne il link diretto

link-diretto-google-drive

L'URL del link diretto o hotlink al nostro file sarà visualizzato nella nuova scheda del browser, terminerà comunque con .html e avrà /host/ nel suo URL. Nel mio test è venuto fuori questo URL

https://googledrive.com/host/0B8Kl05rP7bK8ZlBId18yWThoWVU/cristallineve.js.html

Tale hotlink va incollato al posto dell'URL del javascript per esempio in questo modo

<script src="https://googledrive.com/host/0B8Kl05rP7bK8ZlBId18yWThoWVU/cristallineve.js.html" type="text/javascript"/></script>

Come detto all'inizio del post ho provato a installare un widget con hotlink del javascript caricato su Google Drive e ha funzionato anche su domini personalizzati. Un procedimento analogo può essere fatto con i file .css che dovranno essere rinominati in .html. Per esempio menu_orizzontale.css dovrà essere modificato in menu_orizzontale.css.html

OSSERVAZIONI CONCLUSIVE

  1. Google Drive come hosting potrà servire per i file di linguaggi di programmazione come quelli indicati e altri come .xml ma non potrà servire per file MP3, SWF o di altro genere
  2. Non si sa nulla riguardo alle possibili limitazioni di banda. Questa sarà illimitata o ci sarà un numero massimo di MB di download?
  3. Si può anche eliminare l'estensione originale nel senso che si può rinominare cristallidineve.js in cristallidineve.html facendo la stessa procedura. L'hotlink sarà ugualmente funzionante.
  4. Se abbiamo la cartella Public di Dropbox che sta proprio sui limiti di banda questa possibilità offerta da Google Drive risolve molti problemi. Ringrazio ancora Camilla per questa informazione.




10 commenti :

  1. Ernesto,
    tu che li hai testati entrambi: pensi che possa essere una valida alternativa a Dropbox? Che ogni tanto perde qualche colpo... ;)

    RispondiElimina
    Risposte
    1. @ Quando l'ho provato, ha funzionato. I servizi Google sono sempre molto affidabili. C'è stato un post su Google Plus che lo ha presentato ma sarebbe meglio conoscere se ci sono delle limitazioni e se sì quali.

      Elimina
    2. Rinominando il file javascript (quello degli Articoli simili) inserendo il .html mi cambia solamente il nome ma l'estensione non cambia, infatti neanche mi dà l'avviso che cambia l'estensione. Ho provato a caricarlo così ma poi me lo conta come .js e quindi poi non funziona. Si può cambiare solo così l'estensione?

      Elimina
    3. Ho risolto. Se anche voi avete il mio stesso problema dell'estensione risolvetelo seguendo questa guida: http://windows.microsoft.com/it-IT/windows-vista/Show-or-hide-file-name-extensions

      Elimina
  2. Salve Ernesto...
    Prima io ospitavo il js del mio sito su google code, come fai tu se non erro. Ora sto provando google drive come indicato in questo articolo. Secondo te qual'è meglio? Hai già fatto qualche test di velocità o altri tipi di comparazione?

    Altra cosa: secondo te il fatto di utilizzare come estensione js.html potrebbe creare qualche problema di visualizzazione su alcuni tipi di browser oppure è del tutto ininfluente?

    Grazie mille in anticipo e complimenti per l'ottimo lavoro

    RispondiElimina
  3. Grazie a firebug ho notato ad esempio che il javascript su google code ha un tempo di aggiornamento di 1 minuto, mentre quello su drive 20 secondi (che è un po' peggio)

    RispondiElimina
    Risposte
    1. @ Emanuele
      Non ho fatto test. Quello che hai fatto tu è interessate. Bisogna considerare che Drive è vuoto di file caricati con il link diretto mentre Code è pieno quindi la differenza di prestazioni va valutata tra qualche tempo. Potrebbero anche esserci delle migliorie su Drive. Le possibili differenze di visualizazione con i vari browser dipendono da molti fattori ma si può sempre fare un velocissimo test. Vedremo.

      Elimina
  4. AGGIORNAMENTO: ho dovuto rimettere il javascript su google code perchè caricandolo su drive a volte non risultava disponibile e dunque la visualizzazione della pagina rimaneva interrotta. Credo che per ora, quanto ad affidabilità, rimanga meglio l'opzione google code!

    RispondiElimina
  5. Ciao Ernesto, in questo post hai scritto che Google Drive, come hosting, non va ben per i file SWF.
    Questo è un post di febbraio, adesso siamo in luglio, se nel frattempo hai fatto un post dedicato che mi è sfuggito me ne scuso per averlo letto.
    Volevo segnalarti che il servizio di hosting di Google drive FUNZIONA ANCHE CON I FILE SWF. Prima li caricavo tutti su Dropbox, ora, invece, sono tutti caricati su una cartella pubblica di Google drive.
    Nel mio Blog (www.ciclocolor.com), con un dominio proprietario, i file flash (SWF) sono tutti caricati su Google drive.
    Grazie!
    Ciao

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.