Автоматизация работы фотосалона

 

 

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

 

 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1 – логотип; 2 – социальные кнопки; 3 – основная навигация;

4 -  слайд-шоу галерея; 5 – дополнительная навигация

 

Рисунок 3.4. Макет главной  страницы сайта

 

Страница сайта условно разбита на три части: «шапку», основную часть и «подвал».

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

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

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

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

 

 

3.3 Разработка дизайна web-страниц сайта

 

 

Графический макет сайта создан с помощью растрового редактора Adobe Photoshop.

Составим план создания нашего графического макета.

1  Компоновка блоков: вверху - «шапка» сайта,  состоящая из логотипа, кнопок навигации и социальных сетей, ниже - содержательная часть, внизу - «подвал» сайта.

2  Тип верстки: «жесткая», минимальное разрешение - 1280x768.

3  Цветовая гамма: белый, коричневый, черный.

4  Шрифт: Tahoma.

Первым делом создаем заготовку размером 1260×768 (при разработке макета из ширины в 1260 вычитается размер полосы прокрутки в Microsoft Internet Explorer, как правило, 20 пикселов). Основной слой  заливаем черным цветом и делаем неподвижный фон.  Выбираем инструмент прямоугольник, выделяем половину слоя и заливаем его градиентом.

В программе Adobe Photoshop делаем логотип фотосалона.

