[lwptoc depth=”6″]
Основни инструменти за онлайн присъствие
Процес на уеб дизайн – планиране, дизайн и разработване на модерна уеб платформа
Принципно повечето уеб дизайнери могат да потвърдят, че голяма част от процеса на интернет маркетинга е стандартна процедура. При голяма част от проектите се повтарят едни и същи стъпки отново и отново, само с леки вариации. Ако изберете да следвате един типичен и подробен дизайн на уеб сайт и процес на създаване от една страна ще ускорите работата си, а от друга ще избегнете възможни грешки. Целта на това ръководство е да ви покаже как би изглеждал един подобен процес.
Какво всъщност означава „процес“?
Процесът е документирано описание, което ви води от самото начало на уеб проекта до края му. Той разбива и категоризира работата Ви и описва отделните елементи във вид на задачи, които може да използвате като ръководни или опорни точки по пътя, както и да ги използвате в други проекти.
Събиране на информация
За да направите успешен уеб сайт, е много важно да съберете много информация, защото трябва да се вземат предвид множество фактори при изграждането на визия и чувство при създаването на вашия уеб сайт.
На практика най-важна е първата стъпка, защото тя обхваща цялостното познаване на организацията, за която създавате сайта.
Насоченост
Каква е целта на сайта? Търсите възможност да представите информация, да рекламирате определена услуга или да продавате продукт?
Цели
Какво целите да постигнете с използване на уеб сайта? Две от най-често срещаните цели са или печелене на пари, или споделяне на информация.
Целева аудитория
Има ли специфична група лица, която ще ви помогне да постигнете поставените си цели? Полезно е да си представите “идеалният” потребител, който бихте желали да посети вашия сайт. Помислете за неговата възраст, пол или интереси – по-късно това ще ви помогне да определите най-добрия възможен дизайн и вид на сайта.
Съдържание
Какъв вид информация би търсила вашата публика на сайта? Дали би търсила конкретна информация, продукт или услуга, възможност за поръчки онлайн и др.?
Много е важно и да си поставите, и да отговорите на редица въпроси, които сте очертали. Отговорите ще ви помогнат в изграждането на цялостната структура на вашия сайт. Помислете и за това какво Ви е необходимо, както и за нещата, от които не се нуждаете за сайта. Начертайте си една мисловна карта, което ще Ви бъде от неоценима помощ в това да разграничите по-важните от по-маловажните неща.
Планиране
Етапът на планиране е може би един от най-важните етапи в целия процес на разработването на уеб сайта. Решенията, които вземете и очертаете на този етап, оказват отражение върху цялостния процес на разработване. Обръщането на нужното внимание на детайлите е основно за успеха на започнатия уеб проект. Използвайки цялата информация, събрана на етап едно, сега можете да съберете всички елементи в едно и да изградите плана за уеб сайта.
Сега е моментът да изградите картата на сайта. Картата на сайта представлява списък, в който се отразяват всички основни теми и области на сайта – това представлява структурата на сайта. Картата на сайта трябва да бъде лесна за възприемане и логически подредена. Тя трябва да изглежда като златната нишка, която води през целия уеб сайт. Тя насочва потребителите така, че да не се изгубят в структурата и им помага много бързо да достигнат до търсената от тях информация.
Част от етапа на планиране е също така и обмислянето на някои технически аспекти. Какъв вид CMS (Система за управление на съдържанието) е подходяща за вашите нужди?
В зависимост от отговора, трябва да предвидите изискванията във връзка с бекап системите на сървъра и някои други. Важно е да изберете опитни уеб дизайнери и уеб разработчици, за да избегнете възможни проблеми. Уеб дизайнерите и разработчиците ще ви помогнат да решите какви технологии да използвате. Много от тези дизайнери и разработчици познават всички стандартни системи и съвременните уеб стандарти, което е важно за създаването на модерни и функционални уеб сайтове.
Друг важен момент е бюджетът. Условията на плащане, графиците, авторските права, също трябва да бъдат изяснени на този етап от проекта. Добавете всичко това към бюджета на проекта, за да предотвратите евентуалното му надвишаване.
Дизайн
На този етап е време информацията, която сте събрали на етапа планиране, да се превърне в реалност. Това е най-творческата част от целия процес, защото се оформя теорията, събрана на предходните етапи. Цялостното съдържание се ползва от предимствата, осигурени от професионалния уеб дизайн и по този начин достига и до вашите клиенти.
Селин М Боулби казва:
“Целевата аудитория е един от ключовите фактори, които трябва да се вземат под внимание. Сайт, който е предназначен за тийнейджъри например, би имал много по-различна визия от сайт, предназначен за финансова институция. Като част от етапа по дизайн е важно да се включат и елементи като фирмено лого или цветове, които да бъдат в помощ за подсилване на идентичността на дружеството с помощта на уеб сайта.
На този етап решаващо значение има комуникацията между вас и дизайнера, което осигурява окончателният вид на сайта да отговаря и на нуждите, и на вкуса ви. Важно е да работите в тясно сътрудничество с дизайнера, да обменяте и обсъждате идеите докато стигнете до окончателното решение за вида на сайта.”
За изграждането на солиден, съвременен и успешен уеб дизайн са необходими следните стъпки:4
- Планиране на Уайърфрейм и елементи на дизайна
В този момент започва да се очертава визуалният облик на вашия уеб сайт. Използвайки информацията, събрана от клиента на етапа планиране, започнете дизайн на облика с помощта на уайърфрейм. Моливът и хартията са учудващо полезни на този етап в допълнение разбира се, на множеството онлайн средства. - Модели на основата на изискванията на анализа
Изграждането на модели във Photoshop позволява относително лесни модификации, организира елементите от дизайна в слоеве и ви дава основата за по-късно нарязване и кодиране. - Цикъл на преглед и одобрение
Цикълът на преглеждане, избор и одобрение на моделите често протича до момента, в който (в идеалния случай) и клиентът, и изпълнителят, са удовлетворени от дизайна. Това е най-подходящият момент за внасяне на промени вместо да се чака етапа, в който дизайнът вече е кодиран. [1] [2] - Мобилни устройства (Дизайн, адаптиран за телефон)
През последните години организациите започват да се ориентират не само към поддържане на уеб сайтове за настолни компютри, но и към уеб сайтове за мобилни устройства за трансформиране на важни части от декстоп в уеб сайтове, оптимизирани за мобилни устройства. Проблемът при този подход и че се налага да поддържате отделно два уеб сайта. От една страна вашият десктоп сайт и от друга, мобилният уеб сайт.
Благодарение на новите технически възможности като CSS3 медия заявките става възможно поддържането само на един сайт, който автоматично се съвместява с устройството, с което гледате сайта. Това е така нареченият уеб дизайн, адаптиран за мобилни устройства. В съвременния свят не само е важно да имате уеб сайт, оптимизиран за смарт телефони и таблети, това вече е едно неизбежно изискване на средата.
Разработване, тестване и пускане на уеб сайт
Разработването на уеб сайт се разделя на две отделни части. Трябва да направите разграничение между тези две части.
Frontend разработване
Frontend на уеб сайта представлява смесица между програмиране и облик, които са основата на визуалната част и интеракциите на уеб сайта. Можем да кажем и че front end представлява интерфейс между потребителя и back end. Той отразява дизайна на вашия уеб сайт.
Backend разработване
Backend на уеб сайта представлява част от цялостната система, която не може да се види от посетителите. Ако си представите, че уеб сайтът е една кола, в колата има множество елементи, които осигуряват движението й – създават ускорение, спиране, пускане на светлините. На практика вие не виждате всички тези елементи – те обаче са от основно значение, за да може колата да функционира. Backend се изпълнява на сървъра и е свързан с базата данни. Той осигурява и администраторската част за поддържане на уеб сайта и запълването й със съдържание.
В нашата компания целият дизайн, както и frontend на нашите уеб сайтове, се разработват от самите нас. Програмирането на backend се възлага на външно дружество по програмиране.
Най-популярните стъпки за изпълнение на всички етапи
Изграждане на рамка за разработване
В този момент конкретните изисквания могат да наложат необходимостта да се отклоните от процеса. Ако използвате Ruby on Rails, което е ASP/PHP фреймуърк или система за управление на съдържанието от типа Typo3 или Drupal (и двата са отворен код), сега е моментът да ги въведете и да пуснете сайта. Ако направите това достатъчно рано ще осигурите сървърът да може да поеме гладко инсталацията и настройките.
Видове код за всеки вид страница
Един уеб сайт обикновено съдържа няколко страници (напр. За нас, общо съдържание, блог, форма) които могат да са основани на шаблони. Една добра практика е вие сами да създадете шаблони с тази цел. Създавайте на frontend на всяка страница и приложете в избраната система.
Разработване и тестване на специални функционалности и интерактивност
Тук идва място на забавните елементи. Предпочитам да се погрижа за това преди добавянето на статичното съдържание, защото сега уеб сайтът осигурява относително изчистено и непретру- пано работно пространство. Някои разработчици предпочитат на този етап също така да приключат формите, валидизирането и функционалността.
Наливане на съдържание
Качете цялото съдържание, което ви е предоставено от клиента или копирайтъра. Въпреки рутината, отделете усилия на тази стъпка, защото и най-опростените страници изискват внимателно графично оформление и внимание към детайлите.
Тестване и проверка на линковете и функционалността
Сега е подходящият момент за цялостно преразглеждане на уеб сайта. Използвайки като указател своя файлов мениджър, минете през всяка страница, която сте създали. Всичко от началната страница до страницата за потвърждение на заявката и проверете дали всичко работи добре и дали не сте пропуснали нещо във визуалното оформление или функционалността.
Тестването е изтощително, но наистина е важно да отделите достатъчно време за него. Много по-трудоемко е да фиксирате бъг след като уеб сайтът ви вече работи в пространството. За да гарантирате вашият сайт да работи еднакво добре независимо от използвания браузър, трябва да го тествате и с
различните браузъри. Направете кръстосано тестване с различните браузъри (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry и т.н.).
Даже и ако кодът е валиден, това не означава, че ще блести с брилянтен изглед при ползване на старите Интернет експлоръри. Не забравяйте да интегрирате и аналитичен софтуер, за да генерирате стойност за своята статистика. Тези цифри ви дават възможност да реагирате адекватно и да модифицирате сайта си така, че да получите повече трафик или да увеличите своя поток посещения или да достигнете целите си. След цялата тази усилена работа вече можете да прережете лентата и да качите сайта си на www.
Ако планирате да разработите сайт, който да е достъпен за ползване и от хора с увреждания, е много важно да създадете сайта с използване на указанията на W3C consortium познати като WAI-Указания (Инициатива за уеб достъпност). В тези указания ще намерите технически указания как да разра
ботите своя код на уеб сайта така, че до него да имат достъп всички лица, които използват спомагателни технологии като скрийн рийдъри и брайлови дисплеи.
W3C consortium дава технически указания за създаването на сайт, достъпен за всички хора, но има и още въпроси, които следва да обмислите. Съдържанието, което се транспортира посредством интернет сайта, трябва да бъде написано по лесен начин. Авторът, който е отговорен за съдържанието, трябва да избягва използването на чуждици; трябва да се стреми да използва опростени фрази с оглед постигане на ясен изказ.
Пълната достъпност сама по себе си не е постижима поради наличието на конкретен бенчмарк. Колко голям трябва да бъде линкът така, че всеки потребител да може да го кликне – даже и ако ръцете му треперят? Как да бъдат написани изреченията така, че и децата от основното училище, и чужденците, които тепърва започват да учат езика, да могат да ги разберат?
Всичко опира до следването на трендовете: сайтовете трябва да се създават така, че да използват най-съвременна технология за програмиране и да следват всички приложими стандарти. Избягвайки всичко, което може да представлява само излишно затруднение, операторите на сайтове вече са изминали много от пътя към осигуряването на достъпност.
И така, ако сте изяснили каква информация искате да поместите на уеб сайта си, следващата стъпка е да обмислите структурата на уеб сайта (Каква да бъде навигацията? Необходима ли ви е търсачка? форми или друга функционалност?).
За разработчика е много важно да знае тези неща, за да си изгради представа как да създаде сайта по ясен и систематизиран начин и как да добави всички опции за характеристиките за достъпност.
Технически изисквания
Хората със зрителни затруднения използват скрийн рийдъри за достъп до съдържанието на уеб сайтовете. Важно е да се осигурят също така и възможности за промяна на цветовия контраст и размера на шрифта за хора с подобни нужди. Друг важен момент е уеб сайтът да е достъпен с използването на клавиатура или други специално разработени устройства за въвеждане на данни. Намалената лингвистична способност или невъзможността за движене на мишката в определена част на екрана поради треперене на ръцете на потребителя са само два от възможните примери.
- Разделете дизайна и съдържанието на страниците с помощта на XHTML (Хипертекстов маркиращ език) и CSS (каскадни наборни стилове). XHTML и CSS са интернет технологии, разработени от World Wide Web Consortium w3c както вече беше посочено. CSS е начин за разделяне на съдържанието на XHTML документа от неговото представяне.
- XHTML кодът определя кои елементи са на страницата (заглавия, абзаци, и т.н.), как са групирани те, а след това стилът определя как да изглежда страницата, за да бъде създаден web frontend. Така, ако изграждате уеб сайт, който да може да бъде достъпен за всички, тези техники следва да се предвидят от разработчика.
- За всички графични или други мултимедийни елементи трябва да осигурите и алтернативи. Скрийн рийдърът не може да разчете alt текст, ако той не е празен (
Достъпността на уеб сайтовете е важна задача: съдържанието, както и функциите и начините на транзакция на сайта трябва да бъдат достъпни. Това означава всички хора, без значение на възможните им затруднения, да могат да имат достъп до съдържанието и да могат да използват всички функции. Ако има съдържание е ясно, че за осигуряване на достъпност са необходими и „алтернативни решения”.
Към картинките могат да се добавят текстови описания, които да са в помощ на незрящите потребители, а за помощ на потребителите със слухови увреждания например към видео филмите могат да се добавят субтитри или картина-в картината с използване на езика на глухонемите.
Семантика
XHTML кодът определя кои елементи са на страницата (заглавия, абзаци, и т.н.), как са групирани те, а след това стилът определя как да изглежда страницата. Ако желаете, можете да стилизирате всички HTML елементи. Така, ако изграждате уеб сайт, който да може да бъде достъпен за всички, тези техники следва да се предвидят от разработчика. Друга важна бележка е, че не трябва да използвате таблици, за да създавате облика. Вместо този остарял и по-непри- годен в техническо отношение способ, можете да създадете основна шаблонна структура с използване само на XHTML и CSS.
За всички заглавия, параграфи и други елементи от съдържанието използвайте определените XHTML тагове.
Подобрените семантика и тагове помагат и на мрежите търсачки да разберат по-правилно какво има на определена страница и как са разграничени елементите.
По този начин виждате какво е значението на семантичната структура на страницата. Даже и то да е подсигурено така, че да осигурява на хората с увреждания възможност за използване на уеб страниците с помощта на софтуерните инструменти, с които разполагат и хардуерните устройства за въвеждане на данни.
Има няколко важни момента, които е добре да внесете в новата уеб платформа. Всички тези елементи информация са компоненти на Инициативата за уеб достъпност(WAI) на World Wide Web Consortium (W3C), която полага много усилия за подобряване на достъпността на световната мрежа за хората с увреждания. Изцяло новата версия WCAG 2.0 (Указанията за достъпност на уеб съдържанието) можете да намерите тук: http://www.w3.org/ TR/WCAG20/
