Հարմարվողական դասավորություն. ինչ է դա և ինչպես օգտագործել այն: Ինտերֆեյսի հարմարվողականության իրականացման ուղիները Ինչ է ռեսպոնսիվ վեբ դիզայնը

«Էրմիտաժը» պարզապես ժամանակակից ինտերֆեյս չէ կայքերի կառավարման համար, այն հայեցակարգ է, որը համատեղում է ինտերֆեյսի լուծումները և վեբ մշակողների համար առաջարկությունների «փաթեթը»: «Էրմիտաժ»-ը կանոնների մի շարք է, որոնց հետևելով դուք կստեղծեք արագ, անվտանգ, հարմար և հեշտությամբ կառավարվող վեբ նախագիծ:

Ձեր դիտարկիչում JavaScript-ն անջատված է

«Երկար տարիներ մենք աշխատել ենք արտադրանքի ինտերֆեյսի վրա՝ փորձելով այն դարձնել պարզ և հարմար օգտատերերի համար կայքի կառավարման ամենօրյա աշխատանքում։ Մենք նաև հաշվի ենք առնում վեբ ծրագրավորողների շահերը, որոնց առջև ծառացած է դիզայնի լայն տեսականիով ֆունկցիոնալ կայքերի արագ ստեղծման բարդ խնդիր:

Եվ որքան էլ հույս ունենանք, յուրաքանչյուր հաճախորդ կցանկանա իր սեփական, անհատական ​​դիզայնը և կայքի կառուցվածքը։ Եվ, իհարկե, բոլորը ցանկանում են, որ կայքը արագ բացվի և կարողանա կառավարել մեծ տրաֆիկ: Քայլ առ քայլ լուծելով այս խնդիրները՝ մենք մշակեցինք մի հայեցակարգ, որը համատեղում է տեխնոլոգիաները և ինտերֆեյսի լուծումները և այն անվանեցինք «1C-Bitrix: Hermitage»:

«Էրմիտաժ»-ն է. «Կապակի» վերափոխում - Re: Hermitage
Արտադրանքի ադմինիստրատիվ մասի ինտերֆեյսը ոճային է և արտահայտիչ, բայց ամենակարևորը՝ հասկանալի է առաջին հայացքից և չի պահանջում ուսուցում։ «Ադմինիստրատորի վահանակի» հետ աշխատելը հաճելի է և հեշտ: Դիզայնը հարմարեցված է բջջային սարքերի՝ սմարթֆոնների և պլանշետների սենսորային ինտերֆեյսների հետ աշխատելու համար:

Վարչական բաժնի ձևավորում

Դիզայնի հայեցակարգը մշակվել է AIC-ի կողմից: Խելացի ինտերֆեյսը էսթետիկորեն հաճելի է և հաճելի հույզեր է առաջացնում անմիջապես «ադմինիստրատորի վահանակի» առաջին հայացքից: Նույնիսկ «ադմինիստրատորի վահանակի» հետ արագ ծանոթանալու դեպքում դուք կարող եք արագ բացահայտել հիմնական հսկիչները, հասկանալ դրանց աշխատանքը և զգալիորեն կրճատել վերապատրաստման ժամանակը:

Վերահսկողություն

Կայքի կառավարման ինտերֆեյսի հայեցակարգ Տեղեկատվության կառավարումը ամենօրյա աշխատանք է, և մենք անում ենք ամեն ինչ այս աշխատանքը հաճելի դարձնելու համար: Ապրանքի յուրաքանչյուր նոր տարբերակ քայլեր է ձեռնարկում կառավարման վահանակի մշակման համար: Սա հաշվի է առնում այս վահանակի օգտագործման փորձը և՛ մշակողների, և՛ 1C-Bitrix-ի հաճախորդների կողմից: Արդյունքում, Control Panel-ը բարելավվում է՝ այն ձեռք է բերում ոչ միայն նոր տեսք, այլև նոր հնարավորություններ։

Վահանակը պարունակում է երկու էջանիշ, որոնց միջև կարող եք հեշտությամբ անցնել և կառավարել բովանդակությունը հենց այնտեղ, որտեղ այն ձեզ անհրաժեշտ է: Իհարկե, Control Panel-ը և դրա երկու ռեժիմները հասանելի են միայն գրանցված օգտատերերի համար և հայտնվում են անմիջապես կայք մուտք գործելուն պես:

Կայքի կառավարման վահանակ: Ինտերֆեյս «Էրմիտաժ»

Կայքի կառավարումը բաժանված է երկու հիմնական ռեժիմի.

Աշխատանքային ռեժիմ «Կայքի վերևում»

«Էրմիտաժը» կառավարման առումով ներառում է հետևյալ գործառույթները.
Կառավարման վահանակի ֆունկցիոնալությունը 1C-Bitrix: Hermitage հայեցակարգի շրջանակներում Խնդրում ենք նկատի ունենալ, որ կառավարման վահանակի ֆունկցիոնալությունը կախված է ձեզ՝ որպես կայքի օգտատերերի, տրված իրավունքներից: Բայց դուք կարող եք գնալ Administration բաժին կայքի ցանկացած կետից և Control Panel-ի ցանկացած ռեժիմում: Խմբագրման ռեժիմ Սեղմելով խմբագրման ռեժիմի կոճակը, դուք անցնում եք խմբագրման ռեժիմին: Եվ այն, ինչ պետք է հատկապես նշել, այն է, որ դուք կարող եք կարգավորել այս ռեժիմի ընդգրկումը ինչպես էջի վերաբեռնմամբ, այնպես էլ առանց դրա: Կառավարեք բոլոր տարրերն ու բաղադրիչները հանրային էջերում: Ի վերջո, խմբագրման ռեժիմը ներառում է ոչ միայն ընթացիկ էջը կամ տեղեկատվական բլոկների տարրերը փոխելու հնարավորությունը, ինչպիսիք են նորությունները կամ կատալոգի ապրանքները: Խմբագրման ռեժիմում դուք կարող եք նույնքան հեշտությամբ - հենց «կայքի վերևում» - կառավարել կայքի ձևանմուշում և կոնկրետ էջի հիմնական աշխատանքային տարածքում ներառված բաղադրիչները:

հայտնվում է, երբ մկնիկը անցնում է դրա վրայով: Այս ընտրացանկը կարելի է տեղափոխել, ամրացնել կամ ներկայացնել ուղղահայաց կամ հորիզոնական: Համակարգի հարմարվողական ինտերֆեյսը կհիշի այս բաղադրիչի, այս էջի, այս օգտվողի համատեքստի ընտրացանկի փոխված տեսքը և հաջորդ անգամ այն ​​կբացի ճիշտ նույն ձևով և նույն տեղում:

Ավելացնել, խմբագրել և ջնջել բաղադրիչի տվյալները անմիջապես կայքի Հանրային մասից: Այս գործողությունների համար բացարձակապես կարիք չկա գնալ Վարչական բաժին: Դուք կարող եք խմբագրել կամ ջնջել ցանկի տարրերից որևէ մեկը՝ օգտագործելով կոճակները, որոնք հայտնվում են, երբ մկնիկը տեղափոխում եք այս տարրերի վրա:

Դուք կարող եք «հետ գցել» վերջին գործողությունը

Կարիք չկա վախենալ էջի վրա ինչ-որ սխալ անելուց, քանի որ դուք միշտ հնարավորություն ունեք հետարկել վերջին գործողությունը: Գնումների զամբյուղի ֆունկցիոնալության այս ներդրումը ձեր կայքում ներառում է դրա բովանդակության բոլոր գործողությունները: Ավելացնելուց հետո, անհրաժեշտության դեպքում փոխելով էջը, դուք պարզապես չեղարկում եք ձեր վերջին գործողությունը։ Նվազագույն ռեժիմ Նվազագույն գործողության ռեժիմը հարմար կլինի նրանց համար, ովքեր արդեն գիտեն, թե ինչպես աշխատել համակարգի հետ: Պարզապես նվազագույնի հասցրեք Control Panel-ը՝ էկրանի տարածքն ազատելու համար: Միևնույն ժամանակ, նույնիսկ նվազագույնի հասցված վահանակը պահպանում է կառավարման գործառույթները:

Դուք կարող եք աշխատել մենյուի հետ, թարմացնել արտադրանքը, միացնել կամ անջատել խմբագրման ռեժիմը, վերականգնել քեշը կամ գնալ կառավարման ռեժիմ: Մի խոսքով, ծալված վահանակը շարունակում է գործել: Ի դեպ, սովորական կրկնակի սեղմումով կարող եք փլուզել և նորից ընդլայնել Panel-ը:

