Տեքստային խմբագրիչ

Adobe Brackets խմբագրիչ Կարինե Միքայելյան

Պահեստային բառեր՝ Brackets, ծրագրի կոդ, Extension, Emmet, everyscrub, ExtensionManager, Color palette, LivePriview, Position:static, MoreInfo, sitebar, Navigate, Manager, cvich.docs, Cod folding, cubic-berier, Vertical Split, Horizontal Split:

Brackets —Բաց կոդով անվճար խմբագրիչ վեբ - ծրագրավորման  համար: Brackets-ը կառուցված է HTML, CSS և  JavaScrip ծրագրերի աշխատանքներին համապատասխան: Հենց այս տեխնոլոգիաներն են ընկած նրա աշխատանքի հիմքում, որպեսզի ապահովի նրանց համատեղ աշխատանքը ծրագրավորման հարթակում: Այն համագործակցում է Mac, Windows և Linux օպերացիոն համակարգերի հետ: Brackets-ը ստեղծված է և զարգանում է Adobe Sistems արտոնագրով` Mit License,  և աջակցվում է GitHub-ի կողմից: Այսօր Brackets-ը ունի շատ մեծ կիրառություն, որովհետև ունի ավելի շատ հնարավորություններ, քան մյուս խմբագրիչները: Brackets-ի առավելություններից մեկն այն է, որ pdf ֆայլերը հեշտությամբ կարելի է վերափոխել html և css կոդերի: Ունի նաև այլ շատ հնարավորություններ, որոնք օգնում են ավելի արագ և հեշտ գրել ծրագրի կոդ, մշակել այն և թողարկել: Առավելություններից մեկն այն է, որ մի ֆայլում փոփոխություններ կատարելիս կարելի է փոփոխել նաև մեկ այլ ֆայլ՝ առանց տեղափոխվելու այդ ֆայլը: Մեկ այլ առավելություն է այն, որ Photoshop ծրագրով հավաքած ծրագրային կոդը կարելի է ներկայացնել HTML և CSS կոդերով, այսինքն վերափոխել և շատ արագ: Այն ստեղծել են Adobe ընկերության ծրագրավորաղները,ովքեր ծրագրավորել են նաև Photoshop խմբագրիչը:  FTP (Git - FTP) Հասանելի է բոլորին, կարող են մասնակցություն ցուցաբերել նրա աշխատանքին և օգնության հնարավորություններին` առանց սահմանափակումների: Ծրագիրը կարող է գրվել տարբեր լեզուներով, տարբեր չափսերի տառերով, կարելի է ընտրել նաև ցուցադրվող կոդի գույնը: Ձախ կողմում երևում են ֆայլեր, որոնք հիմնականում պատկանում են տվյալ ծրագրային կոդին և յուրաքանչյուր պահի կարող ենք աշխատել նրանցից ցանկացածով: Աջ կողմում տեղակայված է կայծակի նմանվող գործիք, որն ակտիվացնելիս բացվում է մեր կատարած աշխատանքը բրաուզերում. պետք է հիշել, որ այն ակտիվանում է, եթե ունենք և ակտիվացրել ենք denver, apache կամ որևէ այլ միացուցիչ: Ծրագրային կոդի ցանկացած հատված ընտրելով և սեղմելով ctrl + i, բացվում է css ոճային կոդ, եթե կա, կամ ազատ տիրույթ, որտեղ կարելի է ոճային հավելում կատարել [4, էջ3-6]: Տարբերակների պատմությունը

• 2014 թվականի նոյեմբերի 4-ին Adobe ընկերությունը հայտարարեց Brackets-ի 1.0 թողարկման մասին: 

• 2015 թվականի հոկտեմբերի 15-ին թողարկվեց 1.5 տարբերակը , որը ավելացված էր նոր հնարավորություններով, ինչպես նաև կիրառվող գործիքների շարքով և JavaScript-հուշումներով:

