«Анализ и разработка сайта» - Дипломная работа

Содержание

ВВЕДЕНИЕ 3

1. Теоретическая часть 6

1.1 Общие положения 6

1.1.1 Выявление причин для редизайна сайта 6

1.1.2 Виды редизайна 8

1.1.3 Юзабилити 11

1.2 Постановка задачи 13

1.2.1 Цель разработки ресурса 13

1.2.2 Аудитория ресурса 13

1.2.3 Анализ состояния сайта 16

1.3 CMS 22

1.3.1 Общие сведения 22

1.3.2 Рейтинг CMS за 2011 год 24

1.3.3 CMS 1С-Битрикс 34

2. Практическая часть 44

2.1 Сведения об используемом программном обеспечении 44

2.1.1 Разработка HTML средствами Adobe Dreamweaver CS4 44

2.1.2 Разработка заголовков средствами Adobe Flash CS4 51

2.2 Редизайн 54

2.2.1 Подготовка к работе 54

2.2.2 Работа над структурой сайта 58

Заключение 64

Список литературы 66

Приложение 68

Введение

Любой веб-сайт, с какой степенью профессионализма он не был бы выполнен, насколько бы не была продумана его структура, срок существования его ограничен, тенденциями развития компании, изменениями, связанными с родом её деятельности, появлением новых технологий в дизайне и разработке веб-сайтов. Ввиду вышеперечисленных изменений со временем стареет любой дизайн также как и например полиграфическая продукция рекламные буклеты, визитки и т.д.

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

Проведение редизайна сайта дело трудоёмкое, сопоставимое по сложности с созданием нового сайта, это связано с тем, что под словом редизайн подразумевают чаще всего не только изменение внешнего вида сайта, а также изменение внутренней структуры страниц и навигации по сайту, а иногда и перевод сайта на новый движок, если старый уже не справляется с требованиями новой структуры.

Решение о смене дизайна сайта необходимо принимать осмысленно, предварительно проведя анализ информации полученной от партнёров и клиентов фирмы, что именно в оформлении сайта притягивает их, а что напротив, отталкивает.

Нужно объективно проанализировать преобладающие, какие качества будущего дизайна приоритетнее для будущего сайта, включая те задачи, которые не были решены текущим дизайном. Проработать отзывы партнёров, сотрудников компании, клиентов, а также провести анализ ресурсов конкурентов. При первом посещении сайта посетитель сначала обращает внимание на дизайн сайта, а потом на его информативное содержание, как говориться “Встречают по одёжке, а провожают по уму”. В Интернете существуют сайты, дизайн которых не менялся уже долгие годы, такие сайты, когда повсюду господствуют тенденции к новизне, кажутся посетителям, с эстетической точки зрения морально устаревшими, как показывает практика, в этом случае посетитель ищет необходимую для себя информацию о товарах и услугах на сайте конкурентов и фирма теряет клиентуру. Чтобы не волочится за конкурентами, а наоборот обогнать их рекомендуется проводить редизайн сайта один раз в два года.

По мере необходимости, нужно изменять не только дизайн сайта, а ещё и добавлять новый возможности, совершенствовать функциональность, не исключена необходимость изменения работы сайта в целом.

Целью данного дипломного проекта является анализ сайта Башкирского экономико-юридического техникума по трем направлениям – структурному, функциональному и эстетическому.

Помимо анализа, предполагается создать редизайн сайта для раздела «Дополнительное образование» сайта h**t://w*w.be**ufa.r*/, это обусловлено требованиями предъявляемыми к квалификации «Дизайнер».

Благодаря качественному редизайну поддерживается хороший имидж компании, возрастает интерес новых партнеров, появляются новые клиенты. Редизайн сайта предполагает:

• Внесение изменений или создание абсолютно нового оформления;

• Создание нового дизайна;

• Изменение структуры сайта;

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

Этапы редизайна:

1. Постановка задачи

Для эффективной работы над разработкой нового дизайна необходимо четкое представление задач, которые ставят перед сайтом.

– цель разработки ресурса.

– аудитория ресурса.

– цели и время посещения ресурса.

2. Анализ состояния сайта

Для оценки уровня соответствия текущего состояния целям Интернет ресурса необходимо сопоставить сайт по нескольким основным критериям:

– качество дизайна

– качество изложения информации

– эргономика структуры

– соответствие функционала задачам ресурса

3. Составление плана модификации ресурса.

Для эффективной оценки результата выполнения редизайна сайта составляется список необходимых работ. Полный перечень доработок является планом всех этапов разработки. Каждый пункт оговаривается при необходимости с самым заинтересованным лицом – заказчиком.

