!
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="https://www.appsscript.it" target="_blank"><br />
<img src="https://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):
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.
Non ci sono commenti
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
scrivi un commento