Разработка web-сайта для организации по продаже недвижимости
Оглавление
Введение
1. Аналитический обзор
1.1 Обоснование потребности в создании web-сайта компании
1.2 Классификация web-сайтов
1.3 Этапы проектирования web-сайта
1.4 Средства реализации
1.5 Использование сценариев в HTML-документе
1.6 Выбор инструментальных средств разработки
2. Разработка сайта
2.1 Определение целевого сегмента пользователей
2.2 Разработка структуры сайта
2.3 Разработка структуры базы данных
2.4 Разработка дизайна
2.5 Разработка веб-сайта
3. Тестирование
4. Внедрение web-сайта
5. Защита web-сайта
Заключение
Список используемых источников
Приложения
Введение
Актуальность темы исследования. Сегодня
невозможно представить себе компанию без собственного сайта. Во-первых,
практичность, удобство, дешевизна и высокая скорость передачи информации в
электронном виде становятся передовыми критериями, которые составляют основу
для использования Интернета в корпоративных, рекламных целях. Во-вторых, сайт
становится основным средством проецирования имиджа организации во внешний мир.
Из практики видно, что в условиях рыночной
конкуренции остается в выигрыше та компания, которая открыта максимально как
для партнеров, так и для потребителей. Именно прозрачность организации -
термин, использующийся для обозначения имиджа организации, приходит на первый
план. Она обязана проявляться во всех способах получения информации о компании,
ее продуктах. Это - максимальная открытость работы организации, характеристик
продукта, ее основных принципов. Для общества она должна проявляться на всех
уровнях: на уровне власти и налоговых органов, потребителей и партнеров,
поставщиков.
Основным элементом имиджа организации в
Интернете является сайт, он воспринимается пользователями как часть
организации, и чаще всего идентифицируется с ней. Сайт является проектором
виртуального образа организации. В данной работе мы основываемся на том, что
сайт является основным элементом имидж формирующей информации в Интернете и в
процессе восприятия идентифицируется с компанией.
Эксперты в сфере коммуникаций все сильнее
уделяют внимание возрастающей популярности сетевых ресурсов, с помощью которых
можно как вести мониторинг обращений "внешних" пользователей к сайту,
так и контролировать коммуникативные потоки внутри корпорации. А самое главное
- сайт приходится основной частью стиля и инструментом проецирования имиджа
организации во внешнюю среду.
Цель работы - разработать целевую страницу
организации с точки зрения демонстрации имиджа в Интернет-пространстве.
Задачи исследования:
) Исследовать особенности
Интернет-пространства, выявить основные функции и задачи сайта, как
представительства организации в сети Интернет;
) Дать характеристику инструментальных
средств создания web-сайтов;
) Разработать целевую страницу
организации.
Объект исследования - разработка целевой
страницы организации.
Предмет исследования - деятельность
организация ИП "Тихомиров".
Гипотеза исследования: целевая страница
организации - способ демонстрации имиджа организации, подачи продукции,
привлечение клиентов и продвижение организации на рынке.
В аналитическом обзоре рассматриваются
вопросы, связанные с теоретическим обоснованием создания web-сайта организации как
инструмента, увеличивающего эффективность деятельности предприятия. Также
анализируются некоторые подходы к роли Интернет-сайтов, целям создания целевой
страницы компании, его способам и приемам увеличения эффективности рекламы
сайта. Приводятся возможные способы оценивания эффективности рекламы сайта в
сети. В практической части работы представлен процесс разработки целевой
страницы компании ИП "Тихомиров".
1.
Аналитический обзор
1.1
Обоснование потребности в создании web-сайта компании
Увеличение использования персонального
подхода к потребителям, определяемое общим стремлением поиска частных решений в
утолении потребностей, все чаще задевает процесс преобразования характера
отношений между производством и потребителем. Итогом таких преобразований
является переход от массового маркетинга к непосредственно диалогу с
покупателем.
Причинами, оказавшими наибольшее влияние
на переход отношений в новое русло, являются:
повсеместное внедрение информационных
технологий;
возможность автоматизирования процедур
взаимодействия с потребителями и будущего автоматического анализа и применения
выявленной информации;
возможность персонализации процедур
взаимодействия с клиентами;
урегулирование проблем недостатка времени
потребителей и нехватки информации для осуществления покупки;
возможность приобретения и оплаты товаров
через Интернет.
Интернет дает пользователю массу
инструментов коммуникации. Любой желающий, подключившись к Сети, сразу же
приобретает возможность серфить по сайтам, пользоваться электронной почтой,
принимать участие в конференциях и чатах и многое другое. Иными словами
пользователь получает возможность интерактивно взаимодействовать со средой
Интернет.
Пользователем Интернета может стать и
организация. После подключения к Сети она может использовать новые способы
ведения своей коммерческой деятельности, например, при использовании
электронной почты связываться с партнерами или клиентами, или исследовать данные
о конкурентах.
Освоившись с основными службами Интернета,
любой желающий может принять самое активное участие в создании среды Интернета,
реализовав свой web-сайт, интерактивный магазин или торговую систему.
Web-сайт предлагает компании
большой набор дополнительных возможностей, в придаток к используемым ранее
коммуникационным средствам. Главная их уникальность состоит в том, что теперь
компания может предложить пользователям еще один сервис: предоставить
информацию, оказывать пред - и послепродажное обеспечение, продавать товары и
услуги. При наличии собственного сайта увеличивается эффективность проводимых
рекламных мероприятий, так как любая реклама может иметь ссылку на сайт
компании, где покупателю будет доступно большее количество информации, что поможет
составить более ясную картину о компании и ее предложениях. Помимо этого,
информация о поведении пользователей на сайте может собираться в информационную
систему компании, после анализа которой применяться для более качественного
обслуживания посетителей.
Таким образом, web-сайт является одним из
основных элементов системы маркетинга в Интернете и требует высшей степени
внимания со стороны маркетологов предприятия.
Со стороны маркетинга, web-сайт - это сборка
информационных блоков и способов для взаимодействия с сегментами основной
аудитории. Какая информация будет выставлена на нем, какие способы будут
задействованы, как они будут взаимодействовать между собой - это все в
зависимости от используемой модели бизнеса, блиц и долгосрочных задач, а также
от разновидностей сегментов основной аудитории и возможности интерактивного
взаимодействия с ней тем, либо иным способом.
Рассмотрим бизнес-модели присутствия
компании в сети Интернет.
сайт интернет имидж
Перед тем, как перейти к принципам
построения и функционирования сайта, сделаем обзор возможных задач, для решения
которых разрабатывается сайт и продвигается. По факту это задачи, которые
ставят перед Интернетом правообладатели веб-сайта. А в целом их описывает
бизнес-модель присутствия в Сети:
1. Ad Supported (рекламная бизнес модель) - сайт разрабатывается для
создания на нем постоянной, явно сегментированной или, наоборот, наиболее
широкой аудитории. Обратная связь с этой аудиторией продается рекламодателям
или спонсорам. Можно привести множество примеров. Например: www.subscribe.ru - крупнейший рассылочный сервер, получающий прибыль исключительно
от размещения рекламы в рассылках.
. Business Supported (модель поддержки существующего бизнеса). В том случае
если у компании существует бизнес в off-line, то с помощью сайта и рекламных кампаний
в Сети, фирма развивает свою клиентуру, создает благоприятный имидж, а также
формирует новый канал сбыта через Интернет. Совершает поддержку своих клиентов
и партнеров через сеть, улучшает бизнес-процессы внутри компании, с помощью
информационных технологий.
Например: компания "Мегафон" (megafon.ru) - крупный оператор сотовой связи. На
сайте предоставлена подробная информация о компании, ее услугах, тарифах.
Успешно работает интернет-магазин оборудования и сервисов данного оператора.
. New Business (модель создания нового бизнеса). Сеть предоставляет
возможность создания новых бизнесов внутри компании. Примером таких бизнесов -
это многочисленные студии веб-дизайна, интернет-агентства, интернет-магазины,
платные сервисы и т.д. Например, информационное агентство "Интерфакс"
(www.interfax.ru), в котором доступ к большей части
контента стоит абонентскую плату.
. Capitalization (модель капитализации проекта). В основе
проекта лежит одна из приведенных выше моделей, но основной задачей является
рост стоимости и возможности продать, такой проект. В зависимости от выбора
бизнес-плана стоимость проекта может считаться от аудитории сайта, денежных
потоков, которые проходят через интернет-сервис, технологического владения и
т.д.
. Энтузиазм. Это не бизнес модель, однако часто бывает основным
толчком на раннем этапе разработки интернет-проектов. Тот же Auto.ru
разрабатывался одним программистом Михаилом Рогальским в свободное от работы
время. Сейчас это крупный проект с приличной прибылью, над которым работает
целая команда.
Как отмечалось выше, со стороны маркетинга, сайт - это сборка
информационных блоков и способов для взаимодействия с сегментами основной
аудитории. Какая информация будет выставлена на нем, какие способы будут задействованы,
как они будут взаимодействовать между собой, зависит от пары факторов:
от выбора бизнес-модели;
от типа сегментов целевой аудитории и возможности взаимодействия с
ней.
Функции сайта:
. Представительские функции и имидж компании:
Участвуя на конференциях или выставках, делегат компании иногда не
имеет возможности и времени изложить всю интересующую оппонента информацию.
Адрес сайта компании на его визитке или рекламном буклете вполне решает данную
задачу. Потенциальный покупатель, партнер, заинтересовавшийся в компании,
обязательно ознакомится с сайтом. Более подробная информация об истории,
деятельности, услугах и товарах компании поможет достичь контакта с
потенциальным партнером по бизнесу, поставщиком, покупателем. В последующем
остальные рекламные материалы на буклетах, радио, телевидении, могут быть
снабжены информацией о сайте.
Наличие такого интернет-представительства (сайта) в сети Интернет
выгодно сыграет на имидж компании: это критерий открытости компании, ее
стабильности и надежности.
Появляется возможность активно вводить новые услуги, использующие
интернет и (или) интернет-технологии, открывать новые бизнес-единицы внутри
компании.
Хорошо разработанный сайт поможет развить и укрепить бренд
компании. С помощью сайта, можно быстро решить задачу формирования лояльной
аудитории интернет-проекта.
Для узнаваемости торговой марки служит привлечение пользователей.
. Рекламные функции и дополнительный канал сбыта:
В случае, если компания создают продвижение товара или услуги на
другие рынки (региональные или международные), то сайт - это самый дешевый и
эффективный вариант рекламного канала. Более информативное описание на сайте
продукции экономит значительное количество ресурсов на доставку необходимой
информации будущим партнерам и покупателям.
Хорошей поддержкой сбыта в розничной сети может служить каталог
товаров или описание услуг, предлагаемой фирмой на местном рынке. Пользователь
сайта, получивший изложенную информацию о товарах или услугах (внешний вид и
его стоимость, месторасположение торговых зон), является уже подготовленным
покупателем.
. Сервисное обслуживание потребителей
Пожалуй что, одно из основных отличий интернета от остальных
средств массовой информации - это интерактивность, обратная связь с
потребителем. Любой желающий, совершая покупку товара или услуги, рассчитывает
получить профессиональный совет и грамотную консультацию. Конечно, предоставляя
качественное обслуживание потребителя, вы заведомо оставляете его своим
потенциальным покупателем и в дальнейшем.
Frequently Asked Questions (FAQ) - "Часто задаваемые вопросы" (ЧАВО). Предоставление
такой информации не только для уже сформированных потребителей продукции, но и
для потенциальных потребителей, для уверенности в необходимости совершения
покупки именно в вашей фирме.
. Сбор маркетинговой информации:
Благодаря собственному интернет-представительству намного проще
собирать плоды обратный связи - отзывы.
Интересный и полезный проект в Интернете всегда соберет свою
аудиторию. Так как любой коммерческой организации необходимо знать как можно
больше о своих потенциальных клиентах, то ведение на сайте статистики
посетителей позволит обрабатывать данную информацию о посетителях, их
географию.
. Вербовка кадров:
Сайт может служить хорошим инструментом для менеджера по
персоналу, который размещает информацию о доступных вакансиях. Можно сказать с
уверенностью, что интернет является одним из передовых инструментов для сбора
информации о специалистах.
. Сокращение традиционных расходов
Собственный веб-сайт располагает дополнительным сервисом
поддержки, это должно сократить расходы на содержание иных способов обратной
связи. Помимо этого, если пользователи сочтут ее более эффективной и полной, в
сравнении с уже имеющимися, то поспособствует повышению положительного опыта
взаимодействия покупателя и фирмы и усилению их взаимосвязи.
за счет перенесения акцента с традиционных средств, использование
собственного сайта позволяет существенно снизить затраты на PR, например печатных материалов, на
информационную форму представления в интернете.
. Конкуренция
Имея в наличии собственный сайт, конкуренция принимает совершенно
иной вид, так как интернет значительно изменяются масштабы для ведения
коммерции. Это создает перед компанией новые горизонты расширения целевой
аудитории и обращения у глобальной аудитории. Временной масштаб предоставляет
возможность для компаний принимать решения намного быстрее.
1.2
Классификация web-сайтов
В Интернете существует огромное количество
разнообразных сайтов. У каждого из них есть определенные цели, задачи, для реализации
которых были потрачены финансовые и трудовые ресурсы.
Поставленные задачи могут быть совершенно
разными. Следует логичный вывод, если сайт выполняет поставленные задачи
(приносит владельцу пользу) и выполняет их хорошо, то это удачный сайт. А какие
именно задачи может выполнять сайт? Рассмотрим наиболее популярные из задач в
отдельности и определим, при каких условиях сайт будет её выполнять.
. Реклама в Интернете (привлечение и
удержание посетителей)
При разработке сайта, целью которого
является привлечение пользователей (реклама), на первое место становятся
размещение информации и эргономичность сайта. Дизайн сайта должен всего лишь
способствовать лучшему восприятию информации. Сайт должен быть максимально
удобным и понятным.
. Продажа товаров в Интернете и оффлайне
Под этим подразумевается не только
Интернет-магазин, а также любой другой сайт, целью которого продажа товара.
Например, может быть сайт-витрина, сайт-каталог рекламирующий товар для
последующей продажи в оффлайне. Все внимание концентрируется на подачи
информации о товарах. В данном случае необходимо уделить внимание
эргономичности сайта, дизайну, написанию текстов. Дизайн - лишь оформление
информации, способствующее лучшему восприятию товара.
. Повышение дохода владельца
непосредственно через сайт
В данном случае на первый план выступает
эргономичности сайта, удобству его управления, для частого обновления
информации. Например - любой портал (новостной, бизнес, знакомства и т.д.).
. Создание или поддержка имиджа в
Интернете
Имидж организации на своем сайте
формируется не только дизайном, но и тщательном написании текста и т.д. Сайт
для создания имиджа может быть нагружен графикой, так и нет. Иными словами если
создается игровой портал для молодежи, то применяются яркие цвета, шрифты, формы.
Если разрабатывается сайт для серьезной организации, то применяются напротив
нейтральные цвета, строгие формы. Это объясняется выбором целевой аудитории. На
сайтах формирующих имидж организации визуальная составляющая подачи информации
не менее важна, чем текстовая.
. Воспроизведение брэнда в Интернете.
Важное отличие, он задач, описанных выше -
это выход роли визуальной составляющей на первый план. Такой сайт может быть
совсем без слов. Логотип, слоган и какой либо графический коллаж. Главный
аспект - точность передачи "атмосферы" бренда, образ, фирменный
стиль, учитывая влияние на дизайн - повысить популярность бренда в Интернете.
На первом месте здесь, идёт дизайн, непосредственно с визуальной точки зрения.
Описанным выше объясняется необычный стиль, направленный на создание
"атмосферы" сайта и увеличение лояльности целевой аудитории к
компании.
На практике перед сайтом редко ставится
лишь одна задача. Обычно, это ряд задач, выделение ресурсов которым идет по
приоритету. Необходимо учитывать и совмещать взаимное влияние пунктов друг на
друга. Присмотревшись более подробно к задачам, можно с уверенностью сказать,
что универсального дизайна создать невозможно. В случае, если дизайн рассчитан
на поддержку бренда в Интернете, не факт, что он будет удобен большинству
пользователей сети. Посмотрев на дизайн сайта, невозможно сразу определить -
удачен он или нет. Необходимо знать задачи, которые на него возложены.
От задач поставленных перед сайтами, можно
классифицировать их следующим образом:
. Сайт-визитка - чаще всего состоит из
нескольких страниц, обладает простым уникальным дизайном; отлично подходит для
компаний, которые хотят заявить о себе и своих услугах в сети Интернет; Обычно
основными разделами сайта являются, "о компании", "продукция и
услуги", "прайс-лист", "контактная информация";
сайт-визитка используется предприятиями, организациями и частными лицами.
. Корпоративный информационный web сайт - нужен для
автоматизирования документооборота компании, ведения статистики, управления
персоналом, также может быть оснащен функционалом для связи с дальними
филиалами; корпоративный сайт положительно влияет на имидж компании; дизайн
должен соответствовать фирменному стилю; обычно включает в себя
"административную часть", через которую секретарю или менеджеру проще
редактировать и обновлять контент.
. Интернет-магазин, он же Сетевой магазин,
Электронный магазин, Internet shop, E-shop - интерактивный веб-сайт рекламирующий товар или услугу,
принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета,
выписывающий счет на оплату, служащий одновременно подтверждением заказа; при
этом администратор магазина обязан:
организовать доставку товара;
проконтролировать расчеты с покупателем за
поставку.
. Информационный портал - крупный
веб-сайт, организованный как многоуровневое объединение различных ресурсов и
сервисов, обновление которых происходит в реальном времени. Информационный
портал содержит колоссальное количество контента, как правило, уникального и
рассчитан на большие нагрузки по посещаемости; является для клиента основным
источником информации, напоминает энциклопедию или специализированный журнал.
. Игровой портал - достаточно сложный
интерактивный развлекательный проект, рассчитанный на большую посещаемость и
ресурсоемкость.
. Персональный проект - личная разработка,
содержащая все что угодно, оформленная в любом стиле, которая более четко
сможет отразить задумку и тематику сайта.
. Контент-проект - это
информационный ресурс (сайт со статьями и/или другими информационными
материалами), посвященный определенной тематике, основная задача - привлечение
узконаправленной аудитории. В последующем, трафик обычно переходит на
коммерческие сайты и, иначе контент - проект это рекламная площадка.
Контент-проект может быть реализован как
интернет-библиотеки, энциклопедии или справочника. Одна страничка сайта дает
небольшой траффик, но общий траффик сайта может в итоге получится внушительным.
Контент-проект, при размещении на нем
подходящей рекламы, может давать неплохой траффик для партнеров (а значит и
конвертацию посетителей в покупателей), потому как, это с высокой долей
вероятности, будет интересно посетителю такого сайта.
Также он может представлять из себя
образовательный или же развлекательный проект.
. Целевая страница (лендинг, также
"посадочная страница") - веб-страница, построенная определенным
образом, основной задачей которой является сбор контактных данных целевой
аудитории. Используется для усиления эффективности рекламы, увеличения
аудитории. Целевая страница обычно содержит информацию о товаре или услуге.
Переход на целевые страницы часто осуществляется из социальных медиа, email-рассылок и рекламных кампаний в поисковых системах. Главной задачей таких страниц является
конвертация посетителя в покупателя или клиента компании, побуждение к целевому
действию. Анализ действий пользователей на целевой странице позволяет
маркетологам определить успешность рекламы.
Причина лежит в оптимизировании сайта с целью более высокого
рейтинга в поисковых машинах, которые дают больший прирост посетителей, то есть
прибыли. Такой сайт чаще всего хорошо оптимизируют под поисковые машины. Дело в
том, что гораздо выгоднее разместить несколько сайтов узконаправленных и
нацеленных на определенную тематику и оптимизировать их по своей специфике. Как
итог, отдача от вложения средств возрастает многократно.
Таким образом, используя целевую страницу, а лучше несколько, в
итоге получаем геометрическую прогрессию прироста посещаемости сайтов компании
в целом, а в итоге и дохода от инвестирования.
. Сайт-форум может быть как отделенным проектом, так и частью
сайта. Обычно сайт-форум создается в подразделе основного сайта и предназначен
для создания общения посетителями между собой, а также администрации сайта.
Сайт-форум может быть отличным источником контента для основного
сайта. Новые темы, могут служить в качестве анонса новых статей для новостного
раздела основного сайта или анонса статей, часть из которых можно применить для
почтовой рассылки. Используя сайт-форум вместе с почтовой рассылкой, появляется
возможность быстрее увеличить посещаемость основного сайта.
. Блог - веб-сайт, основное
содержимое которого - регулярно добавляемые записи, содержащие текст,
изображения или мультимедиа. Для блогов характерны недлинные записи
временной значимости, упорядоченные в обратном хронологическом порядке
(последняя запись сверху). Отличия блога от традиционного дневника обусловливаются средой: блоги обычно
публичны и предполагают сторонних читателей, которые могут вступить в публичную
полемику с автором.
Блог часто применяется для общения людей с общими интересами, в
этом он напоминает сайт-форум.
1.3 Этапы
проектирования web-сайта
Перед тем как приступить к реализации web-сайта, необходимо его
спроектировать, то есть создать четкую внутреннюю организацию сайта, для того,
чтобы пользователю было проще и удобней использовать сайт.
В случае если во время разработки не
следовать определенному плану, появляется вероятность того, что такой проект
будет никому не понятен. То есть будет происходить перепрыгивание от одного
этапа к другому. При таком раскладе есть возможность потерять
"логику" всего проекта. Иными словами пользователи могут не понимать
для каких целей создавался данный сайт. Помимо этого, частые переходы от одного
этапа к другому принуждают разработчика совершать одну и ту же работу по
нескольку раз, что негативно скажется на сроках и стоимости проекта.
Правильный подход к проектированию
предоставляет пользователю возможность оценить, что за информация представлена
на сайте и как быстро до нее можно добраться. На любом участке сайта
пользователь должен представлять свое местонахождение, а также куда он может
отправиться дальше по сайту.
Существует несколько моделей
проектирования web-сайта.
Модель водопада (рис. 1) модель процесса
разработки сайта (программного обеспечения), в которой процесс разработки
выглядит как поток, последовательно проходящий фазы анализа требований,
проектирования, реализации, тестирования, интеграции и поддержки.
Рисунок 1 - Модель "водопада"
(каскадная модель)
Основные достоинства каскадной модели
1) Полная и согласованная документация на каждом этапе;
) Легко определить сроки и затраты на проект.
Недостатки каскадной модели
1) существенная задержка в получении результатов;
) ошибки и недоработки на любом из этапов проявляются, как
правило, на последующих этапах работ, что приводит к необходимости возврата
назад;
) сложность параллельного ведения работ по проекту;
) чрезмерная информационная перенасыщенность каждого из
этапов;
) сложность управления проектом;
) высокий уровень риска и ненадежность инвестиций.
Следующий тип модели - спиральная модель
(рис. 2).
Рисунок 2 - Спиральная модель
Предполагает итерационный процесс создания сайта
(программного обеспечения). Каждая итерация представляет собой законченный цикл
разработки, приводящий к выпуску версии изделия, которое совершенствуется от
итерации к итерации, чтобы стать законченной системой.
Преимущества спиральной модели:
) итерационная разработка существенно упрощает
внесение изменений в проект при изменении требований заказчика;
2) при использовании спиральной модели отдельные
элементы ИС интегрируются в единое целое постепенно;
3) уменьшение уровня рисков;
4) итерационная разработка обеспечивает большую
гибкость в управлении проектом;
5) итерационный подход упрощает повторное
использование компонентов;
6) спиральная модель позволяет получить более
надежную и устойчивую систему;
7) итерационный подход дает возможность
совершенствовать процесс разработки.
Основная проблема спирального цикла - определение момента
перехода на следующий этап. Для ее решения необходимо ввести временные
ограничения на каждый из этапов жизненного цикла. Иначе процесс разработки
может превратиться в бесконечное совершенствование уже сделанного.
Модель Microsoft Solutions Framework
(MSF) методология разработки программного обеспечения, предложенная корпорацией Microsoft. MSF опирается на практический опыт Microsoft и описывает управление людьми и рабочими процессами в
процессе разработки решения. Также такая модель приобрела популярность и среди
других разработчиков (рис. 3).
Рисунок 3 - Модель Microsoft Solutions Framework
Модель MSF собрала в себе лучшее из моделей
представленных выше, каскадной и спиральной. MSF состоит из четырех этапов: анализ, планирование, разработка и
стабилизация. Каждый этап завершается определенным результатом, в пример можно
привести, анализ проекта, после которого идет одобрение общей концепции. В
результате составляется документ, в котором фиксируется результат выполнения
данного этапа, для более четкого представления своей роли каждого сотрудника,
участвующего в разработке. Модель итерационна, поэтому при прохождении всего
цикла этапов проект можно улучшить при учете предыдущей итерации. Также
окончание каждого этапа четко прописано, проблем как в спиральной модели нет
(повторение одного и того же процесса).
На рис. 4 представлена общая блок-схема построения web-сайта. Она включает четыре основных
этапа.
Рисунок 4 - Блок-схема построения сайта
Первый этап решает несколько задач: первая из них это
формулирование целей и задач, которые рассчитаны быть достигнутыми при
реализации проекта, меры и способы реализации этих целей. Вторая же состоит в
полном планировании требуемых действий по реализации веб проекта, включая
разработку различных планов (бизнес-планов), проведение маркетинговых
исследований, определение целевой аудитории, источников финансирования и тому
подобное.
Данный этап имеет основополагающее
значение, фактически от собранной в ходе его информации, принятых решений и
планов зависит общая эффективность и жизнеспособность сайта.
Вторым этапом работы является реализация идеи. В ходе этого
этапа решаются различные подготовительные задачи (выбор местоположения сервера,
выбора провайдера, регистрации домена и тому подобное), а также вопросы,
связанные непосредственно с работой сайта: разработка дизайна сайта и его
структуры, первоначальное наполнение сайта контентом, тестирование и размещение
сайта на хостинге.
Третьим этапом становится задача решения
вопроса привлечения пользователей - текущих и потенциальных клиентов фирмы.
Этот этап подразумевает использование всех доступных способов продвижение сайта
в Интернете: регистрация сайта в поисковых системах и размещение ссылок на него
на различных ресурсах, проведение рекламных компаний - баннеры, контекстная
реклама.
Вышеупомянутые этапы завершаются четвертым
этапом - обслуживанием сайта и удержанием достигнутых при продвижении
результатов. При верном подходе к построению бизнеса сайт продолжит свою работу
и будет только совершенствоваться.
После получения первых итогов работы
проекта корректировка поставленных целей и задач может привести к пересмотру
вопросов первого этапа программы маркетинга. В неудачного результата от сайта
по причине негативной, с точки зрения пользователя, реализации дизайна или
недостаточного количества посещений нужно вернуться к корректировке и
исправления второго и третьего этапов. Внушительные изменения придется внести и
по причине большой динамики развития самой сети Интернет, которая требует
постоянного развития используемых методов и средств. Таким образом, построение
программы маркетинга на основе web-сервера является итерационным процессом,
движущимся вместе с развитием Интернета.
1.4 Средства
реализации
Выбор программного средства для реализации поставленных задач
Разработка программного обеспечения
целевой страницы включает в себя следующие основные этапы:
. Реализация программных компонентов
бизнес-логики;
. Верстка шаблона сайта;
. Реализация основных функциональных
режимов сайта;
Учитывая поставленные задачи на разработку
целевой страницы, были выбраны следующие программные средства - HTML/CSS и JavaScript.
Язык разметки гипертекста HTML/CSS
HTML - стандартизированный язык разметки документов в Интернете. Большее количество веб-страниц имеют
разметку HTML. Код на языке HTML читается браузерами, в итоге отформатированная информация
поступает на экран монитора или же мобильного устройства.
Основной элемент - ТЕГ (дискриптор), он
всегда находится между скобками <>, его синаксис:
<ТЕГ атрибут 1=ЗНАЧЕНИЕ. атрибут N=ЗНАЧЕНИЕ>
Для написания кода web-страниц сайта ИП
"Тихомиров" использовались следующие теги:
Тег <div> это блочный элемент, предназначается для
выделения части документа с целью изменения вида содержимого. Чаще всего блок
оформляется с помощью стилей. Для того чтобы каждый раз не прописывать стили у
каждого такого тега, можно выделять отдельную таблицу стилей. Для этого в тег
нужно добавить атрибут class или id с наименованием селектора.
Синтаксис: <div>. </div>
Тег <img> предназначается для отображения изображений
на веб-странице, в формате JPEG, PNG, GIF. Через атрибут src задается адрес файла с
изображением. Можно сделать изображение как ссылку на другой ресурс (файл),
заключив тег <img> в контейнер <a>.
Синтаксис: <img src="URL" alt="альтернативный текст">
И прочие (см. Приложение А).
Исправление средством CSS.
CSS (Cascading Style Sheets - это формальный язык
для описания внешнего вида документа. Стили имеют другую структуру, нежели HTML документ.
Применялись следующие свойства CSS:
. Свойства шрифта
font-family - задает шрифт текста в
элементе. При использовании нестандартных шрифтов нужно указать URL (file), для автоматической
установки шрифта на компьютер пользователя;
font-style - стиль шрифта (normal, italic);
font-weight - жирность шрифта (normal, bold, bolder, lighter, значение от 100 до
900);
font-size - размер шрифта
(размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller,
larger);
. Свойства текста-spacing - расстояние между
словами (значение, normal);
letter-spacing - расстояние между
буквами (значение, normal);
text-align - выравнивание
текста (left, right, center, justify);
. Свойства фон и
цвет - задет
цвет элемента (значение);
backgroung-color - задает цвет фона
элемента (значение);
background-image -
изображение фон (none, URL);repeat - варианты повторения фонового изображения
(repeat, repeat-x, repeat-y, no-repeat);
. Форматирование
положения блоков - Задает размер отступа от каждого края элемента.
padding - Задает величину поля
окружающего элемент (расстояние от внутренней рамки элемента до абстрактного
прямоугольника окружающего содержимое).
border - Универсальное свойство
border позволяет одновременно
установить толщину, стиль и цвет границы вокруг элемента.
float - Назначает, по какой
именно стороне будет выровнен элемент, другие элементы будут при этом его
оптекать.
4. Селекторы
Простейшее правило CSS задается следующим
образом:
Селектор { свойство CSS: значение }
1.5
Использование сценариев в HTML-документе
Сценарии исполняемые клиентом это - часть
кода интерпретируемого языка программирования (поддерживаемого браузером),
который проникает в HTML - документ и исполняется браузером при пользовании сайта.
Задачи сценариев исполняемых клиентом:
. Разработка интерактивных HTML-документов, фрагменты
которой изменяются при действиях пользователя (без обмена данными с сервером);
. Разработка документов содержащих
анимационные вставки;
. Настройка параметров внешнего вида
документа под размеры экрана, версии браузера и тому подобное.
. Заранее проведенная обработка данных из
форм перед тем, как отправить данные на сервер;
При разработке сценариев интерактивного
управления используются как правило два интерпретируемых языка
программирования:
JavaScript - язык разработки
сценариев интерактивного управления для Web-страниц, разработка
фирмы Netscape на фундаменте Java (Java - разработка фирмы Sun Microsystems). Совместима со всеми
нынешними браузерами.
VBScript - это язык формирования
сценариев интерактивного управления для Web-страниц, разработка
фирмы Microsoft на фундаменте VisualBasic. Своместим только с браузером Internet Explorer.
Для лучшей совместимости с браузерами
используем JavaScript.
Для создания сценариев применяются методы
объектно-ориентированного программирования, управляемого определенными
триггерами (событиями). Такой метод заключается в соотнесении объектов HTML-документа и Web-браузера, сценариев
(функций) - обработчиков различных событий.
Подключение сценариев в документ.
Использование тега HTML <SCRIPT>. Для включения
применяется контейнерная запись тега, с атрибутом TYPE, задающим тип сценария:
<SCRIPT
TYPE="text/javascript">
/* код сценария на
Javascript */. write ("Hello World ");
</SCRIPT>
Для подключения документа сценария,
используется одиночный формат записи тега, с атрибутом SRC, задающим URL файла сценария:
<SCRIPT
SRC="script. js" TYPE="text/javascript">
1.6
Выбор инструментальных средств разработки
Для верстки необходим текстовый редактор. Отличным выбором
является Notepad++. Это бесплатный редактор текстовых файлов с поддержкой
синтаксиса большого количества языков программирования. Программа располагает
широким набором опций и отличается минимальным потреблением ресурсов
процессора.
Среди отличительных опций Notepad++ - опция подкрашивания
текста и допустимость сворачивания блоков, характерному определенному
синтаксису языка программирования. Пользователь имеет возможность сам выбрать
синтаксис языка программирования. Выделение цветом директив и операторов языка
программирования также доступно.
Notepad++ обеспечивает одновременный просмотр и
редактирование нескольких документов. Также имеется возможность просмотра и
редактирования нескольких мест одного документа в разных окнах.
Создание графики для web стоит особенного
внимания. Графика бывает двух типов: растровой (когда описывается каждый
пиксель изображения) и векторная (когда задается формула, по которой строится
изображение). Второй способ представления графики более компактен, также
отлично подходит для анимаций.
Для работы с графикой будем использовать Adobe Photoshop CS6. Это многофункциональный графический редактор, разработанный и
распространяемый фирмой Adobe.
Приемущественно работает с растровыми
изображениями, но и обладает векторными инструментами. Продукт является
фаворитом рынка в области коммерческих средств редактирования растровых изображений и наиболее известным продуктом
фирмы Adobe.
Для отладки результата верстки будем использовать Open Server -
это портативная серверная платформа и программная среда, разработанная
специально для веб-разработчиков.
Программный комплекс обладает богатым набором серверного
программного обеспечения, удобным, многофункциональным продуманным интерфейсом,
имеет мощные возможности по администрированию и настройке компонентов. Данная
платформа массово используется для разработки, отладки и тестирования
веб-проектов, а также для распространения веб-сервисов в локальных сетях.
Для отладки модулей в различном окружении Open Server
предлагает на выбор несколько модулей, которые необходимы для веб-разработки, а
также возможность быстрого переключения между ними.
HTTP модули: Apache 2.2.21, Nginx 1.0.11;
СУБД модули: MySQL 5.1.61, MySQL 5.5.20, PostgreSQL 9.1.1;
PHP модули: PHP 5.2.17 (IMagick 2.2.1, Zend Optimizer
3.3.3, IonCube Loader 4.0.7, Memcache 2.2.4),
PHP 5.3.9 (IMagick 2.3.0, Xdebug 2.1.3, IonCube Loader
4.0.10, Memcache 2.2.6);
Набор инструментов: HeidiSQL, Adminer, PHPMyAdmin, PHPPgAdmin, PgAdmin.
В состав пакета также включены такие полезные инструменты как: Perl, FTP сервер, Sendmail, Memcached сервер.
2. Разработка
сайта
2.1
Определение целевого сегмента пользователей
Одним из важнейших аспектов маркетинговой деятельности
является целевая аудитория.
Целевая аудитория (на английском - target audience, target group) - это комплекс из
реальных и потенциальных потребителей товара или услуги, которые способны
изменить свою точку зрения в пользу данного товара ил услуги, под воздействием
маркетинговых мер.
Наличие целевой аудитории у товара дает возможность
сфокусироваться на определенную группу пользователей конкретной части рынка,
что значительно увеличит вероятность покупки товара или услуги компании.
Целевая аудитория определяет границы целевого рынка для
компании, по факту представляет собой определенный участок потребительского
рынка, то есть для целевой аудитории характерны признаки, которые являются
общими для каждого ее представителя. Потребителей объединяют в целевую
аудиторию по следующим критериям:
· по географическим: к
примеру, целевая аудитория - это жители Вологодской области и близлежащих
областей;
· по
социально-демографическим: к примеру, целевая аудитория - мужчины и женщины
возрастом от 25-50 лет со средним доходом, занимающие должности
средне-статистического сотрудника;
· по психографическим: к
примеру, целевая аудитория - люди, которые устремлены к самоутверждению в
обществе;
Целевая аудитория бывает двух видов.
Первая это целевая аудитория в b2b сегменте (business to business - бизнес для бизнеса). В
данном секторе проще оценить емкость рынка, а также размер целевой аудитории.
Вторая это целевая аудитория в b2c сегменте (business to customer - потребительский
бизнес), в данном сегменте параметры целевой аудитории очень сильно зависят от
внешних факторов. На рынке появляются новые инновационные продукты, изменяются
тренды, меняется политическая и экономическая ситуация. Все это влияет на
поведение пользователей.
Чтобы определить целевую аудиторию, необходимо провести
сегментацию (выделение) участка рынка.
Для этого можно использовать методику "5W" Марка Шеррингтона,
как одну из наиболее популярных методов определения целевой аудитории.
Рисунок 5 - Таблица для анализа целевой аудитории по
Шеррингтону. На примере обычной питьевой воды.
Целевая аудитория для целевой страницы организации по продаже
земельных участков в Вологодской области ИП "Тихомиров" ориентировочно
выглядит так:
Мужчины и женщины, возраст которых от 25 до 50 лет, уровень
дохода от 40тыс. в месяц, имеющие среднее специальное, высшее образование,
жители Вологодской области или близлежащих областей, состоящие в длительных
отношениях, привыкшие искать информацию в сети, из социальных сетей
предпочитают VK, Facebook.
2.2
Разработка структуры сайта
Структура (от лат. structure
строение, расположение, порядок) это
совокупность устойчивых связей объекта, обеспечивающих его целостность и тождественность самому себе, таким
образом, сохранение основных свойств при различных внешних и внутренних
изменениях. Рассмотрим понятие "структура сайта" как каркас,
позволяющий организовать содержимое интернет-ресурса.
Рассмотрим возможные топологии сайтов:
Линейная структура.
Самая простая из рассматриваемых топологий. Страницы идут одна за
другой, как в слайд шоу. В линейной структуре нет разделения содержимого на уровни.
Рисунок 6 - Линейная структура сайта.
Достоинство данной структуры, это ее простота. Легка в реализации.
Но область ее применения четко ограничена.
Линейная структура с альтернативами и вариантами.
Основа такой структуры простое линейное размещение веб-страниц.
Под альтернативой здесь подразумевается выбор между двумя ответвлениями. Часто
используется для сбора информации о посетителях. Например, регистрация на сайте
какой либо фирмы. Все начинают со стартовой страницы, однако, потом частным
лицам предлагается одна форма регистрации, а для представителях коммерческих
структур другую, затем оба попадают после регистрации на одну и туже страницу.
Рисунок 7 - Линейная структура с альтернативами и вариантами.
Достоинством данной структуры является возможность контроля поведения
пользователей, направив их в определенное русло. Добавление интерактивности,
что может облегчить доступ к нужной им информации.
Линейная структура с ответвлениями.
Это также контролируемая структура, которая представляет собой
путь с тупиковыми ответвлениями.
Рисунок 8 - Линейная структура с ответвлениями.
Достоинство этой структуры - это возможность перехода к ней, от
простой линейной структуры. Такое случается, когда сайт не может потянуть
возросшие требования, а переработка невозможна по ряду причин. Используя эту
структуру можно "безболезненно" расширить проект.
Древовидная структура.
Наиболее универсальная структура, подходит для создания почти
любых проектов. Ее принцип заключается в том, что посетитель оказывается перед
выбором, куда идти дальше. После перехода в необходимый раздел, он переходит в
следующий подраздел и так далее.
Рисунок 9 - Древовидная структура.
У этой структуры имеется недостаток. В древовидной структуре очень
сложно соблюдать баланс между глубиной и шириной ветвлений. Если структура
получится слишком глубокой, то для того чтобы пользователю добраться до
интересующей информации придется много загрузить побочных страниц, что
непременно раздражает. А если будет слишком широкой, то придется долго выбирать
нужную ветвь.
Решетчатая структура.
Это самая сложная структура из рассмотренных. Страницы также
размещаются в отдельных ветках. Отличительная особенность, это возможность
продвижения по сайту не только вертикально, но и горизонтально. В основном такая структура
используется в каталогах.
Рисунок 10 - Решетчатая структура.
Применение решетчатой структуры в проектах, отличных от каталога,
нецелесообразно. Относительно сложная реализация, также работать с такой
структурой нужно осторожно, иначе она может получиться очень запутанной и
посетители будут долго блуждать в поиске необходимой информации.
Для наших целей подойдет следующая структура.
Рисунок 11 - Структура целевой страницы для организации ИП
"Тихомиров".
2.3
Разработка структуры базы данных
База данных (БД) - совокупность взаимосвязанных
структурированных данных, относящихся к конкретной предметной области.
Даже если в базе данных не содержится информации (пустая) она
все равно считается полноценной базой данных, так как она содержит информацию о
структуре базы данных. Методы внесения информации в базу данных определяет ее
структура.
Базы данных могут содержать различные объекты, самые основные
это таблицы. Самая простая база данных содержит хотя бы одну таблицу. В этом
случае структура базы данных это структура ее таблицы.
Структуру двумерной таблицы формируют столбцы и строки.
Аналогами в простейшей базе данных служат поля и записи. То есть, изменив
состав полей таблицы или их свойства, изменится и структура таблицы, базы
данных.
Поля базы данных определяют групповые свойства данных,
записываемых в ячейки, принадлежащие каждому из полей.
Для данного проекта база данных нужна только для хранения
контактной информации о потенциальных клиентах, которую мы получаем из формы
обратной связи. Для этого достаточно одной таблицы.
Рисунок 12 - Структура базы данных для целевой страницы.
2.4 Разработка
дизайна
Под дизайном понимается комплекс графических элементов,
шрифтов, цветов, реализованных на сайте.
Как следует разработанный дизайн - один из ключевых факторов,
определяющий посещаемость сайта. Отличительная черта хорошего дизайна - это
ненавязчивость, дизайн который не отвлекает от предоставленной целевой
информации. При разработке целевой страницы дизайн имеет особенное значение.
Целевая страница должна удерживать внимание посетителя на одном сообщении,
должна вызывать определенное целевое действие. Дизайн для целевой страницы -
важнейший инструмент для достижения этого самого целевого действия. В нашем
случае цель - это сбор контактных данных потенциальных клиентов.
Дизайн бывает шаблонным и уникальным. Шаблонный дизайн - это
некая заготовка дизайна сайта. Достоинство данного варианта - это дешевизна и
быстрота. Однако, на поиски подходящего шаблона может уйти уйма времени. Также
возникает проблема внесения функциональных и визуальных изменений, что
сокращает срок жизнь сайта. Уникальный дизайн - это дизайн, который адаптирован
под нужды компании. Основные достоинства - это шаг к созданию узнаваемого
бренда, сайт точно отвечает требованиям и эффективно решает поставленные
задачи, конверсия сайта выше. Недостаток уникального дизайна, относительная долгая
разработка.
Из-за определенной специфики предложения, а также для
получения большего опыта, выбираем уникальный дизайн.
Создание макета велось в Adobe Photoshop CS6, придерживаясь
следующих основных принципов.
Целевая страница - это одна страница, в прямом смысле слова,
это необходимо для более простого восприятия информации, повышения конверсии.
Контент должен содержать краткие, понятные призывы к действию. Делаем выбор в
пользу минимализма. Используем растровые изображения по минимуму с небольшим весом,
не более 1мб, для более быстрой "подгрузки" сайта. Текст делаем на
контрасте цветов, читаемым. Используем небольшое количество шрифтов.
Рисунок 13 - Разработка макета целевой страницы.
2.5
Разработка веб-сайта
На данном этапе необходимо реализовать все аспекты,
затронутые выше.
Для начала необходимо сверстать разработанный ранее PSD макет. Верстка сайта -
это формирование HTML кода, размещающего весь контент (изображения, текст и так далее)
в окне браузера согласно разработанному макету так, чтобы элементы дизайна
отображались аналогично макету.
Существует несколько подходов к верстке макетов. Первый из
них - табличный подход. Преимуществом такого способа является из-за самих
таблиц, как удобный инструмент для выравнивания блоков. Ячейки таблицы обладают
специальными настройками выравнивания, которые больше нигде не встречаются.
Главным недостатком табличного подхода является отрисовка таблицы. Браузеры
расценивают таблицу как один объект, из-за чего данные в таблице не
отображаются до тех пор, пока таблица не прогрузится полностью на локальный
компьютер. Также возникают проблемы при множественной вложенности таблиц, такие
как: возникновение ошибок при верстке, увеличение размеров документов и
снижение скорости закачки файлов. Данный подход нам не подходит.
Второй вариант - это блочная верстка. Такой подход
подразумевает повсеместное использование тега <div>, который описывается
в таблицах стилей CSS. Тег <div> это тег, создающий веб элемент - слой, к
которому применяется стилевое оформление. Слои можно размещать на веб-странице
путем наложения их друг на друга с точностью до пикселя. При этом соблюдаются
следующие принципы:
. Разделение содержимого и оформления.
. Активное применение тега <div>.
. Таблицы применяются только для отображения табличных
данных.
Также слои можно изменять динамически с помощью скриптов
(сценариев). Это позволяет реализовать на странице различные эффекты, например,
выпадающие меню, эффекты прокрутки, плавающие окна и прочее. Также слои отображаются
быстрее, чем таблицы. Скорость достигается за счет компактного кода и
отображения контента слоя по мере его загрузки.
Будем использовать блочную верстку.
Однако, данный способ не является панацеей. Стандарты работы
со слоями еще не определены до конца, браузеры могут по-разному реализовать
некоторые возможности. Поэтому основная сложность - это создать универсальный
код, который работает без ошибок во всех браузерах и при различных разрешениях
экранов.
Написание кода производим в редакторе Notepad++. Намеренно не
используется никаких CMS или фреймворков для получения большего опыта в
сайтостроении. Преимущество верстки стандартными средствами заключается в том,
что код получается более "чистым", а значит, быстрее загружается и
проще адаптируется под специфические нужды. Недостаток такой верстки
заключается в требовании значительно большего времени, чем использование
фреймворков.
Отладку производим в панели разработчика окна браузера GoogleChrome.
Рисунок 14 - Написание кода HTML и CSS.
Рисунок 15 - Отладка в панели разработчика.
Для реализации блока с расположением земельных участков на
карте воспользуемся API яндекс карт.
API Яндекс Карт - это программный интерфейс, с
помощью которого можно установить Яндекс. Карты и необходимый инструментарий
для работы с ними на своем сайте.
Конструктор карт обладает очень удобным, интуитивно понятным
интерфейсом. Инструменты конструктора позволяет разместить свои схемы проезда
до пункта назначения, ставить метки, и добавлять описание к ним.
Рисунок 16 - Конструктор карт.
После того, как все необходимые элементы расставлены,
добавлено описание, предоставляется ссылка на готовый скрипт.
Рисунок 17 - Ссылка на скрипт.
Интерактивная карта вставляется на страницу сайта с помощью
элемента <script>. С помощью атрибута src задаются параметры: идентификатор карты, ширина
и высота в пикселях.
Также имеется дополнительный параметр, который
"заливает" картой весь блок, в котором она расположена. Но с
ограничением 1300px.
Рисунок 18 - Блок с интерактивной картой.
Блок с фотогалереей реализован только средствами HTML и CSS. Использован параметр hover, срабатывающий при
наведении мышкой.
Рисунок 19 - Описание галереи средствами CSS.
Результат выглядит так:
Рисунок 20 - Блок с фотогалереей.
Форма обратной связи реализована с помощью элементов <input>,<select>,<button>.
Рисунок 21 - Форма обратной связи.
Для реализации спроектированной базы данных воспользуемся OpenServer, а именно, модулем PHPMyAdmin. Это веб-приложение,
написанное на PHP и представляющее собой интерфейс для администрирования СУБД.
Рисунок 22 - Реализация базы данных, средствами PHPMyAdmin.
Код для подключения базы данных к сайту, обработчик формы для
клиенте и для сервера расположены в приложении.
3.
Тестирование
Тестирование является завершающим этапом разработки сайта. Он
же и важнейший из этапов.
Согласно с IEEE Std 829-1983 тестирование - это процесс анализа ПО,
направленный на выявление отличий между его реально существующими и требуемыми
свойствами (дефект) и на оценку свойств ПО.
Для организации тестирования существует специально
разработанная методика, в соответствии с которой осуществляется проверка.
Рассмотрим тестирование сайта по пунктам:
. Подготовительные работы. Тестировщику выдается все
материалы по сайту (анализирует функционал по техническому заданию,
ознакомляется с конечными макетами сайта и строит план дальнейшего
тестирования).
. Функциональное тестирование. Один из самых долгих проверок
ресурса. В данный этап входит:
· проверка
работы всех функций сайта
· тестирование
пользовательских форм на сайте
· проверка
гиперссылок
· проверка на соответствие контента страниц
сайта, с требуемым контентом заказчика
3. Тестирование верстки. При выполнении этапа проверки верстки,
тестировщик сверяет расположение элементов на сайте с расположением элементов
на макете. Проверяет оптимизацию изображений и графики по размеру и весу. Также
на данном этапе производится проверка сайта на кроссбраузерность и
масштабируемость.
. Тестирование производительности. Проводится для определения
быстродействия сайта под определенной нагрузкой. Данный этап подразделяют на
нагрузочное тестирование и тестирование быстродействия. При нагрузочном
тестировании оценивается поведение сайта под определенной нагрузкой. Такой тип
тестирования определяет время отклика всех важных бизнес-функций. При
тестировании быстродействия проверяется скорость загрузки сайта. Определяется
скорость отработки скриптов, загрузки контента и изображений. Данный тест проводится
для оптимизации процесса загрузки сайта, и нахождения оптимальных настроек
сервера.
В результате тестирования неработающих ссылок не обнаружено.
При типовых запросах базы данных отклик менее 0,1 секунды.
Средняя скорость загрузки сайта при низкоскоростном мобильном
интернете составила около 2-3 секунд.
Сайт корректно отображается в популярных браузерах, таких как
GoogleChrome, Opera, Mozilla, YandexBrowser.
При масштабировании элементы сайта "не
расползаются". На сайте установлена минимальная ширина 960 пикселей, этого
достаточно для корректного отображения на большинстве мониторов стационарных
компьютеров и ноутбуков. На мобильных устройствах и планшетах необходимо
отмасштабировать двойным нажатием на экран.
4. Внедрение
web-сайта
После того, как сайт разработан и прошел тестирование на
локальном сервере, пришло время портирования его в интернет.
Для начала необходимо выбрать доменное имя для сайта и
проверить, свободен ли он.
Чтобы зарегистрировать доменное имя, воспользуемся сервисом mnogodomenov. biz. Сначала пройдем
регистрацию аккаунта и настройку профиля.
Затем стоит задача выбора хостинга. Сейчас на данном рынке
большая конкуренция, множество компаний со своими особенностями. При
соотношении цена - качество я остановил выбор на Blitz-Host.com. После оплаты тарифа
получаем письмо с информацией о логине и пароле фтп сервера и названия dns серверов хостинга.
Теперь можно приступить к регистрации домена.
Рисунок 22 - Регистрация домена.
Затем необходимо указать dns хостинга.
Рисунок 23 - Регистрация домена.
После оплаты тарифа нужно подождать какое-то время
регистрации домена в глобальном dns.
После того как домен зарегистрирован, необходимо портировать
файлы и базу данных с локального сервера на фтп - сервер хостинга.
Для этого воспользуемся сервисом хостинга c-panel.
Рисунок 24 - Интерфейс c-panel.
Все содержимое папки сайта на локальном сервере добавляем в
архив public_html. Через диспетчер файлов c-panel загружаем на сервер и распаковываем.
Теперь необходимо наладить работу базы данных. Для этого
необходимо следующее. Выгрузить базу данных с локального сервера через модуль phpmyadmin openserver. Затем в c-panel нужно создать базу данных,
а так же пользователя базы данных и пароль.
Рисунок 25 - Создание базы данных в c-panel.
Рисунок 26 - Создание пользователя базы данных в c-panel.
После того как база данных, создана нужно внести изменения в
документ с помощью которого подключаемся к базе. Для этого переходим в
текстовый редактор c-panel и изменяем имя базы и логин с паролем.
Рисунок 27 - Редактор кода c-panel.
Готово, сайт размещен во всемирной паутине. Затем необходимо
протестировать основные функции сайта, а также работоспособность форм.
Рисунок 28 - Проверка работоспособности форм обратной связи.
Все формы работают корректно, содержимое также записывается
корректно.
5. Защита
web-сайта
Для устойчивой работы веб-проекта необходимо заострить
внимание в вопросах защиты и безопасности сайта. С каждым днем интернет
становится все "опаснее" из-за большей доступности средств для взлома
и проведения атак.
Незащищенный ресурс - легкая добыча для взломщиков. При
взломе могут быть размещены вредоносные ссылки, баннеры, кража информации из
баз данных и прочее.
Любой сайт может быть целью взлома.
Главная защита лендинга - это его простота. Такой сайт
практически неуязвим от ддос атак.
Так как у нас в проекте присутствует база данных, позаботимся
о ее защите от sql-инъекций.
sql-инъекция - это атака, когда взломщик использует
поле web формы или параметры URL строки с целью получения и манипулирования данными,
находящимися в базе данных.
Для защиты от такого рода атак добавим в файл, отвечающий за
подключение к базе данным, функцию escape_db. Это функция экранирует все поступающие в нее
данные.
Также примем меры для защиты от множества отправок заполненных
форм, чтобы не "засорялась" база данных. Подключив во все формы сайта
модуль с каптчей.
Заключение
В ходе выполнения выпускной квалификационной работы была
реализована целевая страница для организации по продаже недвижимости ИП
"Тихомиров".
В процессе исследования были определены особенности
Интернет-пространства, обозначены основные функции и задачи сайта.
В качестве практического материала была определена и
реализована структура сайта, структура базы данных. Разработан уникальный
дизайн. Сверстана и отлажена целевая страница.
Реализована интерактивная подача информации.
Пользователи сайта смогут ознакомиться с рекламным
предложением по продаже земельных участков, оставить свои контактные данные.
Разработанный сайт отвечает всем требованиям заказчика.
Список
используемых источников
1. Дронов,
В.Г. PHP, MySQL, HTML5 и CSS 3. Разработка современных динамических Web-сайтов,
2016/Дронов, В. Г - Санкт-Петербург: БХВ-Петербург, 2016. - 688с.
2. Алиев
В.С. Информационные технологии и системы финансового менеджмента: учебное
пособие / В.С. Алиев - М: Форум, 2010. - 320 с.
. Васильев
Г.А., Поляков В.А. Основы рекламы: Учебное пособие. / М.: ИНФРА-М, 2010. - 407
с.
. ГОСТ
Р ИСО МЭК 12207-99 "Процессы жизненного цикла программных средств".
. Колисниченко,
Д.Н. Современный сайт на РНР и JavaScript / Колисниченко, Д.Н. -
Санкт-Петербург: Питер, 2009. - 176 с.
. Дженнифер
Нидерст Роббинс, Web-дизайн. Справочник / КУДИЦ-Пресс, 2008. - 816 с.
7. Якоб Нильсен, Хоа
Лоранжер. Web-дизайн: удобство использования Web-сайтов / Вильямс
<http://www.ozon.ru/brand/856490/>, 2009. - 376 с.
. Эрик А. Мейер. CSS.
Каскадные таблицы стилей. Подробное руководство / Символ-Плюс, 2008. - 576 с.
. Беэр Бибо
<http://www.ozon.ru/person/3646914/>, Иегуда Кац
<http://www.ozon.ru/person/4239190/>. jQuery. Подробное руководство по
продвинутому JavaScript / Символ-Плюс, 2011. - 624 с.
. Брюс Лоусон
<http://www.ozon.ru/person/5820406/>, Реми Шарп
<http://www.ozon.ru/person/5820411/>. Изучаем HTML5. Библиотека
специалиста / Питер, 2012. - 304 с.
. Alexdev блог,
посвященный web - программированию и разработке сайтов. [Электронный ресурс] -
URL: alexdev.ru/1025/
. Маркетинг -
PowerBranding.ru. [Электронный ресурс] - URL:
. <http://powerbranding.ru/potrebitel/celevaya-auditoriya/>
. Блог Конверт Монстра
- суровый интернет маркетинг [Электронный ресурс] - URL:
<http://convertmonster.ru/blog/marketing-blog/celevaja-auditorija-sajta/>
. Htmlbook.ru Для тех,
кто делает сайты [Электронный ресурс] - URL: htmlbook.ru
. Русская сеть.
Информационный портал о программировании [Электронный ресурс] - URL:
<http://www.ruweb.ru/toclients/functions.shtml>
. PHP: Hypertext
Preprocessor [Электронный ресурс] - URL: http://php.net/
18. Free
vectors, photos and PSD downloads [Электронный ресурс] - URL: <http://www.freepik.com/>
19. Блог о создании
лейдинг пейдж [Электронный ресурс] - URL: http://smartlanding. biz/
<http://smartlanding.biz/>
. Видео-уроки по
созданию сайта для бизнеса [Электронный ресурс] - URL:
<http://ruseller.com/>
. Создай свой сайт
[Электронный ресурс] - URL: http://www.sitehere.ru/
Приложения
Приложение 1
Обработчик формы на клиенте.
$ (function () {$forms = $ (".
js-forms");
$forms. submit (function () {$form = $ (this);
$. ajax ({: $form. attr ("action"),:
$form. serialize (),: $form. attr ("method"),: function (data) {
$ (' [name="captcha"] '). val
("");
$ (' [type="captcha"] '). attr ('src',
"/captcha. php? nocache=" + (+ (new Date ())));(data. error) {. alert
(data. message);
} else {. alert (data. message);. location. href
= "/";
}
},: function () {. alert ("Ошибка
запроса!");
}
});false;
});
});
$ (function () {
$ ("img [type='captcha'] "). click
(function () {img = $ (this),= + (new Date ());. attr ('src', "/captcha.
php? nocache=" + nocache);
})
. attr ('title', "Обновить защитный код!")
. css ('cursor', 'pointer');
});
Обработчик формы на сервере (главная страница)
<? php_start ();_once (__DIR__. "/bd.
php");_once (__DIR__. "/captcha/index.
php");("content-type: application/json");
$data = [
"error" => true,
"message" => "Ошибка",
];(! captcha_check ()) {
$data ["message"] = "Каптча
введена неверно!";json_encode ($data);(0);
}(empty ($_POST ['user'])) {
$data ["message"] = "Вы не
заполнили поле - ИМЯ!";json_encode ($data);(0);
}(empty ($_POST ['phone'])) {
$data ["message"] = "Вы не заполнили поле -
ТЕЛЕФОН!";
echo json_encode ($data);(0);
}
$sql = "INSERT INTO `reg_form` SET name
=". escape_db ($_POST ["user"]);
$sql. =", phone =". escape_db ($_POST
["phone"]);
$mysqli->query ($sql);
$data ["error"] = false;
$data ["message"] = "Форма успешно отправлена!";
echo json_encode ($data);(0);
Обработчик формы на сервере (форма обратной связи)
<? php_start ();_once (__DIR__. "/bd.
php");_once (__DIR__. "/captcha/index.
php");("content-type: application/json");
$data = [
"error" => true,
"message" => "Ошибка",
];(! captcha_check ()) {
$data ["message"] = "Каптча
введена неверно!";json_encode ($data);(0);
}(empty ($_POST ['name'])) {
$data ["message"] = "Вы не
заполнили поле - ИМЯ!";json_encode ($data);(0);
}(empty ($_POST ['surname'])) {
$data ["message"] = "Вы не заполнили поле -
ФАМИЛИЯ!";
echo json_encode ($data);(0);
}(empty ($_POST ['fathername'])) {
$data ["message"] = "Вы не
заполнили поле - ОТЧЕСТВО!";json_encode ($data);(0);
}
if (empty ($_POST ['phone'])) {
$data ["message"] = "Вы не заполнили поле -
ТЕЛЕФОН!";
echo json_encode ($data);(0);
}
if (empty ($_POST ['zone'])) {
$data ["message"] = "Вы не заполнили поле -
УЧАСТОК!";
echo json_encode ($data);(0);
}
$sql = "INSERT INTO `form` SET name =".
escape_db ($_POST ["name"]);
$sql. =", surname =". escape_db ($_POST
["surname"]);
$sql. =", fathername =". escape_db
($_POST ["fathername"]);
$sql. =", phone =". escape_db ($_POST
["phone"]);
$sql. =", zone =". escape_db ($_POST
["zone"]);
$mysqli->query ($sql);
$data ["error"] = false;
$data ["message"] = "Форма успешно
отправлена!";json_encode ($data);(0);
Функция генерации каптчи
<? php
require_once (__DIR__. "/captcha/index. php");_start
();
$string = "";($i = 0; $i < 5; $i++)
$string. = chr (rand (97, 122));_set_code
($string);
$dir = __DIR__.
"/assets/common/fonts/";
$image = imagecreatetruecolor (230, 60);
$black = imagecolorallocate ($image, 10, 110, 0);
$white = imagecolorallocate ($image, 255, 255,
255);
$color = imagecolorallocate ($image, 86,
18,2);($image, 0, 0, 399, 99, $white);
$string = implode ("", str_split
($string));($image, 24, 0, 30, 40, $color, $dir. "MyriadPro-Bold.
otf", $string);
// наносим линии($i = 0; $i < 8; $i += 1) {
$y = rand (0, 60);($image, 0, $y, 250, $y,
$white);
}("Content-type: image/png"); ($image);
Функция для подключения к базе данных
<? php
$dblocation = "localhost"; // Имя сервера
$dbuser = "root"; // Имя пользователя
$dbpasswd = ""; // Пароль
$dbname = "reg_bd";
$mysqli = new mysqli ($dblocation, $dbuser,
$dbpassword, $dbname);($mysqli->connect_errno) {("Ошибка
подключения!");
}escape_db ($value) {$mysqli;"'".
$mysqli->real_escape_string ($value). "'";
}