Առանձնահատկությունները

Adobe Brackets խմբագրիչն ունի հնարավորությունների մեծ շարք, որն էլ թույլատրում է ծրագրավորողին՝ խնայել ժամանակը ծավալուն աշխատանքներ կատարելու համար: Այդ հնարավորությունները կարելի է ալտիվացնել իր աշխատանքային միջավայրի ընդլայնումների (Extensions) միջոցով: Նշենք դրանցից մի քանիսը.

1. Գրվածքը մեծ պլանով ցույց տալու համար համատեղ սեղմել ctrl և + ստեղները, իսկ փոքրացնելու համարէ ctrl և - :

2. Տառատեսակի ընտրության համար Extensions – Availabe - Thems ցուցադրում է գունային համադրությունների բոլոր տարբերակները:

3. Ընտրված ընդլայնումը` Extension, տեղադրել:

Օրինակ` Fonts- Font – Install:

Հետո կարելի է ընտրել նախընտրածը:

Գրվածքը զննարկիչում տեսնելու համար` live Preview:

Կարող ենք փոքրացնել Brackets-ի պատուհանը, կից բացել զննարկիչի էջը և տեսանելի կլինի ծրագրում կատարված փոփոխությունները:

Ձախ կողմում sitebar- ն է, որը կարող ենք բացել և փակել:

Համատեղ սեղմելով ctrl և I ստեղները, երևում են այն բոլոր css կանոնները, որոնք վերաբերվում են ծրագրային կոդի տվյալ հատվածին: Այստեղ հնարավորություն ունենք կատարել փոփոխություններ:

Չափսերի և հատկությունների դիտման համար ընդլայնում գործիքի միջոցով ընտրում ենք everyscrub և տեղակայում (install): Այնուհետև ցանկացած css ֆայլի վրա, ընտրելով որևէ արժեք, դիցուք 21px, նշում ենք այն և alt ստեղնը սեղմած մկնիկը տեղաշարժում ենք աջ կամ ձախ, փոփոխությունը կտեսնենք տեքստի համապատասխան հատվածում: Եթե որևէ տարբերակը կհամապատասխանի մեր տեքստին, ապա կպահպանենք ctrl+s սեղմումով: Այս եղանակը կիրառելի է այն բոլոր css կանոնների համար, որտեղ թվային նշումներ կան [1]:

Գրաֆիկական տարրերի համար կարող ենք ստանալ մեր ցանկացած անիմացիան: Օրինակ, դիցուք main.css կոդում ունենք հետևյալ գրառումը` animation: colorize 2s cubic-berier (0,0, .78, . 36)1;

Ընտրելով cubic-berier գրառումը, և ctrl և I համատեղ սեղմումով բացվում է գրաֆիկ, որն ունի նշիչներ: Տեղաշարժելով այդ նշիչները, կարող ենք ստանալ մեզ անհրաժեշտ անիմացիան:

Կարող ենք նաև տեղափոխվել ֆայլերի միջև` ctrl+shift+o համատեղ սեղմումով: Բացվում է որոնման պատուհան, որի մեջ կարող ենք գրել` other.css:

Կա նաև cvich.docs հրամանը, որի շնորհիվ կարող ենք ctrl +k սեղմումով տեսնել նշված գրառման բացատրությունը:

Cod folding գործիքը բոլոր տողերից առաջ դնում է բացվող ցուցակի նշան, որն ավելի գործածական է JavaScript-ի համար: Էջը փակել-բացելուց հետո այն չի փոփոխվում:

