Нtml страница



страница1/2
Дата06.09.2016
Размер451.9 Kb.
#8373
  1   2

НTML страница




СЪДЪРЖАНИЕ
1. Въведение в Интернет

1.1. Концепция на понятието Интернет.

Основни комуникационни протоколи

1.2. Основни услуги в Интернет

1.2.1. WWW

1.2.2. E-MAIL

1.3. Езици за програмиране в Интернет

1.3.1. HTML

1.3.2. CGI

1.3.3. Java

1.3.4. JavaScript

1.3.5. ActiveX

1.3.6. ASP

1.3.7. PHP

1.3.8. Perl

1.3.9. MySQL


2. Дизайн на web сайтове

2.1. Същност

2.1.1. Какво е потребителски дизайн

2.1.2. Полезност и ползваемост

2.2. Препоръки за ползваемост

2.2.1. Видимост

2.2.2. Натоварване на паметта

2.2.3. Обратна връзка

2.2.4. Достъпност

2.2.5. Ориентация и навигация

2.2.6. Грешки

2.2.7. Удовлетворение

2.2.8. Четливост

2.2.9. Език

2.2.10. Визуално оформление

2.3. Създаване на потребителски сайтове

2.3.1. Вземане предвид на потребителите от самото начало

2.3.2. Опознаване на потребителите

2.3.3. Анализиране на задачите и целите на потребителите

2.3.4. Тестване на ползваемостта

2.4. Цветовете в уеб дизайна

2.4.1. Цветово възприятие

2.4.2. Съчетание на цветовете

2.4.3. Текст и фон

2.4.4. Заключение

2.5. Дизайн на „търсачки”

2.5.1. Въведение

2.5.2. Работа със съдържанието

2.5.3. Splash страници

2.5.4. Дизайн на текст

2.5.5. Добро съдържание

2.5.6. Навигация на сайта

2.5.7. Flash

2.5.8. JavaScript

2.5.9. Frames

2.5.10. PDF

2.5.11. Употреба на CSS

2.5.12. Динамично създавано съдържание

2.5.13. МЕТА тагове

2.5.14. Слоеве

2.5.15. Комбинирано използване на техники
3. Описание на сайта на УХТ

3.1. Изисквания към сайта на УХТ

3.2. Избор на средства за разработка. Обосновка

3.3. Програмиране и оформяне на страниците

3.3.1. Хоризонтална навигация на сайта

3.3.2. Банер

3.3.3. Търсачка

3.3.4. Новини

3.3.5. Вертикална странична навигация

3.3.6. Статистика на сайта

3.3.7. Външен вид на сайта
4. Тестване на сайта и разултати

4.1. Тестване при различни разделителни способности

4.2. Тестване при различни браузъри
5. Използвана литература и материали в дипломната

работа
1. Въведение в Интернет
1.1. Концепция на понятието Интернет. Основни комуникационни протоколи
Интернет е най-бързо развиващата се компютърна мрежа в света. Тя включва в себе си милиони хоста включени в хиляди по-малки мрежи, разположени из целия свят. Затова специалистите дефинират Интернет като мрежа от мрежи. Началото на Интернет се поставя в САЩ през 1969 г. от мрежа обслужваща Министерството на отбраната на САЩ, наречена ARPANET. По-късно (през 1972 г.), тя е предоставена за свободно използване на обществеността. В този момент към нея са свързани 50 университетски научни лаборатории, имащи връзка с разработки във военната област. Ключов момент в развитието на Интернет е създаването на комуникационните протоколи TCP и IP.

Следващата стъпка в развитието на Интернет е разделянето на ARPANET на две мрежи – ARPANET и MILNET през 1983 г. Точно тогава се появява и понятието Интернет – тогава това понятие се е отнасяло за съвкупността от ARPANET и MILNET.

През 1990 г. ARPANET престава да съществува, но по това време Интернет вече обединява все повече мрежи от цял свят, като през 1997 г. По официални данни в Интернет са свързани над 20 милиона хоста.

Структурата на Интернет е базирана на технологията клиент – сървър. Това е ключово понятие за разбирането на функционирането на Световната мрежа. Принципа, на който действа тази технология е следния: клиента (това може да е браузър, FTP клиент или друга програма, в общия случай работеща на локалния компютър) се свързва към отдалечения компютър (наречен сървър), който доставя услугата заявена от клиента. Този принцип може да се обясни със следния пример: при щракване на хипервръзка, браузърът изпраща HTTP заявка към компютъра, който доставя тази интернет страница. В този случай бразърът се явява клиент, а отдалечения компютър – сървър. Важно е да се отбележи, че всеки сървър може да се яви като клиент на друг сървър. В горния пример сървъра, доставящ страницата се явява клиент на сървъра на базата данни, който доставя данните необходими на WEB сървъра.

Основната част от данни в Интернет се пренася благодарение на два основни протокола. Това са IP и TCP. IP (Internet Protocol) е прост протокол, но стой в основата на Интернет. Той има основно две задачи: да осигурява IP адресите на подателя и получателя. TCP (Transport Control Protocol) служи за разделянето на информацията на пакети и транспортирането им. С негова помощ пакетите се събират отново при получателя.

Освен тези много важни протоколи в Интернет има още множество протоколи. Всяка от допълнителните услуги работи със собствен протокол (който пък от своя страна работи с помощта на TCP/IP).


1.2. Основни услуги в Интернет
1.2.1. WWW (World Wide Web)

Това е най-популярната услуга в Интернет. Тя дотолкова се е разпростряла, че незапознатите с въпроса потребители асоциират целия Интернет, точно с тази услуга. Разпределената информационна система WWW дава достъп до документи по целия свят. Мултимедийната реализация ги прави много атрактивни за преглед и това е същността на популярността на WWW. Началото на WWW е поставено в Швейцария през 1989 г. в института CERN за ядрени изследвания, от Тим Бърнарс Лий, който предлага идеята за разпределената хипермедия. Днес той е ръководител на консорциума W3C (World Wide Web Consortium), който поставя различни стандарти за WWW. WWW работи с помощта на протокола HTTP (Hyper Text Transfer Protocol). HTTP е протокол от ниво 7 (според модела OSI). Версията HTTPS шифрира данните, което го прави незаменим при изискващи повишено ниво на сигурност WWW-транзакции. За да осъществява комуникацията, HTTP използва модел от вида заявка/отговор. Всяка заявка включва: метода на заявяване; URL адреса на документ, програма или друг ресурс; HTTP версията, използвана от браузъра; друга помощна информация. Има няколко метода за заявяване. Най-често използваните са:



  • GET – използва се за извличане на информация намираща се на даден адрес. Изпозлва се за изпращане на данни от формуляри. Данни се прехвърлят чрез URL адреса.

  • HEAD – подобен на метода GET, с тази разлика, че след обработката на информацията сървъра връща само заглавната част, без информацията, която е обект на заявката. Използва се за извличане на информация от URL адреса, без да се получава информацията от последния.

  • POST – използва се за информиране на сървъра, че информацията приложена към заявката, трябва да бъде изпратена на посочения URL адрес. Обикновено се използва за прехвърляне на информация от формуляри.

