Разработка программного обеспечения Web-приложения информационных систем «artposters. kz» для отдела архитектуры и дизайна компании ТОО «ILLUSTRATE studio»

Благодаря широчайшему развитию сети Интернет по всему миру стало выгодным создание и размещение на её просторах веб-сайтов, направленных на расширение бизнеса и привлечение новых клиентов.

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

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

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

Целью дипломного проекта является разработка программного обеспечение Web-приложений информационных систем «artposters.kz», которое будет обеспечивать продажу декоративных постеров, а также обеспечивать распространение рекламы и информации о деятельности компании TOO «ILLUSTRATE studio».

Задачей дипломного проекта, согласно техническому заданию составленному сотрудниками Web-отдела компании ТОО «ILLUSTRATE studio» (далее Разработчик) и утвержденному рабочей группой отдела «Архитектуры и дизайна» компании ТОО «ILLUSTRATE studio» (Далее Заказчик), является создание Web-приложения «artposters.kz», которое должно иметь следующие возможности:

— Поиск постеров по названию;

— Поиск постеров по направлению;

— Вывод прайс-листа на постеры;

— Регистрация пользователей на сайте;

— Оформление заказов на постеры.

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

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

Научная новизна дипломного проекта заключается в том что данное Web-приложение «artposters.kz», являющаяся по сути интернет-магазином, обладает рядом преимуществ по сравнению с обычными магазинами, это:

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

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

3. Доставка прямо к порогу. Чтобы вы ни купили — от тюбика крема до огромного дивана — вы всегда можете заказать доставку прямо до вашей двери.

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

5. Анонимность. Некоторые товары лучше покупать без посторонних глаз. Интернет — магазин гарантирует, что о вашей покупке никто не узнает.

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

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

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

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

Апробация дипломного проекта. Данное Web-приложение разрабатывалось в целях обеспечения продаж декоративных постеров, а также обеспечения распространение рекламы и информации о деятельности компании TOO «ILLUSTRATE studio». Были проведены испытания данного Web-приложения в результате которых было принято решение о введении его в действие. Данное Web-приложение «artposters.kz» было введено в действие и ныне функционирует в качестве интернет-магазина Заказчика, которое реализует маркетинговую деятельность по продажам декоративных постеров.

1. Анализ и постановка задачи

1.1 Область применения и требования создаваемого Web-приложения

информационный сайт программный

Описание предприятия

Разработке подлежит программное обеспечение Web-приложения информационных систем «artposters.kz» для отдела «Архитектуры и Дизайна» компании ТОО «ILLUSTRATE studio».

Разрабатываемому программному продукту присваивается наименование «artposters.kz».

Организация ТОО «ILLUSTRATE studio» была основана в 2007 году, директором организации является Дю Владислав Игоревич. Занимается компания широким спектром графических работ — верстка журналов и газет, дизайн логотипа и фирменного стиля различных организаций, разработка видеоигр, web-ресурсов и многое другое.

Непосредственно отдел «Архитектуры и Дизайна» компании ТОО «ILLUSTRATE studio» занимается изготовлением и продажей декоративных постеров.

Предприятие состоит из 5 отделов:

— WEB-отдел;

— GAME-отдел;

— Дизайнерский отел;

— Отдел верстки;

— Отдел архитектуры.

Организация имеет следующие структурные подразделения (Таблица 1.1).

Таблица 1.1. Структура предприятия

Требования к техническому обеспечению

Сервер должен быть построен на основе Intel Celeron Dual Core не менее 2600 гц, оперативная память минимум 2Гб, рекомендуется 8 Гб, сетевая карта со скоростью 10/100/1000 Мбит/с.

Локальные машины пользователей должны быть построены на основе Intel Celeron Dual Core не мене 1000 гц, с объемом оперативной памяти не менее 512 Мбайт, сетевая карта со скоростью 10/100/1000 Мбит/с.

Необходим доступ клиента к серверу по сети по протоколу TCP/IP.

Требования к программному обеспечению

В качестве операционных систем может использоваться ОС типа Windows (Windows XP, Windows 7), а так же ОС семейства Linux.

Для работы системы необходимо следующее предустановленное программное обеспечение:

— Apache HTTP-сервер (c mod_mysql, mod_xml и mod_zlib) 2.4.4 или ниже;