Աշխատանքային էջի ամենաներքևում՝ Line23, Colomn100-Selest ցույց է տրված սլաքի կոորդինատները, ֆայլում տողերի քանակը: Տողից տող տեղափոխվելու համար` ctrl+g: Ներքևի աջ կողմում կա ovr , միացնելուց հետո` ins, փոփոխվում է մուտքագրման նշանը: Հաջորդը HTML-ն է, եթե բրաուզերը չի ճանաչում ֆայլը, ապա սլաքի միջոցով կարելի է փոփոխել, այսինքն ընտրել համապատասխանը: Վերջինը՝ Tabsize:4, նշանակում է tab սեղմակը 4 նիշ տարածություն է պահում: Կոդ գրելու ժամանակ թույլ է տալիս համակարգված տեքստ ստանալ:

Ձախ սյունակի մենյուի Navigate-ից ներքև սլաք գործիքը հարմար է, եթե աշխատում ենք երկու ֆայլերի հետ համատեղ: Օրինակ, Vertical Split և օրինակ index.html-ը կգրվի ձախ հատվածում, main.css-ը` աջ հատված: Ձախ սյունակում նշվում է left և right: Նրանց պարունակությունը կարող ենք տեղափոխել՝ մկնիկի սեղմակը սեղմած:

Կա նաև Horizontal Split, որը վերև-ներքև է տեղադրում երկու ծրագրային կոդերը:

Ձախ կողմում կարող ենք ստեղծել folder, օրինակ, աջ կլիկ, New Folder և բոլոր, դիցուք css ֆայլերը տեղափոխել նրա մեջ: Աշխատանքային սեղանից ձախ սեղմակով բռնած կարող ենք թղթապանակները բերել ձախ կողմը, կբացվի այն բոլոր ֆայլերը, որոնք պատկանում են այդ պրոյեկտին: Եթե ցանկանում ենք հեռացնել, աջ սեղմակի միջոցով ջնջում ենք: Եթե տողադարձ է արվում ծրագի կոդում, պատասխանատու է view—word wrap հրամանը, որի կողքը նշվում է նշիչով: Նշիչը հեռացնելու դեպքում տողը երկարում է հորիզոնական ուղղությամբ: Պետք է հարմարեցվի օգտագործողին [1]:

Գույներ

Ընտրել ExtensionManager գործիքը, Installed գործիքով ընտրել brackets colorPolette գործիքը և install: Եթե ցանկանում ենք մեր պրոյեկտից որևէ գույն վերցնել, կարելի է ընտրել մեր էջում: Color palette իկոնան հայտնվում է աջ կողմում և նման է point-ի իկոնային:

Մեր պրոյեկտից վերցնենք quict.png: Գույն ընտրելու համար ընտրում ենք տվյալ գույնի հատվածը, ընտրում գործիքը, կոդը գրվում է վերևի համապատասխան տիրույթում: Այն հարմար է կիրառել css կոդում: Կա նաև css color Preview, որը նույնպես տեղակայելուց հետո աջ կողմում բերում է վանդակներ, որտեղ նշվում է, թե որ կոդում ինչ գույն է օգտագործվել: Կա նաև color ints գործիքը, որի օգնությամբ կարող ենք փոփոխել մեր նշած գույնը: Օրինակ, .test{

color:#

}

Վանդականիշը գրելով՝ գույների ցուցակ է հայտնվում, բոլոր այն գույները, որոնք օգտագործվել են այդ ֆայլում: Ընտրում ենք նրանցից մեկը:

ExtensionManager գործիքի օգնությամբ կարելի է փնտրել autopref և տեղակայել: Եթե CSS-ում հաճախ չենք նշել prefix-ները, որոնք բրաուզերի կողմից սպասարկողներ են, այսինքն մոռանում ենք նշել, այդ դեպքում նշում ենք տվյալ կոդը կամ ամբողջ հատվածը և Edit—autoprefix Selection և մոռացված բոլոր հատվածներում հայտնվում են հատկությունները և ctrl+s ու պահպանում ենք:

Երբեմն css ֆայլում ազատ տարածքները շատ են, որը հանգեցնում է արագ բեռնավորման խանգարման: Մեծ ֆայլերում ազատ տարածությունները վերացնելու համար կիրառվում է main fier հրամանը: Այն աշխատում է նաև javaScript-ի համար: Սեղմելով ctrl+m, ողջ css-ը կդառնա zip, սեղմված, իր ֆայլը կկոչվի main.min.css: Կա նաև հակառակը, նաև php, js, տեղադրելով , կարող ենք ֆայլը վերականգնել` Edit—Beutify: Նախկինը կարող ենք ջնջել կամ պահպանել:

