Primi passi con Material Design

Se di solito leggi le notizie relative al mondo mobile, avrai sentito al momento di Material Design , un linguaggio di design creato da Google per i suoi dispositivi mobili che eseguono il sistema operativo Android.

Infatti, come parte dei costanti cambiamenti che sperimentiamo intorno ai sistemi di programmazione utilizzati, al momento da La Gran G ha presentato ufficialmente questo ambiente per altri interessanti.

L’obiettivo perseguito in questi casi ha generalmente a che fare con la semplificazione del modo in cui gli sviluppatori possono generare applicazioni per Android , che poi scarichiamo sui nostri terminali.

In questo contesto è che al momento abbiamo appreso la creazione di Material Design ed è per questo che se vuoi muovere i primi passi con questo linguaggio di programmazione, ti consigliamo di continuare a leggere per saperne di più.

Dopo aver letto le basi di questo ambiente, sarai in grado di capire come migliora l’usabilità delle applicazioni di Material Design e qual è il loro potenziale finale.

Primi passi con Material Design 1

Come implementare la progettazione dei materiali?

L’implementazione di Material Design sul nostro sito Web è il primo passo che dobbiamo prendere in considerazione in questi tipi di situazioni, anche se in linea di principio non dovresti preoccuparti, poiché ci sono molte opzioni relative ai framework gratuiti .

Quello che devi considerare qui è che tutto dipenderà dal tuo livello di conoscenza della programmazione , nonché dalle esigenze del progetto che stai realizzando.

In generale, possiamo dire che ci sono due framework che potrebbero essere considerati i più importanti all’interno di questo segmento, come material-ui , che utilizza la libreria React e su cui si basano applicazioni come Facebook e Instagram.

Nel secondo caso, per gli utenti che non hanno così tanta conoscenza, abbiamo Materialise , il sistema perfetto perché ci consente di programmare solo con l’inclusione di una libreria .js e un file .css e su cui ci concentreremo in seguito.

Primi passi con Material Design 2

Ottieni materializzazione da Material Design

Bene, a questo punto dovresti considerare che possiamo ottenere Materialise in diversi modi, sebbene la maggior parte degli utenti scommetta direttamente sul download dei loro file dal sito ufficiale .

Una seconda alternativa sarebbe usare Sass , che funziona in modo simile a Less, anche se ci richiede di avere un compilatore.

In queste circostanze, abbiamo un gestore di pacchetti Node.js che dovrà essere precedentemente installato sul nostro sistema in modo da consentirci di utilizzare NPM, eseguendo la seguente riga di comando in Node.js:

npm installa materialize-css

Una volta completato il passaggio precedente, il seguente sarà quello di includere i file dalla CDN dell’applicazione, in questo modo:

<! – CSS compilato e minimizzato ->
<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css”>

<! – JavaScript compilato e minimizzato ->
<script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js”> </script>

Ora avrai Materialise per i tuoi progetti, quindi ti mostriamo un esempio del suo utilizzo:

La prima cosa che devi fare in questi casi è provare a creare un codice HTML piuttosto semplice, grazie al quale puoi includere le librerie Materialise, mentre aggiungeremo anche un menu a discesa Material Design nel tuo corpo.

Per questo, la prima cosa che devi fare è includere i tag convenzionali e quindi aggiungere un tag di collegamento al foglio di stile, in questo modo:

<! DOCTYPE html>
<html>
<head>

<link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css”>

<meta name = “viewport” content = “width = larghezza dispositivo, scala iniziale = 1.0 ″ />
</head>

Una volta terminato il passaggio precedente, il prossimo sarà aggiungere le classi che indicheranno agli elementi ul il comportamento che dovrebbero avere come menu a discesa. Questa volta sarà del tipo a discesa.

A sua volta, aggiungeremo jQuery alla fine, in modo che il codice assomigli a questo:

<body>
<ul id = “dropdown2 ″ class =” dropdown-content “>
<li> <a href=†#!•> Link 1 <span class =” badge “> 1 </span> </a> < / li>
<li> <a href=†#!•> Link 2 <span class = “new badge”> 1 </span> </a> </li>
<li> <a href = “#!” > Link 3 </a> </li>
</ul>
<a class=†btn menu a discesa- pulsante• href=†#!† data-activates=†dropdown2 “> Menu a discesa <i class = “mdi-navigation- freccia a discesa a destra “> </i> </a>

<script type = “text / javascript” src = “https://code.jquery.com/jquery-2.1.1.min.js”> </script>
<script src = “https: //cdnjs.cloudflare. com / ajax / libs / materialize / 0.97.0 / js / materialize.min.js “> </script>
</body>
</html>

Dopo aver inserito il codice precedente, possiamo visualizzare un saggio su come funzioneranno i contenuti creati.

Qui abbiamo concluso con questa prima implementazione di Material Design in modo rapido e semplice, sebbene sia ovviamente consigliato continuare i test per comprendere meglio l’ambito di questo ambiente di sviluppo.

Una volta padroneggiato questo linguaggio di programmazione, sarai quindi in grado di sviluppare applicazioni per le diverse versioni di Android , in modo che siano in grado di adattarsi a questo sistema operativo senza troppi sforzi.

Cos’altro vorresti sapere sul linguaggio di programmazione Material Design?

 

Potrebbe interessarti

Lascia un commento