Размещено на http://www.Allbest.ru/

Размещено на http://www.Allbest.ru/

Реферат

Отчет 48 с., 22 рис., 1 схема, 11 источников.

Web-сайт, язык программирования, дизайн web-сайта, дизайн логотипа, проектирование web-сайта

Объектом исследования данной работы является анализ информационных технологий при разработке сайта для производственной компании.

Предметом исследования является разработка web-сайта для направления «SETin» торгово-производственной компании ООО «СЭТ Продакшн».

Основной целью дипломной работы является исследование процесса создания web-сайтов с использованием новейших технологий и современных языков программирования, таких как HTML5, CSS3, PHP, XML, XSL.



Содержание

• Реферат
• Введение
• Раздел 1. Теоретические основы разработки web-сайта
• 1.1 Обоснование необходимости создания web-сайта
• 1.2 Понятие web-сайта
• 1.3 Классификация web-сайтов
• 1.3.1 По содержанию
• 1.3.2 По виду
• 1.4 Основные языки web-программирования
• 1.4.1 HTML
• 1.4.2 CSS
• 1.4.3 PHP
• 1.4.4 JavaScript
• 1.4.5 XML
• 1.46 XSL
• 1.5 Системы управления контентом (CMS)
• 1.5.1 Классификация CMS
• 1.5.2 Joomla
• 1.5.3 WordPress
• 1.5.4 1С-Битрикс
• 1.5.5 UMI
• 1.6 Основы дизайна web-сайта
• 1.6.3 Дизайн сайта
• 1.6.2 Дизайн логотипа
• Вывод по разделу 1
• Раздел 2. Разработка web-сайта
• 2.1 Обоснование выбранных технологий при создании web-сайта
• 2.1.1 Анализ и выбор графики при создании логотипа
• 2.1.2 Анализ и выбор графики при создании дизайна web-сайта
• 2.1.3 Анализ и выбор графического редактора для логотипа
• 2.1.4 Анализ и выбор графического редактора для дизайна web-сайта
• 2.1.5 Анализ и выбор html-редактора
• 2.1.6 Анализ и выбор CMS
• Выводы по разделу 2
• Раздел 3. Проектирование web-сайта
• 3.1 Изучение бренда
• 3.2 Целевая аудитория
• 3.3 Исследование рынка
• 3.4 Прототип web-сайта
• 3.4.1 Выбор типа web-сайта
• 3.4.2 Выбор разметки web-сайта
• 3.4.3 Выбор цветовой схемы web-сайта
• 3.4.4 Прототип логотипа web-сайта
• 3.5 Дизайн сайта
• 3.6 Дизайн логотипа
• 3.7 Интерактивный прототип
• 3.8 Верстка сайта
• 3.8.1 Структура XSLT документа
• 3.8.2 Стили сайта
• 3.8.3 PHP
• 3.8.4 Java Script
• 3.9 Создание страниц сайта в UMI.CMS
• 3.10 Отладка работы сайта
• 3.5 Выводы по разделу 3
• Раздел 4. Охрана труда
• 4.1 Правовые и организационные вопросы охраны труда
• 4.1.2 Организация обучения безопасности труда
• 4.2 Оценка условий труда
• 4.2.1 Требования к помещениям для работы с ПЭВМ
• 4.2.2 Требования к уровням шума и вибрации на рабочих местах, оборудованных ПЭВМ
• 4.2.3 Общие требования к организации рабочих мест пользователей ПЭВМ
• Заключение
• Список использованных источников


Введение

Интернет - это самая большая компьютерная сеть в мире. Она используется миллионами людей каждый день.

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

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

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

Сайт считается лицом компании и может существенно повысить имидж. Также любой пользователь сети интернет сможет получить необходимую информацию о фирме в любой момент, появляется возможность найти контактные телефоны, адрес и e-mail, чтобы связаться с компанией. Сейчас большинство клиентов узнают о существовании компании именно через web-сайт. Поэтому сайт можно назвать самой лучшей рекламой. На его создание тратится много средств, но так как 20-30% клиентов и партнеров можно найти с помощью сайта, эти средства очень быстро окупаются, вследствие чего веб-сайт можно считать самой недорогой рекламой.

Объектом исследования данной работы является анализ информационных технологий при разработке сайта для производственной компании.

Предметом исследования является разработка web-сайта для направления «SETin» торгово-производственной компании ООО «СЭТ Продакшн».

Основной целью дипломной работы является исследование процесса создания web-сайтов с использованием новейших технологий и современных языков программирования, таких как HTML5, CSS3, PHP, XML, XSL.

Для достижения поставленной цели, следует решить следующие задачи:

- проанализировать деятельность направления «SETin»;

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

- разработать концепцию и дизайн сайта;

- реализовать программную часть сайта;

- рассмотреть экономическую составляющую проекта.

Эти задачи можно решить, проанализировав предмет исследования, изучив сходства и различия подобных сайтов. Смоделировав исследуемый предмет, и сделать выводы, основанные на тенденциях развития web-технологий.



Раздел 1 теоретические основы разработки web-сайта

1.1 Обоснование необходимости создания web-сайта

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

Сайт позволяет:

- увеличить имидж компании;

- увеличивает доверие к компании;

- увеличивает поток клиентов;

- увеличить продажи;

- уменьшить количество рутинных вопросов;

- сэкономить время на документообороте.

1.2 Понятие web-сайта

Web (в переводе с английского) - паутина, сеть.

Site (в переводе с английского) - место.

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

Web-сайт состоит из файлов, которые хранятся на удаленном компьютере (сервере).

Домен - это символьный адрес в интернете для сайта.

Домены бывают разных уровней

Домены первого уровня:

- региональные (.ru, .su, .kz, .uk);

- коммерческие (.com, org); и др.

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

Домены второго уровня:

содержат в себе названия самого сайта (например, google.com; google - домен второго уровня). Официально можно зарегистрировать только домены второго уровня.

Домены третьего и далее уровней:

домены остальных уровней можно добавлять бесплатно в том домене, которым пользователь владеет (например, dogs.mydomen.ru; dogs - домен третьего уровня).

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

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

1.3 Классификация web-сайтов

1.3.1 По содержанию

Определяется основные два вида web-сайта по содержанию:

- статичный - представляет собой набор заранее подготовленных файлов;

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



1.3.2 По виду

По виду сайты могут быть разделены:

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

- Посадочная страница (landing page) - это страница рекламного характера, содержащая информацию об услуге или товаре, переход на которую осуществляется по ссылке из поискового запроса или через баннер интернет-объявления.

- Блог - это интернет-журнал событий, интернет-дневник, on-line-дневник, web-сайт, основное содержимое которого - это регулярно добавляемые записи, содержащие текст, изображения или мультимедиа. Для блогов характерны недлинные записи временной значимости, расположенные в обратном хронологическом порядке - последняя запись сверху.

- Интернет-магазин - это сайт, торгующий товарами по средствам сети интернет, позволяет пользователям on-line в своем браузере сформировать заказ на покупку, выбрать способ оплаты и доставки заказа, заплатить за заказ, например, электронными деньгами.

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

1.4 Основные языки web-программирования

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

1.4.1 HTML

HTML (Hyper Text Markup Language) - язык разметки гипертекста). Это система верстки, которая определяет, как и какие элементы должны располагаться на web-странице. Сайты, созданные по данной технологии представляют собой набор статических страниц.

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

Последним стандартом данного языка является HTML5/

1.4.2 CSS

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

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

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

1.4.3 PHP

PHP - это рекурсивный акроним словосочетания PHP: Hypertext Processor

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

PHP является распространенным языком программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения web-разработок и его код может внедряться непосредственно в HTML.

1.4.4 JavaScript

JavaScript - это язык сценариев, позволяющих сделать html-страницу интерактивной, т.е. «умеющей общаться» с пользователем. Так как весь процесс сценария выполняется на стороне пользователя без обновления страницу этот язык получил название клиентский.

С помощью JavaScript можно установить на сайт форму обратной связи, слайдер, современные эффекты, паралакс и т.д.

1.4.5 XML

XML (Extensible Markup Language) - это расширяемый язык разметки. Он представляет из себя удобный инструмент для представления и хранения структурированных данных, позволяет обмениваться информацией между программами, участвует в построении специализированных языков разметки (например, XHTML, XSL).

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

1.4.6 XSL

XSL (Extensible Stylesheet Language) - расширяемый язык таблиц стилей. Этот язык устанавливает правила: какие данные из XML-документа показывать и как следует их отображать в браузере. XSL включает в себя набор из нескольких языков:

XPath (XML Path Language) - язык запроса к компонентам информационной модели XML-документа;

XSLFO (Extensible Stylesheet Language Formatting Obects) - язык форматирующих объектов, обеспечивающих вывод информации в форматированном виде;

XSLT (Extensible Stylesheet Language Transformations) - расширяемый язык преобразования таблиц стилей.

1.5 Системы управления контентом (CMS)

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

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

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

CMS (Content Management System - система управления контентом) - это программа, которая управляет всем контентом сайта и позволяет работать с ним.

Основные функции CMS:

- управление сайтом;

- формирование и структурирование страниц.

Работа CMS основана на принципе разделения структуры сайта и информационной его части:

- back-office - это часть системы, отвечающая за функциональность и хранение информации;

- front-office - это часть системы, обеспечивающая интерфейс с пользователем.

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

1.5.1 Классификация CMS

- Студийные - те системы, которые создает студия для конкретного проекта. Имеет определенный, нужный только данному сайту, набор функций.

- Бесплатные (Joomla, Wordpress). Данные системы очень широко распространены и, соответственно, хорошо развиты. Имеют большое число разработчиков. Являются открытыми системами, при необходимости есть возможность дописать модули.

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

- Коммерческие CMS (1C-Битрикс, UMI). Разработка таких систем происходит под управлением одной компании. В отличие от некоммерческих CMS имеют бесплатную техническую поддержку. Качественный код, который не дает сбоев. Имеют полный набор документации, что помогает облегчить управление сайтом.

1.5.2 Joomla

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

Joomla состоит из набора скриптов, написанных на языке PHP.

1.5.3 WordPress

WordPress - это система управления контентом с открытым исходным кодом, то есть распространяемая бесплатно.

WordPress написан на PHP, в качестве базы данных использует MySQL. Обычно применяется для создания блогов, но с помощью него также можно создавать сложные новостные ресурсы и даже интернет-магазины.

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

Для работы с WordPress необходим хостинг с поддержкой PHP версии 4.3 или выше, а также свободная база данных MySQL версии 4.0 или выше.

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

1.5.4 1С-Битрикс

1С-Битрикс - это система управления контентом сайта, которая создана для поддержки и развития web-проектов.

Структура системы делится на 5 частей:

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

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

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

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

- Вывод информации - внешний вид, в котором выдается информация на внешнюю часть сайта.

1.5.5 UMI

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

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

UMI - это иерархическое приложение, состоящее из следующих компонентов:

Рис. 1

1.6 Основы дизайна web-сайта

1.6.3 Дизайн сайта

Для того чтобы составить грамотный дизайн сайта, следует соблюдать некоторую последовательность разработки:

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

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

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

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

- Интерактивный прототип. Для web-дизайна в настоящее время недостаточно статического макета, так как он не отображает путь. Дизайнер должен уметь показать взаимодействие человека с проектом.

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

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

Сущности не должны множиться без необходимости.



Рис. 2

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

Исключение элементов.

При создании проекта очень часто стоит вопрос о том, как его улучшить и что добавить, чтобы сделать его оригинальным и более полезным. Если же наоборот убирать ненужные элементы - это может поспособствовать облегчению и, следовательно, улучшению дизайна.

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

Отказ от креатива в пользу функциональности

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

Использование простых элементов

Люди понимают и принимают лучше то, к чему уже привыкли, поэтому следует использовать те элементы, которые уже устоялись в данной сфере.

Наладка обратной связи

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

Однородность элементов

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

Микротипографика и макротипографика

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



Основные методы, используемые в микротипографике:

- модульная сетка (помогает выровнять текст при наборе);

- выравнивание (элементов относительно друг друга);

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

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

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

- выравнивание многоколонного набора (правильное согласование между соседними колонками и по нижней основе);

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

- нешрифтовые элементы набора (использование в текстовой композиции нешрифтовых элементов, например, таких как плашки, рамки, линейки).

Макротипографика - структура текста в контексте общего дизайна.

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

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

Текст и иллюстрации. Определение схемы построения текстового и иллюстрированного материала и установление взаимосвязи между ними.

Зонирование. Правильное распределение не только основного текста, но и сносок, примечаний, изображений, таблиц и т.д.

Построение композиционных схем. Единство всех страниц с применением основных принципов построения. Доминирование, гармония, контраст, равновесие, группировка, динамика, ритм.

Проектирование макроструктуры. Базовое разделение страницы, формирование ее скелета.

Шрифты

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

Следует использовать самые безопасные и эффективные комбинации: гротескные и нейтральные шрифты. Существуют наборы шрифтовых пар, которые признаны и уже используются долгое время (например, “Helvetica” - заголовок, “Bodoni” - основной текст).

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

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

1.6.2 Дизайн логотипа