Երբեմն անհրաժեշտ է լինում առանձնացնել ֆայլի հատվածը և աշխատել սելեքթորի հետ: Դիցուք, ունենք HTML էջ, և թեգերից մեկի համար պետք է նստեղծենք սելեքթոր: Յուրաքանչյուր սելեքթորն առանձին չգրելու համար հարմար է նշել տվյալ հատվածը, պահպան ենք փոխանակման բուֆերում` ctrl+s, css ֆայլում սեղմում ենք ctrl+v, ստեղծվում են սելեքթորներ, որոնք կային html-ում: Եթե ունենանք նաև class ատրիբուտը, ապա css-ում այն նույնպես նշվում է : Id-ն նմանապես նշվում է:

Հատկանշանական է, որ կլիկ ենք անում սելեքթորներից մեկի տարածքում, hiline-ը նշում է համապատասխան տարրերը տեքստի վրա` պարբերությունը, վերնագիրը…: Կա նաև չցուցադրելու տարբերակ: Դրա համար` view—LivePriview Highsphe կամ ստեղնաշարից` ctrl+ shift+c և անջատալ այն: Բայց օգտակար է նրա միացված լինելը:

♥

Կա ևս մեկ ատրիբուտ` html special Characters: Դիցուք ծրագրի կոդում ունենք մի հատված, որում ցանկանում ենք ավելացնել սիմվոլ, օրինակ, I love it տեքստի մեջ ունենանք love-ի սիմվոլը: Դրա համար նշում ենք բառը, աջ կլիկ, նշված ցուցակից ընտրել Special html Character: Ցուցադրված են հիմնական օգտագործվողները, բայց ներքևում Move ցուցակից կարող ենք ընտրել ավելին:

Նշելուց հետո գալիս է այդ պատկերի կոդը, օրինակ մեր ընտրած պատկերի կոդը &hearts, այսինքն, ցանկացած իկոնայի համար պարտադիր չէ Համացանցում տարբերակներ փնտրենք, հարմար է նաև այս եղանակը:

Emmet-ը աշխատում է html-ի և css-ի հետ: Տեղադրումը կատարվում է Extension Manager գործիքով: Աշխատելու համար ստեղծում ենք նոր ֆայլ, անվանում emmet.html: Մուտքագրելով html :5 և սեղմելով Tab սեղմակը, ավտոմատ ստեղծվում է ծրագրի բազային կոդը`

Document

[4]:

Սրանք այն հիմնական թեգերն են, որոնք կիրառվում են բոլոր ծրագրերում: Կարող ենք Document դարձնել Emmet: Եթե ցանկանում ենք ունենալ div, ապա body-ի մեջ գրում ենք div և սեղմում Tab սեղմակին:

Եթե ցանկանում ենք, որ div-ն ունենա class, ապա գրում ենք`div.my-class, կունենանք`

Եթե ցանկանում ենք մեկ քայլ ետ գնալ, սեղմում ենք ctrl+z: Իսկ եթե ցանկանում ենք, որ մեր թէգն ունենա 2class, ապա գրում ենք`div.my-class-class.test և սեղմում ենք Tab, արդյունքը կլինի`

Եթե ցանկանում ենք, որ div-ը ունենա id, այսինքն պետք է գրենք # և գտնվի ul թէգը, ապա կրճատ գրում ենք հետևյալ կոդը`

Div#testul, սեղմելով Tab, այն ձևավորվում է