Դաս 19: Պատկերներ

0

Այս դասի ընթացքում կիմանաք ավելին բարդ պատկերների մասին։ Պատկերի հիմունքները մենք ուսումնասիրել ենք 8-րդ դասում, այնպես որ կարող եք հանգիստ վերադառնալ և վերանայել դրանք մինչ կշարունակեք ընթերցել նոր դասը:

Պատկերներ և ադապտիվ դիզայն /responsive design/

Ներկայումս ծրագրավորողների մոտ շարունակվում է բանավեճը, թե որն է պատկերներ ցուցադրելու լավագույն միջոցը, երբ մարդիկ օգտագործում են տարբեր սարքեր։ Նկարը, որը հրաշալի է նայվում նոթբուքով, շատ մեծ է (կամ ունի չափազանց շատ փիքսել) հեռախոսի համար։ Բոլորն էլ համամիտ են և ցանկանում են, որ նկարները արագ բեռնվեն և պատշաճ տեսք ունեն յուրաքանչյուր սարքի համար։ Բայց ինչպե՞ս դա անել ․․․այն մի փոքր բարդ է։ Բոլորս ուզում ենք տալ պարզ պատասխան այս՝ ոչ այնքան պարզ տեխնիկական խնդրին։

Երկու հնարավոր ստանդարտները կարող են լինել <srcset> կամ <picture>: <srcset> տարրը թույլ կտա Ձեզ ձևակերպել տարբեր չափի նկարներ տարբեր սարքերի համար։ <picture> տարրը նույնպես ունի այդ ֆունկցիան, որը թույլ է տալիս սահմանել բազմաթիվ աղբյուրներ, կախված տեսակից, լայնությունը, ինչպես նաև օրիենտացիայից: <picture> տարրը հնարավոր է նաև օգտագործել <srcset>-ի ներսում։ Այն խուսափում է  բեռնել ցանկում գտնվող բոլոր պատկերները, նույնիսկ եթե դուք ցույց եք տալիս միայն մեկը: Եվ դա նրա հիմնական թերություն է: Ոչ ոք չի ցանկանում բեռնել 3x կամ ավելին, քան անհրաժեշտ է։ Բացի այդ, ներկայումս, ոչ մի բրաուզերներ չի աջակցում <picture> տարրը լիարժեք:

Սա բանավեճի պարզեցված ամփոփումն էր, որը դեռևս շարունակվում է։ Սակայն բավական է ասել, որ մենք սպասում ենք հնարավոր լավագույն լուծմանը, որը կլինի համաձայնեցված և կաջակցվի խոշոր բրաուզերների կողմից։

SVG և canvas

Վերադառնալով 9-րդ դասին՝ մենք համառոտ նշել ենք SVG-ն, որպես հնարավոր գրաֆիկայի աղբյուրի տեսակ։ SVG-ն կամ Scalable Vector Graphics-ը նշանակում է, որ գրաֆիկան չի կորցնում իր որակը, երբ դուք մեծացնում կամ փափոխում եք չափերը։ Փաստորեն, գրաֆիկան կառուցվել է մի լեզվով, որը կոչվում է XML, չնայած նրան որ այն անտեսանելի է մարդկանց մեծամասնությանը։ Դուք կարող եք ստեղծել SVG գրաֆիկա ցանկացած graphics editor-ով։

Բացի zooming և resizing-ից SVG ունի որոշ հիմնական առավելություններ է, մնացած գրաֆիկայի տեսակների համեմատ։ Քանի որ դրանք ստեղծել են XML լեզվով, ցանկացած տեքստ գրաֆիկայի ներսում կարելի է ինդեքսավորվել և գտնել որոնման գործիքով /search engine/։ Սա նպատակահարմար է, եթե դուք ուզում եք, որ Google-ը գտնի ձեր գրաֆիկական։ SVG-ն  նաև բաց ստանդարտ է, ինչը նշանակում է, որ մարդիկ կարող են կառուցել SVG իրենց գործիքներում բավականին հեշտ, և ոչ ոք չի պատրաստվում ստիպել Ձեզ ձեռք բերել հատուկ ծրագիր։

Դուք կարող է ստեղծել SVG գրաֆիկա text editor-ում, ճիշտ այնպես, ինչպես ստեղծում եք վեբ էջերը։

SVG-ն կլինի առավել կարևոր և տարածված գրաֆիկայի տեսակը։

 Simple SVG

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″>

        <circle cx=”100″ cy=”50″ r=”40″ stroke=”red” stroke-width=”2″ fill=”blue” />

 </svg>

Փորձեք ուղղակիորեն տեղադրել այս կոդը Ձեր վեբ էջում կարմիր շրջանակով կապույտ կլոր ստեղծելու համար:

1

Կարող եք նաև պարզապես հղել դեպի SVG գրաֆիկան, որը ստեղծել եք graphic editor-ով։

Link to SVG

 <embed src=”circle1.svg” type=”image/svg+xml” />

Այստեղ օգտագործել ենք <embed> տարրը, բայց կարող եք օգտագործել <object> տարրը կամ նույնիսկ <iframe>-ը (թեև այն մի քիչ ուղղանկյուն եզրագծեր ունի): Ընդհանրապես, օգտագործեք <embed> տարրը, քանի որ այն աջակցվում է բոլոր բրաուզերների կողմից և թույլ է տալիս scripting։

Canvas

<canvas> տարրը HTML5-ում նոր է։ Այն թույլ է տալիս, որ մարդիկ  նկարեն էջում: Փորձեք այն՝ ավելացնելով այս կոդը Ձեր էջում:

<canvas id=”drawing1″ width=”400″ height=”400″    style=”border:1px solid #000000;”> </canvas>

1

Հնարավոր է նկատեք, որ այսքանը դեռևս բավարար չէ նկարելու համար։ Անհրաժեշտ կլինի նաև Javascript-ի որոշ հմտություներ։ Սակայն դիտարկեք Canvas-ը որպես պատուհան, որի միջոցով դուք կկարողանաք նկարել … կամ պարզապես ցույց տալ դինամիկ գրաֆիկա օգտագործելով JavaScript:

SVG-ի և Canvas-ի միջև մարդկանց մեծ մասը ընտրում է SVG-ն: Canvas-ը իրականում Apple-ին բնորոշ տարր է, ինչը նշանակում է, որ այն բաց ստանդարտ չէ, ինչպես SVG-ն։

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.