Порта по подразбиране на HTTP е 80, а на HTTPS е 443.
1.2.2. E-MAIL (Електронна поща)

Това е една от най-старите услуги в Интернет и все още една от най-често използваните. Използва се за изпращане на текстови съобщения от един потребител на друг. С развитието си вече може да се изпращат не само текстови съобщения, но и HTML страници, както и файлове с програми и изображения. Базира се на протоколите IMAP, POP3 и SMTP. SMTP се използва за изпращане на съобщенията, а POP3 за тяхното изтегляне от пощенския сървър.

Освен тези основни услуги, често използвани услуги са ICQ (изпращане на кратки текстови съобщения), IRC (разговор в реално време с помощта на текст) и TELNET (отдалечено управление на компютъра. Поради ниската сигурност на TELNET се препоръчва използването на SSH).
1.3. Езици за програмиране в Интернет
1.3.1. HTML (Hyper Text Markup Language)

Той не е език за програмиране в прекия смисъл на думата, а по скоро е език за форматиране. Чрез него се създават web страници. За да се постави под контрол и да се стандартизира разширяването на набора от команди в HTML, бе създадена организацията World Wide Wed Consortium, или W3C. Днес всички предложения за допълнения към HTML се отправят към W3C и се включват в официалния стандарт, към който следва да се придържат всички създатели на Web-страници, за да е възможно техния продукт да се ползва от възможно най-много хора. Страниците създадени с HTML могат да съдържат графика, текст, музика, анимация, както и връзки към други страници (хиперлинкове). За създаване на web страница са нужни основно две неща – елементарен текстов редактор и браузър. Файла, който се създава е с разширение HTML. Основна част от кода на HTML са таговете. Това са специални команди, които се поставят между символите <>. Таговете показват на браузърра какво действие да извърши. Можем да разделим тези елементи на два вида – отварящи и затварящи. Отварящите задават на браузъра да започне някакво действие, а затварящите да го приключи. Затварящия таг се различава от отварящия само по символа / преди командата.


1.3.2. CGI (Common Gateway Interface)

Това всъщност не е език за програмиране, но има огромно значение в писането на програми от страната на сървъра. CGI е стандарт, който определя как една външна програма може да комуникира в WEB сървъра. Програмите, които следват този стандарт се наричат CGI програми. Те може да са написани на произволен език на програмиране като C, C++, Pascal, Perl и др. Резултата от тази програма в общия случай е чист HTML код, който може да се визуализира от браузъра.


1.3.3. Java

Java е език разработен от Sun Microsystems пръвоначално за вграждане в електронни устройства за бита. По-късно благодарение на своя платформено независим формат и чудесен обектно-ориентиран модел за програмиране, той става популярен за писането на Интернет приложения. Те се наричат Java аплети и могат да се изпълняват от всеки компютър, който има инсталирана виртуална машина на Java. Java освен това се използва и за програмиране от страната на сървъра – това са т.нар. Java сървлети. Кода на Java се компилира до платформено независим байткод. Този байткод се изпълнява от виртуалната машина на Java. Точно това е и най-големия недостатък на Java аплетите, тъй като тази операция е много бавна (20 – 30 пъти в сравнение с компилиран код). Освен това виртуалната машина на Java е сравнително тежко приложение.


1.3.4. JavaScript

Въпреки наименованието си JavaScript няма много общо с Java. Той е език за програмиране от страната на клиента и се изпълнява там където работи браузър подържащ JavaScript (а това са повечето съвременни браузъри). Той се вгражда в HTML документа и при отварянето му от браузъра, кода на JavaScript се изпълнява. С негова помощ може да се управляват повечето обекти на страниците и на прозореца на браузъра. Той е особено подходящ за предварителна обработка на информация от формуляри преди изпращането и към сървъра, като по този начин се спестява компютърно време на натоварения сървър.


1.3.5. ActiveX обекти на Microsoft

Това е подходът на Microsoft за инициализиране на обекти в прозореца на браузъра. ActiveX представлява COM (Component Object Model) обекти, които може да се изпълняват в Internet Explorer. Например чрез ActiveX могат да се вградят обекти от Word в прозореца на IE. Това е много добър метод за вграждане на обекти, но с няколко недостатъка:


  • ActiveX работят само под Windows и Internet Explorer версия 4 и по-нова. Никой друг браузър не може да изпълнява ActiveX контролите.

  • Множество пропуски в сигурността. Една ActiveX контрола може да има достъп до локалния диск на потребителя, както и до всички негови ресурси. Microsoft въведоха цифров подпис на контролите. Той не гарантира, че ActiveX контролата няма да нанесе поражения на компютъра на потребителя, а само определя кой WEB сайт е отговорен за това.

Въпреки това ActiveX са подходящи за писане на интранет приложения, където всички потребители във фирмата работят под една обща операционна система, а компонентите са написани от доверен източник.
1.3.6. ASP (Active Server Pages)

Това е среда за програмиране чрез скриптове разработена от Microsoft. Те се изпълняват от страната на сървъра, като потребителя получава обикновен HTML код. Тя е позволява включване на сървърни скриптове и ActiveX контроли в HTML страниците. Комбинирания файл съдържа както ASP кода, така и HTML код. Когато се изисква ASP файла, сървъра извиква ASP процесора, който изпълнява всички скриптови команди и изпраща командите във вид на HTML. Отдалеченото изпълнение на скриптовете позволява комуникациите между браузъра и сървъра да бъдат провеждани синхронно и асинхронно.

1.3.7. PHP

Това е език подобен на ASP, но е разработка с отворен код. Работата му е подобна на ASP. PHP стана особено популярен последните години поради своята бързина на изпълнение и леснота на писане на кода. Това е един от най-добрите езици за програмиране в Интернет със сходен със С синтаксис. Чрез него е възможен достъп до бази данни и писане на сложни динамични страници. Както и ASP, PHP кода се вгражда в тялото на страницата и резултата е чист HTML код. Създаден като личен проект, той бива преработен от група разработчици и бързо намира приложението си в Интернет. За да улесни грижите си за собствения си личен сайт, през 1994 г. Размус Лердорф създава скриптов език, наричайки го Personal Home Page Tools. От това наименование по-късно излиза и съкращението PHP. Нововъведението бързо събужда интереса на множество разработчици и скоро след това първата версия на езика вече е факт. PHP и до днес остава силен скриптов език с много възможности за web програмиране. Малко по малко почти всички хостващи компании започват да предлагат поддръжка на езика.


1.3.8. Perl

Perl е чист за програмиране. Разпространението му за създаване на HTML страници се дължи на работата на Perl с текст. Това е една от най-силните страни на този език. Той може да взаимодейства с WEB чрез CGI, което забавя до известна до известна степен неговата работа. Това се преодолява благодарение на специално разработен модул, който позволява изпълнението на Perl код без CGI. Тъй като Perl е език за програмиране, чиято първоначална цел не е бил WEB, чрез него могат да се пишат мощни програми работещи без WEB сървър (Perl притежава възможност за писане на програми с графичен интерфейс). Освен това кода на Perl работи успешно под множество операционни системи без да е нужно пренаписване.

1.3.9. MySQL

