Лекция 4. Gif форматындағы мөлдір бейнелер. Веб-парақтарға қойылатын сілтемелер. Бейне фрагментінің түрлері.

Жоспар:

-GIF форматындағы мөлдір бейнелер.

- Веб-парақтарға қойылатын сілтемелер.

- Бейне фрагментінің түрлері.

Қазіргі кезде Web-те барлық графиктер екі формада беріледі: GIF және JPEG. Бұларға таласатын үшінші графиктер түрі – PNG форматында беріледі жә­не броузерлерді қолдауға үлкен үлес қосады. Әрі қарай осы графикалық форматтар туралы айтылады. Бұлар туралы ақпараттар тарауларда мейлінше толықтау келтіріледі, яғни олардың форматтарына тоқталынады.

GIF. GIF – Grafic Interchange Format-ты Web файлдарында жиі қолданылатын форматы деп қарастырылады. Ол Web-броузерлерін қолдайтын бірінші форматтық файлдар, және де осы күнге дейін негізгі Web графикасының форматтарының бірі болып есептелінеді.

Оның қасиеттері:

- бояулар саны 256-дан артық (кем болуы жиі кездеседі) болмайды;

- бояулар палитрасын пайдаланады;

- LZW тәсілі бойынша ақпараттарды жоғалтпай сығуға болады (PKZIP архиваторында қолданылатынға ұқсас, және айта кететін жағдай GIF-файлдары әрі қарай сығылмайды);

- жоларалық жинақтауларды қолдайды;

- ағымдық формат болып есептелінеді, яғни картинкаларды көрсету, көшіру кезінде бастала береді;

- бір бояуға палитрада мөлдір түсті атрибут бекіте алады, яғни GIF деп аталатын мөлдір атрибуттар жасай алады;

- бір файлда бірнеше бейнелерді сақтау мүмкіндіктері болады, яғни өзіне анимирленген GIF-терді дайындауда қолданылады;

- басқару блоктары файлдарына енгізу мүмкіндіктері қолданылады және де түсінектемелерді файлдарға жазуға болады (мысалы, авторлық құқықтар), бейнелерді көрсетуде уақытша тоқтатуды ұйымдастырады.

Осы қасиеттер не үшін пайдаланатыны туралы қасқаша түсініктемелер беретін болса, жоғарыда айтқандай, GIF 256 бояудан артық пайдаланбайды, ал бұл сақтайтын барлық бейнелерде GIF-форматы осы шектеулерге жауап беру үшін айқын, немесе айқын емес бояулар санын азайтады деген сөз. Мұнда әртүрлі программалар жетістіктері әртүрлі. Бұдан шығатын қорытынды – егер әдемі суреттерді жайлап бірсарынды өткізіп қарайтын болсақ және әрең көрінетін бояулы болса, онда түрлендірулерден кейін бәрі бұрынғыдан да нашар болады, тіпті бар суреттер табиғи түрінен айырылады, нақты емес түрге енеді. Сондықтан, егер суреттерді GIF форматында сақтау керек болса және оның бояу түрлерін сақтау керек болса, онда қулыққа көшуге тура келеді. Мысалы, суреттерге қандай да бір художествалық фильтр қолдану керек және осы суретке айналдыру, немесе жарығын азайту керек. Бүл жағдайда суреттер мен сызбаларды сақтау мәселелері шешіледі және олар жақсы сығылады, көп бояуларды да керек етпейді.

JPEG. Web-тағы екінші кең көлемде пайдаланатын графикалық формат­тардың бірі JPEG – Joint Photographic Experts Group. Ол бояулар туралы 24-разрядтық ақпараттар береді. Бұл 16,77 млн бояулар GIF форматындағы 256 түтге қарсы жауап. JPEG-те жоғалтып сығу деп аталатын ұғым пайдаланады. Немесе сығу кезінде бейнелердегі кейбір ақпараттар алынып тасталынады, бірақ көптеген жағдайларда сапаның нашарлауына нұқсан келмейді және көбіне байқалмайды да.

