Файл: Разработка сайта кондитерского комбината КЛОН.pdf

На серверную часть сайта возлагается основной функционал сайта, поэтому количество языков программирования больше, чем клиентской и нет одной технологии, которая была бы определена в качестве стандарта разработки. Из серверных языков программирования выделяют Ruby, ASP, JSP, Python, Perl. Наиболее распространенным является язык PHP версии 5 с полной поддержкой объектно-ориентированной технологии программирования, которая упрощает работу по повторному использованию кода, улучшает читаемость кода и позволяет реализовать командную разработку сайта. На PHP написано достаточно большое количество фреймворков (каркасов разработки структурных и функциональных элементов сайта). Среди наиболее распространенных фреймворков можно выделить Symphony, Zend, Yii, Doctrine, Smarty, Drupal, Wordpress, Jooomla! и др. Среди этих фреймворков существуют универсальные и специализированные (предназначенные для реализации только некоторых функций и задач веб разработки). Использование фреймворков позволяет значительно ускорить процесс разработки, сделать код более стандартным и читаемым. На базе фреймворков были разработаны CMS (Content Manager System), системы управления контентом сайта, позволяющие создать структуру сайта и добавлять функционал, в зависимости от требований к сайту.

Динамические сайты используют базы данных для хранения контента и реализации своих функций. Наиболее распространёнными системами управления базами данных являются MySQL, PostgreSQL, ORACLE. Эти базы данных являются облегченными, т.е. обладают урезанным функционалом, достаточным для задач веб разработки. Наиболее распространенной является MySQL. Данная база достаточно проста в использовании и обладает высокой скоростью обработки запросов, что важно при большом количестве обращения пользователей к серверу, на котором располагается сайт.

В back-end разработке, наиболее распространенной является связка PHP+MySQL.

PHP направлен на организацию полномасштабной работы с базами данных.

2.3 Набор веб инструментов разработчика

Для разработки сайтов на каждом этапе существуют специальные средства разработчика.

Разработка сайта начинается с анализа требований, определения целей и задач сайта, определения основной концепции сайта (аудитории, назначения, примерного содержания), проектирования (определения структуры сайта, основных блоков и модулей, разработке прототипа сайта). Все это выполняется на предварительном этапе составления технического задания на разработку сайта.

На следующем этапе практической разработки разрабатывается дизайн сайта.

3. Разработка приложения.

3.1 Анализ требований построение структуры сайта

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

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

Для определения требований используются специальные редакторы, позволяющие веб-разработчику проектировать элементы продукта в графической форме на языке понятном заказчику. Такими редакторами являются карты мозга. Наиболее распространёнными редакторами карт мозга являются The Brain - составляет многомерные карты, Concept Draw - позволяет разрабатывать двумерные карты и Mind Manager Pro - также позволяет разрабатывать двумерные карты. Нами использовался Mind Manager Pro. В работе не рассматривались все программы, а только наиболее распространенная MindJet MindManager Professional .

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

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

Для создания сайта необходимо определить его структуру и изобразить ее на рисунке (рис 1).

Рис.1. Результат проектирования сайта

Mind Manager – одна из самых популярных и наиболее функциональных программ, удобный инструмент для управления картами памяти (mind-map), упрощающий организацию и распространение информации.

Данная программа позволяет моделировать в первом приближении сайт и может рассматриваться как CASE средство проектирования (рис 2).

Рис. 2. Предварительная модель сайта после автоматической генерации.

3.2 Проектирование макета сайта и его дизайна

Для разработки дизайна существует ряд подходов:

Разработка с нуля.

Используется HTML редактор кода. Таких редакторов много и различаются они возможностью генерировать код, практически все бесплатны и примитивны. Другие редакторы рассматриваются как системы веб разработки. Наиболее распространенным из них является платный WYSIWYG редактор DreamWeaver.

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

Рис.3. Использование редактора для прпограммирования функций сайта

Использование специальных фреймворков

Чаще всего для этих целей используют специальный узкопрофильный фреймворк Smarty, реже Twig или Latte

Разработка с помощью шаблонизатора

Для этого способа разработки шаблона используется один из редакторов шаблонов, например Artisteer (рис.4).

Рис.4. Разработка шаблона сайта в редакторе Artisteer.

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

С помощью программы можно за довольно короткое время создать тему для Wordpress и профессиональные шаблоны для Joomla! и Drupal.

Программа представляет из себя простой и в тоже час мощный механизм для верстки шаблонов Worpress, Drupal и Joomla. Интерфейс в Artisteer очень напоминает MS Office 2007 и разобраться с ним в мини заняло минимум часов, ухе четко, ясно и понятно, те. Программа имеет интерфейс, который схож с интерфейсом продуктов Microsoft

Была сделана попытка работать с данным программным обеспечением, но использовать пиратские копии довольно не надежно, а минимальная стоимость равна 149$, что для одного разработчика дорого, но для фирмы достаточно дешево и удобно.

Использование готового шаблона

Рис.5. Стандартное описание блоков шаблона сайта

Еще одним способом установки интерфейсной части сайта является использование готового шаблона с дальнейшей настройкой, что и использовалось в данной работе. В качестве шаблона был взят бесплатный шаблон 3 колор с полным доступам ко всем элементам своего кода (рис.5).

В этом случае также после установки шаблона на сайт необходимо его доработать, иначе дизайн сайта может совпасть с другим, а это не допустимо. Каждый сайт должен иметь индивидуальный дизайн.

3.3 Проектирование сайта

Проектировать дизайн сайта лучше с использованием одного из специальных редакторов прототипа сайта. При прототипировании мы получаем ряд прямоугольников и макетов элементов, которые требуется разместить на странице (экране).

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

Веб-дизайн - вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от веб-программирования, подчеркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна.

Дизайн веб-ресурса (веб-дизайн) - спроектированная структура веб-ресурса, отличающаяся оригинальностью применения цветовых и технических решений, обеспечивает эстетическое восприятие и удобство пользования веб-ресурсом.

На этом этапе определяются общие требования к дизайну веб-интерфейса.

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

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

На этапе проектирования определяется какие модули должны присутствовать на каждой странице веб-интерфейса.

Перед разработкой сайта на основе требований и предварительных моделей структуры и дизайна сайта проектируют сайт. Для этих целей используются редакторы прототипов. Наиболее известный и продвинутый Axure Pro.(Рис.6).

Рис. 6 Построение прототипа сайта в редакторе Axure Pro.

Затем прототип реализуется в шаблоне через программный код и средства визуального редактора (рис.7)

Рис.7. «Подгонка» шаблона в редакторе под структуру прототипа

На этом этапе нужно подготовит графические элементы шаблона и графику вообще, для чего использовался редактор Adobe Photoshop (рис.8)