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

Основной элемент - ТЕГ (дискриптор), он всегда находится между скобками <>, его синаксис:

<ТЕГ атрибут 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 - Структура базы данных для целевой страницы.