Saturs
- 01. Bāka
- 02. Polimērs
- 03. API Explorer
- 04. Plandīšanās
- 05. Google GitHub
- 06. Lellīte
- 07. Darba kaste
- 08. Codelabs
- 09. Krāsu rīks
- 10. Dizaina sprints
- 11. Cilvēki + AI ceļvedis
- 12. Google palīgs
- 13. PageSpeed Insights
- 14. AMP Google tīklā
- 15. Google DevTools
- 16. Materiālu dizains
Darbs tīmeklī parasti nozīmē, ka ar Google strādāsit kādā formā vai formā. Tā kā Google Chrome ir ielas pirms konkursa, dizaineriem un izstrādātājiem ir jādomā par to, kā viņu projekts darbosies ar pārlūku. Kā tas izskatīsies? Kādas tehnoloģijas tas atbalsta, cik drošs tas ir un kā tas darbosies?
Par laimi, Chrome nodrošina rīkus, lai nodrošinātu, ka jebkura vietne vai lietotne ir vislabākā. DevTools ļauj dizaineriem un izstrādātājiem gūt ieskatu tīmekļa lapā: jūs varat manipulēt ar DOM, pārbaudīt CSS, eksperimentēt ar dizainu ar tiešo rediģēšanu, atkļūdot JavaScript un pārbaudīt veiktspēju. (Skatiet vairāk par to, kā izmantot šos Google tīmekļa rīkus, šeit un, ja sākat no jauna, skatiet arī mūsu top tīmekļa veidotāju sarakstu).
Bet Google piedāvā ne tikai pārlūkprogrammu. Tam ir rīki un resursi, kas palīdz gandrīz visiem jūsu dizaina un attīstības dzīves aspektiem. Vai vēlaties uzzināt, kā uzlabot veiktspēju? Bāka ir šeit, lai palīdzētu. Vai vēlaties izveidot vietnes ar labāku veiktspēju mobilajām ierīcēm? Tad sasveicinieties ar AMP. Vai jūs vēlaties veidot skaistus PWA? Tad Flutter, Material Design un Workbox ir gatavi iesaistīties.
Google rīku, resursu, bibliotēku un ietvaru izmantošanas skaistums ir tas, ka jūs zināt, ka tie labi darbosies ar pārlūku Chrome - populārāko pārlūku uz planētas. Lai iegūtu vairāk rīku, skatiet mūsu tīmekļa dizaina rīku apkopojumu.
01. Bāka
Veiktspēja ir galvenais vietnes panākumu faktors, un Lighthouse ir Google rīks tīmekļa lapu kvalitātes uzlabošanai (palīdzēs arī pareizais tīmekļa mitināšanas pakalpojums). Tātad, kā jūs izmantojat bāku un ko tā var darīt? Visvienkāršākajā formā jūs varat palaist Lighthouse cilnē Audits un izvēlēties no opciju izvēles, ieskaitot darbvirsmu vai mobilo ierīci, papildus veiktspējas, pieejamības un SEO izvēles rūtiņām, lai ģenerētu gala ziņojumu ar ierosinātajiem uzlabojumiem.
02. Polimērs
Polimērs ir plaši pazīstams ar savu darbu ar tīmekļa komponentiem, taču tagad projekts ir paplašinājis repertuāru, iekļaujot tajā bibliotēku, rīku un standartu kolekciju. Kas ir iekļauts? LitElement ir redaktors, kas atvieglo tīmekļa komponentu definēšanu, savukārt lit-html ir HTML veidņu bibliotēka, kas ļauj lietotājiem rakstīt nākamās paaudzes HTML veidnes JS. Turklāt jūs atradīsit arī PWA sākuma komplektu, oriģinālo Polymer bibliotēku un tīmekļa komponentu komplektus.
03. API Explorer
Google izstrādātājiem ir pieejama plaša API bibliotēka, bet atrast vajadzīgo nav viegli. Šeit tiek sniegta palīdzība Google API Explorer. Ir garš saraksts, kuru var ritināt, taču, lai ātrāk piekļūtu, API meklēšanas filtrēšanai ir meklēšanas lodziņš. Katrs ieraksts novirza uz atsauces lapu, kurā ir sīkāka informācija par API izmantošanu.
04. Plandīšanās
Ja jūs vēlaties izveidot izskatīgas mobilajām ierīcēm, tīmeklim un galddatoriem paredzētas lietojumprogrammas no vienas koda bāzes, Flutter varētu būt jums piemērots. Vietne ir pilnīga atsauce uz darbu ar Flutter un tās veidošanu. Vai jums nav ne jausmas, ko darīt? Dokumenti novirza lietotāju no instalēšanas līdz izveidošanai, palīdzot ar daudziem paraugiem un apmācībām.
05. Google GitHub
Kā lielākā daļa zinās, GitHub ir mitināšanas platforma / krātuve kodu un failu glabāšanai un koplietošanai. Par laimi Google platformā ir sava vieta ar vairāk nekā 260 krātuvēm, kuras var izsijāt. Izmantojiet filtru, lai samazinātu meklēšanas laiku un tuvotos krātuvei, kurā vēlaties spēlēt vai piedalīties.
06. Lellīte
Iebūvētais mezglā Puppeteer piedāvā augsta līmeņa API, kas ļauj piekļūt pārlūkam Chrome bez galvas - efektīvi pārlūkam Chrome bez lietotāja saskarnes, kuru izstrādātāji pēc tam var kontrolēt, izmantojot komandrindu. Tātad, ko jūs varat darīt ar Puppeteer? Ir pieejamas dažas iespējas, kā ģenerēt ekrānuzņēmumus un PDF failus, automatizēt veidlapu iesniegšanu un izveidot automatizētu testēšanas vidi.
07. Darba kaste
Ja jūs vēlaties izveidot PWA, tas ir lielisks sākumpunkts. Workbox nodrošina JavaScript bibliotēku kolekciju bezsaistes atbalsta pievienošanai tīmekļa lietotnēm. Padziļinātu ceļvežu izvēle parāda, kā izveidot un reģistrēt pakalpojumu darbinieka failu, maršrutēt pieprasījumus, izmantot spraudņus un izmantot komplektus ar Workbox. Lai pārbaudītu, ir arī kešatmiņas stratēģiju piemēru kopums.
08. Codelabs
Vai jums ir nepieciešami praktiski norādījumi par Google produktu? Codelabs nodrošina “vadītu, pamācošu, praktisku kodēšanas pieredzi”. Vietne ir kārtīgi sadalīta kategorijās un notikumos, tādējādi ātri un viegli atrodot vēlamo. Tas ietver Analytics, Android, Asistentu, paplašināto realitāti, Flutter, G Suite, Search, TensorFlow un virtuālo realitāti. Atlasiet opciju un iegūstiet kodu un norādes, kas nepieciešamas, lai izveidotu mazas lietojumprogrammas.
09. Krāsu rīks
Krāsu rīks ir vienkāršs rīks, kas papildus pieejamības pārbaudei ļauj izveidot, koplietot un lietot paleti. Lietotāji var izvēlēties iepriekš noteiktu paleti no materiāla paletes. Vienkārši izvēlieties krāsu un pēc tam izmantojiet to primārajai krāsu shēmai, pārslēdzieties uz sekundāro opciju un izvēlieties vēlreiz. Visbeidzot, izvēlieties teksta krāsas abām shēmām. Varat arī pārslēgties uz Custom, lai izvēlētos krāsas. Pēc tam pārslēdzieties uz Pieejamība, lai pārbaudītu, vai viss ir labs, pirms beidzot eksportējat paleti.
10. Dizaina sprints
Dizaina sprinta komplekts ir paredzēts tiem, kuri mācās piedalīties dizaina sprintos vai tos vadīt. Tas, šķiet, aptver visas zināšanu bāzes, sākot no pirmreizējiem līdz pieredzējušiem sprinta vadītājiem. Uzziniet par metodoloģiju vai pārejiet tieši plānošanas posmā, ieskaitot īsu ziņojumu rakstīšanu, datu un pētījumu apkopošanu, kā arī to, kas jādara pēc sprinta. Ietver arī daudzus resursus, piemēram, rīkus, veidnes, receptes un iespēju iesniegt savu metodi. Jums, iespējams, būs nepieciešams kaut kur uzglabāt un koplietot resursus, tāpēc pārliecinieties, vai mākoņa krātuves izvēle ir precīza.
11. Cilvēki + AI ceļvedis
Šī rokasgrāmata ir Google izstrādātās People + AI Research iniciatīvas darbs, un tās mērķis ir piedāvāt palīdzību tiem, kuri vēlas veidot uz cilvēku vērstus AI produktus. Visaptverošā rokasgrāmata ir sadalīta sešās nodaļās, kas aptver lietotāju vajadzības, datu vākšanu un novērtēšanu, garīgos modeļus, uzticēšanos, atgriezenisko saiti un graciozās neveiksmes. Katrai nodaļai ir pievienoti vingrinājumi, darblapas un instrumenti un resursi, kas nepieciešami, lai tā notiktu.
12. Google palīgs
Šī ir Google asistenta izstrādātāju platforma, kas piedāvā rokasgrāmatu par to, kā integrēt savu saturu un pakalpojumus ar Google asistentu. Tas parāda, kā paplašināt savu mobilo lietotni, bagātīgi attēlot saturu meklēšanai un palīgam, kontrolēt gaismas, kafijas automātus un citas ierīces visā mājā un veidot balss un vizuālo pieredzi viedajiem skaļruņiem, displejiem un tālruņiem.
13. PageSpeed Insights
PageSpeed Insights analizē tīmekļa saturu un pēc tam piedāvā ieteikumus, kā to ātrāk ielādēt. Vienkārši pievienojiet URL, nospiediet pogu Analizēt un gaidiet, kamēr notiks burvība. Pārbaudiet dokumentus, lai iegūtu labāku ieskatu par to, kā darbojas PageSpeed API un kā sākt to lietot.
14. AMP Google tīklā
AMP ir Google rīks, lai izveidotu ātri ielādējamas mobilās lapas, kas (cerams) nokļūs meklēšanas reitinga augšgalā. Uzziniet, kā izveidot ātras, vispirms lietotājiem domātas vietnes, integrēt AMP visos Google produktos, izmantot Google AMP kešatmiņu, lai padarītu AMP lapas ātrākas un monetizētu AMP lapas ar citiem Google produktiem.
15. Google DevTools
Katrs dizainers un izstrādātājs zina (vai vismaz viņam būtu jāzina), ka pārlūkā Chrome ir pieejams rīku komplekts, kas iebūvēts tieši pārlūkprogrammā. Chrome DevTools ir ideāli piemēroti, lai pārbaudītu elementus, kas veido lapu, pārbaudītu CSS, rediģētu lapas lidojumā un daudz ko citu.
Cilne Elementi ir ievads DevTools. Tajā tiek parādīts HTML kods, kas veido atlasīto lapu. Iegūstiet ieskatu katra div vai tagu īpašībās no atlasītās lapas un sāciet rediģēšanu tiešsaistē. Tas ir lieliski piemērots eksperimentēšanai ar dizainu. Pārbaudiet izkārtojumu - neatkarīgi no tā, vai izmantojat Flexbox vai Grid - un apskatiet saistītos fontus ar piemēriem un pārbaudiet animācijas.
Citur jūs varat apskatīt un mainīt CSS. Elementu paneļa cilnē Stili ir uzskaitīti CSS kārtulas, kas tiek lietotas pašlaik atlasītajam DOM koka elementam. Lai eksperimentētu ar dizainu, ieslēdziet un izslēdziet īpašības (vai pievienojiet jaunas vērtības). Tas ir ideāls rīks, lai nodrošinātu, ka viss darbojas, kā paredzēts, pirms jebkādu izmaiņu ieviešanas tiešraides dizainā.
Varat arī atkļūdot JavaScript, optimizēt vietnes ātrumu un pārbaudīt tīkla ātrumu. Šis ir ātrs padoms, ko varat izmantot, lai nekavējoties paātrinātu darbplūsmu. Dodieties uz cilni Avoti, noklikšķiniet uz Jauns fragments un pievienojiet bieži izmantoto kodu. Nosauciet koda fragmentu un saglabājiet. Atkārtojiet pēc nepieciešamības. Tagad jūs varat paķert šo koda fragmentu tā vietā, lai to atkal rakstītu.
Tāpat kā katrs labs pārlūks, arī Chrome nepārtraukti attīstās, un katrs jauns laidiens nodrošina jaunas funkcijas. Uzziniet, kas notiek Chrome statusa platformā
16. Materiālu dizains
Attīstību var uzskatīt par Google iecienītu bērnu, taču neatkarīgi no tā, ko jūs veidojat, veidojat vai būvējat, tai ir jāizskatās labi un jāsniedz lietotājam tāda pieredze, kas viņu vēlētos izmantot. Materiāls ir jaunāks Google stabilā papildinājums, taču tas ir dizaina sistēma, kas ir nobriedusi par svarīgu dizaina komplekta gabalu.
Tāpat kā jebkurai labai dizaina sistēmai, arī tai ir savs vadlīniju kopums, kas jums jāņem vērā, pirms ķeraties klāt aizraujošākai lietai. Iegūstiet pārskatu par to, kā izmantot dažādus elementus, kas ir Materiālu tēma, kā ieviest motīvu un lietošanas rokasgrāmatas, tostarp pieejamību. Citur ir ieskats Material Foundation, kas ietver galvenās dizaina jomas, piemēram, izkārtojumu, navigāciju, krāsu, tipogrāfiju, skaņu, ikonogrāfiju, kustību un mijiedarbību. Katra kategorija atklāj savus ieteikumus un aizliegumus, kā arī to, kur jāapsver piesardzība. Lai dotu priekšstatu par to, kas sagaidāms, kategorija Izkārtojums piedāvā sadaļas par izkārtojuma, pikseļu blīvuma izpratni, kā strādāt ar atsaucīgu izkārtojumu, ieskaitot kolonnas, notekas un piemales, pārtraukumpunktus, lietotāja saskarnes reģionus un atstarpes metodes, lai nosauktu tikai dažus.
Papildus sadaļai Dizains ir komponenti, kas nodrošina dizaina izveidošanai nepieciešamos fiziskos celtniecības blokus. Kas šeit ir iekļauts? Pogas, reklāmkarogi, kartītes, dialoglodziņi, dalītāji, saraksti, izvēlnes, progresa rādītāji, slīdņi, uzkodu joslas (tie ir īsi ziņojumi par lietotņu procesiem ekrāna apakšdaļā), cilnes, teksta lauki un rīku padomi. Neapšaubāmi visaptveroša komponentu kolekcija.
Un izstrādātāji nav aizmirsti ar detalizētu informāciju un pamācībām, kā veidot dažādas platformas - Android, iOS, Web un Flutter. Visbeidzot, ir lapa, kas veltīta daudziem resursiem, lai palīdzētu jūsu izvēlētajam dizainam notikt.
Šis raksts sākotnēji parādījās tīkla žurnālā. Pērciet 326. numuru.
