Обоснование проектных решений по программному обеспечению задач

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

Главная задача при обсуждении ТЗ — донести суть вашего проекта до исполнителя. После написания и согласования с заказчиком технического задания (Приложение Б) происходит разработка макета будущего сайта - графическое представление. Об особенностях правильного составления будущего сайта информация предоставлена в разделе выше «Основные принципы создания эффективного и продающего сайта».

Особенностью в графике, применяемой на web-страницах, является то, что она имеет свои определенные ограничения. На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров.

GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

Его свойства состоят в следующем:

– поддерживает не более 256 цветов (меньше можно и часто нужно);

– использует палитру цветов;

– использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);

– поддерживает чересстрочную развертку;

– является поточным форматом, т.е. показ картинки начинается во время перекачки;

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

JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16, 77 млн. цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

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

PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG – Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF.

Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi – pixels per inch). Другая единица измерения разрешения – количество точек на дюйм (dpi – dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

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

Для разработки макета сайта «УралАвтоБаза» использовались графические редакторы Adobe Photoshop CS5, Corel Draw X6 и Adobe Illustrator CS5.

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

Рисунок 7 – Слайд-шоу, созданное с помощью средств Adobe Photoshop

Основные инструментальные модули Photoshop, подчеркивающие его привлекательность для Web-дизайнера - это:

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

- стили слоев, дающие возможность неограниченно видоизменять любые элементы изображения;

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

- расширяемые наборы кистей (brushes), стилей (styles) и форм (shapes), градиентов и текстур;

- возможности программирования действий для автоматизации выполнения однотипных операций;

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

- возможности оптимизации размера и параметров изображения в целях уменьшения их размера.

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

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

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

После создания и согласования макета будущего сайта следует переходить к верстке.

Для обеспечения работоспособности сайта использовалась система управления контентом (CMS)WordPress, позволяющая полностью или частично управлять содержимым сайта.

(CMS) - программное обеспечение, которое отслеживает каждую часть содержимого (контента) на сайте. Содержимым может быть текст, фотографии, музыка, видео, документы и т.п. Управление сайтом происходит через Web-интерфейс административной части сайта (отображено на рисунке 8). В своей выпускной работе была использована система WordPress [16].

Рисунок 8 – Административная часть сайта

WordPress – система управления содержимым, написанная на языке PHP и использующая в качестве хранилища содержания базу данных MySQL. WordPress является свободным программным обеспечением, защищённым лицензией GPL версии 2. Одной из главных особенностей WordPress является относительная простота управления при практически безграничных возможностях и гибкости при изготовлении сайтов. В дополнение к преимуществам движка стоит отнести его бесплатное размещение и использование, наличие кроссплатформенной платформы, визуального и текстового редактора, надежная защита от взломов, нет строгих требований к серверу, а также возможность поддержки SEO.

Система управления содержимым WordPress является на сегодняшний день одной из самых популярных систем управления. Начало развития платформы началось еще с 2001 года неким Мишелем Вальдриги, который начал разработку движка для блогов, дав ему кодовое название b2.
У него был интерес написать простенькую, но при этом удобную платформу для блогов. Через некоторое время к Мишелю присоединились ещё двое его знакомых: Мэтт Мюлленвег и Майк Литл.

В январе 2003 года Мэтт Мюлленвег решил, что продолжит разработку платформы для блогинга, но из всей идеи b2 выделит одно направление, над которым и продолжит работу. И вот, всего спустя несколько месяцев, в мае 2003 года мир увидел первую версию Wordpress, получившую порядковый номер 0.70. В ту славную пору Мэтт учился на первом курсе, и было ему тогда всего-то 19 лет [22].

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

Также платформа содержит возможность установки множества плагинов, которые упрощают работу программиста.

Плагин - это PHP код, который изменяет или расширяет начальный функционал системы.

WordPress предоставляет простой, но гибкий API для создания плагинов.

В разработке сайта были применены следующие плагины:

- Contact Form 7 (бесплатный, простой и гибкий плагин формы обратной связи);

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

- Easy FancyBox − данный плагин позволяет красиво и эффектно вывести изображения, фотографии на передний план вашего экрана. Плагин использует jQuery и не требует вставки никаких дополнительных кодов, а начинает работать автоматически сразу после активации;

- Formidable Anti-Spam – плагин в дополнение к сайту служит для анти-спама, проверяет необходимую форму отправки от спама и генерирует ошибку;

- HTML Import 2 - этот плагин будет импортировать каталог файлов, либо страниц или сообщений;

- Image Zoom - плагин для увеличения изображения при его выборе;

- jQuery Vertical Accordion Menu - это плагин, который создает вертикальное меню из любого WordPress пользовательского меню с помощью JQuery;

- LenSlider - плагин для создания визуальных ползунков, каруселей или слайд-шоу для вашего сайта без написания кода;

- TinyMCE Advanced − этот плагин позволит вам добавить, удалить и организовать кнопки, которые отображаются на панели инструментов визуального редактора.

- SimpleModal Contact Form (SMCF) − это плагин, который добавляет на блог wordpress красивую контактную форму. Данная форма, к тому же еще, проверят правильность заполнения поля ввода, и открывается в модальном окне.