Բովանդակություն
- 01. Փարոս
- 02. Պոլիմեր
- 03. API- ների Explorer
- 04. Փչփրոց
- 05. Google GitHub
- 06. Տիկնիկագործ
- 07. Աշխատանքային տուփ
- 08. օրենսգրքեր
- 09. Գունավոր գործիք
- 10. Դիզայն Սպրինտ
- 11. Մարդիկ + AI ուղեցույց
- 12. Google օգնական
- 13. PageSpeed Insights
- 14. AMP- ը Google- ում
- 15. Google DevTools
- 16. Նյութերի ձևավորում
Theանցում աշխատելը սովորաբար նշանակում է, որ դուք Google- ի հետ ինչ-որ ձևով կամ ձևով եք աշխատելու: Եվ տեսնելով, որ Google Chrome- ը փողոցից առաջ է մրցակցությունից, դիզայներներն ու մշակողները պետք է մտածեն, թե ինչպես է իրենց նախագիծը գործելու զննարկչի հետ: Ինչպե՞ս կտեսնի Ի՞նչ տեխնոլոգիաների է այն աջակցում, որքանո՞վ է անվտանգ և ինչպե՞ս է այն կատարվելու:
Բարեբախտաբար, Chrome- ը տրամադրում է գործիքներ ՝ ապահովելու համար, որ ցանկացած կայք կամ ծրագիր լինի լավագույնս: DevTools- ը դիզայներներին և մշակողներին հնարավորություն է տալիս պատկերացում կազմել համացանցային էջի վրա. Դուք կարող եք շահարկել DOM- ը, ստուգել CSS- ը, փորձարկել նմուշներ կենդանի խմբագրմամբ, կարգաբերել JavaScript- ը և ստուգել կատարումը: (Տեսեք ավելին այստեղ, թե ինչպես օգտագործել այս Google վեբ գործիքները, և եթե զրոյից եք սկսում, տես նաև մեր լավագույն վեբ կառուցողների ցուցակը):
Բայց Google- ն առաջարկում է ավելին, քան զննարկիչը: Այն ունի գործիքներ և ռեսուրսներ ՝ օգնելու ձեր նախագծման և զարգացման կյանքի գրեթե բոլոր ոլորտներին: Wantանկանու՞մ եք իմանալ, թե ինչպես բարելավել կատարումը: Փարոսն այստեղ է օգնելու: Wantանկանու՞մ եք ավելի լավ աշխատող բջջային կայքեր ստեղծել: Ապա բարևեք AMP- ին: Դուք փնտրու՞մ եք գեղեցիկ PWA- ներ կառուցել: Այնուհետև Flutter- ը, Material Design- ը և Workbox- ը պատրաստ են միջամտել:
Google- ի գործիքների, ռեսուրսների, գրադարանների և շրջանակների օգտագործման գեղեցկությունն այն է, որ գիտեք, որ դրանք լավ կաշխատեն Chrome բրաուզերի ՝ մոլորակի ամենատարածված զննարկչի հետ: Լրացուցիչ գործիքների համար տե՛ս մեր վեբ ձևավորման գործիքների ամփոփումը:
01. Փարոս
Կատարողականությունը կայքի հաջողության հիմնական գործոնն է, իսկ Lighthouse- ը Google- ի գործիքն է ՝ վեբ էջերի որակը բարելավելու համար (ճիշտ վեբ հոստինգի ծառայությունը նույնպես կօգնի): Այսպիսով, ինչպե՞ս եք օգտագործում Lighthouse- ը և ի՞նչ կարող է դա անել: Իր ամենապարզ տեսքով, Դուք կարող եք գործարկել Lighthouse- ը Աուդիտների ներդիրից և ընտրել ընտրանքների ընտրություն, ներառյալ աշխատասեղանը կամ բջջայինը, բացի կատարման, մատչելիության և SEO- ի նշման տուփերից, առաջարկվող բարելավումներով վերջնական զեկույց ստեղծելու համար:
02. Պոլիմեր
Պոլիմերը հայտնի է վեբ բաղադրիչների հետ իր աշխատանքով, բայց նախագիծն այժմ ընդլայնել է իր խաղացանկը ՝ գրադարանների, գործիքների և ստանդարտների հավաքածու ընդունելու համար: Ի՞նչ է ներառված LitElement- ը խմբագիր է, որը հեշտացնում է վեբ բաղադրիչների սահմանումը, մինչդեռ lit-html- ը HTML գրաֆիկական գրադարան է, որը հնարավորություն է տալիս օգտվողներին գրել հաջորդ սերնդի HTML կաղապարներ JS- ում: Բացի այդ, դուք կգտնեք նաև PWA Starter հավաքածու, բնօրինակ Polymer գրադարան և վեբ բաղադրիչների հավաքածուներ:
03. API- ների Explorer
Google- ը API- ների հսկայական գրադարան ունի, որոնք հասանելի են մշակողներին, բայց գտնելու այն, ինչ ձեզ հարկավոր է, հեշտ գործ չէ: Հենց այստեղ է, որ Google- ի API- ները Explorer- ը ձեռնամուխ է լինում օգնության ձեռք առաջարկելու համար: Կա մի երկար ցուցակ, որի միջոցով կարելի է պտտվել, բայց ավելի արագ մուտք գործելու համար կա որոնման դաշտ ՝ API ցուցակը զտելու համար: Յուրաքանչյուր գրառում հղում է կատարում դեպի հղման էջ, որում ավելի մանրամասն տեղեկություններ կան API- ի օգտագործման մասին:
04. Փչփրոց
Եթե ցանկանում եք բջջայինի, ոստայնի և աշխատասեղանի համար մեկ կոդային բազայից գեղեցիկ դիմումներ ստեղծել, ապա Flutter- ը կարող է ձեզ համար լինել: Կայքը ամբողջական հղում է Flutter- ի հետ աշխատելու և դրա հետ կառուցելու համար: Բացահայտում չունե՞ք ՝ ինչ անել: Փաստաթղթերը օգտվողին տեղադրումից մինչև ստեղծում են տանում, որին օգնում են բազմաթիվ նմուշներ և ձեռնարկներ:
05. Google GitHub
Ինչպես շատերը կիմանան, GitHub- ը հոսթինգի հարթակ / պահոց է ՝ կոդերն ու ֆայլերը պահելու և կիսելու համար: Եվ ուրախալիորեն Google- ն ունի իր ուրույն տեղը հարթակում ՝ ավելի քան 260 պահեստներով, որոնք պետք է մաղեն: Օգտագործեք զտիչը ՝ ձեր որոնման ժամանակը կրճատելու և մոտենալու այն պահեստին, որի հետ ցանկանում եք խաղալ կամ դրան նպաստել:
06. Տիկնիկագործ
Ներկառուցված հանգույցում, Puppeteer- ն առաջարկում է բարձր մակարդակի API, որը հնարավորություն է տալիս մուտք գործել անգլուխ Chrome ՝ արդյունավետ Chrome առանց UI, որը մշակողները այնուհետև կարող են վերահսկել հրամանի տողի միջոցով: Այսպիսով, ի՞նչ կարող ես անել տիկնիկագործի հետ: Էջերի սքրինշոթեր և PDF ձևավորելու, ձևաթուղթը ներկայացնելու և ավտոմատացված փորձարկման միջավայր ստեղծելու համար մի քանի տարբերակ կա:
07. Աշխատանքային տուփ
Եթե ցանկանում եք կառուցել PWA, ապա դա հիանալի մեկնակետ է: Workbox- ը տրամադրում է JavaScript գրադարանների հավաքածու ՝ վեբ հավելվածներին անցանց աջակցություն ավելացնելու համար: Խորացված ուղեցույցների ընտրությունը ցույց է տալիս, թե ինչպես կարելի է ստեղծել և գրանցել ծառայության աշխատողի ֆայլը, երթուղիների հարցումները, օգտագործել փլագինները և աշխատանքային տուփերով փաթեթներ օգտագործել: Եվ կա նաև մի շարք օրինակների պահման ռազմավարություն `ստուգելու համար:
08. օրենսգրքեր
Google արտադրանքի համար գործնական ցուցումների կարիք կա՞: Codelabs- ը տրամադրում է «առաջնորդվող, ձեռնարկների, գործնական կոդավորման փորձ»: Կայքը կոկիկորեն բաժանված է կատեգորիաների և իրադարձությունների, ինչը արագ և հեշտացնում է գտնել ձեր ուզածը: Այն ներառում է Analytics, Android, Օգնական, լրացված իրականություն, Flutter, G Suite, Search, TensorFlow և վիրտուալ իրականություն: Ընտրեք տարբերակ և ստացեք ծածկագիրն ու ուղղությունները, որոնք անհրաժեշտ են փոքր ծրագրեր կառուցելու համար:
09. Գունավոր գործիք
Color Tool- ը պարզ գործիք է, որը հնարավորություն է տալիս ստեղծել, կիսել և կիրառել պալիտրա ՝ բացի մատչելիությունը ստուգելուց: Օգտագործողները կարող են նյութի ներկապնակից ընտրել նախորոշված ներկապնակ: Պարզապես ընտրեք գույն և կիրառեք այն հիմնական գունային սխեմայի վրա, անցեք երկրորդական տարբերակին և նորից ընտրեք: Վերջապես, ընտրեք տեքստի գույները երկու սխեմաների համար: Այլընտրանքորեն, անցեք «Պատվերով» ՝ ձեր գույները ընտրելու համար: Դրանից հետո անցեք Հասանելիություն ՝ ստուգելու համար ամեն ինչ լավ է մինչև վերջապես ներկապնակը արտահանելը:
10. Դիզայն Սպրինտ
Design Sprint Kit- ը նրանց համար է, ովքեր սովորում են ինչպես մասնակցել կամ վարել դիզայնի արագավազքերը: Այն ընդգրկում է գիտելիքների բոլոր հիմքերը ՝ սկսած առաջին դասարանցիներից մինչև արագավազքի արագընթաց վարողներ: Իմացեք մեթոդաբանության մասին կամ անմիջապես անցեք պլանավորման փուլին, ներառյալ համառոտագրություններ գրելը, տվյալների հավաքագրումը և հետազոտությունը, ինչպես նաև այն մասին, թե ինչ պետք է անել հետ-արագավազքով: Նաև ներառում է մի շարք ռեսուրսներ, ինչպիսիք են գործիքները, ձևանմուշները, բաղադրատոմսերը և ձեր սեփական մեթոդը ներկայացնելու տարբերակը: Բացի այդ, դուք, ամենայն հավանականությամբ, ինչ-որ տեղ ձեզ հարկավոր կլինի ռեսուրսներ պահելու և բաժանելու համար, այնպես որ համոզվեք, որ ձեր ամպային պահեստի ընտրությունը տեղում է:
11. Մարդիկ + AI ուղեցույց
Այս ուղեցույցը Google- ում People + AI Research նախաձեռնության աշխատանքն է և նախատեսում է օգնել նրանց, ովքեր ցանկանում են կառուցել մարդակենտրոն AI- արտադրանք: Համապարփակ ուղեցույցը բաժանված է վեց գլուխների, որոնք ընդգրկում են օգտագործողի կարիքները, տվյալների հավաքագրումն ու գնահատումը, մտավոր մոդելները, վստահությունը, հետադարձ կապը և նրբագեղ ձախողումը: Յուրաքանչյուր գլուխ ուղեկցվում է վարժություններով, աշխատաթերթերով և գործիքներով ու ռեսուրսներով, որոնք անհրաժեշտ են դա կյանքի կոչելու համար:
12. Google օգնական
Սա Google Օգնականի մշակողի հարթակն է, որն առաջարկում է ուղեցույց, թե ինչպես ինտեգրել ձեր բովանդակությունն ու ծառայությունները Google Օգնականի հետ: Այն ցույց է տալիս, թե ինչպես ընդլայնել ձեր բջջային հավելվածը, բովանդակությունը հարուստ ձևերով ներկայացնել Որոնման և օգնականի համար, կառավարել լույսերը, սուրճի սարքերը և տան այլ սարքեր և կառուցել ձայնային և տեսողական փորձեր խելացի բարձրախոսների, դիսփլեյների և հեռախոսների համար:
13. PageSpeed Insights
PageSpeed Insights– ը վերլուծում է վեբ բովանդակությունը, այնուհետև առաջարկում է առաջարկներ, թե ինչպես կարելի է այն ավելի արագ բեռնել: Պարզապես ավելացրեք URL, հարվածեք «Վերլուծություն» կոճակին և սպասեք կախարդանքի տեղի ունենալուն: Ստուգեք Փաստաթղթերը ՝ ավելի լավ պատկերացում կազմելու, թե ինչպես է աշխատում PageSpeed API- ն ու ինչպես սկսել այն օգտագործել:
14. AMP- ը Google- ում
AMP- ը Google- ի գործիքն է արագ բեռնվող բջջային էջեր ստեղծելու համար, որոնք (հուսով եմ) կբարձրանան որոնման դասակարգման առաջին հորիզոնական: Իմացեք, թե ինչպես ստեղծել արագ, առաջին օգտագործողների կայքեր, ինտեգրվել AMP- ին Google- ի արտադրանքներում, օգտագործել Google AMP Cache- ը ՝ AMP էջերն ավելի արագ դարձնելու համար և AMP էջերը մանրակրկիտացնելու այլ Google արտադրանքների հետ:
15. Google DevTools
Յուրաքանչյուր դիզայներ և մշակող գիտի (կամ գոնե պետք է իմանա), որ Chrome- ը գալիս է մի շարք գործիքների հետ, որոնք ուղղակիորեն տեղադրված են զննարկչի մեջ: Chrome- ի DevTools- ը իդեալական է էջը կազմող տարրերը ստուգելու, CSS- ն ստուգելու, էջերը թռիչքային խմբագրելու համար և ավելին:
Elements ներդիրը DevTools- ի ներդրումն է: Այն ցուցադրում է ընտրված էջը կազմող HTML կոդը: Ընտրված էջից պատկերացում կազմեք յուրաքանչյուր div- ի կամ հատկորոշիչի հատկությունների մասին և սկսեք կենդանի խմբագրում: Սա կատարյալ է դիզայնի վրա փորձեր կատարելու համար: Ստուգեք դասավորությունը ՝ Flexbox կամ Grid եք օգտագործում, և օրինակներով դիտեք հարակից տառատեսակները և ուսումնասիրեք անիմացիաները:
Ուր էլ որ լինեք, կարող եք դիտել և փոխել CSS- ը: Elements վահանակի Styles ներդիրում նշվում են CSS կանոնները, որոնք կիրառվում են DOM Tree- ում ներկայումս ընտրված տարրի վրա: Անջատեք և անջատեք հատկությունները (կամ ավելացրեք նոր արժեքներ) ՝ դիզայնի փորձեր կատարելու համար: Սա կատարյալ գործիք է ապահովելու համար, որ ամեն ինչ կգործի ինչպես սպասվում էր ՝ նախքան կենդանի դիզայնի ցանկացած փոփոխություն կիրառելը:
Կարող եք նաև կարգաբերել JavaScript- ը, օպտիմալացնել կայքի արագությունը և ստուգել ցանցի արագությունը: Ահա մի արագ հուշում, որը կարող եք օգտագործել `ձեր աշխատանքային գործընթացն անմիջապես արագացնելու համար: Անցեք Աղբյուրների ներդիրին, կտտացրեք Նոր հատված և ավելացրեք հաճախ օգտագործվող կոդ: Անվանեք ծածկագրի հատվածը և պահեք: Կրկնեք ըստ անհրաժեշտության: Այժմ կարող եք գրավել այս կոդի հատվածը ՝ նորից գրելու փոխարեն:
Ինչպես յուրաքանչյուր լավ զննարկիչ, Chrome- ը անընդհատ զարգանում է, և յուրաքանչյուր նոր թողարկում բերում է նոր առանձնահատկություններ: Իմացեք, թե ինչ է կատարվում Chrome կարգավիճակի հարթակում
16. Նյութերի ձևավորում
Developmentարգացումը կարող է դիտվել որպես Google- ի նախընտրած երեխա, բայց այն, ինչ դուք եք պատրաստում, ստեղծում կամ կառուցում, այն պետք է լավ տեսք ունենա և օգտագործողին տա այնպիսի փորձ, որը նրանց ստիպում է օգտագործել այն: Նյութը Google- ի կայունության վերջին լրացումն է, բայց նախագծման համակարգ է, որը հասունացել է դիզայնի հավաքածուի կարևոր մասի:
Anyանկացած լավ նախագծման համակարգ, այն ունի նաև իր ուղեցույցների շարքը, որոնք պետք է նայել նախքան ավելի հետաքրքիր իրերի մեջ մտնելը: Ստացեք ակնարկ, թե ինչպես օգտագործել տարբեր տարրեր, ինչ է նյութի թեման, թեման իրականացնելը և օգտագործման ուղեցույցները, ներառյալ մատչելիությունը: Ուրիշ տեղ, նյութի հիմքի վերաբերյալ պատկերացում կա, որը ներառում է դիզայնի այն հիմնական ոլորտները, ինչպիսիք են դասավորությունը, նավիգացիան, գույնը, տպագրությունը, ձայնը, պատկերագրությունը, շարժումը և փոխազդեցությունը: Յուրաքանչյուր կատեգորիա բացահայտում է իր չափորոշիչները և անելիքները, և թե որտեղ պետք է զգույշ լինել: Որպեսզի պատկերացնեք, թե ինչ է ակնկալվում, դասավորության դասը առաջարկում է բաժիններ `դասավորությունը հասկանալու, փիքսելների խտությունը, ինչպես պատասխանատու դասավորության հետ աշխատելը` ներառյալ սյունակները, ջրհորդաններն ու լուսանցքները, կետերը, UI- ի շրջանները և տարածության մեթոդները:
Դիզայնից այն կողմը Բաղադրիչներ է, որն ապահովում է ֆիզիկական շինանյութերը, որոնք անհրաժեշտ են դիզայն ստեղծելու համար: Ի՞նչ կա այստեղ: Կոճակներ, պաստառներ, քարտեր, երկխոսություններ, բաժանարարներ, ցուցակներ, ընտրացանկեր, առաջընթացի ցուցիչներ, սահողներ, խորտկարաններ (սրանք կարճ հաղորդագրություններ են էկրանի ներքևի մասում գտնվող ծրագրերի մասին), ներդիրներ, տեքստի դաշտեր և գործիքների ցուցումներ: Անկասկած բաղադրիչների համապարփակ հավաքածու է:
Եվ մշակողները չեն մոռացվել ՝ մանրամասներով և ձեռնարկներով, թե ինչպես կարելի է կառուցել տարբեր պլատֆորմների համար ՝ Android, iOS, Web և Flutter: Եվ, վերջապես, կա մի էջ, որը նվիրված է մի շարք ռեսուրսների, որոնք կօգնեն իրականացնել ձեր ընտրած դիզայնը:
Այս հոդվածն ի սկզբանե հայտնվել է net ամսագրում: Գնիր 326 համարը.
