Vsebina
- 01. Svetilnik
- 02. Polimer
- 03. Raziskovalec API-jev
- 04. Flutter
- 05. Google GitHub
- 06. Lutkar
- 07. Delovni kovček
- 08. Codelabs
- 09. Barvno orodje
- 10. Design Sprints
- 11. Vodič za ljudi + AI
- 12. Google Assistant
- 13. PageSpeed Insights
- 14. AMP v Googlu
- 15. Google DevTools
- 16. Materialno oblikovanje
Delo v spletu običajno pomeni, da boste z Googlom sodelovali v neki obliki ali obliki. In ker je Google Chrome ulice pred konkurenco, morajo oblikovalci in razvijalci razmisliti o tem, kako bo njihov projekt deloval z brskalnikom. Kako bo videti? Katere tehnologije podpira, kako varna je in kako se bo obnesla?
Na srečo Chrome ponuja orodja za zagotovitev, da bo katero koli spletno mesto ali aplikacija v najboljšem primeru. DevTools omogoča oblikovalcem in razvijalcem vpogled v spletno stran: lahko manipulirate z DOM-om, preverite CSS, preizkusite modele z urejanjem v živo, odpravite napake v JavaScript in preverite delovanje. (Tukaj si oglejte več o uporabi teh Googlovih spletnih orodij in če začenjate od začetka, si oglejte tudi naš seznam najboljših spletnih ustvarjalcev).
Google pa ponuja več kot le brskalnik. Ima orodja in vire za pomoč pri skoraj vseh vidikih vašega oblikovalskega in razvojnega življenja. Bi radi vedeli, kako izboljšati zmogljivost? Svetilnik je tu, da pomaga. Želite zgraditi bolj uspešna spletna mesta za mobilne naprave? Nato pozdravi AMP. Ali želite zgraditi čudovite PWA? Potem so Flutter, Material Design in Workbox pripravljeni na vstop.
Lepota uporabe Googlovih orodij, virov, knjižnic in ogrodja je v tem, da veste, da bodo dobro sodelovali z brskalnikom Chrome - najbolj priljubljenim brskalnikom na planetu. Za več orodij si oglejte našo zbirko orodij za spletno oblikovanje.
01. Svetilnik
Uspešnost je ključni dejavnik uspeha spletnega mesta, Svetilnik pa je Googlovo orodje za izboljšanje kakovosti spletnih strani (v pomoč bo tudi prava storitev spletnega gostovanja). Torej, kako uporabljate Lighthouse in kaj lahko naredi? V najpreprostejši obliki lahko na zavihku Revizije zaženete Lighthouse in izberete med možnostmi, vključno z namiznimi ali mobilnimi napravami, poleg kljukic za uspešnost, dostopnost in SEO, da ustvarite končno poročilo s predlaganimi izboljšavami.
02. Polimer
Polymer je znan po svojem delu s spletnimi komponentami, vendar je projekt zdaj razširil svoj repertoar tako, da zajema zbirko knjižnic, orodij in standardov. Kaj je vključeno? LitElement je urejevalnik, ki olajša določanje spletnih komponent, medtem ko je lit-html knjižnica za predloge HTML, ki uporabnikom omogoča pisanje predlog naslednje generacije HTML v JS. Poleg tega boste našli tudi PWA Starter komplet, originalno knjižico Polymer in nabore spletnih komponent.
03. Raziskovalec API-jev
Google ima razvijalcem na voljo široko knjižnico API-jev, vendar najti tisto, kar potrebujete, ni lahka naloga. Tu nastopi Googlov raziskovalec API-jev, ki vam nudi roko za pomoč. Po dolgem seznamu se je mogoče pomikati, za hitrejši dostop pa je na voljo iskalno polje za filtriranje seznama API. Vsak vnos vodi na referenčno stran z več podrobnostmi o uporabi API-ja.
04. Flutter
Če želite zgraditi lepe aplikacije za mobilne naprave, splet in namizja iz ene kode, je Flutter lahko za vas. Spletno mesto je popolna referenca za delo s Flutterjem in njegovo gradnjo. Nimate pojma, kaj storiti? Dokumenti vodijo uporabnika od namestitve do izdelave, pri čemer mu pomaga veliko vzorcev in vadnic.
05. Google GitHub
Kot bo večina vedela, je GitHub gostiteljska platforma / repozitorij za shranjevanje in skupno rabo kode in datotek. In na srečo ima Google svoje mesto na platformi z več kot 260 skladišči, ki jih je mogoče presejati. S filtrom zmanjšajte čas iskanja in se približajte repozitoriju, s katerim se želite igrati ali prispevati.
06. Lutkar
Puppeteer, vgrajen v Node, ponuja API na visoki ravni, ki vam omogoča dostop do brezglavega Chroma - učinkovito Chroma brez uporabniškega vmesnika, ki ga lahko razvijalci nato nadzorujejo prek ukazne vrstice. Torej, kaj lahko storite z Lutkarjem? Na voljo je nekaj možnosti za ustvarjanje posnetkov zaslona in PDF-jev strani, avtomatizacijo oddaje obrazcev in ustvarjanje avtomatiziranega testnega okolja.
07. Delovni kovček
Če želite zgraditi PWA, je to odlično izhodišče. Workbox ponuja zbirko knjižnic JavaScript za dodajanje podpore brez povezave v spletne aplikacije. Izbor poglobljenih vodnikov prikazuje, kako ustvariti in registrirati datoteko servisnega delavca, zahtevati usmerjanje, uporabiti vtičnike in uporabiti veznike z Workboxom. Obstaja pa tudi nabor primerov strategij predpomnjenja, ki jih je treba preveriti.
08. Codelabs
Potrebujete praktična navodila za Googlov izdelek? Codelabs ponuja "vodeno vadnico in praktično kodiranje". Spletno mesto je razčlenjeno po kategorijah in dogodkih, zato je hitro in enostavno najti tisto, kar želite. Vključuje Analytics, Android, Assistant, razširjeno resničnost, Flutter, G Suite, Search, TensorFlow in navidezno resničnost. Izberite možnost in dobite kodo in navodila, ki jih potrebujete za izdelavo majhnih aplikacij.
09. Barvno orodje
Color Tool je preprosto orodje, ki vam poleg preverjanja dostopnosti omogoča ustvarjanje, skupno rabo in uporabo palete. Uporabniki lahko na paleti Material izberejo vnaprej določeno paleto. Preprosto izberite barvo in jo nato uporabite za primarno barvno shemo, preklopite na sekundarno možnost in znova izberite. Na koncu izberite še barvo besedila za obe shemi. Druga možnost je, da izberete barve po meri. Nato preklopite na Dostopnost, da preverite, ali je vse dobro, preden končno izvozite paleto.
10. Design Sprints
Design Sprint Kit je namenjen tistim, ki se učijo sodelovanja ali vodenja oblikovalskih sprintov. Zdi se, da zajema vse baze znanja, od začetnikov do izkušenih pospeševalcev sprinta. Spoznajte metodologijo ali skočite naravnost v fazo načrtovanja, vključno s pisanjem kratkih poročil, zbiranjem podatkov in raziskavami, pa tudi s tem, kaj narediti po sprintu. Vključuje tudi vrsto virov, kot so orodja, predloge, recepti in možnost oddaje lastne metode. Prav tako boste verjetno morali nekje shraniti in deliti vire, zato poskrbite, da bo vaša izbira prostora za shranjevanje v oblaku točna.
11. Vodič za ljudi + AI
Ta priročnik je delo pobude People + AI Research pri Googlu in ponuja pomoč tistim, ki želijo zgraditi izdelke z umetno inteligenco, osredotočene na človeka. Izčrpen vodnik je razdeljen na šest poglavij, ki zajemajo potrebe uporabnikov, zbiranje in vrednotenje podatkov, mentalne modele, zaupanje, povratne informacije in eleganten neuspeh. Vsako poglavje spremljajo vaje, delovni listi ter orodja in viri, ki so potrebni za njegovo uresničitev.
12. Google Assistant
To je platforma za razvijalce Google Assistant, ki ponuja priročnik za integracijo vaše vsebine in storitev z Google Assistantom. Prikazuje vam, kako razširite svojo mobilno aplikacijo, predstavite vsebino na bogate načine za iskanje in pomočnika, upravljate luči, kavne aparate in druge naprave po domu ter ustvarite glasovne in vizualne izkušnje za pametne zvočnike, zaslone in telefone.
13. PageSpeed Insights
PageSpeed Insights analizira spletno vsebino in nato predlaga predloge za hitrejše nalaganje. Preprosto dodajte URL, pritisnite gumb Analiziraj in počakajte, da se čarovnija zgodi. Preverite Dokumente, da dobite boljši vpogled v to, kako deluje PageSpeed API in kako ga začeti uporabljati.
14. AMP v Googlu
AMP je Googlovo orodje za ustvarjanje mobilnih strani s hitrim nalaganjem, ki bodo (upajmo) prišle na vrh lestvice v iskalnem omrežju. Naučite se ustvariti hitre uporabniške spletne strani, integrirati AMP v Googlove izdelke, uporabljati Google AMP Cache za hitrejše AMP strani in AMP strani monetizirati z drugimi Googlovimi izdelki.
15. Google DevTools
Vsak oblikovalec in razvijalec ve (ali bi vsaj moral vedeti), da ima Chrome nabor orodij, vgrajenih neposredno v brskalnik. Chromovi DevTools so idealni za pregled elementov, ki sestavljajo stran, preverjanje CSS-ja, urejanje strani v trenutku in še veliko več.
Zavihek Elementi je uvod v DevTools. Prikaže kodo HTML, ki sestavlja izbrano stran. Pridobite vpogled v lastnosti vsakega divja ali oznake na izbrani strani in začnite urejati v živo. To je kot nalašč za eksperimentiranje z modeli. Preverite postavitev - ne glede na to, ali uporabljate Flexbox ali Grid - in si oglejte sorodne pisave s primeri in preglejte animacije.
Drugje si lahko ogledate in spremenite CSS. Na zavihku Slogi na plošči Elementi so navedena pravila CSS, ki se uporabljajo za trenutno izbrani element v drevesu DOM. Vklopite in izklopite lastnosti (ali dodajte nove vrednosti), da poskusite z modeli. To je popolno orodje za zagotovitev, da vse deluje, kot je bilo pričakovano, preden uporabite kakršne koli spremembe v živo.
Lahko tudi odpravite napake v JavaScript, optimizirate hitrost spletnega mesta in preverite hitrost omrežja. Tu je hiter namig, s katerim lahko takoj pospešite svoj potek dela. Pojdite na zavihek Viri, kliknite Nov delček in dodajte pogosto uporabljeno kodo. Poimenujte delček kode in shranite. Po potrebi ponovite. Zdaj lahko zgrabite ta delček kode, namesto da ga pišete znova.
Kot vsak dober brskalnik se tudi Chrome nenehno razvija in vsaka nova izdaja prinaša nove funkcije. Ugotovite, kaj se dogaja na platformi stanja za Chrome
16. Materialno oblikovanje
Na razvoj lahko gledamo kot na Googlov najljubši otrok, toda ne glede na to, kaj izdelujete, ustvarjate ali gradite, mora biti videti dobro in uporabniku dati izkušnjo, zaradi katere ga želi uporabiti. Material je novejši dodatek Googlovemu hlevu, vendar je oblikovalski sistem, ki je dozorel v pomemben del oblikovalskega kompleta.
Kot vsak dober sistem oblikovanja ima tudi on svoj nabor smernic, ki si jih morate ogledati, preden stopite v bolj razburljive stvari. Pridobite pregled, kako uporabljati različne elemente, kaj je tematika materiala, kako uporabiti temo in vodnike za uporabnost, vključno z dostopnostjo. Drugje obstaja vpogled v Material Foundation, ki vključuje ključna področja oblikovanja, kot so postavitev, navigacija, barva, tipografija, zvok, ikonografija, gibanje in interakcija. Vsaka kategorija razkriva svoje prednosti in pomanjkljivosti ter kje morate biti previdni. Če želite predstaviti, kaj lahko pričakujete, kategorija Postavitev ponuja odseke o razumevanju postavitve, gostote slikovnih pik, kako delati z odzivno postavitvijo, vključno s stolpci, žlebovi in robovi, mejnimi prelomi, regijami uporabniškega vmesnika in razmiki, če omenimo le nekatere.
Poleg oddelka Design je Components, ki vsebuje fizične gradnike, potrebne za izdelavo zasnove. Kaj je tu vključeno? Gumbi, pasice, kartice, pogovorna okna, delilniki, seznami, meniji, kazalniki napredka, drsniki, prigrizki (to so kratka sporočila o procesih aplikacij na dnu zaslona), zavihki, besedilna polja in namigi. Nedvomno obsežna zbirka komponent.
In razvijalci niso pozabljeni s podrobnostmi in vadnicami o tem, kako graditi za različne platforme - Android, iOS, Web in Flutter. In končno, obstaja stran, posvečena številnim virom, ki vam pomagajo, da se izbrani dizajn uresniči.
Ta članek se je prvotno pojavil v reviji net. Kupite številko 326.
