Google Polymer: come cambierà il modo in cui sono state create le app Web

Inoltre, questi elementi personalizzati possono avere anche un paio di attributi personalizzati accettati. Per quanto riguarda il elemento, imposti un attributo chiamato username che verrà usato per specificare il nome utente di Twitter.

Elementi personalizzati in polimero

Polymer viene fornito con una serie di elementi che rappresentano (quasi) ogni esigenza di applicazione web. Google divide questi elementi in gruppi: elementi in ferro, elementi in carta, componenti Web di Google, elementi in oro, elementi al neon, elementi in platino e molecole.

1. Elementi in ferro

Iron Elements è una raccolta di elementi di base. Questi elementi di base sono ciò che normalmente usiamo per costruire una pagina web come un input, una forma e un'immagine. La differenza è che Polymer aggiunge alcuni poteri in più a questi elementi.

Ad esempio, tutti gli elementi di questo gruppo hanno un prefisso di iron- , che viene utilizzato per visualizzare un'immagine. Il elemento è stato dotato di alcuni attributi extra che non possiamo applicare nel normale elemento. Ad esempio, possiamo aggiungere attributi di preload, fade e placeholder :

L'esempio sopra mostrerà prima il segnaposto dell'immagine e poi si dissolverà nell'immagine reale nello src quando è completamente caricato, eseguendo un effetto di caricamento dell'immagine uniforme .

2. Elementi cartacei

Gli elementi di carta è un gruppo di elementi di material design. Material Design è il linguaggio di progettazione di Google per rendere l'interfaccia utente e l'esperienza su tutte le piattaforme Google sia le app Web che quelle Android più visivamente coerenti. Alcuni elementi esclusivi di Material Design sono Paper and Floating Action Button (FAB).

Carta

La carta è la metafora di Google per il mezzo che è alla base del contenuto . Per aggiungere una carta con Polymer, usiamo il elemento. Questo elemento accetta 2 attributi:

• elevation per sollevare la carta, quindi aggiungendo un'ombra per rinforzare l'elevazione
• animated applicherà l'animazione come modifica dell'elevazione della carta.

Floating Action Button (FAB)

Il Floating Action Button (FAB) è un pulsante circolare con un'icona, che galleggia sullo schermo, di solito con un colore di rilievo. Google suggerisce che questo pulsante abbia una funzione di accesso frequente. Ecco un esempio:

Il seguente frammento di codice aggiunge un materiale cartaceo con un'immagine e un FAB.

Avremo il seguente risultato:

• Visualizza la demo della carta

3. Componenti Web di Google

I componenti web di Google sono elementi speciali che gestiscono le API di Google e servizi come Google Maps, Youtube e Google Feed, solo per citarne alcuni. Gli elementi di questo gruppo interagiscono con i servizi Google a poche righe di distanza .

Quello che segue è un esempio per mostrare una mappa di Google usando il elemento.

 Questo è Googleplex 

Come puoi sopra, il elemento prende la latitude e la longitude per specificare la posizione sulla mappa. Possiamo anche nidificare per mostrare un indicatore di mappa di quella posizione insieme a un testo che apparirà facendo clic sul marcatore.

• Visualizza la demo della mappa

Vuoi mostrare un video di Youtube? puoi usare il elemento.

Allo stesso modo personalizziamo l'output attraverso gli attributi.

• Guarda la demo di Youtube

4. Elementi in oro

Gli elementi dorati sono gli elementi progettati specificamente per le app di e-commerce . Qui troverai l'elemento per mostrare la carta di credito, l'email, il telefono e l'input ZIP che sono stati tutti dotati di convalida del formato per garantire il corretto inserimento e sicurezza dei dati. Ecco un esempio per aggiungere l'input della carta di credito Visa.

5. Altri elementi

Gli elementi rimanenti includono elementi Neon per animazioni ed effetti speciali, elementi Platinum per notifiche offline e push e infine Molecole, wrapper per librerie di terze parti.