— PHP 5.3, минимум PHP 5.2.4;

— MySQL 5.0.4 минимум 4.1.x.

Так же необходимо наличие:

— Инструментального программного обеспечения: Macromedia Dreamweaver MX либо PhpDesigner либо Notepad ++.

— Web-браузеров: Chrome, Firefox, Opera, Safari, Internet Explorer.

На локальных машинах пользователей должен быть установлен любой из перечисленных браузеров с поддержкой JavaScript.

1.2 Постановка задачи

Создаваемое Web-приложение «artposters.kz» относится к интернет-магазинам (Сетевой магазин, Электронный магазин, Internet shop, E-shop) автоматизированным системам управления организационными объектами. Интернет-магазин это сайт, торгующий товарами в интернете. Позволяет пользователям сформировать заказ на покупку, выбрать способ оплаты и доставки заказа в сети Интернет. Выбрав необходимые товары или услуги, пользователь обычно имеет возможность тут же на сайте выбрать метод оплаты и доставки. Совокупность отобранных товаров, способ оплаты и доставки представляют собой законченный заказ, который оформляется на сайте путем сообщения минимально необходимой информации о покупателе. После отправки заказа с покупателем связывается продавец и уточняет место и время, в которое следует доставить заказ. Доставка осуществляется либо собственной курьерской службой, либо компанией, предоставляющей услуги доставки, либо по почте — посылкой или бандеролью[1].

Объектом автоматизации является маркетинговая деятельность отдела «Архитектуры и Дизайна», направленная на обеспечение продаж продукции предприятия. Целью разработки данного Web-приложения является создание среды, осуществляющей рекламу товара и прием заказов на покупку.

Разрабатываемое Web-приложение «artposters.kz» предназначено для:

— рекламы продукции и поиска потенциальных клиентов;

— регистрации заказчиков;

— ведения учета заказчиков с полной записью их основных данных (название, адрес, телефон, электронная почта и др.);

— учета заказов, оформляемых заказчиком;

1.3 Цель и назначение

Целью создания программного обеспечения Web-приложения информационных систем «artposters.kz» для отдела «Архитектуры и Дизайна» компании ТОО «ILLUSTRATE studio» является повышение эффективности маркетинговой деятельности отдела. Маркетинговая деятельность — это деятельность по решению подразделением маркетинга стоящих перед ним практических задач в коммерческой компании (предприятии, фирме).

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

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

Критерием эффективности функционирования Web-приложения является увеличение числа клиентов, повышение эффективности продаж декоративных постеров.

2. Разработка структуры Web-приложения и выбор средств программной реализации

2.1 Понятие, виды, классификация сайтов

Сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети») — совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем илиIP-адресом).

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

Первый в мире сайт info.cern.ch появился в 1990 году. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы серверов ибраузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты.

Все инструменты, необходимые для работы первого сайта, Бернерс-Ли подготовил ещё раньше — в конце 1990 года появились первый гипертекстовый браузер WorldWideWeb с функционалом веб-редактора, первый сервер на базе NeXTcube и первые веб-страницы.

«Отец» веба считал, что гипертекст может служить основой для сетей обмена данными, и ему удалось претворить свою идею в жизнь. Ещё в 1980 году Тим Бернерс-Ли создал гипертекстовое программное обеспечение Enquire, использующее для хранения данных случайные ассоциации. Затем, работая в Европейском центре ядерных исследований в Женеве (CERN), он предложил коллегам публиковать гипертекстовые документы, связанные между собой гиперссылками. Бернерс-Ли продемонстрировал возможность гипертекстового доступа к внутренним поисковику и документам, а также новостным ресурсам Интернета. В результате, в мае 1991 года в CERN был утверждён стандарт WWW.

Тим Бернерс-Ли является «отцом» основополагающих технологий веба — HTTP, URI/URL и HTML, хотя их теоретические основы были заложены ещё раньше. В 1940;х годах Ванневар Буш выдвинул идеи расширения памяти человека с помощью технических устройств, а также индексации накопленной человечеством информации для её быстрого поиска. Теодор Нельсон и Даг Энгельбарт предложили технологию гипертекста — «ветвящегося» текста, предоставляющего читателю разные варианты чтения. Xanadu, так и не законченная гипертекстовая система Нельсона, была предназначена для хранения и поиска текста, в который введены взаимосвязи и «окна». Нельсон мечтал связать перекрёстными ссылками все тексты, созданные человечеством.