Создаем изображение размеров 234×110 пикселей, цвет фона оставляем прозрачным. Берем готовое изображение фотоаппарата, располагаем, его справа изображения. Слева добавляем текст: «Фотосалон» (шрифт: Fira Sans, размер шрифта: 50 пунктов, цвет шрифта: #ffffff); «Учкудук» (шрифт: Leokadia Deco, размер шрифта: 30 пунктов, цвет шрифта: #ffffff). Готовое изображение с логотипом фотосалона показано на рисунке 3.5.

 

 

Рисунок 3.5. Изображение логотипа фотосалона

 

Логотип сохраняем в формате Png. Рисуем «шапку сайта» высотой 131 пиксель. Слева добавляем изображение логотипа. Рисуем меню навигации и располагаем его на «шапке» справа, над меню помещаем кнопки социальных сетей (рисунок 3.6).

 

 

Рисунок 3.65. «Шапка» сайта

 

Добавляем «подвал» сайта, в котором будет располагаться дополнительная навигация и информация об авторском праве (рисунок 3.7).

 

 

Рисунок  3.7. Подвал сайта

 

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

 

 

Рисунок  3.8. Готовый графический макет сайта

3.4 Компоновка макета web-страницы

 

 

Под компоновкой макета принято понимать условное (схематическое) расположение блоков информации на будущем Web-сайте.

Существуют следующие наиболее распространенные компоновки web-страниц (рисунок 3.9) в соответствии с расположением навигационной панели: левосторонняя (правосторонняя); с верхним расположением навигации; комбинированная.

 

Левосторонняя компоновка	Верхнее позиционирование	Комбинированная компоновка

 

Рисунок 3.9.  Виды компоновок web-страниц

 

Всего можно выделить четыре блока информации.  Рассмотрим каждый из них:

1 «шапка» — занимает верхнюю  часть сайта в окне браузера (как правило, не больше 1/4 видимой  части экрана без прокрутки) и  может содержать:

• логотип;
• слоганы, лозунги, девизы;
• рекламную информацию (баннеры и текстовые блоки) и др.;

2  меню навигации — оно  может быть вертикальным, горизонтальным, содержать подменю и т. д. и т. п.;

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

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

Он может содержать:

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

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

При создании веб-сайта в редакторе Adobe Dreamweaver  была выбрана технология создания страниц на основе блочной модели, а именно жесткая HTML & CSS верстка блоками.

В блочной модели элементами веб-страницы являются блоки, это прямоугольные контейнеры определяемые в html тегом <div>.

Блок (div) - это как бы один из множества кирпичей или блоков из которых состоит html документ. Причем каждый блок может иметь разные размеры, а также положение на веб странице.

Для фиксирования блоков на странице использовали  следующие атрибуты css-стилей: margin, padding, float, clear.

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

Для задания элементам <div> нужной высоты, ширины, выравнивания,  цвета и особенностей границ, изменения содержимого блока применяли css-стили.

Остальные страницы сайта были сделаны на основе уже спроектированной путем ее копирования и вставки (рисунок  3.10).

 

 

Рисунок 3.10. Компоновка блоков web-сайта фотосалона «Учкудук»

 

3.5 Построение инфологической модели предметной области

 

 

Инфологическая модель предметной области - это описание предметной области, выполненное с использованием специальных языковых средств, не зависящих от использования в дальнейшем программных средств. Требования к инфологической модели:

- адекватность отображения предметной  области;

- непротиворечивость;

- отражение потребности всех пользователей будущей информационной системы;

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

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

- легкость восприятия разными  категориями пользователей.

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

Для описания инфологической модели данных выделим восемь объектов, которые участвуют в обработке информации: «Новости», «Блог», «Обратная связь», «Категории портфолио», «Портфолио», «Статистика», «Услуги», «Пользователи». Каждый объект обладает своими свойствами.

Объект «Новости» включает в себя информацию о новостях фотосалона. Он обладает свойствами: Код, Дата создания, Заголовок, Автор, Краткий текст новости, Полный текст новости, Изображение, Заблокировать.

Объект «Блог» включает в себя данные о статьях сотрудников фотосалона, которые размещаются на клиентской части сайта. Он обладает свойствами: Код, Дата создания, Заголовок, Автор, Краткий текст новости, Полный текст новости, Изображение, Заблокировать.

Объект «Обратная связь» содержит данные о сообщениях предназначенные администрации сайта. Он обладает свойствами: Код, Дата создания, Имя отправителя, Адрес почты, Сообщение.

Объект «Услуги» хранит информацию об услугах, предоставляемых фотосалоном. Он обладает свойствами: Код, Заголовок, Описание, Изображение, Заблокировать.

Объект «Статистика» предназначен для сбора статистики сайта. Он обладает свойствами: IP –адрес, количество показов/посещений.

Объект «Пользователи» хранит информацию о пользователях, которым разрешен доступ к консоли администратора. Он обладает свойствами: Код, Тип пользователя, Дата создания, Дата последнего логина, Логин, Пароль, ФИО.

Объект «Категория портфолио» содержит информацию о категориях, на которые разделены изображения портфолио. Он обладает свойствами: Код, Раздел.

Объект «Портфолио» хранит информацию об описании и ссылках на изображения портфолио.  Все фотографии хранятся в файловой системе. Он обладает свойствами: Код, Код категории портфолио, Ссылка, Описание.

Объекты  «Категория портфолио»  и «Портфолио» связаны между собой связью «Один-ко-многим» через поля «Категория портфолио»: «Код» - «Портфолио»: «Код категории портфолио».

Объекты  «Пользователи»  и «Блог» связаны между собой связью «Один-ко-многим» через поля «Пользователи»: «Код» – «Блог»: «Автор».

Объекты  «Пользователи»  и «Новости» связаны между собой связью «Один-ко-многим» через поля «Пользователи»: «Код» – «Новости»: «Автор».

Объекты  «Услуги», «Статистика», «Обратная связь» не связаны между собой и с другими объектами.

 

 

3.6 Построение даталогической модели  предметной области

 

 

На основании анализа предметной области и построенной инфологической модели разработана реляционная база данных «Photo» (рисунок 3.12).  Для реляционной базы данных проектирование физической структуры заключается в том, чтобы разбить всю информацию по таблицам, а также определить состав полей для каждой из этих таблиц и установить связи между таблицами.

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

 

 

Рисунок 3.12.  Просмотр таблиц базы данных «Photo» с использованием программы phpMyAdmin

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок 3.11. Инфологическая модель предметной области

 

Таблица «Users», в ней хранится информация о пользователях администраторской части, зарегистрированных в системе. Таблица содержит поля - login - идентифицирующее пользователя при входе в систему. password - пароль для доступа к сайту. Пароль кодируется шифром md5, алгоритм которого реализован в языке PHP. Кодирование позволяет защитить пароль от просмотра заинтересованными пользователями. По этим двум параметрам осуществляется вход в систему. Поле fio – фамилия, имя, отчество пользователя (таблица 3.2).

 

Таблица 3.2

Структура таблицы  «Users»

№ п/п	Поле	Тип данных	Дополнительные параметры
1	2	3	4
1	id	int(11)	Ключевое UNIQUE, auto_increment
2	type	enum ('Admin', 'Moderator')	NOT NULL
3	created	datetime	NOT NULL
4	last_login	datetime	NOT NULL
5	name	text	NOT NULL
6	password	text	NOT NULL
7	login	text	NOT NULL