DriveCeption: Creare un sito web con Google Drive – Parte 1

Di - 28 August 2013 - in
Post image for DriveCeption: Creare un sito web con Google Drive – Parte 1

Google Drive é molto più che un semplice file hosting e, non mi stancherò mai di dirlo, ci permette di effettuare l’hosting di interi siti web, di pubblicare documenti come pagine web, di accedere direttamente con la Google Drive SDK ai file in maniera programmatica, e moltissimo altro. Per il momento però concentriamoci su queste funzionalità. L’11 agosto mi è venuta un’idea:

Con tutte queste funzioni posso creare un sito per scrivere gli articoli direttamente dentro Google Drive, che si aggiorni automaticamente, che posso sviluppare direttamente dentro un browser… 100% in Google Drive!

I Tools per sviluppare il sito

Per utilizzare la funzionalità di Publish Website Content i file che compongono il sito, devono essere contenuti in una cartella pubblica di Google Drive. Conviene allora scrivere tutto il codice direttamente dentro Google Drive; ma come fare? La suite di Web Applications Editey ci viene incontro fornendoci degli editor per file HTML,CSS,Javascript e LESS con syntax highlight e formattazione del codice, direttamente integrati con i file di Google Drive. Possiamo benissimo scrivere il codice con il nostro editor/IDE preferito e caricare i file manualmente, ma perché non sfruttare al 100% le funzionalità quali il versioning del file che ci fornisce Google Drive? Per lo stile ho deciso di usare PureCss perché mi piacevano particolarmente i menù, e JQuery per la parte Javascript.

La struttura del sito

Prima di iniziare a guardare la struttura della pagina, il codice HTML, CSS e Javascript vediamo la struttura delle cartelle. I post/articoli saranno creati come Google Docs all’interno delle cartelle blogPost_EN o IT in base alla lingua in cui sono scritti; i file verranno automaticamente aggiunti alla lista degli articoli per lingua nel momento in cui rendo il file “Pubblicato” dal menu File.

Nella cartella css é contenuto il file main.css che é il file di stile personalizzato del sito, ed una sottocartella contiene il file di stile minimizzato di pureCss e tutte le risorse associate.

Dentro Scripts sono presenti 2 file javascript (base.js e driveHelper.js) per la gestione delle funzionalità base del sito e quelle di accesso a Google Drive. Infine la pagina vera e propria, index.html, che analizzeremo in dettaglio a breve.

Il file googlexxxxxx é quello utilizzato per associare il sito ai Google WebMaster Tools, che non é necessario al funzionamento del sito.

Il file About invece é il doc che contiene la pagina di benvenuto e About del sito.

Nella cartella tests.. lo scoprirete in futuro :-)

La struttura della pagina

Il sito è di per se una sola pagina, tutto il resto del lavoro lo faremo fare in maniera dinamica a Javascript. Volevo mantenere una struttura che renda semplice la fruizione dei contenuti; quindi ho optato per un semplice menu alla sinistra e il contenuto nei 2/3 sulla destra

Andiamo a vedere in dettaglio il codice della pagina:

<head>
    <title>DriveCeption</title>
    <!--Site copy of pure.css - http://purecss.io/
        because it's hosted on http CDN and can't be
        loaded by-->
    <link rel="stylesheet" href="css/pure/0.2.1/pure-min.css">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <!-- Async Script load and basic scripting-->
    <script type="text/javascript" src="scripts/base.js">
    </script>
</head>
<body>
    <div class="pure-g-r" id="layout">
        <div class="pure-u" id="menu">
            <div class="pure-menu pure-menu-open">
                <a class="pure-menu-heading">DriveCeption - v0.1</a>
                <ul>
                    <li>
                        <a href="#" id='blogHead'>Blog Posts</a>
                    </li>
                    <div id='blogPostList' style="display: none;overflow-y:auto">
                        <li class="pure-menu-separator"></li>
                        <div id='blogPostItems'>
                        </div>
                        <li class="pure-menu-separator"></li>
                    </div>
                    ....
                </ul>
            </div>
        </div>
        <div class="pure-u-1" id="main">
            <div class="header">
                ...
            </div>
            <div class="content">
            ...
            </div>
            <div class="footer pure-g-r">
                ...
            </div>
        </div>
    </div>