В настоящее время Тим Бернерс-Ли возглавляет основанный им Консорциум Всемирной паутины (World Wide Web Consortium), который занимается разработкой и внедрением стандартов Интернета[2].

Web-приложения бывают двух видов: персональные и коллективные.

1) Персональные страницы.

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

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

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

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

Музыка, книги, кино, живопись, туризм, коллекционирование, работа, компьютер и многие другие категории интересов могут лежать в качестве основной темы сайта. Разделы в «Виртуальном фэн-клубе» могут быть такие как: «Новости», биографическо-справочный материал, обзоры и рецензии, коллекции фото. Иногда может быть «Гостевая книга» в которой посетители сайта могут оставлять свои заметки на тему, которой посвящен данный сайт.

2) Коллективные странички.

«Сетевое издание». Журнал, газета, альманах, агентство новостей и т. д. Динамичный, часто обновляемый и объемный сайт, который весьма сходен с «фан-клубом» и «обозрением». Такой сайт может состоять уже из сотен и даже тысяч документов. Также в структуре могут сочетаться черты «сетевого журнала» и тестовой лаборатории.

Еще один тип изданий этой группы — электронные копии традиционных печатных изданий, газет и журналов.

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

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

По доступности сервисов Web-приложения подразделяются на:

— открытые — все сервисы полностью доступны для любых посетителей и пользователей;

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

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

По физическому расположению:

— общедоступные сайты сети Интернет;

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

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

1) Интернет-портал — многокомпонентная разветвлённая структура, скомпонованная из функционально самодостаточных сайтов самостоятельных организаций или подразделений корпоративной структуры;

2) Информационные ресурсы:

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

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

3) Интернет-представительства владельцев бизнеса (торговля и услуги, не всегда связанные напрямую с Интернетом):

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

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

— корпоративный сайт — содержит полную информацию о компании-владельце, услугах / продукции, событиях в жизни компании. Отличается от сайта-визитки и представительского сайта полнотой представленной информации, зачастую содержит различные функциональные инструменты для работы с контентом (поиск и фильтры, календари событий, фотогалереи, корпоративные блоги, форумы). Может быть интегрирован с внутренними информационными системами компании-владельца (КИС, CRM, бухгалтерскими системами). Может содержать закрытые разделы для тех или иных групп пользователей — сотрудников, дилеров, контрагентов и пр.;

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

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

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

7) Сайт-квест — Интернет-ресурс, на котором организовано соревнование по разгадыванию последовательности взаимосвязанных логических загадок;

8) Веб-сервис — сайт, созданный для выполнения каких-либо задач или предоставления услуг в рамках сети WWW;

9) Доска объявлений — представляет собой ресурс, на котором есть возможность размещения публичного объявления о продаже или покупке товаров и услуг, также возможно оставить какую-либо информацию краткого содержания;

10) Каталог сайтов — это ресурс, на котором размещаются сайты и блоги, например, Open Directory Project. Каталоги бывают платные и бесплатные. Также каталоги могут способствовать продвижению ресурса, который размещается в каталоге сайтов.

11) Поисковые сервисы — например, Yahoo!, Google;

12) Почтовый сервис;

13) Веб-форумы;

14) Блоговый сервис;

15) Файлообменный пиринговый сервис — например, Bittorrent;

16) Облачное хранилище данных — например, Skydrive;

17) Сервис редактирования данных — например, Google Docs;

18) Фотохостинг — например, Picnik, ImageShack, Panoramio, Photobucket;

19) Видеохостинг — например, YouTube, Dailymotion;

20) Социальные медиа;

21) Комбинированные веб-сервисы (Социальные сети) — например, Facebook, Twitter;

22) Комбинированные веб-сервисы (Специализированные социальные сети) — например, MySpace, Flickr[3].

2.2 Этапы создания Web-приложения

Первый этап создания Web-приложения это разработка шаблона.

На данном этапе разрабатывается дизайн основной и типовых страниц Web-приложения.

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

Второй этап это HTML-верстка.

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

В небольших студиях html-кодированием занимается дизайнер, создавший макет сайта.

Третий этап — программирование.

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».

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

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

Четвертый этап это тестирование.

