Выводы
1. Произведен сбор и анализ предметной области сайта и выдвинуты основные требования к нему.
2. Сформулированы критерии оценки сайта, такие как дизайн, согласованность, функциональность и прочие, на основе которых был произведен анализ сайтов, совпадающих по теме с разрабатываемым продуктом, а именно сайтов интернет-магазинов детских игрушек. Были описаны найденные достоинства и недостатки.
3. Проанализированы существующие программы для разработки web-сайтов, их версии, преимущества и недостатки, на основе которых была выбрана программа CMS Joomla.
2. Проектирование и разработка программного продукта
Разрабатываемый информационный web-сайт имеет архитектуру многоуровневой информационной системы. Для описания данной архитектуры следует четко распределить обязанности всех ее компонентов и изучить методы их взаимодействия.
Архитектура данного ПП была разбита на 3 уровня (представление, логика, хранение):
· уровень представления предназначен для организации клиентского интерфейса;
· на уровне логики размещены компоненты, обеспечивающие обработку данных в соответствии с логикой системы;
· уровень хранения, обеспечивает сохранение информации.
Подсистемы данного уровня обеспечивают взаимодействие пользователей с информационной системой web-представительства. На данном уровне web-сайт предоставляет необходимую информацию.
Web-сайт связан с базой данных в которой хранится вся информация, находящаяся на сайте. При модернизации web-сайта предполагается внести дополнение в виде нескольких web-страниц, для корректной работы web-сайта и для предоставления удобного интерфейса [6].
2.1 Проектирование структуры web-сайта
Выбор правильной структуры для web-сайта сводится к выбору способа представления информации в виде совокупности страниц (информационной структуры). Выбор правильной структуры для сайта является комплексной задачей, и на него может оказывать влияние множество факторов. Например, сами данные могут предполагать определенный способ организации. Этот способ необходимо рассматривать как подход снизу вверх.
Другой способ, позволяющий принять во внимание организацию информации, в большей степени является подходом сверху вниз и основан на том, как данные будут использоваться. Этот подход предоставляет приоритет тем, кто пользуется web-сайтом, и тому, как данные обеспечиваются и потребляются [7, 8].
Правильный информационный дизайн является залогом создания успешного Web-сайта. Если сайт имеет замечательное содержание и превосходный интерфейс, но скверную информационную архитектуру, он может быть сравнительно безуспешным. Сайт теряет свою эффективность, если пользователь не может легко найти нужную информацию.
Ключевой момент в структуре web-сайта - это возможность сделать ориентацию на сайте более простой для пользователя. Любая выбранная для сайта структура должна помогать пользователям ориентироваться и увеличивать вероятность достижения успеха в решении стоящих перед ними задач.
Именно поэтому корневой страницей разрабатываемого web-сайта будет являться Главная страница (index.php), причем навигация по сайту будет возможна с любой страницы, с помощью ссылок [9].
Структура web-сайта представлена на рис. 2.1.1.
Рассмотрим содержание основных страниц web-сайта.
Главная страница. Самая первая страница, которую видит пользователь, вошедший на сайт. Помимо приветствия, здесь находиться краткая информация о сайте, зачем он собственно создавался, какие услуги он предоставляет и прочее. Главная страница является корневой, и с нее можно попасть в любой из разделов сайта. Так как страница подключена к Интернет - серверу то оставлять ее пустой, было бы просто не выгодно. Поэтому, на главной странице, также находятся блоки для голосования и организация заказа (корзина).
О компании: вся информация рекламного характера о работе магазина.
Контакты: информация об адресах, телефонах, e-mail, номер ICQ консультации. А также часы торговых точек.
Логические игры: перечень логических игр, имеющихся в продаже, цены, краткое описание.
Все для школы: перечень канцелярских товаров, имеющихся в продаже, цены, краткое описание.
Все для игры на улице: перечень игрушек предназначенных для уличной игры, имеющихся в продаже, цены, краткое описание.
Детский транспорт: перечень детского транспорта (велосипеды, детские машинки и т.д.), имеющихся в продаже, цены, краткое описание.
Спортивные товары: перечень спортивных товаров, имеющихся в продаже, цены, краткое описание.
Развивающие игрушки: перечень развивающих игрушек, имеющихся в продаже, цены, краткое описание.
Голосование: перечень вопросов, на которые пользователь может ответить, касающихся предпочтений клиентов или выборе того или иного товара. Анализируя полученные в ходе голосования данные, индивидуальный предприниматель может более эффективно в дальнейшем организовать свою деятельность.
Корзина: возможность сделать заказ, на приобретение того или иного товара.
2.2 Программно-аппаратная платформа
Сегодняшний рынок программного обеспечения предъявляет большие требования к создаваемым проектам. Так для современных программных средств важными требованиями являются переносимость, мультиплатформенность и масштабируемость.
Под переносимостью подразумевается возможность использовать программное средство на разных программно-аппаратных платформах без существенной переработки кода.
Масштабируемость - это возможность в дальнейшем добавления новых модулей без существенной переработки кода.
Поэтому при разработке учитывались оба этих требования. Естественно, создать достаточно сложное ПО, которое работало бы на всех известных платформах, практически невозможно, но следует стремиться обеспечить его функциональность хотя бы на самых распространенных [10].
Исходя из того, что платформа IBM PC является наиболее распространенной в России, было принято решение разрабатывать ПП именно под эту аппаратную платформу. Проанализировав системное программное обеспечение IBM PC-совместимой компьютерной техники, были получены следующие результаты: 75% - OS семейства Windows, 15% - Linux, 10% - Free BSD, Open BSD, SCO, Mac OS X, Novell NetWare и т.д [15]. Исходя из этих результатов, а так же из соображения, что программное обеспечение должно функционировать на как можно большем количестве платформ, было принято решение разрабатывать ПС с таким расчетом, чтобы обеспечить функционирование, на двух основных программных платформах: Windows и Linux.
2.3 Выбор среды разработки для основных модулей проекта и выбор web-сервера
При разработке сайта следует учесть, что сервер должен обеспечивать доступ к базе данных и быть достаточно производительным для обеспечения работы с несколькими пользователями. Клиент должен иметь удобный и привычный для него интерфейс. Причем, как клиент, так и сервер должны обеспечивать между собой надежное и защищенное соединение. При этих требованиях самыми очевидными являются два подхода. Первый предполагает написание отдельных приложений сервера и клиента на каком-либо языке программирования. Но при этом подходе может возникнуть следующая проблема: при серьезном изменении структуры серверной части может потребоваться и серьезная переделка клиента, что не всегда бывает удобно. Поэтому при разработке web-сайта использовался язык PHP, что позволяет организовать развитый пользовательский интерфейс. В качестве сервера выступает web-сервер с набором скриптов CGI, реализующий логику приложения и связь данных, хранящихся на сервере баз данных с пользовательским интерфейсом. Такой выбор дает следующие преимущества:
· не требуется устанавливать дополнительное клиентское программное обеспечение, так как при запросе клиента к данному web-сайту на сервер посылается PHP запрос, который там же и обрабатывается, после чего переводится в HTML код и пересылается клиенту, посылавшему запрос;
· среднему пользователю не требуется дополнительного обучения для работы с клиентской частью, так как обычно хватает начальных навыков по работе с web-браузером и навигации по WWW;
· для пользователя системы имеется возможность выбирать тот web-браузер, к которому он привык;
· современные версии web-браузеров поддерживают защищенные протоколы обмена данными. Это позволяет быстро и эффективно разрешить проблему безопасной передачи информации без дополнительного кодирования клиента;
· фактически, разработка сводится только к созданию сервера. При добавлении или изменении функций сервера не требуется модификация кода клиента, что существенно упрощает процесс модернизации и наиболее полно отвечает модульному принципу построения программы [11, 12].
Существует несколько видов реализации серверной части приложения на основе web-сервера: серверный модуль, CGI-приложение, среды предварительной обработки страниц, встраиваемые приложения. Основное их назначение - организовать интерактивное взаимодействие с пользователем на основе динамического гипертекста (DHTML). Выбор конкретного метода обуславливается различными факторами, в частности, при разработке проекта нами были выдвинуты следующие требования к серверу:
· мультиплатформенность и переносимость программного кода (как и ко всему комплексу в целом) - серверное ядро должно без особых проблем и без изменения исходного кода функционировать как на различных системных платформах (Windows, Linux), так и web-серверах (IIS, Aphache);
· высокая производительность;
· обеспечение защищенного соединения с клиентом [13, 14].
После анализа средств разработки мы пришли к выводу, что вышеперечисленным требованиям сервер будет удовлетворять, если в качестве платформ для разработки выбрать PHP.
PHP (PHP: Hypertext Preprocessor) - один из самых мощных скриптовых языков, доступных на рынке. Он позволяет легко писать скрипты прямо в HTML файлах, и его код будет выполнен транслятором (PHP) на сервере до того, как эта страница будет послана в браузер. PHP аналогичен концепции Netscapes LiveWire Pro или Microsofts ASP (Active Server Pages) но, PHP лучше обоих продуктов. Многое из его синтаксиса было позаимствовано из C, Java и Perl с добавлением некоторых уникальных особенностей. Главной целью языка является предоставление web-разработчикам возможности быстрого создания динамически генерируемых страниц [15, 16].
Для разметки гипертекстовых документов был выбран специальный язык HTML (Hyper Text Markup Language).
Спецификацией HTML предполагается, что размечаемый документ структурно делится на две части: "голову" (head) и "тело" (body). В "голове" документа указывается информация о документе, например, название, краткая аннотация, сведения об авторе и т.п. Содержимое этого раздела HTML-файла не отображается Web-клиентом вместе с основным текстом, а может быть доступно лишь частично и по требованию пользователя. В "теле" файла содержится основной текст документа вместе с разметкой, управляющей внешним представлением [17].
Принцип разметки с помощью HTML основан на использовании особых конструкций - тегов. В HTML тег (tag, признак) - специальное слово, заключенное в угловые скобки. Теги связываются с определенным фрагментом документа и указывают способ внешнего представления содержания этих фрагментов и их интерпретации Web-клиентом [18].
В качестве основного web-сервера для разработки ПП был выбран web-сервер Apache.
Apache является кроссплатформенным ПО, поддерживает операционные системы Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS.
Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках.
Для реализации базы данных сайта был выбрал MySQL. MySQL - компактный многопоточный сервер баз данных. MySQL портирована на большое количество платформ.
Положительные стороны пакета MySQL:
· многопоточность, поддержка нескольких одновременных запросов;
· оптимизация связей с присоединением многих данных за один проход;
· записи фиксированной и переменной длины;
· ODBC драйвер в комплекте с исходником;
· гибкая система привилегий и паролей;
· до 16 ключей в таблице, каждый ключ может иметь до 15 полей;
· поддержка ключевых полей и специальных полей в операторе CREATE;
· поддержка чисел длинной от 1 до 4 байт (ints, float, double, fixed), строк переменной длины и меток времени;
· интерфейс с языками C и perl;
· основанная на потоках, быстрая система памяти;
· утилита проверки и ремонта таблицы (isamchk);
· данные хранятся в формате ISO8859_1;
· операции работы со строками не обращают внимания на регистр символов в обрабатываемых строках;
· псевдонимы применимы как к таблицам, так и к отдельным колонкам в таблице;
· все поля имеют значение по умолчанию. INSERT можно использовать на любом подмножестве полей;
· легкость управления таблицей, включая добавление и удаление ключей и полей [19, 20].
Проанализировав выше написанное, в качестве основного средства разработки был выбран пакет программ Denwer, так как он включает в себя все нужные программы и автоматически их настраивает, это намного упрощает работу и экономит время. Denwer включает в себя:
1. Веб-сервер Apache с поддержкой SSI, SSL, mod_rewrite, mod_php.
2. Интерпретатор PHP с поддержкой GD, MySQL, SQLite.
3. СУБД MySQL с поддержкой транзакций (mysqld-max).
4. Система управления виртуальными хостами, основанная на шаблонах.
5. Система управления запуском и завершением.
6. Панель phpMyAdmin для администрирования СУБД.
7. Ядро интерпретатора Perl без стандартных библиотек (поставляются отдельно).
8. Эмулятор sendmail и сервера SMTP с поддержкой работы совместно с PHP, Perl, Parser и др.
9. Установщик [21].
Чтобы ускорить процесс разработки была выбрана система управления содержимым Joomla 1.5., написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL.
CMS Joomla! включает в себя различные инструменты для изготовления веб-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге.
2.4 Графическое оформление страниц
При оформлении сайта, необходимо учитывать множество незначительных факторов, в целом создающих стиль сайта и его привлекательность для пользователей. Во-первых, цветовую палитру. Цветовое решение является одной из наиболее интересных и важных проблем на пути создания сайта. Здесь огромную роль играет человеческое восприятие цвета. Вот всего лишь небольшой список выводов, производимых под воздействием цвета:
· восприятие сайта в целом;
· человеческое состояние (психологическое и физиологическое);
· читабельность информации;
· форма объектов;
· видимость мелких деталей.
Человек способен различать около десяти миллионов цветовых оттенков. Всем известно, что цвет влияет на настроение, на самочувствие, что некоторые нюансы способны притянуть или отвергнуть то, что наделено определенным цветом. Иногда это воздействие явное, а иногда не имеет рационального объяснения. Поэтому учет и использование цветового воздействия при поиске цветового решения для сайта необходимо.
При этом нужно учитывать следующие моменты:
· особенности стиля, на основании которых разработан сайт;
· физиологические и психологические особенности пользователей;
· фирменный стиль.
Сайт всегда направлен на определенную аудиторию. А у каждой аудитории есть свои предпочтения. Аудиторию можно классифицировать по многим признакам. Например, предпочтительное отношение к определенным цветам заметно проявляется в разных возрастных категориях. Для детей предпочтительны теплые, яркие, насыщенные цвета, а для взрослых - это холодные цвета средней насыщенности и более смешанные, для людей в возрасте больше подойдут цвета пастельных тонов. Поэтому сайты для детей столь красочны и насыщены, а деловые (корпоративные) сайты в основном используют строгие цвета [22].
Вторым немаловажным фактором является стиль оформления сайта.
Для оформления страниц был использован Adobe PhotoShop CS. С его помощью обрабатывались все имеющиеся изображения, выбиралась цветовая гамма и оптимизировалось оформление страниц. Adobe Photoshop -- растровый графический редактор, разработанный и распространяемый фирмой Adobe Systems. Этот продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. В настоящее время Photoshop доступен на платформах Mac OS и Microsoft Windows. Ранние версии редактора были портированы под SGI IRIX, но официальная поддержка была прекращена начиная с третьей версии продукта. Для версии CS 2 возможен запуск под Linux с помощью эмулятора Wine 0.9.54. Несмотря на то, что изначально программа была разработана для редактирования изображений для печати на бумаге (прежде всего, для полиграфии), в данное время она широко используется в web-дизайне. В более ранней версии была включена специальная программа для этих целей -- Adobe Image Ready, которая была исключена из версии CS3 за счёт интеграции её функций в сам Photoshop.
При создании графического оформления страниц сайта, в первую очередь стояла задача, сделать не только удобный, но и красивый интерфейс.
Изначально планировалось использовать следующую цветовую схему: оттенки голубого и зеленого цветов. Однако заказчик счел оформление не подходящим для web-сайта детских товаров, после чего цветовая схема была изменена. При создании оформления, в качестве фона был выбран белый цвет, шрифты при этом, использовали цвет коричневого тона. На сайте присутствуют так называемые "детские" цвета такие, как желтый, градации оранжевого, светло коричневый (рис. 2.4.1.).
В целом, при первом посещении сайта, многих пользователей удивляет стиль оформления, но при этом, дизайн не вызывает каких либо отрицательных эмоций. Все ссылки выделены и их трудно спутать с основным текстом. Интерфейс интуитивно понятен, и поэтому пользователь может быстро разобраться с управлением.
При разработке использовались файлы с разрешением *.jpg, *.png. Данные форматы, давно уже прижились на всевозможных web-сайтах и не становятся менее популярными. Главное отличие от других форматов, сжатие изображения, без потери качества [23, 24].
2.5 Программная реализация проекта
После выбора средств разработки и создания интерфейса, можно приступать к стадии написания кода программных модулей.
При разработке сайта были задействованы такие возможности языка, как работа с датой и временем, работа с файлами. Кроме того, были задействованы многие конструкции языка PHP. Использование циклов с предусловием While и универсального цикла For требовалось для организации разного рода циклов. Без конструкции if-else вообще не обходится ни одна более или менее большая программа, и модули разрабатываемого проекта не являются исключением.
Для возможности использовать модульную структуру, а также при необходимости вынесения некоторых фрагментов текста в отдельные файлы, применялись инструкции require и include. Эти операторы практически идентичны друг другу. Они позволяют вставить код другого модуля прямо "в сердце" того, где используется инструкция. Разница между ними заключается в том, что при использовании инструкции include включаемый файл вставляется в файл во время выполнения программы, в то время как require требует включения файла сразу при запуске. В основном инструкцию require необходимо применять, чтобы еще до выполнения программы подключить модуль, в котором могут храниться некоторые переменные. Инструкцию include следует использовать, когда вызываемые модули требуются по мере выполнения кода.
Из дополнительных функций языка PHP была использована функция Mail, позволяющая отправить электронное письмо на указанный адрес. Данная функция будет выполняться только на том компьютере, где установлена какая-либо служба электронной почты. Обычно на Web-серверах такая служба имеется.
Модуль голосования состоит из нескольких рабочих файлов. Их список приведен ниже:
· mod_poll.php - код модуля;
· default.php - шаблон модуля.
Схему работы процесса голосования можно описать следующим образом. Пользователь, ставит флажок возле той группы товара, которую он предпочитает. После чего нажимает кнопку Ok. Результат считывается, и счетчик голосов прибавляет единицу к той категории, которую выбрал пользователь.
Компонент корзины состоит из множества рабочих файлов, каждый из которых отвечает за ту или иную ее часть. Вот список некоторых из них:
· basket_b2b.html.php - шаблон корзины;
· browse_1.php - шаблон, предназначенный для отображения списка по одному товару в строке;
· checkout_bar.tpl.php - шаблон полоски процесса оформления заказа;
· list_shipping_methods.tpl.php - шаблон выбора способа доставки на этапе "Варианты доставки".
Работает корзина следующим образом. Пользователь, выбрав товар, нажимает кнопку купить, после чего этот товар переносится в корзину заказов. Посетитель проходит 3 шага заказа (заполнение формы заказа, выбор доставки, проверка введенных данных). По окончании всех этапов, введенная информация записывается в файл и отправляется по электронной почте администратору сайта.