Obsah
- 01. Maják
- 02. Polymér
- 03. Prieskumník API
- 04. flutter
- 05. Google GitHub
- 06. Bábkar
- 07. Pracovná skrinka
- 08. Codelabs
- 09. Farebný nástroj
- 10. Dizajnové šprinty
- 11. Sprievodca ľuďmi + AI
- 12. Asistent Google
- 13. PageSpeed Insights
- 14. AMP na Googli
- 15. Google DevTools
- 16. Materiálové prevedenie
Práca na webe zvyčajne znamená, že budete pracovať so spoločnosťou Google v nejakej podobe alebo podobe. A keďže je Google Chrome v uliciach pred konkurenciou, musia dizajnéri a vývojári myslieť na to, ako bude ich projekt s prehliadačom fungovať. Ako to bude vyzerať? Aké technológie podporuje, aká je bezpečná a ako bude fungovať?
Prehliadač Chrome našťastie poskytuje nástroje, ktoré zabezpečia, aby bol akýkoľvek web alebo aplikácia v najlepšom. DevTools umožňujú návrhárom a vývojárom získať prehľad o webovej stránke: môžete manipulovať s DOM, kontrolovať CSS, experimentovať s návrhmi pomocou živých úprav, ladiť JavaScript a kontrolovať výkon. (Prečítajte si viac informácií o tom, ako používať tieto webové nástroje Google, a ak začínate úplne od začiatku, pozrite si tiež náš zoznam najlepších tvorcov webových stránok).
Google však ponúka nielen prehliadač. Má nástroje a zdroje, ktoré pomáhajú takmer všetkým aspektom vášho návrhárskeho a vývojového života. Chcete vedieť, ako zlepšiť výkon? Maják je tu, aby pomohol. Chcete vytvárať výkonnejšie mobilné weby? Potom pozdravte AMP. Chcete vytvoriť nádherné PWA? Potom sú Flutter, Material Design a Workbox pripravené zasiahnuť.
Krása používania nástrojov, zdrojov, knižníc a rámcov Google spočíva v tom, že viete, že budú fungovať dobre s prehliadačom Chrome - najpopulárnejším prehliadačom na planéte. Ďalšie nástroje nájdete v prehľade nástrojov webového dizajnu.
01. Maják
Výkon je kľúčovým faktorom úspechu stránky a Lighthouse je nástroj spoločnosti Google na zlepšenie kvality webových stránok (pomôže aj správna webhostingová služba). Ako teda používate Lighthouse a čo môže robiť? V najjednoduchšej forme môžete Lighthouse spustiť na karte Audity a okrem začiarkavacích políčok pre výkon, dostupnosť a SEO môžete okrem generovania záverečnej správy s navrhovanými vylepšeniami vybrať aj z niekoľkých možností vrátane stolných alebo mobilných.
02. Polymér
Polymer je známy svojou prácou s webovými komponentmi, ale projekt teraz rozšíril svoj repertoár tak, aby obsahoval zbierku knižníc, nástrojov a štandardov. Čo je v cene? LitElement je editor, ktorý uľahčuje definovanie webových komponentov, zatiaľ čo lit-html je knižnica šablón HTML, ktorá umožňuje používateľom písať šablóny HTML novej generácie v JS. Navyše tu nájdete aj štartovaciu sadu PWA, originálnu polymérnu knižnicu a sady webových komponentov.
03. Prieskumník API
Google má pre vývojárov k dispozícii rozsiahlu knižnicu rozhraní API, ale nájsť to, čo potrebujete, nie je ľahká úloha. To je miesto, kde vstupuje Google APIs Explorer a ponúka pomocnú ruku. Existuje dlhý zoznam, ktorým sa dá listovať, ale pre rýchlejší prístup je k dispozícii vyhľadávacie pole na filtrovanie zoznamu API. Každá položka odkazuje na referenčnú stránku s ďalšími podrobnosťami o tom, ako používať API.
04. flutter
Ak hľadáte vytvorenie dobre vyzerajúcich aplikácií pre mobilné telefóny, web a stolné počítače z jedinej kódovej základne, potom by pre vás mohol byť Flutter. Stránka je kompletným odkazom na spoluprácu s Flutterom a na jeho budovaní. Netušíte, čo robiť? Dokumenty prevedú používateľa od inštalácie po vytvorenie, pričom mu pomôže množstvo ukážok a tutoriálov.
05. Google GitHub
Ako väčšina bude vedieť, GitHub je hostiteľská platforma / úložisko na ukladanie a zdieľanie kódu a súborov. A našťastie má Google na platforme svoje vlastné miesto s viac ako 260 úložiskami, cez ktoré sa dá preosiať. Pomocou filtra môžete skrátiť čas hľadania a priblížiť sa k úložisku, s ktorým chcete hrať alebo do ktorého prispievať.
06. Bábkar
Puppeteer je vstavaný uzol a ponúka rozhranie API na vysokej úrovni, ktoré vám umožňuje prístup k bezhlavému prehliadaču Chrome - efektívne k prehliadaču Chrome bez používateľského rozhrania, ktoré potom môžu vývojári ovládať prostredníctvom príkazového riadku. Čo teda môžete robiť s Puppeteer? K dispozícii je niekoľko možností na generovanie snímok obrazovky a PDF stránok, automatizáciu odosielania formulárov a vytváranie automatizovaného testovacieho prostredia.
07. Pracovná skrinka
Ak hľadáte vytvorenie PWA, je to vynikajúci východiskový bod. Workbox poskytuje zbierku knižníc JavaScriptu na pridávanie podpory offline do webových aplikácií. Výber podrobných sprievodcov demonštruje, ako vytvoriť a zaregistrovať súbor servisného pracovníka, smerovať požiadavky, používať doplnky a zväzky pomocou Workboxu. A je tu tiež súbor príkladov stratégií ukladania do vyrovnávacej pamäte, ktoré je potrebné vyskúšať.
08. Codelabs
Potrebujete praktické pokyny pre produkt Google? Codelabs poskytuje „riadený výukový program s praktickým programovaním“. Stránka je prehľadne rozdelená do kategórií a udalostí, vďaka čomu je možné rýchlo a ľahko nájsť to, čo hľadáte. Zahŕňa analytiku, Android, asistenta, rozšírenú realitu, flutter, G Suite, vyhľadávanie, TensorFlow a virtuálnu realitu. Vyberte jednu z možností a získajte kód a pokyny, ktoré potrebujete na zostavenie malých aplikácií.
09. Farebný nástroj
Farebný nástroj je priamy nástroj, ktorý vám okrem kontroly prístupnosti umožňuje vytvárať, zdieľať a aplikovať paletu. Používatelia si môžu vybrať preddefinovanú paletu z palety Materiál. Jednoducho vyberte farbu a potom ju použite na primárnu farebnú schému, prepnite na sekundárnu možnosť a vyberte ju znova. Nakoniec vyberte farby textu pre obe schémy. Prípadne prepnite na možnosť Vlastné a vyberte si farby. Potom prepnite na Prístupnosť a pred exportom palety skontrolujte, či je všetko v poriadku.
10. Dizajnové šprinty
Sada Design Sprint Kit je určená pre tých, ktorí sa učia, ako sa zúčastniť alebo spustiť dizajnové sprinty. Zdá sa, že pokrýva všetky vedomostné základne, od nováčikov až po skúsených sprostredkovateľov šprintov. Dozviete sa viac o metodológii alebo sa dostanete priamo do fázy plánovania, vrátane písania briefov, zhromažďovania údajov a prieskumu, ako aj toho, čo robiť po šprinte. Zahŕňa tiež množstvo zdrojov, ako sú nástroje, šablóny, recepty a možnosť odoslať vlastnú metódu. Pravdepodobne budete tiež musieť niekde ukladať a zdieľať zdroje, takže dbajte na to, aby bol váš výber cloudového úložiska na mieste.
11. Sprievodca ľuďmi + AI
Táto príručka je výsledkom iniciatívy People + AI Research spoločnosti Google a snaží sa ponúknuť pomoc tým, ktorí chcú vyrábať produkty AI zamerané na človeka. Komplexný sprievodca je rozdelený do šiestich kapitol týkajúcich sa potrieb používateľov, zhromažďovania a vyhodnocovania údajov, mentálnych modelov, dôvery, spätnej väzby a ladného zlyhania. Každú kapitolu sprevádzajú cvičenia, pracovné listy a nástroje a zdroje potrebné na jej uskutočnenie.
12. Asistent Google
Toto je vývojárska platforma Google Assistant, ktorá ponúka sprievodcu integráciou vášho obsahu a služieb s Google Assistant. Ukáže vám, ako rozšíriť svoju mobilnú aplikáciu, predstaviť bohatým spôsobom obsah pre vyhľadávače a asistenta, ovládať svetlá, kávovary a ďalšie zariadenia v domácnosti a vytvárať hlasové a vizuálne zážitky pre inteligentné reproduktory, displeje a telefóny.
13. PageSpeed Insights
PageSpeed Insights analyzuje webový obsah a potom ponúka návrhy, ako ho načítať rýchlejšie. Jednoducho pridajte adresu URL, stlačte tlačidlo Analyzovať a počkajte, kým sa stane kúzlo. Skontrolujte Dokumenty a získate lepší prehľad o tom, ako funguje rozhranie PageSpeed API a ako ho začať používať.
14. AMP na Googli
AMP je nástroj spoločnosti Google na vytváranie rýchlo sa načítajúcich mobilných stránok, ktoré sa (dúfajme) dostanú na popredné priečky vo vyhľadávaní. Naučte sa, ako vytvárať rýchle weby zamerané na používateľa, integrovať AMP do všetkých produktov Google, používať medzipamäť Google AMP Cache na zrýchlenie stránok AMP a speňažiť stránky AMP s inými produktmi Google.
15. Google DevTools
Každý dizajnér a vývojár vie (alebo by mal aspoň vedieť), že Chrome je dodávaný so sadou nástrojov zabudovaných priamo do prehliadača. Nástroje DevTools prehliadača Chrome sú ideálne na kontrolu prvkov, ktoré tvoria stránku, kontrolu CSS, priebežné úpravy stránok a oveľa viac.
Karta Prvky predstavuje úvod do nástroja DevTools. Zobrazuje HTML kód, ktorý tvorí vybranú stránku. Získajte prehľad o vlastnostiach každého prvku div alebo značky z vybranej stránky a začnite živé úpravy. To je ideálne riešenie pre experimentovanie s dizajnom. Skontrolujte rozloženie - či už používate Flexbox alebo Grid - a pozrite si príbuzné písma s príkladmi a preskúmajte animácie.
Všade môžete zobraziť a zmeniť CSS. Na karte Štýly na paneli Elements je uvedený zoznam pravidiel CSS, ktoré sa použijú na aktuálne vybraný prvok v strome DOM. Ak chcete experimentovať s návrhmi, zapnite a vypnite vlastnosti (alebo pridajte nové hodnoty). To je dokonalý nástroj na zabezpečenie toho, aby všetko fungovalo podľa očakávaní pred vykonaním akýchkoľvek zmien v živom dizajne.
Môžete tiež ladiť JavaScript, optimalizovať rýchlosť webových stránok a kontrolovať rýchlosť siete. Tu je rýchly tip, ktorým môžete okamžite zrýchliť pracovný tok. Prejdite na kartu Zdroje, kliknite na položku Nový úryvok a pridajte často používaný kód. Pomenujte útržok kódu a uložte. Opakujte podľa potreby. Teraz môžete tento útržok kódu namiesto opätovného písania chytiť.
Ako každý dobrý prehliadač, aj Chrome sa neustále vyvíja a každé nové vydanie prináša nové funkcie. Zistite, čo sa deje na stavovej platforme Chrome
16. Materiálové prevedenie
Na vývoj sa dá pozerať ako na dieťa, ktoré Google uprednostňuje, ale nech už robíte, tvoríte alebo budujete čokoľvek, musí vyzerať dobre a poskytnúť používateľovi zážitok, ktorý ho prinúti ho používať. Material je novší prírastok do stajne Google, ale je to dizajnérsky systém, z ktorého vzišiel životne dôležitý kúsok dizajnérskej súpravy.
Ako každý dobrý dizajnový systém, aj tento má svoju vlastnú sadu pokynov, ktoré si musíte pozrieť, než vstúpite do vzrušujúcejších vecí. Získajte prehľad o tom, ako používať rôzne prvky, čo je materiálová tematika, ako implementovať tému a príručky použiteľnosti vrátane prístupnosti. Nech už je to kdekoľvek, nahliadneme do Material Foundation, ktorá obsahuje kľúčové oblasti dizajnu, ako sú rozloženie, navigácia, farba, typografia, zvuk, ikonografia, pohyb a interakcia. Každá kategória odhaľuje svoje výhody a nevýhody a to, kde by ste mali byť opatrní. Aby ste mali predstavu o tom, čo môžete čakať, kategória Layout ponúka časti týkajúce sa porozumenia rozloženia, hustoty pixelov, spôsobu práce s responzívnym rozložením vrátane stĺpcov, odkvapov a okrajov, zarážok, oblastí používateľského rozhrania a metód rozstupov, aby sme vymenovali aspoň niektoré ďalšie.
Za časťou Dizajn sa nachádzajú komponenty, ktoré poskytujú fyzické stavebné prvky potrebné na vytvorenie dizajnu. Čo je tu zahrnuté? Tlačidlá, bannery, karty, dialógové okná, rozdeľovače, zoznamy, ponuky, indikátory priebehu, posúvače, lišty (v dolnej časti obrazovky sú to stručné správy o procesoch aplikácií), karty, textové polia a popisky. Nepochybne komplexná zbierka komponentov.
Nezabudlo sa ani na vývojárov s podrobnosťami a návodmi, ako stavať pre rôzne platformy - Android, iOS, Web a Flutter. A nakoniec je tu stránka venovaná množstvu zdrojov, ktoré vám pomôžu uskutočniť zvolený dizajn.
Tento článok sa pôvodne objavil v časopise net. Kúpte si číslo 326.
