Тема 16 Проектиране на Web страница

Етапи при разработване на webсайт

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

Основните етапи на жизнения цикъл на един web сайт са следните:

·       определяне на изискванията;

·       планиране;

·       проектиране;

·       създаване;

·       поддръжка.                  

1.      Определяне на изискванията          

1.1.   Анализ на необходимостта от създаване на сайта

·       Дефиниране целта и предназначението на сайта – целите трябва да са измерими и постижими

·       Дефиниране основните функции и изисквания към web сайта;

·       Анализ на потребителите  - дефиниране на потенциалните потребители; получаване на мнение и информация от потенциалните потребители;  създаване профил на потребителя

·       Анализ на конкурентите – кои са конкурентите; оценяване сайтовете на конкурентите; дефиниране на уникални и стойностни черти, които само разработваният сайт може да предложи;

·       Определяне на информационното съдържание, което интересува потребителите

1.2.   Проучване на средствата и технологиите

·       Преглед и сравняване на всички възможни технологии, които може да се използват;

·       Избиране най-подходящата технология и програмни продукти;

·       Анализ на осъществимостта

o   техническа осъществимост – достъпен хардуер и софтуер, обучен персонал за работа с програмните продукти

o   икономическа осъществимост – цена за закупуване на средства за разработване, цена на разработването, цена на поддръжката и експлоатацията;

o   експлоатационна осъществимост - дали потребителите могат да използват тази технология

В края на този етап трябва да се създаде спецификация на изискванията към сайта.

2.      Планиране

·       Разработване на подробен план във времето за проекта

·       Разработване на план за използване на ресурсите – финансови, материални (технически) и човешки

·       Планиране на работа с потребителите за получаване на обратна връзка и подобряване на проекта

В края на този етап трябва да се създадат необходимите планове и графици за разработване на сайта.

3.      Проектиране

3.1.   Структура

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

·       Изготвяне за всяка страница от диаграмата списък с нейните елементи и връзки

·       Включване на начална страница

·       Осигуряване всяка страница от сайта да бъде достъпна от главната - директно или индиректно

·       Предоставяне средство за търсене в сайта

·       Включване информация за контакт

·       Включване на брояч за посетители

3.2.   Имена и адреси на сайта и страниците

·       Регистриране адрес за сайта, който потребителите да запомнят и намират лесно

·       Задаване на уникално заглавие на всяка страница, подсказващо нейното съдържание

·       Включване името на сайта в заглавието на всяка страница

·       Осигуряване на всяка страница да има свой адрес (URL)

o   Избягване използването на препинателни знаци в адресите

o   Запазване на къси адреси

o   Използване само малки букви в адресите

3.3.   Общ дизайн на страниците

·       Единен стил за всички страници

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

·       Избиране ключови думи в meta информацията – за лесно намиране на страницата от машините за търсене.

·       Ограничаване големината на страниците в сайта – желателно до екран и половина

·       Включване дата на последна редакция на страницата

·       Включване връзка към администратора на сайта, информация за запазени права и др.

·       Използване на по-съдържателно съобщение отколкото "доработва се (under construction)"

3.4.   Графичен изглед

·       Отделяне на съдържанието от интерфейса

·       Проектиране сайта в стил, който съответства на вкуса на потребителите;

·       Подходящо цветово оформление, съответстващо на темата и настроението, което искате да бъде внушено на потребителите;

·       Фонът на страницата да дава възможност за добра четливост на текста – да се избягват изображения или ярки и многоцветни текстури за фон;

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

·       Представяне на информацията ефективно и избягвайки безпорядъка

·       Ограничаване хоризонтално информацията до 480 пиксела

3.5.   Навигация

·       Предоставяне на еднообразни икони или текст за връзките за всяка страница;

·       Информиране винаги потребителите за тяхното положение в сайта;

·       Проектиране връзките така че да имат ясни функции;

·       Избягване връзки към външни страници;

·       Избягване използването на твърде много връзки в страница;

4.      Създаване

4.1.   Създаване файловата структура на сайта – използване на конвенция за имената на файловете

4.2.   Създаване образци на страниците – за осигуряване на единен стил

4.3.   Осигуряване на съвместимост

·       Съвместимост с браузърите - създаване алтернативни версии за поддръжка на повече браузъри; използване средства за откриване версията на браузъра, за да се определи коя версия на сайта да се изпрати на съответния потребител