Суреттер, немесе басқа да бейнелерде бірыңғай болатын бояуларды JPEG-форматында сақтау тиімді, себебі бейненің жоғары сапада болуына әсер етеді, файл көлемін азайтады. Бірақта JPEG-ті бірыңғай бояулары бар графикалық бейнелерді (ГрБ) пайдалануда жақсы шешім бола алмайды, себебі бұл формат бояуларды ұсақтау тенденциясына ие және соңғы файл осы бейнені сақтайтын GIF-файлына қарағанда үлкен болып шығады [6].

PNG. Web-те пайдалануға бақталас үшінші түрлі графикалық формат бар. Бұл формат PNG – Portable Network Graphic. Ол көптеген жетістіктеріне қарамай 1994 жылдан бастап көлеңкеде қалды. Тек жақыннан бастап қана броузерлер PNG-ні іштестірілген графика түрінде қолдана бастады, бірақ PNG web-те өте көп тараған формат болуға толық мүмкіндігі бар. Сондықтан да ол «үлкен үштікке» енуге толық құқықты. PNG 8-разрядты индекстелінген бояуларды, 16-разрядты, немесе 24-разрядты толық түрлі бейнелерді пайда­ланып ақпараттарды жоғалтпай сығу мүмкіндігіне ие. Бұл өте жоғары сапалы бейнелерді алуды қамтамасыз етеді және GIF файлдарынмен салыстырғанда аз көлемдегі файлдарды құрастырады. Мұнан басқа, PNG файлы кейбір тамаша функцияларға ие, мысалы, іштестірілген гамма коэффициенттерін басқару функциясы, және мөлдірлік деңгейін өзгерту (бұл суреттің келбетін алып тасталынатын жұмсақ көлеңкелер арасынан көру мүмкіндігі) функциялары.

Бейнелер файлдарының жұмыс режимдері және өлшемдері. Web бейнелері тек дисплей экрандарында болатығына байланысты, олардың жұмыс режимдерін дюйм пикселдерде (ppi – pixels per inch) өлшеу техникалық дұрыс шешім деп есептелінеді. Жұмыс режимдерін басқаша өлшеуге де болады – дюймдегі нүктелер саны (dpi – dots per inch) және де олар бейнелерді баспаға шығаруға арналған және баспаға шығару қондырғысының мүмкіндігіне тәуелді.

Бірақ графиктер өлшемдері дисплей жұмыс режимдеріне тәуелді, сондықтан дюймде өлшемдер Web-ортасы үшін қолдануға жарамсыз болады. Бірден бір маңызды өлшем бірлігі пиксел болып есептелінеді.

Тәжірибе жүзінде жұмыс режимдерін 72 ppi (бұл экранда берудің ең жақсы тәсілі) түрінде беру және де жалпы өлшемдерді пикселдерде беруге дұрыс көңіл бөлу керек. Web графиктерін жасау процесстерінде дюймдерді пайдалану дұрыс емес. Парақтардағы бейнелердің өлшемдерін басқа бейнелермен салыстырудың маңызы көп және броузер терезелерінің де өлшемдерін салыстыру керек.

Мысалы, көптеген пайдаланушылар бұрынғыдай 14-дюймдік дисплейде 640×480 пикселдік жұмыс режимдерін пайдаланады. Экран кеңістігін ГрБ-мен тұтас толтыру үшін ең жақсысы оның енін 600 пикселден (пикселдердің оң және сол жақ бөліктері терезелерге пайдала­натынын және айналдыру алаңдарын ескеру керек) артық қылмау. Қалған бастырмалардың өлшемдері және бейнелері парақтарда пикселдермен ені 600 пик­сел болатын банеpлерге сaлыстырмалы өлшенеді.

