Sisältö
- 01. Majakka
- 02. Polymeeri
- 03. APIs Explorer
- 04. lepatus
- 05. Google GitHub
- 06. Nukkeja
- 07. Työlaatikko
- 08. Codelabs
- 09. Värityökalu
- 10. Suunnitteluprintit
- 11. People + AI Guidebook
- 12. Google Assistant
- 13. PageSpeed Insights
- 14. AMP Googlessa
- 15. Google DevTools
- 16. Materiaalisuunnittelu
Verkossa työskenteleminen tarkoittaa yleensä sitä, että työskentelet Googlen kanssa jossakin muodossa. Ja koska Google Chrome on kaduilla ennen kilpailua, suunnittelijoiden ja kehittäjien on mietittävä, kuinka heidän projektinsa toimii selaimen kanssa. Miltä se näyttää? Mitä tekniikoita se tukee, kuinka turvallinen se on ja miten se toimii?
Onneksi Chrome tarjoaa työkaluja varmistaakseen, että kaikki sivustot tai sovellukset ovat parhaimmillaan. DevToolsin avulla suunnittelijat ja kehittäjät voivat saada käsityksen verkkosivusta: voit manipuloida DOM: ää, tarkistaa CSS: n, kokeilla malleja suoralla muokkauksella, korjata JavaScriptiä ja tarkistaa suorituskyvyn. (Katso lisätietoja näiden Google-verkkotyökalujen käytöstä täältä, ja jos aloitat tyhjästä, katso myös luettelo parhaista web-rakentajista).
Mutta Google tarjoaa muutakin kuin vain selaimen. Siinä on työkaluja ja resursseja, jotka auttavat lähes kaikkia suunnittelu- ja kehityselämääsi. Haluatko tietää kuinka parantaa suorituskykyä? Majakka on täällä auttamassa. Haluatko rakentaa tehokkaampia mobiilisivustoja? Sitten tervehdi AMP: tä. Etsitkö kauniita PWA-laitteita? Sitten Flutter, Material Design ja Workbox ovat valmiita astumaan sisään.
Google-työkalujen, resurssien, kirjastojen ja kehysten käytön kauneus on, että tiedät, että ne toimivat hyvin Chrome-selaimen kanssa - planeetan suosituimman selaimen kanssa. Lisää työkaluja on verkkosivujen suunnittelutyökaluissamme.
01. Majakka
Suorituskyky on avaintekijä sivuston menestyksessä ja Lighthouse on Googlen työkalu verkkosivujen laadun parantamiseen (myös oikea verkkopalvelupalvelu auttaa). Joten miten käytät majakkaa ja mitä se voi tehdä? Yksinkertaisimmassa muodossaan voit suorittaa Lighthousen Tarkastukset-välilehdeltä ja valita suorituskyvyn, saavutettavuuden ja hakukoneoptimoinnin valintaruutujen lisäksi useista vaihtoehdoista, mukaan lukien työpöytä tai mobiili, jotta voit luoda lopullisen raportin ehdotetuilla parannuksilla.
02. Polymeeri
Polymer on tunnettu työstään verkkokomponenttien kanssa, mutta projekti on nyt laajentanut ohjelmistoaan kattamaan kokoelman kirjastoja, työkaluja ja standardeja. Mitä sisältyy LitElement on editori, jonka avulla on helppo määrittää verkkokomponentteja, kun taas lit-html on HTML-mallikirjasto, jonka avulla käyttäjät voivat kirjoittaa seuraavan sukupolven HTML-malleja JS: ssä. Lisäksi löydät myös PWA Starter -sarjan, alkuperäisen Polymer-kirjaston ja verkkokomponenttisarjat.
03. APIs Explorer
Googlella on laaja sovellusliittymäkirjasto kehittäjien käytettävissä, mutta tarvitsemasi löytäminen ei ole helppoa. Tässä Google-sovellusliittymien Explorer tarjoaa apua. On pitkä luettelo, jota voidaan selata, mutta nopeamman pääsyn saamiseksi on hakukenttä API-luettelon suodattamiseksi. Jokainen merkintä linkittää viitesivulle, jossa on lisätietoja API: n käytöstä.
04. lepatus
Jos aiot rakentaa hyvännäköisiä sovelluksia mobiililaitteille, webille ja työpöydälle yhdestä kooditietokannasta, Flutter voisi olla sinulle. Sivusto on täydellinen viittaus työskentelyyn ja rakentamiseen Flutterin kanssa. Eikö sinulla ole aavistustakaan, mitä tehdä? Asiakirjat vievät käyttäjän asennuksesta luomiseen, jota auttavat monet näytteet ja oppaat.
05. Google GitHub
Kuten useimmat tietävät, GitHub on isännöintialusta / arkisto koodien ja tiedostojen tallentamiseen ja jakamiseen. Ja onneksi Googlella on oma paikka alustalla, jossa on yli 260 arkistoa. Käytä suodatinta vähentääksesi hakuaikaa ja päästäksesi lähemmäksi arkistoa, jolla haluat pelata tai johon haluat osallistua.
06. Nukkeja
Sisäänrakennettu solmu, Puppeteer tarjoaa korkean tason sovellusliittymän, jonka avulla voit käyttää päätöntä Chromea - tehokkaasti Chromea ilman käyttöliittymää, jota kehittäjät voivat sitten hallita komentorivillä. Joten mitä voit tehdä Puppeteerin kanssa? Muutama vaihtoehto on käytettävissä kuvakaappausten ja sivujen PDF-tiedostojen luomiseen, lomakkeiden lähettämisen automatisointiin ja automaattisen testausympäristön luomiseen.
07. Työlaatikko
Jos aiot rakentaa PWA: ta, tämä on hyvä lähtökohta. Workbox tarjoaa kokoelman JavaScript-kirjastoja offline-tuen lisäämiseksi verkkosovelluksiin. Valikoima perusteellisia oppaita osoittaa, kuinka luoda ja rekisteröidä huoltotyöntekijätiedosto, reitittää pyynnöt, käyttää laajennuksia ja käyttää nippuja Workboxin kanssa. Ja on myös joukko esimerkkejä välimuistin tallennusstrategioista.
08. Codelabs
Tarvitsetko käytännön ohjeita Google-tuotteesta? Codelabs tarjoaa "opastetun, opetusohjelman, käytännön koodauskokemuksen". Sivusto on jaoteltu siististi luokkiin ja tapahtumiin, joten sen löytäminen on nopeaa ja helppoa. Se sisältää Analyticsin, Androidin, Assistantin, lisätyn todellisuuden, Flutterin, G Suiten, haun, TensorFlow'n ja virtuaalitodellisuuden. Valitse vaihtoehto ja hanki koodi ja ohjeet, joita tarvitset pienten sovellusten luomiseen.
09. Värityökalu
Värityökalu on yksinkertainen työkalu, jonka avulla voit luoda, jakaa ja käyttää palettia esteettömyyden tarkistamisen lisäksi. Käyttäjät voivat valita ennalta määritetyn paletin Materiaalipaletista. Valitse vain väri ja lisää se sitten ensisijaiseen värimalliin, vaihda toissijaiseen vaihtoehtoon ja valitse uudelleen. Valitse lopuksi tekstin värit molemmille malleille. Vaihtoehtoisesti voit vaihtaa asetukseen Mukautettu valitsemaan värisi. Vaihda sitten Esteettömyys-tilaan ja tarkista, että kaikki on hyvää, ennen kuin lopuksi viet paletin.
10. Suunnitteluprintit
Design Sprint -sarja on tarkoitettu niille, jotka oppivat osallistumaan suunnittelusprintteihin tai suorittamaan niitä. Se näyttää kattavan kaikki tietopohjat, ensikertalaisista kokeneisiin sprintin ohjaajiin. Opi metodologiasta tai siirry suoraan suunnitteluvaiheeseen, mukaan lukien alushousujen kirjoittaminen, tietojen kerääminen ja tutkimus sekä mitä tehdä sprintin jälkeen. Sisältää myös joukon resursseja, kuten työkaluja, malleja, reseptejä ja mahdollisuuden lähettää oma menetelmäsi. Tarvitset todennäköisesti myös resursseja jonnekin tallentamaan ja jakamaan, joten varmista, että pilvitallennusvaihtoehtosi on oikein.
11. People + AI Guidebook
Tämä opas on Googlen People + AI -tutkimusaloitteen työtä, ja se näyttää tarjoavan apua ihmisläheisen tekoälyn tuotteiden rakentamiseen. Kattava opas on jaettu kuuteen lukuun, jotka käsittelevät käyttäjien tarpeita, tiedonkeruuta ja arviointia, henkisiä malleja, luottamusta, palautetta ja sulavaa epäonnistumista. Jokaiseen lukuun liittyy harjoituksia, laskentataulukoita sekä työkaluja ja resursseja, joita tarvitaan sen toteuttamiseen.
12. Google Assistant
Tämä on Google Assistantin kehittäjäalusta, joka tarjoaa oppaan sisällön ja palveluiden integroimisesta Google Assistantiin. Se näyttää, kuinka voit laajentaa mobiilisovellustasi, esitellä sisältöä monipuolisilla tavoilla hakua ja avustajaa varten, ohjata valoja, kahvinkeittimiä ja muita laitteita kodin ympäri ja rakentaa ääni- ja visuaalisia kokemuksia älykkäille kaiuttimille, näytöille ja puhelimille.
13. PageSpeed Insights
PageSpeed Insights analysoi verkkosisältöä ja tarjoaa sitten ehdotuksia sen lataamiseksi nopeammin. Lisää vain URL, paina Analysoi-painiketta ja odota taikuuden tapahtumista. Tarkista dokumentit saadaksesi paremman käsityksen siitä, miten PageSpeed-sovellusliittymä toimii ja miten sen käyttö aloitetaan.
14. AMP Googlessa
AMP on Googlen työkalu nopeasti latautuvien mobiilisivujen luomiseen, jotka (toivottavasti) pääsevät hakusijoitusten kärkeen. Opi luomaan nopeita, käyttäjä ensin -sivustoja, integroimaan AMP Google-tuotteisiin, käyttämään Google AMP -välimuistia AMP-sivujen nopeuttamiseksi ja kaupallistamaan AMP-sivut muiden Google-tuotteiden kanssa.
15. Google DevTools
Jokainen suunnittelija ja kehittäjä tietää (tai ainakin pitäisi tietää), että Chromessa on joukko työkaluja, jotka on rakennettu suoraan selaimeen. Chromen DevToolit ovat ihanteellisia sivun muodostavien elementtien tarkastamiseen, CSS: n tarkistamiseen, sivujen muokkaamiseen lennossa ja paljon muuta.
Elementit-välilehti on DevToolsin esittely. Se näyttää HTML-koodin, joka muodostaa valitun sivun. Hanki käsitys valitun sivun jokaisen div: n tai tagin ominaisuuksista ja aloita reaaliaikainen muokkaus. Tämä on täydellinen kokeilemaan malleja. Tarkista Asettelu - onko käytössäsi Flexbox tai Ruudukko - ja katso asiaan liittyviä fontteja esimerkkien avulla ja tutki animaatioita.
Muualla voit tarkastella ja muuttaa CSS: ää. Elementit-paneelin Tyylit-välilehdessä luetellaan CSS-säännöt, joita sovelletaan DOM-puun parhaillaan valittuun elementtiin. Kytke ominaisuudet päälle ja pois päältä (tai lisää uusia arvoja) kokeillaksesi malleja. Tämä on täydellinen työkalu sen varmistamiseksi, että kaikki toimii odotetusti ennen muutosten tekemistä live-suunnitteluun.
Voit myös debugata JavaScriptiä, optimoida verkkosivuston nopeuden ja tarkistaa verkon nopeuden. Tässä on nopea vinkki, jolla voit nopeuttaa työnkulkua välittömästi. Siirry Lähteet-välilehteen, napsauta Uusi katkelma ja lisää usein käytetty koodi. Nimeä koodinpätkä ja tallenna. Toista tarvittaessa. Nyt voit napata tämän koodinpätkän kirjoittamisen sijaan.
Kuten jokainen hyvä selain, Chrome kehittyy jatkuvasti ja jokainen uusi julkaisu tuo uusia ominaisuuksia. Selvitä, mitä tapahtuu Chromen tila-alustalla
16. Materiaalisuunnittelu
Kehitystä voidaan pitää Googlen suosimana lapsena, mutta riippumatta siitä, mitä teet, luot tai rakennat, sen on näytettävä hyvältä ja annettava käyttäjälle kokemus, joka saa heidät haluamaan käyttää sitä. Materiaali on uudempi lisäys Google-talliin, mutta se on suunnittelujärjestelmä, joka on kypsynyt tärkeäksi osaksi suunnittelupakettia.
Kuten kaikilla hyvillä suunnittelujärjestelmillä, sillä on omat ohjeet, joita sinun on tarkasteltava ennen kuin astut mielenkiintoisempiin juttuihin. Hanki yleiskatsaus eri elementtien käyttämiseen, mikä on materiaaliteema, kuinka teema ja käyttöoppaat, mukaan lukien esteettömyys, toteutetaan. Muualla on käsitys Material Foundationista, joka sisältää suunnittelun keskeiset alueet, kuten ulkoasun, navigoinnin, värin, typografian, äänen, ikonografian, liikkeen ja vuorovaikutuksen. Kukin luokka paljastaa sen asiat ja kiellot ja seikat, joihin kannattaa harkita varovaisuutta. Asetteluluokka tarjoaa käsityksen siitä, mitä odottaa, asettelusta, pikselitiheydestä ja reagoivan asettelun käsittelemisestä, mukaan lukien sarakkeet, kourut ja marginaalit, katkaisupisteet, käyttöliittymän alueet ja välitysmenetelmät.
Suunnittelu -osion ulkopuolella on Komponentit, joka tarjoaa suunnittelun luomiseen tarvittavat fyysiset rakennuspalikat. Mitä tähän sisältyy? Painikkeet, bannerit, kortit, valintaikkunat, jakajat, luettelot, valikot, edistymisen osoittimet, liukusäätimet, välipalat (nämä ovat lyhyitä viestejä sovelluksen prosesseista näytön alareunassa), välilehdet, tekstikentät ja työkaluvihjeet. Epäilemättä kattava komponenttikokoelma.
Kehittäjiä ei ole unohdettu, ja niissä on yksityiskohtia ja opetusohjelmia rakentamiseen eri alustoille - Android, iOS, Web ja Flutter. Ja lopuksi, on olemassa sivu, joka on omistettu useille resursseille, jotta valitsemasi muotoilu toteutettaisiin.
Tämä artikkeli ilmestyi alun perin verkkolehdessä. Osta numero 326.
