Obsah
- 01. Maják
- 02. Polymer
- 03. APIs Explorer
- 04. Třepetání
- 05. Google GitHub
- 06. Loutkář
- 07. Workbox
- 08. Codelabs
- 09. Barevný nástroj
- 10. Návrhové sprinty
- 11. Průvodce People + AI
- 12. Google Assistant
- 13. PageSpeed Insights
- 14. AMP na Googlu
- 15. Google DevTools
- 16. Materiálové provedení
Práce na webu obvykle znamená, že budete s Googlem pracovat v nějaké formě nebo formě. A protože je Google Chrome v ulicích před konkurencí, designéři a vývojáři musí přemýšlet o tom, jak bude jejich projekt s prohlížečem fungovat. Jak to bude vypadat Jaké technologie podporuje, jak bezpečná je a jak bude fungovat?
Naštěstí Chrome poskytuje nástroje, které zajišťují, že jakýkoli web nebo aplikace bude nejlepší. DevTools umožňují návrhářům a vývojářům získat přehled o webové stránce: můžete manipulovat s DOM, kontrolovat CSS, experimentovat na designech s živými úpravami, ladit JavaScript a kontrolovat výkon. (Zde se dozvíte více o tom, jak používat tyto webové nástroje Google, a pokud začínáte úplně od začátku, podívejte se také na náš seznam nejlepších webových tvůrců).
Google ale nenabízí jen prohlížeč. Má nástroje a zdroje, které pomáhají téměř každému aspektu vašeho designu a vývoje. Chcete vědět, jak zlepšit výkon? Maják je tu, aby vám pomohl. Chcete vytvářet mobilní webové stránky s lepšími výsledky? Pak pozdravte AMP. Hledáte stavbu krásných PWA? Pak jsou Flutter, Material Design a Workbox připraveni zasáhnout.
Krása používání nástrojů, zdrojů, knihoven a rámců Google spočívá v tom, že víte, že budou dobře fungovat s prohlížečem Chrome - nejoblíbenějším prohlížečem na planetě. Další nástroje najdete v přehledu nástrojů web designu.
01. Maják
Výkon je klíčovým faktorem úspěchu webu a Lighthouse je nástroj Google pro zlepšení kvality webových stránek (pomůže také správná webhostingová služba). Jak tedy používáte Lighthouse a co může dělat? V nejjednodušší podobě můžete Lighthouse spustit na kartě Audity a vybrat si z výběru možností, včetně stolního nebo mobilního, kromě zaškrtávacích políček pro výkon, dostupnost a SEO, a vygenerovat závěrečnou zprávu s navrhovanými vylepšeními.
02. Polymer
Polymer je známý svou prací s webovými komponentami, ale projekt nyní rozšířil svůj repertoár o soubor knihoven, nástrojů a standardů. Co je v ceně? LitElement je editor, který usnadňuje definování webových komponent, zatímco lit-html je knihovna šablon HTML, která umožňuje uživatelům psát šablony HTML nové generace v JS. Navíc najdete také sadu PWA Starter, originální knihovnu polymerů a sady webových komponent.
03. APIs Explorer
Google má pro vývojáře k dispozici rozsáhlou knihovnu API, ale najít to, co potřebujete, není snadný úkol. Tady vstupuje Průzkumník API Google, který nabízí pomocnou ruku. Existuje dlouhý seznam, který lze procházet, ale pro rychlejší přístup existuje vyhledávací pole k filtrování seznamu API. Každá položka odkazuje na referenční stránku s dalšími podrobnostmi o tom, jak používat API.
04. Třepetání
Pokud hledáte vybudovat dobře vypadající aplikace pro mobilní zařízení, web a stolní počítače z jediné základny kódů, pak by pro vás mohl být Flutter. Stránka je úplným odkazem na spolupráci s Flutterem a na jeho budování. Nemáte ponětí, co dělat? Dokumenty vezmou uživatele od instalace po vytvoření, za pomoci spousty ukázek a výukových programů.
05. Google GitHub
Jak většina bude vědět, GitHub je hostitelská platforma / úložiště pro ukládání a sdílení kódu a souborů. A Google má naštěstí své vlastní místo na platformě s více než 260 úložišti, která lze projít. Pomocí filtru zkrátíte čas hledání a přiblížíte se k úložišti, se kterým chcete hrát nebo do kterého chcete přispět.
06. Loutkář
Puppeteer je integrovaný uzel a nabízí rozhraní API na vysoké úrovni, které vám umožní přístup k bezhlavému prohlížeči Chrome - účinně k prohlížeči Chrome bez uživatelského rozhraní, které mohou vývojáři ovládat prostřednictvím příkazového řádku. Co tedy můžete dělat s Puppeteerem? K dispozici je několik možností pro generování screenshotů a PDF stránek, automatizaci odesílání formulářů a vytváření automatizovaného testovacího prostředí.
07. Workbox
Pokud hledáte vybudovat PWA, je to skvělý výchozí bod. Workbox poskytuje sbírku knihoven JavaScriptu pro přidávání offline podpory webovým aplikacím. Výběr podrobných průvodců ukazuje, jak vytvořit a zaregistrovat soubor servisního pracovníka, směrovat požadavky, používat pluginy a používat svazky s Workboxem. K dispozici je také sada příkladů strategií ukládání do mezipaměti.
08. Codelabs
Potřebujete praktické pokyny k produktu Google? Codelabs poskytuje „řízené, výukové a praktické zkušenosti s kódováním“. Stránka je přehledně rozdělena do kategorií a událostí, takže je snadné a rychlé najít to, co chcete. Zahrnuje Analytics, Android, Assistant, rozšířenou realitu, třepetání, G Suite, vyhledávání, TensorFlow a virtuální realitu. Vyberte možnost a získejte kód a pokyny, které potřebujete k vytváření malých aplikací.
09. Barevný nástroj
Color Tool je přímý nástroj, který vám kromě kontroly přístupnosti umožňuje vytvářet, sdílet a používat paletu. Uživatelé si mohou vybrat předdefinovanou paletu z palety Materiál. Jednoduše vyberte barvu a poté ji použijte na primární barevné schéma, přepněte na sekundární možnost a vyberte znovu. Nakonec vyberte barvy textu pro obě schémata. Případně přepněte na Vlastní a vyberte si barvy. Poté přepněte na Přístupnost a před exportem palety zkontrolujte, zda je vše v pořádku.
10. Návrhové sprinty
Sada Design Sprint Kit je určena těm, kteří se učí, jak se účastnit nebo spouštět designové sprinty. Vypadá to, že pokrývá všechny znalostní báze, od nováčků po zkušené facilitátory sprintu. Dozvíte se více o metodice nebo skočíte přímo do fáze plánování, včetně psaní briefů, shromažďování dat a výzkumu, jakož i toho, co dělat po sprintu. Zahrnuje také řadu zdrojů, jako jsou nástroje, šablony, recepty a možnost odeslat vlastní metodu. Pravděpodobně budete také muset někde ukládat a sdílet zdroje, takže se ujistěte, že je váš výběr cloudového úložiště na místě.
11. Průvodce People + AI
Tato příručka je dílem iniciativy People + AI Research společnosti Google a snaží se nabídnout pomoc těm, kteří chtějí budovat produkty AI zaměřené na člověka. Komplexní průvodce je rozdělen do šesti kapitol, které se zabývají potřebami uživatelů, shromažďováním a hodnocením dat, mentálními modely, důvěrou, zpětnou vazbou a ladným selháním. Každá kapitola je doprovázena cvičeními, pracovními listy a nástroji a prostředky, které jsou k jejímu uskutečnění potřeba.
12. Google Assistant
Toto je vývojářská platforma Google Assistant, která nabízí průvodce integrací obsahu a služeb s Google Assistant. Ukáže vám, jak rozšířit svou mobilní aplikaci, prezentovat obsah bohatým způsobem pro Search and Assistant, ovládání světel, kávovarů a dalších zařízení v domácnosti a vytváření hlasových a vizuálních zážitků pro inteligentní reproduktory, displeje a telefony.
13. PageSpeed Insights
PageSpeed Insights analyzuje webový obsah a poté nabízí návrhy, jak jej načíst rychleji. Jednoduše přidejte URL, stiskněte tlačítko Analyzovat a počkejte, až se kouzlo stane. Zkontrolujte Docs, abyste získali lepší přehled o tom, jak funguje PageSpeed API a jak jej začít používat.
14. AMP na Googlu
AMP je nástroj společnosti Google pro vytváření rychle se načítajících mobilních stránek, které se (doufejme) dostanou na vrchol žebříčku vyhledávání. Naučte se, jak vytvářet rychlé, uživatelsky přívětivé weby, integrovat AMP do všech produktů Google, používat mezipaměť Google AMP ke zrychlení stránek AMP a zpeněžovat stránky AMP s jinými produkty Google.
15. Google DevTools
Každý designér a vývojář ví (nebo by měl alespoň vědět), že Chrome přichází se sadou nástrojů zabudovaných přímo do prohlížeče. Nástroje DevTools prohlížeče Chrome jsou ideální pro kontrolu prvků, které tvoří stránku, kontrolu CSS, průběžné úpravy stránek a mnoho dalšího.
Karta Prvky je úvodem do DevTools. Zobrazuje kód HTML, který tvoří vybranou stránku. Získejte přehled o vlastnostech každé div nebo tagu z vybrané stránky a začněte živé úpravy. To je ideální pro experimentování s designy. Zkontrolujte rozložení - ať už používáte Flexbox nebo Grid - a podívejte se na související písma s příklady a prozkoumejte animace.
Jinde můžete zobrazit a změnit CSS. Na kartě Styly na panelu Prvky jsou uvedena pravidla CSS, která se použijí na aktuálně vybraný prvek ve stromu DOM. Chcete-li experimentovat s návrhy, zapněte a vypněte vlastnosti (nebo přidejte nové hodnoty). Jedná se o dokonalý nástroj pro zajištění toho, aby vše fungovalo podle očekávání před provedením jakýchkoli změn v živém designu.
Můžete také ladit JavaScript, optimalizovat rychlost webových stránek a kontrolovat rychlost sítě. Zde je rychlý tip, který můžete použít k okamžitému zrychlení pracovního postupu. Přejděte na kartu Zdroje, klikněte na Nový úryvek a přidejte často používaný kód. Pojmenujte fragment kódu a uložte jej. Podle potřeby opakujte. Nyní můžete tento fragment kódu uchopit místo toho, abyste jej psali znovu.
Jako každý dobrý prohlížeč, i Chrome se neustále vyvíjí a každé nové vydání přináší nové funkce. Zjistěte, co se děje na stavové platformě Chrome
16. Materiálové provedení
Na vývoj lze pohlížet jako na dítě, které Google preferuje, ale ať děláte, vytváříte nebo budujete cokoli, musí vypadat dobře a poskytnout uživateli zážitek, díky němuž ho bude chtít použít. Materiál je novější přírůstek do stáje Google, ale jedná se o designový systém, který vyrostl v zásadní kus designové sady.
Jako každý dobrý designový systém má svůj vlastní soubor pokynů, na které se musíte podívat, než vstoupíte do vzrušujících věcí. Získejte přehled o tom, jak používat různé prvky, co je Materiálová tematika, jak implementovat téma a příručky použitelnosti včetně přístupnosti. Na jiném místě je nahlédnutí do Material Foundation, která zahrnuje klíčové oblasti designu, jako je rozložení, navigace, barva, typografie, zvuk, ikonografie, pohyb a interakce. Každá kategorie odhaluje své výhody a nevýhody a to, kde byste měli zvážit opatrnost. Chcete-li získat představu o tom, co můžete očekávat, nabízí kategorie Rozvržení sekce o porozumění rozvržení, hustotě pixelů, způsobu práce s responzivním rozvržením, včetně sloupců, okapů a okrajů, zarážek, oblastí uživatelského rozhraní a mezer, abychom jmenovali jen několik.
Za konstrukční částí jsou komponenty, které poskytují fyzické stavební bloky potřebné k vytvoření návrhu. Co je zde zahrnuto? Tlačítka, bannery, karty, dialogy, rozdělovače, seznamy, nabídky, indikátory průběhu, posuvníky, lišty (jsou to krátké zprávy o procesech aplikací ve spodní části obrazovky), karty, textová pole a popisky. Nepochybně komplexní kolekce komponent.
Nezapomněli jsme ani na vývojáře s podrobnostmi a návody, jak stavět pro různé platformy - Android, iOS, Web a Flutter. A konečně existuje stránka věnovaná řadě zdrojů, které vám pomohou uskutečnit vybraný design.
Tento článek se původně objevil v časopise net. Koupit číslo 326.