Това е най-популярната система за управление на бази данни с отворен код. MySQL предоставя интерфейси за програмиране за езиците C, C++, Java, Perl, PHP и Python. MySQL най-често се използва за Web приложения и се е превърнал в една от най-добрите алтернативи за изграждане на система от Бази Данни заради високата скорост и гъвкавост, с която работи. SQL е съкращение от Structured Query Language (Структуриран език за заявки), предназначен за създаване, обработка и четене на бази данни, които представляват пакети от свързана информация, съхранявана в таблици. MySQL най-често се използва в комбинация с езика PHP. Данните могат да бъдат от всякакъв вид – от обикновени текстови списъци до сложно структурирана корпоративна информация. MySQL организира данните в таблици и позволява бърз достъп до тях, поради което широко се използва при изграждането на уеб сайтове, особено с по-голям обем информация, изискваща бързо четене и обработка.


2. Дизайн на web сайтове
2.1. Същност
2.1.1. Какво е потребителски дизайн?

Потребителският дизайн е философия и процес. Това е философия, което поставя личността (като противоположност на „предмета”) в центъра на вниманието; това е процес, който се съсредоточава върху субективни фактори (като възприятието, паметта, обучението, решаването на проблеми и др.), които оказват своето влияние върху взаимодействието на хората с обектите.

Потребителския дизайн търси отговорите на въпроси относно потребителите и техните задачи и цели, а после използва наученото, за да направлява разработката на сайта:

Потребителския дизайн търси отговорите на следните въпроси:



  • Кои са потребителите на даден сайт?

  • Какви са задачите и целите на потребителите?

  • С какъв опит разполагат потребителите, що се отнася до този „предмет” и други неща подобни на него?

  • Какво трябва да прави дадения сайт според потребителите?

  • От каква информация имат нужда потребителите и в каква форма им е нужна?

  • Как според потребителите трябва да работи този сайт?

Потребителския дизайн може да подобри ползваемостта и полезността на всичко включително и на един web сайт.
2.1.2. Полезност и ползваемост

Полезността се отнася до уместността; съвпадат ли функциите, информацията и др. с нуждите на потребителя. Ползваемостта се отнася до концепцията за удобство за ползване, която макар и проста на пръв поглед не винаги може да се приложи лесно и интуитивно. Потребителският дизайн намалява разходите, увеличава производителността и удовлетворява потребителите.

2.2. Препоръки за ползваемост
Има няколко общо принципи или препоръки за ползваемост. Доколкото те се отнасят до уеб разработката, много от тези препоръки могат да бъдат обобщени по следния начин:
2.2.1. Видимост

Видимостта помага на потребителите да си изградят правилни модели на сайта – модели, които помагат на потребителите да предвидят ефекта от действията си. Важните елементи (като тези, които подпомагат навигацията) трябва да имат голяма видимост. Потребителите трябва да могат само с един поглед да кажат какво могат и какво не могат да направят.


2.2.2. Натоварване на паметта

Сайтът трябва да натоварва паметта на потребителя възможно най-малко. Елементите трябва да са смислени и да присъстват постоянно из целия сайт, така че потребителите да могат да разпознават, вместо да запомнят значението на елементите на всяка отделна страница. Новите елементи и функции трябва да са свързани с тези, които потребителят вече познава.


2.2.3. Обратна връзка

Когато потребителят направи нещо, той трябва да получи незабавна обратна връзка. Например, когато кликне бутон, нещо върху екрана трябва да се промени, така че потребителят да разбере, че системата е регистрирала действието му.

2.2.4. Достъпност

Потребителите трябва да откриват информацията бързо и лесно. Затова е добре да им се предлагат само няколко начина да откриват информацията (чрез навигационни елементи, възможност за търсене, карта на сайта и др.). Не е добре да се предлагат много възможности наведнъж, защото това обърква потребителите. Добре е информацията да е разделена на малки „парчета” и да са организирани според някаква схема или йерархия, която да има определен смисъл за потребителя. Трябва да се дава възможност за бърз преглед, да има подсказки, позволяващи на потребителите да откриват нужното им „парче” информация като просто преглеждат, а не четат всичко. Web специалистите твърдят, че повечето потребители всъщност не четат уеб страниците.


2.2.5. Ориентация и навигация

Ако не се работи в това направление се очаква потребителите често да се оплакват, че се чувстват като изгубени. Затова:



  • Заглавията на връзките трябва да бъдат достатъчно описателни, така че потребителите лесно да могат да предвидят какво биха намерили ако кликнат върху даден линк.

  • Потребителят трябва да може да си представи структурата на сайта.

  • Не трябва да има „задънени” страници, от който потребителят не може или не знае как да излезе.

  • Всяка страница трябва да съдържа ясно различими елементи, указващи на потребителите на коя страница са в момента, къде се намират по отношение на другите страници и как да стигнат до други страници (потребителите влизат в сайтовете от различни места; те не винаги влизат през главната страница).

2.2.6. Грешки

Грешката представлява погрешно действие от страна на потребителя като например кликване на погрешен линк. Важно е броят на такива грешки да бъде възможно най-малък, а и да се създават механизми, които ще помогнат на потребителите да се справят бързо с грешките.
2.2.7. Удовлетворение

Сайтът трябва да бъде приятен за употреба и приятен за гледане. Начинът, по който потребителите възприемат „приятността” на сайта, оказва влияние върху техните:



  • възприятие за удобството на употреба

  • мотивация за изучаване на начина на употреба на сайта

  • увереност в достоверността на информацията на сайта

2.2.8. Четливост

Текстът трябва да се чете лесно. Онлайн безсерифните шрифтове се четат по-лесно, отколкото серифните, особено в по-дълги пасажи текст. Декоративните шрифтове се четат трудно. Курсивният шрифт се чете по-трудно онлайн. Дългите пасажи текст с прекалено голям или прекалено малък размер на шрифта се четат трудно (безсерифни шрифтове с размер 9 – 11 pt и серифни шрифтове с размер 11 – 12 pt се четат добре. Трудно е, обаче да се даде някакво строго правило, тъй като различните шрифтове изглеждат по различен начин при еднакъв размер). Текст написан с главни букви се чете трудно. Блокове от текст по-дълги от 50 символа на ред значително забавят четенето. Висок контраст между текст и фон подобрява четимостта. Тъмен текст върху светъл фон е най-четлив.

2.2.9. Език

За да се постигне по-голяма яснота трябва да се съблюдава следното:


  • Да се използват кратки изречения

  • Да се използват думи от ежедневния език (вместо жаргон и технически термини)

  • Да се използва проста структура на изречението.

По самата си природа Мрежата размива границите между култури и нации. Ето защо, най-добре е разработчика да бъде внимателен с двусмислиците във формата на:

  • хумор (може да бъде неуместен, когато бъде поставен в контекста на чужда култура: в най-добрия случай – може да бъде неразбран, в най-лоши – може да бъде приет като обида).

  • Метафори

  • Икони

  • Идиоми

  • Игра на думи

2.2.10. Визуално оформление

