Google Drive: creare e mettere online il vostro primo sito web [Guida]

Nel corso delle settimane precedenti, abbiamo imparato a sfruttare le potenzialità offerte dal Cloud di Google per salvare in automatico i file multimediali inviati in allegato alle e-mail nella nostra casella di posta Gmail, e anche come inviare messaggi di testo che si autodistruggono sempre mediante un servizio di Google, in quel caso Fogli, sfruttante però Google Drive.

Leggi anche | Send to Google Drive: lo script per salvare gli allegati Gmail su Drive automaticamente

Effettivamente è come avere una piccola chiavetta USB, piccola poiché in assenza di ulteriori sottoscrizioni avrete a disposizione solo 15 GB, sempre connessa alla rete, con tutti i vantaggi che ne derivano. Condividere foto e video con amici e parenti, o documenti con colleghi di lavoro, rappresentano solo alcune azioni che Google Drive rende assai facile eseguire.

Download diretto | Sito web realizzato dallo staff di Enjoyhone

Prima parte | Creazione file

La procedura è stata eseguita correttamente su un computer Windows 8.1, ma è replicabile interamente su un sistema Linux, o Apple, adattando opportunamente i programmi al sistema operativo designato.

Step 1 | Download & installazione suite programmi

Per poter realizzare il sito, sarà necessario creare quello che potremmo definire il suo core ovvero la sua parte più interna senza la quale non potrebbe funzionare. Si tratta di un file, ovviamente html, denominato “index”. La sua scrittura richiede un editor di testo più o meno avanzato, in effetti se in passato avete maneggiato questo linguaggio di programmazione, basterà l’editor integrato in windows in alternativa, se siete neofiti, potrete scaricare il programma Notepad++ con funzioni avanzate, in grado di riconoscere automaticamente le stringhe che andremo a digitare; la variante per ambienti Linux è chiamata Leafpad, solitamente già presente nel sistema, benché sono sicuro che i veri linuxiani lo conoscano approfonditamente.

Download diretto | Notepad++ per Windows
Download diretto | Leafpad per Linux

Step 2 | Creazione file index.html

Prepariamoci a programmare, perché tra qualche secondo realizzeremo il nostro primo (forse) sito web. Dovremo innanzitutto avviare il programma Notepad++: si aprirà quindi un file vuoto, che dovrà essere salvato con nome, all’interno di una cartella, il cui percorso è ininfluente. Inserite “index.html” nella barra per la scelta del nome file, quindi salvatelo.

Step 3 | Compilazione file index.html

Ora sarà necessario spolverare il buon vecchio linguaggio HTML, per chi lo avesse imparato a scuola. In alternativa se, come anticipato, siete neofiti ed è la prima volta che programmate, limitatevi per il momento a copiare passo a passo le nostre stringhe di codice, in seguito, sfruttando anche le numerose guide reperibili su internet, capirete come sia assai facile realizzare un sito con molte pagine e parecchie immagini.

Al termine della stesura, dovreste avere una situazione simile a questa:

<html>
<head>
<title>FirstWebSite</title>
</head>
<body>
<h1> Il vostro titolo </h1>
<p> Testo <B>Parola in grassetto</B></p>
<p> Testo <a href=”link”> parola cui il link è collegato</a> Testo</p>
<p ALIGN=”center”> Web Site developed by <h4 ALIGN=”center”>Il vostro nome</h4> </p>
</body>
</html>

Come potete vedere il codice è molto corto, ma dovete modificarlo voi!

sitoweb_simple.2JPG

Sub-Step 3 | Analisi codice HTML

L’intero codice deve essere compreso tra le parole “<html>” e “</html>”, mentre tra “<head>” ed “</head>” dovrà essere inserito il testo che volete sia visualizzato sulla barra del browser. Per inserire una parola in grassetto, questa deve essere compresa tra “<B>” e “</B”>, mentre è possibile selezionare la grandezza attraverso “<hx>” e “</hx>”, sostituendo x con un numero compreso tra 1 e 5. Infine “<p>” e “</p>” racchiudono una parte del testo da visualizzare sul sito; ogni stringa rappresenta una riga, compresa tra “<body>” e “</body>” ovvero il corpo della pagina.

Step 4 | Salvataggio e visualizzazione

Non ci resta che salvare nuovamente il file, per apportare le modifiche, quindi aprirlo attraverso un qualsiasi browser. Se tutto andrà a buon fine, visualizzerete una schermata simile a questa:

sitoweb_simple3

Seconda parte | Caricamento file su Google Drive

Il sito è oramai pressoché finito, l’ultima cosa da fare è infatti renderlo reperibile a chiunque sia in possesso del link. Affinché il sito possa svolgere pienamente la sua funzione, è necessario che tutte le sue pagine e anche le immagini in esse contenute, salvo quelle inserite tramite link quindi sempre reperibili attraverso internet, siano presenti nella cartella prima realizzata.

Se avete scaricato il file zip creato dal nostro staff, e lo avete scompattato, vi sarete resi conto che in esso è presente anche un’immagine, assente invece nell’esempio della prima parte. Si tratta di una scelta eseguita per aumentare al massimo la semplicità di realizzazione, ma qualora vogliate inserire contenuti multimediali, ricordatevi di collocarli all’interno della medesima cartella.

Step 1 | Compattamento cartella

Recatevi al percorso di salvataggio, quindi con un programma a vostra scelta, create un archivio zip della cartella in cui è presente il file HTML.

Step 2 | Caricamento su Google Drive

Tra pochi minuti il nostro sito sarà online! Lo sviluppatore Amit Agarwal ha infatti realizzato un semplice quanto efficace script che trasforma automaticamente il file zip in un sito, caricandolo sulla nostra cartella Google Drive. Recatevi al seguente indirizzo (script google drive), e autorizzatelo ad accedere al vostro account.

Attenzione: ho caricato il link molte volte, in tutti i test però Chrome sembra non visualizzare lo script, pertanto è stato necessario aprire Internet Explorer, ma credo possa funzionare anche con Firefox

sitoweb_err_chrome

Il link caricherà lo script che permetterà a sua volta il salvataggio, e l’auto-modifica, del file zip. Cliccate su “sfoglia” selezionate il file, quindi su “apri” ed infine su “upload file”. Dopo pochi secondi, comparirà un messaggio che vi segnalerà il corretto salvataggio del file.

Step 3 | Creazione link di accesso

Ora arriva la parte più noiosa, benché non complessa. Dovremo generare il link per l’accesso universale al nostro sito. Accedete a Google Drive, ed entrate nella cartella prodotta dallo script e nominata “My Website”. Quindi accedete a “sitoweb_simple” (nome variabile a seconda di quello scelto da voi al momento del salvataggio della cartella, quella fatta dallo staff avrà nome “sitoweb”), e cliccate con il tasto destro del mouse sul file “index.html”; infine su“Condividi…”.

condivisione_sitoweb