fbpx

Material Design – Materialize 1.0 By Google

Corsi di Formazione Informatica

material design

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.html

In 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

Material Design - Materialize 1.0 By Google

 

Hits: 530

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *