Indhold
- 01. Fyrtårn
- 02. Polymer
- 03. API'er Explorer
- 04. Fladder
- 05. Google GitHub
- 06. Dukketeater
- 07. Arbejdskasse
- 08. Codelabs
- 09. Farveværktøj
- 10. Design sprints
- 11. People + AI Guidebook
- 12. Google Assistent
- 13. PageSpeed Insights
- 14. AMP på Google
- 15. Google DevTools
- 16. Materialedesign
At arbejde på internettet betyder normalt, at du vil arbejde med Google i en eller anden form eller form. Og da Google Chrome ligger foran konkurrenterne, skal designere og udviklere tænke over, hvordan deres projekt vil fungere sammen med browseren. Hvordan vil det se ud? Hvilke teknologier understøtter den, hvor sikker er den, og hvordan fungerer den?
Heldigvis leverer Chrome værktøjer til at sikre, at ethvert websted eller app er bedst. DevTools gør det muligt for designere og udviklere at få indsigt i en webside: du kan manipulere DOM, kontrollere CSS, eksperimentere med designs med live redigering, debugge JavaScript og kontrollere ydeevne. (Se mere om, hvordan du bruger disse Google-webværktøjer her, og hvis du starter fra bunden, se vores liste over de bedste webbygere også).
Men Google tilbyder mere end bare browseren. Det har værktøjer og ressourcer til at hjælpe næsten alle aspekter af dit design og udviklingsliv. Vil du vide, hvordan du forbedrer ydeevnen? Fyr er her for at hjælpe. Ønsker du at opbygge mobilwebsteder, der fungerer bedre? Sig derefter hej til AMP. Ønsker du at bygge smukke PWA'er? Derefter er Flutter, Material Design og Workbox klar til at træde ind.
Skønheden ved at bruge Google-værktøjer, ressourcer, biblioteker og rammer er, at du ved, at de vil fungere godt sammen med Chrome-browseren - den mest populære browser på planeten. For flere værktøjer, se vores opsamling af værktøjer til webdesign.
01. Fyrtårn
Ydeevne er en nøglefaktor for et websteds succes, og Lighthouse er Googles værktøj til at forbedre kvaliteten af websider (den rigtige webhostingtjeneste hjælper også). Så hvordan bruger du Lighthouse, og hvad kan det gøre? I sin enkleste form kan du køre Lighthouse fra fanen Audits og vælge et udvalg af muligheder, herunder desktop eller mobil, ud over afkrydsningsfelter for ydeevne, tilgængelighed og SEO for at generere en endelig rapport med foreslåede forbedringer.
02. Polymer
Polymer er kendt for sit arbejde med webkomponenter, men projektet har nu udvidet sit repertoire til at omfavne en samling biblioteker, værktøjer og standarder. Hvad er inkluderet? LitElement er en editor, der gør det let at definere webkomponenter, mens lit-html er et HTML-skabelonbibliotek, der giver brugerne mulighed for at skrive næste generations HTML-skabeloner i JS. Derudover finder du også et PWA Starter-sæt, det originale polymerbibliotek og sæt webkomponenter.
03. API'er Explorer
Google har et stort bibliotek med API'er til rådighed for udviklere, men det er ingen nem opgave at finde det, du har brug for. Det er her Googles API'er Explorer træder ind for at tilbyde en hjælpende hånd. Der er en lang liste, der kan rulles igennem, men for hurtigere adgang er der et søgefelt til filtrering af API-listen. Hver post linker til en referenceside med flere detaljer om, hvordan man bruger API'en.
04. Fladder
Hvis du ønsker at opbygge flotte applikationer til mobil, internet og desktop fra en enkelt codebase, kan Flutter være noget for dig. Webstedet er en komplet reference til at arbejde med og bygge med Flutter. Har du ikke en anelse om hvad jeg skal gøre? Dokumenterne tager en bruger fra installation til oprettelse, assisteret af masser af eksempler og tutorials.
05. Google GitHub
Som de fleste vil vide, er GitHub hostingplatformen / lageret til at gemme og dele kode og filer. Og heldigvis har Google sin egen plads på platformen med over 260 arkiver, der skal sigtes igennem. Brug filteret til at skære ned på din søgetid og komme tættere på det lager, du vil lege med eller bidrage til.
06. Dukketeater
Indbygget node tilbyder Puppeteer et API på højt niveau, der giver dig adgang til hovedløs Chrome - effektivt Chrome uden brugergrænsefladen, som udviklere derefter kan kontrollere via kommandolinjen. Så hvad kan du gøre med Puppeteer? Et par muligheder er tilgængelige til generering af skærmbilleder og PDF-filer af sider, automatisering af formularindsendelse og oprettelse af et automatiseret testmiljø.
07. Arbejdskasse
Hvis du ønsker at opbygge en PWA, er dette et godt udgangspunkt. Workbox leverer en samling JavaScript-biblioteker til tilføjelse af offline support til webapps. Et udvalg af dybdegående guider demonstrerer, hvordan man opretter og registrerer en servicearbejderfil, ruteanmodninger, bruger plugins og bruger bundlere med Workbox. Og der er også et sæt eksempler på cachestrategier at tjekke ud.
08. Codelabs
Har du brug for praktisk vejledning til et Google-produkt? Codelabs giver “en guidet, tutorial, praktisk kodningsoplevelse”. Webstedet er pænt opdelt i kategorier og begivenheder, hvilket gør det hurtigt og nemt at finde det, du ønsker. Det inkluderer Analytics, Android, Assistent, augmented reality, Flutter, G Suite, Search, TensorFlow og virtual reality. Vælg en mulighed, og få den kode og retninger, du har brug for til at opbygge små applikationer.
09. Farveværktøj
Color Tool er et ligetil værktøj, der giver dig mulighed for at oprette, dele og anvende en palet ud over at kontrollere tilgængeligheden. Brugere kan vælge en foruddefineret palet fra materialepaletten. Du skal blot vælge en farve og derefter anvende den i det primære farveskema, skifte til den sekundære mulighed og vælge igen. Til sidst skal du vælge tekstfarver til begge ordninger. Alternativt kan du skifte til Brugerdefineret for at vælge dine farver. Skift derefter til tilgængelighed for at kontrollere, at alt er godt, før du endelig eksporterer paletten.
10. Design sprints
Design Sprint Kit er til dem, der lærer at deltage i eller køre designsprint. Det ser ud til at dække alle videnbaser, fra første timere til erfarne sprint facilitatorer. Lær om metoden eller spring direkte ind i planlægningsfasen, herunder skriv trusse, indsamling af data og forskning samt hvad du skal gøre efter sprint. Omfatter også en lang række ressourcer såsom værktøjer, skabeloner, opskrifter og muligheden for at indsende din egen metode. Du har sandsynligvis også brug for et sted at gemme og dele ressourcer, så sørg for, at dit cloudlagervalg er på det rette punkt.
11. People + AI Guidebook
Denne guide er arbejdet med People + AI Research-initiativet på Google og ser ud til at tilbyde hjælp til dem, der ønsker at opbygge menneskecentrerede AI-produkter. Den omfattende vejledning er opdelt i seks kapitler, der dækker brugerbehov, dataindsamling og evaluering, mentale modeller, tillid, feedback og yndefuld fiasko. Hvert kapitel ledsages af øvelser, regneark og de værktøjer og ressourcer, der er nødvendige for at få det til at ske.
12. Google Assistent
Dette er Google Assistents udviklerplatform, der tilbyder en guide til, hvordan du integrerer dit indhold og dine tjenester med Google Assistent. Det viser dig, hvordan du udvider din mobilapp, præsenterer indhold på rigelige måder til søgning og assistent, kontrollamper, kaffemaskiner og andre enheder rundt om i hjemmet og opbygge stemme- og visuelle oplevelser til smarte højttalere, skærme og telefoner.
13. PageSpeed Insights
PageSpeed Insights analyserer webindhold og giver derefter forslag til, hvordan man får det til at indlæse hurtigere. Du skal blot tilføje en URL, trykke på knappen Analyser og vente på, at magien skal ske. Tjek Docs for at få et bedre indblik i, hvordan PageSpeed API fungerer, og hvordan du begynder at bruge det.
14. AMP på Google
AMP er Googles værktøj til at oprette hurtigindlæste mobilsider, der (forhåbentlig) kommer til toppen af søgerangeringer. Lær hvordan du opretter hurtige, bruger-første websteder, integrerer AMP på tværs af Google-produkter, bruger Google AMP-cache til at gøre AMP-sider hurtigere og tjene penge på AMP-sider med andre Google-produkter.
15. Google DevTools
Hver designer og udvikler ved (eller i det mindste burde vide), at Chrome leveres med et sæt værktøjer indbygget direkte i browseren. Chromes DevTools er ideelle til at inspicere de elementer, der udgør en side, kontrollere CSS, redigere sider på farten og meget mere.
Fanen Elementer er introduktionen til DevTools. Den viser HTML-koden, der udgør den valgte side. Få et indblik i egenskaberne for hver div eller tag fra den valgte side, og start live redigering. Dette er perfekt til at eksperimentere med design. Tjek layoutet - uanset om du bruger Flexbox eller Grid - og se på relaterede skrifttyper med eksempler og undersøge animationer.
Andetsteds kan du se og ændre CSS. Fanen Stilarter på panelet Elementer viser de CSS-regler, der anvendes på det aktuelt valgte element i DOM-træet. Slå egenskaber til og fra (eller tilføj nye værdier) for at eksperimentere med design. Dette er det perfekte værktøj til at sikre, at alt fungerer som forventet, inden du foretager ændringer i det live design.
Du kan også fejle JavaScript, optimere webstedshastighed og inspicere netværkshastighed. Her er et hurtigt tip, du kan bruge til straks at fremskynde din arbejdsgang. Gå til fanen Kilder, klik på Nyt uddrag og tilføj ofte brugt kode. Navngiv kodestykket, og gem det. Gentag efter behov. Nu kan du få fat i dette kodestykke i stedet for at skrive det igen.
Som enhver god browser udvikler Chrome sig konstant, og hver nye udgivelse bringer nye funktioner. Find ud af, hvad der sker på Chrome-statusplatformen
16. Materialedesign
Udvikling kan ses som Googles foretrukne barn, men uanset hvad du laver, opretter eller bygger, skal det se godt ud og give brugeren en oplevelse, der får dem til at bruge det. Materiale er en nyere tilføjelse til Google-stalden, men er et designsystem, der er modnet til et vigtigt stykke designsæt.
Som ethvert godt designsystem har det sit eget sæt retningslinjer, som du skal se på, inden du træder ind i de mere spændende ting. Få et overblik over, hvordan du bruger forskellige elementer, hvad materialetema er, hvordan du implementerer et tema og brugervenlighedsvejledninger inklusive tilgængelighed. Andetsteds er der et indblik i Material Foundation, som inkluderer nøgleområderne i design som layout, navigation, farve, typografi, lyd, ikonografi, bevægelse og interaktion. Hver kategori afslører sine doser og don'ts, og hvor du skal overveje forsigtighed. For at give en idé om, hvad man kan forvente, tilbyder Layout-kategorien sektioner om forståelse af layout, pixeltæthed, hvordan man arbejder med et responsivt layout inklusive kolonner, tagrender og margener, breakpoints, UI-regioner og afstandsmetoder for blot at nævne nogle få.
Ud over afsnittet Design er komponenter, der giver de fysiske byggesten, der er nødvendige for at skabe et design. Hvad er inkluderet her? Knapper, bannere, kort, dialoger, skillevægge, lister, menuer, statusindikatorer, skydere, snackbarer (dette er korte beskeder om app-processer i bunden af skærmen), faner, tekstfelter og værktøjstip. Uden tvivl en omfattende samling af komponenter.
Og udviklere er ikke glemt, med detaljer og tutorials om, hvordan man bygger til forskellige platforme - Android, iOS, Web og Flutter. Og endelig er der en side dedikeret til en lang række ressourcer, der hjælper med at få dit valgte design til at ske.
Denne artikel opstod oprindeligt i netmagasinet. Køb nummer 326.
