Мазмун
- 01. Маяк
- 02. Полимер
- 03. APIs Explorer
- 04. Flutter
- 05. Google GitHub
- 06. Куурчак
- 07. Workbox
- 08. Codelabs
- 09. Color Tool
- 10. Дизайн Sprints
- 11. People + AI боюнча колдонмо
- 12. Google жардамчысы
- 13. PageSpeed Insights
- 14. AMP on Google
- 15. Google DevTools
- 16. Материалдык жасалгалоо
Вебде иштөө, адатта, Google менен кандайдыр бир формада же формада иштей тургандыгыңызды билдирет. Google Chrome атаандаштыктын алдындагы көчөлөр деп эсептеп, дизайнерлер жана иштеп чыгуучулар өз долбоорлору браузер менен кандай иштей турганы жөнүндө ойлонушу керек. Кандай көрүнөт? Ал кандай технологияларды колдойт, канчалык деңгээлде коопсуз жана кандайча иштей алат?
Бактыга жараша, Chrome каалаган сайттын же колдонмонун мыкты деңгээлде иштешин камсыздоочу шаймандарды сунуштайт. DevTools дизайнерлерге жана иштеп чыгуучуларга веб-баракчаны түшүнүүгө мүмкүнчүлүк берет: сиз DOM менен иштей аласыз, CSS текшерип, түз ободо дизайндарда эксперимент жасай аласыз, JavaScript оңдоп, иштин майнаптуулугун текшересиз. (Ушул Google веб шаймандарын кантип колдонуу керектиги жөнүндө көбүрөөк маалымат алыңыз, эгерде сиз нөлдөн баштап баштасаңыз, анда биздин мыкты веб куруучулардын тизмесин да көрө аласыз).
Бирок Google браузерден башка көп нерселерди сунуштайт. Бул сиздин дизайн жана иштеп чыгуу жашооңуздун дээрлик бардык аспектилерине жардам берүүчү куралдары менен ресурстарына ээ. Өндүрүмдүүлүктү кантип жакшыртуу керектигин билгиңиз келеби? Маяк жардамга келди. Мыкты мобилдик сайттарды курууну каалайсызбы? Андан кийин AMP менен саламдашыңыз. Сиз кооз PWA курууну көздөп жатасызбы? Андан кийин Flutter, Material Design жана Workbox кийлигишүүгө даяр.
Google инструменттерин, ресурстарды, китепканаларды жана алкактарды колдонуунун эң сонун жери - бул алардын Chrome браузери менен - планетанын эң популярдуу браузери менен жакшы иштешерин билүүңүздө. Көбүрөөк шаймандарды көрүү үчүн веб-дизайн куралдарыбызды көрө аласыз.
01. Маяк
Performance - бул сайттын ийгилигинин чечүүчү фактору жана Lighthouse - бул веб-баракчалардын сапатын жогорулатуучу Google инструменти (туура хостинг кызматы дагы жардам берет). Ошентип, Маякты кантип колдоносуз жана ал эмне кыла алат? Эң жөнөкөй түрүндө, сиз Маякты Аудиттер өтмөгүнөн иштетип, иштөө, жеткиликтүүлүк жана SEO үчүн кутучаларды белгилөөдөн тышкары, сунушталган өркүндөтүүлөр менен акыркы отчетту иштеп чыгуу үчүн, жумушчу стол же мобилдик параметрлерди тандай аласыз.
02. Полимер
Полимер веб компоненттери менен иштегендиги менен белгилүү, бирок долбоор репертуарын китепканалардын, шаймандардын жана стандарттардын коллекциясын камтыйт. Эмне камтылган? LitElement - бул веб-компоненттерди аныктоону жеңилдетүүчү редактор, ал эми lit-html - колдонуучуларга кийинки тукумдагы HTML шаблондорун JSде жазууга мүмкүнчүлүк берген HTML темптелген китепкана. Мындан тышкары, сиз PWA Starter комплектин, оригиналдуу Полимер китепканасын жана веб компоненттеринин топтомун таба аласыз.
03. APIs Explorer
Googleде API'лердин кеңири китепканасы бар, бирок иштеп чыгуучуларга керектүү нерсени табуу оңой эмес. Бул жерде Google'дун APIs Explorer жардам колун сунууга аракет кылат. Жылдырууга мүмкүн болгон узун тизме бар, бирок тезирээк жетүү үчүн, API тизмесин чыпкалоо үчүн издөө кутучасы бар. Ар бир жазуу шилтеме барагына шилтеме берип, API кандайча колдонулаары жөнүндө көбүрөөк маалымат берет.
04. Flutter
Эгерде сиз мобилдик, веб жана жумушчу стол үчүн бирден коддуу базадан көрүнүктүү тиркемелерди түзүүнү кааласаңыз, анда Flutter сиз үчүн болушу мүмкүн. Сайт Flutter менен иштөө жана аны куруу жөнүндө толук шилтеме болуп саналат. Эмне кыларыңызга көзүңүз жетпеди беле? Документтер колдонуучуну орнотуудан жаратууга чейин алып барат, ага көптөгөн үлгүлөр жана окуу куралдары жардам берет.
05. Google GitHub
Көпчүлүккө белгилүү болгондой, GitHub - бул коддорду жана файлдарды сактоо жана бөлүшүү үчүн хостинг платформасы / кампасы. Бактыга жараша, Google платформасында 260тон ашуун репозиторийи бар электен өткөрөт. Издөө убактыңызды кыскартып, ойноп же салым кошкусу келген репозиторийге жакындоо үчүн чыпканы колдонуңуз.
06. Куурчак
Түйүндүн ичине орнотулган Puppeteer жогорку деңгээлдеги API сунуштайт, башы жок Chrome-го кирүү мүмкүнчүлүгүн берет - натыйжада Chrome UIсиз иштей берет, аны иштеп чыгуучулар буйрук сабы аркылуу башкара алышат. Ошентип, Куурчакты эмне кылсаңыз болот? Баракчалардын скриншотторун жана PDF файлдарын түзүү, форманы тапшырууну автоматташтыруу жана автоматташтырылган тестирлөө чөйрөсүн түзүү үчүн бир нече вариант бар.
07. Workbox
Эгер сиз PWA курууну көздөп жатсаңыз, анда бул эң сонун башталыш. Workbox веб-колдонмолорго оффлайн режиминде колдоо көрсөтүү үчүн JavaScript китепканаларынын жыйнагын камсыз кылат. Тереңирээк колдонмолордун тандоосу кызмат кызматкеринин файлын түзүүнү жана каттоону, өтүнүчтөрдү маршруттоону, плагиндерди колдонууну жана Workbox менен бандлерди колдонууну көрсөтөт. Ошондой эле текшерүү үчүн кэштөөнүн стратегияларынын бир топтому бар.
08. Codelabs
Google өнүмү боюнча практикалык жетекчилик керекпи? Codelabs "жетектөөчү, окуу куралы, практикалык коддоо тажрыйбасын" камсыз кылат. Сайт категорияларга жана окуяларга тыкан бөлүнүп, каалаган нерсеңизди тез жана оңой табат. Ага Analytics, Android, Assistant, толукталган чындык, Flutter, G Suite, Search, TensorFlow жана виртуалдык чындык кирет. Опцияны тандап, чакан тиркемелерди түзүү үчүн керек болгон кодду жана көрсөтмөлөрдү алыңыз.
09. Color Tool
Color Tool - бул жеткиликтүүлүктү текшерүүдөн тышкары, палитра түзүүгө, бөлүшүүгө жана колдонууга мүмкүнчүлүк берген жөнөкөй курал. Колдонуучулар Материал палитрасынан алдын ала аныкталган палитраны тандай алышат. Жөн гана түс тандап, андан кийин аны негизги түс схемасына колдонуп, экинчи параметрге өтүп, кайра тандаңыз. Акыр-аягы, эки схема үчүн тең түстөрдү тандаңыз. Же болбосо, түстөрүңүздү тандоо үчүн Бажы режимине өтүңүз. Андан кийин, палитраны экспорттоодон мурун, бардыгы жакшы экендигин текшерүү үчүн Атайын мүмкүнчүлүктөргө өтүңүз.
10. Дизайн Sprints
Дизайн Спринт Комплекси дизайн спринттерге катышууну же чуркоону үйрөнүп жаткандарга арналган. Алгачкы тажрыйбадан баштап, спринт боюнча тажрыйбалуу машыктыруучуларга чейинки бардык билим базаларын камтыйт. Методология жөнүндө билип алыңыз же түз пландаштыруу баскычына секирип, кыскача жазуу, маалыматтарды топтоо жана изилдөө, ошондой эле спринттен кийин эмне кылуу керек. Ошондой эле, инструменттер, шаблондор, рецепттер жана өз ыкмаңызды тапшыруу мүмкүнчүлүктөрү сыяктуу көптөгөн ресурстар камтылган. Ошондой эле, ресурстарды сактоо жана бөлүшүү үчүн бир жерде сизге бир нерсе керек болуп калат, андыктан булут сактагычтын тандоосу так экендигин текшерип алыңыз.
11. People + AI боюнча колдонмо
Бул колдонмо Googleдеги People + AI Research демилгесинин иши жана адамга багытталган AI өнүмдөрүн курууну каалагандарга жардам сунуш кылат. Ар тараптуу колдонмо колдонуучулардын муктаждыктарын, маалыматтарды чогултуу жана баалоо, менталдык моделдер, ишеним, кайтарым байланыш жана жагымсыз ийгиликтерди камтыган алты бөлүмгө бөлүнгөн. Ар бир глава көнүгүүлөр, жумушчу барактар жана аны ишке ашыруу үчүн керектүү шаймандар жана ресурстар менен коштолот.
12. Google жардамчысы
Бул Google Assistant иштеп чыгуучу платформасы, анда Google Assistant менен мазмунуңузду жана кызматтарыңызды интеграциялоо боюнча колдонмо сунушталат. Мобилдик колдонмоңузду кеңейтүү, Издөө жана Жардамчы үчүн мазмунду бай ыкмалар менен көрсөтүү, чырактарды, кофе машиналарын жана башка шаймандарды үйдүн айланасында көзөмөлдөө жана акылдуу динамиктер, дисплейлер жана телефондор үчүн үн жана визуалдык тажрыйбаларды кантип өркүндөтүү керектигин көрсөтөт.
13. PageSpeed Insights
PageSpeed Insights желе мазмунун талдап, андан кийин аны тезирээк жүктөө боюнча сунуштарды берет. Жөн гана URL кошуп, Анализ баскычын басып, сыйкырдын болушун күтүп туруңуз. PageSpeed API кандай иштээрин жана аны кантип колдонууну баштоо жөнүндө жакшыраак түшүнүк алуу үчүн Документтерди текшериңиз.
14. AMP on Google
AMP - Google'дун тез жүктөлүүчү мобилдик баракчаларды түзүүчү куралы, (издеп) издөө рейтингинин чокусуна чыгат. Ыкчам, колдонуучу биринчи сайттарды түзүүнү, AMPди Google өнүмдөрүнө интеграциялоону, AMP баракчаларын тезирээк кылуу үчүн Google AMP Кэшти колдонууну жана башка Google өнүмдөрү менен AMP баракчаларын кантип акча табууну билип алыңыз.
15. Google DevTools
Ар бир дизайнер жана иштеп чыгуучу Chrome түздөн-түз браузерге орнотулган шаймандардын топтому менен келерин билет (же жок дегенде билиши керек). Chrome'дун DevTools баракчасын түзгөн элементтерди текшерүү, CSSти текшерүү, баракчаларды тез арада редакциялоо жана башка көптөгөн нерселерди жасоого ыңгайлуу.
Elements табулатурасы - DevTools кириш сөзү. Анда тандалган баракты түзгөн HTML коду көрсөтүлөт. Тандалган беттен ар бир дивдин же тегдин касиеттери жөнүндө түшүнүк алып, түз түзөтүүнү баштаңыз. Бул долбоорлор менен тажрыйба жүргүзүү үчүн эң сонун. Макетти текшерип көрүңүз - сиз Flexbox же Grid колдонуп жатасызбы - жана ага байланыштуу ариптерди мисалдар менен карап чыгып, анимацияларды карап чыгыңыз.
Кайда болсоңуз, CSS программасын көрүп, өзгөртө аласыз. Элементтер панелиндеги Стилдер өтмөгүндө DOM дарагында учурдагы тандалган элементке колдонулган CSS эрежелери келтирилген. Дизайндар менен тажрыйба жүргүзүү үчүн касиеттерди күйгүзүп же өчүрүңүз (же жаңы баалуулуктарды кошуңуз). Бул жандуу дизайнга өзгөртүүлөрдү киргизүүдөн мурун, бардыгы күтүлгөндөй иштешин камсыз кылуучу эң сонун курал.
Ошондой эле JavaScriptти оңдоп, веб-сайттын ылдамдыгын оптималдаштырып, тармактын ылдамдыгын текшере аласыз. Бул жерде сиз жумуш агымын тез арада тездетүү үчүн колдоно аласыз. Булактар өтмөгүнө өтүп, Жаңы үзүндү чыкылдатып, көп колдонулган кодду кошуңуз. Коддун үзүндүсүн атап, сактап коюңуз. Зарылдыгына жараша кайталаңыз. Эми сиз бул коддун үзүндүсүн кайра жазуунун ордуна басып алсаңыз болот.
Ар бир жакшы браузер сыяктуу эле, Chrome да дайыма өркүндөп турат жана ар бир жаңы чыгарылышы жаңы функцияларды тартуулайт. Chrome статус платформасында эмне болуп жаткандыгын билип алыңыз
16. Материалдык жасалгалоо
Өнүгүү Google жактырган бала катары каралышы мүмкүн, бирок сиз жасап жаткан, жараткан же курган нерсеңиздин бардыгы жакшы көрүнүп, колдонуучуга аны колдонууну каалаган тажрыйбаны бериши керек. Материал Google'дун стабилдүүлүгүнө акыркы толуктоо болуп саналат, бирок дизайн комплектисинин бышып жетилген дизайн тутуму.
Кандайдыр бир жакшы дизайн системасы сыяктуу эле, анын дагы бир топ көрсөтмөлөрү бар, аларды кызыктуу нерселерге кадам таштоодон мурун караш керек. Ар кандай элементтерди кантип колдонуу керектиги, Материалдык тематика деген эмне, теманы жана колдонууга колдонмолорду, анын ичинде жеткиликтүүлүктү кантип ишке ашыруу керектиги жөнүндө жалпы маалымат алыңыз. Башка жерлерде, материалдык фонд жөнүндө түшүнүк бар, ал макет, навигация, түс, типография, үн, иконография, кыймыл жана өз ара аракеттенүү сыяктуу дизайндын негизги тармактарын камтыйт. Ар бир категория өз ишинде эмнелерди жасоого жана эмне кылбоого боло тургандыгын жана кайсы жерде этият болуш керектигин аныктайт. Эмне күтө тургандыгы жөнүндө түшүнүк берүү үчүн, Layout категориясы макетти түшүнүү, пикселдин тыгыздыгы, жооптуу макет менен кантип иштөө керектигин, анын ичинде мамычалар, арыктар жана жээктер, үзүлмө чекиттер, интерфейстин аймактары жана аралыкты аныктоо методдорун бир нече аталышка сунуштайт.
Дизайн бөлүмүнөн тышкары, дизайн түзүү үчүн керектүү физикалык блокторду камтыган Компоненттер жайгашкан. Бул жерде эмне камтылган? Баскычтар, баннерлер, карточкалар, диалог терезелери, бөлүштүргүчтөр, тизмелер, менюлар, прогресс көрсөткүчтөрү, слайдерлер, снэк-барлар (бул экрандын төмөн жагындагы колдонмо процесстери жөнүндө кыскача билдирүүлөр), өтмөктөр, текст талаалары жана кеңештер. Компоненттердин ар тараптуу коллекциясы.
Жана иштеп чыгуучулар унутула элек, ар кандай платформалар - Android, iOS, Web жана Flutter үчүн кандайча куруу керектиги жөнүндө кеңири маалымат жана окуу куралдары бар. Акыры, сиз тандаган дизайнды ишке ашырууга жардам берүүчү бир топ ресурстарга арналган баракча бар.
Бул макала алгач net журналына чыккан. 326-чыгарылышты сатып алуу.
