Tarkib
- 01. Dengiz chiroqi
- 02. Polimer
- 03. API Explorer
- 04. chayqalish
- 05. Google GitHub
- 06. Qo'g'irchoq
- 07. Ish qutisi
- 08. Kodelabs
- 09. Rang vositasi
- 10. Sprintlarni loyihalash
- 11. Odamlar + AI bo'yicha qo'llanma
- 12. Google yordamchisi
- 13. PageSpeed Insights
- 14. Google-da AMP
- 15. Google DevTools
- 16. Materiallar dizayni
Internetda ishlash odatda Google bilan qandaydir shakl yoki shaklda ishlashingizni anglatadi. Va Google Chrome raqobat oldidan ko'chalar ekan, dizaynerlar va ishlab chiquvchilar o'zlarining loyihalari brauzer bilan qanday ishlashi haqida o'ylashlari kerak. Qanday ko'rinadi? U qanday texnologiyalarni qo'llab-quvvatlaydi, qanchalik xavfsiz va u qanday ishlaydi?
Yaxshiyamki, Chrome har qanday sayt yoki dastur eng yaxshi holatda bo'lishini ta'minlash uchun vositalarni taqdim etadi. DevTools dizaynerlar va ishlab chiquvchilarga veb-sahifani tushunishga imkon beradi: siz DOMni boshqarishingiz, CSS-ni tekshirishingiz, jonli tahrirlash bilan dizaynlarda tajriba qilishingiz, JavaScript-ni disk raskadrovka qilishingiz va ishlashni tekshirishingiz mumkin. (Ushbu Google veb-vositalaridan qanday foydalanish haqida ko'proq bilib oling va agar siz noldan boshlasangiz, bizning eng yaxshi veb-quruvchilarimiz ro'yxatiga ham qarang).
Ammo Google nafaqat brauzerdan ko'proq narsani taklif qiladi. Uning dizayni va rivojlanish hayotining deyarli barcha jabhalarida yordam beradigan vositalar va manbalar mavjud. Ishlashni qanday yaxshilashni bilmoqchimisiz? Bu erda dengiz chiroqlari yordam beradi. Yaxshi ishlaydigan mobil saytlarni yaratmoqchimisiz? Keyin AMP ga salom ayting. Siz chiroyli PWA qurmoqchimisiz? Keyin Flutter, Material Design va Workbox kirishishga tayyor.
Google vositalari, resurslari, kutubxonalari va ramkalaridan foydalanishning go'zalligi shundaki, ular sayyoradagi eng mashhur brauzer - Chrome brauzeri bilan yaxshi ishlashini bilasiz. Qo'shimcha vositalar uchun veb-dizayn vositalarini ko'rib chiqing.
01. Dengiz chiroqi
Ishlash - bu sayt muvaffaqiyatining asosiy omili va Lighthouse - bu veb-sahifalar sifatini yaxshilash uchun Google-ning vositasi (to'g'ri veb-xosting xizmati ham yordam beradi). Xo'sh, qanday qilib dengiz chiroqidan foydalanasiz va u nima qilishi mumkin? Eng sodda shaklda siz "Lighthouse" ni "Audits" yorlig'idan ishga tushirishingiz va ish stoli yoki uyali aloqa vositalarini tanlashingiz mumkin, shuningdek ishlash, kirish va SEO uchun qutilarga belgi qo'yishdan tashqari, tavsiya etilgan yaxshilanishlar bilan yakuniy hisobotni tayyorlashingiz mumkin.
02. Polimer
Polimer veb-komponentlar bilan ishlashi bilan tanilgan, ammo loyiha hozirda kutubxonalar, vositalar va standartlar to'plamini o'z ichiga olgan repertuarini kengaytirdi. Nima kiritilgan? LitElement - bu veb-tarkibiy qismlarni aniqlashni osonlashtiradigan muharrir, lit-html - foydalanuvchilarga JS-da keyingi avlod HTML shablonlarini yozish imkoniyatini beradigan HTML templat kutubxonasi. Bundan tashqari, siz PWA Starter to'plamini, asl Polimer kutubxonasini va veb-komponentlar to'plamini topasiz.
03. API Explorer
Google-da ishlab chiquvchilar uchun keng API kutubxonasi mavjud, ammo kerakli narsani topish oson ish emas. Google APIs Explorer bu erda yordam qo'lini taklif qiladi. O'tkazish mumkin bo'lgan uzoq ro'yxat mavjud, ammo tezroq kirish uchun API ro'yxatini filtrlash uchun qidiruv maydonchasi mavjud. Har bir kirish API-dan qanday foydalanish haqida batafsil ma'lumotga ega bo'lgan ma'lumot sahifasiga havolalar.
04. chayqalish
Agar siz bitta kod bazasidan mobil, veb va ish stoli uchun yaxshi ko'rinadigan dasturlarni yaratmoqchi bo'lsangiz, u holda Flutter sizga mos bo'lishi mumkin. Sayt Flutter bilan ishlash va uni qurish haqida to'liq ma'lumotdir. Nima qilish kerakligi haqida ma'lumot topmadingizmi? Hujjatlar foydalanuvchini o'rnatishdan yaratishga olib boradi, unga ko'plab namunalar va o'quv qo'llanmalari yordam beradi.
05. Google GitHub
Ko'pchilik bilganidek, GitHub kod va fayllarni saqlash va almashish uchun xosting platformasi / omboridir. Va baxtli ravishda, Google platformada 260 dan ortiq omborga ega bo'lgan o'z joyiga ega. Qidiruv vaqtini qisqartirish va siz o'ynashni yoki hissa qo'shmoqchi bo'lgan omborga yaqinlashish uchun filtrdan foydalaning.
06. Qo'g'irchoq
Tugunga o'rnatilgan Puppeteer yuqori darajadagi API-ni taklif qiladi, bu esa boshsiz Chrome-ga samarali foydalanuvchi interfeysisiz Chrome-ga kirish imkonini beradi, keyinchalik dasturchilar buyruq satri orqali boshqarishi mumkin. Xo'sh, Puppeteer bilan nima qilishingiz mumkin? Sahifalarning skrinshotlari va PDF-fayllarini yaratish, shakllarni yuborishni avtomatlashtirish va avtomatlashtirilgan sinov muhitini yaratish uchun bir nechta variant mavjud.
07. Ish qutisi
Agar siz PWA qurmoqchi bo'lsangiz, bu ajoyib boshlang'ich nuqtadir. Workbox veb-ilovalarga oflayn yordam qo'shish uchun JavaScript-ni kutubxonalar to'plamini taqdim etadi. Chuqur qo'llanmalar tanlovi xizmat ko'rsatuvchi xodimlar faylini yaratish va ro'yxatdan o'tkazish, marshrutlarni so'rash, plaginlardan foydalanish va Workbox bilan paketlardan foydalanishni namoyish etadi. Shuningdek, keshlash strategiyasining bir qator namunalari mavjud.
08. Kodelabs
Google mahsuloti uchun amaliy ko'rsatmalarga muhtojmisiz? Codelabs "qo'llanma, o'quv qo'llanmasi va amaliy kodlash tajribasi" ni taqdim etadi. Sayt toifalar va hodisalarga chiroyli tarzda bo'linib, kerakli narsani tez va oson topishga imkon beradi. Unda Analytics, Android, Assistant, kengaytirilgan haqiqat, Flutter, G Suite, Search, TensorFlow va virtual haqiqat mavjud. Variantni tanlang va kichik dasturlarni yaratish uchun kerakli kod va ko'rsatmalarni oling.
09. Rang vositasi
Rangli asbob - bu kirish imkoniyatini tekshirishdan tashqari, palitra yaratish, bo'lishish va qo'llashga imkon beradigan oddiy vosita. Foydalanuvchilar Materiallar palitrasidan oldindan belgilangan palitrani tanlashlari mumkin. Rangni tanlang va keyin uni asosiy rang sxemasiga qo'llang, ikkilamchi parametrga o'ting va yana tanlang. Va nihoyat, ikkala sxema uchun matn ranglarini tanlang. Shu bilan bir qatorda, ranglarni tanlash uchun Custom-ga o'ting. So'ngra palitrani eksport qilishdan oldin hammasi yaxshi ekanligini tekshirish uchun Accessibility-ga o'ting.
10. Sprintlarni loyihalash
Design Sprint to'plami dizayn sprintlarida qatnashishni yoki boshqarishni o'rganayotganlar uchun mo'ljallangan. Dastlab kelganlardan tortib, tajribali sprint murabbiylariga qadar barcha bilim bazalarini qamrab olishga qaratilgan. Metodika haqida bilib oling yoki to'g'ridan-to'g'ri rejalashtirish bosqichiga o'ting, shu jumladan qisqacha ma'lumot yozing, ma'lumotlar to'plang va tadqiqotlar, shuningdek, sprintdan keyin nima qilish kerak. Shuningdek, vositalar, shablonlar, retseptlar va o'zingizning usulingizni yuborish opsiyasi kabi ko'plab manbalar mavjud. Bundan tashqari, sizga resurslarni saqlash va almashish uchun biron bir joy kerak bo'lishi mumkin, shuning uchun bulutli xotirani tanlash joyida ekanligiga ishonch hosil qiling.
11. Odamlar + AI bo'yicha qo'llanma
Ushbu qo'llanma Google-da People + AI Research tashabbusining ishi bo'lib, insonga yo'naltirilgan sun'iy intellekt mahsulotlarini yaratmoqchi bo'lganlarga yordam taklif qiladi. Keng qamrovli qo'llanma foydalanuvchi ehtiyojlari, ma'lumotlarni yig'ish va baholash, aqliy modellar, ishonch, mulohazalar va yoqimsiz muvaffaqiyatsizliklarni o'z ichiga olgan oltita bo'limga bo'lingan. Har bir bob mashqlar, ishchi varaqlar va uni amalga oshirish uchun zarur bo'lgan vositalar va manbalar bilan birga keladi.
12. Google yordamchisi
Bu Google Assistant dasturini ishlab chiquvchisi platformasi bo'lib, tarkib va xizmatlarni Google Assistent bilan birlashtirish bo'yicha qo'llanma taqdim etadi. Bu sizga mobil ilovangizni qanday kengaytirish, qidiruv va yordamchi uchun tarkibni boy usullar bilan taqdim etish, uy atrofidagi chiroqlar, kofe mashinalari va boshqa qurilmalarni boshqarish hamda aqlli karnaylar, displeylar va telefonlar uchun ovozli va vizual tajribalarni yaratish usullarini ko'rsatadi.
13. PageSpeed Insights
PageSpeed Insights veb-tarkibni tahlil qiladi va keyin uni tezroq yuklash bo'yicha takliflar beradi. Shunchaki URL manzilini qo'shing, Tahlil tugmasini bosing va sehr paydo bo'lishini kuting. PageSpeed API-ning ishlashi va undan qanday foydalanishni boshlash haqida yaxshiroq ma'lumot olish uchun Hujjatlarni tekshiring.
14. Google-da AMP
AMP - bu Google-ning tezkor yuklanadigan mobil sahifalarni yaratish uchun vositasi (umid qilamanki) qidiruv reytinglarining yuqori qismiga chiqadi. Qanday qilib tezkor, birinchi navbatda saytlarni yaratishni, AMP-ni Google mahsulotlariga birlashtirishni, AMP-sahifalarni tezroq qilish va AMP-sahifalarni boshqa Google mahsulotlari bilan monetizatsiya qilish uchun Google AMP Cache-ni ishlatishni o'rganing.
15. Google DevTools
Har qanday dizayner va ishlab chiquvchi Chrome to'g'ridan-to'g'ri brauzerga o'rnatilgan vositalar to'plami bilan birga kelishini biladi (yoki hech bo'lmaganda bilishi kerak). Chrome DevTools sahifani tashkil etuvchi elementlarni tekshirish, CSS-ni tekshirish, sahifalarni tezda tahrirlash va boshqa ko'p narsalar uchun juda mos keladi.
Elements yorlig'i - DevTools-ga kirish. Unda tanlangan sahifani tashkil etuvchi HTML kod ko'rsatiladi. Tanlangan sahifadan har bir div yoki tegning xususiyatlari haqida tushuncha oling va jonli tahrir qilishni boshlang. Bu dizaynlar bilan tajriba o'tkazish uchun juda yaxshi. Layout-ni tekshiring - siz Flexbox yoki Grid-dan foydalanayapsiz - va tegishli shriftlarni misollar bilan ko'rib chiqing va animatsiyalarni ko'rib chiqing.
Boshqa joylarda siz CSS-ni ko'rishingiz va o'zgartirishingiz mumkin. Elementlar panelidagi Styles yorlig'ida DOM daraxtidagi tanlangan elementga qo'llaniladigan CSS qoidalari keltirilgan. Dizaynlar bilan tajriba o'tkazish uchun xususiyatlarni yoqing va o'chiring (yoki yangi qiymatlarni qo'shing). Bu jonli dizayndagi o'zgarishlarni amalga oshirishdan oldin hamma narsa kutilganidek ishlashini ta'minlash uchun mukammal vosita.
Shuningdek, siz JavaScript-ni disk raskadrovka qilishingiz, veb-sayt tezligini optimallashtirishingiz va tarmoq tezligini tekshirishingiz mumkin. Ish jarayonini darhol tezlashtirish uchun foydalanishingiz mumkin bo'lgan tezkor maslahat. Manbalar yorlig'iga o'ting, Yangi parcha-ni bosing va tez-tez ishlatiladigan kodni qo'shing. Kod parchasini nomlang va saqlang. Zarur bo'lganda takrorlang. Endi siz ushbu kod parchasini qayta yozish o'rniga olishingiz mumkin.
Har qanday yaxshi brauzer singari Chrome ham doimiy ravishda rivojlanib boradi va har bir yangi versiya yangi xususiyatlarga ega. Chrome holati platformasida nima bo'layotganini bilib oling
16. Materiallar dizayni
Rivojlanish Google-ning eng yaxshi farzandi deb qaralishi mumkin, ammo nima qilsangiz ham, yaratayotganingizda ham, qurayotganingizda ham u yaxshi ko'rinishga ega bo'lishi va foydalanuvchiga undan foydalanishni xohlaydigan tajriba berishi kerak. Material Google stabilizatoriga yaqinda qo'shilgan, ammo dizayn to'plamining muhim qismiga aylangan dizayn tizimidir.
Har qanday yaxshi dizayn tizimi singari, u ham o'ziga xos ko'rsatmalarga ega, ularni yanada hayajonli narsalarga qadam qo'yishdan oldin ko'rib chiqish kerak. Turli xil elementlardan qanday foydalanish, Material mavzusi nima, mavzu va foydalanish qo'llanmalarini, shu jumladan kirish imkoniyatlarini qanday amalga oshirish haqida umumiy ma'lumot oling. Qaerda bo'lmasin, navigatsiya, rang, tipografiya, tovush, ikonografiya, harakatlanish va o'zaro ta'sir kabi dizaynning asosiy yo'nalishlarini o'z ichiga olgan Material Foundation haqida tushuncha mavjud. Har bir toifada nima qilish kerak va nima qilish kerakligi va qayerda ehtiyot bo'lish kerakligi ko'rsatilgan. Nimani kutish mumkinligi haqida tushuncha berish uchun Layout kategoriyasi maketni tushunish, piksel zichligi, ustunlar, oluklar va chekka joylar, to'xtash nuqtalari, foydalanuvchi interfeysi hududlari va intervallarni kiritish usullarini o'z ichiga olgan bir nechta ma'lumotni taklif qiladi.
Dizayn bo'limidan tashqari, dizayn yaratish uchun zarur bo'lgan jismoniy qurilish bloklarini ta'minlovchi komponentlar mavjud. Bu erda nima bor? Tugmalar, bannerlar, kartalar, dialog oynalari, bo'linmalar, ro'yxatlar, menyular, rivojlanish ko'rsatkichlari, slayderlar, snackbarlar (bu ekranning pastki qismidagi dastur jarayonlari haqida qisqacha xabarlar), yorliqlar, matn maydonlari va ko'rsatmalar. Shubhasiz tarkibiy qismlarning keng qamrovli to'plami.
Va Android, iOS, Web va Flutter kabi turli xil platformalar uchun qanday qurish haqida batafsil ma'lumot va o'quv qo'llanmalari bilan ishlab chiquvchilar unutilmagan. Va nihoyat, tanlangan dizayni amalga oshirishda yordam beradigan ko'plab manbalarga bag'ishlangan sahifa mavjud.
Ushbu maqola dastlab net jurnalida paydo bo'ldi. 326-sonni sotib oling.