Завершающим этапом разработки сайта под ключ является конечно же тестирование.

Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.

Internet Explorer (версии 6) по-своему трактовал HTML-стандарты (отголоски старой борьбы за лидерство с Netscape). Этот морально устаревший браузер создавал много проблем для веб-дизайнеров. Многие разработчики даже предлагали отказаться от верстки под IE 6, однако наличие этого браузера в стандартной поставке Windows XP, а значит и его присутствие на многих пользовательских компьютерах, вынуждало веб-дизайнеров тестировать свои проекты в нём. По состоянию на лето 2012 года IE 6 используется на 6% пользователей, в основном за счёт Китая, где его используют 21% пользователей.

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

Сроки контролирует менеджер проекта. Также на этом этапе привлекают к работе дизайнера, чтобы он провёл авторский надзор.

Пятый этап — размещение сайта в Интернет.

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

Наполнение контентом и публикация.

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

Внутренняя SEO-оптимизация.

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

Внешняя SEO-оптимизация.

Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма — она как магия, классифицируется на «белую» и «черную» — такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO оптимизация это трудоёмкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

Шестой этап — сдача проекта.

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

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

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

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

Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960×640 px (пикселей) — размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновка и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки. Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы.

Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop, GIMP или другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений[4].

2.3 Базовые структуры сайта

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

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

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

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

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

Структура каталогов.

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

— Линейная — страницы располагаются в определенном порядке (Рисунок 2.1). Переход с одной страницы на другую строго определен. Такая структура обоснована, например, при обучении. Располагая страницы в определенном порядке, вы можете быть уверены, что пользователь не пропустит нужный материал.

Рисунок 2.1 — Линейная структура сайта

— Иерархическая — страницы разбиты по категориям и подкатегориям (Рисунок 2.2). Такая структура наиболее удобна.

Рисунок 2.2 — Иерархическая структура сайта

— Произвольная — страницы расположены в свободном порядке (Рисунок 2.3). Такая структура оправдана только для небольших сайтов.

Рисунок 2.3 — Произвольная структура сайта

Структура навигации.

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

— Где я нахожусь?

— Куда могу пойти?

— Как туда добраться?

— Как вернуться назад?

Для решения этих задач используются различные варианты. Например, можно как-то выделить страницу в меню, на которой сейчас находится пользователь, а само меню сделать видимым на всех страницах сайта[5].

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

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

Основные системы навигации:

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

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

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

Более оптимальным решением является следующее: оставить лишь вид кнопки (фоном), а текст на ней все-таки оформить в виде ссылки. Этог нетрудно добиться средствами CSS. Пример обыкновенной кнопочной навигации:

3) Навигационные карты. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране. Карты обязательно надо дублировать хотя бы скромным горизонтальным меню внизу страницы. Иначе, при малейшем сбое пользователь вообще никуда не сможет перейти[5].

2.4 Выбор программных средств для создания web-представительства

Обзор HTML — редакторов

Macromedia HomeSite.

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

Рисунок 2.4 — Macromedia HomeSite

Рабочее пространство программы можно условно поделить на три части: первая, самая большая — собственно окно с содержанием документа, вторая часть, находящаяся левее, по умолчанию содержит перечень документов, имеющихся на диске. И, наконец, вверху, кроме традиционного меню, имеются несколько панелей с наиболее часто используемыми функциями, вид которых, впрочем, можно настроить на свой вкус[6].

Macromedia HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. Данный факт придется по душе опытным пользователям, которые не ограничиваются средствами языка гипертекстовой разметки и используют более сложные языки веб-программирования. Если же Вас не устраивает текущая цветовая схема подсветки синтаксиса, то это не проблема — можно отредактировать существующую, или даже создать собственную схему оформления документов. HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML, справочник тегов и включающая удобные всплывающие подсказки по текущему дескриптору — для их вызова достаточно нажать F2, и пользователю демонстрируются все возможные атрибуты для данного тега.

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

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

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

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

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

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

соответствует комбинация клавиш Ctrl+Break. Впрочем, пользователь волен назначить практически любой команде удобное ему сочетание клавиш.

SiteEdit.

Программа SiteEdit создана российской компанией EdgeStile и позиционируется разработчиками как система управления сайтом. В отличие от HomeSite, SiteEdit относится к так называемым визуальным средствам разработки — WYSIWYG-редакторам (от заглавных букв выражения What You See Is What You Get — «что видите, то и получите»).

