Materialize
Una nuova struttura Framework come Material Design oppure Materialize, ideata da Google nel 2014 e trasformata ulteriormente nel 2016, oggi siamo alla versione 1.0.0 (iniziata alla 0.0.1). Utilizzato ampiamente su Android dalla vers. 5.0 (lollipop). Lo scopo principale è di migliorare la fruibilità dei siti WEB aggiungendo qualcosa di nuovo. Grafica più accattivante e velocità nell’eseguire il codice per realizzare Applicazioni web che ben si adattino a tutti gli schermi. Supporta CSS, AngularJS, Angular 7.
Molto simile a Bootstrap nella sua configurazione, rende i siti modificabili adattando Templates studiati appositamente.
Questa la struttura tipo:
MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.htmlIn questo video di 48 secondi si capisce bene quali le potenzialità
Ti puo’ interessare il nostro catalogo corsi
Il materiale è la metafora
La metafora del materiale definisce la relazione tra spazio e movimento. L’idea è che la tecnologia sia ispirata alla carta e all’inchiostro e sia utilizzata per facilitare la creatività e l’innovazione. Superfici e bordi forniscono indicazioni visive familiari che consentono agli utenti di comprendere rapidamente la tecnologia oltre il mondo fisico.
Grassetto, grafico, intenzionale
Elementi e componenti come griglie, tipografia, colori e immagini non sono solo visivamente gradevoli, ma creano anche un senso di gerarchia, significato e attenzione. L’enfasi su diverse azioni e componenti crea una guida visiva per gli utenti.
Il movimento fornisce un significato
Il movimento consente all’utente di tracciare un parallelo tra ciò che vedono sullo schermo e nella vita reale. Fornendo sia feedback che familiarità, questo consente all’utente di immergersi completamente in una tecnologia sconosciuta. Il movimento contiene coerenza e continuità oltre a fornire agli utenti ulteriori informazioni sul subconscio su oggetti e trasformazioni.
Il documento base di partenza è molto simile a Bootstrap:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>Tutto l’occorrente per partire con Material Design lo trovi da qui alla pagina ufficiale Materialize
