Javascript, HTML, CSS e... !
0 commenti

Le tue app con il design dei prodotti Google

Material Design nelle Applicazioni di Google Apps Script

Google ha messo a disposizione degli sviluppatori di siti ed applicazioni una libreria di componenti web quali bottoni, campi di input, font ma anche template per blog, dashboard, ecc... che permettono di dare alle proprie creazioni un tocco di stile basato sulla grafica dei prodotti Google.

La libreria in questione prende il nome di Material Design Lite (MDL) ed è possibile usufruirne nei progetti Google Apps Script con la semplice inclusione di 3 righe di codice HTML (che richiamano i relativi CSS, JS e Fonts):

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

A questo punto sarà necessario aggiungere agli elementi HTML delle nostre pagine le opportune classi o utilizzare direttamente i codici di esempi proposti, facilmente identificabili nella documentazione online della libreria presente nel link indicato sopra, e l'aspetto della nostra creazione assumerà una forma più gradevole senza doversi perdere nei meandri dei CSS (possiamo dire un po' come con l'avvento di Bootstrap che ha facilitato la vita agli sviluppatori Front-end).

Per dare un assaggio delle potenzialità appena enunciate riporto di seguito il codice HTML della parte grafica di una semplice applicazione che ho realizzato:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

  </head>
  <body>
    
  <header class="mdl-layout__header is-casting-shadow">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title" style="color:white;">Material Design in Google Apps Script</span>
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
    
  <div class="page-content" style="padding:20px;text-align:center">
  <main class="mdl-layout__content">
    <div class="page-content" style="padding:20px;text-align:center">
      
      <h3>Inserisci il tuo indirizzo email</h3>
      <div id="input">
         <div class="mdl-textfield mdl-js-textfield textfield-demo is-upgraded">
          <input class="mdl-textfield__input" type="text" id="email">
          <label class="mdl-textfield__label" for="email">La tua email</label>
         </div>
         <br />
         <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Invia</button><br /><br />
      </div>

      <div style="margin-top:2px">
      Creato da <a href="http://www.appsscript.it" target="_blank"><br />
         <img src="http://www.appsscript.it/images/logo_apps_script_italia.png" width="200px"></a><br /><br />
         <sup style="color:grey">Michele Pisani © AppsScript.it, 2017</sup>
      </div>
      
   </div>
  </main>
  </div>
    
  </body>
</html>

Il risultato, di cui riporto solo uno screenshot dato che il funzionamento dell'app non è di interesse di questo tutorial, è il seguente (Fig. 1):



Form di contatto creato con Google Apps Script e Material Design Lite

Fig. 01 - Form di contatto creato con Google Apps Script e Material Design Lite


Non resta altro pertanto che esplorare la vasta gamma di componenti messi a disposizione da Material Design Lite e modificare di conseguenza l'aspetto delle proprie applicazioni.

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

scrivi un commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web