Визуалното оформление трябва да бъде съюзник на потребителя. Затова:


  • за предварително оформление на страницата е добра да се ползва решетка. Тя представлява визуално средство подпомагащо подредбата на различните визуални елементи.

  • Страниците трябва да са интересни, но освен това прости и подредени.

  • Добре е графики да се използват, за да се:

    • илюстрира/информира, а не да се украсява

    • увеличава удовлетвореността/мотивацията у потребителите

    • подпомага навигацията

  • използваните графики е добре да са малки (като размер на файла), за да се зареждат по-бързо

  • най-важните елементи трябва да са най-видими

  • добре е цветовете да се използват по-консервативно. Цветовете могат да влияят върху потребителите – едновременно върху емоциите и възприятията им. Погрешната употреба на цветовете може да създаде неблагоприятни последици. Добре е дизайна да се започне от монохромна схема и след това постепенно един по един да се добавят малко цветове.

  • Подобните елементи трябва да се групират заедно

  • „празните пространства” могат да се използват, за да се организира визуално страницата, да се акцентира върху важните елементи и да се остави място , където очите на потребителите могат да си починат.

2.3. Създаване на потребителски сайтове


2.3.1. Вземане предвид на потребителите от самото начало

Тези препоръки дават обща информация за потребителите и взаимодействието потребител – Мрежа. Това обаче не е достатъчно, за да се направи един конкретен сайт ползваем; от решаващо значение е да се открие как конкретните потребители взаимодействат с конкретен сайт. Да се вземат предвид потребителите от самото начало означава:



  • да се открие какъв е мисловния модел и очакванията на потребителите

  • да се включат потребителите като неразделна част от процеса на дизайн и разработка на сайта, както и на екипа заел се с тази работа.

  • Да се получи обратна връзка от потребителите.

2.3.2. Опознаване на потребителите

С въпроси подобни на тези може да се подпомогне процеса за вземане на решения при разработването и дизайна на сайта:

- Колко опит имат потребителите с:

- Компютри

- Интернет

- Конкретната тематика на сайта

- Каква е средата, в която работят/сърфират потребителите

- Какъв хардуер, софтуер и браузъри използват

- По какъв начин потребителите предпочитат да се информират

- Какъв език (езици) говорят потребителите? Колко добре го (ги) владеят?

- Какви проблеми могат да възникнат във връзка с културата на потребителите?

- Какви знания/умения свързани с тематиката на сайта потребителите вече притежават?

- Какво очакват и от какво имат нужда потребителите, използвайки конкретния уеб сайт?


2.3.3. Анализиране на задачите и целите на потребителите

Трябва да има взаимодействие с потребителите (най-добре на тяхното работно място). При това взаимодействие трябва да се отговори на следните въпроси:



  • Какви задачи трябва да изпълнят потребителите; как ги изпълняват в момента? Какъв е начинът им на работа?

  • Защо потребителите вършат тези задачи по начина, по който ги вършат в момента?

  • Какви са потребностите им от информация?

  • Как потребителите откриват и отстраняват грешките?

  • Какви са крайните цели на потребителите?

Добре е да се проучат различните възможни вариант за дизайн и да се потърси обратна връзка с потребителите преди да са взети крайните решения за посоката на развитие, разработка и дизайн.
2.3.4. Тестване на ползваемостта

Тестването на ползваемостта е процес, който се повтаря във времето; важно е да се провеждат такива тестове по време на разработката на сайта.

Тестването на достъпността може да бъде извършено от специализирани лаборатории и екипировка или чрез прости и евтини средства. Но тестването на ползваемостта е единствения начин, по който можете да сте сигурни, че този конкретен сайт посреща тези конкретни нужди на потребителя.
Потребителският дизайн използва знания от различни области - антропология, теория на взаимодействието човек – компютър, визуални и графични изкуства, комуникации, теория на потребителските интерфейси, лингвистика, човешки фактори в дизайна, дизайн на информацията, цветознание, типография и др.

2.4. Цветовете в уеб дизайна


Наред с формата, шрифта и текстурата, цветът е един от базовите строителни материали както в традиционния, така и в мултимедийния и уеб дизайна. Необикновеният, но внимателно обмислен и балансиран подбор на цветове може да стане основа за великолепна композиция – дори и останалите елементи да са съвсем обичайни.

Очевидно е, че възприемането на цветовете принципно е по-субективно, отколкото, да речем, възприемането на формите – различните хора имат не само различни любими цветове, но и различни усещания, предизвикани от един или друг цвят. Независимо от това във вселената на цветовете действат напълно универсални закони, които всеки дизайнер е длъжен да знае и да може да прилага в практиката. Това не дава за съжаление гаранция, че неговият подбор на цветове ще се хареса на всички, но поне ще му помогне да избегне разпространените грешки и ще придаде на работите му професионален вид.

Цветът – това е онази област, в която компютърната графика има най-голямо преимущество пред естествената графика. Компютърния екран, за разлика от листа хартия, сам излъчва светлина и регулирането на количеството светлина позволява да се обхване далеч по-широк спектър цветове, отколкото този, който може да се възпроизведе върху хартия. До скоро проблемът беше в това, че компютърните дисплеи бяха с ниско качество, а компютрите с прекалено малко памет за съхранение на изображения. Но сега, когато видео картите поддържащи high и true color вече са реалност и компютърът се превърна в най-добрия инструмент за работа с цветовете, достъпен не само за професионалните дизайнери, но и за обикновения потребител.

Разбира се на цветовете не трябва да се възлага ролята на основен носител на информация – уеб страницата задължително трябва да бъде четлива дори и в черно-бял вид. Преди да счита работата си за завършена, дизайнерът е длъжен да разбере как изглежда неговото творение в „grayscale”. Но това не значи, че отношенията между цветовете, като нещо предварително моделирано, могат да се прехвърлят в един черно-бял дизайн. В края на краищата, скалата на сивите полутонове запазва един от трите съставни компонента на изходния цвят – неговата яркост и ако композицията е решена правилно цветово, тя ще изглежда прилично и в монохромен вариант.


2.4.1. Цветово възприятие

Човешкото възприятие по природа е синтетично, а не аналитично – ние разграждаме образа на съставящите го размери, форми, цветове и т.н. Чак в мозъка, където сетивните органи предават цялостната картина, с всички изкривявания и неточности, предизвикани от взаимното влияние между елементите. Това се отнася в пълна сила и за цветовете – просто е удивително по колко различен начин се възприема цвета в зависимост от това, каква форма или площ заема и какви други цветове са около него.

При намаляване на заеманата от цвета площ се намалява количеството оттенъци, които може да различни окото и повечето цветове започват да изглеждат по-бледи и тъмни, особено ако яркостта и наситеността им и без това не са били на максимума. На практика това означава, че за по-малките елементи трябва да се избират по-ярки, „примитивни” цветове, а за да се покаже цялата красота на някой тъмен, слабо наситен оттенък е необходима достатъчна площ (например фона на цялата страница).

От друга страна, цветовете достатъчно близки до черното или бялото трудно могат да бъдат изразени ефективно. Ако цветът е прекалено тъмен, окото е склонно да го приема за черен, а незначителната му осветеност да преписва на прекалената яркост на монитора.

