Sisu
- 01. Tuletorn
- 02. Polümeer
- 03. API-de uurija
- 04. laperdus
- 05. Google GitHub
- 06. Kutsikas
- 07. Töökast
- 08. Koodilaborid
- 09. Värvitööriist
- 10. Kujundus Sprints
- 11. Inimesed + tehisintellekti juhend
- 12. Google'i assistent
- 13. PageSpeed Insights
- 14. AMP Google'is
- 15. Google DevTools
- 16. Materjalikujundus
Veebis töötamine tähendab tavaliselt, et töötate Google'iga mingis vormis või vormis. Ja kuna Google Chrome on konkurentidest tänavatel ees, peavad disainerid ja arendajad mõtlema, kuidas nende projekt brauseriga töötab. Kuidas see välja näeb? Milliseid tehnoloogiaid see toetab, kui turvaline see on ja kuidas see toimib?
Õnneks pakub Chrome tööriistu selle tagamiseks, et mõni sait või rakendus oleks parim. DevTools võimaldab disaineritel ja arendajatel saada ülevaate veebilehest: saate manipuleerida DOM-iga, kontrollida CSS-i, katsetada kujundusi reaalajas redigeerimisega, siluda JavaScripti ja kontrollida jõudlust. (Vaadake lisateavet nende Google'i veebitööriistade kasutamise kohta siit ja kui alustate nullist, vaadake ka meie parimate veebiehitajate loendit).
Kuid Google pakub mitte ainult brauserit. Sellel on tööriistad ja ressursid, mis aitavad peaaegu kõiki teie disaini- ja arendustegevuse aspekte. Kas soovite teada, kuidas jõudlust parandada? Tuletorn on siin abiks. Kas soovite luua paremini toimivaid mobiilisaite? Siis ütle AMP-le tere. Kas soovite ehitada ilusaid PWA-sid? Siis on Flutter, Material Design ja Workbox valmis astuma.
Google'i tööriistade, ressursside, teekide ja raamistike kasutamise ilu on see, et teate, et need töötavad hästi Chrome'i brauseriga - planeedi populaarseima brauseriga. Rohkem tööriistu leiate meie veebidisaini tööriistade kokkuvõttest.
01. Tuletorn
Toimivus on saidi edu võtmetegur ja Lighthouse on Google'i tööriist veebilehtede kvaliteedi parandamiseks (abiks on ka õige veebimajutusteenus). Kuidas siis tuletorni kasutada ja mida see teha saab? Lihtsamas vormis saate käivitada tuletorni vahekaardilt Auditid ja valida soovitatud täiustustega lõpparuande loomiseks lisaks jõudlusele, juurdepääsetavusele ja SEO-le märkeruutude vahel ka töölaua või mobiilse valiku.
02. Polümeer
Polymer on tuntud veebikomponentidega tehtava töö poolest, kuid projekt on nüüd oma repertuaari laiendanud, hõlmates kogu raamatukogusid, tööriistu ja standardeid. Mida see sisaldab? LitElement on redaktor, mis hõlbustab veebikomponentide määratlemist, samas kui lit-html on HTML-i mallide kogu, mis võimaldab kasutajatel järgmise põlvkonna HTML-malle JS-is kirjutada. Lisaks leiate ka PWA Starter komplekti, originaalse Polymeri teegi ja veebikomponentide komplektid.
03. API-de uurija
Google'il on arendajatele kättesaadav lai API-de kogu, kuid vajaliku leidmine pole lihtne ülesanne. See on koht, kus Google'i API Explorer abistab oma kätt. Seal on pikk nimekiri, mida saab sirvida, kuid kiiremaks juurdepääsuks on API loendi filtreerimiseks otsingukast. Iga kirje lingib viite lehele, kus on üksikasjalikum teave API kasutamise kohta.
04. laperdus
Kui soovite ühest koodibaasist luua nägusaid rakendusi mobiilseadmetele, veebile ja töölauale, võiks Flutter olla teie jaoks. See sait on täielik viide Flutteriga töötamisele ja selle ehitamisele. Kas teil pole aimugi, mida teha? Dokumendid viivad kasutaja installimisest loomiseni, abiks on palju proove ja õpetusi.
05. Google GitHub
Nagu enamik teab, on GitHub hostimisplatvorm / hoidla koodi ja failide salvestamiseks ja jagamiseks. Ja õnneks on Google'il platvormil oma koht, kus on üle 260 hoidla. Kasutage filtrit, et kärpida oma otsimisaega ja jõuda lähemale hoidlale, milles soovite mängida või milles osaleda.
06. Kutsikas
Sõlmesse sisse ehitatud Puppeteer pakub kõrgetasemelist API-d, mis võimaldab teil pääseda peata Chrome'i juurde - tõhusalt ilma kasutajaliideseta Chrome'i, mida arendajad saavad seejärel käsurea kaudu juhtida. Mida siis Puppeteeriga teha saab? Lehtede ekraanipiltide ja PDF-ide loomiseks, vormide esitamise automatiseerimiseks ja automatiseeritud testimiskeskkonna loomiseks on saadaval mõned võimalused.
07. Töökast
Kui soovite ehitada PWA-d, on see suurepärane lähtepunkt. Workbox pakub JavaScripti teekide kogu veebirakenduste võrguühenduseta toe lisamiseks. Valik põhjalikke juhendeid näitab, kuidas luua ja registreerida hooldustöötaja faili, marsruutida taotlusi, kasutada pistikprogramme ja kasutada koos Workboxiga komplekte. Kontrollimiseks on olemas ka vahemälustrateegiate näide.
08. Koodilaborid
Kas vajate Google'i toote kohta praktilisi juhiseid? Codelabs pakub "juhendatud, juhendavat, praktilist kodeerimiskogemust". Sait on kenasti jaotatud kategooriatesse ja sündmustesse, mis muudab soovitud leidmise kiireks ja hõlpsaks. See sisaldab Analyticsi, Androidi, assistenti, liitreaalsust, Flutterit, G Suite'i, otsingut, TensorFlow'i ja virtuaalset reaalsust. Valige suvand ja hankige kood ja juhised, mida vajate väikeste rakenduste loomiseks.
09. Värvitööriist
Värvitööriist on lihtne tööriist, mis võimaldab lisaks juurdepääsetavuse kontrollimisele ka paletti luua, jagada ja rakendada. Kasutajad saavad materjali paletist valida eelnevalt määratletud paleti. Valige lihtsalt värv ja rakendage see seejärel põhivärviskeemile, lülitage teise valiku juurde ja valige uuesti. Lõpuks valige mõlema skeemi jaoks tekstivärvid. Teise võimalusena saate oma värvide valimiseks lülituda valikule Kohandatud. Seejärel lülitage Accessibility, et kontrollida, kas kõik on hea, enne kui lõpuks palett eksportida.
10. Kujundus Sprints
Design Sprinti komplekt on mõeldud neile, kes õpivad disainiprintides osalema või neid jooksma. See hõlmab kõiki teadmistebaase, alustades esmakordsetest kuni kogenud sprindi juhendajateni. Siit saate teada metoodikast või liikuge otse kavandamisetappi, sealhulgas lühikeste kirjutiste kirjutamine, andmete ja uuringute kogumine ning ka see, mida teha pärast sprinti. Sisaldab ka hulgaliselt ressursse, näiteks tööriistu, malle, retsepte ja võimalust oma meetod esitada. Samuti peate tõenäoliselt kuskil ressursse hoidma ja jagama, nii et veenduge, et pilvemälu valik oleks täpne.
11. Inimesed + tehisintellekti juhend
See juhend on Google'i inimeste + tehisintellekti uurimisalgatuse töö ja selle eesmärk on pakkuda abi neile, kes soovivad ehitada inimkeskset tehisintellekti tooteid. Põhjalik juhend on jagatud kuueks peatükiks, mis hõlmavad kasutajate vajadusi, andmete kogumist ja hindamist, mentaalseid mudeleid, usaldust, tagasisidet ja graatsilisi läbikukkumisi. Iga peatükiga kaasnevad harjutused, töölehed ning tööriistad ja ressursid, mis on vajalikud selle elluviimiseks.
12. Google'i assistent
See on Google'i assistendi arendusplatvorm, mis pakub juhiseid oma sisu ja teenuste integreerimiseks Google'i assistendiga. See näitab teile, kuidas oma mobiilirakendust laiendada, sisu otsingu ja assistendi jaoks rikkalikul viisil kuvada, tulesid, kohvimasinaid ja muid seadmeid kodus juhtida ning nutikõlarite, ekraanide ja telefonide jaoks hääl- ja visuaalkogemusi luua.
13. PageSpeed Insights
PageSpeed Insights analüüsib veebisisu ja pakub seejärel soovitusi selle kiiremaks laadimiseks. Lisage lihtsalt URL, vajutage nuppu Analüüs ja oodake, kuni maagia juhtub. Kontrollige dokumente, et saada parem ülevaade sellest, kuidas PageSpeed API töötab ja kuidas seda kasutama hakata.
14. AMP Google'is
AMP on Google'i tööriist kiiresti laaditavate mobiililehtede loomiseks, mis jõuavad (loodetavasti) otsingutulemuste tippu. Siit saate teada, kuidas luua kiireid kasutajate saite, integreerida AMP kõikidesse Google'i toodetesse, kasutada Google AMP-vahemälu, et muuta AMP-lehed kiiremaks ja teenida AMP-lehti teistest Google'i toodetest.
15. Google DevTools
Iga disainer ja arendaja teab (või vähemalt peaks teadma), et Chrome on varustatud tööriistakomplektiga, mis on otse brauserisse sisse ehitatud. Chrome'i DevTools on ideaalne lehe moodustavate elementide kontrollimiseks, CSS-i kontrollimiseks, lehtede lennult muutmiseks ja paljuks muuks.
Vahekaart Elements on DevToolsi sissejuhatus. See kuvab HTML-koodi, mis moodustab valitud lehe. Saate ülevaate valitud lehe iga div või sildi omadustest ja alustage reaalajas muutmist. See sobib suurepäraselt kujundustega katsetamiseks. Kontrollige paigutust - kas kasutate Flexboxi või ruudustikku - ja vaadake seotud fonde koos näidetega ning uurige animatsioone.
Mujal saate CSS-i vaadata ja muuta. Elementide paneeli vahekaardil Stiilid on loetletud CSS-reeglid, mida rakendatakse DOM-puu praegu valitud elemendile. Kujundustega katsetamiseks lülitage omadused sisse ja välja (või lisage uusi väärtusi). See on ideaalne tööriist, et kõik toimiks ootuspäraselt enne muudatuste rakendamist reaalajas kujunduses.
Samuti saate JavaScripti siluda, optimeerida veebisaidi kiirust ja kontrollida võrgu kiirust. Siin on kiire näpunäide, mille abil saate oma töövoogu kohe kiirendada. Minge vahekaardile Allikad, klõpsake nuppu Uus koodilõik ja lisage sageli kasutatav kood. Nimetage koodilõik ja salvestage. Korrake vastavalt vajadusele. Nüüd saate selle koodijupi uuesti kirjutamise asemel haarata.
Nagu iga hea brauser, areneb ka Chrome pidevalt ja iga uus väljaanne toob uusi funktsioone. Siit saate teada, mis toimub Chrome'i olekuplatvormil
16. Materjalikujundus
Arengut võib pidada Google'i eelistatud lapseks, kuid olenemata sellest, mida teete, loote või ehitate, peab see hea välja nägema ja andma kasutajale kogemuse, mis sunnib teda seda kasutama. Materjal on Google'i talli uuem täiendus, kuid see on disainisüsteem, mis on küpsenud ülitähtsaks kujunduskomplektiks.
Nagu igal heal disainisüsteemil, on ka sellel oma suunised, mida peate enne põnevamate asjade juurde asumist vaatama. Saate ülevaate, kuidas erinevaid elemente kasutada, mis on materjali teema, kuidas rakendada teemat ja kasutamisjuhendeid, sealhulgas juurdepääsetavust. Mujal on ülevaade Material Foundationist, mis hõlmab disaini võtmevaldkondi nagu küljendus, navigeerimine, värv, tüpograafia, heli, ikonograafia, liikumine ja suhtlus. Iga kategooria näitab oma toiminguid ja keelde ning seda, kus peaksite kaaluma ettevaatlikkust. Et anda aimu, mida oodata, pakub kategooria Paigutus jaotisi paigutuse mõistmisest, pikslitihedusest, reageeriva paigutusega töötamisest, sealhulgas veerud, vihmaveerennid ja veerised, murdepunktid, kasutajaliidese piirkonnad ja vaheviisid.
Jaotisest Kujundus on Komponendid, mis pakub disaini loomiseks vajalikke füüsilisi ehitusplokke. Mis siin sisaldub? Nupud, ribareklaamid, kaardid, dialoogid, eraldajad, loendid, menüüd, edenemisnäitajad, liugurid, suupistebaarid (need on lühisõnumid rakenduse protsesside kohta ekraani allosas), vahelehed, tekstiväljad ja tööriistavihjed. Kahtlemata põhjalik komponentide kogu.
Ja arendajaid pole unustatud, koos üksikasjade ja õpetustega, kuidas ehitada erinevatele platvormidele - Androidile, iOS-ile, Veebile ja Flutterile. Ja lõpuks on üks leht, mis on pühendatud paljudele ressurssidele, mis aitavad teie valitud kujundust ellu viia.
See artikkel ilmus algselt netiajakirjas. Osta väljaanne 326.
