About the author : tecnodigital

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à

Per la tua privacy YouTube necessita di una tua approvazione prima di essere caricato. Per maggiori informazioni consulta la nostra Privacy Policy.
Ho letto la Privacy Policy ed accetto

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

 

About the author : tecnodigital

Leave A Comment