После первого запуска программы появляется готовый шаблон веб-узла.

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

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

Программа предлагает несколько шаблонов оформления: book, galeon, kafe, palm_skin, stroitel, благодаря которым можно существенно изменить облик всего сайта в целом.

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

Рисунок 2.5 — SiteEdit

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

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

Напрямую сохранить код странички из программы невозможно, для этого необходимо выбрать пункт «Просмотр страницы в браузере», и лишь из браузера можно сохранить страницу в виде html-файла. Данный подход, видимо, связан с тем, что в версиях Standard и Business программы SiteEdit имеется возможность выгрузки всего проекта сразу на хостинг, однако в бесплатной версии Start данная возможность, к сожалению, отсутствует.

Еще одна Freeware-программа — это HTML Source (Рисунок 2.6). Первое, что отличает его от других редакторов — небольшой размер дистрибутива программы — всего 1,5 Мб. Несмотря на это функциональность и возможности программы не уступают другим[7].

Рисунок 2.6 — HTML Source

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

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

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

HTML Source предлагает подсветку синтаксиса HTML-файлов.

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

В меню «Tools» собраны все инструменты данного программного средства. Он состоит из следующих пунктов:

— Пункт «Convert Case» позволяет сменить регистр букв, т. е. либо инвертировать его, либо привести к одному определенному;

— Пункт «Convert CodePage» позволяет быстро сменить кодировку всей страницы;

— Встроенный модуль проверки орфографии;

— Средство для оптимизации HTML-кода под названием Tidy, который приводит вид документа в соответствии с требованиями организации W3C, которая и занимается разработкой стандартов языка гипертекстовой разметки.

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

Еще одним мощным средством создания Web-приложений является Macromedia Dreamweaver MX 2004.

Возможности Macromedia Dreamweaver MX 2004 (Рисунок 2.7) впечатляют. После установки пользователя просят выбрать внешний вид программы, который отличается в зависимости от подхода к созданию веб-документов. При выборе «Code» интерфейс программы будет подстроен под нужды кодировщика, а при выборе «Design» — соответственно, дизайнера. Всегда имеется возможность для переключения между этими двумя режимами, а также доступен третий, комбинированный режим — рабочая область программы делится на две части.

Рисунок 2.7 — Macromedia Dreamweaver MX 2004

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

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

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

Приложение имеет встроенный инструмент под названием Tag Chooser, с помощью которого можно вставить не только любой HTML-тег, но и основные выражения и операторы таких языков программирования, как JavaScript, ASP. Net, PHP, WML и ColdFusion.

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

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

Macromedia Dreamweaver MX 2004 может использоваться совместно с другими продуктами компании — Macromedia Fireworks, Flash и др.

Для создания графических объектов лучше всего подходят программу от Adobe (PhotoShop), для анимации пакеты программ от Xara и Ulead. Помимо кнопок, меню и фона на странице могут быть баннеры. Это картинки с различной рекламой, часто анимированные. Среди анимации используется стандарт Flash, созданный корпорацией Macromedia. По своему устройству «флэш-файлы» похожи на «анимированный» GIF. Вот только реализованы они не на основе растровых изображений, а с использованием векторной графики. Самое главное, что flash-анифация занимает значительно меньше места чем обыкновенная графика.

Музыка. Есть возможность вставить для проигрывания MIDI, WAV — файлы, которые будут проигрываться при просмотре страницы. Для них с помощью JAVA — апплетов можно сделать кнопки управления мелодией.

JAVA — апплеты. Язык программирования JAVA был специально создан для Интернет. С помощью него можно создать довольно эффектные элементы страницы — например, выезжающее меню или анимированные кнопки.

GGI — скрипты. Формы. Другая дизайнерская полезность, созданная программистами. GGI — скрипты — это «мини — программы», ссылки на которые можно вставить в тело самой страницы. Эти программы помогают автматизировать многие сложные операции, вводимые посетителями, данными и т. д. С помощью них можно создать гостевую книгу, анкету, поисковик и многие другие вещи.

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

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

Навигационная панель присутствует на экране постоянно, упрощая перемещение по сайту. При щелчке по любой кнопке — ссылке новая страница открывается во втором большом окне[8].

Язык программирования php

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