Всеки два цвята поставени близо един до друг се възприемат в известна степен по-различно, отколкото ако стоят самостоятелно. Художниците знаят, че предметите от материалния свят са свързани със сложни цветови отношения – те хвърлят един върху друг рефлекси (отразена светлина) и оцветени сенки. Макар и на подсъзнателно ниво, окото на всеки непрофесионалист очаква подобни отношения и в композициите върху компютърния екран или хартия.

Ако съседните цветове имат що годе еднаква яркост, то те са склонни да обменят наситеността и цвета си. Например, бледо синьо до ярко зелено придобива зеленикав оттенък и става малко „по-цветно”; зеленото пък в известна степен губи от яркостта си и също се предвижва в посока към синьото. Тези ефекти се проявяват най-отчетливо тогава, когато един цвят обкръжава от всички страни другия.

Непосредствено на границата между двата цвята, обаче започва да се проявява противоположната тенденция – цветовете като, че ли се отблъскват един друг, стараят се да подчертаят своите различия; по-тъмния цвят в съседство с по-светъл придобива още по-тъмен оттенък, а светлия точно на самата граница изглежда по-ярък. Такова влияние на цветовете, водещо до усилване на контраста между тях е толкова по-забележимо, когато съседните цветова значително се различават по яркостта си. На ярък бял фон почти всеки достатъчно тъмен цвят изглежда черен, а на тъмен или черен фон ярките и наситени цветове изглеждат особено светли, а тъмните и ненаситени си остават бледи.
2.4.2. Съчетание на цветовете

Съчетание на цветовете – една от малкото области, в които почти всеки непрофесионалист има свое мнение. Професионалистите знаещи, че има доста повече от седем цвята и че два „зелени” цвята могат да се различават не по-малко отколкото черното и бялото, използват общи принципи.

Особено важни за избора на цветове са противоположните и взаимодопълващи се принципи на единството и контраста. Принципът на единството изисква използваните цветове да са възможно най-близки един до друг, а в идеалния случай биха представлявали един и същ цвят. Освен това понякога принципът на единството е ръководещ при избора на цветове, които задължително трябва да са различни. Много професионални страници са изпълнени в една цветова гама: например с тъмни оттенъци на основния цвят за фон, по-светли – за декоративните елементи. Обаче при търсенето на подобно цветово решение трябва да сме внимателни, защото прекалено близките, но не еднакви цветове, могат да дразнят със своята близост, а отсъствието на достатъчно контраст ще направи композицията скучна. Затова е добре при разработчици без достатъчно опит те да се придържат към проверените от времето рецепти: използване на минимум цветове и по възможност да се избират по-контрастни цветове.

Не трябва да се използват цветове, които са прекалено близко един до друг в цветовия кръг – дисонансът (разногласието) между подобни цветове буквално бие по окото. От друга страна, напълно противоположните цветове рядко образуват хармонични двойки – зелено и виолетово или червено с небесно синьо обикновено изглеждат прекалено разнородни (относително добре се съчетават единствено жълто и синьо). В крайна сметка, най-добре се съчетават и контрастират цветове, разположени на разстояние около една четвърт от цветовия кръг един от друг.

С другите два параметъра работата е по-проста. Разликите в наситеността или яркостта на два цвята веднага се забелязва, но все пак тя обикновено се възприема като нещо допълнително към разликата на основните тонове. Логично е затова, цветовете рязко да се различават по един от тези два параметъра, засилвайки контраста между тоновете, а по втория – да се поддържат един друг, непозволявайки на цветовото решение да се разпадне. Ако в нашия случай общите неща и различията между цветовете не са толкова важни, може да се използва противопоставяне на всички три компонента на цвета – увеличаване на количеството противоположни аспекти не усилва, а намалява контраста, разединявайки елементите. И обратното, ако се иска да се подчертае взаимодействието между отделните цветове, свързвайки ги с особено тесен контраст, може да се използва два параметъра за обединение и един (най-добре това да бъде яркостта) за противопоставяне. От това става ясно защо бялото и черното се съчетават толкова добре с повечето други цветове. В тях отсъстват компонентите тон и наситеност, което позволява на съзнанието на потребителя да ги счита за по-ярка или съответно по-тъмна модификация на този цвят, с който са един до друг в момента, прилагайки върху тях варианта с два общи и един противоположен параметър – т.е. почти оптимално съчетание между принципите за единство и контраст.

Един от известните дизайнери Роджър Блек казва за дизайна: „The First Color is White, The Second Color is Black, The Third Color is Red” (Първият цвят е бялото. Втория цвят е черното. Третият цвят е червеното). И наистина всичко е толкова просто – най-яркия и най-тъмния цвят създават усещане за тясно единство и максимален контраст, а ако е нужен трети цвят – червеното се съчетава прекрасно и с бялото и с черното.

Противоположност на този минималистичен подход се явява един особен, умишлено пъстър в цветовете стил, съединяващ максимален брой максимално ярки и наситени цветове. Известно е, че всевъзможните „папагалски” схеми са едни от любимите прийоми на дизайнерите – любители. От друга страна обаче този мотив може да бъде срещнат и в съвсем професионални композиции.

Тази теория може да бъде от помощ, но никога не може да замени личния опит и експериментирането. Съществуват множество великолепни цветови съчетания, които трудно се вместват в описаната схема. И обратното – много съставени по всички правила цветови двойки упорито не искат да работят заедно. Освен това, подборът на цветове зависи много от това, за какъв род елементи са предназначени тези цветове.

2.4.3. Текст и фон

Елементите, без които не може нито една уеб страница – фон, текст, хипертекстови връзки – поставят интересна задача при хармонизирането на трите (или четирите, ако се смята и цвеа на посетените връзки) цвята, заемащи рязко различаващи се площи и изпълняващи различни функции в композицията. Има не малко страници с минимум графики и достатъчно обикновена композиция, които привличат и се запомнят изключително благодарение на цветовата гама.

Основно изискване към двойката цветове за фона и текста е достатъчния контраст между тях, необходим за комфортното, не затормозяващо четене. Този контраст трябва да се изразява преди всичко в различната яркост на цветовете, понеже разлика само в тона или наситеността не позволява на съзнанието да различи текст и фон достатъчно автоматично, а при по-малки размери на шрифта, неговата тоналност и степен на наситеност въобще стават трудно различими (освен това, тези параметри на цвета се губят при показване върху черно-бели екрани).

Ето защо не е удивително, че тестовете на психолозите показват, че черен цвят на бял фон е съчетание, осигуряващо максимално удобство при продължително четене. Но ергономичността – макар и важен, но не единствен аспект на информационния дизайн, нерядко и се налага да отстъпва място на естетиката. Освен черно на бяло, съществуват безброй много цветови съчетания, осигуряващи добра четливост на текста и при избора на едно от тях трябва да се имат предвид общия стил на дизайна на страницата, възможността за съчетаване на тези цветове с друг и много други, чисто естетически съображения. Не трябва да се забравя също, че компютърният екран позволява да се манипулира далеч по-свободно с компонентите на цвета, правейки възможни съчетания, невъзпроизведими върху хартия.

Необичайните цветови решения в уеб страниците могат да се разделят на две големи групи: с тъмен текст на светъл фон и със светъл текст на тъмен фон.