Файлдар өлшемдері. Танымалы web-тің бүгінгі жетістіктері, әлбетте, гра­фикаға байланысты, бірақ көптеген пайдаланушылар web графикасына бір жағынан сүйіспеншілікпен, екінші жағынан сенімсіздікпен қарайтынын дизайнер ретінде әрбір веб программашылар білуі тиіс. Графика web-парағын желіге беруге керекті уақытты көбейтетінін ұмытуға болмайды; көп көлемдегі графиктер жүктеуге кететін уақытты арттырады және пайдаланушының шыдамын тауысады, әсіресе, егер ол стандарт модемдік қосылыстарды пайдаланатын болса.

Мұндай жағдайларға байланысты web-дизайнер үшін бір ғана ең маңызды ереже бар: графикалық файлдың бейнелерінің өлшемі мүмкіндігінше аз болуы керек! Желілер арқылы берілетін бейнелер жасаушыларға оларды жүктеу уақытын ескеру жауаптылығына ерекше көңіл бөлу керек.

Сурет карта (англ. image map, кейде cенсорлы карта немесе графикалық карта) – HTML белгілеу тілінің графикалық объектісі, ол суретпен байланысты және суретті басу арқылы белгілі бір URL-ға сілтеме жасалатын арнайы аймақты білдіреді. Сурет картасы бірнеше сілтемені бір суретте сақтауға мүмкіндік береді.

Веб-бетке сурет картаны қосу үшін <map> тегін қолданып, “name” атрибутына бірыңғай идентификатор көрсетіледі. Оның ішіне жұпсыз <area> тегтері қолданылып, әрқайсысы қандай да бір басылатын аймақты білдіреді. Кейін <img> тегін картамен байланыстырып, картаның атын жазатын usemap артибуты қосылады. Атрибуттың мәні # белгіден басталуы керек. <img> тегінде суреттің өлшемі анық көрсетіледі.

<MAP> контейнері

name – сурет картасының идентификаторы. Идентификатор сондай құжаттар арасында бірыңғай болады.

<AREA> элементі

shape – басылатын аймақтың формасы. Төмендегі мәндерді қабылдайды: circle (шеңбер), rect (тік төртбұрыш), poly (бес бұрыш).

alt – аймақтың балама аймағы. Сілтемеге еске салушы мәтін ретінде қолданылады.

coords – басылатын аймақтың координаттары. “0,0” мәніне сәйкес келетін, сол жақ жоғарғы бұрыштан басталатын координаттар пиксельде өлшенеді. Алғашқы сан x осі бойынша, яғни ені бойынша координат болса, екіншісін y осі, ұзындық координаты болып есептеледі. Координат тізімі аймақ формасына байланысты:

Шеңбер үшін шеңбер орайы және радиусы беріледі:

<AREA coords=«x,y,r»>

Тік төртбұрыш үшін – жоғары сол жақтың және төмен оң жақтың координаттары беріледі:

<AREA coords=«x1,y1,x2,y2»>

Бесбұрыш үшін биіктік координаттары беріледі:

<AREA coords=«x1, y1, x2, y2,…, xN, yN»>

Бұл жағдайда аймақтың бірінші және соңғы нүктесі автоматты түрде тұйықталады.

href – аймақ үшін сілтеме адресін білдіреді. Жазу ережесі <а> тегіне жазған сияқты жүзеге асырылады.

Төменде сурет карта жасайтын код жазылып, ол суретпен байланыстырылады:

<html>

<body>

<img width=«500» height=«200» usemap=«#somemap» src=«upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png» > <map name=«somemap»>

<area shape=«rect» coords=«6, 7, 140, 196» href=«kk.wikipedia.org/Тіктөртбұрыш»>

<area shape=«circle» coords=«239, 98, 92» href=«kk.wikipedia.org/Шеңбер»> <area shape=«polygon» coords=«386,16, 344,56, 350,189, 385,132, 489,190, 496,74» href=«kk.wikipedia.org/Көпбұрыш»>

</map>

</body>

</html>

Нəтижесінде браузерде мынадай веб-бет пайда болады: