Innhold
- 01. Fyr
- 02. Polymer
- 03. API-er Explorer
- 04. Flutter
- 05. Google GitHub
- 06. Dukketeater
- 07. Arbeidsboks
- 08. Codelabs
- 09. Fargeverktøy
- 10. Design Sprints
- 11. People + AI Guidebook
- 12. Google-assistent
- 13. PageSpeed Insights
- 14. AMP på Google
- 15. Google DevTools
- 16. Materiell design
Å jobbe på nettet betyr vanligvis at du vil jobbe med Google i en eller annen form. Og siden Google Chrome ligger foran konkurrentene, må designere og utviklere tenke på hvordan prosjektet deres vil fungere med nettleseren. Hvordan vil det se ut? Hvilke teknologier støtter den, hvor sikker er den og hvordan vil den fungere?
Heldigvis gir Chrome verktøy for å sikre at ethvert nettsted eller app vil være på sitt beste. DevTools gjør det mulig for designere og utviklere å få innsikt i en webside: du kan manipulere DOM, sjekke CSS, eksperimentere med design med live redigering, feilsøke JavaScript og sjekke ytelse. (Se mer om hvordan du bruker disse Google-nettverktøyene her, og hvis du begynner fra bunnen av, se vår liste over de beste nettbyggerne også).
Men Google tilbyr mer enn bare nettleseren. Den har verktøy og ressurser som hjelper nesten alle aspekter av design- og utviklingslivet ditt. Vil du vite hvordan du kan forbedre ytelsen? Fyr er her for å hjelpe. Vil du bygge mobilnettsteder som gir bedre resultater? Så si hei til AMP. Ønsker du å bygge vakre PWAer? Da er Flutter, Material Design og Workbox klare til å gå inn.
Det fine med å bruke Googles verktøy, ressurser, biblioteker og rammer er at du vet at de vil fungere bra med Chrome-nettleseren - den mest populære nettleseren på planeten. For flere verktøy, se vår sammendrag av webdesignverktøy.
01. Fyr
Ytelse er en nøkkelfaktor for suksessen til et nettsted, og Lighthouse er Googles verktøy for å forbedre kvaliteten på websider (den rette webhotelltjenesten vil også hjelpe). Så hvordan bruker du Lighthouse og hva kan det gjøre? I sin enkleste form kan du kjøre Lighthouse fra Audits-fanen og velge fra et utvalg av alternativer, inkludert stasjonær eller mobil, i tillegg til avkrysningsruter for ytelse, tilgjengelighet og SEO, for å generere en sluttrapport med foreslåtte forbedringer.
02. Polymer
Polymer er kjent for sitt arbeid med webkomponenter, men prosjektet har nå utvidet repertoaret til å omfatte en samling biblioteker, verktøy og standarder. Hva er inkludert? LitElement er en redaktør som gjør det enkelt å definere webkomponenter, mens lit-html er et HTML-malbibliotek som gjør det mulig for brukere å skrive neste generasjons HTML-maler i JS. I tillegg finner du også et PWA Starter-sett, det originale Polymer-biblioteket og sett med webkomponenter.
03. API-er Explorer
Google har et stort bibliotek med API-er tilgjengelig for utviklere, men å finne det du trenger er ingen enkel oppgave. Dette er hvor Googles APIer Explorer går inn for å tilby en hjelpende hånd. Det er en lang liste som kan rulles gjennom, men for raskere tilgang er det et søkefelt for å filtrere API-listen. Hver oppføring lenker til en referanseside med mer informasjon om hvordan du bruker API.
04. Flutter
Hvis du ønsker å bygge flotte applikasjoner for mobil, nett og skrivebord fra en enkelt kodebase, kan Flutter være noe for deg. Nettstedet er en fullstendig referanse til å jobbe med og bygge med Flutter. Har du ikke peiling på hva du skal gjøre? Dokumentene tar en bruker fra installasjon til opprettelse, assistert av mange eksempler og opplæringsprogrammer.
05. Google GitHub
Som de fleste vil vite, er GitHub hostingplattform / lager for å lagre og dele kode og filer. Og lykkelig har Google sitt eget sted på plattformen med over 260 lagringssteder å sile gjennom. Bruk filteret til å kutte ned søketiden og komme nærmere depotet du vil leke med eller bidra til.
06. Dukketeater
Innebygd node tilbyr Puppeteer et API på høyt nivå som gir deg tilgang til hodeløs Chrome - effektivt Chrome uten brukergrensesnittet, som utviklere deretter kan kontrollere via kommandolinjen. Så hva kan du gjøre med Puppeteer? Noen få alternativer er tilgjengelige for å generere skjermbilder og PDF-filer av sider, automatisere skjemainnlevering og lage et automatisert testmiljø.
07. Arbeidsboks
Hvis du ønsker å bygge en PWA, er dette et flott utgangspunkt. Workbox tilbyr en samling JavaScript-biblioteker for å legge til offline-støtte til webapper. Et utvalg av grundige guider viser hvordan du oppretter og registrerer en tjenestearbeiderfil, ruteforespørsler, bruker plugins og bruker bundlere med Workbox. Og det er også et sett med eksempler på cachingstrategier å sjekke ut.
08. Codelabs
Trenger du praktisk veiledning for et Google-produkt? Codelabs gir “en guidet, veiledning, praktisk kodingsopplevelse”. Nettstedet er pent oppdelt i kategorier og arrangementer, noe som gjør det raskt og enkelt å finne det du vil ha. Den inkluderer Analytics, Android, Assistent, augmented reality, Flutter, G Suite, Search, TensorFlow og virtual reality. Velg et alternativ og få koden og veibeskrivelsen du trenger for å bygge små applikasjoner.
09. Fargeverktøy
Color Tool er et greit verktøy som lar deg lage, dele og bruke en palett i tillegg til å kontrollere tilgjengeligheten. Brukere kan velge en forhåndsdefinert palett fra materialpaletten. Bare velg en farge og bruk den deretter på det primære fargevalget, bytt til det sekundære alternativet og velg igjen. Til slutt velger du tekstfarger for begge ordningene. Alternativt kan du bytte til Egendefinert for å velge farger. Bytt deretter til tilgjengelighet for å sjekke at alt er bra før du endelig eksporterer paletten.
10. Design Sprints
Design Sprint Kit er for de som lærer å delta i eller kjøre designsprint. Det ser ut til å dekke alle kunnskapsbaser, fra første omgang til erfarne sprint tilretteleggere. Lær om metodikken eller hopp rett inn i planleggingsfasen, inkludert å skrive truser, samle inn data og forskning, samt hva du skal gjøre etter sprint. Inkluderer også en rekke ressurser som verktøy, maler, oppskrifter og muligheten til å sende inn din egen metode. Du vil sannsynligvis trenge et sted å lagre og dele ressurser, så sørg for at lagringsvalget ditt er riktig.
11. People + AI Guidebook
Denne guiden er arbeidet med People + AI Research-initiativet hos Google og ser ut til å tilby hjelp til de som ønsker å bygge menneskesentrerte AI-produkter. Den omfattende guideboken er delt inn i seks kapitler som dekker brukerbehov, datainnsamling og evaluering, mentale modeller, tillit, tilbakemelding og grasiøs svikt. Hvert kapittel ledsages av øvelser, regneark og verktøyene og ressursene som er nødvendige for å få det til.
12. Google-assistent
Dette er Google Assistentens utviklerplattform, og tilbyr en guide om hvordan du integrerer innholdet og tjenestene dine med Google Assistant. Den viser deg hvordan du utvider mobilappen din, presenterer innhold på rike måter for Search and Assistant, kontrolllys, kaffemaskiner og andre enheter rundt hjemmet og bygger tale- og visuelle opplevelser for smarte høyttalere, skjermer og telefoner.
13. PageSpeed Insights
PageSpeed Insights analyserer nettinnhold og gir deretter forslag til hvordan du kan få det til å lastes raskere. Bare legg til en URL, trykk på Analyser-knappen og vent til magien skal skje. Sjekk Docs for å få et bedre innblikk i hvordan PageSpeed API fungerer og hvordan du begynner å bruke den.
14. AMP på Google
AMP er Googles verktøy for å lage hurtiglasting av mobile sider som (forhåpentligvis) kommer til toppen av søkerangeringen. Lær hvordan du lager raske, bruker-første nettsteder, integrerer AMP på tvers av Google-produkter, bruker Google AMP-hurtigbuffer for å gjøre AMP-sider raskere og tjene penger på AMP-sider med andre Google-produkter.
15. Google DevTools
Hver designer og utvikler vet (eller i det minste burde vite) at Chrome kommer med et sett med verktøy innebygd direkte i nettleseren. Chromes DevTools er ideelle for å inspisere elementene som utgjør en side, sjekke CSS, redigere sider på farten og mye mer.
Element-fanen er introduksjonen til DevTools. Den viser HTML-koden som utgjør den valgte siden. Få et innblikk i egenskapene til hver div eller tag fra den valgte siden, og start live redigering. Dette er perfekt for å eksperimentere med design. Sjekk oppsettet - enten du bruker Flexbox eller Grid - og se på relaterte skrifter med eksempler og undersøke animasjoner.
Andre steder kan du se og endre CSS. Fanen Stiler på Elements-panelet viser CSS-reglene som brukes på det valgte elementet i DOM-treet. Slå egenskaper på og av (eller legg til nye verdier) for å eksperimentere med design. Dette er det perfekte verktøyet for å sikre at alt fungerer som forventet før du bruker endringer i live design.
Du kan også feilsøke JavaScript, optimalisere nettstedets hastighet og inspisere nettverkshastigheten. Her er et raskt tips du kan bruke til å raskt øke arbeidsflyten. Gå til Kilder-fanen, klikk på Ny kodebit og legg til ofte brukt kode. Navngi kodebiten og lagre. Gjenta etter behov. Nå kan du hente denne kodebiten i stedet for å skrive den igjen.
Som alle gode nettlesere utvikler Chrome seg kontinuerlig, og hver nye utgivelse gir nye funksjoner. Finn ut hva som skjer på Chrome-plattformen
16. Materiell design
Utvikling kan sees på som Googles favorittbarn, men uansett hva du lager, lager eller bygger, må det se bra ut og gi brukeren en opplevelse som får dem til å ønske å bruke den. Materiale er et nyere tilskudd til Google-stallen, men er et designsystem som har modnet seg til et viktig stykke designsett.
Som ethvert godt designsystem, har det sitt eget sett med retningslinjer, som du må se på før du går inn i de mer spennende tingene. Få oversikt over hvordan du bruker forskjellige elementer, hva materialtema er, hvordan du implementerer et tema og brukervennlighetsguider, inkludert tilgjengelighet. Andre steder er det et innblikk i Material Foundation, som inkluderer nøkkelområdene for design som layout, navigering, farge, typografi, lyd, ikonografi, bevegelse og interaksjon. Hver kategori avslører sine doser og don'ts og hvor du bør være forsiktig. For å gi en ide om hva du kan forvente, tilbyr Layout-kategorien seksjoner om forståelse av layout, pikseltetthet, hvordan du arbeider med et responsivt layout inkludert kolonner, takrenner og marginer, brytpunkter, UI-regioner og avstandsmetoder for å nevne noen få.
Utover Design-delen er komponenter, som gir de fysiske byggesteinene som trengs for å lage et design. Hva er inkludert her? Knapper, bannere, kort, dialoger, skillevegger, lister, menyer, fremdriftsindikatorer, glidebrytere, snackbarer (dette er korte meldinger om app-prosesser nederst på skjermen), faner, tekstfelt og verktøytips. Utvilsomt en omfattende samling av komponenter.
Og utviklere har ikke blitt glemt, med detaljer og veiledninger om hvordan man bygger for forskjellige plattformer - Android, iOS, Web og Flutter. Og til slutt er det en side dedikert til en rekke ressurser som hjelper deg med å få det valgte designet til å skje.
Denne artikkelen dukket opprinnelig opp i nettmagasinet. Kjøp nummer 326.
