Обзор на основните технологии и инструменти за уеб дизайн

…

и т.н.
След като елементът е създаден в страницата, CSS се използва за да се опише как точно ще изглежда той: какъв шрифт ще използва, какъв цвят ще бъде текста, отстояния, рамки, размер и др. атрибути.
Фигура 3. HTML и CSS
2. Възникване на CSS
През 1999 г. Tim Berners-Lee създава Hypertext Markup Language (HTML), чрез който той публикува своите изследвания в Интернет с помощта на основни стилове, като подчертаване, удебеляване и наклон. В началото всичко, което той е искал е да изобрази текст и да свърже важно съдържание. Много скоро, обаче, става необходимо да се изобразяват диаграми, графики и изображения, с което се добавя и възможността за вграждане на изображения в страницата.
Първоначално HTML таговете се използват не само за структуриране на документа, но и за стилизиране – таг за удебеляване (…), таг за наклон
(…) и т.н. Това означава, че стиловете са били вградени в структурата, което прави промяна на дизайна много трудна. Много скоро става ясно, че обединението на структурата и стилизирането не е рационално. Hеkon Wium Lie и Bert Bos предлагат използване на технология наречена style sheets, която да позволява на дизайнерите да управляват как HTML таговете да бъдат стилизирани. Така се ражда
CSS.
3. JavaScript и CSS
JavaScript добавя интерактивност към уеб страницата чрез скриптове, които
„казват“ на браузъра какво да прави когато настъпи определено действие. CSS

НАУЧНИ ТРУДОВЕ НА РУСЕНСКИЯ УНИВЕРСИТЕТ - 2012, том 51, серия 6.1
- 68 - задава първоначалния изглед на страницата, който след това JavaScript може да промени.
JavaScript се използва в DOM за управление на елементите на екрана
(създадени с HTML тагове) чрез промяна на CSS стойностите. Например, на заглавието (

…

) е зададен червен цвят: h1 { color: rgb(255,0,0);}.
Много уеб сайтове позволяват на потребителя да избира цветовата схема.
Един от начините за осъществяване на това е с използване на JavaScript за динамична промяна на свойството за цвят: object.style.color=rgb(153,51,41);
В този код променливата object се отнася за обекта, на който искаме да променим стила. Пълния JavaScript код за намиране на обекта изглежда по следния начин: object=document.getElementByTagName('h1');
Този код „казва“ на JavaScript да намери таговете за заглавие от първо ниво в документа за да се промени техния стил.
Фигура 4. CSS и JavaScript
4. JavaScript – основни възможности
Накратко ще бъдат разгледани възможностите на JavaScript, както и някои полезни допълнителни инструменти:
Dynamic HTML или DHTML се свързва с JavaScript и се използва за управление на HTML и CSS след като страницата е заредена. Това може да включва промяна на стил, динамични елементи като менюта и изскачащи прозорци, специални ефекти като избледняване, слайд ефекти и др.
Asynchronous JavaScript and XML, или Ajax използва JavaScript за предаване на информация между заредената уеб страница и уеб сървъра без презареждане на цялата страница. Това позволява на потребителя да взаимодейства с големи обеми информация без да се налага цялостно презареждане.
JavaScript Object Notation, JSON е бърз и лесен начин за JavaScript да предава данни. Той е по-лесен за използване и разбиране от други алтернативи като например XML.
MooTools, jQuery, и Dojo Toolkit са популярни JavaScript библиотеки, които осигуряват вградена функционалност, спестяваща голяма част от работата по създаване на контроли и ефекти като динамични менюта, календари, ефекти и анимации. Въпреки, че някои от чертите в трите библиотеки се припокриват, всяка от тях си има своите предимства и недостатъци. Друго полезно нещо свързано с тези библиотеки е, че те елиминират много от недостатъците на JavaScript, свързани с различните браузъри.
ИНСТРУМЕНТИ, ИЗПОЛЗВАНИ ОТ УЕБ ДИЗАЙНЕРИТЕ
Уеб дизайнерът трябва да избере най-добрите средства не само за визуализиране на своя дизайн, а също и за създаването му.

