Для успешного развития предприятия необходимо эффективное привлечение клиентов. На сегодняшний день наиболее актуальным способом для достижения этой цели является создание Web-сайта. Это напрямую связано с тем, что практически любая сфера деятельности, независимо от того связана она с товарами или услугами, нуждается в продвижении, основой которого является информирование.
Всемирная паутина уже настолько глубоко укоренилась в нашей жизни, что публикация информации в WWW стала нормой. В настоящее время WWW включает в себя миллионы сайтов, работающих по архитектуре клиент-сервер. Доступ к информации осуществляется посредством использования глобальной сети Интернет по протоколу HTTP. Для навигации во всемирной паутине используются специальное программное обеспечение — web-браузеры, которые значительно облегчают пользование ресурсами WWW. Большая часть информация в web-браузере отображается в виде web-страниц, которые являются основным элементом WWW.
Основной задачей грамотно построенного сайта компании или предприятия является превращение посетителя, зашедшего на сайт, в потенциального клиента.
Актуальность темы обусловлена необходимостью создания информационного web-сайта для производственно-коммерческого предприятия ООО «Альк», поскольку это позволит заявить о себе в полной мере, предоставить полную информацию о возможностях, услугах и ценах на предприятии, а также иметь собственный Интернет-ресурс.
Целью дипломной работы является разработка и реализация web-сайта для предприятия ООО ПКП «Альк».
1. Описание предприятия и постановка задач
1.1 Общие сведения
Наименование общества: Общество с ограниченной ответственностью производственно-коммерческое предприятие «Альк». Директор: Педоренко Юрий Валентинович.
Целью деятельности общества является извлечение прибыли. Основными видами деятельности ООО ПКП «Альк» являются:
- Производство ювелирных изделий;
- Оптовая торговля ювелирными изделиями;
- Розничная торговля Ювелирными изделиями;
- Обработка драгоценных камней, кроме алмазов;
- Система сбыта услуг ООО ПКП «Альк» характеризуется прямыми продажами. Доля прямых продаж составляет 100%.
- Общество вправе осуществлять любые виды деятельности, не запрещенные законодательством, после внесения изменений в устав.
- Виды деятельности, для занятия которыми необходимы лицензии (специальные разрешения) осуществляются в порядке, установленном действующим законодательством.
Юридический статус общества определен согласно Гражданскому Кодексу РФ. Общество является юридическим лицом, имеет самостоятельный баланс, печать, штампы, другие необходимые реквизиты, расчетный и другие счета в банках.
Строительная компания описание деятельности
... деятельности предприятия» и приобретение навыков самостоятельной работы в области экономических расчетов и обобщений. Краткая характеристика строительного предприятия Одним из участников строительного рынка Иркутской области является ООО «СМП-Восток». Общество ... Данный факт свидетельствует о расширении использования организацией наименее дорогостоящих источников финансирования. Итак, данное ...
Общество в своей деятельности руководствуется действующим законодательством, учредительным договором, настоящим Уставом.
Для осуществления своей деятельности Общество имеет право:
- совершать, как в стране юридического местонахождения, так и в иных странах, всякого рода сделки и иные юридические действия, как с юридическими, так и физическими лицами.
- строить, приобретать, брать и сдавать в аренду, как в стране юридического местонахождения, так и в иных странах подсобные предприятия для своей деятельности, а также всякого рода движимое и недвижимое имущество;
- осуществлять в установленном порядке различного рода контакты по вопросам, входящим в компетенцию Общества, с учреждениями, организациями, предприятиями, фирмами, банками, обществами, ассоциациями, а также с их представителями и отдельными гражданами;
- открывать филиалы, представительства, дочерние и совместные предприятия, выступать в роли учредителей или участников в акционерных обществах любого типа.
Создаваемые предприятия, не являющиеся юридическими лицами, отвечают по обязательствам Общества, а Общество отвечает по их обязательствам;
- открывать расчетные, специальные, ссудные, текущие, валютные и иные счета в банках как в стране юридического местонахождения, так и в иных странах в соответствии с законодательством;
- пользоваться в установленном порядке банковскими кредитами в отечественной и иностранной валюте и нести ответственность за их целевое использование и своевременный возврат;
- осуществлять владение, пользование и распоряжение своим имуществом в соответствии с целью своей деятельности и назначением имущества;
- выступать истцом и ответчиком в народном и арбитражном суде, третейском суде, заключать мировые соглашения.
1.2 Организационная структура
В начале изучения предметной области необходимо ознакомиться и изучить организационную структуру предприятия. Для наглядного изображения представим организационную структуру в виде схемы, представленной на рисунке 1.1.
Предприятие состоит из следующих кадров: директор, бухгалтер, менеджер, диспетчер, ювелиры и агенты.
Предприятие имеет линейную организационную структуру. Во главе предприятия стоит директор, который руководит работой менеджера и бухгалтера. Менеджер организует работу с клиентами, такую как: прием заявок, занесение данных о клиенте, и т.п., а диспетчер в свою очередь принимает звонки от клиентов и заносит их данные о желаемых заказах в базу данных, передавая в дальнейшем эту информацию агентам, а также выдает дальнейшие инструкции ювелирам и другим работникам предприятия, которые занимаются созданием различных ювелирных изделий, после чего ювелиры заполняют необходимый документ который выдаётся менеджером и называется листом заказа, и в конце рабочего дня возвращают его уже заполненным непосредственно обратно менеджеру, который в свою очередь формирует отчет о проделанной работе и передаёт его в высшее звено.
Схематичное представление организационной структуры управления ООО ПКП «Альк» представлено на рисунке 1. Организационная схема разработана для наглядного видения организационной иерархией на предприятии.
Функциями директора являются:
- общий контроль деятельности компании;
- разработка стратегий компании;
- решение вопросов, требующих вмешательства руководства;
- анализ оперативной деятельности компании.
- сбор информации от сотрудников;
- решение определенных вопросов взаимодействия с клиентами;
- передача необходимых инструкций от вышестоящего звена к нижестоящему.
Функциями менеджера являются:
- непосредственная работа с клиентом;
- передача инструкций диспетчерам;
- анализ отчетности деятельности сотрудников компании;
- формирование отчетности о проделанной работе.
Функциями бухгалтера являются:
- выполнение непосредственных служебных поручений руководства;
- ведение бухгалтерского учета;
- подготовка данных по соответствующим участкам бухгалтерского учета, для составления отчета;
- производство начисления и перечисления заработной платы и/или налоговых сборов в федеральный, региональный и местный бюджеты.
Функциями диспетчера являются:
- передача информации менеджеру и в вышестоящее звено;
- совершение звонков потенциальным клиентам;
- приём звонков от клиентов;
- формирование личных и доверительных отношений с клиентами;
- формирование отчетности о проделанной работе.
Функциями агента являются:
- передача информации менеджеру;
- прием звонков от клиентов;
- занесение данных о заказе в базу данных.
Функциями ювелиров являются:
- разработка и создание ювелирных изделий;
- обработка драгоценных камней и металлов.
1.3 Анализ существующих web-сайтов конкурентов
Проанализируем сайты конкурентов для более точного представления будущего проекта с точки зрения верстки, дизайна, подбора палитры цветов, структуры информации, наполнения на сайте.
В ходе поиска было обнаружено, что на территории города Калининград сайтов подобной тематики очень много, что с точки зрения маркетинга очень экономически выгодно.
Для примера были взяты три первые, попавшиеся сайта из поисковой выдачи «Google.ru». Рассмотрим эти Web-сайты:
1. ООО «Амулет» 236038, Калининградская обл., г. Калининград, ул. Гагарина, 106
2. ООО «Сувениры Балтики» 236039, Калининградская обл., г. Калининград, ул. Портовая, 45.
3. ООО «Янтарная Лагуна» 238580, Калининградская обл., пос. Янтарный, ул. Советская д. 61 М
Проделанный анализ web-сайтов конкурентов можно увидеть ниже в таблице 1.1.
Таблица 1.1.
Анализ сайтов-конкурентов
|
amulet39.ru |
suvenirbalt.com |
amberlagoon.net |
||
|
О компании |
ООО «Амулет» — одно из ведущих предприятий в Калининградской области по производству ювелирных украшений из серебра, бижутерии из янтаря и сувениров из латуни с янтарем с многолетней историей. Дата основания компании 9 сентября 1993 года. На отраслевом рынке известны как проверенные и надежные партнеры. За годы своего существования компания не раз экспериментировала с модными тенденциями в серебре. Предприятие имеет замкнутый цикл производства: обработка янтаря, изготовление моделей и литье фурнитуры для своих изделий. Результат — мобильность и гибкость в работе, высокое качество, большой ассортимент выпускаемой продукции. Модельный ряд впечатляет богатством выбора. Более 2000 моделей женских украшений и сувениров с янтарными вставками. |
Созданная в 1996 году фирма ООО «Сувениры Балтики» — ведущее предприятие в Калининградской области по производству изысканных эксклюзивных изделий из янтаря в серебре и золоте. Высокий профессионализм, творческий подход и оригинальность в поиске новых стилистических решений позволяют фирме создавать оригинальные и изящные изделия, соответствующие духу времени. Выполняем заказы эксклюзивных моделей по индивидуальным эскизам. Изделия фирмы получили заслуженное признание у специалистов и широкого круга покупателей не только в России, но и в странах ближнего и дальнего зарубежья. Подтверждением этого служат многочисленные награды российских и международных ювелирных выставок, и ярмарок, полученные фирмой на протяжении своей работы. |
«Янтарная лагуна» — производственное предприятие, специализирующееся на производстве изделий из янтаря, так же янтаря в серебре и позолоте. Широкий ассортимент изделий из натурального Балтийского янтаря. Используя передовые технологии, современное оборудование и учитывая пожелания клиентов, постоянно совершенствуются, обновляют и расширяют ассортимент. Высокое качество, индивидуальный подход к каждому клиенту, высокий уровень сервиса главные конкурентные преимущества. |
|
|
Дизайн |
Дизайн сайта прост и не навязчив. Сочетание серого и оранжевого цвета в сайтах данной тематики распространено, не напрягает глаз и в тоже время смотрится неплохо. Видно, что это шаблонный web-сайт, и он сделан на бесплатном CMS модуле. |
Дизайн данного сайта симпатичнее, работает на сочетании светло-серого и коричневого цвета, сайт интереснее в плане дизайна, а это привлекает клиента, но в отличии от первого сайта здесь явный минус с наполнением сайта, информации очень мало. Сайт выглядит пустым. |
Этот сайт разработан более основательно, он на много симпатичнее, чем сайты до него, он интереснее и удобен в использовании, видно, что над сайтом потрудились. Использовался белый цвет фона в качестве задника, что является стандартом и всегда выглядит хорошо. Из минусов можно отметить, то что контактная информация в шапке расположена в фрейме с картинкой, а это сильно влияет на удобство при использовании данного сайта. |
|
|
Навигация |
Есть такие разделы как:
|
Есть такие разделы как:
|
Есть такие разделы как:
|
|
1.4 Технико-экономическое обоснование
1. Основанием для проведения работ является просьба директора ООО ПКП «Альк».
2. Заказчик: Директор ООО ПКП «Альк» — Педоренко Юрий Валентинович
3. Разработчик: студент Инженерно-технического института БФУ им. И. Канта — Малахов Тимофей Андреевич
4. Работа выполняется на платной основе. Оплата производится в соответствии со сметой затрат. Все расходы на поддержание работоспособности сайта заказчик берет на себя.
Сроки начала и окончания работ:
- Дата начала работы 17 апреля 2017 года
- Дата окончания работы 11 июня 2017 года
1 Характеристика объекта автоматизации
Объектом разработки является web-сайт, который, в свою очередь должен обеспечить взаимодействие с клиентами и улучшить качество представляемых услуг.
2 Перечень и характеристика недостатков в организации и управлении
При анализе деятельности были выявлены следующие недостатки:
1) Отсутствует информация для потенциальных потребителей в сети интернет;
2) Долгая работа с документами.
3 Характеристика целей создания
Web-сайт ООО ПКП «Альк» разработан для повышения качества работы предприятия. Основным назначение web-сайта является информирование потенциальных клиентов, а также удобство заказа товаров и услуг для клиентов в системе интернет.
4 Функции и задачи создаваемой системы
Web-сайт включает в себя следующие автоматизированные функции:
1) Приток новых клиентов;
2) Информирование потенциальных клиентов;
3) Увеличение прибыли предприятия;
4) Рост имиджа предприятия.
5 Выводы и предложения
Данный интернет проект позволит эффективно привлекать новых клиентов и потребителей. Внедрение web-сайта для ООО ПКП «Альк» позволит, в целом повысить производительность и конкурентоспособность компании.
После того как будет запущен сайт, возникнет необходимость его администрировать. Так как из имеющихся кадров предприятия есть человека со знаниями сетевых технологий, нет нужды в поиске кандидатуры на должность «системного администратора». Администратор будет выполнять функции редактирования, текстового наполнения и технического обслуживания web-сайта. Так же администратор должен будет обучить других сотрудников минимальным знаниям необходимые для работы с web-сайтом.
1.5 Разработка технического задания
На основе проделанной ранее работы было сформировано техническое задание на создание web-сайта для ООО ПКП «Альк».
Производственно-коммерческое предприятие «Альк» ориентировано на создание ювелирных изделий и украшений из драгоценных металлов и янтаря.
С директором предприятия было разработано и согласовано всё текстовое наполнения для web-сайта. Такие вопросы как: цветовая палитра, элементы web-дизайна, адаптивность под разные устройства, также были обсуждены и согласованы с директором предприятия.
Основные бизнес-процессы предприятия:
- взаимодействие с клиентом;
- информирование клиента;
- прием заявки от клиента.
1.6 Требования к структуре и функционированию системы
Web-сайт должен поддерживать следующие режимы функционирования:
1. Основной режим, в котором web-сайт выполняет все свои основные функции;
2. Профилактический режим, в котором web-сайт не выполняют своих функций.
В основном режиме функционирования web-сайт должен обеспечивать:
1. Работу пользователей — 24 часов в день, 7 дней в неделю (24х7);
2. Выполнение своих функций — сбор, обработка и загрузка данных;
3. Хранение данных, предоставление отчетности.
В профилактическом режиме web-сайт должен обеспечивать возможность проведения следующих работ:
1. техническое обслуживание;
2. модернизацию аппаратно-программного комплекса;
3. устранение аварийных ситуаций.
Общее время проведения профилактических работ не должно превышать 5% от общего времени работы web-сайта в основном режиме.
1 Требования к сохранению работоспособности web-сайта в различных вероятных условиях
В зависимости от различных вероятных условий web-сайт должен выполнять требования, приведенные в таблице 2.
Таблица 1.2.
Требования к сохранению работоспособности web-сайта
|
Вероятное условие |
Требование |
|
|
Нарушения в работе системы внешнего электроснабжения серверного оборудования продолжительностью до 15 мин. |
Функционирование в полном объеме. |
|
|
Выход из строя сервера |
Уведомление администратора сервера |
|
2 Требования к надежности для web-сайта в целом
Уровень надежности должен достигаться согласованным применением организационных, организационно-технических мероприятий и программно-аппаратных средств.
Надежность должна обеспечиваться за счет:
- применения технических средств, системного и базового программного обеспечения, соответствующих классу решаемых задач;
- своевременного выполнения процессов администрирования Web-сайта;
- соблюдения правил эксплуатации и технического обслуживания программно-аппаратных средств;
- предварительного обучения пользователей и обслуживающего персонала.
3 Перечень аварийных ситуаций, по которым регламентируются требования к надежности
Под аварийной ситуацией понимается аварийное завершение процесса, выполняемого web-сайта. При работе сайта возможны следующие аварийные ситуации, которые влияют на надежность работы системы:
1) сбой в электроснабжении сервера;
2) сбой в электроснабжении обеспечения локальной сети (поломка сети);
3) ошибки сайта, не выявленные при отладке и испытании сайта;
4) сбои программного обеспечения сервера.
4 Требования к надежности технических средств и программного обеспечения
К надежности оборудования предъявляются следующие требования:
- в качестве аппаратных платформ должны использоваться средства с повышенной надежностью;
- применение технических средств, соответствующих классу решаемых задач;
- аппаратно-программный комплекс должен иметь возможность восстановления в случаях сбоев.
К надежности электроснабжения предъявляются следующие требования:
- с целью повышения отказоустойчивости системы в целом необходима обязательная комплектация компьютеров источником бесперебойного питания с возможностью автономной работы системы не менее 10 минут.
- Надежность аппаратных и программных средств должна обеспечиваться за счет следующих организационных мероприятий:
- предварительного обучения пользователей и обслуживающего персонала;
- своевременного выполнения процессов администрирования;
- соблюдения правил эксплуатации и технического обслуживания программно-аппаратных средств;
- своевременное выполнение процедур резервного копирования данных.
2.
Проектирование макета и реализация готового web-сайта
2.1 Создание чернового макета web-сайта
Создание информационного web-сайта для ООО ПКП «Альк», позволит предприятию заявить о себе в полной мере, предоставить полную информацию о возможностях, товарах, услугах и ценах, а также даст возможность иметь собственный Интернет-ресурс.
В первую очередь был разработан черновой макет web-сайта, в котором показывалось примерное расположение контента на сайте, количество блоков, страниц и других элементов web-дизайна. В связи с популярными трендами в web-разработки было принято решение о реализации «Домашней» страницы в стиле «landing page». Целевая страница (англ. landing page, также «посадочная страница») — web-страница, главной задачей которой является сбор контактных данных целевой аудитории. Используется для усиления эффективности рекламы, увеличения аудитории. Целевая страница обычно содержит информацию о товаре или услуге. [1]
В результате было решено, что «Домашняя» страница будет иметь 7 блоков различной высоты, оформленных в едином стиле. В 4 из 7 блоков будет присутствовать кнопка с призывом к действию. Один из блоков будет содержать форму обратной связи для заполнения личных данных клиента. Шапка сайта или по-другому «header», будет представлять из себя полосу черного цвета, в которой будет находится логотип предприятия и динамическое навигационное меню. Внизу web-сайта будет расположен подвал со всей основной юридической информацией о предприятии и продублированным меню для удобства в навигации. На языке разметки гипертекстовых документов «HTML» подвал сайта называется «footer» и задается соответствующим парным тегом <footer>. [11]
2.2 Разработка дизайна web-сайта на основе чернового макета
На основе ранее созданного чернового макета разрабатывается готовый дизайн web-сайта. Для этого использовался мультифункциональный графический редактор, произведённый и распространяемый Adobe Systems Incorporated — Adobe Photoshop CC 2017. Готовый макет разрабатывался под «FULL HD» мониторы с разрешением 1920×1080 пикселей и соотношением сторон 16:9, но с минимальным значением ширины сайта в 1020 пикселей, что позволит web-сайту выглядеть хорошо на большинстве современных устройств и мониторах. Далее на рисунках ниже показаны все элементы web-дизайна, а также цветовая палитра и сочетание используемых шрифтов на сайте. [12]
Далее показан готовый макет главной страницы web-сайта в Adobe Photoshop CC 2017.
Структура данного макета имеет следующий вид:
1. Header (Шапка сайта)
2. Блок 1 — Блок 7 (Основной контент сайта)
3. Footer (Подвал сайта)
Макет web-сайта сохранен в формате «PSD» для дальнейшей работы с ним. PSD — это растровый формат сохранения и эксплуатации графических данных, который использует сжатие без потери в качестве, созданный специально для Adobe Photoshop. [13]
Ниже предоставлены изображения всех страниц разработанного web-сайта для данного предприятия. Сайт имеет 4 страницы:
1) Главная или домашняя страница;
2) О компании;
3) Контакты;
4) Информация.
На сайте имеется форма обратной связи, она располагается на страницах: «Главная» и «Контакты». После заполнения формы клиентом, его личные данные будут отправляться на электронную почту данного предприятия orders@pkpalk.info.
2.3 Разработка мобильной и планшетной версии web-сайта
Приблизительно 20% трафика в Российском сегменте интернета приходится на различные мобильные операционные системы. И данный коэффициент не прекращает расти вверх. Исходя из этого было принято решение разрабатывать мобильную и планшетную версию web-сайта. [2]
Причины разработки мобильной версии сайта:
1. Оперировать мобильной версией сайта со смартфонов и мобильных устройств значительно удобнее: отсутствие необходимости в горизонтальной прокрутке, весь функционал компьютерной версией сайта работает корректно на телефоне, смартфоне или планшете.
2. В мобильной версии сайта можно сделать вспомогательный возможности, нацеленные непосредственно на данную целевую аудиторию: осуществить отправку смс прямо с web-сайта, установить местоположение и расстояние до наиближайшего места продаж и т.п.
3. Навигация на таких сайтах разрабатывается адаптированной под «Touch screen», что также значительнее удобнее.
4. Мобильная версия web-сайта менее тяжёлая, имеет менее объемный код, по этой причине загружается быстрее, что позволяет уменьшить сократить расходы пользователя при оплате мобильного трафика.
5. Поисковые системы применяют мобильный поиск для телефонов, по этой причине и ранжироваться мобильная версия web-сайта в нем будет выше, а, следовательно, и переходов на ваш web-сайт станет больше. [12]
Виды мобильной версии сайта:
1. Мобильная версия сайта может быть идентична основному сайту: полностью повторять структуру, разделы и дизайн.
2. Независимая мобильная версия сайта. Полностью изменяется структура и функции, заимствуется только стилевое оформление, отчасти элементы и содержание, чтобы пользователь понимал, что он использует один и тот же сайт. [5]
В случае разработки данного web-сайта был сделан выбор в пользу мобильной версии полностью идентичной основному сайту. С идентичной структурой и дизайном.
Для наглядности на рисунке ниже, изображено то, как мобильная версия сайта будет выглядеть на экране смартфона.
Мобильная версия сайта разрабатывалась под минимальное значение ширины равное 380 пикселям. При переходе на сайт с мобильного устройства происходит автоматическое перенаправление на мобильную версию сайта.
Навигационное меню в мобильной версии видоизменяется на кнопку «гамбургер» при нажатии на которую появляются пункты меню. Это показано на следующем рисунке.
Планшетная версия сайта разрабатывалась под минимальное значение ширины равное 768 пикселям. В целом полностью идентична версии для персонального компьютера, но также имеет меньший вес и различное расположение некоторых элементов.
Макеты мобильной и планшетной версии сайта также были созданы в Adobe Photoshop 2017. На этом этап с разработкой внешнего вида сайта завершается. В следующей главе будет описан процесс создания готовой версии сайта, а также показано использованное для этих целей программное обеспечение.
2.4 Создание готового web-сайта средствами Adobe Muse
Для создания рабочей версии сайта, которую в последующем можно загрузить на хостинг, использовался редактор, ориентированный на создание сайтов — Adobe Muse.
Adobe Muse, разработанный компанией Adobe Systems, стал настоящим подарком для тех, кто только приступает к ознакомлению с аспектами кодировки web-сайтов. Регулярно увеличивающееся число пользователей мировой сети
направило компанию к созданию обновляемого и простого в применении редактора для создания web-сайтов. Появление Adobe Muse произвело настоящий фурор в мире цифровых технологий. [13]
Многофункциональный программный продукт существенно упрощает разработку web-сайтов. Различные степени сложности, от визиток и портфолио вплоть до web-сайтов с большим количеством страниц, которые легко и быстро создать, не расходуя время на проработку кода. Главная задача Adobe Muse — это дать возможность разрабатывать высококачественные ресурсы, не обладая при этом многолетним опытом web-программиста. Для работы с редактором достаточно знать в общих чертах процесс создания web-сайта. Доступный и понятный интерфейс не требует особой расшифровки. На странице цифрового продукта располагаются панели с инструментами для работы. Поддержка новейших стандартов кодирования позволяет создавать сложные страницы с анимацией и видео файлами. Для Adobe Muse выбран самый широкий список различных шрифтов и цветовых решений. [13]
Из преимуществ Adobe Muse можно выделить:
1. Программа обладает высокой скоростью работы и большим перечнем возможностей.
2. В Adobe Muse представлена возможность разрабатывать различные версии сайтов под планшетные устройства и телефоны. И таким способом охватить ещё большее число пользователей.
3. Adobe Muse реализовывает поддержку новейших стандартов web-разработки: HTML5 и CSS3. Это означает, что в формируемых страницах имеется возможность располагать разнообразные интерактивные составляющие, такие как анимацию, parallax-эффекты и т.д.
4. Допускается бесплатное использование программы в течении 30 дней.
5. Обладает собственной CMS-системой, таким образом после того, как вы загрузили сайт в интернет, вы можете по надобности редактировать содержимое через любой браузер, где бы вы не находились, дома или на работе. Для этого понадобится только знать логин и пароль от вашего хостинга.
Из минусов можно отметить:
1. Сложности с добавлением сторонних скриптов.
2. Сложности при редактировании проекта, в связи с особенностями вёрстки.
3. Постоянная привязка к самой программе. Если вы поправили код уже готовой страницы, то в случае редактирования в редакторе придётся править по новой. Как уже описывалось ранее, для создания данного web-сайта использовались: Adobe Photoshop CC 2017 и Adobe Muse CC 2017. В программе Adobe Photoshop CC 2017 был разработан внешний вид сайта, после чего все слои с растровой графикой были сохранены средствами модуля «Save for web», что в переводе означает «Сохранить для сети».
«Save for web» — это очень мощный модуль управления процессом сохранения растровых документов, который позволяет подобрать оптимальные
настройки сохраняемого изображения (оптимизировать изображение).
Модуль «Save for Web» поддерживает самые распространённые форматы для сети Интернет — JPG, GIF, PNG.
В большинстве случаев использовался формат JPEG c выставленным 70% качеством для лучшей компрессии изображения и меньшего размера файла, также для сохранения графических изображений с прозрачностью использовался формат PNG-24 со стандартными настройками. На рисунках ниже показан внешний вид модуля «Save for Web» и настройки, использованные для этого модуля.
После экспорта всей графики из Adobe Photoshop начинается этап создания готового web-сайта в Adobe Muse. Процесс создания web-сайта в данном программном обеспечении имеет следующий алгоритм:
1. В первую очередь переходим в Файл ? Новый сайт. В открывшемся окне выставляем «Максимальное значение ширины сайта» на 1020 пикселей, в списке выше выбираем «Гибкое значение ширины».
2. Далее создается шаблон, который будет использоваться на всех страницах web-сайта. В этом случае мастер-шаблон содержит «шапку» и «подвал» сайта.
3. Следующим шагом создаются все основные страницы сайта. В данном случае были созданы страницы: «Главная» или домашняя страница; «О компании»; «Контакты»; «Информация. После создания страниц, карта сайта имеет следующий вид (см. рис. 2.17):
4. После этого остается повторить созданный ранее в Adobe Photoshop макет. Сделать кликабельные кнопки, навигационное меню, импортировать сохранённую графику, разместить все элементы в соответствии с макетом, поработать с гиперссылками.
5. Завершающим этапом является экспорт HTML документа или загрузка web-сайта на FTP сервер прямиком из Adobe Muse. Экспортированный HTML документ также можно загрузить средствами сторонних FTP-клиентов таких как: FileZilla, FTPRush или WinSCP. Для загрузки файлов на FTP-сервер в Adobe Muse нужно перейти в раздел «Файл» и выбрать соответствующий пункт
6. На этом этап разработки уже рабочего web-сайта окончен. В следующей главе будет описан процесс загрузки файлов на FTP-сервер, а также предоставлена теоретическая информация о FTP-протоколе.
2.5 Загрузка файлов web-сайта на FTP-сервер
FTP — это сетевой протокол, разработанный для передачи файлов по сети Интернет. Файлы, хранящиеся на FTP-сервере, можно получить с помощью web-браузера, FTP-клиента или средствами командной строки. [3]
FTP-сервер может предоставлять различный тип доступа к файлам. Например, конфигурация «Анонимного-FTP» позволяет любому пользователю подключиться к серверу. Однако анонимным пользователям не всегда разрешено просматривать и загружать все файлы на сервере, а только определенные каталоги и определённые файлы, к которым предоставлен доступ для этой категории пользователей. Если анонимный FTP-доступ отключен, пользователи должны войти в систему, чтобы просматривать и загружать файлы. [3]
FTP-протокол был разработан в 1971 году еще до появления стека протоколов TCP/IP. Изначально работал на основе протокола NCP. Функционирует на клиент-серверной архитектуре, использует различные сетевые соединения для передачи команд и пакетов данных между сервером и клиентом. Использует для своей работы 21-ый порт. Широко используется на сегодняшний день для распространения программного обеспечения и обращения к удаленным хостам. [4]
Сессии FTP работают в пассивном или активном режимах. В активном режиме после того, как клиент инициирует сеанс через запрос к управляющему каналу, сервер устанавливает подключение к данным и начинает передачу данных обратно к клиенту. В пассивном режиме сервер использует управляющий канал для отправки клиенту информации, необходимой ему для открытия канала передачи данных. [7]
В данном случае использовался первый способ, описанный в предыдущей главе, передача файлов на FTP-сервер прямиком из Adobe Muse.
Далее пункт за пунктом будет описан алгоритм загрузки файлов на FTP-сервер:
1. В Adobe Muse нужно перейти в раздел «Файл» и кликнуть на пункт «Передача на FTP-сервер…» или нажать комбинацию клавиш CTRL+ALT+F.
2. После этого откроется диалоговое окно «Подключение к FTP-серверу». В этом окне программа предлагает пользователю ввести личные данные от FTP-сервера для дальнейшей загрузки файлов на сервер. Окно имеет следующий вид см. рисунок 2.19.
3. После ввода данных от FTP-сервера требуется нажать кнопку «Далее». Затем программа попросит ввести URL-адрес сайта, указать папку на сервере и выбрать тип передаваемых данных. После всех проделанных действий нужно нажать на кнопку «Ок». Начнется процесс передачи данных на FTP-сервер.
На этом моменте этап с загрузкой файлов web-сайта на сервер завершается.
2.6 Регистрация доменного имени и аренда хостинга
Система доменных имен или DNS — это система преобразования IP-адреса в доменное имя и наоборот, используется в основном для предоставления символьных адресов web-серверам и web-страницам. В отличие от международных телефонных номеров, система доменных имен дает каждому серверу незабываемый и простой для использования адрес. Одновременно доменные имена скрывают реальный IP-адрес, который не интересует большинство пользователей. [10]
Пользователи вводят web-адреса в поле URL в верхней части страницы своего браузера слева направо. Само доменное имя читается справа налево в соответствии с иерархией именования, рассмотренной ниже. Этот адрес предоставляет маршруты к сети, что в конечном итоге приводит к успешной загрузке страницы на стороне клиента. [10]
Например, доменное имя «www.example.com» состоит из трех основных частей и разделяется на такие уровни:
1. «.» или точка — это нулевой или корневой уровень.
2. com — это домен верхнего или первого уровня.
3. example — это домен второго уровня
4. WWW. — Это префикс поддомена для World Wide Web. Первоначальное использование этого префикса было частично случайным, а трудности произношения вызвали интерес к созданию жизнеспособных альтернатив. [10]
Стоит отметить, что система доменных имен содержит еще более высокий уровень домена, чем домен верхнего уровня. Самый высокий уровень — это корневой домен, который будет представлен одной точкой (как и во многих иерархических файловых системах, корневой каталог представлен «/»).
Если
точка для корневого домена была указана в URL-адресе, это будет справа от доменного имени верхнего уровня. Однако точка считается там, но никогда не показана. [10]
Web-хостинг — это сервис, который позволяет организациям и отдельным лицам размещать web-сайт или web-страницу в Интернете. Продажа услуг web-хостинга — это бизнес, который предоставляет технологии и услуги, необходимые для просмотра web-сайта или web-страницы в Интернете. Web-сайты размещаются или хранятся на специальных компьютерах, называемых серверами.
Когда пользователи сети Интернета захотят перейти на ваш сайт, все, что им нужно сделать, это ввести URL-адрес или домен вашего web-сайта в адресную строку своего браузера. Затем их компьютер подключится к серверу, и ваши web-страницы будут доставлены им через браузер.
Большинство хостинговых компаний требуют, чтобы вы владели своим доменом. Если у вас нет домена, хостинговые компании помогут вам приобрести его.
Для размещения web-сайта был выбран платный хостинг REG.RU. Он имеет весь спектр необходимых функций для удобного управления сайтом и редактирования информации. В REG.RU представлены уникальные возможности для регистрации и продажи доменных имён, разнообразные тарифные планы хостинга, большой выбор виртуальных выделенных серверов и физических серверов; облачные сервисы, SSL-сертификаты от ведущих компаний мира и все необходимые для работы в Сети web-инструменты. Постоянное внедрение новых продуктов и услуги, а также дополнительные связанные сервисы, что позволяет клиентам REG.RU получать наиболее полный спектр услуг для создания собственного сайта или бизнеса в Интернете и его защиты.
Из главных плюсов хостинга стоит отметить:
1. Доступные цены на предоставление хостинг услуг и регистрации доменных имен.
2. Профессиональная поддержка 24/7 по телефону и электронной почте.
3. Бесплатный SSL-сертификат при заказе хостинга и доменов.
1. Зарегистрироваться на сайте REG.RU и войти под своим аккаунтом.
2. Ввести желаемое доменное имя в поисковую строку вверху сайта и нажать кнопку подобрать.
3. После этого появится поисковая выдача доступных доменных имен с указанием их стоимости. Также будет предложено выбрать и зарегистрировать одно из них для продолжения.
4. Далее сайт перенаправляет на страницу с выбором срока регистрации домена и подключения дополнительных услуг. Мной были подключены такие услуги как: «Бесплатный SSL сертификат» и «Бесплатный хостинг на 2 месяца» с сервером на операционной системе Linux. После этого необходимо нажать на кнопку «Продолжить».
5. На следующей странице потребуется ввести всю личную информацию о владельце домена: фамилию, имя, отчество, паспортные данные, ИНН, дату рождения, почтовый адрес, номер телефона и т.д. После заполнения всех форм нужно нажать на кнопку «Далее».
6. После нажатия на кнопку «Далее» откроется страница с выбором DNS-сервера, в данном случае использовались, уже введённые изначально DNS-серверы регистратора. Для завершения процесса регистрации и перехода на страницу с оплатой домена требуется нажатие кнопки «Далее».
7. На этом шаге нужно оплатить счет удобным для вас способом. После оплаты счёта домен будет активирован в течение 15 минут. Личные данные для входа в панель управления web-сервером будут отправлены на почту, указанную при регистрации.
2.7 Получение SSL сертификата и переход на HTTPS протокол
SSL (Secure Sockets Layer — уровень защищенных сокетов) является криптографическим протоколом, обеспечивающим защищенную передачу информации в сети Интернет. В основном протокол SSL применяется с наиболее общераспространенным протоколом передачи гипертекста — HTTP (Hyper Text Markup Language) или язык гипертекстовой разметки. О присутствии защищенного соединения говорит суффикс «s» — протокол станет именоваться HTTPS (HyperText Transfer Protocol Secure).
HTTP использует 80 порт, а HTTPS — 443. [6]
Протокол SSL применяется в случае если необходимо предоставить надлежащий уровень защиты информации, передаваемую пользователем на сервер. Используется на определённых web-сайтах, работающих с электронными деньгами (интернет-банкинг, Интернет-магазины), там, где данные отправляемые клиентом на сервер должны быть зашифрованы. [6]
Такая информация как: пароль, серия и номер паспорта, номер кредитной карты, пин-код и др. предоставляет большой интерес для злоумышленников, по этой причине, в случае если вы пользуетесь незащищенным HTTP протоколом для обмена информацией с сервером, то, вводимые вами данные, в полной мере можно перехватить и применить против вас в корыстных целях. Для того чтобы предотвратить перехват вводимой личной информации, корпорацией Netscape Communications был образован протокол SSL. [6]
Протокол Secure Sockets Layer дает возможность передавать зашифрованные данные через незасекреченные каналы связи, обеспечивая высоконадежный обмен среди парами приложений, функционирующими дистанционно. Протокол в своей основе имеет несколько словев. Самый первый слой этой системы — это один из самых известных протоколов в сети интернет TCP (Transmission Control Protocol) транспортный протокол передачи данных, который обеспечивает образование пакета и прямую передачу данных в сети. muse проектирование макет сайт
Слой под номером включает в себя защитный SSL Record Protocol. Оба эти слоя являются необходимыми для защищённой передачи данных, формируя некую основу SSL, на которую в последствии накладываются прочие слои. К примеру, это может быть SSL Handshake Protocol, позволяющий определить сходство между ключами и алгоритмами шифрования данных. С целью усиления защитной функции протокола на SSL могут накладываться другие слои. [4]
С целью шифрования информации применяются криптографические ключи разной степени сложности — 40-, 56- и 128-битные. Коэффициент числа бит воспроизводит сложность используемого шифра, его безопасность. Меньшей надёжностью обладают 40-битные ключи, так как способом прямолинейного перебора их возможно дешифрировать на протяжение 24 часов. В стандартном браузере Internet Explorer согласно умолчанию применяются 40- и 56-битные ключи шифрования. В случае если же данные, передаваемые пользователями, очень значимы, применяется 128-битное шифрование. 128-битные криптографические ключи учтены только лишь для версий, поставляемых в США и Канаду. С целью обеспечения надежной защиты, следует загружать вспомогательный пакет безопасности — Security pack. [6]
Для того чтобы передать данные средствами SSL на сервере должен присутствовать SSL-сертификат, содержащий сведения о владельце ключа, сертификационном центре, сведения об открытом ключе. Сервер способен предъявит требование в предоставлении клиентского сертификата от пользователя, в случае если учитывается применяемый метод авторизации юзера. [6]
При применении SSL сертификата клиент и сервер меняются приветственными сообщениями инициализации, включающими в себя: данные о версии протокола, личном номере сессии, методе шифрования и сжатия. Затем сервер отправляет клиенту сертификат либо ключевое сообщение, при надобности запрашивает клиентский сертификат. Уже после нескольких
процедур совершается конечная конкретизация алгоритма и ключей, отправка сервером финального уведомления и, в конечном итоге, взаимообмен секретными данными. Такого рода процесс идентификации, способен занимать много времени, по этой причине, при вторичном соединении, как правило, применяется личный номер сессии прошлого соединения. [6]
Стоит выделить тот факт, что протокол независим от программ и платформ, использующих SSL, в связи с тем, что SSL-протокол основан на принципе переносимости. Главная угроза безопасности передаваемых данных кроется в приложениях. Например, присутствие уязвимостей во многих браузерах. [9]
В итоге можно сказать, что в настоящий период времени SSL-протокол получил повсеместное распространение в сети Интернет в связи с тем, что он гарантирует довольной высокую степень защиты передаваемой среди приложений информации. [9]
REG.RU предоставляет бесплатный SSL-сертификат при заказе хостинга или домена. Далее будет описан алгоритм действий при получении бесплатного годового SSL-сертификата на примере хостинга REG.RU:
1. Заказать услугу хостинга по подходящему тарифному плану, на второй странице мастера заказа отметить чекбокс «Бесплатный SSL-сертификат для домена». Вне зависимости от срока заказа услуги хостинга, SSL-сертификат заказывается на 12 месяцев.
2. После оплаты услуг хостинга, нужно подтвердить выпуск сертификата. Подтверждение на выпуск сертификата происходит посредством добавления ТХТ-записи. TXT-запись будет отправлена на почту указанную при регистрации на сайте. Для наглядности запись изображена на следующем рисунке.
3. Для добавления TXT-записи на сервер, необходимо открыть панель управления сервером, в данном случае это ISP Manager, перейти в раздел «Доменные имена», выбрать доменное имя, а затем в левом верхнем углу нажать на пиктограмму «Записи».
4. Далее в левом верхнем углу нужно нажать по пиктограмме «Создать», ввести любое имя, TTL оставить по умолчанию, в разделе «Тип» поставить «TXT (текстовая запись)», в поле значение ввести код, полученный ранее в письме от хостинга. Завершить процесс нажав на кнопку «Ок».
5. После добавления записи вам остаётся дождаться письма о выпуске сертификата. Выпуск сертификата может занять до нескольких суток. После выпуска сертификата вы сможете увидеть его в личном кабинете на сайте REG.RU. Также, вы дополнительно получите письмо от Сертификационного Центра с сертификатом.
6. После того как сертификат был выдан, нужно настроить перенаправление с HTTP на HTTPS. Для сервера на операционной системе Linux необходимо будет прописать данный код в файл «.htaccess», который находится в директории данного сайта. Для этого в ISP Manager нужно перейти в раздел «Менеджер файлов», открыть директорию «www», в данном случае перейти в директорию «pkp-alk.info» и два раза кликнуть по файлу «.htaccess». [8]
7. В текстовое поле на открывшейся странице ввести данный код:
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L][8]
Затем нажать на кнопку «Сохранить». Теперь при переходи на сайт, он будет индексироваться как «Надежный», во всех браузерах появится следующая пиктограмма.
На этом процесс получения и настройки SSL успешно завершён.
2.8 Создание почтового домена и ящика на хостинге
Почтовый домен представляет собой набор почтовых ящиков, групп и списков рассылки, определенных одним доменным именем. Это имя называется основным именем почтового домена. Помимо основного имени, почтовый домен может иметь определенное количество дополнительных доменных имен, называемых его синонимами. Почтовые ящики, группы и списки рассылки, которые относятся к одному и тому же почтовому домену обладают в адресе электронной почты единой частью после знака «@», который является или главным именованием почтового домена, или одним из его синонимов.
Электронная почта на собственном домене является отличным средством коммуникации с клиентами предприятия и пользователями web-сайта. Адрес электронной почты можно сделать легко запоминаемым, а это положительно повлияет на имидж данного предприятия.
Для создания почтового домена и почтового ящика на хостинге необходимо выполнить следующие действия:
1. Перейти в панель управления хостингом и аутентифицироваться в системе. В данном случае это ввод логина и пароля на странице входа в «ISP Manager».
2. Далее необходимо перейти в раздел «Почта» и кликнуть на подраздел «Почтовые домены». В левом верхнем углу нажать на пиктограмму с надписью «Создать».
3. Откроется окно создания почтового домена. В данном окне будет необходимо ввести имя и IP-адрес, выбрать действие по умолчанию и перенаправление на другой адрес. Нажать кнопку «Ок» для завершения.
4. После проделанных действий переходим в подраздел «Почтовые ящики» и в левом верхнем углу нажимаем на пиктограмму «Создать». Откроется страница для создания нового почтового ящика.
5. На открывшейся странице необходимо ввести имя, пароль, выбрать почтовый домен, при желании указать максимальный размер почтового ящика, а также настроить пересылку писем на другой электронный адрес. После этого необходимо нажать на кнопку «Ок» для завершения создания нового почтового ящика.
На этом этап создания почтового домена и почтового ящика завершён.
2.9 Панель управления web-сервером ISP Manager
ISP Manager — является коммерческой панелью управления web-хостингом, разработанной и спроектированной компанией-разработчиком программного обеспечения для хостинга ISP System.
Панель управления ISP Manager поддерживает широкий спектр сторонних программ и позволяет управлять различными продуктами, такими как web-сервер (Apache HTTP Server / Nginx), сервер базы данных (MySQL / PostgreSQL), почтовый сервер (Sendmail / Exim / Postfix), и другие связанные программы через централизованный web-интерфейс. ISP Manager работает со стандартной конфигурацией программного обеспечения, установленного из репозиториев ОС. Он имеет открытый интерфейс прикладного программирования (API), который используется для интеграции и развертывания новых сервисов, биллинговых систем и предоставляет многоязычный web-интерфейс, а также документацию. ISP manager доступен в двух версиях — «Lite» (предназначен для личного использования) и «Business» (для предоставления услуг общедоступного хостинга).
3. Смета затрат
Таблица 3.1
Смета затрат на разработку сайта.
|
№ п/п |
Наименование |
Кол-во |
Итого, руб. |
|
|
1. |
Определение целей и задач сайта, общей концепции и будущего объема сайта, исходя из информации, представляемой заказчиком |
1 |
1000 |
|
|
2. |
Составление технического задания на дизайн |
1 |
500 |
|
|
3. |
Разработка дизайна сайта в Adobe Photoshop CC 2017 |
1 |
10000 |
|
|
4. |
Создание готового сайта в Adobe Muse СС 2017 |
1 |
5000 |
|
|
5. |
Регистрация доменного имени и аренда хостинга |
1 |
500 |
|
|
ИТОГО: |
17000 |
|||
В итоге затраты на создание web-сайта составили 17000 рублей, не учитывая поддержания его функционирования.
Таблица 3.2
Смета затрат на поддержание функционирования web-сайта
|
№ п/п |
Наименование |
Кол-во месяцев |
Стоимость, руб./месяц |
Стоимость, руб./год |
|
|
1. |
Регистрация доменного имени |
12 |
20 |
240 |
|
|
2. |
Электронная почта и хостинг |
12 |
175 |
2100 |
|
|
3. |
Защищённый протокол передачи данных — SSL |
12 |
250 |
3000 |
|
|
4. |
Оплата работы инженера сети |
12 |
2000 |
24000 |
|
|
ИТОГО: |
2445 |
29340 |
|||
После запуска web-сайта, возникнет необходимость его администрировать. Обслуживание web-сервера и дальнейшее функционирование web-сайта берёт на себя инженер сети, его оклад составляет 20000 рублей в месяц. Инженер сети будет выполнять функции редактирования, текстового наполнения и технического обслуживания web-сайта. На поддержание и функционирование web-сайта ему понадобиться 2 рабочих дня, учитывая, что в месяце 20 рабочих дней, оплата его труда составит 2000 рублей.
Таблица 3.3
Общая смета затрат
|
№ |
Наименование |
Стоимость |
|
|
1. |
Разработка web-сайта |
17000 |
|
|
2. |
Поддержание функционирования web-сайта за год … |