Nota del redattore: al momento della stesura di questo articolo, Neon Elements, Platinum Elements e Molecules non sono ancora disponibili.

Polimero integrato

Vuoi usare Polymer nel tuo sviluppo web? Ecco come installarlo e integrarlo nelle tue pagine web. Poiché la maggior parte degli elementi polimerici si basano l'una sull'altra, il modo migliore per installare Polymer è attraverso Bower.

Bower è un gestore delle dipendenze del progetto che semplifica l'installazione di script o stili richiesti per eseguire il progetto. Dai un'occhiata al nostro post precedente su come installare, aggiornare e rimuovere facilmente le librerie web con Bower.

Per integrare Polymer, avviare Terminal quindi navigare nella directory del progetto, assumendo che ne sia stata creata una. Quindi eseguire il comando bower init per avviare il file bower.json nel progetto che verrà utilizzato per registrare le dipendenze del progetto. Apri bower.json e aggiungi le seguenti linee.

 "dipendenze": {"polymer": "Polimero / polimero # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements": " PolymerElements / iron-elements # ^ 1.0.0 ", " paper-elements ":" PolymerElements / paper-elements # ^ 1.0.0 ", " gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 "} 

Questa impostazione presuppone che useremo tutti gli elementi di ciascun gruppo. È possibile rimuovere ciò che non è necessario dall'elenco delle dipendenze. Quando le dipendenze sono impostate, eseguire il comando di installazione di bower install per installare le dipendenze dall'elenco.

Ecco un esempio:

Questa configurazione ci consentirà di utilizzare il , , elementi.

vetrine

Ecco alcune delle app Web che stanno già utilizzando Google Polymer.

Google

Google ha utilizzato Google Polymer nella pagina web di Google IO 2015; Google Fi, il servizio wireless di Google per vettori e venditori in partnership; e Google Music.

Elementi personalizzati

CustomElements è un hub in cui puoi trovare elementi personalizzati creati con Web Components. Utilizza l'elemento Carta per contenere e creare l'elenco. Fornisce anche un percorso conveniente per installare questi elementi tramite Bower e NPM.

Un'applicazione Chrome per la modifica del codice che funziona sorprendentemente bene. Questa app utilizza il pulsante FAB, il menu Carta e gli elementi di dialogo Carta nell'interfaccia utente.

Uno strumento per creare applicazioni Web con elementi Polymer mediante un'interfaccia drag-and-drop.

Un rapporto di borsa e previsioni costruito interamente con elementi Polymer.

Un'app client di posta elettronica per Gmail. Sembra bello e fluido, sebbene purtroppo non sia completamente funzionante.

Polymer ha una portata enorme e potrebbe richiedere un po 'di tempo per abituarsi a tutti gli elementi personalizzati e alle sue API. Ciononostante, Web Components e Polymer influenzeranno sicuramente il modo in cui creiamo applicazioni web. Mantieni il passo con la folla leggendo di più su Web Components: i riferimenti si trovano di seguito.

• Visualizza la demo
• Scarica fonte

Riferimenti utili

• Lo stato dei componenti Web
• Un'introduzione dettagliata agli elementi personalizzati
• Blog ufficiale di Google Polymer

10 video TED imperdibili per i progettisti

TED (Technology, Entertainment, Design) esiste dal 1984 con l'obiettivo primario di diffondere alcune idee e esperienze davvero eccezionali legate alla tecnologia, all'intrattenimento e al design. Potresti non avere familiarità con questa conferenza, ma sul serio, i dispositivi tecnologici cool come Xbox Kinect sono ispirati a uno dei talk di TED.

(Consigli tecnici e di design)

Suggerimenti e strumenti per migliorare la produttività del team di progettazione

Di solito anche un team produttivo è ben gestito. Le due parole chiave che vedete qui sono "produttive" e "gestite", quindi non sorprende che i team di progettazione siano sempre alla ricerca di migliori suggerimenti di produttività e principi di gestione a cui possano attenersi comodamente.A

(Consigli tecnici e di design)