НАУЧНИ ТРУДОВЕ НА РУСЕНСКИЯ УНИВЕРСИТЕТ - 2012, том 51, серия 6.1
- 69 -
1. Уеб браузър
Уеб сайтът трябва да може да се визуализира правилно на всички най-често използвани браузъри. Когато се появи нова версия на даден браузър, старата версия продължава да съществува. Затова е необходимо тестване и на по-стари версии.
Едни от най-често използваните уеб браузъри са Internet Explorer на Microsoft,
Safari на Apple Inc, Mozilla Firefox, Google Chrome, Opera и др.
Браузърът Firefox е един от най-предпочитания избор за уеб дизайнерите.
Причината е че той предлага много полезни разширения, които могат да направят работата на уеб дизайнера значително по-ефективна и ползотворна. Има изобилие от Firefox разширения, които повишават основната функционалност на браузъра.
Например:
Web Developer
Web Developer има огромен набор от инструменти за уеб дизайнери. По подразбиране, той се показва като лента с инструменти в горната част на браузъра, съдържаща различни падащи менюта, като например CSS, Resize и Cookies.
Firebug
Firebug позволява разглеждане и редактиране на HTML, CSS, и JavaScript код на отворената страница; разпознаване на всеки елемент от страницата показвайки целия контекст и стиловете, които са приложени към тях; показване на уеб страницата докато се зарежда за да се види колко време отнема за зареждане всеки елемент от нея.
Colorzilla
Colorzilla позволява вземане на проби за цвят от всеки пиксел в уеб браузъра като показва стойността в HEX и RGB.
Palette Grabber
Palette Grabber взема всички стойности на цветовете от CSS-кода и ги преобразува в цветова палитра за използване в програма за редактиране на изображения (напр. Photoshop).
MeasureIt
MeasureIt се използва за измерване на предварително избрана област
(широчина и височина). Измерванията се показват в пиксели.
Pixel Perfect
Pixel Perfect е инструмент, който позволява добавянето на проследяващо изображение към редактираната страница. Проследяващото изображение е прозрачен макет на страница, който се използва с цел сравнение на позиционирането на елементите в страницата.
2.
Инструменти за редактиране на код
Инструментите за редактиране на код трябва да предоставят възможност за:
•
Организиране и редактиране на документи, осигурявайки подсказки и предложения;
•
Визуализиране на документите без да е нужно преминаване между различни браузъри;
•
Изтегляне и публикуване на документи докато се работи върху тях;
•
Анализиране и оптимизиране на кода.
Coda (Mac)
Coda включва интегриран FTP, което улеснява публикуване и изтегляне на документи. Съдържа и средства за редактиране на CSS-код и редактиране на CSS чрез графичен интерфейс.
TopStyle (Windows)
TopStyle съдържа същите възможности, но е предназначен за Windows.

НАУЧНИ ТРУДОВЕ НА РУСЕНСКИЯ УНИВЕРСИТЕТ - 2012, том 51, серия 6.1
- 70 -
CSSEdit (Mac)
Предназначен е за редактиране само на CSS-код (без HTML или JavaScript).
Съдържа инструменти за анализиране на CSS-код на съществуващ уеб сайт.
Dreamweaver(Windows и Mac)
Dreamweaver е разпространен избор сред дизайнерите. Предлага много и различни възможности.
3. Онлайн средства
ColorJack
ColorJack и Adobe Kuler са уеб базирани приложения, които спомагат за избор на най-добрата цветова комбинация на базата на теорията за цветовете.
Резултатите може да се съхраняват за използване от софтуер за редактиране на изображения като напр. Photoshop и Illustrator.
Typetester
Typetester дава възможност за визуализиране на различни фамилии шрифтове с различни размери, тегла и стилове.
SUMO Paint
SUMO Paint е безплатна програма за създаване и редактиране на битмап изображения с подобен на Photoshop интерфейс.
ЗАКЛЮЧЕНИЕ
Освен притежаване на креативни способности и вдъхновение работата на уеб дизайнерите изисква и използване на подходящи технологии и инструменти. В статията бяха разгледани основните технологии (HTML, CSS и JavaScript) и само малка част инструментите, които могат да бъдат полезни при разработката на уебсайтове.
ЛИТЕРАТУРА
[1] Hewitt, J. Разширения за Mozilla Firefox -Web Development, https://addons.mozilla.org/bg/firefox/extensions/, Септември 2012.
[2] W3schools WorkingGroup. CSS Tutorial, http://w3schools.com/, Септември 2012.
За контакти:
Гл. ас д-р Валентина Войноховска, Катедра Информатика и информационни технологии, Русенски университет “Ангел Кънчев”, тел.: 082 - 888 645, е-mail: valia@ami-uni.ru.acad.bg
Ас. Светлозар Стефанов Цанков, Катедра Информатика и информационни технологии, Русенски университет “Ангел Кънчев”, тел.: 082-888 645, е-mail: stzancov@ami.uni-ruse.bg
Докладът е рецензиран.