Ադմինիստրացիա Ապրանքի ադմինիստրատիվ բաժինը նախատեսված է ամբողջ ինտերնետային նախագծի լիարժեք կառավարման համար: Ադմինիստրատիվ մասում աշխատասեղանն անհատական ​​կարգավորելի է, հագեցած է գաջեթներով և հագեցած է մենյուի որոնման համակարգով։ Դուք կարող եք արտադրանքի մեջ ստեղծել այնքան «Սեղանաշար», որքան ցանկանում եք:

Մշակողները կարող են ստեղծել իրենց սեփական գաջեթները, այնուհետև ավելացնել դրանք իրենց աշխատասեղանին: Որպես օրինակ՝ դուք կարող եք օգտագործել գաջեթներ՝ ցուցադրելու վերջին պատվերների ցուցակները, ընկերության նորությունները, փաստաթղթերի հավաքածուները և այլն: «Ուղիղ որոնումը» աշխատում է անմիջապես վարչական ընտրացանկի «Desktop»-ից: Որոնումն ակնթարթորեն ձեզ տանում է դեպի ցանկի ցանկալի տարրը: Եվ կարևոր չէ, թե քանի բաժին և ենթաճյուղ է պարունակում մենյուը: Տառադարձություն

Դուք չունեք անհանգստանալու, թե ինչ ֆայլի անուն վերագրել որևէ էջի: Եվ դրա անունը անգլերեն թարգմանելու համար թարգմանչական ծրագրերի կարիք չկա: Պարզապես ստեղծեք էջ և սահմանեք դրա վերնագիրը. դուք ավտոմատ կերպով կստանաք ֆայլի անունը:

Էջի ստեղծման հրաշագործը ավտոմատ կերպով տառադարձում և թարգմանում է էջի վերնագիրը և առաջարկում այն ​​որպես փաստաթղթի ֆայլի անուն՝ որոնման համակարգի ավելի լավ օպտիմալացման համար: Մուտք դեպի էջ Կայքի նոր էջը չպետք է անմիջապես ցուցադրվի աշխարհին: Նախ պետք է ստուգել այն և քննարկել գործընկերների հետ, իսկ հետո հաստատել ղեկավարությունից: Մի հրապարակեք այն. ստեղծելիս պարզապես նշեք «Սահմանափակել մուտքը էջ» վանդակը: Նշեք օգտատերերի խմբերը, որոնց ցանկանում եք ցույց տալ այն. պարզապես ընտրեք այս խմբերը:

Ու՞մ եք ցանկանում ցույց տալ էջը:

Էջի ստեղծման անմիջապես հետո մուտքի սահմանափակումներ սահմանելու ունակությունը զգալիորեն կհեշտացնի բովանդակության մենեջերների աշխատանքը երկար համակարգում և խմբագրում պահանջող բովանդակության հետ աշխատելիս:

Ինտերֆեյս

Կառավարեք ձեր կայքը հեշտությամբ և պրոֆեսիոնալ կերպով: Hermitage արտադրանքի ինտերֆեյսը հարմարվում է կայքի հետ ձեր ամենօրյա աշխատանքին, հիշում է ձեր նախասիրությունները և թույլ է տալիս ավելի քիչ ժամանակ ծախսել տեխնիկական առաջադրանքների վրա: Ինտերֆեյսը կարծես «լողում է» կայքի վերևում, ինչը թույլ է տալիս տեսնել, թե ինչ եք անում և անմիջապես ցույց տալ արդյունքները:

«Սավառնեք կայքի վերևում, հեշտությամբ կատարեք գործողություններ, մի կորցրեք ձեր աշխատանքի ենթատեքստը և անմիջապես տեսանելի արդյունքներ ստացեք: Ինտերֆեյսը կհիշի ձեր նախասիրությունները՝ ցուցակի կարգավորումները, զտիչները, մուտքագրման ձևերը... Իսկ հաջորդ անգամ ավելի քիչ ժամանակ կծախսեք այս գործողության վրա:

Օգտագործեք ծանոթ «Մենյու» կոճակը՝ մեկ սեղմումով ձեր կայքի բոլոր հնարավորություններին մուտք գործելու համար: Սկսնակների համար ամեն ինչ պարզ է, իսկ մասնագետների համար՝ հարմար։ Դու չես վարժվում կայքին, բայց կայքը ընտելանում է քեզ, հարմարվում քո սովորություններին ու առաջադրանքներին»:

Գլխավոր տնօրեն, 1C-Bitrix, Սերգեյ Ռիժիկով

Ձեր ամբողջ էներգիան ստեղծարարության վրա է, ոչ թե կոճակ փնտրելու: Ամենօրյա տեղեկատվության կառավարումը դառնում է ավելի սովորական, և դուք էներգիա եք ծախսում ստեղծագործական առաջադրանքների վրա, այլ ոչ թե էջերի, բաժինների և մենյուների տեխնիկական հրապարակման վրա:

«Տարբերակից տարբերակ ավելի ու ավելի շատ ֆունկցիոնալություն է հայտնվում արտադրանքում, ավելի ու ավելի շատ գործողություններ՝ ինտերֆեյսում: Մենք մեծ աշխատանք ենք կատարել արտադրանքի ինտերֆեյսի, հատկապես օգտագործողի կառավարման վահանակի վերանախագծման ուղղությամբ:

Նոր հարմարվողական ինտերֆեյսը հեշտացնում է ցանկալի գործողությունների որոնումը, խմբավորում է գործողություններն ըստ օգտվողի դերերի և ընդգծում ամենահաճախները՝ աշխատանքային վահանակը չխառնելու և օգտագործողի համար ավելի հեշտ հասկանալու համար»:

Վադիմ Դումբրավանու, Bitrix-ի նախագծի ղեկավար

Հարմարվողական ինտերֆեյսը հետևյալն է.

• Համատեքստային խմբագրում – կառավարել բովանդակությունը անմիջապես կայքում: Եթե ​​Ձեզ անհրաժեշտ է ուղղել էջը, սեղմեք «Խմբագրել» հենց այնտեղ: Եթե ​​Ձեզ անհրաժեշտ է բաժին ավելացնել, սեղմեք «Ստեղծել»: Մի կորցրեք ձեր աշխատանքի ենթատեքստը: Նոր ինտերֆեյսը լողում է կայքի վերևում՝ թույլ տալով տեսնել, թե ինչ եք անում և անմիջապես ցույց տալ արդյունքները:
• Անհատական ​​հարմարեցում օգտագործողին. արտադրանքի միջերեսը հիշում է վերջին գործողությունները, ֆիլտրի կարգավորումները և տեղեկատվության ներկայացման հարմար եղանակները: Ինտերֆեյսը հարմարվում է ձեր ամենօրյա աշխատանքին և թույլ է տալիս ամեն օր ավելի ու ավելի քիչ ժամանակ ծախսել դրա վրա:
• «Մենյու» կոճակը ծանոթ և արագ մեկ սեղմումով մուտք է գործում ձեր կայքի բոլոր հնարավորություններին: Շատ հարմարավետ է! Բացի այդ, երբ «Մենյու» կոճակի միջոցով գնում եք «», հիշվում է այն էջը, որից անցում է կատարվել, սա ոչ պակաս հաճելի է:
• Դերի հարմարեցում - ամենօրյա աշխատանքի վստահ կատարման համար: Կառուցապատողներին հասանելի են բոլոր գործիքները՝ վեբ կայքի մշակման և հարմարեցման համար: Կայքի խմբագիրներն աշխատում են միայն բովանդակությամբ՝ առանց նախագծի տեխնիկական աշխատանքը խաթարելու վախի։ Յուրաքանչյուրը հստակ կատարում է իր խնդիրը։
• Բովանդակության ստեղծման մոգերը կօգնեն ձեզ ընտրել ֆայլերի և բաժինների անունները, լրացնել կայքի ընտրացանկը և օգնել ձեզ լրացնել հատկությունները: Բարդ ամենօրյա գործողությունները դառնում են պարզ: Մենք պարզապես չենք կարող բովանդակությունը գրել ձեզ համար, մնացածը վարպետը կանի ձեզ համար:

Հարմարվողական ինտերֆեյսը նախատեսված է.

• նվազեցնել նոր օգտատերերի վերապատրաստման ծախսերը. ոչ մի ուսուցում չի պահանջվում, պարզապես ժամանակ է պետք, որպեսզի կայքը ընտելանա ձեզ: Ինտերֆեյսին ընտելանալու ժամկետը ընդամենը 1 ժամ է։
• սովորական առաջադրանքները վերածել ստեղծագործական գործընթացի, էներգիա ծախսել ստեղծագործական առաջադրանքների վրա, այլ ոչ թե էջերի, բաժինների և մենյուների տեխնիկական հրապարակման վրա.
• նվազեցնել վեբկայքի կառավարման վրա ծախսվող ժամանակը` սովորական դարձնելով ծրագրի ամենօրյա կառավարումը.
• հեռացնել նոր օգտատերերի «նախագիծը կոտրելու» մտավախությունները և խուսափել բովանդակությունը կառավարելիս սխալներից շատերից:

Արտադրանքի վարչական ինտերֆեյսի վրա աշխատանքը շարունակվում է: 1C-Bitrix-ի օգտատերերը. Կայքի կառավարում կարող են ներբեռնել բոլոր ինտերֆեյսի թարմացումները՝ օգտագործելով SiteUpdate տեխնոլոգիան: Դուք միշտ կիմանաք նոր հնարավորությունների մասին կայքում, ինչպես նաև մեր տեղեկագրերում:

Ներկառուցված վիզուալ խմբագրիչ Վիզուալ HTML խմբագրիչն արդեն ներկառուցված է արտադրանքի մեջ, և ձեզ հարկավոր չէ այն տեղադրել: Այս խմբագրիչի միջոցով դուք կարող եք փոխել ձեր էջերը կայքում իրական ժամանակում՝ հենց ձեր բրաուզերի միջոցով: Խմբագիրը թույլ է տալիս ոչ միայն խմբագրել և ձևաչափել սովորական տեքստը, այլև աշխատել տեսողական բաղադրիչների հետ:

Տեսողական խմբագիրն արդեն ներկառուցված է ձեր կայքում:

Կառուցվածքի կառավարում Բոլոր հնարավորությունները Օգտագործողի համար հարմար ինտերֆեյս Գեղեցիկ, թեթև, ժամանակակից:

Տեսողական խմբագրիչը ներառում է թեթև, գեղեցիկ և էրգոնոմիկ ինտերֆեյս: Ընկերական խմբագրի սցենարները թույլ են տալիս հարմարավետ և արագ աշխատել բովանդակության հետ, օրինակ՝ տեղադրել հղումներ և նկարներ:

Այսպիսով, երբ նկար եք տեղադրում էջի մեջ, կարող եք անմիջապես ընտրել դրա գտնվելու վայրը և չափը: Դուք կարող եք անմիջապես տեսնել, թե ինչպես է այն տեքստում:

WYSIWYG (արտասանվում է «wee-zee-wig», անգլերենից «What You See Is What You Get» - «այն, ինչ տեսնում ես, դա այն է, ինչ ստանում ես») խմբագրման մեթոդ է, որտեղ խմբագրման գործընթացում շտկված նյութը ճիշտ նույն տեսքն ունի, ինչ և վերջնական արդյունքը։

Իրական ժամանակում խմբագրում Խմբագիրը ներառում է բոլոր այն գործիքները, որոնք անհրաժեշտ են բովանդակության մենեջերին

Տեղադրեք բաղադրիչները էջում՝ պարզապես դրանք մկնիկի հետ քաշելով հատուկ վահանակից և անմիջապես կարգավորեք դրանց պարամետրերը, որոնք սահմանում են ձեր կայքում դինամիկ փոփոխվող տեղեկատվության տեսքը:

Տեսողական խմբագիր. բաղադրիչի պարամետրերի խմբագրում

Խմբագիրն ունի էջի խմբագրման ընդարձակ գործիքներ

Հարմար որոնման մեխանիզմն օգնում է ձեզ ակնթարթորեն գտնել անհրաժեշտ բաղադրիչը՝ էջում տեղադրելու համար: Համացանցից և այլ աղբյուրներից, օրինակ՝ Word-ից, տեքստը պատճենելիս կոդը «մաքրվում է» ավելորդ պիտակներից: Ավելին, այս տեղադրվող կոդը դառնում է վավեր և ճիշտ HTML5 կոդը: Միևնույն ժամանակ, խմբագրի աշխատանքի արդյունքը միշտ նույնն է` անկախ նրանից, թե ինչ բրաուզեր եք օգտագործում:

Օգտատիրոջ ցանկությունների մշակման արդյունքների հիման վրա խմբագրիչը մշտապես կատարելագործվում է: Հարմար է դրանում կատարել բազմաթիվ գործողություններ և աշխատել էջերի ստեղծման և տեքստերի ձևաչափման վրա:

Կոդի ընդգծում և տողերի համարակալում

Շատ հարմար է PHP-ի նման էջերը խմբագրելը, քանի որ համակարգում ներկառուցված խմբագիրն ընդգծում է կոդը և համարակալում տողերը։ Եվ էջերն իրենք են պահվում «Այաքսի ոճով» «մեր աչքի առաջ»՝ առանց էջը վերաբեռնելու և առանց ուշադրության կորստի:

Մութ խմբագրիչի սխեման

• շարահյուսություն՝ ընդգծելով HTML + PHP + Javascript + SQL;
• հետին լույսը փոխարկվում է, և դուք կարող եք անջատել այն առանց էջը վերաբեռնելու.
• 2 գունավոր թեմա՝ բաց և մուգ;
• արագ ցատկ դեպի տող իր թվով;
• Tab/Shift+Tab՝ ներդիրները տեղադրելու և հետարկելու համար:

Տեղեկատվության կառավարումը ամենօրյա աշխատանք է, մենք անում ենք ամեն ինչ այս աշխատանքը հաճելի դարձնելու համար:

«Split» ռեժիմ Ուղղահայաց և հորիզոնական

Այժմ ձեր խմբագիրն ունի 2 լիարժեք «պառակտում» ռեժիմ՝ ուղղահայաց և հորիզոնական: Համակցված ռեժիմով աշխատելը շատ հարմար է։

Դուք կարող եք միաժամանակ տեսնել էջի կոդը և դրա ցուցադրումը: Դուք կարող եք խմբագրումներ կատարել պատուհանի ցանկացած մասում՝ տեսողականորեն խմբագրել էջը կամ խմբագրել դրա կոդը:

Պառակտում - պատուհանի բաժանում երկու մասի` տեսողական խմբագրում և կոդի խմբագրում:

Հարմար որոնում/փոխարինում Գտեք բաղադրիչ մեկ վայրկյանում:

Խմբագիրն ունի ներկառուցված հարմար որոնման/փոխարինման հնարավորություն՝ ցանկացած բովանդակության մենեջերի երազանքը: Այժմ դուք կարող եք, օրինակ, ակնթարթորեն գտնել անհրաժեշտ բաղադրիչը և «քաշել» այն էջ: Պետք չէ հիշել, թե որտեղ է այն բաղադրիչի կառուցվածքում: Սա հատկապես արժեքավոր է, երբ օգտագործվում են մեծ քանակությամբ բաղադրիչներ:

Նույն արդյունքը բոլոր բրաուզերում Օգտագործեք ցանկացած բրաուզեր:

Արտադրանքի մեջ ներկառուցված տեսողական խմբագրիչը համատեղելի է բոլոր հայտնի բրաուզերների հետ: Խմբագիրը հավասարապես ճիշտ է աշխատում բոլոր հայտնի բրաուզերներում և աշխատում է նույն գործառույթները: Դուք կարող եք խմբագրել կայքի էջերը ցանկացած բրաուզերում, արդյունքը կլինի նույնը:

«Մաքրում» կոդը մաքուր կոդը տեղադրելու ժամանակ:

Խմբագիրն իրականացնում է տեքստի տեղադրումը տարբեր աղբյուրներից՝ բովանդակության ավտոմատ մաքրման միջոցով: Տեքստը, օրինակ, Word-ից պատճենելիս կոդը վերածվում է HTML5-ի։ Բոլոր անհարկի - աննշան պիտակները հանվում են ծածկագրից:

Մշակողների համար

Վեբ մշակողները կգնահատեն բաղադրիչի վահանակի և հատվածների վահանակի գործառույթների իրականացումը (մեկ սլայդով): Նրանք նաև ստանում են JS մակարդակում հարմարեցնելու հնարավորություն և ընդլայնված իրադարձությունների մոդել:

Վավեր և ճիշտ HTML5 Վավերացումով. ամեն ինչ կարգին է:

HTML5-ը ոչ միայն գալիս է, այլ արդեն այստեղ է: Ձեր ներկառուցված վիզուալ խմբագրիչով դուք կարիք չունեք անհանգստանալու ձեր կայքում էջի կոդի վավերականության և ճշգրտության մասին: Խմբագիրը ստեղծում է հենց այնպիսի կոդ, որը ճիշտ է ընկալվում ժամանակակից բրաուզերների կողմից:

Կարիք չկա ձեռքով գրել ճիշտ կոդը

Այս խմբագրիչը ներկառուցված է ձեր կայքում, և ձեր բովանդակության կառավարիչը ստիպված չէ մտածել այն մասին, թե ինչ կառուցվածքային տարրեր են օգտագործվում տեքստերը նշելու համար:

Ինչու է ձեզ անհրաժեշտ վավեր HTML5
Վավերական HTML5-ին անցնելու առավելություններն անհերքելի են, դրանք երկար ժամանակ քննարկվել են վեբ մշակողների կողմից (օրինակ.

Այս ամենը շնորհիվ նոր կառավարվող քեշավորման տեխնոլոգիայի (Cache Dependencies), որը ճշգրիտ կերպով ծառայում է բովանդակության խմբագրի հարմար աշխատանքին և տվյալների ավտոմատ թարմացմանը անմիջապես այն փոխելուց հետո: Այս տեխնոլոգիան թույլ է տալիս ցուցադրել փոփոխությունները կայքում՝ չսպասելով քեշի թարմացմանը, որն իրականացվում է համակարգի կողմից նշված ժամանակահատվածներում։ Այդ իսկ պատճառով սա կայքի հետ հարմարավետ օգտատերերի փորձի ամենակարևոր տեխնոլոգիական բաղադրիչներից է:

• Կայքն արագացնելու և նախագիծը մեծացնելու համար խորհուրդ ենք տալիս աջակցել Autocaching տեխնոլոգիան և օգտագործել Managed Caching տեխնոլոգիան:
• Ավտո + Կառավարվող

Մշակողների համար

«Էրմիտաժ» վեբ ծրագրավորողների համար «Էրմիտաժ» հայեցակարգը ներառում է տեխնոլոգիական առաջարկությունների մի ամբողջ շարք վեբ մշակողների համար: Սա տպավորիչ ցուցակ է, որը պարունակում է առաջարկություններ ձեր հավելվածները «ճիշտ» ստեղծելու համար: Սա Էրմիտաժի հայեցակարգ է ծրագրավորողների համար, որը ցույց է տալիս, թե ինչպես մշակել հավելվածներ Bitrix հարթակի համար: Զարգացեք այնպես, որ այս հավելվածներն ապահովեն աշխատանքի հարմարավետություն և հեշտություն Hermitage ինտերֆեյսում: Այս առաջարկություններից շատերը լավ հայտնի են փորձառու ծրագրավորողներին:

Առաջարկություններ վեբ մշակողների համար.

• Դիզայն. Կատարվում է համապատասխան. Հատկապես այն պահերին, որոնք վերաբերում են ձեր սեփական դիզայնի կաղապարի ստեղծմանը և դրա կիրառմանը: Մենք փորձեցինք մշակել կառավարման միջերեսներ այնպես, որ չսահմանափակենք վեբ մշակողներին դասավորության և դիզայնի տարբերակներում:
• Կայքի ձևանմուշում խորհուրդ է տրվում օգտագործել մենյուի ստանդարտ բաղադրիչներ՝ քեշով: ()
• Խորհուրդ է տրվում ստեղծել կայք՝ օգտագործելով . Կամ օգտագործեք ստանդարտ բաղադրիչներ, կամ նախագծի նպատակների համար ստեղծեք հատուկ բաղադրիչներ իր հատուկ կարիքների համար:
• Մենք խորհուրդ ենք տալիս այն հարմարեցնել արտաքին տեսքը: Սա կապահովի նրանց անվտանգությունը արտադրանքը թարմացնելիս: Դուք կարող եք պատճենել ձևանմուշը ուղղակիորեն հանրային ինտերֆեյսից խմբագրման ռեժիմում: Բաղադրիչը կարող է ունենալ անսահմանափակ թվով ձևանմուշներ:
• Մենք խորհուրդ ենք տալիս, որ եթե փոփոխում եք 1C-Bitrix բաղադրիչը կամ ստեղծում ձեր սեփական բաղադրիչը, ստեղծեք այն:
• Բաղադրիչներ մշակելիս կարող եք հաշվի առնել.
• Օգտագործումը խորհուրդ է տրվում բարդ ֆունկցիոնալության կամ բազմաէջանոց դիտումների ստեղծման դեպքում, երբ առանձին բաղադրիչների միացումը դժվար կլինի օգտատերերի համար։
• Կայքն արագացնելու և նախագիծը մեծացնելու համար խորհուրդ ենք տալիս աջակցել Autocaching տեխնոլոգիան և օգտագործել Managed Caching տեխնոլոգիան:
• Բաղադրիչները կարգավորելիս խորհուրդ է տրվում բաղադրիչի պարամետրերը սահմանել Auto+Managed՝ երկար պահելու ժամանակով (1-12 ամիս, եթե ամբողջությամբ աշխատում եք Cache Dependencies տեխնոլոգիայով):
• Ցանկալի է, որ Autocaching ռեժիմում բաղադրիչը չկատարի հարցումներ դեպի տվյալների բազա կամ կատարի միայն այն հարցումները, որոնց համար քեշավորումը իռացիոնալ է:
• Հնարավորության դեպքում, ցանկալի է աջակցություն որոնողական համակարգի օպտիմալացման նպատակներին:
• Մենք առաջարկում ենք աջակցություն՝ արտադրանքի API-ի միջոցով ցանկի տարրերը կառավարելու համար: Սա թույլ կտա օգտվողներին խմբագրել և ջնջել տարրերը անմիջապես կայքի էջերում:
• Խորհուրդ է տրվում նախագծել մեծ զարգացումներ ձեր սեփական մոդուլներում API-ով և դրանցում ձեր սեփական բաղադրիչները ներառելով: Նրանց հետագա տեղադրմամբ MarketPlace-ում և SiteUpdate տեխնոլոգիայի միջոցով թարմացնելու ունակությամբ: ()
• Համակարգի օբյեկտների հետ աշխատելու համար խորհուրդ է տրվում օգտագործել պլատֆորմի API: Շատ անցանկալի ուղղակի հարցումներ դեպի տվյալների բազա: Սա կարող է պատճառ դառնալ, որ արտադրանքի թարմացումները անհամատեղելի լինեն գործընկերոջ կատարման հետ:
• Ապրանքի առանցքի ամբողջականության պահպանում և նախագիծն իրականացնելիս մեր առաջարկությունների օգտագործումը` ապահովելու համար SiteUpdate թարմացման տեխնոլոգիայի միջոցով արտադրանքը թարմացնելու հնարավորությունը: Օգտագործեք իրադարձությունների ներքին համակարգը՝ ապրանքի տրամաբանությունը փոխելու կամ նոր իրադարձությունների հայտնվելը պահանջելու համար: (

Այս առաջարկություններին համապատասխան վեբկայքի մշակումը հաճախորդների համար կտրամադրի սկզբունքորեն կարևոր ասպեկտներ՝ կառավարման հեշտություն, թարմացման հնարավորություն, բարձր կատարողականություն և նախագծի անվտանգություն:

Այս պահին 100,000 ամենաշատ այցելվող կայքերից մոտ 11-12%-ը ռեսպոնսիվ է, և կասկած չկա, որ առաջիկա մի քանի տարիներին այդ թիվը կավելանա։

Քանի որ ավելի շատ կազմակերպություններ իրենց թեւերը թեւակոխում են բազմաթիվ սարքերում համացանցի իրողությունները ընդունելու համար, արժե նայել այդ նիրվանային հասնելու համար օգտագործվող տարբեր ռազմավարություններին.

Հարմարվողական արդիականացում

Responsive redesign-ը գոյություն ունեցող միայն աշխատասեղանի համար նախատեսված վեբկայքը վերցնելու և ըստ էության այն «պատասխանող վերափոխելու» գործընթացն է:

Երբ խոսքը վերաբերում է պատրաստի կայքերին (մասնավորապես՝ առևտրային), թիմերը միշտ չէ, որ հնարավորություն ունեն հրաժարվել ամեն ինչից և նորից կառուցել։
Դեն Սեդերհոլմ

Կազմակերպությունների մեծ մասի համար զրոյից նոր դիզայնի լայնածավալ ստեղծումը նույնիսկ չի դիտարկվում: Ահա թե ինչու արձագանքող արդիականացումը հայտնի մոտեցում է շարժական սարքերի համար լավ փորձ ստեղծելու համար:

Առավելությունները

• Համեմատաբար արագ:
  Պատասխանատու արդիականացման մի քանի եղանակներ կան, այս ռազմավարությունը կարող է լինել small-screens.css ֆայլի ավելացումը կայքում: Չնայած այս բավականին կոպիտ օրինակին, հարմարվողական արդիականացումը գրավիչ տարբերակ է մեծ թվով կազմակերպությունների համար, քանի որ այն չի պահանջում վերակառուցել ամեն ինչ զրոյից:
• Ծանոթ.
  Չի շփոթեցնում օգտվողներին: Մարդիկ տարիներ են ծախսել՝ ընտելանալով ինտերֆեյսին, և արդիականացնելով գոյություն ունեցողը, կազմակերպությունները պահպանում են ծանոթ մոտեցումը՝ միաժամանակ բարելավելով շարժական սարքերով մարդկանց կյանքը:
• Կազմակերպչական ավելի արագ:
  Քաղաքական առումով ինտերֆեյսի արդիականացումն ավելի անվտանգ է, քան զրոյից սկսելը: Ավելի քիչ բանավեճ կլինի այն մասին, թե կանաչի ինչ երանգ ընտրել, ինչ չնչին ֆոնդային լուսանկարներ օգտագործել, և ղեկավարությունը ստիպված չի լինի ոլորել ձեռքերը: Սա թույլ է տալիս թիմերին ավելի արագ գործարկել պատասխանող կայքեր:

Թերություններ

• Ազդում է միայն մի փոքր մասի վրա։
  Կրկին, կան վերանորոգման շատ տարբերակներ, բայց դրանցից շատերի նպատակը «այն գեղեցիկ դարձնելն է»: Կենտրոնանալով դասավորության վերանախագծման վրա՝ վերադիզայնները հաճախ բաց են թողնում բազմաթիվ այլ գործոններ, որոնք պետք է հաշվի առնել տարբեր սարքերի համար հաջող դիզայն ստեղծելիս:
• 10 լիտր ջուր երեք լիտր տարայի մեջ։
  Քանի որ աշխատասեղանի կայքերը նախատեսված են միայն սեղանադիր համակարգիչների համար (և հաճախ երկար են աշխատում), դրանք կարող են շատ խառնաշփոթ պարունակել: Եվ քանի որ արդիականացումը հիմնականում բաղկացած է դասավորության վերահալումից, բովանդակության հետ կապված խնդիրների մեծ մասը լիովին հաշվի չի առնվում:
• Կատարում.
  Տարօրինակ բան կա փոքր սարքերին ավելի լավ աջակցելու համար կոդ գրելու մեջ: Ավելորդ իրերը հեռացնելը կարող է շատ հեռուն գնալ, բայց առանց արտադրողականության վրա կենտրոնանալու՝ այն ինքնուրույն չի աճի:
• Ամենավատ աջակցությունը.
  Մեդիա հարցումները, որոնք ի սկզբանե նախատեսված էին սեղանադիր համակարգիչների համար, վատ են աջակցվում շարժական սարքերի մեծ մասում:
• Ժամանակավոր շտկումներ.
  Մեռնելու ցանկություն ունեմ, երբ լսում եմ, որ մարդիկ ինձ խնդրում են ինչ-որ բան «պատասխանատու դարձնել», ասես դա ուղղակի վանդակ լինի ծրագրի պլանում (ինչը երբեմն իրականում այդպես է): Սահմանափակ մտածողության այս տեսակը բաց է թողնում իրական հնարավորությունները, որոնք առաջարկում է արձագանքող դիզայնը:

Պատասխանատու բջջային կայքեր

Բջջային ռեսպոնսիվ կայքերը, կամ ինչպես ես դրանք անվանում եմ «պատասխանատու ապագայի սերմեր», «m.yourdomain.ru» ձևաչափով առանձին կայք ստեղծելու պրակտիկա է՝ օգտագործելով ռեսպոնսիվ դիզայնի տեխնիկան: Կայքերը, ինչպիսիք են BBC-ն, The Guardian-ը և Entertainment Weekly-ն (որոնց վրա ես աշխատել եմ), օգտագործում են այս ռազմավարությունը:

Բջջային տարբերակը ձեզ հնարավորություն է տալիս տնկել սերմ, որը կաճի ձեր ժառանգած կայքից:

Ժամանակի ընթացքում հնացած կայքը կարող է հեռացվել, և կայքը կվերածվի՝ դառնալով առաջինը բջջային, պատասխանատու և հաշվի առնելով ապագա միտումները:

Առավելությունները

• Ավելի ցածր ռիսկ:
  Կազմակերպությունների մեծ մասը շարժական սարքերից երթևեկությունը դեռևս փոքրամասնություն է համարում: Այսպիսով, շարժական պատասխանատու վեբկայքի գործարկումը թույլ է տալիս այս կազմակերպություններին փորձարկել ջրերը՝ առանց նախևառաջ թեմայի գլխին անցնելու:
• Ճկուն լինել սովորելու հնարավորություն։
  Դիզայներները կարող են սովորել ավելի ճկուն մտածել: Մշակողները կսովորեն Android սարքերի անհամար հնարքները: Կառավարիչները կարող են պարզել, թե ինչպես հեռանալ պիքսելային կատարելությունից: Պատասխանատու բջջային կայքը կարող է հիանալի ավազատուփ լինել սովորելու համար:
• Ենթակառուցվածք.
  Թիմերը կարող են մեկընդմիշտ սովորել, թե ինչպես լուծել բովանդակության կառավարման խնդիրները, ինչպիսիք են պատկերի ստեղծումը
• Հեռացրեք ավելցուկը:
  Այս մոտեցումը հիանալի հնարավորություն է ընձեռում թիմերին հարցնելու իրենց՝ «արդյո՞ք մեզ դա իսկապես պե՞տք է»՝ միաժամանակ կենտրոնանալով կատարողականի վրա: Ինչո՞ւ։ Քանի որ նրանց հիմնական ուշադրությունը շարժական սարքերում իրենց կայքի օգտատերերի փորձի բարելավումն է:
• Ապագան առաջին հերթին բջջային կայքերն են:
  Թեև ի սկզբանե բացակայում է բովանդակությունից կամ ֆունկցիոնալությունից, բավականաչափ ժամանակ և ջանք ունենալով այս շարժական կայքերը կարող են ի վերջո փոխարինել իրենց ամբողջ էջերի նախնիներին:

Թերություններ

• Այն դեռ շարժական կայք է:
  Արձագանքող է, թե ոչ, այս մոտեցումը դեռ պահպանում է բջջային կայքերի մեծ թվով թերություններ՝ URL-ի վերահղման հետ կապված խնդիրներ, բովանդակության կառավարում, հետևողական բովանդակություն, հետևողականություն, SEO-ի օպտիմալացում և այլն:
• Ժամանակավոր շտկումներ.
  Բջջային շատ կայքեր ստեղծվում են որպես Band-Aid՝ արյունահոսությունը դադարեցնելու համար: Նման կայքերը ստեղծվում են բջջային սարքերից եկող աճող թրաֆիկը բեռնաթափելու նպատակով։ Այս լուծումները կարող են դեռ բավարարել առկա կարիքները, բայց հաշվի առնելով ապագա միտումները, դժվար թե դրանք երկարաժամկետ հեռանկարում ձեզ փրկեն:
• Որթատունկի վրա թառամելու հավանականությունը:
  Որոշ կազմակերպություններ կարող են սկսել նման նախագծեր, անցնել ճանապարհի կեսին, իսկ հետո թողնել ամբողջ գործը, մինչև հաջորդ տարվա բյուջեն հաստատվի։
• Դիզայն փոքր էկրանների համար։
  Քանի որ սկզբնական ուշադրությունը փոքր էկրանների վրա է, հետագայում ինտերֆեյսի տեղափոխումն ավելի մեծ էկրանների վրա՝ առանց որակը կորցնելու, կարող է մարտահրավեր լինել:

Բջջային սարքերի համար պատասխանատու դիզայն բնիկ

Ուղարկել ձեր լավ աշխատանքը գիտելիքների բազայում պարզ է: Օգտագործեք ստորև ներկայացված ձևը

Ուսանողները, ասպիրանտները, երիտասարդ գիտնականները, ովքեր օգտագործում են գիտելիքների բազան իրենց ուսումնառության և աշխատանքի մեջ, շատ շնորհակալ կլինեն ձեզ:

Տեղադրվել է http://allbest.ru

1. Հարմարվողական արդիականացում

2. Պատասխանատու բջջային կայքեր

3. Պատասխանատու դիզայն բնիկ շարժական սարքերի համար

4. Փուլային ռազմավարություն

1. Հարմարվողական արդիականացում

Responsive redesign-ը գոյություն ունեցող միայն աշխատասեղանի համար նախատեսված վեբկայքը վերցնելու և այն ըստ էության պատասխանատու դարձնելու գործընթացն է:

Այս պահին 100,000 ամենաշատ այցելվող կայքերից մոտ 11-12%-ը ռեսպոնսիվ է, և կասկած չկա, որ առաջիկա մի քանի տարիներին այդ թիվը կավելանա։ Քանի որ ավելի շատ կազմակերպություններ իրենց թեւերը թեւակոխում են՝ ընդունելու բազմաթիվ սարքերի ցանցի իրողությունները, արժե հաշվի առնել նիրվանային հասնելու համար օգտագործվող մի քանի ռազմավարություններ.

Երբ խոսքը վերաբերում է պատրաստի կայքերին (մասնավորապես՝ առևտրային), թիմերը միշտ չէ, որ հնարավորություն ունեն հրաժարվել ամեն ինչից և նորից կառուցել։ Կազմակերպությունների մեծ մասի համար զրոյից նոր դիզայնի լայնածավալ ստեղծումը նույնիսկ չի դիտարկվում: Ահա թե ինչու արձագանքող արդիականացումը հայտնի մոտեցում է շարժական սարքերի համար լավ փորձ ստեղծելու համար:

Առավելությունները:

· Համեմատաբար արագ: Քանի որ այն չի պահանջում վերակառուցել ամեն ինչ զրոյից:

· Ծանոթ. Չի շփոթեցնում օգտվողներին: Մարդիկ տարիներ են ծախսել՝ ընտելանալով ինտերֆեյսին, և արդիականացնելով գոյություն ունեցողը, կազմակերպությունները պահպանում են ծանոթ մոտեցումը՝ միաժամանակ բարելավելով շարժական սարքերով մարդկանց կյանքը:

· Կազմակերպչական ավելի արագ: Ինտերֆեյսի թարմացումն ավելի անվտանգ և հեշտ է, քան զրոյից սկսելը:

Թերություններ:

· Ազդում է միայն մի փոքր մասի վրա: 10 լիտր ջուր երեք լիտր տարայի մեջ։ Շատ բովանդակություն

· Արտադրողականություն.

· Ամենավատ աջակցությունը: Մեդիա հարցումները, որոնք ի սկզբանե նախատեսված էին սեղանադիր համակարգիչների համար, վատ են աջակցվում շարժական սարքերի մեծ մասում:

2. Պատասխանատու բջջային կայքեր

Բջջային ռեսպոնսիվ կայքերը «m.yourdomain.ru» ձևաչափով առանձին կայք ստեղծելու պրակտիկա են՝ օգտագործելով ռեսպոնսիվ դիզայնի տեխնիկան:

Բջջային տարբերակը ձեզ հնարավորություն է տալիս տնկել սերմ, որը կաճի ձեր ժառանգած կայքից: Ժամանակի ընթացքում հնացած կայքը կարող է հեռացվել, և կայքը կվերածվի՝ դառնալով առաջինը բջջային, պատասխանատու և հաշվի առնելով ապագա միտումները:

Առավելությունները:

· Ավելի ցածր ռիսկ: Բջջային սարքերից երթևեկությունը փոքրամասնություն է:

· Պատասխանատու շարժական կայքը կարող է հիանալի ավազատուփ լինել սովորելու համար:

· Հեռացրեք ավելորդ բաները. Այս մոտեցումը հիանալի հնարավորություն է ընձեռում թիմերին հարցնելու իրենց՝ «արդյո՞ք մեզ դա իսկապես պե՞տք է»՝ միաժամանակ կենտրոնանալով կատարողականի վրա:

· Ապագան առաջին հերթին բջջային կայքերն են: Թեև ի սկզբանե բացակայում է բովանդակությունից կամ ֆունկցիոնալությունից, բավականաչափ ժամանակ և ջանք ունենալով այս շարժական կայքերը կարող են ի վերջո փոխարինել իրենց ամբողջ էջերի նախնիներին:

Թերություններ:

· Սա դեռ բջջային կայք է: Արձագանքող է, թե ոչ, այս մոտեցումը դեռ պահպանում է բջջային կայքերի մեծ թվով թերություններ՝ URL-ի վերահղման հետ կապված խնդիրներ, բովանդակության կառավարում, հետևողական բովանդակություն, հետևողականություն, SEO-ի օպտիմալացում և այլն:

· Ժամանակավոր ուղղումներ: Բազմաթիվ բջջային կայքեր ստեղծվում են որպես բանդա՝ արյունահոսությունը դադարեցնելու համար: Նման կայքերը ստեղծվում են բջջային սարքերից եկող աճող թրաֆիկը բեռնաթափելու նպատակով։ Այս լուծումները կարող են դեռ բավարարել առկա կարիքները, բայց հաշվի առնելով ապագա միտումները, դժվար թե դրանք երկարաժամկետ հեռանկարում ձեզ փրկեն:

· Որթատունկի վրա թառամելու հնարավորություն:

· Դիզայն փոքր էկրանների համար: Քանի որ սկզբնական ուշադրությունը փոքր էկրանների վրա է, հետագայում ինտերֆեյսի տեղափոխումն ավելի մեծ էկրանների վրա՝ առանց որակը կորցնելու, կարող է մարտահրավեր լինել:

3. Պատասխանատու դիզայն բնիկ շարժական սարքերի համար

սմարթֆոնի ինտերֆեյսի դիզայն

«Առաջինը բջջայինը» սկզբունք է, որը ներառում է ինտերֆեյսի նախագծում, որը հաշվի է առնում շարժական միջավայրի սահմանափակումները (փոքր էկրան, ցածր թողունակություն և այլն), բայց լիովին օգտվում է մեծ էկրաններից:

Առավելությունները:

· Սկսեք նոր ուժով: Բջջային առաջինը` նոր սկիզբ:

· Լավագույն աջակցություն: Աջակցություն ավելի շատ շարժական սարքերի, հատկապես ավելի հին սարքերի, որոնք չեն աջակցում լրատվամիջոցների հարցումներին:

· Արտադրողականություն. Թեև կայքի կատարումը հիմնականում դրա իրականացման գործառույթն է, բջջային արձագանքող դիզայնը թիմերին հնարավորություն է տալիս հենց սկզբից կենտրոնանալ կատարողականի վրա:

· Հաշվի առնելով ամեն ինչ և միանգամից. Շարժական առաջին դիզայնը (չնայած իր անվանը) կարող է տեղավորել լուծումների լայն շրջանակ, այլ ոչ թե ուղղակի թիրախավորել մեկ դասի սարք:

· Ապագայի պաշտպանված դիզայն:

Թերություններ:

· Շատ ժամանակ հատկացրեք

Տեղաշարժ գիտակցության մեջ

· Կազմակերպչական առումով դժվար

· Անծանոթ

4. Փուլային ռազմավարություն

Քայլ առ քայլ արձագանքող նախագծման ռազմավարությունը լայնածավալ քարոզարշավը բաժանում է բազմաթիվ քայլերի: Ինչպես արդիականացման դեպքում (այս ռազմավարությունները միմյանց բացառող չեն), հնարավոր է, որ հնարավոր չլինի լայնածավալ վերանախագծում կատարել, ինչի պատճառով որոշ կազմակերպություններ դա անում են քայլ առ քայլ: Հարմարվողական ինտերֆեյսի քայլ առ քայլ ստեղծման մի քանի տեսակներ կան՝ Էջ առ էջ:

Առավելությունները:

· Նկատելի

· Ճկուն լինել սովորելու հնարավորություն: Դուք կարող եք ամեն ինչ սովորել արձագանքող միջերեսներ ստեղծելու մասին, այնուհետև օգտագործել այս գիտելիքները կայքի մնացած մասի համար:

· Գործարկման ավելի մեծ հնարավորություններ

Թերություններ:

Անարատության բացակայություն

Որթատունկի վրա թառամելու հնարավորություն

Տեղադրված է Allbest.ru-ում

Նմանատիպ փաստաթղթեր

Օգտագործողի միջերեսների մշակման սկզբունքներ և մեթոդներ, դրանց ձևավորման կանոններ: Microsoft Expression Blend-ում օգտատերերի միջերեսների նախատիպերի դասական եղանակներ: Աշխատեք տեքստի և գրաֆիկայի հետ Expression Blend-ում:

դասընթացի աշխատանք, ավելացվել է 19.03.2012թ


Համացանցի ստեղծման պատմությունը և դրա հիմնական սկզբունքները՝ արձանագրություններ, ծառայություններ, ծառայություններ։ Ինտերնետային կախվածություն, տրոլինգ, կիբերփանկ և գրաքննություն հասկացությունների սահմանում: Կայքերի դասակարգում և դասավորություն, դրանց դիզայնի մշակում. Mozilla Firefox և Opera բրաուզերներ:

վերացական, ավելացվել է 10.11.2011թ


Վեբ կայքերի ստեղծման և նախագծման մեթոդների և գործիքների վերանայում: Ծրագրավորման լեզուներ՝ վեբ կայքեր ստեղծելու համար: CMS բովանդակության կառավարման համակարգերի առավելությունների և թերությունների վերլուծություն: Կայքի դիզայնի և դասավորության մշակում։ Արտադրանքի զարգացման ծախսերի հաշվարկ:

թեզ, ավելացվել է 06/02/2016 թ


Ծրագրերի օպտիմալացման ժամանակակից համակարգերի գրաֆիկական ինտերֆեյսների վերլուծություն: SBkZ_PP կառավարման համակարգի մաթեմատիկական մոդելի և ալգորիթմի, դրա ճարտարապետա-կոնտեքստային դիագրամի ստեղծում։ Ծրագրաշարի տեխնիկական փաստաթղթեր:

թեզ, ավելացվել է 18.04.2012թ


Համալսարանական կայքերի, այդ թվում՝ CMS-ի հիման վրա ստեղծված տեխնոլոգիաների, բովանդակության և ձևավորման վերանայում և վերլուծություն: PRIPIT կայքի բովանդակության և դրա պոտենցիալ այցելուների տարբեր խմբերի տեղեկատվական կարիքների ուսումնասիրություն: Կայքերի դիզայնի մշակում.

թեզ, ավելացվել է 03/11/2010 թ


Էկրանի գրաֆիկական բաղադրիչներ, համակարգի օբյեկտներ և գործառույթներ: Սարքի հետ օգտագործողի փոխազդեցության միջոցների համակարգ: Անհատական ​​համակարգիչների գրաֆիկական ինտերֆեյսների պատմություն, դրանց դասակարգում։ X պատուհանային համակարգ.

շնորհանդես, ավելացվել է 22.05.2012թ


Առևտրային ձեռնարկության համար կայք ստեղծելու համար ինտերնետային էջի կառուցման և նախագծման մեթոդների ընտրություն: Վեբ դիզայնի տարրերի հետ աշխատելու առանձնահատկությունները՝ տառատեսակ, վերնագրեր, գրաֆիկա։ Ինտերնետ կայքերի ստեղծման և օգտագործման իրավական կարգավորումը.

թեզ, ավելացվել է 11/11/2010 թ


Համակարգչային հիերարխիկ համակարգերի տեղեկատվական փոխազդեցության միջերեսների բնութագրերը: «Հետադարձ կապի» սկզբունքը. Սարքավորում-ծրագրային ինտերֆեյս ստեղծելու հատկություններ, պարզություն և կանոններ։ Համակարգչային համակարգերի նախագծման նոր ուղղություններ.

դասընթացի աշխատանք, ավելացվել է 01/05/2017 թ


Խորհրդատվական բիզնեսի լրատվամիջոցների վերլուծություն. ծրագրավորման լեզուների և ծրագրային ապահովման վերանայում կայքերի, տեղեկատվական համակարգերի և խորհրդատվական ընկերությունների կայքերի ստեղծման համար: Բիզնես գործընթացների մոդելավորում. Ինտերնետում ներկայության զարգացում:

թեզ, ավելացվել է 04/11/2012 թ


Ինտերնետ ծառայության մշակում` հոսթինգ ընկերության համակարգային ծառայությունների համար տեսողական ինտերֆեյս ստեղծելու համար: Ինտերֆեյսի և զարգացման ուղղությունների գնահատման չափանիշներ: GlideOS աշխատասեղան: Ծառայությունների ճարտարապետության, ծրագրավորման լեզվի և հաղորդակցման մեթոդների ընտրություն:

Հարմարվողական դասավորությունը փոխում է էջի դիզայնը՝ կախված օգտագործողի վարքագծից, հարթակից, էկրանի չափից և սարքի կողմնորոշումից և ժամանակակից վեբ զարգացման անբաժանելի մասն է: Այն թույլ է տալիս զգալիորեն խնայել և ստիպված չլինել յուրաքանչյուր որոշման համար նոր դիզայն նկարել, այլ փոխել առանձին տարրերի չափն ու գտնվելու վայրը:

Այս հոդվածում կքննարկվեն կայքի հիմնական տարրերը և ինչպես դրանք հարմարեցնել:

Էկրանի լուծաչափի կարգավորում

Սկզբունքորեն, դուք կարող եք սարքերը բաժանել տարբեր կատեգորիաների և նախագծել դրանցից յուրաքանչյուրի համար առանձին, բայց դա չափազանց շատ ժամանակ կպահանջի, և ով գիտի, թե հինգ տարի հետո ինչ ստանդարտներ կլինեն: Ավելին, ըստ վիճակագրության, մենք ունենք տարբեր բանաձեւերի մի ամբողջ շարք.

Ակնհայտ է դառնում, որ մենք չենք կարողանա շարունակել նախագծել յուրաքանչյուր սարքի համար առանձին։ Բայց ի՞նչ անել այդ դեպքում:

Մասնակի լուծում. ամեն ինչ ճկուն դարձրեք

Իհարկե, սա կատարյալ մեթոդ չէ, բայց այն վերացնում է խնդիրների մեծ մասը։

Էթան Մարկոտը ստեղծել է մի պարզ ձևանմուշ, որը ցույց է տալիս արձագանքող դասավորության օգտագործումը.

Առաջին հայացքից կարող է թվալ, թե ամեն ինչ հեշտ է, բայց դա այդպես չէ։ Նայեք տարբերանշանին.

Եթե ​​կրճատեք ամբողջ պատկերը, մակագրությունները կդառնան անընթեռնելի: Ուստի լոգոն պահպանելու համար նկարը բաժանվում է երկու մասի՝ առաջին մասը (նկարազարդումը) օգտագործվում է որպես ֆոն, երկրորդը (լոգոն) չափը փոխում է համաչափ։

h1 տարրը պարունակում է պատկեր՝ որպես ֆոն, և պատկերը հավասարեցվում է կոնտեյների (վերնագրի) ֆոնին:

Ճկուն պատկերներ

Պատկերների հետ աշխատելը ամենակարևոր խնդիրներից մեկն է, երբ աշխատում եք ռեսպոնսիվ դիզայնով: Պատկերների չափը փոխելու բազմաթիվ եղանակներ կան, և դրանցից շատերը բավականին պարզ են իրականացնել: Լուծումներից մեկը CSS-ում առավելագույն լայնությունն օգտագործելն է.

Img (առավելագույն լայնությունը՝ 100%;)

Պատկերի առավելագույն լայնությունը էկրանի կամ դիտարկիչի պատուհանի լայնության 100%-ն է, ուստի որքան փոքր է լայնությունը, այնքան փոքր է պատկերը: Նկատի ունեցեք, որ առավելագույն լայնությունը չի ապահովվում IE-ում, ուստի օգտագործեք լայնությունը՝ 100%:

Ներկայացված մեթոդը հարմարվողական պատկերներ ստեղծելու լավ տարբերակ է, սակայն փոխելով միայն չափերը՝ նույնը կթողնենք պատկերի քաշը, ինչը կմեծացնի շարժական սարքերում բեռնման ժամանակը։

Մեկ այլ եղանակ՝ արձագանքող պատկերներ

Filament Group-ի կողմից ներդրված տեխնիկան ոչ միայն փոխում է պատկերների չափերը, այլև սեղմում է փոքր էկրանների վրա պատկերների լուծաչափը՝ բեռնումն արագացնելու համար:

Այս տեխնիկան պահանջում է Github-ում հասանելի մի քանի ֆայլ: Նախ վերցնում ենք JavaScript ֆայլը ( rwd-images.js), ֆայլ .htaccessԵվ rwd.gif(պատկերի ֆայլ): Այնուհետև մենք օգտագործում ենք որոշ HTML՝ մեծ և փոքր լուծումները փոխկապակցելու համար. սկզբում փոքրիկ պատկեր՝ նախածանցով .ր(ցույց տալու համար, որ պատկերը պետք է արձագանքող լինի), այնուհետև կապեք մեծ պատկերին՝ օգտագործելով data-fullsrc.

480 px-ից ավելի լայն ցանկացած էկրանի համար կբեռնվի ավելի բարձր լուծաչափով պատկեր ( largeRes.jpg), և փոքր էկրանների վրա այն կբեռնվի ( smallRes.jpg).

IPhone-ն ու iPod Touch-ն ունեն մի առանձնահատկություն. մեծ էկրանների համար ստեղծված դիզայնը պարզապես կփոքրանա ցածր լուծաչափով բրաուզերում՝ առանց ոլորելու կամ բջջային լրացուցիչ դասավորության: Այնուամենայնիվ, պատկերները և տեքստը տեսանելի չեն լինի.

Այս խնդիրը լուծելու համար օգտագործեք մետա թեգը՝

Եթե ​​սկզբնական մասշտաբը հավասար է մեկին, ապա պատկերների լայնությունը հավասարվում է էկրանի լայնությանը:

Էջի դասավորության կարգավորելի կառուցվածք

Էջի չափի զգալի փոփոխությունների համար կարող է անհրաժեշտ լինել փոխել տարրերի ընդհանուր դասավորությունը: Սա կարելի է հարմար կերպով անել առանձին ոճերի ֆայլի միջոցով կամ, ավելի արդյունավետ, CSS մեդիա հարցման միջոցով: Խնդիրներ չպետք է լինեն, քանի որ ոճերի մեծ մասը կմնա նույնը, և միայն մի քանիսը կփոխվեն:

Օրինակ, դուք ունեք հիմնական ոճի ֆայլ, որը նշում է #wrapper, #content, #sidebar, #nav գույների, ֆոնի և տառատեսակների հետ միասին: Եթե ​​ձեր վարպետ ոճերը ձեր դասավորությունը դարձնում են չափազանց նեղ, կարճ, լայն կամ բարձր, դուք կարող եք բացահայտել դա և ներառել նոր ոճեր:

style.css (հիմնական):

/* Հիմնական ոճերը, որոնք կժառանգվեն երեխայի ոճի թերթիկի կողմից */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Կառուցվածքային տարրեր */ #wrapper( լայնությունը՝ 80%; լուսանցք՝ 0 ավտոմատ; ֆոն՝ #fff; լիցք՝ 20px; ) #content( լայնությունը՝ 54%, float՝ ձախ; լուսանցք-աջ՝ 3%; ) # sidebar-left( լայնությունը՝ 20%; float՝ ձախ; լուսանցք-աջ՝ 3%; ) #sidebar-right (լայնությունը՝ 20%; float՝ ձախ; )

mobile.css (երեխա):

#wrapper( լայնությունը՝ 90%; ) #content( լայնությունը՝ 100%; ) #կողային տող-ձախ (լայնությունը՝ 100%; պարզ՝ երկուսն էլ; /* Լրացուցիչ ոճեր նոր դիզայնի համար */ եզրագծեր՝ 1px կոշտ #ccc ; margin-top՝ 20px; ) #sidebar-right (լայնությունը՝ 100%, պարզ՝ երկուսն էլ; /* Լրացուցիչ ոճավորում մեր նոր դասավորության համար */ եզրագծում՝ 1px կոշտ #ccc; margin-top՝ 20px; )

Լայն էկրանի վրա ձախ և աջ կողագոտերը լավ տեղավորվում են կողքի վրա: Ավելի նեղ էկրանների վրա այս բլոկները գտնվում են մեկը մյուսի տակ՝ ավելի մեծ հարմարության համար:

CSS3 լրատվամիջոցների հարցումներ

Եկեք նայենք, թե ինչպես կարող եք օգտագործել CSS3 մեդիա հարցումները՝ պատասխանատու ձևավորումներ ստեղծելու համար: min-width-ը սահմանում է դիտարկիչի պատուհանի կամ էկրանի նվազագույն լայնությունը, որի վրա կկիրառվեն որոշակի ոճեր: Եթե ​​որևէ արժեք ցածր է min-width-ից, ոճերը կանտեսվեն: max-width-ը հակառակն է անում:

@media էկրան և (min-լայնություն՝ 600px) (.hereIsMyClass (լայնությունը՝ 30%; float՝ աջ; ))

Մեդիա հարցումը կաշխատի միայն այն դեպքում, երբ min-լայնությունը մեծ է կամ հավասար է 600 px-ի:

@media էկրան և (առավելագույն լայնությունը՝ 600px) ( .aClassforSmallScreens (մաքուր՝ երկուսն էլ; տառատեսակի չափը՝ 1.3em; ))

Այս դեպքում դասը ( aClassforSmallscreens) կաշխատի, երբ էկրանի լայնությունը փոքր է կամ հավասար է 600 px-ի:

Թեև նվազագույն լայնությունը և առավելագույն լայնությունը կարող են կիրառվել ինչպես էկրանի լայնության, այնպես էլ դիտարկիչի պատուհանի լայնության վրա, մեզ կարող է անհրաժեշտ լինել աշխատել միայն սարքի լայնության հետ: Օրինակ՝ փոքր պատուհանում բացված բրաուզերներին անտեսելու համար։ Դուք կարող եք օգտագործել min-device-width և max-device-width դրա համար.

@media էկրան և (առավելագույն սարքի լայնությունը՝ 480px) ( .classForiPhoneDisplay ( տառաչափը՝ 1.2em; ) ) @media էկրան և (minimumiPadWidth՝ 768px) ( .minimumiPadWidth ( պարզ՝ երկուսն էլ; ներքևի լուսանցք 2px կոշտ #cccc; ))

Հատկապես iPad-ի համար լրատվամիջոցների հարցումները հատկություն ունեն կողմնորոշում, որոնց արժեքները կարող են լինել կամ լանդշաֆտ(հորիզոնական), կամ դիմանկար(ուղղահայաց):

@media էկրան և (կողմնորոշում՝ լանդշաֆտ) ( .iPadLandscape (լայնությունը՝ 30%; լողացող՝ աջ; ) ) @media էկրան և (կողմնորոշում՝ դիմանկար) ( .iPadPortrait ( պարզ՝ երկուսն էլ; ) )

Կարող եք նաև համատեղել լրատվամիջոցների հարցման արժեքները.

@media էկրան և (min-լայնությունը՝ 800px) և (առավելագույն լայնությունը՝ 1200px) ( .classForaMediumScreen (ֆոն՝ #cc0000; լայնությունը՝ 30%, float՝ աջ; ))

Այս կոդը կկատարվի միայն 800-ից 1200 px լայնությամբ էկրանների կամ դիտարկիչի պատուհանների համար:

Դուք կարող եք բեռնել որոշակի թերթիկ ոճերով տարբեր լրատվամիջոցների հարցումների արժեքների համար, ինչպիսիք են.

JavaScript

Եթե ​​ձեր զննարկիչը չի աջակցում CSS3 մեդիա հարցումներին, ապա ոճի փոխարինումը կարող է կատարվել jQuery-ի միջոցով.

$(document).ready(function())($(window).bind("չափափոխել", resizeWindow); ֆունկցիա resizeWindow(e)( var newWindowWidth = $(window).width(); // Եթե լայնությունը 600 px-ից պակաս, շարժական ոճի թերթիկը օգտագործվում է, եթե (newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Եթե լայնությունը 600 px-ից մեծ է, աշխատասեղանի ոճի թերթիկը օգտագործվում է $("link").attr((href: "style.css")); ) ) ));

Ընտրովի բովանդակության ցուցադրում

Փոքր էկրանների վրա տարրերը փոքրացնելու և վերադասավորելու ունակությունը մեծ է: Բայց սա լավագույն տարբերակը չէ։ Բջջային սարքերը սովորաբար ներկայացնում են փոփոխությունների ավելի լայն շարք՝ պարզեցված նավարկություն, ավելի կենտրոնացված բովանդակություն, սյունակների փոխարեն ցուցակներ կամ տողեր:

Բարեբախտաբար, CSS-ը մեզ հնարավորություն է տալիս ցուցադրելու և թաքցնելու բովանդակությունը անհավանական հեշտությամբ:

Ցուցադրել՝ ոչ մի;

ցուցադրում. ոչ մեկը չի օգտագործվում այն ​​օբյեկտների համար, որոնք պետք է թաքցվեն:

Ահա մեր նշագրումը.

Ձախ կողագոտու բովանդակություն | Աջ կողագոտու բովանդակություն

Հիմնական բովանդակություն Ձախ կողագոտին Աջ կողագոտին

style.css (հիմնական):

#content( լայնությունը՝ 54%; float՝ ձախ; լուսանցք-աջ՝ 3%; ) #sidebar-left( լայնությունը՝ 20%; float: ձախ; լուսանցք-աջ՝ 3%; ) #sidebar-աջ( լայնությունը՝ 20 %; float՝ ձախ; ) .sidebar-nav(ցուցադրում՝ ոչ մեկը;)

mobile.css (պարզեցված):

#content( լայնությունը՝ 100%; ) #sidebar-left (ցուցադրում՝ ոչ մեկը; ) #sidebar-right (ցուցադրում՝ ոչ մեկը; ) .sidebar-nav (ցուցադրում՝ inline; )

Եթե ​​էկրանի չափը փոքրացվի, դուք կարող եք, օրինակ, օգտագործել սկրիպտ կամ ոճավորման այլընտրանքային ֆայլ՝ սպիտակ տարածությունը մեծացնելու կամ նավիգացիան ավելի մեծ հարմարության համար փոխարինելու համար: Այսպիսով, ունենալով տարրեր թաքցնելու և ցուցադրելու, նկարների, տարրերի չափերը փոխելու և շատ ավելին, կարող եք դիզայնը հարմարեցնել ցանկացած սարքի և էկրանի:

Ինչպես է Yandex-ն օգտագործում ձեր տվյալները և մեքենայական ուսուցումը ծառայություններն անհատականացնելու համար.