In questo articolo parleremo di Skeleton, il framework super leggero, responsive boilerplate, usato per la creazione di interfacce grafiche di pagine html e web app, le sue caratteristiche di punta sono appunto la leggerezza, la compattezza e la flessibilità. Scritto con neanche 400 righe di codice riesce a dare ottimi risultati, restituendo layout semplici ma allo stesso tempo esteticamente accattivanti. Nasce per la realizzazione di progetti di piccola taglia che non necessitano di particolari azioni, senza dover essere appesantiti da funzioni inutilizzate, presenti ad esempio in framework dello stesso genere ma più corposi. Skeleton e' in grado di adattarsi ai display di innumerevoli dispositivi, dallo smartphone al desktop grazie a un sistema di griglia flessibile composta da dodici colonne. Costituito da due file css, fornisce solamente gli stili di base degli elementi HTML più comuni, vantando comunque grandi performance.
Questo articolo sarà diviso in due parti, dove nella Parte 1 conterrà un' introduzione a Skeleton CSS e la descrizione della struttura ed elementi che lo compongono. Nella Parte 2 verrà presentato un progettino d'esempio che simula un eliminacode elettronico. Lo scenario della simulazione sarà immaginato come una sala d'attesa, con degli uffici con operatori dedicati a prestare vari servizi a utenti che riservano diritto di precedenza tramite l'ordine di un numero prelevato da un atm all'ingresso della sala, inoltre all'interno della sala potranno sostare soltanto un minimo numero di persone. L' ordine di precedenza sarà visualizzato in un ipotetico monitor ben visibile al pubblico.
Il progettino sarà composto da:
- Interfaccia grafica realizzata con il framework Skeleton CSS del monitor che visualizza la precedenza degli utenti rispetto alle chiamate degli operatori.
- Raspberry pi adattata a server-web con sistema LAMP (linux-apache-mysql-php), che ospita la pagina visualizzata sul monitor.
- La stessa Raspberry pi che ha anche la funzione di gestire una piccola dashboard, che simula un ambiente pubblico composto da sportelli operatore, atm per il prelievo del ticket di turno, numero persone presenti in sala d'attesa.
Introduzione
Skeleton css è un web framework su base css di piccole dimensioni con funzioni basilari, creato da Dave Gamache, progettato per disegnare lo style di pagine web mobile first di piccola taglia. La sua libreria è costituita solamente da due file di estensione css, essi sono il popolare normalize.css e skeleton.css dove in quest'ultimo sono definiti gli elementi presenti nel framework, che nel complesso non supera le 400 righe di codice utile totale non compresso. Skeleton si basa su un potente sistema di griglia flessibile e fornisce gli stili base per i componenti HTML più comuni come pulsanti, elenchi, tabelle, moduli, etc. Nonostante sia leggero e disponga di pochi elementi, le user interface create risultano essere molto apprezzate dagli utenti essendo estremamente performanti nelle azioni, uniformi nel mostrare gli elementi sui vari browser ed avendo un aspetto esteticamente accattivante.
Una delle caratteristiche principali di Skeleton è il responsive design, grazie alla flessibilità della propria griglia composta da dodici colonne che raggiungono una larghezza massima di 960px (con la possibilità di aumentarne le dimensioni in caso di necessita modificando il css), adattandosi in maniera ottimale al layout dell'applicazione in funzione della dimensione dello schermo del device in uso, che sia uno smartphone, un tablet, un laptop o un desktop.
Nella Figura 1 viene esposto un semplice esempio di come includere Skeleton in una pagina html.
Figura 1: Inclusione di Skeleton in una pagina html
In riga 8 e 9 della Figura 1 sono stati importati i file css di Skeleton rispettivamente normalize.css e skeleton.css all'interno del tag <head>, atti ad includere il framework nella pagina web. Invece in riga 5 è stato inserito il viewport, soluzione creata da Apple introdotta su Safari per iPhone, per poi essere estesa a tutti gli altri browser mobile per scalarne la vista migliorandone la presentazione sugli schermi più piccoli.
Installazione
Per installare il framework basta scaricare i file che lo compongono dal sito di Skeleton css all'indirizzo www.getskeleton.com , cliccando sul bottone download in alto nella homepage si avvierà il processo di download, una volta finito tale processo avremo a disposizione una cartella (Che al momento della stesura di quest' articolo si chiama Skeleton-2.0.4) contenente un file chiamato index.html dove si può trovare la struttura base di una pagina html generica basata sul framework di skeleton css, poi ci sono due cartelle una chiamata images dove è presente una semplice favicon, in questa cartella possiamo mettere i vari file immagine che verranno usati per fare un progettino se decidiamo di usare direttamente la struttura base fornitaci dallo staff di sviluppatori. L'altra cartella invece chiamata css contiene i file css che costituiscono la struttura del framework, e sono come elencati in precedenza normalize.css e skeleton.css. Per usare Skeleton css possiamo realizzare il progetto partendo dalla struttura base reperita dal sito in fase di download e ampliarla a piacimento, oppure copiare i file presenti nella cartella css e importarli in un altro progetto includendoli come in Figura 1.
Struttura ed elementi
Skeleton nella sua libreria contiene solamente pochi elementi di base tipo i titoli, i paragrafi, le liste, i bottoni, gli input e pochi altri, essi sono formattati in maniera basilare e nonostante la loro semplicità vantano un' estetica gradevole. Skeleton css viene detto boilerplate perché non vuole essere una soluzione completa ma vuole essere un punto di partenza da poter ampliare a piacimento con estrema facilità, Skeleton è stato pensato proprio per quei progetti basilari che non necessitano di particolari azioni, senza essere appesantiti ad esempio da funzioni inutilizzate presenti in framework più estesi, il suo compito è quello di avere un codice snello, semplice, di fornire applicativi veloci e responsive con una navigazione sempre user frendly, mantenendo comunque un aspetto gradevole per l' occhio dell' utente.
Come accennato in precedenza il sistema Skeleton css è composto da due soli file che sono normalize.css e skeleton.css.
normalize.css serve per uniformare l'applicativo ai vari browser. Sebbene tutti i browser applichino i loro stili di base, ogni browser ha i suoi stili specifici diversi dagli altri browser e ciò, ovviamente, causa un problema di incoerenza tra browser nello stile predefinito degli elementi HTML. Per risolverne il problema si può usare il sistema normalize che è un'alternativa moderna, composto da un piccolo file .css, pronta per HTML5, al tradizionale ripristino CSS. Ciò significa che se osserviamo gli standard W3C degli stili applicati dai browser e c'è un'incoerenza in uno dei browser, gli stili normalize.css correggeranno lo stile del browser che ha la differenza.
skeleton.css contiene gli stili css dei principali elementi HTML, composto da poco più di quattrocento righe di codice di cui la metà è dedicata ai commenti vari, descrive l'aspetto degli elementi più comuni come leader, bottoni, forms, liste, tabelle, fornendo anche un contenitore che fa da involucro ad un sistema di griglia responsive a dodici colonne gestite dalle media query. A seguire verranno descritti gli elementi sopraelencati.
Il container
Il container è un elemento fondamentale nella costruzione della pagina. Esso funge da involucro che conterrà e centrerà al suo interno gli elementi dell'applicativo, avvolgendo il sistema di griglie flessibili in cui verrà organizzato il contenuto della pagina web tramite la classe container. In figura 1.1 si può vedere un esempio pratico del suo utilizzo.
Figura 1.1: Esempio d'uso della classe container
La classe container ha un valore massimo impostato a 965px, ed interagisce con dei breakpoint che vi impongono una larghezza fissa. Inoltre verrà posizionato al centro della vista, attraverso l'uso di margini laterali.
Figura 1.2: Esempio dell'uso di un container con uno schermo di 1250px
Figura 1.3: Esempio dell'uso di un container con uno schermo di 400px
Come si può notare dalle Figura 1.2 e 1.3 la classe container si adatta alla dimensione di diversi schermi, centrandosi nel layout restituendo un certo margine laterale.
La griglia
Il system grid nasce per assolvere al problema dell' uso improprio delle tabelle e dei frame, che nel vecchio modo di fare web facevano parte strutturale del layout venendo usate per determinare la posizione degli oggetti in una pagina. a quel tempo molte soluzioni erano frutto di ingegnosi e non sempre corretti artefatti per soddisfare le varie esigenze. In seguito le tabelle con l'evolversi delle tecnologie vennero sostituite dai div che insieme ai fogli di stile migliorarono in modo notevole il modo di definire la formattazione delle pagine HTML, aumentando le performance di navigazione e permettendo disposizioni complesse di oggetti in maniera semplice in fase di sviluppo che invece prima venivano pensate come impossibili.
Con l' avvento degli smartphone, tablet e device vari, aventi dimensioni di schermo tutte diverse tra loro, si ebbe il problema di avere che lo stesso sito si doveva vedere in maniera ottimale su tutti i vari supporti, bisognava dunque trovare il modo per accontentare tutti gli user agent con il minor tempo e lavoro possibile, così vennero creati i framework css come Skeleton, che semplificarono di molto la dura vita degli sviluppatori. Skeleton è dotato per la creazione del layout di un sistema a griglia flessibile composta da dodici colonne coprendo una larghezza massima di 960px. La dimensione massima si può modificare tranquillamente tramite le regole css a piacimento a seconda del bisogno. Le griglie sono estremamente modulari, dando la possibilità di posizionare i vari elementi di una pagina in qualunque modo, adattandosi perfettamente ad ogni tipo di device, dallo smartphone al desktop senza andare a modificare le funzionalità dell' applicativo. In definitiva il sistema a griglie dà la possibilità di fare tanto lavoro con poco sforzo restituendo un prodotto performante e leggero, adattabile alle più svariate soluzioni. In Figura 2 è rappresentato un semplice esempio di come si può costruire una griglia.
Figura 2: Esempio di codice per costruire un sistema a griglia
Il codice va inserito ovviamente nel tag <body>. Il design è caratterizzato da un container (<div class="container">)centrale con margini importanti sui dispositivi desktop al contrario dei dispositivi mobile dove i margini non sono presenti. La griglia all'interno del container sarà composta da più colonne sulla stessa riga (<div class="row">). Un sistema a griglia e' composto da una o più righe.
In Figura 3 viene rappresentato come apparirà la griglia scritta con il codice precedente (Figura 2) in un dispositivo desktop.
Figura 3: Esempio di griglia
L' esempio esposto in Figura 3 rappresenta una griglia in un dispositivo desktop, se il dispositivo fosse stato uno smartphone le colonne sarebbero state impilate una sopra l'altra.
Gli elementi di tipografia
Il sistema Skeleton css mette a disposizione la gestione degli elementi di base di tipografia quali titoli e paragrafi e le varie formattazioni del testo tipo grassetto, corsivo, link e sottolineato. vediamo a seguire un piccolo esempio.
Figura 3.1: Esempio dell'utilizzo degli elementi di tipografia.
Il risultato del costrutto precedente sarà il seguente.
Figura 3.2: Risultato del costrutto 3.1
Gli elementi sono impostati in rem. Il rem è un' unità flessibile e scalabile, che viene tradotto dal browser in valori di pixel, è semplicemente un moltiplicatore di un numero base che è rappresentato dal font-site dell' elemento HTML che generalmente è impostato a 16px. Vediamo degli esempi.
Se il valore del font-size e pari a 16px e imposto un font pari a 1rem il calcolo sarà 16x1=16 quindi 1 rem sarà uguale a 16px, se imposto un font a 2 rem il calcolo sarà 16x2=32 quindi l'elemento verrà visualizzato a 32px , se imposto il font a 0.8rem il calcolo sarà 16x0.5=8 e il font verrà visualizzato a 8px.
L'utilizzo dell'unità rem ci consente di ridimensionare rapidamente un intero progetto modificando semplicemente il valore dell'elemento radice.
I bottoni
Skeleton css ci fornisce 2 stili per i visualizzare i bottoni, uno (class="button") semplice a sfondo bianco con testo e bordi scuri, e l'altro (class="button button-primary") già più vivace a sfondo blu e testo chiaro. gli stili si possono applicare ai quattro metodi per creare un bottone che sono ancoraggi (<a href="#">..</a>), elemento html button (<button></button>), ed elementi dei form quali type submit e button (<input type="submit"> e <input type="button")>. A seguire vediamo un piccolo esempio applicato della classe button e button-primary .
Figura 3.4: Esempio di uso della classe button e button-primary
Possiamo personalizzare a piacere lo stile dei bottoni andando nel file skeleton.css ,copiamo l'intero blocco riguardante la parte button-primary, che al momento della stesura di quest'articolo che è in uso la versione 2.0.4 lo troviamo dalla riga 203 alla riga 223. La incolliamo poi nello stesso file o se non vogliamo sporcare la versione originale lo possiamo copiare in un file personalizzato tipo stile.css. Fatto ciò possiamo modificare i vari colori e nomi come nell'esempio seguente.
Figura 3.5: Personalizzazione di un bottone
Nel testo in Figura 3.5 è stato cambiato il nome della classe da button-primary a button-danger ed al posto di una tonalità di azzurro è stata usata una tonalità di rosso.
Figura 3.6.
Le forms
A seguire un breve esempio di uso delle forms.
Figura 4: Esempio di codice di un semplice form
il risultato della Figura 4 sarà il seguente.
Figura 4.1: Esempio di form
Le media query
Ciò che rende Skeleton css responsive a tutti i device è l'utilizzo delle media query. Le media query sono uno strumento atto ad individuare il dispositivo che sta navigando nella pagina web, definendone le regole di style implementate dallo sviluppatore in funzione di esso. In poche parole con l' uso delle media query si utilizzano dei break-point che nel caso di Skeleton dipendono dallo schermo del device in uso, una volta individuate le dimensioni vi si applicano i vari stili inerenti ad esse.
Le media query di Skeleton css sono:
- @media (min-width: 400px) {} => Mobile
- @media (min-width: 550px) {} => Phablet
- @media (min-width: 750px) {} => Tablet
- @media (min-width: 1000px) {} => Desktop
- @media (min-width: 1200px) {} => Desktop HD
Ricordiamo che Skeleton è un framework che segue il sistema first mobile ovvero pensato per la progettazione e l' ottimizzazione di applicativi prima per dispositivi mobile, poi per dispositivi di dimensioni superiori in ordine di dimensione dal più piccolo al più grande.
Vediamo ora un paio di piccoli esempi.
Esempio 1: Pagina di login
Vediamo come costruire una pagina di login in maniera semplice.
creiamo una cartella con un nome a piacere e dentro vi creiamo un file che chiameremo index.html e poi creeremo anche una cartella di nome css, dove vi mettiamo i file normalize.css e skeleton.css, poi sempre nella stessa cartella vi creiamo un file di nome style.css.
All'interno del file index.html metteremo il seguente listato.
<!DOCKTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="skeleton/css/skeleton.css">
<link rel="stylesheet" href="skeleton/css/normalize.css">
<link rel="stylesheet" href="skeleton/css/stile.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>My example in Skeleton</title>
</head>
<body>
<div class="container">
<div class=" cardForm">
<form>
<label>Nome utente o email</label>
<input type="text">
<label>Password</label>
<input type="password">
<input type="submit" value="accedi">
<div class=row>
<div class="six columns allLeft">
<p><input type="checkbox"> Resta connesso</p>
</div>
<div class="six columns allDestra">
<p>Password dimenticata?</p>
</div>
</div>
<div class=row>
<div class="twelve columns allCentro">
<p>Accedi con</p>
</div>
</div>
<div class=row>
<div class="twelve columns allCentro">
<p><a href="#">facebook</a></p>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
E all'interno del file style.css inseriremo il seguente scritto.
body{
background-color: #bfd200;
color: #007f5f;
font-size:16px;
}
.cardForm{
background-color:white;
border-radius:8px;
text-align:left;
padding:20px;
margin:0 auto;
max-width:450px;
width:100%;
}
input[type=password],input[type=text] {
width: 100%;
background-color: #f5f5f7;
padding: 14px 22px;
margin: 8px 0;
border-radius: 4px;
border: none;
height:50px;
}
input[type=submit] {
width: 100%;
height:50px;
background-color: #007f5f;
color:white;
margin-top:20px;
border:0,
}
input[type=submit]:hover {
background-color: #bfd200;
color:white;
border:0;
}
.container{
text-align:center;
padding:30px;
margin-top: 35px;
}
.sottoTitolo{
margin-top:30px;
font-weight:700;
font-size:0.875em;
letter-spacing:-0.25px;
}
.allCentro{
text-align:center;
}
.allDestra{
text-align:right;
}
.allLeft{
text-align:left;
}
a{
text-decoration:none;
color:#007f5f;
}
a:hover{
color:#bfd200;
}
Il risultato finale sarà:
Figura 4.5: Esempio di login costruito usando Skeleton css
Esempio2: Creare una finestra ed interagire con la console di python
In questo esempio creeremo un applicazione utilizzando come codice per creare la cui l'html, poi prenderemo il listato di Figura 3.4 e Figura 3.5 e con i bottoni che abbiamo creato in precedenza andremo ad interagire con la console di python.
Per potersi servire del codice html per poter generare interfacce grafiche con python dobbiamo utilizzare la libreria pywebview, per installarla seguiamo i seguenti passi (Io sto usando un sistema Osx, per windows cambia di poco).
Creiamo una cartella:
mkdir esempioBottoni
Accediamo alla cartella
cd esempioBottoni
Creiamo un ambiente virtuale
python -m venv env
Attiviamo l'ambiente virtuale
source env/bin/activate
Adesso componiamo il progetto creando la ormai solita cartella css contenente i file normalize.css e skeleton.css, poi creeremo i file index.html, eventi.js e main.py.
All'interno di index.html useremo i listati in Figura 3.4 e 3.5 con qualche piccola modifica come segue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<style>
.container{
margin-top: 100px
}
.button.button-danger,
button.button-danger,
input[type="submit"].button-danger,
input[type="reset"].button-danger,
input[type="button"].button-danger {
color: #FFF;
background-color: #f03f32;
border-color: #f03f32; }
.button.button-danger:hover,
button.button-danger:hover,
input[type="submit"].button-danger:hover,
input[type="reset"].button-danger:hover,
input[type="button"].button-danger:hover,
.button.button-danger:focus,
button.button-danger:focus,
input[type="submit"].button-danger:focus,
input[type="reset"].button-danger:focus,
input[type="button"].button-danger:focus {
color: #FFF;
background-color: #bf170a;
border-color: #bf170a; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="four columns">
<button id="myBtn1">Bianco</button>
</div>
<div class="four columns">
<button id="myBtn2" class="button-danger">Rosso</button>
</div>
<div class="four columns">
<button id="myBtn3" class="button-primary">Azzurro</button>
</div>
</div>
</div>
<script src="./eventi.js"></script>
</body>
</html>
Nel file eventi.js inseriremo quanto segue
document.getElementById("myBtn1").addEventListener("click", async () => {
await window.pywebview.api.click("bianco")
})
document.getElementById("myBtn2").addEventListener("click", async () => {
await window.pywebview.api.click("rosso")
})
document.getElementById("myBtn3").addEventListener("click", async () => {
await window.pywebview.api.click("azzurro")
})
Ed in fine andremo a scrivere sul file main.py
import webview
class App:
def click(self,coloreBtn):
print("Hai cliccato sul bottone "+coloreBtn)
app = App()
window = webview.create_window(
"Click Button",
"index.html",
js_api=App()
)
webview.start()
Ora possiamo testare l'esempio lanciando il comando python main.py, ci apparirà una finestra con all'interno i tre bottoni di colore diverso, cliccandoli sulla shell verrà stampato a video il colore del bottone premuto.
Figura 5: Esempio di applicativo Python scritto in html
Da notare che questo esempio lo si potrebbe applicare anche su Raspberry pi, magari per interagire con il GPIO o qualche altro tipo di applicativo.
In questa prima parte dell'articolo dedicato a Skeleton css abbiamo potuto conoscerne la struttura e la maggior parte degli elementi di base tanto magari per potercene appassionare almeno un poco, abbiamo visto la sua compattezza e la sua semplicità d'uso, anche se povero di grandi funzionalità risulta essere un sistema abbastanza valido.
Nella seconda parte dell'articolo continueremo a descrivere gli elementi di base, e andremo ad esplorare in maniera dettagliata un progetto che rispecchia tutte le caratteristiche del framework.
Chiudiamo dando la definizione informatica di boilerplate che si intende quel codice che, ci si ritrova a dover scrivere ripetutamente pressoché invariato soltanto perché il framework che si sta usando lo richiede.
A seguire in Figura 4 viene mostrato un esempio di pagina web creata con Skeleton css, l' esempio esposto è stato preso dalla documentazione ufficiale di Skeleton che troviamo alla pagina www.getskeleton.com
Figura 4: Esempio pagina costruita usando Skeleton
