Efni.
- 01. Vitinn
- 02. Pólýmer
- 03. Forritaskil API
- 04. Blakta
- 05. Google GitHub
- 06. Brúðuleikari
- 07. Vinnukassi
- 08. Codelabs
- 09. Litatól
- 10. Hönnunarsprettur
- 11. Fólk + AI leiðbeiningar
- 12. Google aðstoðarmaður
- 13. PageSpeed Insights
- 14. AMP á Google
- 15. Google DevTools
- 16. Efnishönnun
Að vinna á vefnum þýðir venjulega að þú munt vinna með Google í einhverju formi eða formi. Og þar sem Google Chrome er götum á undan keppninni þurfa hönnuðir og verktaki að hugsa um hvernig verkefni þeirra muni virka með vafranum. Hvernig mun það líta út? Hvaða tækni styður það, hversu öruggt er það og hvernig mun það standa sig?
Sem betur fer veitir Chrome verkfæri til að tryggja að hver síða eða forrit verði sem best. DevTools gera hönnuðum og hönnuðum kleift að öðlast innsýn inn á vefsíðu: þú getur unnið með DOM, athugað CSS, gert tilraunir með hönnun með lifandi klippingu, kembt JavaScript og athugað árangur. (Sjá meira um hvernig á að nota þessi Google vefverkfæri hér og ef þú ert að byrja frá grunni sjáðu líka listann okkar yfir helstu vefgerðarmenn).
En Google býður upp á meira en bara vafrann. Það hefur verkfæri og úrræði til að aðstoða næstum alla þætti í hönnun og þroska lífi þínu. Viltu vita hvernig á að bæta árangur? Vitinn er hér til að hjálpa. Viltu byggja farsímasíður sem skila betri árangri? Þá er að heilsa AMP. Ertu að leita að því að byggja falleg PWA? Þá eru Flutter, Material Design og Workbox tilbúin til að stíga inn.
Fegurðin við notkun Google verkfæra, auðlinda, bókasafna og ramma er að þú veist að þau munu virka vel með Chrome vafranum - vinsælasta vafranum á jörðinni. Fyrir fleiri verkfæri, sjá samantekt á verkfærum vefhönnunar.
01. Vitinn
Árangur er lykilatriði í velgengni vefsíðu og Lighthouse er tæki Google til að bæta gæði vefsíðna (rétta vefþjónustan hjálpar líka). Svo hvernig notar maður Lighthouse og hvað getur það gert? Í einföldustu mynd er hægt að keyra Lighthouse af endurskoðunarflipanum og velja úrval af valkostum, þar á meðal skjáborði eða farsíma, auk þess að merkja við reitina fyrir frammistöðu, aðgengi og SEO, til að búa til lokaskýrslu með ráðlagðum úrbótum.
02. Pólýmer
Pólýmer er vel þekkt fyrir vinnu sína við vefhluta en verkefnið hefur nú aukið efnisskrá sína til að faðma safn bókasafna, tækja og staðla. Hvað er innifalið? LitElement er ritstjóri sem gerir það auðvelt að skilgreina vefhluta en lit-html er HTML sniðmátasafn sem gerir notendum kleift að skrifa næstu kynslóð HTML sniðmát í JS. Að auki finnur þú einnig PWA startpakkann, upprunalega fjölliða bókasafnið og sett af vefhlutum.
03. Forritaskil API
Google hefur mikið safn af forritaskilum sem eru í boði fyrir hönnuði en það er ekkert auðvelt að finna það sem þú þarft. Þetta er þar sem forritaskil Google frá Google stíga fram til að bjóða fram hjálparhönd. Það er langur listi sem hægt er að fletta í gegnum, en til að fá skjótari aðgang er til leitarreitur til að sía API listann. Hver færsla tengist tilvísunarsíðu með frekari upplýsingum um notkun API.
04. Blakta
Ef þú ert að leita að því að byggja upp falleg forrit fyrir farsíma, vef og skjáborð úr einum merkjagrunni þá gæti Flutter verið fyrir þig. Síðan er fullkomin tilvísun í að vinna með og byggja með Flutter. Hefur þú ekki hugmynd um hvað ég á að gera? Skjölin taka notanda frá uppsetningu til sköpunar, aðstoðað við nóg af sýnum og námskeiðum.
05. Google GitHub
Eins og flestir vita er GitHub hýsingarvettvangur / geymsla til að geyma og deila kóða og skrám. Og sem betur fer hefur Google sinn stað á vettvangnum með yfir 260 geymslur til að sigta í gegnum. Notaðu síuna til að stytta leitartímann þinn og komast nær geymslunni sem þú vilt spila með eða stuðla að.
06. Brúðuleikari
Innbyggður hnútur, Puppeteer býður upp á API á háu stigi sem gerir þér kleift að fá aðgang að hauslausum Chrome - á áhrifaríkan hátt Chrome án HÍ, sem verktaki getur síðan stjórnað í gegnum skipanalínuna. Svo hvað er hægt að gera með Puppeteer? Nokkrir möguleikar eru í boði til að búa til skjámyndir og PDF skjöl á síðum, gera sjálfvirkan skil á eyðublöðum og búa til sjálfvirkt prófunarumhverfi.
07. Vinnukassi
Ef þú ert að leita að því að byggja upp PWA þá er þetta frábær upphafspunktur. Vinnukassi býður upp á safn JavaScript bókasafna til að bæta stuðningi utan nets við vefforrit. Úrval ítarlegra leiðbeininga sýnir fram á hvernig á að búa til og skrá þjónustu starfsmannaskrá, leiðbeiðnir, nota viðbætur og nota bundlers með Workbox. Og það er líka sett dæmi um skyndiminni til að skoða.
08. Codelabs
Þarftu hagnýta leiðbeiningar fyrir Google vöru? Codelabs býður upp á „leiðsögn, kennslu, reynslu af kóðun“. Síðan er snyrtilega sundurliðuð í flokka og viðburði, sem gerir það fljótt og auðvelt að finna það sem þú vilt. Það felur í sér Analytics, Android, Aðstoðarmann, aukinn veruleika, Flutter, G Suite, Search, TensorFlow og sýndarveruleika. Veldu valkost og fáðu kóðann og leiðbeiningarnar sem þú þarft til að byggja upp lítil forrit.
09. Litatól
Litatól er einfalt tól sem gerir þér kleift að búa til, deila og nota litatöflu auk þess að athuga aðgengi. Notendur geta valið fyrirfram skilgreinda litatöflu úr efnispallettunni. Veldu einfaldlega lit og notaðu hann síðan í aðal litasamsetningu, skiptu yfir í aukavalkost og veldu aftur. Að lokum skaltu velja textalit fyrir bæði kerfin. Að öðrum kosti, skiptu yfir í Sérsniðin til að velja litina þína. Skiptu síðan yfir í Aðgengi til að athuga að allt sé gott áður en loksins er flutt út litatöflu.
10. Hönnunarsprettur
Design Sprint Kit er fyrir þá sem eru að læra að taka þátt í eða hlaupa hönnunarspretti. Það lítur út fyrir að ná til allra þekkingargrunna, frá fyrstu tímamönnum til reyndra leiðbeinenda í sprettum. Lærðu um aðferðafræðina eða hoppðu beint inn í skipulagsstigið, þar á meðal að skrifa stuttbækur, afla gagna og rannsókna, sem og hvað á að gera eftir sprett. Inniheldur einnig fjölda auðlinda eins og verkfæri, sniðmát, uppskriftir og möguleika á að leggja fram þína eigin aðferð. Einnig þarftu líklega einhvers staðar til að geyma og deila auðlindum svo vertu viss um að geymsluval þitt í skýinu sé á punktinum.
11. Fólk + AI leiðbeiningar
Þessi leiðarvísir er verk People + AI rannsóknar átaksverkefnisins hjá Google og leitast við að bjóða þeim aðstoð sem vilja byggja AI-miðaðar AI vörur. Alhliða leiðarvísirinn er skipt í sex kafla sem fjalla um þarfir notenda, gagnasöfnun og mat, hugarfar, traust, endurgjöf og tignarlegt bilun. Hverjum kafla fylgja æfingar, vinnublöð og verkfæri og úrræði sem þarf til að láta það gerast.
12. Google aðstoðarmaður
Þetta er verktaki vettvangur Google aðstoðarmanns og býður upp á leiðbeiningar um hvernig á að samþætta efni þitt og þjónustu við Google aðstoðarmanninn. Það sýnir þér hvernig á að auka farsímaforritið þitt, setja fram efni á ríkan hátt fyrir leit og aðstoðarmann, stjórna ljósum, kaffivélum og öðrum tækjum um heimili og byggja upp radd- og sjónupplifun fyrir snjalla hátalara, skjái og síma.
13. PageSpeed Insights
PageSpeed Insights greinir efni á vefnum og býður síðan uppá tillögur um hvernig hægt er að láta það hlaða hraðar. Bættu einfaldlega við vefslóð, ýttu á greina hnappinn og bíddu eftir að töfrarnir gerast. Athugaðu skjölin til að fá betri innsýn í hvernig API API PageSpeed virkar og hvernig á að byrja að nota það.
14. AMP á Google
AMP er tæki Google til að búa til hraðhlaðnar farsímasíður sem (vonandi) komast ofar á fremstu röð. Lærðu hvernig á að búa til skjótar, fyrstu notendur, samþætta AMP í Google vörum, nota Google AMP skyndiminni til að gera AMP síður hraðar og afla tekna með AMP síður með öðrum Google vörum.
15. Google DevTools
Sérhver hönnuður og verktaki veit (eða ætti að minnsta kosti að vita) að Chrome kemur með verkfærasett sem er innbyggt beint í vafrann. DevTools Chrome eru tilvalin til að skoða þá þætti sem mynda síðu, athuga CSS, breyta síðum á flugu og margt fleira.
Elements flipinn er kynning á DevTools. Það birtir HTML kóðann sem samanstendur af völdum síðu. Fáðu innsýn í eiginleika hvers div eða merkis af völdum síðu og byrjaðu að breyta í beinni. Þetta er fullkomið til að gera tilraunir með hönnun. Athugaðu skipulagið - hvort sem þú notar Flexbox eða Grid - og skoðaðu tengd letur með dæmum og skoðaðu hreyfimyndir.
Annars staðar er hægt að skoða og breyta CSS. Stíll flipinn á Elements spjaldinu sýnir CSS reglurnar sem eru notaðar á þann þátt sem er valinn í DOM trénu. Kveiktu og slökktu á eiginleikum (eða bættu við nýjum gildum) til að gera tilraunir með hönnun. Þetta er hið fullkomna tæki til að tryggja að allt virki eins og búist var við áður en einhverjum breytingum er beitt á lifandi hönnuninni.
Þú getur einnig kemba JavaScript, hagræða vefsíðuhraða og skoða nethraða. Hér er stutt ábending sem þú getur notað til að flýta strax fyrir vinnuflæðinu. Farðu á flipann Heimildir, smelltu á Nýja bút og bættu við kóða sem þú notar oft. Gefðu kóðabútnum nafn og vistaðu. Endurtaktu eftir þörfum. Nú getur þú gripið þennan kóðabút í stað þess að skrifa hann aftur.
Eins og allir góðir vafrar, er Chrome í stöðugri þróun og hver ný útgáfa færir nýja eiginleika. Finndu hvað er að gerast á Chrome pallinum
16. Efnishönnun
Þróun má líta á sem barn sem Google er í vil en hvað sem þú ert að búa til, búa til eða byggja, þá þarf það að líta vel út og veita notandanum upplifun sem fær hann til að vilja nota það. Efni er nýleg viðbót við Google hesthúsið en er hönnunarkerfi sem hefur þroskast í mikilvægt stykki af hönnunarbúnaði.
Eins og hvert gott hönnunarkerfi hefur það sitt eigið leiðbeiningarefni sem þú þarft að skoða áður en þú ferð inn í meira spennandi efni. Fáðu yfirlit yfir hvernig á að nota mismunandi þætti, hvað Efnisþema er, hvernig á að útfæra þema og nothæfar leiðbeiningar þar með talið aðgengi Annars staðar er innsýn í Material Foundation, sem felur í sér lykilsvið hönnunar eins og skipulag, siglingar, lit, leturfræði, hljóð, táknmynd, hreyfingu og samspil. Hver flokkur sýnir skammta sína og má ekki og hvar þú ættir að huga að varúð. Til að gefa hugmynd um við hverju er að búast býður Layout flokknum upp á kafla um skilning á skipulagi, pixlaþéttleika, hvernig vinna má með móttækilegu skipulagi þar á meðal dálkum, þakrennum og spássíum, brotpunktum, HÍ svæðum og bilaðferðum svo fátt eitt sé nefnt.
Handan við hönnunarhlutann er hluti, sem veitir líkamlega byggingarefni sem þarf til að búa til hönnun. Hvað er hér innifalið? Hnappar, borðar, kort, samræður, skiptir, listar, valmyndir, framvinduvísir, rennibrautir, snakkstikur (þetta eru stutt skilaboð um ferli forrita neðst á skjánum), flipa, textareit og verkfæri. Vafalaust yfirgripsmikið safn íhluta.
Og forriturum hefur ekki gleymst, með smáatriðum og leiðbeiningum um hvernig á að byggja fyrir mismunandi kerfi - Android, iOS, vefur og Flutter. Og að lokum er til síða sem er tileinkuð fjölda auðlinda sem hjálpa til við að láta hönnunina sem þú valdir gerast.
Þessi grein birtist upphaflega í net tímaritinu. 326. tölublað.
