Задаволены
- 01. Маяк
- 02. Палімер
- 03. Правадыр API
- 04. Трапятанне
- 05. Google GitHub
- 06. Лялечнік
- 07. Рабочая скрыня
- 08. Codelabs
- 09. Каляровы інструмент
- 10. Дызайнерскія спрынты
- 11. People + AI Guide
- 12. Памочнік Google
- 13. PageSpeed Insights
- 14. AMP на Google
- 15. Google DevTools
- 16. Дызайн матэрыялу
Праца ў Інтэрнэце звычайна азначае, што вы будзеце працаваць з Google у той ці іншай форме. І, улічваючы, што Google Chrome ідзе наперадзе канкурэнтаў, дызайнеры і распрацоўшчыкі павінны падумаць, як іх праект будзе працаваць з браўзэрам. Як гэта будзе выглядаць? Якія тэхналогіі ён падтрымлівае, наколькі ён бяспечны і як будзе працаваць?
На шчасце, Chrome прадастаўляе інструменты, якія гарантуюць, што любы сайт альбо прыкладанне будзе ў лепшым выглядзе. DevTools дазваляюць дызайнерам і распрацоўшчыкам атрымаць уяўленне пра вэб-старонку: вы можаце маніпуляваць DOM, правяраць CSS, эксперыментаваць над дызайнамі з дапамогай рэдагавання ў рэальным часе, адладжваць JavaScript і правяраць прадукцыйнасць. (Больш падрабязна пра тое, як карыстацца гэтымі вэб-інструментамі Google, глядзіце тут, і калі вы пачынаеце з нуля, таксама паглядзіце наш спіс лепшых стваральнікаў вэб-сайтаў).
Але Google прапануе не толькі браўзэр. У ім ёсць інструменты і рэсурсы, якія дапамогуць практычна кожнаму аспекту вашага дызайну і развіцця. Хочаце ведаць, як павысіць прадукцыйнасць? Маяк тут, каб дапамагчы. Хочаце стварыць больш эфектыўныя мабільныя сайты? Тады павітайцеся з AMP. Вы хочаце пабудаваць прыгожыя PWA? Тады Flutter, дызайн матэрыялаў і працоўная скрынка гатовыя ўступіць.
Прыгажосць выкарыстання інструментаў, рэсурсаў, бібліятэк і фрэймворкаў Google у тым, што вы ведаеце, што яны будуць добра працаваць з браўзэрам Chrome - самым папулярным аглядальнікам на планеце. Больш падрабязна пра інструменты глядзіце ў нашым аглядзе інструментаў вэб-дызайну.
01. Маяк
Прадукцыйнасць з'яўляецца ключавым фактарам поспеху сайта, а Lighthouse - інструмент Google для паляпшэння якасці вэб-старонак (правільная паслуга хостынгу таксама дапаможа). Такім чынам, як вы карыстаецеся Маяком і што ён можа зрабіць? У самай простай форме вы можаце запусціць Маяк на ўкладцы Аўдыты і выбраць адзін з некалькіх варыянтаў, уключаючы настольны альбо мабільны, акрамя галачак пра прадукцыйнасць, даступнасць і SEO, каб стварыць канчатковы справаздачу з прапанаванымі паляпшэннямі.
02. Палімер
Палімер добра вядомы сваёй працай з вэб-кампанентамі, але цяпер праект пашырыў свой рэпертуар, каб ахапіць калекцыю бібліятэк, інструментаў і стандартаў. Што ўваходзіць? LitElement - гэта рэдактар, які дазваляе лёгка вызначыць вэб-кампаненты, у той час як lit-html - гэта бібліятэка шаблонаў HTML, якая дазваляе карыстальнікам пісаць HTML-шаблоны наступнага пакалення ў JS. Акрамя таго, вы таксама знойдзеце стартавы набор PWA, арыгінальную бібліятэку Polymer і наборы вэб-кампанентаў.
03. Правадыр API
Google мае шырокую бібліятэку API, даступных для распрацоўшчыкаў, але знайсці тое, што вам трэба, не проста. Тут уключаецца Google Explorer APIs, які прапануе руку дапамогі. Існуе доўгі спіс, які можна прагартаць, але для больш хуткага доступу ёсць поле пошуку для фільтрацыі спісу API. Кожны запіс спасылаецца на даведачную старонку з больш падрабязнай інфармацыяй пра тое, як карыстацца API.
04. Трапятанне
Калі вы хочаце стварыць прыгожыя прыкладання для мабільных прылад, Інтэрнэту і працоўнага стала з адной кодавай базы, то Flutter можа быць для вас. Сайт з'яўляецца поўнай спасылкай на працу і стварэнне з Flutter. Не ведаеце, што рабіць? Дакументы вядуць карыстальніка ад усталёўкі да стварэння, яму дапамагае мноства узораў і навучальных дапаможнікаў.
05. Google GitHub
Як большасць будзе ведаць, GitHub - гэта хостынг-платформа / сховішча для захоўвання і сумеснага выкарыстання кода і файлаў. І на шчасце, Google мае сваё месца на платформе з больш чым 260 сховішчамі, якія можна прасеяць. Выкарыстоўвайце фільтр, каб скараціць час пошуку і наблізіцца да сховішча, з якім вы хочаце гуляць ці ўнесці свой уклад.
06. Лялечнік
Убудаваны ў Node, Puppeteer прапануе API высокага ўзроўню, які дазваляе вам атрымаць доступ да безгаловага Chrome - эфектыўна да Chrome без карыстацкага інтэрфейсу, якім распрацоўшчыкі могуць кіраваць з дапамогай каманднага радка. Так што вы можаце зрабіць з Puppeteer? Даступна некалькі варыянтаў стварэння скрыншотаў і PDF-файлаў старонак, аўтаматызацыі адпраўкі формы і стварэння аўтаматызаванай асяроддзя тэсціравання.
07. Рабочая скрыня
Калі вы хочаце пабудаваць PWA, то гэта выдатная адпраўная кропка. Workbox забяспечвае калекцыю бібліятэк JavaScript для дадання аўтаномнай падтрымкі вэб-праграм. Падборка паглыбленых кіраўніцтваў дэманструе, як стварыць і зарэгістраваць файл рабочага службы, накіроўваць запыты, выкарыстоўваць убудовы і выкарыстоўваць камплектатары з Workbox. І ёсць таксама набор прыкладаў стратэгій кэшавання для праверкі.
08. Codelabs
Вам патрэбныя практычныя рэкамендацыі па прадукце Google? Codelabs прадастаўляе "падручнік, практычны вопыт кадавання". Сайт акуратна разбіты на катэгорыі і падзеі, што дазваляе хутка і лёгка знайсці тое, што вы хочаце. У яго ўваходзяць Analytics, Android, Assistant, дапоўненая рэальнасць, Flutter, G Suite, Search, TensorFlow і віртуальная рэальнасць. Выберыце опцыю і атрымайце код і ўказанні, неабходныя для стварэння невялікіх прыкладанняў.
09. Каляровы інструмент
Color Tool - гэта просты інструмент, які дазваляе ствараць, абагульваць і ўжываць палітру ў дадатак да праверкі даступнасці. Карыстальнікі могуць выбраць зададзеную палітру з палітры "Матэрыял". Проста выберыце колер, а затым прымяніце яго да асноўнай каляровай схеме, пераключыцеся на другасны варыянт і абярыце яшчэ раз. Нарэшце, абярыце колеры тэксту для абедзвюх схем. Акрамя таго, пераключыцеся на Custom, каб выбраць колер. Затым пераключыцеся на Даступнасць, каб праверыць усё добра, перш чым, нарэшце, экспартаваць палітру.
10. Дызайнерскія спрынты
Design Sprint Kit прызначаны для тых, хто вучыцца ўдзельнічаць у дызайнерскіх спрынтах і кіраваць імі. Падобна на тое, каб ахапіць усе базы ведаў, пачынаючы ад першакласнікаў і заканчваючы вопытнымі спрынтарскімі пасрэднікамі. Даведайцеся пра метадалогію альбо перайдзіце адразу на этап планавання, уключаючы напісанне кароткіх паведамленняў, збор дадзеных і даследаванні, а таксама тое, што рабіць пасля спрынту. Таксама ўключае мноства рэсурсаў, такіх як інструменты, шаблоны, рэцэпты і магчымасць падаць уласны спосаб. Акрамя таго, вам, верагодна, спатрэбіцца дзе-небудзь для захоўвання і абмену рэсурсамі, таму пераканайцеся, што выбраны воблачны сховішча.
11. People + AI Guide
Гэта кіраўніцтва з'яўляецца працай ініцыятывы People + AI Research у Google і прапануе дапамогу тым, хто хоча стварыць арыентаваныя на чалавека прадукты ІІ. Вычарпальны даведнік падзелены на шэсць раздзелаў, якія ахопліваюць патрэбы карыстальнікаў, збор і ацэнку дадзеных, разумовыя мадэлі, давер, зваротную сувязь і хупавыя няўдачы. Кожная глава суправаджаецца практыкаваннямі, працоўнымі лістамі і інструментамі і рэсурсамі, неабходнымі для яе рэалізацыі.
12. Памочнік Google
Гэта платформа для распрацоўшчыкаў Google Assistant, якая прапануе кіраўніцтва па інтэграцыі змесціва і паслуг з Google Assistant. Ён паказвае, як пашырыць мабільнае прыкладанне, прадставіць змест багатым спосабам пошуку і памочніка, кіраваць святлом, кавамашынамі і іншымі прыладамі па ўсім доме, а таксама ствараць голас і візуальны вопыт для разумных дынамікаў, дысплеяў і тэлефонаў.
13. PageSpeed Insights
PageSpeed Insights аналізуе вэб-змест, а затым прапануе парады, як зрабіць яго загрузку хутчэй. Проста дадайце URL, націсніце кнопку "Аналізаваць" і дачакайцеся, пакуль магія адбудзецца. Праверце "Дакументы", каб атрымаць лепшае разуменне таго, як працуе API PageSpeed і як пачаць яго выкарыстоўваць.
14. AMP на Google
AMP - гэта інструмент Google для стварэння мабільных старонак з хуткай загрузкай, якія (можна спадзявацца) патрапяць на першае месца ў рэйтынгах пошуку. Даведайцеся, як ствараць хуткія, зручныя для карыстальнікаў сайты, інтэграваць AMP у прадукты Google, выкарыстоўваць кэш Google AMP, каб паскорыць старонкі AMP і манетызаваць старонкі AMP з іншымі прадуктамі Google.
15. Google DevTools
Кожны дызайнер і распрацоўшчык ведае (ці, па меншай меры, павінен ведаць), што Chrome пастаўляецца з наборам інструментаў, убудаваных непасрэдна ў браўзэр. DevTools Chrome ідэальна падыходзяць для праверкі элементаў, якія складаюць старонку, праверкі CSS, рэдагавання старонак на лета і шмат іншага.
Укладка Elements - гэта ўвядзенне ў DevTools. Ён адлюстроўвае HTML-код, які складае абраную старонку. Атрымайце ўяўленне пра ўласцівасці кожнага div або тэга з абранай старонкі і прыступайце да рэдагавання. Гэта ідэальна для эксперыментаў з дызайнам. Праверце макет - выкарыстоўваеце вы Flexbox альбо Grid - і паглядзіце звязаныя шрыфты з прыкладамі і вывучыце анімацыю.
У іншым месцы вы можаце праглядаць і мяняць CSS. На ўкладцы Стылі на панэлі "Элементы" пералічаныя правілы CSS, якія прымяняюцца да абранага ў цяперашні час элемента ў дрэве DOM. Уключыце і выключыце ўласцівасці (альбо дадайце новыя значэнні), каб эксперыментаваць з дызайнам. Гэта ідэальны інструмент для забеспячэння таго, каб усё працавала належным чынам, перш чым уносіць якія-небудзь змены ў жывы дызайн.
Вы таксама можаце адладжваць JavaScript, аптымізаваць хуткасць вэб-сайта і правяраць хуткасць сеткі. Вось кароткі савет, які можна выкарыстоўваць для неадкладнага паскарэння працоўнага працэсу. Перайдзіце на ўкладку "Крыніцы", націсніце "Новы фрагмент" і дадайце часта выкарыстоўваны код. Назавіце фрагмент кода і захавайце. Паўтарыце пры неабходнасці. Цяпер вы можаце захапіць гэты фрагмент кода, а не пісаць яго зноў.
Як і любы добры браўзэр, Chrome пастаянна развіваецца, і кожны новы выпуск прыносіць новыя функцыі. Даведайцеся, што адбываецца на платформе стану Chrome
16. Дызайн матэрыялу
Развіццё можа разглядацца як улюбёнае дзіця Google, але, што б вы ні рабілі, стваралі ці стваралі, яно павінна выглядаць добра і даваць карыстальніку досвед, які прымушае яго карыстацца. Матэрыял - нядаўняе дадатак да стайні Google, але гэта дызайнерская сістэма, якая ператварылася ў жыццёва неабходны дызайнерскі набор.
Як і любая добрая сістэма дызайну, у яе ёсць уласны набор рэкамендацый, на які трэба звярнуць увагу, перш чым пераходзіць да больш захапляльных рэчаў. Атрымайце агляд таго, як выкарыстоўваць розныя элементы, што такое тэматыка матэрыялаў, як рэалізаваць тэму і кіраўніцтва па карыстанні, уключаючы даступнасць. У іншым месцы існуе разуменне матэрыяльнага фонду, які ўключае ў сябе такія асноўныя напрамкі дызайну, як макет, навігацыя, колер, тыпаграфіка, гук, іканаграфія, рух і ўзаемадзеянне. Кожная катэгорыя раскрывае свае вартасці і недахопы, а таксама тое, дзе трэба быць асцярожным. Каб даць уяўленне пра тое, чаго чакаць, катэгорыя "Макет" прапануе раздзелы пра разуменне макета, шчыльнасці пікселяў, пра тое, як працаваць з адаптыўным макетам, уключаючы слупкі, жолабы і палі, кропкі спынення, рэгіёны карыстацкага інтэрфейсу і метады інтэрвалаў.
Акрамя раздзела "Дызайн" - "Кампаненты", які змяшчае фізічныя будаўнічыя блокі, неабходныя для стварэння дызайну. Што тут уключана? Кнопкі, банеры, карткі, дыялогі, раздзяляльнікі, спісы, меню, індыкатары прагрэсу, паўзункі, закусачныя (гэта кароткія паведамленні аб працэсах прыкладанняў унізе экрана), укладкі, тэкставыя палі і падказкі. Несумненна, шырокая калекцыя кампанентаў.
І пра распрацоўшчыкаў не забыліся, з падрабязнасцямі і падручнікамі па тым, як будаваць для розных платформаў - Android, iOS, Web і Flutter. І, нарэшце, ёсць старонка, прысвечаная мноству рэсурсаў, якія дапамогуць ажыццявіць абраны дызайн.
Гэты артыкул першапачаткова з'явіўся ў часопісе net. Купіць выпуск 326.
