Содержание
- 01. Маяк
- 02. Полимер
- 03. API-интерфейс Explorer
- 04. Флаттер
- 05. Google GitHub
- 06. Кукольник
- 07. Рабочий ящик
- 08. Codelabs
- 09. Инструмент "Цвет"
- 10. Дизайн-спринты
- 11. Путеводитель по People + AI
- 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, Material Design и Workbox.
Прелесть использования инструментов, ресурсов, библиотек и фреймворков Google заключается в том, что вы знаете, что они будут хорошо работать с браузером Chrome - самым популярным браузером на планете. Дополнительные инструменты см. В нашем обзоре инструментов веб-дизайна.
01. Маяк
Производительность - ключевой фактор успеха сайта, а Lighthouse - это инструмент Google для улучшения качества веб-страниц (также поможет правильный веб-хостинг). Итак, как использовать Lighthouse и что он может делать? В простейшей форме вы можете запустить Lighthouse на вкладке «Аудиты» и выбрать один из вариантов, включая настольный или мобильный, в дополнение к флажкам для производительности, доступности и SEO, чтобы создать окончательный отчет с предлагаемыми улучшениями.
02. Полимер
Polymer хорошо известен своей работой с веб-компонентами, но теперь проект расширил свой репертуар, включив в него набор библиотек, инструментов и стандартов. Что включено? LitElement - это редактор, который упрощает определение веб-компонентов, а lit-html - это библиотека шаблонов HTML, которая позволяет пользователям писать шаблоны HTML следующего поколения на JS. Кроме того, вы также найдете стартовый комплект PWA, оригинальную библиотеку Polymer и наборы веб-компонентов.
03. API-интерфейс Explorer
У Google есть обширная библиотека API, доступных разработчикам, но найти то, что вам нужно, - непростая задача. Здесь вам на помощь приходит Google APIs Explorer. Существует длинный список, который можно прокручивать, но для более быстрого доступа есть поле поиска для фильтрации списка API. Каждая запись связана со справочной страницей с более подробной информацией о том, как использовать API.
04. Флаттер
Если вы хотите создавать красивые приложения для мобильных устройств, веб-сайтов и настольных компьютеров из единой кодовой базы, тогда Flutter может быть для вас. Этот сайт представляет собой полное руководство по работе и созданию с Flutter. Не знаете, что делать? Документы проводят пользователя от установки до создания с помощью множества примеров и руководств.
05. Google GitHub
Как известно большинству, GitHub - это хостинговая платформа / репозиторий для хранения и обмена кодом и файлами. И, к счастью, у Google есть собственное место на платформе с более чем 260 репозиториями, которые нужно проанализировать. Используйте фильтр, чтобы сократить время поиска и приблизиться к репозиторию, с которым вы хотите поиграть или внести свой вклад.
06. Кукольник
Puppeteer, встроенный в Node, предлагает высокоуровневый 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. Дизайн-спринты
Комплект Design Sprint Kit предназначен для тех, кто учится участвовать в дизайнерских спринтах или запускать их. Кажется, что он охватывает все базы знаний, от новичков до опытных фасилитаторов спринтов. Узнайте о методологии или сразу переходите к этапу планирования, включая написание кратких сводок, сбор данных и исследования, а также то, что делать после спринта. Также включает множество ресурсов, таких как инструменты, шаблоны, рецепты и возможность отправить свой собственный метод. Кроме того, вам, вероятно, понадобится место для хранения и совместного использования ресурсов, поэтому убедитесь, что ваш выбор облачного хранилища правильный.
11. Путеводитель по People + AI
Это руководство создано в рамках инициативы 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 Cache для ускорения страниц 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, но это система дизайна, которая превратилась в жизненно важный элемент дизайна.
Как и у любой хорошей дизайн-системы, у нее есть свой набор рекомендаций, на которые вам нужно обратить внимание, прежде чем переходить к более интересным вещам. Получите обзор того, как использовать различные элементы, что такое тематика материалов, как реализовать тему и руководства по удобству использования, включая доступность. В другом месте есть понимание Material Foundation, которое включает в себя ключевые области дизайна, такие как макет, навигация, цвет, типографика, звук, иконография, движение и взаимодействие. Каждая категория раскрывает свои правила и запреты, а также то, в чем следует проявлять осторожность. Чтобы дать представление о том, чего ожидать, в категории «Макет» есть разделы, посвященные пониманию макета, плотности пикселей, работе с адаптивным макетом, включая столбцы, желоба и поля, точки останова, области пользовательского интерфейса и методы интервалов, и это лишь некоторые из них.
Помимо раздела «Дизайн» есть «Компоненты», которые предоставляют физические строительные блоки, необходимые для создания дизайна. Что здесь включено? Кнопки, баннеры, карточки, диалоговые окна, разделители, списки, меню, индикаторы выполнения, ползунки, закуски (это краткие сообщения о процессах приложения в нижней части экрана), вкладки, текстовые поля и всплывающие подсказки. Несомненно, обширный набор компонентов.
И разработчики не были забыты, с подробностями и руководствами о том, как создавать для разных платформ - Android, iOS, Web и Flutter. И, наконец, есть страница, посвященная множеству ресурсов, которые помогут воплотить в жизнь выбранный вами дизайн.
Эта статья изначально появилась в сетевом журнале. Купить выпуск 326.