</body>

La struttura è abbastanza semplice: Nel tag <head> carichiamo i CSS di pureccs e quello custom del nostro sito (per modificare poche cose che vedremo in seguito), JQuery che verrà utilizzato pesantemente, ed il file base.js che caricherà in maniera asincrona gli altri script in modo che la pagina venga renderizzata il più velocemente possibile. All’interno del <body>abbiamo il div con class “pure-g-r” per caricare lo stile pure, e al suo interno 2 div che rappresentano rispettivamente il menú (div “pure-menu”) e il contenuto vero e proprio (div “pure-u-1″ id=”main”). Il div utilizzato per visualizzare il contenuto é a sua volta diviso in 3 sottoparti:

  • header: per mostrare il titolo dell’articolo
  • content: dove inseriremo in maniera dinamica l’articolo da Google Docs
  • footer: disclamer e riconoscimenti sempre visibili

CSS – PureCSS e customizzazione

Non sono un designer quindi ho cercato qualche stile CSS che mi piacesse, fosse responsive per una visualizzazione corretta su device mobili e cosa, più importante di tutte, fosse semplice da implementare, perché proprio non ce la faccio a perdere la testa con il design :-P
Quindi ho optato per pureCss i cui menù mi piacciono molto ed è molto semplice da utilizzare.
Basta infatti:

  1. Importare il css base <link rel=”stylesheet” href=”css/pure/0.2.1/pure-min.css”> che ho dovuto copiare in una sotto cartella del sito perché la CDN (Content Distribution Network) utilizzata è HTTP e da Google Drive i contenuti referenziabili devono essere serviti in https
  2. In un tag padre aggiungere la classe “pure-g” (non responsive) o “pure-g-r” (responsive); io preferisco sempre farlo su un div e non direttamente sul body, ma questa é una mia preferenza personale
  3. Utilizzare le classi “pure-u-*” per creare la struttura 1/3 – 2/3 tra menu e contenuto o quella 1/2 – 1/2 dei footer
  4. Customizzare quanto preferiamo dei singoli elementi estendendoli (dimensione menù, caratteri, dimensioni)
Come menzionato prima non mi piace per niente la parte di design, quindi anche la parte di customizzazione l’ho copiata dal CSS utilizzato dal sito purecss.io rimuovendo tutte le parti non necessarie per il sito e apportando qualche modifica alla larghezza del menù.

Redazione articoli

Prima di analizzare il codice Javascript che permette il funzionamento del sito, vediamo come effettuare la redazione/stesura degli articoli e la loro pubblicazione. Come accennato brevemente durante l’analisi della struttura delle cartelle del sito, dobbiamo effettuare 2 semplici operazioni:

  1. Creare un documento di Google Docs, scrivendo e formattandone il contenuto a nostro piacimento (ad esempio il documento del primo articolo)
  2. Quando decidiamo di pubblicarlo, possiamo seguire le istruzioni dell’articolo Embed di Documenti Google Drive in pagine web
In questo semplice modo, possiamo ottenere un modo di lavorare che ci permetta di:
  1. scrivere dei documenti riutilizzabili (documenti per presentazioni, guide utilizzabili/condivisibili/stampabili cosí come sono, etc…), con la possibilità di utilizzare tutte le funzionalità di collaborazione, commenti, etc… forniteci da Google Docs
  2. controllare quando un documento è pronto per la pubblicazione e quando é ancora in Draft o da sistemare/correggere (es. Rimuoviamo il flag di pubblicazione e il post “non esiste” più ma possiamo lavorarci in Google Docs senza problemi)
Nella prossima parte, ci concentreremo sul codice javascript che permette a tutta l’applicazione di funzionare.

Leave a Reply

Articolo scritto da

Techy, sviluppatore .Net per professione, sviluppatore Android per passione. All Around Android Lover e Google Enthusiast

Contatta l'autore

Previous post:

Next post: