Innehåll
- 01. Fyr
- 02. Polymer
- 03. API: er Explorer
- 04. Fladdra
- 05. Google GitHub
- 06. Puppeteer
- 07. Arbetslåda
- 08. Codelabs
- 09. Färgverktyg
- 10. Design Sprints
- 11. People + AI Guidebook
- 12. Google-assistent
- 13. PageSpeed Insights
- 14. AMP på Google
- 15. Google DevTools
- 16. Materialdesign
Att arbeta på webben innebär vanligtvis att du kommer att arbeta med Google i någon form eller form. Och med tanke på att Google Chrome är gator före tävlingen, måste designers och utvecklare tänka på hur deras projekt kommer att fungera med webbläsaren. Hur kommer det att se ut? Vilken teknik stöder den, hur säker är den och hur kommer den att fungera?
Lyckligtvis tillhandahåller Chrome verktyg för att säkerställa att varje webbplats eller app blir som bäst. DevTools gör det möjligt för designers och utvecklare att få insikt i en webbsida: du kan manipulera DOM, kontrollera CSS, experimentera med design med live-redigering, felsöka JavaScript och kontrollera prestanda. (Se mer om hur du använder dessa Googles webbverktyg här, och om du börjar från början, se vår lista över de bästa webbbyggarna).
Men Google erbjuder mer än bara webbläsaren. Den har verktyg och resurser som hjälper nästan alla aspekter av ditt design- och utvecklingsliv. Vill du veta hur du kan förbättra prestanda? Fyren är här för att hjälpa till. Vill du bygga mobila webbplatser med bättre prestanda? Hälsa sedan på AMP. Vill du bygga vackra PWA? Då är Flutter, Material Design och Workbox redo att komma in.
Det fina med att använda Googles verktyg, resurser, bibliotek och ramar är att du vet att de kommer att fungera bra med Chrome-webbläsaren - den mest populära webbläsaren på planeten. För fler verktyg, se vår sammanfattning av webbdesignverktyg.
01. Fyr
Prestanda är en nyckelfaktor för en webbplats framgång och Lighthouse är Googles verktyg för att förbättra kvaliteten på webbsidor (rätt webbhotell hjälper också). Så hur använder du Lighthouse och vad kan det göra? I sin enklaste form kan du köra fyr från fliken granskningar och välja ett urval av alternativ inklusive skrivbord eller mobil, förutom kryssrutor för prestanda, tillgänglighet och SEO, för att generera en slutrapport med föreslagna förbättringar.
02. Polymer
Polymer är känt för sitt arbete med webbkomponenter men projektet har nu utvidgat sin repertoar för att omfatta en samling bibliotek, verktyg och standarder. Vad ingår? LitElement är en redigerare som gör det enkelt att definiera webbkomponenter, medan lit-html är ett HTML-mallbibliotek som gör det möjligt för användare att skriva nästa generations HTML-mallar i JS. Dessutom hittar du också ett PWA-startpaket, det ursprungliga polymerbiblioteket och uppsättningar webbkomponenter.
03. API: er Explorer
Google har ett stort bibliotek med API: er tillgängliga för utvecklare, men det är ingen enkel uppgift att hitta det du behöver. Det är här Googles API: er Explorer går in för att erbjuda en hjälpande hand. Det finns en lång lista som kan rullas igenom, men för snabbare åtkomst finns det en sökruta för att filtrera API-listan. Varje post länkar till en referenssida med mer information om hur man använder API: et.
04. Fladdra
Om du vill bygga snygga applikationer för mobil, webb och skrivbord från en enda kodbas kan Flutter vara något för dig. Webbplatsen är en fullständig referens till att arbeta med och bygga med Flutter. Har du inte en aning om vad jag ska göra? Dokumenten tar en användare från installation till skapelse, assisterad av massor av exempel och handledning.
05. Google GitHub
Som de flesta kommer att veta är GitHub värdplattform / förvar för att lagra och dela kod och filer. Och lyckligtvis har Google sin egen plats på plattformen med över 260 förvar att sikta igenom. Använd filtret för att minska din söktid och komma närmare förvaret du vill spela med eller bidra till.
06. Puppeteer
Inbyggd nod, Puppeteer erbjuder ett API på hög nivå som gör att du kan komma åt headless Chrome - effektivt Chrome utan användargränssnittet, som utvecklare sedan kan styra via kommandoraden. Så vad kan du göra med Puppeteer? Några alternativ är tillgängliga för att skapa skärmdumpar och PDF-filer på sidor, automatisera formulärinlämning och skapa en automatiserad testmiljö.
07. Arbetslåda
Om du vill bygga en PWA är det här en utmärkt utgångspunkt. Workbox tillhandahåller en samling JavaScript-bibliotek för att lägga till offline-support till webbappar. Ett urval av fördjupade guider visar hur man skapar och registrerar en servicearbetarfil, ruttförfrågningar, använder plugins och använder bundlers med Workbox. Och det finns också en uppsättning exempelcachestrategier att kolla in.
08. Codelabs
Behöver du praktisk vägledning för en Google-produkt? Codelabs ger "en guidad, handledning, praktisk kodningsupplevelse". Webbplatsen är snyggt uppdelad i kategorier och evenemang, vilket gör det snabbt och enkelt att hitta vad du vill ha. Den inkluderar Analytics, Android, Assistant, augmented reality, Flutter, G Suite, Search, TensorFlow och virtual reality. Välj ett alternativ och få koden och anvisningarna du behöver för att bygga små applikationer.
09. Färgverktyg
Color Tool är ett enkelt verktyg som gör att du kan skapa, dela och tillämpa en palett förutom att kontrollera tillgänglighet. Användare kan välja en fördefinierad palett från materialpaletten. Välj bara en färg och använd den sedan i det primära färgschemat, växla till det sekundära alternativet och välj igen. Välj slutligen textfärger för båda scheman. Alternativt växla till Anpassad för att välja dina färger. Byt sedan till tillgänglighet för att kontrollera att allt är bra innan du äntligen exporterar paletten.
10. Design Sprints
Design Sprint Kit är för dem som lär sig att delta i eller köra designsprints. Det ser ut att täcka alla kunskapsbaser, från nybörjare till erfarna sprintlättare. Lär dig mer om metoden eller hoppa rakt in i planeringsfasen, inklusive att skriva briefor, samla in data och forskning, samt vad du ska göra efter sprinten. Innehåller också en mängd resurser som verktyg, mallar, recept och möjligheten att skicka in din egen metod. Du behöver troligen någonstans för att lagra och dela resurser så se till att ditt molnlagringsval är på plats.
11. People + AI Guidebook
Den här guiden är arbetet med People + AI Research-initiativet på Google och ser ut att erbjuda hjälp till dem som vill bygga mänskligt centrerade AI-produkter. Den omfattande guideboken är uppdelad i sex kapitel som täcker användarnas behov, datainsamling och utvärdering, mentala modeller, förtroende, feedback och graciöst misslyckande. Varje kapitel åtföljs av övningar, arbetsblad och de verktyg och resurser som behövs för att det ska ske.
12. Google-assistent
Detta är Google Assistents utvecklarplattform som erbjuder en guide om hur du integrerar ditt innehåll och dina tjänster med Google Assistant. Det visar dig hur du utökar din mobilapp, presenterar innehåll på riktiga sätt för sökning och assistent, kontrolllampor, kaffemaskiner och andra enheter runt hemmet och bygger röst- och visuella upplevelser för smarta högtalare, skärmar och telefoner.
13. PageSpeed Insights
PageSpeed Insights analyserar webbinnehåll och ger sedan förslag på hur du kan ladda det snabbare. Lägg bara till en URL, tryck på Analysera-knappen och vänta på att magin ska hända. Kontrollera Docs för att få en bättre inblick i hur PageSpeed API fungerar och hur du börjar använda det.
14. AMP på Google
AMP är Googles verktyg för att skapa snabbt laddade mobilsidor som (förhoppningsvis) kommer till toppen av sökrankningen. Lär dig hur du skapar snabba, första användarwebbplatser, integrerar AMP i Googles produkter, använder Google AMP-cache för att göra AMP-sidor snabbare och tjäna pengar på AMP-sidor med andra Google-produkter.
15. Google DevTools
Varje designer och utvecklare vet (eller åtminstone borde veta) att Chrome kommer med en uppsättning verktyg inbyggda direkt i webbläsaren. Chromes DevTools är perfekta för att inspektera elementen som utgör en sida, kontrollera CSS, redigera sidor i farten och mycket mer.
Fliken Elements är introduktionen till DevTools. Den visar HTML-koden som utgör den valda sidan. Få en inblick i egenskaperna för varje div eller tagg från den valda sidan och börja redigera live. Detta är perfekt för att experimentera med mönster. Kontrollera layouten - oavsett om du använder Flexbox eller Grid - och titta på relaterade teckensnitt med exempel och granska animationer.
På andra håll kan du visa och ändra CSS. Fliken Stilar på panelen Element visar de CSS-regler som tillämpas på det för närvarande valda elementet i DOM-trädet. Slå på och av egenskaper (eller lägg till nya värden) för att experimentera med mönster. Detta är det perfekta verktyget för att se till att allt fungerar som förväntat innan du ändrar live-designen.
Du kan också felsöka JavaScript, optimera webbplatsens hastighet och inspektera nätverkshastigheten. Här är ett snabbt tips som du kan använda för att omedelbart påskynda ditt arbetsflöde. Gå till fliken Källor, klicka på Nytt utdrag och lägg till kod som används ofta. Namnge kodavsnittet och spara. Upprepa efter behov. Nu kan du ta tag i det här kodavsnittet istället för att skriva det igen.
Som alla bra webbläsare utvecklas Chrome ständigt och varje ny version ger nya funktioner. Ta reda på vad som händer på Chrome-plattformen
16. Materialdesign
Utveckling kan ses som Googles favoritbarn, men vad du än gör, skapar eller bygger måste det se bra ut och ge användaren en upplevelse som får dem att vilja använda den. Material är ett nyare tillskott till Googles stabila men är ett designsystem som har mognat till en viktig del av designpaketet.
Liksom alla bra designsystem har den en egen uppsättning riktlinjer som du måste titta på innan du går in i de mer spännande grejerna. Få en översikt över hur man använder olika element, vad materialtema är, hur man implementerar ett tema och användarguider inklusive tillgänglighet. På andra håll finns en inblick i Material Foundation, som inkluderar de viktigaste områdena för design som layout, navigering, färg, typografi, ljud, ikonografi, rörelse och interaktion. Varje kategori avslöjar sina doser och don'ts och var du bör överväga försiktighet. För att ge en uppfattning om vad du kan förvänta dig, erbjuder Layout-kategorin avsnitt om förståelse av layout, pixeldensitet, hur man arbetar med en responsiv layout inklusive kolumner, rännor och marginaler, brytpunkter, UI-regioner och avståndsmetoder för att bara nämna några.
Utöver avsnittet Design finns komponenter, som tillhandahåller de fysiska byggstenar som behövs för att skapa en design. Vad ingår här? Knappar, banners, kort, dialoger, avdelare, listor, menyer, förloppsindikatorer, skjutreglage, mellanmål (dessa är korta meddelanden om appprocesser längst ner på skärmen), flikar, textfält och verktygstips. Utan tvekan en omfattande samling av komponenter.
Och utvecklare har inte glömts bort, med detaljer och handledning om hur man bygger för olika plattformar - Android, iOS, Web och Flutter. Och slutligen finns det en sida dedikerad till en mängd resurser som hjälper dig att få din valda design att hända.
Den här artikeln dök ursprungligen upp i tidningen net Köp nummer 326.