Важной частью web-сайта и всего фирменного стиля является логотип. Он располагается в начале сайта, и задает весь стиль в дальнейшем.

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

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

В логотипе должно сочетаться несколько параметров:

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

Форма и цвет являются основными элементами при восприятии и для них можно выделить отдельные параметры, которые применяются при создании логотипа.

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

- Естественность (применение таких приемов как объем, тени, полутона, отражения и т.д.).

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

- Простота (логотип должен быть простым, но передавать максимальное количество информации о компании).

- Динамичность (сочетание различных размеров, использование различных штрихов, направленных форм, наклон элементов)

Вывод по разделу 1

Сайт - это носитель информации сети интернет. Файловая система сайта располагается на удаленном сервере. Сайт имеет доменное имя. Сайт имеет ряд страниц статичных, либо динамичных.

По содержанию сайт бывает статичный и динамичный. По виду web-сайты делятся:

- сайт визитка;

- посадочная страница;

- блог;

- интернет-магазин;

- web-сервис.

Основными языками web-программирования являются: HTML, CSS, PHP, JavaScrit, XML, XSL.

CMS (Content Management System - система управления контентом) - это программа, которая управляет всем контентом сайта и позволяет работать с ним.

CMS делятся на студийные, бесплатные и коммерческие. Основные CMS - Joomla, WordPress, 1С-Битрикс, UMI.

При разработке дизайна сайта важно придерживаться некоторой последовательности:

- исследование;

- человек;

- путь;

- скетч и прототип;

- интерактивный прототип;

- дизайн.

Одной из важнейших деталей является дизайн логотипа, в котором должны сочетаться:

- гармоничность;

- естественность;

- сбалансированность;

- простота;

- динамичность.



Раздел 2. Разработка web-сайта

2.1 Обоснование выбранных технологий при создании web-сайта

2.1.1 Анализ и выбор графики при создании логотипа

Для хранения и показа изображений в компьютере существует несколько видов графики:

- векторная;

- растровая;

- фрактальная;

- трехмерная;

- символьная.

Векторная графика

Этот вид строится на основе векторов. Векторное изображение строится на основе кривых и формул: задается начальная точка кривой, конечная точка кривой и формула, по которой рассчитывается данная кривая. Соответственно, при масштабировании таких изображений качество не портится, так как меняются значения в данной формуле. Для разработки логотипа используется векторная графика.

Растровая графика

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

Основной минимальный элемент растровых изображений - точка (пиксель). Чтобы сохранить изображение, компьютер должен сохранить информацию о каждом пикселе (размере, расположении, яркости, цвете и т.д.).

Фрактальная графика

Строится на основе примитивов, которые наследуют свойства друг друга за счет уравнений.

Трехмерная графика

Трехмерная графика располагает объекты в трехмерном пространстве.

Символьная графика

В настоящее время символьный вид графики является устаревшим и не используется

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

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

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

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

2.1.2 Анализ и выбор графики при создании дизайна web-сайта

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

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

2.1.3 Анализ и выбор графического редактора для логотипа

Самыми распространенными векторными редакторами являются CorelDRAW и Adobe Illustrator.

CorelDRAW

CorelDRAW - это программный комплекс, который включает себя несколько программ:

- CorelDRAW -- векторные иллюстрации и макетирование страниц.

- Corel PHOTO-PAINT -- редактирование изображений.

- Corel PowerTRACE -- трассировка растровых изображений в векторную графику.

- Corel CONNECT -- средство поиска контента.

- Corel CAPTURE -- средство захвата экрана.

- Corel Website Creator -- дизайн веб-сайтов.

- PhotoZoom Pro 3 -- подключаемый модуль для увеличения цифровых изображений.

- ConceptShare -- инструмент для интерактивной совместной работы.

Непосредственно программа CorelDRAW является многофункциональным редактором с расширенными возможностями, и ее основными функциями - это:

- рисование и редактирование векторной графики;

- работа с текстом, его форматирование;

- работа с растровой графикой как в сочетании с векторной, так и отдельно с иллюстрациями.

Adobe Illustrator

Adobe Illustrator - это программа для работы с векторной графикой любой сложности. Разработан Illustrator корпорацией Adobe System.

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

Сравнение CorelDRAW и Adobe Illustrator

В офсетной печати высокой точности illustrator имеет ряд преимуществ, например, он не преобразовывает растровые картинки в свой внутренний формат в отличие от CorelDRAW, который конвертирует изображение в формат bmp, неподходящий для качественной печати растровых изображений.