4. Разработка концеции.

Согласно разработанному техническому заданию по выполнению редизайна сайта происходит разработка. Тщательная работа над каждым новым элементом позволяет достичь высокого результата.

Выдержка из текста работы

1. Теоретическая часть

1.1 Общие положения

1.1.1 Выявление причин для редизайна сайта

Чтобы окончательно стало понятно, зачем нужен редизайн сайту, используем простой пример: Сайт компании был создан 10 лет назад когда большинство пользователей работало с экранным разрешением 800x600, на мониторе 15 дюймов, а теперь по мере развития техники большие мониторы резко упали в цене и большинство пользователей Интернет работают с разрешением 1024 x 768 и более. А дизайн сайтов конкурентов уже переделан под новое разрешение, что позволяет поместить большее количества элементов в одном окне браузера, и как следствие сэкономить время потенциального для поиска нужной информации, а кого в этом случае выберет потенциальный клиент? Конечно конкурентов, клиенты ценят своё время.

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

Редизайн сайта помогает внести новизну в оформление и упорядочить контент сайта, изменить графическое оформление. Результатом редизайна должен стать совершенно новый оригинальный стильный дизайн, который «освежит и оживит» проект. Редизайн сайта включает целый комплекс различных услуг:

• На сайте устанавливается система управления содержимым.

• Дизайн сайта изменяется, обновляется flash анимация.

• Количество страниц увеличивается благодаря добавлению новых.

• Создаются новые разделы.

• Увеличивается наполнение сайта текстовым материалом.

• Оптимизируется код страниц для поисковых машин.

• Устаревшая информация удаляется или подлежит замене.

• Изменяется логотип и баннер сайта. Если необходимо, изменяется навигация сайта.

• На сайте создаются форумы, гостевые книги, чаты.

Важно определить цель проведения редизайна сайта. Если это привлечение определенной аудитории, то изменяя сайт, не стоит забывать о тех, кто уже долгое время является его пользователями. Преобразованный сайт не должен их оттолкнуть. В некоторых случаях для новой целевой аудитории лучше создать новый сайт, чем изменять тот, который узнаваем и популярен среди постоянных пользователей. Потребности пользователей сайта изменяются. Поэтому перед началом редизайна важно провести исследование, выяснив, какие изменения требуются. Это может касаться структуры сайта, графического оформления или навигации. Если тексты стали не интересны пользователям, прайс-листы устарели, а навигация неудобна, значит нужно начинать редизайн сайта. Началу редизайна предшествует проведение анализа проблем сайта, выявление недостатков, проведение исследования среди пользователей. Начав с небольших изменений и проведя анализ их эффективности, можно принять решение о необходимости проведения редизайна всего сайта.

Попробуем разобраться в причинах, которые заставляют владельцев сайтов прибегнуть к редизайну.

Внешние причины: носящие скорее организационный, нежели технический характер:

• изменение имиджа компании, профиля или характера бизнеса;

• изменение внутренней или внешней политики компании;

• изменение стиля подачи информации, смена бренда и т.п;

• снижение количества заказов на Вашу продукцию и услуги;

• на фоне конкурентов Ваш сайт выглядит бледно.

Функциональные причины: вызванные желанием изменить действующие характеристики сайта:

• изменение целей, задач или их количества;

• перепозиционирование, например, из представительства в электронную коммерцию;

• кардинальная замена контента (информационного содержания) или редизайн контента сайта в связи, например, с изменением стиля подачи информации;

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

Технические причины: продиктованные необходимостью конструктивных изменений сайта:

• необходимость увеличения скорости открытия страниц;

• перевод на динамическую основу, расширение баз данных, изменение методов доступа к информации.

Перечисленное, ни коим образом не исчерпывает список возможных причин для редизайна сайта, но позволяет составить представление об их происхождении.

1.1.2 Виды редизайна

Визуальный редизайн сайта

Это редизайн внешних визуальных характеристик сайта, его тонального, цветового и графического решений, композиции страниц.

В чистом виде этот редизайн применяется редко, потому к моменту его необходимости накопливаются еще и иные причины для редизайна.

Функциональный редизайн сайта

Сколько-нибудь существенное изменение функциональных характеристик действующего сайта практически всегда приводит к изменениям в его архитектуре и структуре страниц. Функциональный редизайн может включать в себя:

1. установка системы управления на сайт;

2. добавление новых страниц и создание новых разделов;

3. внесение необходимых изменений в навигацию сайта;

