Материал: Разработка web-сайта для организации по продаже недвижимости

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 с.