Contenuto
- 01. Faro
- 02. Polimero
- 03. API Explorer
- 04. Flutter
- 05. Google GitHub
- 06. Burattinaio
- 07. Casella di lavoro
- 08. Codelabs
- 09. Strumento colore
- 10. Progettazione Sprint
- 11. People + AI Guidebook
- 12. Assistente Google
- 13. PageSpeed Insights
- 14. AMP su Google
- 15. Google DevTools
- 16. Material Design
Lavorare sul Web di solito significa che lavorerai con Google in qualche forma o forma. E visto che Google Chrome è un passo avanti rispetto alla concorrenza, i designer e gli sviluppatori devono pensare a come funzionerà il loro progetto con il browser. Come apparirà? Quali tecnologie supporta, quanto è sicuro e come funzionerà?
Fortunatamente, Chrome fornisce strumenti per garantire che qualsiasi sito o app funzionerà al meglio. DevTools consente a designer e sviluppatori di ottenere informazioni dettagliate su una pagina web: puoi manipolare il DOM, controllare CSS, sperimentare progetti con editing live, eseguire il debug di JavaScript e controllare le prestazioni. (Scopri di più su come utilizzare questi strumenti web di Google qui e, se stai partendo da zero, consulta anche il nostro elenco dei migliori web builder).
Ma Google offre molto di più del semplice browser. Ha strumenti e risorse per aiutare quasi ogni aspetto della tua vita di progettazione e sviluppo. Vuoi sapere come migliorare le prestazioni? Il faro è qui per aiutarti. Vuoi creare siti per dispositivi mobili con prestazioni migliori? Quindi saluta AMP. Stai cercando di creare bellissime PWA? Quindi Flutter, Material Design e Workbox sono pronti per intervenire.
Il bello dell'utilizzo di strumenti, risorse, librerie e framework di Google è che sai che funzioneranno bene con il browser Chrome, il browser più popolare del pianeta. Per ulteriori strumenti, consulta il nostro riepilogo degli strumenti di web design.
01. Faro
Le prestazioni sono un fattore chiave per il successo di un sito e Lighthouse è lo strumento di Google per migliorare la qualità delle pagine web (anche il giusto servizio di web hosting aiuterà). Allora come usi Lighthouse e cosa può fare? Nella sua forma più semplice, puoi eseguire Lighthouse dalla scheda Audit e scegliere tra una selezione di opzioni tra cui desktop o mobile, oltre alle caselle di spunta per prestazioni, accessibilità e SEO, per generare un report finale con miglioramenti suggeriti.
02. Polimero
Polymer è ben noto per il suo lavoro con i componenti web, ma il progetto ha ora ampliato il suo repertorio per abbracciare una raccolta di librerie, strumenti e standard. Cosa è incluso? LitElement è un editor che semplifica la definizione di componenti Web, mentre lit-html è una libreria di modelli HTML che consente agli utenti di scrivere modelli HTML di nuova generazione in JS. Inoltre, troverai anche uno Starter kit PWA, la libreria Polymer originale e set di componenti web.
03. API Explorer
Google ha una vasta libreria di API a disposizione degli sviluppatori, ma trovare ciò di cui hai bisogno non è un compito facile. È qui che interviene l'APIs Explorer di Google per offrire una mano. C'è un lungo elenco che può essere fatto scorrere ma, per un accesso più rapido, c'è una casella di ricerca per filtrare l'elenco delle API. Ogni voce si collega a una pagina di riferimento con maggiori dettagli su come utilizzare l'API.
04. Flutter
Se stai cercando di creare applicazioni di bell'aspetto per dispositivi mobili, web e desktop da una singola base di codice, Flutter potrebbe fare al caso tuo. Il sito è un riferimento completo per lavorare e costruire con Flutter. Non hai la più pallida idea di cosa fare? La documentazione accompagna un utente dall'installazione alla creazione, assistito da numerosi esempi e tutorial.
05. Google GitHub
Come molti sapranno, GitHub è la piattaforma / repository di hosting per archiviare e condividere codice e file. E fortunatamente Google ha il suo posto sulla piattaforma con oltre 260 repository da vagliare. Usa il filtro per ridurre i tempi di ricerca e avvicinarti al repository con cui vuoi giocare o con cui contribuire.
06. Burattinaio
Costruito in Node, Puppeteer offre un'API di alto livello che ti consente di accedere a Chrome headless, effettivamente Chrome senza l'interfaccia utente, che gli sviluppatori possono quindi controllare tramite la riga di comando. Allora cosa puoi fare con Puppeteer? Sono disponibili alcune opzioni per generare screenshot e PDF di pagine, automatizzare l'invio di moduli e creare un ambiente di test automatizzato.
07. Casella di lavoro
Se stai cercando di creare una PWA, questo è un ottimo punto di partenza. Workbox fornisce una raccolta di librerie JavaScript per l'aggiunta del supporto offline alle app Web. Una selezione di guide approfondite mostra come creare e registrare un file di service worker, instradare richieste, utilizzare plug-in e utilizzare bundler con Workbox. E c'è anche una serie di strategie di caching di esempio da controllare.
08. Codelabs
Hai bisogno di una guida pratica per un prodotto Google? Codelabs fornisce "un'esperienza di codifica guidata, tutorial e pratica". Il sito è suddiviso in modo ordinato in categorie ed eventi, il che rende facile e veloce trovare ciò che desideri. Include Analytics, Android, Assistant, realtà aumentata, Flutter, G Suite, Search, TensorFlow e realtà virtuale. Seleziona un'opzione e ottieni il codice e le indicazioni necessarie per creare piccole applicazioni.
09. Strumento colore
Color Tool è uno strumento semplice che consente di creare, condividere e applicare una tavolozza oltre a verificare l'accessibilità. Gli utenti possono scegliere una tavolozza predefinita dalla tavolozza Materiali. Scegli semplicemente un colore e poi applicalo alla combinazione di colori primari, passa all'opzione secondaria e scegli di nuovo. Infine, scegli i colori del testo per entrambi gli schemi. In alternativa, passa a Personalizzato per scegliere i tuoi colori. Quindi passare a Accessibilità per verificare che sia tutto a posto prima, infine, di esportare la tavolozza.
10. Progettazione Sprint
Il Design Sprint Kit è per coloro che stanno imparando a partecipare o eseguire sprint di progettazione. Cerca di coprire tutte le basi di conoscenza, dai principianti ai facilitatori di sprint esperti. Scopri la metodologia o passa direttamente alla fase di pianificazione, inclusa la scrittura di brief, la raccolta di dati e la ricerca, nonché cosa fare dopo lo sprint. Include anche una serie di risorse come strumenti, modelli, ricette e l'opzione per inviare il tuo metodo. Inoltre, probabilmente avrai bisogno di un luogo in cui archiviare e condividere le risorse, quindi assicurati che la tua scelta di archiviazione cloud sia giusta.
11. People + AI Guidebook
Questa guida è il lavoro dell'iniziativa People + AI Research di Google e cerca di offrire aiuto a coloro che desiderano creare prodotti di IA incentrati sull'uomo. La guida completa è suddivisa in sei capitoli che coprono le esigenze degli utenti, la raccolta e la valutazione dei dati, i modelli mentali, la fiducia, il feedback e il grazioso fallimento. Ogni capitolo è accompagnato da esercizi, fogli di lavoro e strumenti e risorse necessari per realizzarlo.
12. Assistente Google
Questa è la piattaforma per sviluppatori dell'Assistente Google, che offre una guida su come integrare i tuoi contenuti e servizi con l'Assistente Google. Ti mostra come estendere la tua app mobile, presentare i contenuti in modi avanzati per la ricerca e l'assistente, controllare luci, macchine da caffè e altri dispositivi in casa e creare esperienze vocali e visive per altoparlanti, display e telefoni intelligenti.
13. PageSpeed Insights
PageSpeed Insights analizza i contenuti web e quindi offre suggerimenti su come caricarli più velocemente. Aggiungi semplicemente un URL, premi il pulsante Analizza e attendi che avvenga la magia. Controlla i documenti per avere una visione migliore di come funziona l'API PageSpeed e come iniziare a usarla.
14. AMP su Google
AMP è lo strumento di Google per la creazione di pagine mobili a caricamento rapido che (si spera) raggiungeranno i primi posti nelle classifiche di ricerca. Scopri come creare siti veloci e user-first, integrare AMP nei prodotti Google, utilizzare Google AMP Cache per rendere le pagine AMP più veloci e monetizzare le pagine AMP con altri prodotti Google.
15. Google DevTools
Ogni designer e sviluppatore sa (o almeno dovrebbe sapere) che Chrome viene fornito con una serie di strumenti integrati direttamente nel browser. Gli strumenti DevTool di Chrome sono ideali per ispezionare gli elementi che compongono una pagina, controllare CSS, modificare pagine al volo e molto altro ancora.
La scheda Elements è l'introduzione a DevTools. Visualizza il codice HTML che compone la pagina selezionata. Ottieni una panoramica delle proprietà di ogni div o tag dalla pagina selezionata e inizia la modifica dal vivo. Questo è perfetto per sperimentare con i design. Controlla il layout, che tu stia usando Flexbox o Grid, e dai un'occhiata ai font correlati con esempi ed esamina le animazioni.
Altrove, puoi visualizzare e modificare CSS. La scheda Stili nel pannello Elementi elenca le regole CSS applicate all'elemento attualmente selezionato nell'albero DOM. Attiva e disattiva le proprietà (o aggiungi nuovi valori) per sperimentare i progetti. Questo è lo strumento perfetto per garantire che tutto funzioni come previsto prima di applicare qualsiasi modifica al design live.
Puoi anche eseguire il debug di JavaScript, ottimizzare la velocità del sito web e controllare la velocità della rete. Ecco un suggerimento rapido che puoi utilizzare per accelerare immediatamente il tuo flusso di lavoro. Vai alla scheda Fonti, fai clic su Nuovo snippet e aggiungi il codice utilizzato di frequente. Assegna un nome allo snippet di codice e salva. Ripeti se necessario. Ora puoi prendere questo frammento di codice invece di scriverlo di nuovo.
Come ogni buon browser, Chrome è in continua evoluzione e ogni nuova versione offre nuove funzionalità. Scopri cosa sta succedendo sulla piattaforma di stato di Chrome
16. Material Design
Lo sviluppo può essere visto come il figlio preferito di Google ma, qualunque cosa tu stia facendo, creando o costruendo, deve avere un bell'aspetto e offrire all'utente un'esperienza che gli faccia desiderare di usarlo. Il materiale è un'aggiunta più recente alla scuderia di Google, ma è un sistema di progettazione che è maturato in un elemento fondamentale del kit di progettazione.
Come ogni buon sistema di progettazione, ha una propria serie di linee guida, che è necessario esaminare prima di entrare nelle cose più interessanti. Ottieni una panoramica su come utilizzare i diversi elementi, cos'è la tematizzazione dei materiali, come implementare un tema e guide all'usabilità inclusa l'accessibilità. Altrove, c'è una panoramica di Material Foundation, che include le aree chiave del design come layout, navigazione, colore, tipografia, suono, iconografia, movimento e interazione. Ogni categoria rivela le sue cose da fare e da non fare e dove dovresti considerare cautela. Per dare un'idea di cosa aspettarsi, la categoria Layout offre sezioni sulla comprensione del layout, della densità di pixel, su come lavorare con un layout reattivo tra cui colonne, margini e margini, punti di interruzione, regioni dell'interfaccia utente e metodi di spaziatura per citarne solo alcuni.
Oltre la sezione Design c'è Components, che fornisce gli elementi costitutivi fisici necessari per creare un design. Cosa è incluso qui? Pulsanti, banner, schede, finestre di dialogo, divisori, elenchi, menu, indicatori di avanzamento, cursori, snackbar (questi sono brevi messaggi sui processi delle app nella parte inferiore dello schermo), schede, campi di testo e suggerimenti. Indubbiamente una raccolta completa di componenti.
E gli sviluppatori non sono stati dimenticati, con dettagli e tutorial su come creare per piattaforme diverse: Android, iOS, Web e Flutter. E, infine, c'è una pagina dedicata a una serie di risorse per aiutarti a realizzare il tuo design scelto.
Questo articolo è originariamente apparso su net magazine. Acquista il numero 326.