4. добавление неодходимых программных модулей (форумов, чатов, гостевых книг и т.д.).

Это серьезные изменения. В большинстве случаев они представляют собой наиболее сложный тип редизайна и вызывают наименьшее количество проблем только тогда, когда действующий сайт построен на динамической основе, в которой и контент и структура ссылок построены на механизме баз данных.

Особого внимания требует вопрос масштабирования сайта с целью увеличения числа решаемых им задач, содержащий в себе скрытые риски, рассмотренные на стр. Размещение задач.

Технический редизайн

Относительно всех или отдельных страниц сайта редизайн технического характера, то есть без заметного изменения их композиционного решения и функциональных характеристик, применяется в основном в двух случаях:

1. для повышения скорости открытия страниц, тогда, когда она низка из-за перегрузки графикой, плохой оптимизации графики, неверных или неудачных решений, примененных для формирования страниц при изначальной их разработке;

2. для оптимизации страниц с целью придания им свойств, необходимых для продвижения в поисковых системах Интернет, то есть для их дальнейшей раскрутки.

Последнее редко делается отдельно и обычно происходит в рамках работ по продвижению и раскрутке сайта. Тем не менее, наиболее рационально провести эту работу заодно с любым видом редизайна, вне зависимости от того планируется ли одновременно процесс раскрутки или он будет отложен.

Относительно общей конструкции сайта или, как иногда говорят, его движка, технический редизайн чаще всего связан с серьезным масштабированием проекта. Это, как правило, требует расширения или реконструкции существующей базы данных, заведения новой, возможно не одной, пересмотра существующих и разработки новых методов доступа к данным и так далее.

В этом случае граница между техническим редизайном и полным редизайном сайта становится исчезаемо тонкой и именно этим объясняется крайняя редкость случаев изменения технической конструкции сайта без его полного редизайна.

Полный редизайн сайта

Исходя из практики, можно вполне уверенно сделать следующий вывод: если по каждой из трех, названных выше категорий причин для редизайна этих причин несколько или планируемые изменения явно влекут за собой и другие – наилучшим решением будет полный редизайн сайта.

Бесспорно это можно отнести лишь к небольшим и средним по масштабу сайтам, в случаях с крупными Веб-узлами такое кардинальное решение принимается более трудно, это и понятно, однако же если проследить вовсе не маленькие сайты ряда лидеров Рунета, то вполне очевидно, что именно там хорошо умеют просчитывать выгоду от полного редизайна, потому они и лидеры.

Полный редизайн сайта иногда рассматривают как вторую разработку того же сайта, это не так, полный редизайн куда как более эффективен и вот почему:

1. разработка ведется уже на основе полученного опыта эксплуатации предыдущего изделия;

2. есть оценки качества и эффективности использованных ранее решений;

3. есть более или менее обкатанный и сложившийся контент, который, в худшем случае, может быть взят за основу;

4. присутствует позиция в рейтинге, как точка отсчета для анализа и дальнейшего продвижения;

5. есть статистика посещаемости и определенное представление об аудитории сайта.

6. представляется обоснованная возможность применить новые технологии и методы дизайна.

1.1.3 Юзабилити

Для оценки ресурса на уровень юзабилити следует проанализировать следующее:

– Эффективен ли он в использовании?

– Легко ли его запомнить для последующих посещений?

– В какой степени он удовлетворяет запросы посетителя?

– На сколько прост пользовательский интерфейс ресурса?

Ответить на эти вопросы возможно только после проведения юзабилити тестирования. Для разработки ресурса с высоким уровнем удобства пользования необходимо учесть следующие факторы:

1. Навигация и структура сайта.

Навигационные элементы должны быть расположены таким образом, чтобы уменьшить до минимума время доступа к необходимой информации. Меню, формы поиска, контекстные ссылки, рубрикаторы и любые другие формы навигации должны быть легко доступны на странице и соответствовать окружающей информации.

Структура сайта должна быть логичной и максимально возможно простой. Не стоит забывать про различные модификации такого полезного элемента, как карта сайта.

2. Цветовая гамма.

Цветовая палитра на каждой странице сайта должна соответствовать цели изложения информации. При этом необходимо учитывать эргономичность сочетания цветов и контрастов. Важно также и грамотное распределение ярких акцентов на странице.

3. Шрифты.

Шрифт должен быть таким, чтобы пользователь легко мог его прочитать. Не стоит выбирать экзотический шрифт. Цвета не должны быть слишком насыщенными, но в то же время контраст цвета фона и цвета текста должен быть высоким.

