Përmbajtje
- 01. Far
- 02. Polimer
- 03. APIs Explorer
- 04. Flater
- 05. Google GitHub
- 06. Kukullari
- 07. Kuti pune
- 08. Codelabs
- 09. Vegla me ngjyra
- 10. Design Sprint
- 11. Njerëzit + Libër Udhëzues për UA
- 12. Asistenti i Google
- 13. Vështrime të PageSpeed
- 14. AMP në Google
- 15. Google DevTools
- 16. Projektimi i materialit
Puna në internet zakonisht do të thotë që ju do të punoni me Google në një formë ose formë. Dhe duke parë që Google Chrome është rrugë përpara konkurrencës, dizajnerët dhe zhvilluesit duhet të mendojnë se si projekti i tyre do të funksionojë me shfletuesin. Si do të duket? Cilat teknologji mbështet, sa e sigurt është dhe si do të performojë?
Për fat të mirë, Chrome ofron mjete për të siguruar që çdo sit ose aplikacion do të jetë në gjendjen më të mirë. DevTools u mundëson dizenjuesve dhe zhvilluesve që të marrin njohuri për një faqe në internet: ju mund të manipuloni DOM, të kontrolloni CSS, të eksperimentoni në dizajne me redaktim të drejtpërdrejtë, të korrigjoni gabimet JavaScript dhe të kontrolloni performancën. (Shikoni më shumë rreth mënyrës së përdorimit të këtyre veglave të Google në internet këtu dhe nëse po filloni nga e para, shihni edhe listën tonë të ndërtuesve kryesorë të uebit).
Por Google ofron më shumë sesa thjesht shfletuesin. Ka mjete dhe burime për të ndihmuar pothuajse çdo aspekt të dizajnit dhe jetës tuaj të zhvillimit. Dëshironi të dini se si të përmirësoni performancën? Far është këtu për t'ju ndihmuar. Dëshironi të ndërtoni faqe mobile me performancë më të mirë? Atëherë përshëndetje AMP. A po kërkoni të ndërtoni PWA të bukura? Pastaj Flutter, Material Design dhe Workbox janë gati për të ndërhyrë.
Bukuria e përdorimit të mjeteve, burimeve, bibliotekave dhe kornizave të Google është se ju e dini që ato do të funksionojnë mirë me shfletuesin Chrome - shfletuesi më i popullarizuar në planet. Për më shumë mjete, shikoni përmbledhjen tonë të mjeteve për krijimin e faqeve në internet.
01. Far
Performanca është një faktor kryesor në suksesin e një siti dhe Lighthouse është mjeti i Google për përmirësimin e cilësisë së faqeve të internetit (shërbimi i duhur i mbajtjes së faqes në internet do të ndihmojë gjithashtu). Atëherë, si e përdorni farin dhe çfarë mund të bëjë? Në formën e tij më të thjeshtë, ju mund të ekzekutoni Lighthouse nga skeda e Auditimeve dhe të zgjidhni nga një përzgjedhje opsionesh përfshirë desktop ose celular, përveç kutive të shënjave për performancën, mundësinë e hyrjes dhe SEO, për të gjeneruar një raport përfundimtar me përmirësimet e sugjeruara.
02. Polimer
Polimeri është i njohur për punën e tij me përbërës të uebit, por projekti tani ka zgjeruar repertorin e tij për të përqafuar një koleksion bibliotekash, mjetesh dhe standardesh. Çfarë është përfshirë? LitElement është një redaktor që e bën të lehtë përcaktimin e përbërësve të uebit, ndërsa lit-html është një bibliotekë e modelimit HTML që u mundëson përdoruesve të shkruajnë modele HTML të gjeneratës tjetër në JS. Plus, do të gjeni gjithashtu një komplet PWA Starter, bibliotekën origjinale Polymer dhe grupe përbërësish të uebit.
03. APIs Explorer
Google ka një bibliotekë të gjerë të API-ve në dispozicion të zhvilluesve, por gjetja e asaj që ju nevojitet nuk është detyrë e lehtë. Kjo është ajo ku API-të e Google Explorer ndërhyn për të ofruar një dorë ndihme. Ekziston një listë e gjatë që mund të rrotullohet, por, për qasje më të shpejtë, ekziston një kuti kërkimi për të filtruar listën API. Çdo hyrje lidhet me një faqe referimi me më shumë detaje se si të përdorni API.
04. Flater
Nëse po kërkoni të ndërtoni aplikacione të hijshme për celularë, ueb dhe desktop nga një bazë e vetme kodike, atëherë Flutter mund të jetë për ju. Faqja është një referencë e plotë për të punuar me dhe për të ndërtuar me Flutter. Nuk keni një ide se çfarë të bëni? Dokumentet marrin një përdorues nga instalimi te krijimi, të ndihmuar nga shumë mostra dhe udhëzime.
05. Google GitHub
Siç do ta dinë shumica, GitHub është platforma / depoja pritëse për të ruajtur dhe ndarë kodin dhe skedarët. Dhe për fat të mirë Google ka vendin e vet në platformë me mbi 260 depo për të kërkuar. Përdorni filtrin për të shkurtuar kohën e kërkimit dhe për t'iu afruar magazinës me të cilën dëshironi të luani ose të kontribuoni.
06. Kukullari
E ndërtuar në Nyje, Puppeteer ofron një API të nivelit të lartë që ju mundëson të keni qasje në Chrome pa kokë - në mënyrë të efektshme në Chrome pa UI, të cilën zhvilluesit më pas mund ta kontrollojnë përmes rreshtit të komandës. Atëherë, çfarë mund të bësh me Kukullari? Disa opsione janë në dispozicion për gjenerimin e fotografive në ekran dhe PDF të faqeve, automatizimin e paraqitjes së formularit dhe krijimin e një mjedisi të automatizuar të testimit.
07. Kuti pune
Nëse po kërkoni të ndërtoni një PWA atëherë kjo është një pikë e shkëlqyeshme fillestare. Kutia e punës ofron një koleksion të bibliotekave JavaScript për të shtuar mbështetjen jashtë linje të aplikacioneve në internet. Një përzgjedhje e udhëzuesve të thelluar demonstrojnë se si të krijoni dhe regjistroni një skedar të punonjësve të shërbimit, kërkesat e rrugës, përdorni shtojcat dhe përdorni paketat me Workbox. Dhe ekziston gjithashtu një sërë strategjish shembujsh të caching për të kontrolluar.
08. Codelabs
Keni nevojë për udhëzime praktike për një produkt të Google? Codelabs ofron "një përvojë të kodimit të drejtuar, udhëzuese dhe praktike". Faqja është e ndarë bukur në kategori dhe ngjarje, duke e bërë të shpejtë dhe të lehtë për të gjetur atë që dëshironi. Ai përfshin Analytics, Android, Asistentin, realitetin e shtuar, Flutter, G Suite, Kërko, TensorFlow dhe realitetin virtual. Zgjidhni një opsion dhe merrni kodin dhe udhëzimet që ju duhen për të ndërtuar aplikacione të vogla.
09. Vegla me ngjyra
Color Tool është një mjet i drejtpërdrejtë që ju mundëson krijimin, ndarjen dhe aplikimin e një palete përveç kontrollit të mundësisë së hyrjes. Përdoruesit mund të zgjedhin një paletë të paracaktuar nga paleta Material. Thjesht zgjidhni një ngjyrë dhe më pas aplikojeni atë në skemën kryesore të ngjyrave, kaloni në opsionin dytësor dhe zgjidhni përsëri. Në fund, zgjidhni ngjyrat e tekstit për të dy skemat. Përndryshe, kaloni te Custom për të zgjedhur ngjyrat tuaja. Pastaj kaloni te Accessibility për të kontrolluar se gjithçka është mirë përpara, më në fund, eksportimin e paletës.
10. Design Sprint
Design Sprint Kit është për ata që po mësojnë si të marrin pjesë ose të drejtojnë sprinte të dizajnit. Duket se duhet të mbulojë të gjitha bazat e njohurive, që nga kohët e para deri te lehtësuesit me përvojë të sprintit. Mësoni rreth metodologjisë ose hidhuni drejt në fazën e planifikimit, duke përfshirë shkrimet e shkurtra, mbledhjen e të dhënave dhe hulumtimet, si dhe çfarë të bëni pas vrapimit të shpejtë. Gjithashtu përfshin një mori burimesh të tilla si mjete, shabllone, receta dhe mundësi për të paraqitur metodën tuaj. Gjithashtu, me siguri do t'ju duhet diku për të ruajtur dhe shpërndarë burime, kështu që sigurohuni që zgjedhja juaj e hapësirës për ruajtjen e reve është në rregull.
11. Njerëzit + Libër Udhëzues për UA
Ky udhëzues është puna e iniciativës People + AI Research në Google dhe kërkon të ofrojë ndihmë për ata që duan të ndërtojnë produkte të AI me në qendër njeriun. Udhëzuesi gjithëpërfshirës është i ndarë në gjashtë kapituj që mbulojnë nevojat e përdoruesve, mbledhjen dhe vlerësimin e të dhënave, modelet mendore, besimin, reagimet dhe dështimet e hijshme. Secili kapitull shoqërohet me ushtrime, fletë pune dhe mjetet dhe burimet që nevojiten për ta realizuar atë.
12. Asistenti i Google
Kjo është platforma e zhvilluesve të "Asistentit të Google", që ofron një udhëzues se si të integroni përmbajtjen dhe shërbimet tuaja me "Asistentin e Google". Kjo ju tregon se si të zgjasni aplikacionin tuaj celular, të paraqisni përmbajtje në mënyra të pasura për Kërkimin dhe Asistentin, dritat e kontrollit, aparatet për kafe dhe pajisjet e tjera nëpër shtëpi dhe të ndërtoni përvoja zanore dhe vizuale për altoparlantë, ekranë dhe telefona të mençur.
13. Vështrime të PageSpeed
PageSpeed Insights analizon përmbajtjen në internet dhe më pas ofron sugjerime se si ta bëni atë të ngarkohet më shpejt. Thjesht shtoni një URL, shtypni butonin Analizo dhe prisni që magjia të ndodhë. Kontrolloni Docs për të marrë një pasqyrë më të mirë se si funksionon API PageSpeed dhe si të filloni ta përdorni.
14. AMP në Google
AMP është mjeti i Google për krijimin e faqeve mobile me ngarkesë të shpejtë që (me shpresë) do të shkojnë në krye të renditjes së kërkimit. Mësoni si të krijoni faqe të shpejta, në përdoruesit e parë, të integroni AMP në produktet e Google, të përdorni Google AMP Cache për t'i bërë faqet AMP më të shpejta dhe të monetoni faqet AMP me produktet e tjera të Google.
15. Google DevTools
Çdo projektues dhe zhvillues e di (ose të paktën duhet ta dijë) që Chrome vjen me një grup mjetesh të ndërtuara direkt në shfletues. DevTools të Chrome janë ideale për inspektimin e elementeve që përbëjnë një faqe, kontrollimin e CSS, redaktimin e faqeve në lëvizje dhe shumë më tepër.
Skeda Elements është hyrja në DevTools. Shfaq kodin HTML që përbën faqen e zgjedhur. Merrni një pasqyrë në vetitë e secilit div ose etiketë nga faqja e zgjedhur dhe filloni redaktimin e drejtpërdrejtë. Kjo është perfekte për të eksperimentuar me dizajne. Kontrolloni Layout - nëse jeni duke përdorur Flexbox ose Grid - dhe hidhni një vështrim në shkronjat e lidhura me shembuj dhe ekzaminoni animacionet.
Diku tjetër, ju mund të shihni dhe ndryshoni CSS. Skeda Styles në panelin Elements rendit rregullat CSS që po aplikohen në elementin e zgjedhur aktualisht në Pemën DOM. Ndizni dhe çaktivizoni vetitë (ose shtoni vlera të reja) për të eksperimentuar me dizajnet. Ky është mjeti perfekt për të siguruar që gjithçka të funksionojë siç pritet përpara se të aplikoni ndonjë ndryshim në modelin e drejtpërdrejtë.
Mund të korrigjoni edhe JavaScript, të optimizoni shpejtësinë e faqes në internet dhe të inspektoni shpejtësinë e rrjetit. Këtu keni një këshillë të shpejtë që mund të përdorni për të shpejtuar menjëherë rrjedhën tuaj të punës. Drejtohuni te skeda Burimet, klikoni New Fragment dhe shtoni kodin e përdorur shpesh. Emërtoni copën e kodit dhe ruajeni. Përsëriteni sipas nevojës. Tani mund ta kapni këtë copë kodi në vend që ta shkruani përsëri.
Si çdo shfletues i mirë, Chrome është në zhvillim e sipër dhe çdo lëshim i ri sjell veçori të reja. Gjeni se çfarë po ndodh në platformën e statusit të Chrome
16. Projektimi i materialit
Zhvillimi mund të shihet si fëmija i preferuar i Google por, çfarëdo që po bëni, krijoni ose ndërtoni, ai duhet të duket mirë dhe t'i japë përdoruesit një përvojë që i bën ata të duan ta përdorin atë. Materiali është një shtesë më e fundit te stalla e Google por është një sistem dizajni që është pjekur në një pjesë thelbësore të kompletit të dizajnit.
Ashtu si çdo sistem i mirë i dizajnit, ai ka grupin e tij të udhëzimeve, të cilat duhet t'i shikoni para se të futeni në gjërat më emocionuese. Merrni një përmbledhje të mënyrës së përdorimit të elementeve të ndryshëm, çfarë është tematika e materialit, si të zbatoni një temë dhe udhëzuesit e përdorimit, duke përfshirë mundësinë e përdorimit. Diku tjetër, ka një pasqyrë në Material Foundation, i cili përfshin fushat kryesore të dizajnit si paraqitja, lundrimi, ngjyra, tipografia, tingulli, ikonografia, lëvizja dhe ndërveprimi. Secila kategori zbulon ato që nuk duhet dhe çfarë nuk duhet të tregojë dhe ku duhet të keni kujdes. Për të dhënë një ide se çfarë të presësh, kategoria Layout ofron seksione për të kuptuar paraqitjen, dendësinë e pikselëve, si të punosh me një plan urbanistik të përgjegjshëm, duke përfshirë kolonat, ulluqet dhe kufijtë, pikat e ndërprerjes, rajonet e ndërfaqes dhe metodat e ndarjes për të përmendur disa.
Përtej seksionit Design është Komponentët, i cili siguron blloqet ndërtimore fizike të nevojshme për të krijuar një dizajn. Çfarë përfshihet këtu? Butonat, banderola, kartelat, dialogët, ndarësit, listat, menutë, treguesit e progresit, rrëshqitësit, shiritat snack (këto janë mesazhe të shkurtra në lidhje me proceset e aplikacioneve në fund të ekranit), skedat, fushat e tekstit dhe këshillat e veglave. Padyshim një koleksion gjithëpërfshirës i përbërësve.
Dhe zhvilluesit nuk janë harruar, me detaje dhe udhëzime se si të ndërtohen për platforma të ndryshme - Android, iOS, Web dhe Flutter. Dhe, së fundmi, ekziston një faqe e dedikuar për një mori burimesh për të ndihmuar që të realizojë projektin tuaj të zgjedhur.
Ky artikull fillimisht u shfaq në revistën net. Blini numrin 326.