Программа CorelDraw полноценно справляется с оперативной печатью, печатью на лазерных и струйных принтерах и плоттерной резкой, показывая и в качестве, и в скорости преимущества.

Обе программы имеет возможность сохранять созданные файлы с различными расширениям, однако, в отличии от CorelDRAW, который воспринимает расширение .ai (Adobe Illustrator), Illustrator не поддерживает основной формат CorelDRAW.

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

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

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

2.1.4 Анализ и выбор графического редактора для дизайна web-сайта

При работе с растровыми изображениями самым распространенным графическим редактором является Adobe Photoshop. Эта программа наделена полноценным функционалом для работы с растровой графикой и является профессиональным инструментом.

Главным конкурентом Adobe Photoshop является программа Corel PHOTO-PAINT, разработчиком которой является корпорация Corel.

Интерфейс у этих программ отличается довольно сильно. В PHOTO-PAINT интерфейс простой и интуитивно понятный, но она имеет неудачное расположение палитр. Рабочее пространство по сравнению с Photoshop маленькое.

Работа со слоями в PHOTO-PAINT неудобна, а также отсутствует функция эффекты слоев, которая уменьшает функционал по сравнению с Photoshop в несколько раз.

При работе с текстом в продукте Corel периодически возникают нечеткости мелких текстовых символов.

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

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

2.1.5 Анализ и выбор html-редактора

Для исполнения программного кода необходимо выбрать подходящий html-редактор. Наиболее подходящими являются редакторы кода, без визуальной составляющей.

Основными параметрами, которыми должен обладать качественный редактор являются:

- распознавание кода;

- проверка кода;

- подсветка кода;

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

- удобная навигация среди всех файлов проекта.

Всеми этими возможностями обладает программа Sublim Text 2, которая использовалась в ходе написания кода.

2.1.6 Анализ и выбор CMS

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

Среди коммерческих программ лидирующие позиции занимают система 1С-Битрикс и UMI CMS.

1С-Битрикс

Система 1C-Битрикс имеет множество возможностей и имеет индивидуальный подход к каждому проекту.

Из преимуществ можно выделить:

- функциональность системы - имеются все необходимые функции для торговли в сети интернет;

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

- интеграция с системой 1С Бухгалтерия - удобное использование данной системы для интернет-магазинов;

Недостатки системы:

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

- тяжелая документация - по сравнению с UMI CMS имеет сложную для понимания даже опытным разработчикам документацию;

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

- требовательность к ресурсам.

UMI CMS

UMI - отличное средство для разработки web-сайтов, которое имеет ряд преимуществ:

- функция редактирования on-line (edit-in-plece) - возможность изменять контент прям на странице сайта;

- тулбар в административной панели - облегчает поиск необходимого модуля;

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

- архив изменения web-страниц - возможность возвратить изменения в случае необходимости;

- SEO оптимизация - система отвечает всем требованиям поисковой оптимизации;

- интеграция сторонних сервисов, например, социальные сети, Loginza, сервисы доставки, оплаты, 1С, Яндекс Маркет;

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

Недостатки также присутствуют в данной системе:

- высокая цена;

- не всегда грамотная техническая поддержка.

Проведя анализ между двумя основными CMS, которые подошли по первоначальным критериям, в конечном результате был сделан выбор в пользу UMI СMS и принято решение разрабатывать сайт на данной системе.

Выводы по разделу 2

В настоящее время используются следующие виды графики:

- векторная;

- растровая;

- фрактальная;

- трехмерная;

- символьная.

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

Основные редакторы векторной графики:

- CorelDRAW - наиболее подходящий редактор для данного проекта. В данной программе создавался логотип и некоторые векторные объекты.

- Adobe Illustrator.

Редакторы растровой графики:

- Adobe Photoshop - профессиональное средство для работы с цифровыми изображениями, которое используется в проекте для создания дизайна web-сайта

- Corel PHOTO-PAINT.

HTML-редактором, который отвечает всем требованиям проекта, является Sublim Text 2.

В данной главе были рассмотрены платные и бесплатные системы управления контентом. Выбор сделан в пользу коммерческих систем, и проведя сравнение между системами 1С-Битрикс и UMI CMS было установлено, что UMI CMS является наиболее оптимальной системой для разработки сайта данного вида и тематики.



Раздел 3. Проектирование web-сайта

3.1 Изучение бренда

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