4. Контент.

Вся информация на сайте должна быть строго структурирована. На этапе разработки ресурса следует распределить информационные блоки по страницам. Исходя из распределения следует разрабатывать навигационные элементы. Если вы планируете использовать Интернет рекламу следует заранее определить тематику контента на каждой странице и в соответствии с ней оптимизировать текст.

1.2 Постановка задачи

1.2.1 Цель разработки ресурса

Целью создания раздела «Дополнительное образование» является обмен учебно-методическими и научными материалами, опытом и знаниями между преподавателями, студентами и выпускниками БЭК.

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

1.2.2 Аудитория ресурса

Целевая аудитория сайта, целевая посещаемость, целевые посетители сайта – группа интернет-пользователей, на которую сфокусировано содержание сайта; круг посетителей, заинтересованных в информации, товарах или услугах, представленных на сайте. Целевые посетители точно знают в получении какой информации они заинтересованы и какой именно товар или услугу желают приобрести.

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

Различают три основные группы целевой аудитории сайта: посетители, заинтересованные в получении информации; посетители, заинтересованные в выборе товара или услуги; посетители, заинтересованные в приобретении товара или услуги.

Любой сайт, кроме собственно целевой аудитории, имеет также побочную аудиторию и случайную. Побочной является часть аудитории, которая приходит с поиска по смежным с семантическим ядром сайта запросам. Например, вы продвигаете страницу по запросу "ремонт коробки передач Toyota своими руками" (и рассказываете, как это делается). И на ваш сайт почему-либо попадает клиент по запросу "ремонт коробки передач Toyota" (который ищет услуги автомеханика). Для вас он не является целевым, но, если на вашем сайте имеется реклама автосервиса Toyota, то это ему подойдет. То же относится и к людям, которые как бы "автоматически" кликают на рекламу, еще не зная, нужна ли им услуга или нет, чтобы "просто посмотреть". Такие пользователи могут конвертироваться в клиентов, однако это происходит значительно реже. Таким образом, побочная аудитория тоже является целевой.

Случайная аудитория – это люди, попадающие на ваш сайт по различным "левым" поисковым запросам или ссылкам. Поисковые системы часто ставят страницы сайтов в ТОП по различным пространным запросам, например "как раскрутить" или "возможно ли" и т. п. Пользователь, пришедший на ваш сайт по такому случайному запросу, редко что-то просматривает.

Определение целевой аудитории

Определение целевой аудитории заключается в составлении примерного портрета целевого посетителя сайта (так называемого портрета клиента).

Основные характеристики целевой аудитории: пол, место жительства, возраст, семейное положение, образование, занятость, финансовый статус, социальный статус, а также специализированные данные, важные для специфики сайта.

Для получения данных, составляющих портрет целевого посетителя, используют различные способы сбора информации.

Способы сбора информации об аудитории сайта:

• лог-анализатор сервера и данные счетчика посещений (позволяют изучить все действия пользователей на сайте и конкретизировать распределение аудитории сайта по регионам, по времени и др.);

• опросы аудитории сайта (анкетирование уникальных посетителей с использованием опросной формы или регистрации на сайте);

• опросы аудитории на сайтах опросов, совмещение панельных данных и данных счетчика посещений (анкетирование происходит не на исследуемом сайта, а на сайте панели);

• системы аудита и традиционные опросы исследовательских компаний (агентств).

Важным источником статистической информации о целевой аудитории сайта является статистика запросов поисковых систем. Оценить величину целевой аудитории можно по числу поисковых запросов. Подобные сервисы имеют, например, поисковые системы Яндекс (Яндекс статистика поиска ) (Рис.1), Рамблер (Adstat Rambler ) и Google (Google Статистика поиска ).

На основе данных, полученных в результате сбора информации, можно получить сводные цифры и изучить закономерности поведения групп пользователей и оценить эффективность рекламного воздействия.

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

Привлечение целевых посетителей

Привлечение целевых посетителей на сайт достигается путем продвижения сайта в сети Интернет. Одним из важнейших этапов продвижения сайта является поисковая оптимизация – комплекс мер, направленных на повышение позиций сайта в результатах выдачи поисковых систем по определенным поисковым запросам пользователей.

Заключение

В прошлом веке понятие редизайна не имело такой популярности, как сегодня: считалось, что созданный однажды логотип и фирменный стиль – это раз и навсегда. Любому изменению или обновлению препятствовал страх потерять узнаваемость, а, следовательно, и клиента.

