Sadržaj
- 01. Svjetionik
- 02. Polimer
- 03. APIs Explorer
- 04. Lepršanje
- 05. Google GitHub
- 06. Lutkar
- 07. radna kutija
- 08. Codelabs
- 09. Alat u boji
- 10. Dizajn sprintova
- 11. Vodič za ljude + AI
- 12. Google asistent
- 13. PageSpeed Insights
- 14. AMP na Googleu
- 15. Google DevTools
- 16. Dizajn materijala
Rad na webu obično znači da ćete surađivati s Googleom u nekom obliku ili obliku. A budući da je Google Chrome ulice ispred konkurencije, dizajneri i programeri moraju razmisliti o tome kako će njihov projekt funkcionirati s preglednikom. Kako će izgledati? Koje tehnologije podržava, koliko je sigurna i kako će se izvoditi?
Srećom, Chrome nudi alate koji osiguravaju da bilo koja web lokacija ili aplikacija budu u najboljem izdanju. DevTools omogućavaju dizajnerima i programerima da dobiju uvid u web stranicu: možete manipulirati DOM-om, provjeriti CSS, eksperimentirati na dizajnu s uređivanjem uživo, otkloniti pogreške u JavaScriptu i provjeriti izvedbu. (Ovdje pogledajte više o tome kako koristiti ove Googleove web alate, a ako krećete od nule, pogledajte i naš popis najboljih web graditelja).
Ali Google nudi više od samog preglednika. Ima alate i resurse koji pomažu gotovo svim aspektima vašeg dizajnerskog i razvojnog života. Želite znati kako poboljšati performanse? Svjetionik je ovdje da pomogne. Želite li izraditi mobilne web stranice s boljim učinkom? Zatim pozdravite AMP. Želite li izgraditi lijepe PWA-ove? Tada su Flutter, Material Design i Workbox spremni za ulazak.
Ljepota korištenja Googleovih alata, resursa, knjižnica i okvira je u tome što znate da će dobro funkcionirati s preglednikom Chrome - najpopularnijim preglednikom na planeti. Za više alata pogledajte naš pregled alata za web dizajn.
01. Svjetionik
Izvedba je ključni čimbenik uspjeha web stranice, a Lighthouse je Googleov alat za poboljšanje kvalitete web stranica (pomoći će i prava usluga web hostinga). Pa kako koristite Lighthouse i što on može učiniti? U najjednostavnijem obliku, Lighthouse možete pokrenuti na kartici Revizije i odabrati jednu od opcija, uključujući radnu površinu ili mobitel, pored kvačica za izvedbu, pristupačnost i SEO, kako biste generirali konačno izvješće s predloženim poboljšanjima.
02. Polimer
Polymer je poznat po radu s web komponentama, ali projekt je sada proširio svoj repertoar tako da obuhvaća zbirku knjižnica, alata i standarda. Što je uključeno? LitElement je uređivač koji olakšava definiranje web komponenata, dok je lit-html HTML biblioteka za predloške koja korisnicima omogućuje pisanje HTML-predloga sljedeće generacije u JS-u. Uz to, pronaći ćete i PWA Starter komplet, originalnu biblioteku Polymer i setove web komponenata.
03. APIs Explorer
Google ima ogromnu biblioteku API-ja dostupnih programerima, ali pronalazak onoga što vam nije lak zadatak. Ovdje stupa Googleov istraživač API-ja pružajući ruku pomoći. Dug je popis koji se može pomicati, ali za brži pristup postoji okvir za pretraživanje za filtriranje popisa API-ja. Svaki unos vodi do referentne stranice s više pojedinosti o tome kako koristiti API.
04. Lepršanje
Ako tražite izgradnju lijepih aplikacija za mobitele, web i radne površine iz jedne baze koda, tada bi Flutter mogao biti za vas. Stranica je cjelovita referenca za rad i izradu s Flutterom. Niste pojma što učiniti? Dokumenti vode korisnika od instalacije do stvaranja, uz pomoć mnoštva uzoraka i vodiča.
05. Google GitHub
Kao što će većina znati, GitHub je hosting platforma / spremište za pohranu i dijeljenje koda i datoteka. Na sreću, Google ima svoje mjesto na platformi s više od 260 spremišta za prebiranje. Upotrijebite filtar da biste smanjili vrijeme pretraživanja i približili se spremištu s kojim se želite igrati ili u kojem želite pridonijeti.
06. Lutkar
Izgrađen u Nodeu, Puppeteer nudi API na visokoj razini koji vam omogućuje pristup Chromeu bez glave - učinkovito Chromeu bez korisničkog sučelja, koji programeri mogu kontrolirati putem naredbenog retka. Pa, što možete učiniti s Puppeteerom? Dostupno je nekoliko opcija za generiranje snimki zaslona i PDF-ova stranica, automatizaciju slanja obrazaca i stvaranje automatiziranog testnog okruženja.
07. radna kutija
Ako želite izgraditi PWA, ovo je izvrsna polazna točka. Workbox nudi zbirku JavaScript knjižnica za dodavanje izvanmrežne podrške web aplikacijama. Izbor detaljnih vodiča pokazuje kako stvoriti i registrirati datoteku uslužnog radnika, zahtjeve za usmjeravanje, upotrijebiti dodatke i koristiti snopove s Workboxom. A tu je i niz primjera strategija predmemoriranja koje treba provjeriti.
08. Codelabs
Trebate praktične smjernice za Googleov proizvod? Codelabs nudi "vođeno, tutorial, praktično iskustvo kodiranja". Web mjesto je lijepo podijeljeno na kategorije i događaje, što omogućuje brzo i jednostavno pronalaženje onoga što želite. Uključuje Analytics, Android, Assistant, proširenu stvarnost, Flutter, G Suite, Search, TensorFlow i virtualnu stvarnost. Odaberite opciju i dođite do koda i uputa potrebnih za izradu malih aplikacija.
09. Alat u boji
Alat za boje jednostavan je alat koji vam omogućuje stvaranje, dijeljenje i primjenu palete uz provjeru pristupačnosti. Korisnici mogu odabrati unaprijed definiranu paletu iz palete Materijal. Jednostavno odaberite boju, a zatim je primijenite na primarnu shemu boja, prebacite se na sekundarnu opciju i odaberite ponovo. Na kraju, odaberite boje teksta za obje sheme. Alternativno, prebacite se na Prilagođeno da biste odabrali boje. Zatim prijeđite na Pristupačnost kako biste provjerili je li sve dobro prije, konačno, izvoza palete.
10. Dizajn sprintova
Design Sprint Kit namijenjen je onima koji uče kako sudjelovati u dizajnerskim sprintima ili ih izvoditi. Čini se da pokriva sve baze znanja, od prvaka do iskusnih voditelja sprinta. Saznajte više o metodologiji ili uskočite izravno u fazu planiranja, uključujući pisanje podloga, prikupljanje podataka i istraživanja, kao i što učiniti nakon sprinta. Također uključuje mnoštvo resursa kao što su alati, predlošci, recepti i mogućnost slanja vlastite metode. Također, vjerojatno će vam trebati negdje za pohranu i dijeljenje resursa, pa provjerite je li odabran vaš odabir za pohranu u oblaku.
11. Vodič za ljude + AI
Ovaj je vodič djelo inicijative People + AI Research pri Googleu i čini se da nudi pomoć onima koji žele graditi AI proizvode usmjerene na čovjeka. Opsežni vodič podijeljen je u šest poglavlja koja pokrivaju potrebe korisnika, prikupljanje i procjenu podataka, mentalne modele, povjerenje, povratne informacije i graciozan neuspjeh. Svako poglavlje popraćeno je vježbama, radnim listovima te alatima i resursima koji su potrebni za njegovo ostvarivanje.
12. Google asistent
Ovo je razvojna platforma Google Asistenta koja nudi vodič za integraciju vašeg sadržaja i usluga s Google Asistentom. Pokazuje vam kako proširiti mobilnu aplikaciju, predstaviti sadržaj na bogate načine za Search i Assistant, upravljati svjetlima, aparatima za kavu i drugim uređajima po kući i graditi glasovna i vizualna iskustva za pametne zvučnike, zaslone i telefone.
13. PageSpeed Insights
PageSpeed Insights analizira web sadržaj, a zatim nudi prijedloge kako ubrzati njegovo učitavanje. Jednostavno dodajte URL, pritisnite gumb Analiziraj i pričekajte da se magija dogodi. Provjerite dokumente da biste dobili bolji uvid u to kako funkcionira PageSpeed API i kako ga početi koristiti.
14. AMP na Googleu
AMP je Googleov alat za stvaranje mobilnih stranica s brzim učitavanjem koje će (nadamo se) doći na vrh ljestvice pretraživanja. Naučite kako stvoriti brze web stranice koje su najprije korisničke, integrirati AMP u Googleove proizvode, upotrijebiti Google AMP predmemoriju za ubrzanje AMP stranica i unovčiti AMP stranice s drugim Googleovim proizvodima.
15. Google DevTools
Svaki dizajner i programer zna (ili bi barem trebao znati) da Chrome dolazi s nizom alata ugrađenih izravno u preglednik. Chromeovi DevTools idealni su za pregled elemenata koji čine stranicu, provjeru CSS-a, brzo uređivanje stranica i još mnogo toga.
Kartica Elementi uvod je u DevTools. Prikazuje HTML kôd koji čini odabranu stranicu. Steknite uvid u svojstva svakog div-a ili oznake s odabrane stranice i započnite uređivanje uživo. Ovo je savršeno za eksperimentiranje s dizajnom. Provjerite izgled - koristite li Flexbox ili Grid - i pogledajte srodne fontove s primjerima i pregledajte animacije.
Na drugim mjestima možete pregledavati i mijenjati CSS. Kartica Stilovi na ploči Elementi navodi CSS pravila koja se primjenjuju na trenutno odabrani element u DOM stablu. Uključite i isključite svojstva (ili dodajte nove vrijednosti) da biste eksperimentirali s dizajnom. Ovo je savršen alat za osiguravanje da sve funkcionira prema očekivanjima prije primjene bilo kakvih promjena na dizajnu uživo.
Također možete otkloniti pogreške u JavaScriptu, optimizirati brzinu web stranice i provjeriti brzinu mreže. Evo kratkog savjeta pomoću kojeg možete odmah ubrzati svoj tijek rada. Idite na karticu Izvori, kliknite Novi isječak i dodajte često korišteni kôd. Imenujte isječak koda i spremite. Po potrebi ponovite. Sada možete zgrabiti ovaj isječak koda umjesto da ga ponovno napišete.
Kao i svaki dobar preglednik, Chrome se neprestano razvija i svako novo izdanje donosi nove značajke. Saznajte što se događa na platformi statusa Chrome
16. Dizajn materijala
Razvoj se može doživljavati kao Googleovo omiljeno dijete, ali, što god izrađivali, stvarali ili izgrađivali, ono mora izgledati dobro i pružiti korisniku iskustvo zbog kojeg ga želi koristiti. Materijal je noviji dodatak Googleovoj staji, ali je sustav dizajna koji je sazrio u vitalni dio dizajnerskog kompleta.
Kao i svaki dobar sustav dizajna, i on ima svoj vlastiti niz smjernica koje morate pogledati prije nego što prijeđete na uzbudljivije stvari. Dobijte pregled kako koristiti različite elemente, što je tematika materijala, kako implementirati temu i vodiče za upotrebljivost, uključujući pristupačnost. Drugdje postoji uvid u Material Foundation, koji uključuje ključna područja dizajna poput izgleda, navigacije, boje, tipografije, zvuka, ikonografije, pokreta i interakcije. Svaka kategorija otkriva svoje prednosti i nedostatke te mjesta na kojima biste trebali razmotriti oprez. Da bi imala ideju što očekivati, kategorija Layout nudi odjeljke o razumijevanju izgleda, gustoće piksela, načinu rada s responzivnim rasporedom, uključujući stupce, oluke i margine, točke prekida, regije korisničkog sučelja i metode razmaka.
Iza odjeljka Dizajn nalazi se Komponente, koji pruža fizičke građevne blokove potrebne za izradu dizajna. Što je ovdje uključeno? Gumbi, natpisi, kartice, dijaloški okviri, razdjelnici, popisi, izbornici, indikatori napretka, klizači, brzi barovi (ovo su kratke poruke o procesima aplikacija na dnu zaslona), kartice, tekstualna polja i opisi alata. Nesumnjivo sveobuhvatna kolekcija komponenata.
A programeri nisu zaboravljeni, s detaljima i vodičima o tome kako graditi za različite platforme - Android, iOS, Web i Flutter. I na kraju, postoji stranica posvećena mnoštvu resursa koji pomažu u ostvarenju vašeg odabranog dizajna.
Ovaj se članak izvorno pojavio u časopisu net. Kupi izdanje 326.
