Образовательное учреждение высшего образования
«Южно-Уральский институт управления и экономики»
Разработка информационного сайта для компании ООО «Витакон»
ОУ ВО «ЮУИУиЭ» – ВК. 09.03.02 38 ПЗ
Руководитель работы
Т.Н. Лебедева
__________________
Автор работы
В.Д. Ильин
__________________
Челябинск
2017
АННОТАЦИЯ
Ильин Владислав Дмитриевич.
«Разработка информационного сайта для компании ООО «Витакон».
Научная работа на тему: «Разработка информационного сайта для компании ООО «Витакон».
В работе раскрывается актуальность темы, сформулированы цели и задачи исследования.
Работа состоит из введения, трех глав и заключения.
Во введении определены актуальность работы, объект, предмет, цели и задачи, практическая значимость работы.
В первой главе представлен анализ предметной области, требования к разрабатываемой информационной системе, инструменты для решения поставленной задачи.
Во второй главе описана деятельность ООО «Аспро»: представлены организационная структура и бизнес-процессы компании, рассмотрены способы и средства реализации информационных процессов на предприятии, а также сформулировано техническое задание на разработку сайта.
Третья глава содержит общее описание разработанной системы, оценку качества разрабатываемой системы в соответствии с ГОСТ, особенности внедрения, расчет экономической эффективности проекта на разработку информационного сайта.
В заключении представлены общие выводы по научной работе.
СОДЕРЖАНИЕ
ВВЕДЕНИЕ 4
ВВЕДЕНИЕ
В последние годы в России огромными темпами развивается Интернет. Большая доля населения имеет выход к нему у себя дома или на работе. Люди используют интернет не только как информационную площадку, но и метод решения своих проблем. Они заказывают услуги, покупают товары, смотрят обучающие видео-уроки, проходят курсы и общаются в социальных сетях. Следовательно, покорение интернета и создание сайтов на сегодняшний день, становится одной из наиболее актуальных и востребованных услуг. Именно поэтому, большинство компаний уже оценили все преимущества интернета для бизнеса и позаботились о разработке подходящего ресурса — посадочной страницы, полноценного сайта, корпоративного портала или интернет магазина.
На первый взгляд это просто — создал сайт, добавил необходимый текст, предложил услуги и начал получать свою прибыль, но не тут то было, в интернете действует жесткая конкуренция. Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Сайт может оказаться неинтересным пользователю и та информация, которую он несет, окажется не востребованной. Именно поэтому важно, чтобы сайт отвечал всем требованиям пользователя.
Актуальность создание «информационного сайта»:
масштабная подача информации широкому кругу пользователей;
обратная онлайн связь с клиентами;
возможностью маркетинговых исследований спроса и предложения;
осуществление связи с клиентам их других регионов.
Целью научной работы является разработка посадочной страницы для юридической компании. Посадочная страница (или landing page) — это современный одностраничный сайт, который позволяет показать посетителю в выгодном свете товары или услуги, описание компании, преимущества, дипломы, награды, отзывы клиентов, контакты и подтолкнуть его к покупке, не по многостраничному сайту.
Объектом исследования является создаваемый одностраничный сайт. Сайт необходим для того, чтобы компания донесла информацию о себе до интернет-пользователей, а также продала им свою услугу.
Предметом исследования является разработка одностраничного сайта с использованием фреймворка bootstrap и языков программирования: html, css и js.
В рамках научной работы сформулированы следующие задачи:
ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;
сбор информации о методах, средствах и технологиях создания сайтов;
определиться со структурой Web-страниц;
разработка требований к проектируемому сайту;
разработка структуры сайта и его программная реализация;
рассчитать стоимости разработки и сопровождения сайта, а также обоснование экономической эффективности проекта.
ГЛАВА 1 АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ
1.1 Анализ состояния исследуемого вопроса в конкретной области науки или технологии
На сегодняшний день практически каждая организация имеет собственный web-сайт. В условиях использования современных информационных технологий — это необходимый фактор существования, позволяющий расширить поле рекламной деятельности и привлечь тем самым дополнительных клиентов.
Всемирная сеть интернет в наше время обрела большую популярность. В ней можно найти любую нужную информацию за короткое время, не выходя из дома. Большинство компаний и частных предпринимателей выставляют свою деятельность и интернет. Для решения такого вопроса необходимо иметь веб-сайт.
Сайт — это не просто полная информация о фирме, ее сфере деятельности и контактах — это возможность решения различных маркетинговых и коммерческих задач бизнеса, т. е. сайт является мощнейшим инструментом рекламы и лицом фирмы, компании. Он доступен пользователям в течении всего времени суток в любой точке земного шара. Каждый руководитель, заинтересованный в процветании и успехе своего бизнеса имеет сайт, принадлежащий компании. Через него производится продажа товаров, услуг, привлечение новых клиентов.
Поэтому создание своего сайта — большая возможность обеспечить необходимой информацией потребителя о предоставляемых товарах и услугах. Причем на их рекламу потребуется меньше затратить денежных средств, чем на рекламу в прессе или на телевидении. В основном сайт представляет собой небольшой по количеству страниц информационный ресурс, выполненный в деловом дизайне, с удобной системой навигации.
Главная его задача — это информирование широкого круга пользователей о деятельности компании, ее товарах и услугах, то есть увеличение целевой аудитории и способствование притоку новых клиентов.
Среди других преимуществ, из-за которых многие стремятся создать web-сайт, можно отметить следующие:
уменьшение затрат на полиграфическую, теле и радиорекламу услуг и товаров компании;
расширение количества потенциальных покупателей и увеличение роста продаж;
привлечение внимания к своему бизнесу со стороны потенциальных партнеров;
улучшение сервиса для уже имеющихся клиентов (они смогут получать всю необходимую им информацию с вашего сайта в любое подходящее для них время);
повышение и укрепление имиджа компании (ресурс предоставляет отличный шанс произвести на посетителя благоприятное впечатление, повысить интерес к деятельности компании);
возможность своевременного оповещения своих клиентов о предстоящих акциях, скидках или о каких-либо изменениях в работе предприятия. Таким образом, любой предприниматель имеет шанс заявить о существовании своего бизнеса и посредством сети Интернет привлечь к своим товарам (услугам) внимание большего числа потребителей.
Сайт (от англ. website: веб-«паутина, сеть» и site «место», буквально «место,сегмент, часть в сети») – совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом). Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое.
С каждым днем разрабатываются все новые и новые веб-сайты, которые облегчают получение новой информации и предоставляют уникальные возможности. Но для того, чтобы веб-сайт имел высокую степень посещения необходимо позаботиться о его привлекательности, грамотно организованной структуре, а также об актуальности, размещенной на нем информации. Сегодня, путешествуя по сети Интернет, можно найти много очень хорошо выполненных сайтов, которые быстро загружаются, привлекательны на вид, имеют четко разграниченную по разделам информацию и удобные функции навигации. Такие сайты просто приглашают вас посетить их, расслабиться, задержаться на некоторое время, развлечься и узнать что-то новое.
Структура веб-сайтов.
Существуют сайты, на которых страницы буквально «навалены» друг на друга в полном беспорядке. И совершенно неясно, куда нужно идти, чтобы найти ту или иную информацию. Причем подобное случается не только в домашних, но и в корпоративных сайтах, а зачастую даже и в информационных проектах. Причина этого – отсутствие продуманной структуры. Часто бывает, что первоначальный проект был небольшим, но в процессе развития к нему подключался то один, то другой раздел. Ну а поскольку определенной структуры нет, то страницы присоединяются к различным местам проекта в полном беспорядке. И через некоторое время пользователи начинают блуждать по сайту в поисках нужной им информации.
Структура сайта должна определяться еще на первых этапах создания проекта до начала разработки дизайна. И в будущем, по мере роста сайта, разработчики должны строго ее придерживаться. Однако для этого необходимо разобраться, какие вообще структуры сайта существуют и для каких проектов они больше всего подходят.
1. Линейная структура. Это самая простая структура сайта, где веб-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу. В линейной структуре не существует разделения контента на уровни. Все страницы на таких сайтах равноправны, и их должен увидеть каждый посетитель. Несмотря на простоту реализации линейной структуры, недостатков у нее гораздо больше, нежели достоинств. А поэтому область ее применения четко ограничена. Она может использоваться на сайтах – презентациях и в онлайновых учебных пособиях. Реализация линейной структуры не представляет собой абсолютно никакой сложности. Самый простой вариант сайта – набор HTML-страниц, с каждой из которых есть ссылка на следующую или предыдущую. Но и здесь часто существуют ошибки. На каждой странице обязательно должно быть какое-то заглавие и ссылка на первую страницу. Иначе посетители, попавшие в середину сайта, например, с поисковой системы, ничего не поймут и почти наверняка покинут этот сайт. Желательно, что бы показывалось общее число страниц и выделять номер той из них, на которой пользователь находится в данный момент.
2. Линейная структура с альтернативами и вариантами. На сайтах, построенных по этому принципу, посетители могут проявить некоторую инициативу. Основой данной структуры является простое линейное размещение веб-страниц. Однако на сайтах, построенных по этому принципу, посетители могут проявить некоторую инициативу, облегчив для себя поиск нужной информации. Под альтернативами в данном случае понимается выбор между двумя ветками. Чаще всего подобная структура используется для сбора информации о посетителе. Примером здесь может служить процесс регистрации клиента на сайте какой-то фирмы, оказывающей определенные услуги. В этом случае все люди начинают работу со стартовой страницы. Однако потом частным лицам предлагается ввести одну информацию, а представителям коммерческих структур – другую. После этого и те, и другие попадают на одну и ту же страницу.
3. Линейная структура с ответвлениями. Это тоже контролируемая структура, которая напоминает дорогу с ответвляющимися от нее время от времени тупиковыми тропинками. То есть посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на какой-то из страниц, его заинтересовала, и он хочет узнать подробности, то может перейти на ответвление, а потом вернуться обратно на основную «дорожку».
Главным преимуществом рассматриваемой структуры является то, что к ней легко перейти с обычного линейного размещения веб-страниц. Такое часто бывает, когда созданный веб-сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам невозможна. В этом случае веб-мастер может быстро и без всяких проблем расширить проект.
4. Древовидная структура – самый универсальный способ размещения веб-страниц. Она подходит для создания практически любых типов сайтов. Пользователь при заходе на главную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т. п. У древовидной структуры один недостаток. В древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц. Естественно, это будет раздражать. Ну а если будет иметь место очень широкая древовидная структура, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки.
5. Решетчатая структура. Эта структура уже на порядок сложнее всех рассмотренных ранее. В ней все страницы также размещаются в различных ветках. Но у пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз), но и горизонтально (то есть между ветками на разных уровнях). Используется решетка в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью отсылок на рубрики в других разделах. Использование решетчатой структуры в других проектах нецелесообразно: она относительно сложна в реализации, а обращаться с «решеткой» нужно с очень большой осторожностью.
Существует целый ряд различных структур сайта. Это только самые основные из них. Между тем, у них есть различные вариации. Какую структуру выбрать для своего проекта – решает разработчик. Однако нужно учитывать, что лучше делать выбор с учетом будущих потребностей
Информационные возможности веб-сайтов.
Сеть Интернет развивается стремительно. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях. Сеть Интернет превращается из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей. Сегодня, когда любой человек, владеющий компьютером, сможет «скачать» с его помощью статьи, иллюстрации, видео – или аудиоинформацию по любой интересующей его теме. Он сможет получить эту информацию тогда, когда он этого пожелает.
На страницах Интернет можно найти любую информацию, на какую угодно тему, общаться с людьми и даже совершать покупки.
Информация на веб-страницах представляется в виде текста, графики, анимации, видео и т.д. Это многообразие объясняется желанием разработчиков привлечь на свои страницы как можно больше посетителей, поэтому они стараются сделать свой сайт как можно более привлекательным.
Привлекательность сайту придает его дизайн. Ведь насколько правильно и гармонично оформлен сайт, настолько лучше и быстрее усваивается информация. Качественный веб-дизайн отражает не только фирменный стиль компании, но и ее представление в интернете. Хороший дизайн сайта позволяет получать информацию с удовольствием, удобство использования функционала сайта доступным и интересным, а восприятие бренда и продукции – запоминающиеся.
1.2 Формирование требований к информационной системе
Компанией ООО «Витакон» сформулирована задача на разработку сайта. Организация рассматривает разработку адаптивной посадочной страницы с целью привлечения дополнительных клиентов.
В связи с этим сформулированы следующие требования:
1. Восприятие: содержимое сайта и компоненты пользовательского интерфейса должны быть представлены таким образом, чтобы пользователь мог различить и воспринять предоставляемую информацию. Например, необходимо обеспечить качественное наполнение сайта и соответствие блоков тематики проекта. Рекомендации также касаются контраста и размера шрифта, изображений.
2. Функциональность: компоненты пользовательского интерфейса и навигация сайта должны функционировать так, чтобы технические и программные особенности сайта не вызывали у пользователя затруднений при работе.
3. Доступность: необходимо гарантировать ясность и простоту предоставляемой информации, а также четкие и логичные навигационные механизмы.
4. Надежность (устойчивость к ошибкам): требование включает необходимость корректной функциональной совместимости сайта с различными видами технологий и программного обеспечения.
5. Адаптивность: веб-страницы должны правильно отображаться на различных устройствах, подключенных к интернету и динамически подстраивающийся под заданные размеры окна браузера. Например, на: телефонах, планшетах, телевизорах и других устройствах.
1.2.1 Ключевые участники и заинтересованные стороны проекта
Ключевыми участниками проекта являются заказчик системы, пользователи системы и разработчик.
Заказчиком сайта выступает компания ООО «Витакон».
Пользователи системы:
администратор сайта;
потенциальные клиенты.
Разработчик системы сотрудник компании Аспро В.Д. Ильин, который будет выполнять все этапы разработки системы: анализ требований, проектирование системы, разработку и тестирование кода, обучение сотрудников компании.
1.3 Анализ способов разработки лендинга
Существуют различные способы разработки сайтов. От мгновенных, запусков шаблонов за несколько часов, до продолжительных проектов, которые проходят месяцами или даже годами.
Наиболее простым способом разработки, не требующих знаний языков программирования, является использование визуальных редакторов, или как их еще называют — конструкторов. Путем переставления блоков заполняется структура структура сайта, и получаются простейшие странички со своими заголовками, формами и типичным дизайном. Самые распространенные из них: lpgenerator, uCoz, Wix, uKit и т.д.
Функционал сайтов в конструкторе очень ограничен. Есть базовый набор возможностей, и добавить новые плагины, скрипты, коды нет возможности. Только менять надписи, картинки на свои – и все. Иногда платно можно купить новые функции, но, опять-таки, из стандартного набора. Даже вставить баннер в неположенном месте не всегда можно.
Шаблонные дизайны красивы, но они не уникальны. Сайт имеет такой же код, как и тысячи других, а то и десятки тысяч.
Посторонняя реклама – сервис крутит свою рекламу на сайте, или вставляет свой логотип или ссылку на видном месте. Отключить это – платно, и цена в месяц может быть, как на приличный платный хостинг, а то и больше! На примере конструктора Ucoz – отключение большого и неприятного баннера стоит гораздо больше приличного платного хостинга!
Следующим способом создания сайта является использование системы для обеспечения и организации совместного процесса создания, редактирования и управления содержимым страницы. (CMS)
В основном CMS имеют модульную архитектуру, и управление контентом происходит благодаря управлениям отдельными модулями. Как правило, в CMS встроено множество готовых решений, а также есть готовый шаблон сайт, который можно отредактировать под свой проект, просто заменив контент сайта и переставив блоки.
Если присутствуют навыки программирования и знания языка гипертекстовой разметки HTML, а также CSS (каскадные таблицы стилей), то не составит проблемы сделать простой, но индивидуальный сайт, с требуемым набором функций и блоков. С помощью HTML строится разметка содержимого будущего сайта, а через CSS настраивается его внешний вид.
Для создания более сложных динамических сайтов потребуется знания скриптового языка программирования PHP.
Чтобы сайт обладал большей функциональностью потребуются знания JavaScript и различных технологий, позволяющих сделать сайт более красивым, динамичным и быстродействующим. Такое создание с нуля займет много времени, как показывает практика, возникает множество ошибок.
Для устранения этих ошибок существуют такое программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта, называемое framework.
Так как макет для будущего сайта уже спроектирован и имеет ряд своих особенностей: уникальных блоков, картинок, размеров, индивидуальных функций - разработка сайта с помощью конструктора не целесообразна, а использование CMS имеет ряд своих ограничений. Исходя из личного опыта использования методов разработки, базовых знаний языков HTML, CSS и целей проекта, для реализации сайта был выбран ручной метод верстки с использованием framework bootstrap.
Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
Благодаря множеству готовых элементов верстка с бутстрапом занимает значительно меньше времени.
1.4 Выбор средств проектирования и средств создания информационных систем/технологий
1.4.1 Полноценный сайт или landing page
Landing Page (далее лендинг) является отдельной страницей, которая создана с целью ознакомления потенциального покупателя с минимальным объемом информации таким образом, чтобы он не только заинтересовался, но и совершил какое-либо действие (перешел по ссылке, заказал товар и т.д.). Разработка лендинга имеет смысл в том случае, когда в процессе рекламной кампании необходимо привлечь как можно больше внимания к товару или услуге и продать его в большом количестве. Лендинг значительно влияет на конверсию трафика в сторону повышения, что имеет огромное значение при раскрутке сайта.
Преимущества лендинга перед страницей обычного сайта:
рекламное предложение, которое несет в себе лендинг, всегда конкретно и не размыто (как правило, это один товар или услуга), что повышает вероятность заинтересованности клиента по сравнению с сайтом, где товаров много и нужно потратить определенное количество времени, чтобы найти необходимый;
навигация лендинга максимально проста, чего не скажешь о сайте, где нужно найти товар, прочитать о нем, а потом — перейти на вкладку с контактами;
создание лендинга проще с технической точки зрения, то же касается и изменения на нем информации, которое не требует больших временных затрат;
такая страница быстро загружается, т.к. на ней не присутствует тяжелых графических и других элементов, замедляющих этот процесс;
лендинг создается достаточно быстро (по сравнению с целым сайтом), обычно это занимает около 4 ч;
несколько лендингов могут быть размещены на одном домене;
наблюдать за статистикой страницы удобно, а изменив одну страницу лендинга можно отследить и проконтролировать то, как контент и графика отражаются на конверсии проекта;
благодаря наличию на странице лендинга формы обратной связи с основными контактными данными, создается клиентская база, при работе с которой можно достичь увеличения продаж до 30%.
1.4.1.1 Framework bootstap
Для разработки лендинга был выбран framework bootstrap.
Bootstrap — это CSS/HTML фреймворк для создания сайтов. Другими словами, это набор инструментов для верстки. В нем есть ряд преимуществ, благодаря которым BS считается самым популярным из себе подобных. Преимущества бутстрапа:
скорость работы — благодаря множеству готовых элементов верстка с бутстрапом занимает значительно меньше времени;
масштабируемость — добавление новых элементов не нарушает общую структуру;
простая настраиваемость — редактирование стилей производится путем создания новых css-правил, которые исполняются вместо стандартных. При этом не требуется использовать атрибуты типа «!important»;
большое количество шаблонов — о шаблонах Bootstrap я напишу далее;
огромное сообщество разработчиков;
широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений;
особой популярностью пользуется Bootstrap для создания одностраничников или «лендингов» (landing page).
Шаблоны Bootstrap.
Шаблоны в бутстрапе позволяют менять уже изменённые элементы под свои потребности. Множество разработчиков предлагают свои шаблоны (как платно, так и бесплатно).
Подключить шаблон в Bootstrap очень легко: после подключения бутстрапа нужно только добавить вызов CSS шаблона.
Подробно о шаблонах написано в уроке о вёрстке шаблонов в Bootstrap.
Состав фреймворка.
Если выбрать Bootstrap, этот фреймворк может существенно сэкономить время на верстку и разработку фронтенда благодаря множеству компонентов. Я опишу основные из них, которые требуются большинству фронтенд-спецов.
Нужно заметить, что бутстрап — это скорее набор из трёх фреймворков: css/html, js-компонентов и иконочного шрифта.
Вёрстка макетов и шаблонов.
Блочная система в Bootstrap — основа грамотной верстки, мощный инструмент для блочного каркаса блоков контента и любых вложенных элементов. При помощи префиксов мы можем указывать, как нужно менять отображение блоков в зависимости от типа устройства, на котором отображается сайт.
Например, класс .col-xs- будет использован для телефонов с шириной экрана менее 768 пикселей, а .col-lg- — для любых устройств с экраном шире 1170 px. BS разбивает ширину родительского блока на 12 равных частей, которые мы можем использовать, как угодно. Части можно объединять, получая, например, три колонки: две по 25% .col-lg-3 и одну на 50% .col-lg-6.
Визуально страница может быть представлена как угодно, пример на рисунке 1.
Рисунок 1 – 12 колоночная сетка bootstrap
1.4.2 Средства разработки
1.4.2.1 HTML
Обмен информацией в Интернет осуществляется с помощью протоколов прикладного уровня, реализующих тот или иной прикладной сервис (пересылку файлов, гипертекстовой информации, почты и т.д.). Одним из наиболее молодых и популярных сервисов Интернет, развитие которого и привело к всплеску популярности самой Интернет, стала World Wide Web (WWW), основанная на протоколе HTTP (Hyper Text Transfer Protocol - протокол передачи гипертекстовой информации). Гипертекстовые документы, представленные в WWW, имеют одно принципиальное отличие от традиционных гипертекстовых документов - связи, в них использующиеся, не ограничены одним документом, и более того, не ограничены одним компьютером. Для подготовки гипертекстовых документов используется язык HTML (Hyper Text Markup Language – язык разметки гипертекстовых документов), предоставляющий широкие возможности по форматированию и структурной разметке документов, организации связей между различными документами, средства включения графической и мультимедийной информации. HTML-документы просматриваются с помощью специальной программы - браузера. Наибольшее распространение в настоящее время получили браузеры Navigator компании Netscape (NN) и Internet Explorer компании Microsoft (MSIE). Реализации NN доступны практически для всех современных программных и аппаратных платформ, реализации MSIE доступны для всех Windows платформ, Macintosh и некоторых коммерческих Unix-систем.
HTML-документ состоит из текста, представляющего собой содержание документа, и тегов, определяющих его структуру и внешний вид при отображении браузером. Простейший html-документ выглядит следующим образом:
< html >
< head >
< title >Название</ title >
</ head >
< body >
< p >Тело документа
|