Съдържание
- 01. Фара
- 02. Полимер
- 03. APIs Explorer
- 04. Трептене
- 05. Google GitHub
- 06. Кукловод
- 07. Работна кутия
- 08. Codelabs
- 09. Цветен инструмент
- 10. Дизайн спринтове
- 11. People + AI Guide
- 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 и какво може да направи той? В най-простата си форма можете да стартирате Lighthouse от раздела Audits и да изберете от селекция от опции, включително настолни или мобилни, в допълнение към отметките за производителност, достъпност и SEO, за да генерирате окончателен отчет с предложени подобрения.
02. Полимер
Polymer е добре известен с работата си с уеб компоненти, но проектът сега разшири своя репертоар, за да обхване колекция от библиотеки, инструменти и стандарти. Какво е включено? LitElement е редактор, който улеснява дефинирането на уеб компоненти, докато lit-html е HTML библиотека за шаблони, която позволява на потребителите да пишат HTML шаблони от следващо поколение в JS. Освен това ще намерите и PWA Starter kit, оригиналната библиотека Polymer и набори от уеб компоненти.
03. APIs Explorer
Google разполага с богата библиотека от API, достъпни за разработчиците, но намирането на това, от което се нуждаете, не е лесна задача. Това е мястото, където API API на Google се намесва, за да предложи ръка за помощ. Има дълъг списък, който може да се превърта, но за по-бърз достъп има поле за търсене за филтриране на списъка на 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 е ясен инструмент, който ви позволява да създавате, споделяте и прилагате палитра в допълнение към проверката на достъпността. Потребителите могат да изберат предварително дефинирана палитра от палитрата Material. Просто изберете цвят и след това го приложете към основната цветова схема, превключете към вторичната опция и изберете отново. Накрая изберете цветовете на текста и за двете схеми. Като алтернатива, превключете на Custom, за да изберете цветовете си. След това преминете към Достъпност, за да проверите дали всичко е добро, преди накрая да експортирате палитрата.
10. Дизайн спринтове
Design Sprint Kit е за тези, които се учат как да участват или да изпълняват дизайнерски спринтове. Изглежда, че обхваща всички бази от знания, от начинаещи до опитни водещи в спринта. Научете за методологията или преминете направо към етапа на планиране, включително писане на брифи, събиране на данни и изследвания, както и какво да правите след спринт. Включва също множество ресурси като инструменти, шаблони, рецепти и опцията да изпратите свой собствен метод. Също така, най-вероятно ще ви трябва някъде, за да съхранявате и споделяте ресурси, така че се уверете, че вашият избор за съхранение в облак е на място.
11. People + AI Guide
Това ръководство е дело на инициативата People + AI Research в Google и се стреми да предложи помощ на онези, които искат да създадат AI продукти, насочени към човека. Изчерпателният пътеводител е разделен на шест глави, обхващащи нуждите на потребителите, събиране и оценка на данни, умствени модели, доверие, обратна връзка и изящен провал. Всяка глава е придружена от упражнения, работни листове и инструментите и ресурсите, необходими за осъществяването й.
12. Google Assistant
Това е платформата за разработчици на Google Assistant, предлагаща ръководство за това как да интегрирате съдържанието и услугите си с Google Assistant. Той ви показва как да разширите мобилното си приложение, да представите съдържание по богати начини за Търсене и асистент, да контролирате светлините, кафемашините и други устройства около дома и да изградите гласови и визуални изживявания за интелигентни високоговорители, дисплеи и телефони.
13. PageSpeed Insights
PageSpeed Insights анализира уеб съдържанието и след това предлага предложения за това как да го заредите по-бързо. Просто добавете URL адрес, натиснете бутона Analyze и изчакайте магията да се случи. Проверете Документите, за да получите по-добра представа за това как работи 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, но е система за дизайн, която е узряла в жизненоважен комплект за дизайн.
Както всяка добра система за дизайн, той има свой собствен набор от насоки, които трябва да разгледате, преди да влезете в по-вълнуващите неща. Получете общ преглед на това как да използвате различни елементи, какво е тематика на материала, как да внедрите тема и ръководства за използваемост, включително достъпност. Другаде има представа за Material Foundation, която включва ключовите области на дизайна като оформление, навигация, цвят, типография, звук, иконография, движение и взаимодействие. Всяка категория разкрива своите предимства и недостатъци и къде трябва да имате предвид вниманието. За да даде представа какво да очаквате, категорията Layout предлага раздели за разбиране на оформлението, плътността на пикселите, как да работите с отзивчиво оформление, включително колони, улуци и полета, точки на прекъсване, региони на потребителския интерфейс и методи за интервали, за да назовем само няколко.
Отвъд раздела „Дизайн“ е „Компоненти“, който предоставя физическите градивни елементи, необходими за създаването на дизайн. Какво е включено тук? Бутони, банери, карти, диалогови прозорци, разделители, списъци, менюта, индикатори за напредъка, плъзгачи, закусвални (това са кратки съобщения за процесите на приложението в долната част на екрана), раздели, текстови полета и подсказки. Несъмнено обширна колекция от компоненти.
И разработчиците не са забравени, с подробности и уроци за това как да изграждат за различни платформи - Android, iOS, Web и Flutter. И накрая, има страница, посветена на множество ресурси, които да ви помогнат да осъществите избрания от вас дизайн.
Тази статия първоначално се появи в списание net. Купете брой 326.