В своем производстве компания использует такие материалы как натуральное дерево, ДПК (древесно-полимерный композит), искусственный камень, шпонированные панели, стекло, пластик, металлоконструкции из металлопрофиля.

Фирма расположена в городе Санкт-Петербург, но работает по всей России и с некоторыми зарубежными компаниями.

3.2 Целевая аудитория

Аудитория, на которую направлено производство и продажа фирмы «SETin» - франчайзинговые организации. Это такие организации, которые передают право пользования товарным знаком и технологиями другой, независящей от нее организации. В России франчайзинг развивается в основном за счет американских компаний, например, таких как «PizzaHut», «Coca-Cola», «Kodak», «McDonalds». Заказы такого масштаба компании «SETin» интересны и выгодны.

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



3.3 Исследование рынка

www.richstone-spb.ru (Рис. 3)

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

Рис. 3. Веб-сайт RichStone

www.skillstone.ru (Рис. 4)

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

Рис. 4. Веб-сайт Skill Stone



www.granicoat.ru (Рис. 5)

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

Рис. 5. Веб-сайт Granicoat

www.alivestone.spb.ru (Рис. 6)

Хороший дизайн, интуитивно понятная навигация, грамотное расположение графической и текстовой информации.

Рис. 6. Веб-сайт Alive Stone

www.nevalit.ru (Рис. 7)

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

Рис. 7. Веб-сайт Невалит

www.soundst.ru (Рис. 8)

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

Рис. 8. Веб-сайт Sound Stoun

www.youpiter.spb.ru (Рис. 9)

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

Рис. 9. Веб-сайт You-piter

www.ecoline-m.ru (Рис. 10)

Некачественный дизайн сайта, отсутствуют отступы в меню и левой навигационной панели. Как и на сайте http://soundst.ru/ есть возможность on-line расчета стоимости изделия, но в отличие от первого сайта, выбранные элементы не отображаются на образце. Нет возможности отправить заказ.

Рис. 10. Веб-сайт Эколайн



www.sbstudio.su (Рис. 11)

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

Рис. 11. Веб-сайт SB Studio

www.corian812.ru (Рис. 12)

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

Рис. 12. Веб-сайт Corian 812

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

3.4 Прототип web-сайта

3.4.1 Выбор типа web-сайта

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

3.4.2 Выбор разметки web-сайта

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

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

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

3.4.3 Выбор цветовой схемы web-сайта

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

3.4.4 Прототип логотипа web-сайта

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

Изучение логотипов фирм-конкурентов

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

www.quarz.nevalit.ru

Рис. 13

«Компания НеваЛИТ предлагает Вам изготовление столешницы из искусственного камня на заказ в СПб, по Вашим эскизам и размерам, любой формы и сложности».

Логотип статичный, грубый, в нем использованы слишком контрастные шрифты, которые не сочетаются друг с другом. «ЛИТ» - масштабный и громоздкий элемент. «Нева» - более динамичный, но имеет толстую обводку, что его утяжеляет. Наложение верхнего элемента запутывает и не дает возможности просмотра нижнего элемента, закрывая буквы - это делает сложным прочтение части логотипа.

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

www.youpiter.spb.ru

Рис. 14

«Компания «Ю-Питер» это свое собственное производство, которое существует с 2008 года. За все это время мы сделали огромное количество проектов. От простых подоконников до сложных мебельных конструкций».

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

www.richstone-spb.ru

Рис. 15

«Компания «RichStone» является производителем изделий из искусственного камня в СПб и осуществляет продажи конечным покупателям. Мы используем только лучшие виды камней от самых признанных производителей, поэтому все наши изделия отличаются долговечностью, удобством и изысканным дизайном».

Контрастный логотип, который хорошо привлекает внимание. Одно слово за счет цвета разделено на две части, где читается «rich» в переводе с английского - богатый, и «stone» - камень.

www.alivestone.spb.ru

Рис. 16

«Alive Stone специализируется на изготовлении изделий из камня. Мастера компании используют как натуральный камень и гранит, так и искусственный материал - кварцевый агломерат».

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

Применено выравнивание текста, по правому краю, что нарушает композицию, оставляя начало первой строки на весу.

www.2x3studio.ru

Рис. 17

«Студия камня 2x3. С 2009 года мы занимаемся изготовлением различных изделий из искусственного камня, при этом все время модернизируем оборудование и следим за появлением всех новых технологий, что позволяет нам быть всегда на шаг впереди. А производители камня из США, Кореи, Японии и других стран мира поставляют нам только лучшие и качественные материалы.»

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

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

...