Редизайн – очень тонкий и интересный процесс. Здесь основная задача дизайнера заключается в том, чтобы внести «свежую струю» в образ заказчика, сохранив при этом максимальное количество связующих нитей между старым и новым образами. Даже при самых незначительных изменениях, если они сделаны грамотно, добротно и со вкусом, результат может быть очень действенным: качественный редизайн позволит сохранить узнаваемость бренда, повысив при этом его привлекательность и актуальность.

В данной выпускной квалификационной работе проведена работа по анализу состояния дизайна сайта Башкирского экономико-юридического техникума, предложены пути улучшения функционально-эстетической стороны сайта, а также разработана страница раздела «Дополнительное образование».

Анализ сайта Башкирского экономико-юридического техникума показал что структура сайта позволяет легко запутаться в страницах неподготовленному пользователю. Функциональность сайта на системе управления содержимым 1С-Битрикс предполагает размещение на страницах сайта мультимедийных ресурсов, что является большим плюсом для сайта любой тематики. После анализа эстетических характеристик сайта, был предложен новый вид сайта. Как итог анализа по трем направлениям был разработан редизайн раздела дополнительное образование для сайта Башкирского экономико-юридического техникума.

Решены следующие задачи:

– изучена литература по теме дипломной работы;

– проведен критический анализ состояния сайта БЭК;

– разработаны и проанализированы эскизы будущей страницы;

– разработан привлекательный флеш-заголовок страницы;

– перерисован логотип БЭК в векторном виде;

– спроектирована структура и создан дизайн страницы.

Предполагается что предложенный дизайн страницы будет использован в качестве основной структуры сайта, этому способствуют такие предпосылки как: светлые, позитивные оттенки, анимация, мультипликационность, современный вид сайта, простота и легкость переноса на существующую CMS.

Список литературы

1. h**t://detalk.r*/index.php?showtopic=406

2. h**t://habrahabr.r*/blogs/Flash_Platform/

3. h**t://rotorweb.r*/2011/01

4. h**t://ru.wikipedia.org/wiki/Adobe_Flash

5. h**t://w*w.antula.r*/weborder-tz_support.htm

6. h**t://w*w.kasper.by/help/predvaritelnyi-gost-dlya-saitov-gosstruktur/

7. h**t://w*w.omnibusdesign.r*/resources/pictogram-detail-gost.html

8. w*w.logodesigner.r*.

9. Аверченков В.И. Информационный поиск в Интернете : [Учеб.пособие] / В.И. Аверченков, С.М. Рощин, Ю.Т. Трифанков; М-во образования Рос. Федерации, Брян. гос. техн. ун-т. – Брянск: Изд-во Брян. гос. техн. ун-та, 2007. – 303 с. Шифр РНБ: 2003-3/14559

10. Автоматизированная система научно-технической нформации -разработка и эксплуатация / [К.И. Володин, Л.Л. Гульницкий, И.Ф. Пожариский и др.]. – М. : Финансы и статистика, 2008. -190 с. Шифр РНБ: 2004-3/17232

11. Готовимся к выпускным экзаменам. Библиотека учителя информатики. – М.: Информатика и образование, 2007.

12. Григорьев А.Н., Ландэ Д.В. New media – новая информационная среда // Журнал "Сети и телекоммуникации", N 2, 2012, С. 18-22

13. Джамеа Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон – М.: ООО «ДиаСофтЮП», 2009.– 672 с.

14. Зельдман Д. Web-дизайн по стандартам / Джеффри Зельдман ; Пер. с англ. Г. П. Кова-лева. – М. : НТ Пресс, 2007. – 440 с. : ил. – (Школа Web-мастерства).

15. Ландэ Д.В. Добыча знаний // Журнал "Телеком", N 1-2, 2007, С. 36-42

16. Орлов С. Технологии разработки программного обеспечения: Учебник. – СПб.: Питер, 2010.

17. Оспенникова Е.В. Е-Дидактика мультимедиа: проблемы и направления исследования. // Вестник ПГТУ. Серия «ИКТ в образовании». – 2009. – Вып. 2. – с. 14-32

18. Принятие решений на основе метода анализа иерархий: методические указания к лабораторной работе N2 по курсу "Теория принятия решений"/ Уфимск. гос. техн. унив.; Составитель: Насыров Р.В.,– Уфа, 2008.– 23 с

19. Флэнаган Д. JavaScript. Подробное руководство. – Пер. с англ. – СПб: Символ_Плюс, 2008. – 992 с., ил.

Примечания

Есть приложения. К работе прилагается Web-разработка.

К работе прилагается программа с исходным кодом.