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