Като пример може да се даде схема с тъмен текст на светъл фон. Нека текста остане черен и да се избере някой достатъчно наситен цвят (например син). Нека се увеличи яркостта му (с други думи да се смеси с бяло) и с него да се запълни фона. Трудно е да се каже, че резултатът е приятен – очевидно е, че наситеността на фоновия цвят тук противоречи на неговата яркост. Подобен фон изглежда воднист, разреден и неинтересен.

Сега вече са ясни начините, чрез които може да се подобри тази цветова схема – трябва или да се направи фоновият цвят по-тъмен, така че неговата наситеност да излезе на преден план, или обратното, да се остави светъл, но да се намали наситеността му. За първия способ е нужно фоновият цвят сам по себе си да е достатъчно оригинален, така че тук няма място за чисто синьо – но затова пък може да се изпробва някой не очевиден междинен тон, примерно синьо-зелен или кафеникав.

Вторият начин – намаляването на наситеността превръща фоновия цвят в светло-сиво с оттенък на първоначалния цвят. Това прави цвета по-малко очевиден и затова по-интересен, но сам по себе си той може би няма да бъде толкова убедителен. Подобен цвят изисква поддръжка от страна на текста и затова за текста е най-добре да се използва по-тъмна вариация на същия цвят.

Същото може да се каже и обратното – тъмният цвят на текста изисква поддръжка от страна на фона, защото иначе тоналността му ще бъде трудно различима. В същото време невисоката наситеност не позволява на цвета да излезе на преден план при възприемането (на страницата) осигурявайки комфортно четене.

Към подобен цветови ландшафт може да се прибави необходимата доза разнообразие чрез по-голяма наситеност или контрастност на цвета на връзките. Въобще за едно ефективно разпознаване, връзките трябва да са с по-забележим цвят от този на основния текст, макар че подобна „забележимост” може да се постигне по различни начини – с контрастност на тона, увеличение на наситеността, увеличаване или намаляване на яркостта. Посетените (visited) връзки трябва да сигнализират за това, че са свършили работата си чрез по-малката наситеност или по-голямата близост с този на основния текст цвят. Приетата за стандартна в графичните браузъри цветова схема – синьо за „новите” линкове и виолетов за „старите” – постига нужния цвят без каквито и да било вариации в наситеността, използвайки това че виолетовия цвят обикновено създава усещане за нещо „размесено” и „незначително”.

Втория тип цветови решения – със светъл текст на тъмен фон – на пръв поглед изглежда по-привлекателен. Доколкото буквите заемат далеч по-малко площ в сравнение с фона, всеки достатъчно тъмен цвят на текста се слива с черното. Затова е по-изгодно за текста да се избира по-светъл и наситен тон, който изисква разбира се тъмен фон. Трябва да се има в предвид, че светлият текст на тъмен фон, макар и да отстъпва по комфорт при продължително четене на черния текст върху бял фон, при по-кратки текстове уморява по-малко окото, защото намалява общото количество светлина, получавано от монитора (за съжаление, мониторите на много потребители са настроени така, че белият фон на страницата почти моментално предизвиква болки в очите).

Печат на бял текст върху черно понякога се използва и във вестниците, но само на екрана тази цветова схема открива всички заложени в нея възможности. Всеки достатъчно тъмен цвят като фон звучи сдържано, благородно, даже тайнствено; всеки светъл цвят за текст става особено ярък и изразителен. Сега подобни цветови съчетания не се асоциират от никой с нещо мрачно и траурно, така че свободата в творчеството не е ограничена от нищо.

Има обаче едно техническо ограничение. Фоновият цвят, който иска да изглежда именно като цвят, а не като безцветно черно, е длъжен да бъде достатъчно наситен, защото в тъмния цвят слабата примес с основния тон се забелязва доста по-трудно, независимо от голямата площ, която заема този цвят. Наситеността на цвета на текста може да поддържа наситеността на фона, но може и да е в контраст с нея.

На второ място по популярност след чисто черния фон са наситените хладни цветове – например, кадифено-синият фон. За текста пък са популярни оттенъците на светлите цветове, особено жълтото призвано да символизира златото.


2.4.4. Заключение

Цветът в уеб дизайна е обширна, многопланова и дори парадоксална тема. Навлизащият тепърва в Интернет „хартиен” дизайнер още преди да се е насладил на свободата и широкия избор при работа с компютърните цветове, се сблъсква с някои ограничения. Но всеки талантлив уеб дизайнер се откроява с един особен, отличителен „цветови стил”, проявяващ се не само в привързаността му към определени тонове, но и в общото му отношение към цветовете, индивидуалния маниер на сблъскване на контрастните и хармонизирането на сходните цветове, с ловкостта при придаване на цветови нюанси. Ето защо е толкова важно да се отделя толкова внимание на цветовете в една професионална композиция, да се анализират силните и слабите страни на цветовите решения във уеб страниците.

2.5. Дизайн на „търсачки”
2.5.1. Въведение

Ако целта е сайта да се показва добре в резултатите на търсачките трябва да се жертва предизвикателния дизайн.


2.5.2. Работа със съдържанието

Претенциозните клиенти понякога предоставят дълъг списък с неща, които искат на първата страница или пък са им хрумнали. Ако постигането на добри резултати с търсачките присъства в списъка, а това се случва често, трябва да се създаде дизайн около съдържание пълно с ключови фрази (около 250 думи), особено за главната страница. Уеб дизайнерите трябва да създават страници не само според браузърите, но и според търсачките.


2.5.3. Splash страници

Splash страницата трябва да създаде необходимото предразположение и настроение преди да се влезе в основното съдържание на сайта. Анимираните въведения направени с Macromedia Flash са доста популярни в днешно време. Това обаче оказва влияние върху търсещите машини индексиращи конкретния сайт.

Ако клиентът иска страницата да е сред първите показани резултати в търсачките, експертите по търсещите машини отбелязват, че сайтът трябва да бъде богат на информация, с внимателно поставени ключови думи, особено на главната страница.

Проблема е че splash страниците и Flash интротата могат да имат твърде малко (или въобще да нямат) HTML текст, те не са полезни за търсачките и понякога могат да попречат на индексирането. Ако главната страница има малко или въобще няма текст, то има и много малко информация, която паякът (така се нарича програмата, която търси и индексира нови страници автоматично) ще индексира, което означава, че сайтът няма да се показва, когато хората търсят.

Има и такива търсачки, които индексират само главната страница, така че ако се случи това да е splash екран с много малко текст, сайтът почти няма шансове да бъде показан в резултати от търсене. МЕТА таговете могат да са от полза за търсачките, които ги разпознават, но без богато съдържание, шансовете поне за включване в списъците или пък показване на първите места са значително по-малки. Препоръчително е главната страница да бъде пълна с информация и с много фрази с ключови думи.
2.5.4. Дизайн за текст