·       Съвместимост на файловите формати – за изображения,

4.4.   Текст

·       Създаване на подходящи заглавия; да се използват подходящо форматиране за заглавията чрез таговете H1 до H7; да се избягват дълги заглавия на повече от два реда

·       Разполагане важната информация в началото на страницата

·       Спазване стандартите на организацията за използване на шрифтове; за предпочитане са разпространени шрифтове, които да се показват по еднакъв начин на всякакви компютърни системи и браузъри на потребителите;

·       Използване на връзки за добавяне по-подробна информация      .

·       Използване цветове, с които текстът да се чете лесно на избрания фон

·       Избягване използването на подчертан текст

·       Избягване използването на думи с големи букви

·       Използване на удебелен (bold) текст, за да се наблегне на по-важна дума или фраза

·       Да се избягва да се използват повече от 3 различни шрифта

·       За визуализация на отделните параграфи (абзаци) да се използва отстъп на първия ред или разстояние преди или след параграфа, но никога и двете едновременно.

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

·       Проверка четливостта

4.5.   Създаване и тестване на връзките

·       Използване връзки с подходящи имена

·       Ограничаване дължината на надписите на връзките

·       Използване относителни връзки вместо абсолютни

·       Придържане към стандартните цветове на връзките в браузера

·       Проверка дали връзките се забелязват лесно в контекста

·       Сравняване текста на връзката със страницата до която се отива

·       Проверка дали всички връзки работят правилно

·       Осигуряване връзка към страница или документ със същото съдържание, но подходящ за разпечатване;  във варианта за отпечатване да се включи адресът на страницата

·       Да се тества дали потребителят може да намери лесно информация

4.6.   Изображения

·       Създаване на картинки, които ще се зареждат бързо – с малък размер на файловете; при възможност да се използват векторни формати; когато се използват растерни формати да се употребяват формати с компресия като gif и jpeg, а изображенията да са с оптимална разделителна способност и дълбочина на цвета, осигуряващи достатъчно качество при минимален размер на файла;

·       за бързо зареждане да се използват умалени изображения, но да се даде възможност потребителят да отвори чрез хипервръзка увеличен и по-качествен вариант на същото изображение;

·       да се използват подходящи файлови формати, в зависимост от типа на изображението – за многоцветни изображения с много нюанси, като снимки да се използва JPEG, а за опростени изображения с малко цветове и големи едноцветни области – GIF; да се използват GIF-картинки, които могат да се зареждат постепенно;

·       да не се злоупотребява с анимациите;

·       да се използват разпространени файлови формати; които се разпознават от повечето операционни системи и браузъри;

·       по възможност една картинка да се използва многократно;

·       за добро подреждане на текста и картинките е препоръчително разполагането им в клетки на таблица.

4.7.   Видео

·       Осигуряване на телевизионно качество на видеото и звука

·       Осигуряване начини за управление на видеото и звука от потребителите

·       Информиране потребителите за вида и обема на видео материалите

4.8.   Използване на CSS стилове

·       Да се дефинират стиловете глобално

·       Да се използват стилове навсякъде, където е възможно

·       Да се зададе желан, алтернативен и шрифт по подразбиране

·       Да се дефинират ясни правила за форматиране чрез CSS

4.9.   Пускане и тестване на сайта

·       Прехвърляне на сайта на сървъра, където ще работи

·       Правене на тестове за качество и производителност след прехвърлянето

·       Тест на връзките

·       Наблюдава се работата на потребителите със сайта

5.      Поддръжка

·       Обучение на администраторите на сайта за начина за поддръжка на сайта

·       Актуализиране на сайта редовно

·       Редовно създаване на резервно копие на сайта

·       Насочване вниманието на потребителите към промените в съдържанието

·       Проверявате на връзките

·       Следене на версиите

·       Следене използването на сайта

·       Обратна информация от потребителите: да се осигури получаване на обратна информация от потребителите; да се отговаря на потребителите, от които се получава обратна информация;

·       Реклама

o   изписване името на сайта във всички фирмени документи (писма, дипляни, каталози, ръководства за използване на продукти и т. н.);

o   осигуряване на връзки към сайта от други сайтове: на партньори, приятели, групи в които членува организацията и др.

o   Рекламиране чрез други медии