Turinys
- 01. Švyturys
- 02. Polimeras
- 03. API naršyklė
- 04. Plazdėjimas
- 05. „Google GitHub“
- 06. Lėlininkas
- 07. Darbo dėžutė
- 08. Codelabs
- 09. Spalvų įrankis
- 10. Dizaino sprintai
- 11. Žmonės + dirbtinio intelekto vadovas
- 12. „Google“ padėjėjas
- 13. „PageSpeed Insights“
- 14. AMP sistemoje „Google“
- 15. „Google DevTools“
- 16. Medžiagos dizainas
Darbas žiniatinklyje paprastai reiškia, kad dirbsite su „Google“ tam tikros formos ar formos. Matydami, kad „Google Chrome“ yra gatvės prieš konkurenciją, dizaineriai ir kūrėjai turi pagalvoti, kaip jų projektas veiks su naršykle. Kaip tai atrodys? Kokias technologijas jis palaiko, kiek saugus ir kaip jis veiks?
Laimei, „Chrome“ teikia įrankius, užtikrinančius, kad bet kuri svetainė ar programa bus geriausia. „DevTools“ suteikia dizaineriams ir kūrėjams galimybę įžvelgti tinklalapį: galite manipuliuoti DOM, tikrinti CSS, eksperimentuoti su dizainais, naudodami tiesioginį redagavimą, derinti „JavaScript“ ir patikrinti našumą. (Čia rasite daugiau informacijos apie tai, kaip naudoti šiuos „Google“ žiniatinklio įrankius, o jei pradedate nuo nulio, žiūrėkite ir mūsų geriausių interneto kūrėjų sąrašą).
Tačiau „Google“ siūlo ne tik naršyklę. Jis turi įrankių ir išteklių, kad padėtų beveik visais jūsų dizaino ir kūrimo gyvenimo aspektais. Norite sužinoti, kaip pagerinti našumą? Švyturys yra čia, kad padėtų. Norite sukurti geresnes svetaines mobiliesiems? Tada pasisveikink su AMP. Ar norite sukurti gražius PWA? Tada „Flutter“, „Material Design“ ir „Workbox“ yra pasirengę įsikišti.
„Google“ įrankių, išteklių, bibliotekų ir struktūrų naudojimo grožis yra tas, kad žinote, kad jie gerai veiks su „Chrome“ naršykle - populiariausia naršykle planetoje. Norėdami sužinoti daugiau įrankių, žr. Mūsų interneto dizaino įrankių apžvalgą.
01. Švyturys
Našumas yra pagrindinis svetainės sėkmės veiksnys, o „Švyturys“ yra „Google“ įrankis, siekiant pagerinti tinklalapių kokybę (taip pat padės tinkama interneto prieglobos paslauga). Taigi, kaip naudoti švyturį ir ką jis gali padaryti? Paprasčiausia forma galite paleisti „Lighthouse“ skirtuką „Auditai“ ir rinktis iš daugybės parinkčių, įskaitant darbalaukį ar mobilųjį, be našumo, prieinamumo ir SEO žymėjimo langelių, kad sukurtumėte galutinę ataskaitą su siūlomais patobulinimais.
02. Polimeras
„Polymer“ yra gerai žinomas dėl savo darbo su interneto komponentais, tačiau dabar projektas išplėtė savo repertuarą, įtraukdamas bibliotekų, įrankių ir standartų rinkinį. Kas įtraukta? „LitElement“ yra redaktorius, leidžiantis lengvai apibrėžti žiniatinklio komponentus, o „lit-html“ yra HTML šablonų biblioteka, leidžianti vartotojams rašyti naujos kartos HTML šablonus JS. Taip pat rasite „PWA Starter“ rinkinį, originalią „Polymer“ biblioteką ir interneto komponentų rinkinius.
03. API naršyklė
„Google“ turi didžiulę API kūrėjų prieinamą biblioteką, tačiau rasti tai, ko jums reikia, nėra lengva. Štai kur „Google“ API Explorer teikia pagalbos ranką. Yra ilgas sąrašas, kurį galima slinkti, tačiau norint greičiau pasiekti, yra paieškos laukelis, skirtas filtruoti API sąrašą. Kiekvienas įrašas nukreipia į nuorodos puslapį, kuriame pateikiama daugiau informacijos apie tai, kaip naudoti API.
04. Plazdėjimas
Jei norite sukurti gerai atrodančias programas mobiliesiems, interneto ir staliniams kompiuteriams iš vienos kodų bazės, „Flutter“ gali būti jums. Ši svetainė yra išsami nuoroda į darbą su „Flutter“ ir su ja. Neturite supratimo, ką daryti? Dokumentai perkelia vartotoją nuo diegimo iki sukūrimo, kuriai padeda daug pavyzdžių ir vadovėlių.
05. „Google GitHub“
Kaip dauguma žinos, „GitHub“ yra prieglobos platforma / saugykla, skirta kodams ir failams laikyti ir dalytis. Laimei, „Google“ turi savo vietą platformoje, kurioje yra daugiau nei 260 saugyklų. Naudokite filtrą, kad sumažintumėte paieškos laiką ir priartėtumėte prie saugyklos, su kuria norite žaisti ar prie kurios prisidėti.
06. Lėlininkas
„Puppeteer“, pastatytas „Node“, siūlo aukšto lygio API, leidžiančią pasiekti „Chrome“ be galvos - efektyviai „Chrome“ be vartotojo sąsajos, kurią kūrėjai gali valdyti naudodami komandinę eilutę. Taigi, ką jūs galite padaryti su „Puppeteer“? Yra keletas variantų, kaip sukurti ekrano kopijas ir puslapių PDF failus, automatizuoti formos pateikimą ir sukurti automatizuotą bandymų aplinką.
07. Darbo dėžutė
Jei norite sukurti PWA, tai yra puikus atspirties taškas. „Workbox“ pateikia „JavaScript“ bibliotekų rinkinį, kad žiniatinklio programose būtų galima palaikyti neprisijungus. Išsamių vadovų pasirinkimas parodo, kaip sukurti ir užregistruoti paslaugų darbuotojo failą, nukreipti užklausas, naudoti papildinius ir naudoti grupes su „Workbox“. Taip pat yra patikrinimo talpykloje strategijų pavyzdžių rinkinys.
08. Codelabs
Reikia praktinių „Google“ produkto patarimų? „Codelabs“ teikia „vadovavimo, mokymo, praktinio kodavimo patirtį“. Svetainė yra tinkamai suskirstyta į kategorijas ir įvykius, todėl greitai ir lengvai galima rasti tai, ko norite. Tai apima „Analytics“, „Android“, „Assistant“, papildytą realybę, „Flutter“, „G Suite“, „Search“, „TensorFlow“ ir virtualiąją realybę. Pasirinkite parinktį ir gaukite kodą bei nurodymus, kurių reikia norint sukurti mažas programas.
09. Spalvų įrankis
Spalvų įrankis yra paprastas įrankis, leidžiantis kurti ir dalytis paletę bei pritaikyti paletę, be to, kad patikrintumėte prieinamumą. Vartotojai gali pasirinkti iš anksto nustatytą paletę iš medžiagos paletės. Tiesiog pasirinkite spalvą ir pritaikykite ją pagrindinei spalvų schemai, perjunkite į antrinę parinktį ir vėl pasirinkite. Galiausiai pasirinkite abiejų schemų teksto spalvas. Arba perjunkite į „Custom“, kad pasirinktumėte spalvas. Tada, prieš eksportuodami paletę, pereikite prie „Pritaikymas neįgaliesiems“, kad patikrintumėte, ar viskas gerai.
10. Dizaino sprintai
„Design Sprint“ rinkinys skirtas tiems, kurie mokosi dalyvauti ar valdyti dizaino sprintus. Atrodo, kad jis aprėpia visas žinių bazes, pradedant pirmokais, baigiant patyrusiais sprinto vadovais. Sužinokite apie metodiką arba pereikite tiesiai į planavimo etapą, įskaitant trumpų rašymą, duomenų rinkimą ir tyrimus bei tai, ką daryti po sprinto. Taip pat yra daugybė išteklių, tokių kaip įrankiai, šablonai, receptai ir galimybė pateikti savo metodą. Be to, jums greičiausiai reikės kur saugoti ir dalytis ištekliais, todėl įsitikinkite, kad pasirinkote debesies saugyklos pasirinkimą.
11. Žmonės + dirbtinio intelekto vadovas
Šis vadovas yra „Google +“ iniciatyvos „Žmonės + dirbtinis intelektas“ darbas. Juo siekiama padėti tiems, kurie nori kurti į žmogų nukreiptus AI produktus. Išsamus vadovas yra padalintas į šešis skyrius, apimančius vartotojų poreikius, duomenų rinkimą ir vertinimą, mentalinius modelius, pasitikėjimą, grįžtamąjį ryšį ir grakščią nesėkmę. Prie kiekvieno skyriaus pridedami pratimai, darbalapiai ir įrankiai bei ištekliai, reikalingi jam įgyvendinti.
12. „Google“ padėjėjas
Tai yra „Google“ padėjėjo kūrėjų platforma, siūlanti vadovą, kaip integruoti turinį ir paslaugas su „Google“ padėjėju. Tai parodo, kaip išplėsti savo programą mobiliesiems, turtingai pateikti turinį, skirtą Paieškai ir Padėjėjui, valdyti žibintus, kavos aparatus ir kitus įrenginius namuose ir kurti balso ir vaizdo funkcijas išmaniesiems garsiakalbiams, ekranams ir telefonams.
13. „PageSpeed Insights“
„PageSpeed Insights“ analizuoja žiniatinklio turinį ir tada siūlo pasiūlymus, kaip jį greičiau įkelti. Tiesiog pridėkite URL, paspauskite mygtuką „Analizuoti“ ir palaukite, kol įvyks magija. Patikrinkite dokumentus, kad gautumėte geresnę informaciją apie tai, kaip veikia „PageSpeed“ API ir kaip pradėti ją naudoti.
14. AMP sistemoje „Google“
AMP yra „Google“ įrankis, skirtas sukurti greitai įkraunamus puslapius mobiliesiems, kurie (tikiuosi) pateks į paieškos reitingų viršų. Sužinokite, kaip sukurti greitas, pirmiausia naudotojams skirtas svetaines, integruoti AMP visuose „Google“ produktuose, naudoti „Google AMP“ talpyklą, kad AMP puslapiai būtų greitesni ir gautumėte pajamų iš AMP puslapių su kitais „Google“ produktais.
15. „Google DevTools“
Kiekvienas dizaineris ir kūrėjas žino (arba bent jau turėtų žinoti), kad „Chrome“ yra įrankių rinkinys, įmontuotas tiesiai į naršyklę. „Chrome“ „DevTools“ yra ideali priemonė norint patikrinti elementus, sudarančius puslapį, patikrinti CSS, redaguoti puslapius skriejant ir dar daugiau.
Skirtukas „Elementai“ yra „DevTools“ įvadas. Tai rodo HTML kodą, kuris sudaro pasirinktą puslapį. Gaukite įžvalgų apie kiekvieno divo ar žymos ypatybes iš pasirinkto puslapio ir pradėkite tiesioginį redagavimą. Tai puikiai tinka eksperimentuoti su dizainu. Patikrinkite maketą - nesvarbu, ar naudojate „Flexbox“, ar „Grid“ - pažvelkite į susijusius šriftus su pavyzdžiais ir išnagrinėkite animacijas.
Kitur galite peržiūrėti ir pakeisti CSS. Skydelyje „Stiliai“ skydelyje Elementai pateikiamos CSS taisyklės, taikomos šiuo metu pasirinktam DOM medžio elementui. Norėdami eksperimentuoti su dizainais, įjunkite ir išjunkite ypatybes (arba pridėkite naujų verčių). Tai yra puikus įrankis, užtikrinantis, kad viskas veiks taip, kaip tikėtasi, prieš pradedant bet kokius tiesioginio dizaino pakeitimus.
Taip pat galite derinti „JavaScript“, optimizuoti svetainės greitį ir patikrinti tinklo greitį. Štai greitas patarimas, kurį galite naudoti, kad iš karto paspartintumėte savo darbo eigą. Eikite į skirtuką Šaltiniai, spustelėkite Naujas fragmentas ir pridėkite dažnai naudojamą kodą. Pavadinkite kodo fragmentą ir išsaugokite. Pakartokite, kiek reikia. Dabar galite paimti šį kodo fragmentą, užuot jį vėl parašę.
Kaip ir kiekviena gera naršyklė, „Chrome“ nuolat tobulėja ir kiekvienas naujas leidimas suteikia naujų funkcijų. Sužinokite, kas vyksta „Chrome“ būsenos platformoje
16. Medžiagos dizainas
Kūrimas gali būti vertinamas kaip „Google“ mėgstamas vaikas, tačiau, kad ir ką jūs kurtumėte, kurtumėte ar kurtumėte, jis turi atrodyti gerai ir suteikti vartotojui patirtį, dėl kurios jis nori ja naudotis. Medžiaga yra naujausias „Google“ arklidės priedas, tačiau tai yra dizaino sistema, subrendusi į gyvybiškai svarbų dizaino rinkinį.
Kaip ir bet kuri gera dizaino sistema, ji turi savo gairių rinkinį, į kurį turite atsižvelgti prieš pradėdami įdomesnius dalykus. Gaukite apžvalgą, kaip naudoti skirtingus elementus, kas yra „Material“ tema, kaip įgyvendinti temą ir naudojimo vadovus, įskaitant prieinamumą. Kitur yra įžvalga apie „Material Foundation“, kuri apima pagrindines dizaino sritis, tokias kaip išdėstymas, navigacija, spalvos, tipografija, garsas, ikonografija, judėjimas ir sąveika. Kiekviena kategorija atskleidžia savo patarimus ir draudimus bei tai, kur turėtumėte apsvarstyti atsargumą. Kad susidarytumėte idėją, ko tikėtis, kategorijoje „Išdėstymas“ pateikiamos skyriai apie išdėstymo, pikselių tankio supratimą, kaip dirbti su reaguojančiu išdėstymu, įskaitant stulpelius, latakus ir paraštes, lūžio taškus, vartotojo sąsajos regionus ir tarpų metodus.
Už dizaino skyriaus yra komponentai, pateikiantys fizinius statybinius elementus, reikalingus dizainui sukurti. Kas čia įtraukta? Mygtukai, reklamjuostės, kortelės, dialogo langai, dalikliai, sąrašai, meniu, pažangos rodikliai, slankikliai, užkandžių juostos (tai yra trumpi pranešimai apie programų procesus ekrano apačioje), skirtukai, teksto laukai ir patarimai. Neabejotinai išsami komponentų kolekcija.
Kūrėjai nebuvo pamiršti, pateikdami išsamią informaciją ir vadovus, kaip kurti skirtingas platformas - „Android“, „iOS“, „Web“ ir „Flutter“. Galiausiai yra puslapis, skirtas daugybei išteklių, kurie padės įgyvendinti jūsų pasirinktą dizainą.
Šis straipsnis iš pradžių pasirodė internetiniame žurnale. Pirkite 326 numerį.