Ясно е, че главната страница обикновено е и най-важната страница в сайта и то не само заради търсачките. Едно скорошно изследване показва, че посетителите често решават дали ще останат или не за четири секунди, а търсачките също разчитат на главната страница, за да преценят как да индексират сайта като освен това те позволяват да им изпратите само главната страница. Няколко препоръки:



  • да се осигури текстов вариант на онази информация, която не може да бъде прочетена от търсачките (като JavaScript, image map, Flash и други мултимедийни елементи)

  • към картинките да се добавят ALT тагове

  • трябва да се прецени как да се използват HTML таговете, като например за заглавията и тяхната подредба и употреба.

  • Главната страница трябва да съдържа поне 250 думи богато на ключови думи съдържание (търсачките обикновено обръщат повече внимание на текста, който е в началото на страницата).

  • Навигацията и архитектурата на сайта трябва да са лесни за проследяване.

  • Трябва да се използват ефективни TITLE и МЕТА тагове.

2.5.5. Добро съдържание

Независимо дали информацията идва от разработчика или клиента, тя трябва да бъде написана според изискванията и на търсачките и на мрежата. Понеже първите 250 думи на главната страница са най-важни за постигане на добри резултати с търсещите машини, работата на дизайнера е да създаде такъв дизайн, че всичко това да заработи добре. Може да се наложи клиента да остави писането на съдържание богато на ключови думи на специалист, както заради по-добри резултати в търсачките, така и заради интересното четиво, което ще напише той. Освен това съществуват и много полезни инструменти, които помагат да се открият кои са най-популярните ключови думи за типа сайт, който се създава.

Оформянето на сайта с кратки изречение, къси абзаци, списъци, в 2 или 3 колони, са няколко от възможностите за форматиране на нужното съдържание.


2.5.6. Навигация на сайта

Паяците проследяват линковете. Така, че ако вътрешните връзки в сайта са достатъчно добри, има далеч по-голям шанс, паяците да ги последват. Това е един от начините да ги накарате да индексират възможно най-много страници.

Създаването на вътрешни линкове е неизменна част от създаването на ефективен сайт. Когато се създава дизайна на сайта трябва да се обърне внимание на ползваемостта на навигацията, която ако е добра ще помогне на паяците да обхождат целия сайт.

Макар текстовата навигация да е най-полезна за търсещите машини, изображенията, JavaScript, mouseover – ите също могат да се използват. Ако се използват графики в навигацията, трябва да се знае, че е добре да се използват ALT тагове, така че търсачките, които могат да ги четат да използват тези ключови думи. Има много общо между създаването на достъпни сайтове и оптимизирането на дизайна за търсачките, като ALT тагът не прави изключение. Понеже търсачките са общо взето като старите браузъри, които не подържат JavaScript текстът трябва да се сложи в NOSCRIPT таг и това е всъщност текста, който виждат търсачките.


2.5.7. Flash

Досега стана ясно защо Flash интро и splash страниците не помагат за добри резултати с търсачките. Но това не означава че не бива да се използва Flash в сайтовете. Тънкостта е не в самата програма, а в начина, по който се използва. Ако на главната страница има Flash файл пълен с ключови изрази и информация заради, която ще се привличат потребители, би могло да е полезно. Ето защо предоставянето на текстови алтернативи на Flash е един от начините за постигане на добри резултати в търсачките. В този момент няма информация доколко NOSCRIPT тага при Flash сайтове спомага на паяците да прочетат съдържанието.


2.5.8. JavaScript

Ако се използва JavaScript страниците – между HEAD таговете, например може да се преместят скриптовете в отделен външен js файл. В противен случай някои паяци първо ще прочета JavaScript кода, отдавайки му по-голямо значение отколкото на съдържанието.


2.5.9. Frames

Сайтовете с фреймове често са пълни с проблеми, които създават големи неприятности с търсачките. Търсачката веднъж индексира, някои непотребен фрейм, оставяйки посетителя извън сайта без да му дава възможност да влезе, друг път – без въобще да индексира сайта с фреймове. С няколко реда код и малко предварително планиране, това може да се промени, така че търсачките да индексират сайта и да не създават фалшиви линкове, водещи към празни страници. За постигането на тази цел има два основни начина:

Винаги да се слагат връзки от отделните страници обратно към сайта. Най-малкото може да се добави връзка към главната страница на сайта. Оптимално е когато се включи навигация, така че потребителите да могат да отидат на различни страници от сайта.

Може също така да се добави малко JavaScript, така че страниците да се показват винаги в правилния frameset. Така, ако търсачката прави връзка само към една от страниците във фреймсета, JavaScript ще отвори и останалите страници. Това обаче не премахва нуждата от навигационни линкове. Те си остават важни.

Когато се създават страници със фреймове, е добре да се включи и тага NOFRAMES за да се позволи на търсачките, които не разпознават фреймове да индексират сайта (също както и при браузърите, които не поддържат фреймове).
2.5.10. PDF

Google е първата сериозна търсачка, която може да индексира PDF файлове, функция, която беше необходима отдавна. Всъщност Google предоставя текстови версии на над 10 милиона PDF файла, които могат да бъдат разгледани и с Acrobat Reader.

Друго предимство, с което разполагат версиите от Acrobat 5 нагоре е, че те позволяват да се добавят МЕТА тагове към документите. Данните в МЕТА таговете се пишат на XML, което означава, че ще могат да бъдат индексирани от търсещите машини.Очаква се все повече търсачки да последват примера на Google.
2.5.11. Употреба на CSS

След внимателно обмисляне, също е възможно да се използват стилове, когато се пише кофа на страниците. Ясно е, че търсачките обръщат внимание на таговете за заглавията и други тагове, които определят важността на елементите и йерархията им в документите. Освен, че отделят повече внимание на текста в началото на страницата, таблиците със стилове дават по-голяма гъвкавост при работа с големина на шрифта, височина на редовете и т.н.

Например може да се промени заглавието като се смени големината на шрифта и разстоянието преди и след него, много удобно с CSS. Може да се вмъкне някоя от ключовите думи между таговете на заглавието като по този начин търсачките ще им обърнат по-голямо внимание. В допълнение, ако се използват външни стилове може да се спести на търсещите машини доста голямо количество код за четене.
2.5.12. Динамично създавано съдържание

Един от доста честите проблеми при динамичното създаване на страници е индексиращите ги търсещи машини е „?” (въпросителен знак) в техните URL. Търсачките могат да спрат до знака „?” в URL и така да не индексират правилният URL. Например този URL:



http://www.websitetips.com/cgi-bin/getpage.cgi?name=fonts

може да бъде прочетен от паяка като:



http://www.websitetips.com/cgi-bin/getpage.cgi

В резултат, търсачката се опитва да намери невалиден адрес и не може да индексира страниците използващи този скрипт. Има няколко разрешения на проблема и няколко програми, които правят адресите по-разбираеми за търсачките. Те са базирани на Apache, ASP и Cold Fusion.

Една алтернатива е да се използва софтуер, които да прави огледални копия на динамичните страници в статични такива.
2.5.13. META Тагове

Много хора си мислят, че мета таговете са единствения начин за постигане на добри резултати с търсачките. Истината е, че:



  • не всички големи търсачки четат мета тагове

  • те са важни, но не са единствения начин, по който търсачките откриват и индексират сайта.

2.5.14. Слоеве

