Мазмұны
- 01. Маяк
- 02. Полимер
- 03. API Explorer
- 04. лыпылдау
- 05. Google GitHub
- 06. Қуыршақ
- 07. Жұмыс жәшігі
- 08. Кодельдер
- 09. Түс құралы
- 10. Sprint жобалау
- 11. Адамдар + AI бойынша нұсқаулық
- 12. Google Assistant
- 13. PageSpeed Insight
- 14. Google-дегі AMP
- 15. Google DevTools
- 16. Материалдық дизайн
Интернетте жұмыс істеу дегеніміз сіздің Google-мен қандай да бір формада немесе формада жұмыс істейтіндігіңізді білдіреді. Google Chrome бәсекелестер алдындағы көшелер ретінде көрініп, дизайнерлер мен әзірлеушілер өз жобалары браузермен қалай жұмыс істейтіндігі туралы ойлануы керек. Ол қалай көрінеді? Ол қандай технологияларды қолдайды, қаншалықты қауіпсіз және ол қалай жұмыс істейді?
Бақытымызға орай, Chrome кез-келген сайттың немесе қолданбаның ең жақсы деңгейде болуын қамтамасыз ететін құралдарды ұсынады. DevTools дизайнерлер мен әзірлеушілерге веб-парақ туралы түсінік алуға мүмкіндік береді: сіз DOM-ды басқара аласыз, CSS-ті тексере аласыз, тірі редакциялау арқылы дизайн бойынша тәжірибе жасай аласыз, JavaScript-ті жөндей аласыз және өнімділікті тексере аласыз. (Осы Google веб-құралдарын пайдалану туралы толығырақ мына жерден қараңыз, егер сіз нөлден бастасаңыз, біздің ең жақсы веб-құрастырушылардың тізімін қараңыз).
Бірақ Google тек шолғыштан гөрі көбірек ұсынады. Онда сіздің дизайныңыз бен дамуыңыздың барлық салаларына көмектесетін құралдар мен ресурстар бар. Өнімділікті қалай жақсартуға болатынын білгіңіз келе ме? Маяк көмектеседі. Жақсы жұмыс істейтін мобильді сайттар құрғыңыз келе ме? Содан кейін AMP-ге сәлем айтыңыз. Сіз әдемі PWA-лар салғыңыз келе ме? Содан кейін Flutter, Material Design және Workbox кіруге дайын.
Google құралдарын, ресурстарды, кітапханалар мен фреймворктерді қолданудың сұлулығы - олардың Chrome браузерімен - планетадағы ең танымал браузермен жақсы жұмыс істейтіндігін білетіндігіңізде. Қосымша құралдарды веб-дизайн құралдары туралы білуге болады.
01. Маяк
Өнімділік - бұл сайт жетістігінің шешуші факторы, ал маяк - бұл веб-беттердің сапасын жақсарту үшін Google-дің құралы (дұрыс веб-хостинг қызметі де көмектеседі). Сонымен, сіз Маякты қалай қолданасыз және ол не істей алады? Қарапайым түрінде сіз Lighthouse бағдарламасын Аудиттер қойындысынан іске қосуға және жұмыс, қол жетімділік және SEO үшін құсбелгілерден басқа жұмыс үстелін немесе мобильді қосымшаларды таңдап, ұсынылған жақсартулармен қорытынды есеп шығаруға болады.
02. Полимер
Полимер веб-компоненттермен жұмыс жасауымен танымал, бірақ жоба қазір репертуарын кітапханалар, құралдар мен стандарттар жиынтығын кеңейтуге кеңейтті. Не кіреді? LitElement - бұл веб-компоненттерді анықтауды жеңілдететін редактор, ал lit-html - пайдаланушыларға JS-де HTML-шаблондардың келесі буындарын жазуға мүмкіндік беретін HTML-тақырыптар кітапханасы. Сонымен қатар, сіз PWA Starter жиынтығын, түпнұсқа Полимер кітапханасын және веб-компоненттер жиынтығын таба аласыз.
03. API Explorer
Google-де әзірлеушілер үшін қол жетімді кеңейтілген API кітапханасы бар, бірақ қажет нәрсені табу оңай мәселе емес. Бұл жерде Google APIs Explorer көмек қолын ұсынуға қадам басады. Жылжытуға болатын ұзын тізім бар, бірақ жылдам қол жеткізу үшін API тізімін сүзуге арналған іздеу өрісі бар. Әрбір жазба сілтеме парағына API-ді пайдалану туралы толығырақ мәліметтермен сілтеме жасайды.
04. лыпылдау
Егер сіз ұялы телефонға, вебке және жұмыс үстеліне арналған бағдарламаларды бір код базасынан құрғыңыз келсе, онда Flutter сізге сәйкес келуі мүмкін. Сайт - бұл Flutter-пен жұмыс істеуге және онымен құрылыс жасауға толық сілтеме. Не істеу керектігі туралы түсінік жоқ па? Құжаттар көптеген үлгілер мен оқулықтардың көмегімен пайдаланушыны қондырғыдан жасаушыға дейін жеткізеді.
05. Google GitHub
Көпшілік білетіндей, GitHub - бұл кодтар мен файлдарды сақтауға және бөлісуге арналған хостинг платформасы / репозиторийі. Бақытты Google-да платформада 260-тан астам репозитарийі бар өзіндік орны бар. Іздеу уақытын азайтып, ойнағыңыз келетін немесе үлес қосқыңыз келетін репозиторийге жақындау үшін сүзгіні пайдаланыңыз.
06. Қуыршақ
Түйінде орнатылған Puppeteer жоғары деңгейлі API ұсынады, бұл сізге басы жоқ Chrome-ға қол жеткізуге мүмкіндік береді - Chrome интерфейсі жоқ тиімді, содан кейін әзірлеушілер пәрмен жолы арқылы басқара алады. Сонымен қуыршақпен не істеуге болады? Парақтардың скриншоттары мен PDF файлдарын жасау, форманы жіберуді автоматтандыру және тестілеудің автоматтандырылған ортасын құру үшін бірнеше нұсқа бар.
07. Жұмыс жәшігі
Егер сіз PWA құрғыңыз келсе, онда бұл керемет бастама. Жұмыс жәшігі веб-қосымшаларға офлайн қолдауды қосуға арналған JavaScript кітапханаларының жиынтығын ұсынады. Терең нұсқаулықтардың таңдауы қызмет жұмыскерінің файлын құруды және тіркеуді, маршруттық сұраныстарды, плагиндерді пайдалану және Workbox көмегімен бумаларды қалай пайдалану керектігін көрсетеді. Сонымен қатар, кэштеудің мысалдары бар.
08. Кодельдер
Google өнімі үшін практикалық нұсқаулық қажет пе? Codelabs «жетекшілікке, оқулыққа, практикалық кодтау тәжірибесіне» ие. Сайт санаттар мен оқиғаларға ұқыпты бөлініп, қалаған нәрсеңізді тез және оңай табуға мүмкіндік береді. Оған Analytics, Android, Assistant, толықтырылған шындық, Flutter, G Suite, Search, TensorFlow және виртуалды шындық кіреді. Опцияны таңдап, кішігірім қосымшаларды құру үшін қажет код пен нұсқауларды алыңыз.
09. Түс құралы
Color Tool - бұл қол жетімділікті тексеруден басқа палитра жасауға, бөлісуге және қолдануға мүмкіндік беретін қарапайым құрал. Пайдаланушылар материал палитрасынан алдын ала анықталған палитраны таңдай алады. Түсті таңдап, оны негізгі түстер схемасына қолданыңыз, қосымша опцияға ауысыңыз және қайтадан таңдаңыз. Соңында, екі схеманың мәтін түстерін таңдаңыз. Сонымен қатар, түстерді таңдау үшін «Custom» тармағына ауысыңыз. Бәрінен бұрын палитраны экспорттауға дейін барлығын тексеру үшін қол жетімділікке ауысыңыз.
10. Sprint жобалау
Дизайн спринт жиынтығы дизайнерлік спринттерге қатысуды немесе жүгіруді үйренетіндерге арналған. Мұнда бірінші білім алушылардан бастап, тәжірибелі спринтер жүргізушілеріне дейінгі барлық білім базалары қамтылған. Әдістеме туралы біліп алыңыз немесе тікелей жоспарлау кезеңіне өтіңіз, соның ішінде қысқаша жазыңыз, мәліметтер жинаңыз және зерттеулер жүргізіңіз, спринттен кейін не істеу керек. Сондай-ақ, құралдар, шаблондар, рецепттер және өзіндік әдіс жіберу мүмкіндігі сияқты көптеген ресурстар бар. Сондай-ақ, ресурстарды сақтау және бөлісу үшін сізге бірдеңе қажет болуы мүмкін, сондықтан бұлтты сақтау орнын таңдағаныңызға көз жеткізіңіз.
11. Адамдар + AI бойынша нұсқаулық
Бұл нұсқаулық Google-дағы People + AI Research бастамасы болып табылады және адамға бағытталған AI өнімдерін жасағысы келетіндерге көмек ұсынады. Кешенді нұсқаулық пайдаланушылардың қажеттіліктерін, деректерді жинау мен бағалауды, ақыл-ой модельдерін, сенімділікті, кері байланыс пен әдемі сәтсіздікті қамтитын алты тарауға бөлінген. Әр тарау жаттығулармен, жұмыс парақтарымен және оны жүзеге асыруға қажетті құралдармен және ресурстармен бірге жүреді.
12. Google Assistant
Бұл Google Assistant-тің Google Assistant-пен мазмұны мен қызметтерін қалай біріктіру туралы нұсқаулық ұсынатын платформасы. Мұнда мобильді қосымшаны кеңейту, іздеу және көмекші үшін мазмұнды байыту тәсілдері, үйдегі шамдарды, кофе машиналарын және басқа құрылғыларды басқару және ақылды динамиктер, дисплейлер мен телефондар үшін дауыстық және визуалды тәжірибе құру әдісі көрсетілген.
13. PageSpeed Insight
PageSpeed Insights веб-мазмұнды талдайды, содан кейін оны тезірек жүктеу туралы ұсыныстар береді. Жай URL мекенжайын қосып, Талдау батырмасын басып, сиқырдың болғанын күтіңіз. PageSpeed API қалай жұмыс істейтіндігі және оны қалай пайдалануға болатындығы туралы жақсы түсінік алу үшін құжаттарды тексеріңіз.
14. Google-дегі AMP
AMP - бұл іздеу рейтингінің шыңына шығатын (үміттенемін) мобильді парақтарды жылдам құруға арналған Google құралы. Жылдам, пайдаланушыға арналған сайттарды қалай жасау керектігін, AMP-ді Google өнімдеріне біріктіруді, AMP парақтарын жылдамдату және AMP парақтарын басқа Google өнімдерімен монетизациялау үшін Google AMP кэшін пайдалану туралы біліңіз.
15. Google DevTools
Кез-келген дизайнер мен әзірлеуші Chrome браузерге тікелей енгізілген құралдар жиынтығымен келетіндігін біледі (немесе, кем дегенде, білуі керек). Chrome-дың DevTools бетті құрайтын элементтерді тексеруге, CSS-ті тексеруге, беттерді жылдам редакциялауға және тағы басқаларға өте ыңғайлы.
Элементтер қойындысы - DevTools-қа кіріспе. Ол таңдалған парақты құрайтын HTML кодын көрсетеді. Таңдалған беттен әр дивтің немесе тегтің қасиеттері туралы түсінік алыңыз және тікелей өңдеуді бастаңыз. Бұл дизайнмен тәжірибе жасау үшін өте қолайлы. Форматты тексеріңіз - сіз Flexbox немесе Grid-ті қолданасыз - және мысалдар келтірілген қаріптерді қарап, анимацияларды тексеріңіз.
Басқа жерде CSS-ті көруге және өзгертуге болады. Элементтер панеліндегі Стильдер қойындысында DOM ағашында ағымдағы таңдалған элементке қолданылатын CSS ережелері келтірілген. Дизайндармен тәжірибе жасау үшін қасиеттерді қосыңыз және өшіріңіз (немесе жаңа мәндер қосыңыз). Бұл тірі дизайнға өзгеріс енгізбестен бұрын, бәрі ойдағыдай жұмыс істеуін қамтамасыз ететін тамаша құрал.
Сіз сондай-ақ JavaScript күйін келтіре аласыз, веб-сайттың жылдамдығын оңтайландырып, желінің жылдамдығын тексере аласыз. Міне, жұмыс процесін жеделдету үшін қолдануға болатын жылдам кеңес. Көздер қойындысына өтіп, Жаңа үзінді батырмасын басып, жиі қолданылатын кодты қосыңыз. Код үзіндісін атаңыз және сақтаңыз. Қажет болған жағдайда қайталаңыз. Енді сіз бұл код үзіндісін қайта жазудың орнына алуға болады.
Әрбір жақсы шолғыш сияқты, Chrome үнемі дамып келеді және әрбір жаңа шығарылым жаңа мүмкіндіктер әкеледі. Chrome күй платформасында не болып жатқанын біліңіз
16. Материалдық дизайн
Даму Google-дің ұнататын баласы ретінде көрінуі мүмкін, бірақ сіз не жасасаңыз да, жасап жатсаңыз да, құрып жатсаңыз да, ол әдемі болып көрінуі және пайдаланушыға оны пайдаланғысы келетін тәжірибе беруі керек. Материал Google-дың тұрақтылығына жақында ғана қосылды, бірақ ол дизайн жиынтығының өмірлік маңызды бөлігіне айналған дизайн жүйесі.
Кез-келген жақсы дизайн жүйесі сияқты, оның да белгілі бір нұсқаулықтары бар, оларды қызықты материалдарға кіріспес бұрын қарау керек. Әр түрлі элементтерді қалай пайдалану керектігі туралы, материал тақырыбы деген не, тақырыпты қалай қолдану керектігі және қол жетімділік туралы нұсқаулық алыңыз. Басқа жерлерде, дизайн, навигация, түс, типография, дыбыс, иконография, қозғалыс және өзара әрекеттесу сияқты дизайнның негізгі бағыттарын қамтитын Материалдық қор туралы түсінік бар. Әр санат не істеуге болмайтынын және қай жерде сақ болу керектігін көрсетеді. Күтетін нәрселер туралы түсінік беру үшін Layout категориясы орналасуды түсіну, пиксель тығыздығы, бағандар, арықтар мен шеттер, үзіліс нүктелері, интерфейс аймақтары және интервалдың бірнеше әдісін атауға болатын жауап беретін макетпен қалай жұмыс істеуге болатынын ұсынады.
Дизайн бөлімінен тыс жерде дизайн жасауға қажетті физикалық блоктарды қамтамасыз ететін компоненттер орналасқан. Мұнда не бар? Түймелер, баннерлер, карточкалар, диалог терезелері, бөлгіштер, тізімдер, мәзірлер, үлгерім индикаторлары, жүгірткілер, тағамдар тақталары (бұл экранның төменгі жағындағы қолданбалы процестер туралы қысқаша хабарламалар), қойындылар, мәтін өрістері және кеңестер. Компоненттердің кешенді жиынтығы сөзсіз.
Әр түрлі платформалар - Android, iOS, Web және Flutter үшін қалай құру керектігі туралы мәліметтер мен оқулықтармен әзірлеушілер ұмытылған жоқ. Сонымен, сайып келгенде, сіздің таңдаған дизайныңызды жүзеге асыруға көмектесетін көптеген ресурстарға арналған бет бар.
Бұл мақала бастапқыда нет журналда пайда болды. 326.