Има множество начини да се скрие съдържание богато на ключови думи от потребителите, като същевременно то се направи достъпно за търсачките.

Два чести използвани са:



  • създаване на скрити слоеве

  • използване на тага или стилове, за да се направи цветът на шрифта същия като този на фона.

Използването на подобни техники може да се определи като „spam”, което все повече търсачки започват да забраняват (или поне да избягват).
2.5.15. Комбинирано използване на техники

Използването на всички описани техники заедно е най-ефективно. С други думи, не трябва да се разчита на МЕТА таговете като основен начин за постигане на високи места в резултатите от търсенето, особено ако не се използват други методи.

Често трябва да се напомня на клиентите, че освен добри резултати в търсачките, съществуват и други начини за привличане на посетители, а именно традиционната реклама.

Създаването на дизайн съобразен с търсачките, въпреки всичко позволява използване на творческите умения на дизайнера, като в същото време да се постигат добри резултати с търсачките.




3. Описание на сайта на УХТ
3.1. Изисквания към сайта на УХТ
Според съдържанието уеб сайтовете могат да бъдат разделени на три основни групи: сайтове с преобладаваща текстова част, сайтове с изравнена тежест на текстовата и мултимедийната част и сайтове с преобладаваща мултимедийна част. Сайтът на УХТ попада в първата група сайтове, а именно сайтове с преобладаваща текстова информация.

Сайтът трябва да се отличава с богата информативност. Той трябва да бъде полезен за различни групи от потребители: преподаватели, студенти, кандидат-студенти, както и външни лица непопадащи в изброените. Чрез сайта студентите трябва да получават информация за връзка с преподавателите, учебни програми и др. За кандидат-студентите е важно да има достатъчно информация относно предлаганото обучение, наличната материална база, области на реализация след завършване на обучението и др.

Добрата подредба и структурираност на сайта са от съществено значение за неговата ефективност и функционалност. Това изискване предполага ясно разграничаване между частите за навигация и съдържание.

Когато един сайт е по-голям от 5-6 страници или съдържа информация, която не може да се обхване изцяло при отваряне на страницата, е добре да разполага със собствена търсачка, улесняваща потребителите при бързото намиране на необходимата им информация. Тя от своя страна трябва да е съвместима с всички езици, за които е предназначен сайта (в случая Български и Английски).

Тъй като не е ясно с какви браузъри точно разполагат потребителите е добре сайта да е съвместим с максимален брой такива, както като версии така и като видове. От гледна точка на разделителната способност на мониторите на потребителите, сайтът може да се използва на разделителна способност 800х600 точки, но най-добре се изобразява на 1024х768 точки или по-висока. За да се улесни използването на сайта е избрана навигация с не повече от 3 нива.

3.2. Избор на средства за разработка. Обосновка


Целият сайт е изграден с използването на следните програми:

  • Macromedia Dreamweaver 8 – програмата е избрана заради удобството при изработката на сайта, а именно: интерактивния начин на създаване на сайта, синхронизиране на сайта според последните стандарти на консорциума W3C, улесненото използване на скриптове и интерактивния режим на тяхното настройване. Програмата се използва за създаване на програмния код на отделните страници от сайта.

  • Adobe Photoshop CS 2 – програмата е използвана за създаване и обработка на прилежащите към сайта изображения. Програмата е избрана от една страна заради лични предпочитания на разработчика-дипломант и от друга страна и заради това, че представлява изключително мощен инструмент за обработка на избражения.

От гледна точка програмиране на самите страници са използвани: HTML, CSS и JavaScript, които стоят в основата на над 90 % от сайтовете в световната мрежа.

3.3. Програмиране и оформяне на страниците


В основата на оформлението на страниците стоят т.нар. фреймове и слоеве. Чрез фреймовете се постига отделяне на различните части на на една страница и по-точно отделяне на информативната от навигационната част. Чрез слоевете се постига много добро позициониране на компонентите на страницата. Комбинацията от фреймове плюс слоеве гарантира много добра прегледност. Всички страници в сайта са изградени от 4 фрейма. По този начин за всяка една страница има 5 файла. Четири от тези 5 файла представляват същинското съдържание на всеки един от фреймовете, а петият файл отговаря за управлението на четирите фрейма. Четирите фрейма на всяка една страница са кръстени:

- *_banner_left.html – това е лявата част на банера. В него са разположени: линка към страницата за търсене, лявата половина на банера както и лявата част на хоризонталната навигация, която присъства навсякъде в сайта.

- *_banner.html – дясната част на банера. В него са разположени: линковете към последните новини, дясната част на банера на университета и дясната част на хоризонталната навигация

- *_nav.html – съдържа вертикалната навигация присъстваща във всички страници, разположена вляво.

- *_main.html – съдържа основната информация на всяка страница. Разположена е вдясно от фрейма за вертикална навигация.

HTML файла, който управлява тези фреймове има следния вид:


<frameset rows="180,*" cols="*" frameborder="no" border="0" framespacing="0">

<frameset cols="50%,*" frameborder="no" border="0" framespacing="0">

<frame src="index_left_up.html" name="leftFrame1" scrolling="No" noresize="noresize" id="leftFrame1" title="leftFrame1" />

<frame src="index_banner.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />

frameset>

<frameset cols="50%,*" frameborder="no" border="0" framespacing="0">

<frame src="index_left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />

<frame src="index_right.html" name="mainFrame" id="mainFrame" title="mainFrame" />

frameset>


3.3.1. Хоризонтална навигация на сайта

Хоризонталната навигация има за цел да препраща потребителя с едно кликване до отделните секции на сайта. Тя е изградена посредством изображения и появяващи се вертикални менюта програмирани на JavaScript. За използването на изображения в HTML се грижи тагът . В кода той има следния вид:



Кодът на появяващото се меню може да се раздели условно на две части. Чрез първата част се настройва самото меню, т.е. колко реда да е менюто, какво да пише на всеки ред и къде да препраща той при кликване върху него. Това се прави чрез следния фрагмент код:
linkset[1]='Технологичен'

linkset[1]+='Технически'

linkset[1]+='Стопански'
Тук се използват два атрибута на тага : href – чрез, който се установява пътя на хиперлинка и target – чрез, който се настройва в кой прозорец да се отвори новата страница. Текста изписан след това и преди затварящия таг се извежда в менюто. Първата част от кода на менюто се разполага в


Каталог: 2015
2015 -> Висше военноморско училище „Н. Й. Вапцаров“
2015 -> Правила за изменение и допълнение на Правила за търговия с електрическа енергия Съществуващ текст
2015 -> Наредба за изменение и допълнение на наредба №36 от 2005 Г. За изискванията към козметичните продукти
2015 -> М и н и с т е р с т в о н а з д р а в е о п а з в а н е т о н а р е д б а
2015 -> Примерна тема за IV клас за „преглед на знанията по математика“
2015 -> Наредба №25 от 10 ноември 2008 Г. За условията и реда за пускане в действие на медицински изделия без наличие на условията по чл. 8 От закона за медицинските изделия
2015 -> 10 ноември демократичното начало тогава и сега


Сподели с приятели:
  1   2




©obuch.info 2024
отнасят до администрацията

    Начална страница