Автономная некоммерческая организация профессиональная образовательная организация Самарский колледж цифровой экономики и предпринимательства «МИР» (АНО ПОО Колледж «МИР») Специальность 09.02.07 «Информационные системы и программирование» Допустить к защите: Зам. директора по учебно-методической работе Колледжа «МИР» _________________/Н.Е. Маслова «___» ______________ 2023г. ДИПЛОМНАЯ РАБОТА Тема «Создание вебсайта» Обучающийся Хохлов Анатолий Валерьевич Ф.И.О Руководитель Хмелёва Ксения Эдуардовна Ф.И.О _______________ подпись _______________ подпись Самара 2023 г. Автономная некоммерческая организация профессиональная образовательная организация Самарский колледж цифровой экономики и предпринимательства «МИР» 2 Специальность 09.02.07 «Информационные системы и программирование» РАССМОТРЕНО на заседании ПЦК информационных технологий Протокол № ____ от __________ 20__ г. Председатель ПЦК _________________ /В.П. Алипанова ЗАДАНИЕ на дипломную работу Обучающемуся Хохлову Анатолию Валерьевичу Группа К-ИСП-31 1. Тема дипломной работы: Создание вебсайта 2. Исходные данные: 3. Перечень подлежащих разработке вопросов: 4. Перечень графического/иллюстративного/практического материала: Дата выдачи задания «20» марта 2023г. Срок сдачи законченной дипломной работы «10» июня 2023г. Руководитель Хмелева К.Э. _____________________ (Ф.И.О.) Задание принял к исполнению «20» марта 2023г. 3 (подпись) ______________________ (подпись студента) СОДЕРЖАНИЕ ВВЕДЕНИЕ 6 1 ТЕОРЕТИЧЕСКАЯ ЧАСТЬ 10 1.1 Структурная характеристика СТО 10 1.2 Понятие информационной системы 10 1.3 Классификации информационных систем 12 1.4 Востребованность 15 1.5 Постановка задачи 15 1.6 Требования к браузеру 16 1.8 Требования к лингвистическому обеспечению 17 1.9 Требования к структуре и дизайну сайта 17 1.10Требования к надежности 18 1.11 Выводы 18 Сравниваем функциональные возможности wordpress и Joomla 2 ПРАКТИЧЕСКАЯ ЧАСТЬ 20 Ошибка! Закладка не определена. 2.1 Разработка требований 22 2.2 что такое wordpress 23 2.3 Почему WordPress 24 2.4 Разработка дизайна 25 ЗАКЛЮЧЕНИЕ 37 СПИСОК ЛИТЕРАТУРЫ 39 4 Приложение 40 5 ВВЕДЕНИЕ На сегодняшний день обработка экономических информационных ресурсов стала самостоятельной сферой с большим разнообразием идей и методов. Отдельные элементы процесса обработки данных достигли высокого уровня организации и взаимосвязи, что в свою очередь позволяет объединять все средства обработки информационных ресурсов, на конкретном экономическом объекте понятием «экономическая информационная система». Детальное изучение информационных ресурсов опирается на понятия «информация» и «система». Информация и система, по отдельности являются простыми фундаментальными категориями, которые невозможно выражать через общие понятия. Термин информация происходит от латинского «informatio», что означает дословно осведомление, изложение. С точки зрения материалистической философии информация — это отражение реального мира с помощью сведений. Сведение — есть форма представления информационных ресурсов в виде устной или письменной речи, изображений и графических данных и т. д. В широком смысле информация –есть общенаучное понятие, которое включает процесс обмена сведениями между людьми. С ХХ века — общенаучное понятие информации заключается в следующем: отношения между людьми, человеком и механизмом, животными и растениями и т. д. На сегодняшний день распространено понятие информации как ресурса, аналогичного материальному, трудовому или денежному. Данная точка зрения находит подтверждение в следующих взглядах. Информация — есть новое сведение, которое позволяет улучшить процесс преобразования ресурсов. Информацию невозможно отделить от процесса информирования, исходя из этого необходимо 6 изучить источник информационных ресурсов и самого потребителя информационных ресурсов. Информация — есть новые сведения, которые приняты и оценены потребителем как полезные. Информацией являются сведения, расширяющие запас знаний конечного потребителя об окружающем нас мире. Наряду с информацией в информатике часто употребляется понятие Данные. Данные могут рассматриваться как признаки или записанные наблюдения, которые по каким-то причинам не используются, а только хранятся. В том случае, если появляется возможность использовать эти данные для превращаются уменьшения в неопределенности информацию. Поэтому о чем-либо, информацией данные являются используемые данные. Мы живем в век цифровых технологий, где любой товар и любую услугу можно посмотреть в интернете. Во первых это не занимает много времени, а во вторых это можно сделать из любого места где есть сеть. Сегодня я бы хотел рассмотреть тему создания информационной системы для сто. Актуальность создания информационной системы обусловлена тем, что для более эффективной работы учреждения образования, в наше время, необходима система, которая сможет автоматизировать процесс по обработке, хранению и использованию имеющейся информации на должном уровне. Но, прежде всего, требуется профессиональная, основанная на потребностях потребителя услуг организация производства и реализации продукта, нужна полная и всесторонняя информированность производителя компьютерных услуг относительно всего того, что касается клиента, как потребителя этих самых услуг. Практическая значимость внедрения информационной системы заключается в повышении уровня автоматизации предприятия, а именно введения информационной базы. Информационная база содержит в себе совокупность всех данных, которые необходимы для правильной работы 7 предприятия малого бизнеса. Целью создания информационной системы является: минимизация времени между совершением производственнохозяйственных операций и их информационным отображением для принятия управленческих решений; создание эффективной структуры управления предприятием; повышение эффективности взаимодействия и улучшение качества работы всех структурных подразделений предприятия; совершенствование технических документооборота; ресурсов и денежных экономия средств, материальных, поиск источников возникновения необоснованных затрат; создание математического и статистического аппарата для лучшего анализа и прогнозирования деятельности предприятия; выход на новый уровень конкурентоспособности. Цель использования информационной системы Решение структурированных задач, полная автоматизация их решения, т.е. сведение роли человека к нулю. Решение неструктурированных задач из-за невозможности создания математического описания и разработки алгоритма связано с большими трудностями. Возможности использования здесь информационной системы невелики. Решение в таких случаях принимается человеком из эвристических соображений на основе своего опыта и, возможно, косвенной информации из разных источников. Основная задача любого успешного проекта заключается в том, чтобы на момент запуска системы и в течение всего времени ее эксплуатации можно было обеспечить: ● требуемую функциональность системы и степень адаптации к изменяющимся условиям ее функционирования; ● требуемую пропускную способность системы; ● требуемое время реакции системы на запрос; 8 ● безотказную работу системы в требуемом режиме, иными словами готовность и доступность системы для обработки запросов пользователей; ● простоту эксплуатации и поддержки системы; ● необходимую безопасность. Производительность является главным фактором, определяющим эффективность системы. Хорошее проектное решение служит основой высокопроизводительной системы. 9 1 ТЕОРЕТИЧЕСКАЯ ЧАСТЬ 1.1 Структурная характеристика СТО Информационная система (ИС) — система, предназначенная для хранения, поиска и обработки информации, и соответствующие организационные ресурсы (человеческие, технические, финансовые и т. д.), которые обеспечивают и распространяют информацию (ISO/IEC 2382:2015). ИС предназначена для своевременного обеспечения надлежащих людей надлежащей информацией, то есть для удовлетворения конкретных информационных потребностей в рамках определённой предметной области, при этом результатом функционирования информационных систем является информационная продукция — документы, информационные массивы, базы данных и информационные услуги. 1.2 Понятие информационной системы Понятие информационной системы интерпретируют по-разному, в зависимости от контекста. Достаточно широкое понимание информационной системы подразумевает, что её неотъемлемыми компонентами являются данные, техническое и программное обеспечение, а также персонал и организационное обеспечение. Широко трактует понятие «информационной системы» федеральный закон Российской Федерации «Об информации, информационных технологиях и о защите информации», подразумевая под информационной системой совокупность содержащейся в базах данных информации и обеспечивающих её обработку информационных технологий и технических средств. Среди российских ученых в области информатики наиболее широкое определение ИС дает М. Р. Когаловский, по мнению которого в понятие информационной системы помимо данных, программ, аппаратного 10 обеспечения и людских коммуникационное ресурсов оборудование, следует также лингвистические включать средства и информационные ресурсы, которые в совокупности образуют систему, обеспечивающую «поддержку динамической информационной модели некоторой части реального мира для удовлетворения информационных потребностей пользователей». Более узкое понимание информационной системы ограничивает её состав данными, программами и аппаратным обеспечением. Интеграция этих компонентов позволяет автоматизировать процессы управления информацией и целенаправленной деятельности конечных пользователей, направленной на получение, модификацию и хранение информации. Так, российский стандарт ГОСТ РВ 51987 подразумевает под ИС «автоматизированную систему, результатом функционирования которой является представление выходной информации для последующего использования». ГОСТ Р 53622-2009 использует термин информационновычислительная система для обозначения совокупности данных (или баз данных), систем управления базами данных и прикладных программ, функционирующих на вычислительных средствах как единое целое для решения определённых задач. ИС в деятельности организации рассматривается как программное обеспечение, реализующее её деловую стратегию и бизнес-процессы. Желательной целью корпоративной является создание информационной и развертывание системы, единой удовлетворяющей информационные потребности всех сотрудников, служб и подразделений организации. На практике создание такой системы слишком затруднено или даже невозможно, а иногда и нецелесообразно, вследствие чего на предприятии обычно функционируют несколько различных систем, решающих отдельные группы задач: 11 управление производством, финансово-хозяйственная деятельность, электронный документооборот и т. д. Часть задач бывает «покрыта» одновременно несколькими информационными системами, часть задач — вовсе не автоматизирована. Такая ситуация получила название «лоскутной автоматизации» и является довольно типичной для многих предприятий. 1.3 Классификации информационных систем Классификация по архитектуре По степени распределенности отличают: ● настольные (desktop), или локальные ИС, в которых все компоненты (БД, СУБД, клиентские приложения) находятся на одном компьютере; ● распределённые (distributed) ИС, в которых компоненты распределены по нескольким компьютерам. Распределённые ИС, в свою очередь, разделяют на: ● файл-серверные ИС (ИС с архитектурой «файл-сервер»); ● клиент-серверные ИС (ИС с архитектурой «клиент-сервер»). В файл-серверных ИС база данных находится на файловом сервере, а СУБД и клиентские приложения находятся на рабочих станциях. В клиент-серверных ИС база данных и СУБД находятся на сервере, а на рабочих станциях находятся только клиентские приложения. В свою очередь, клиент-серверные ИС разделяют на двухзвенные и многозвенные. В двухзвенных (англ. two-tier) ИС всего два типа «звеньев»: сервер базы данных, на котором находятся БД и СУБД (back-end), и рабочие станции, на которых находятся клиентские приложения (front-end). Клиентские приложения обращаются к СУБД напрямую. 12 В многозвенных (англ. multi-tier) ИС добавляются промежуточные «звенья»: серверы приложений (application servers). Пользовательские клиентские приложения не обращаются к СУБД напрямую, они взаимодействуют с промежуточными звеньями. Типичный пример применения трехзвенной архитектуры — современные веб-приложения, использующие базы данных. В таких приложениях помимо звена СУБД и клиентского звена, выполняющегося в веб-браузере, имеется как минимум одно промежуточное звено — веб-сервер с соответствующим серверным программным обеспечением. Классификация по степени автоматизации По степени автоматизации ИС делятся на: ● автоматизированные: информационные системы, в которых автоматизация может быть неполной (то есть требуется постоянное вмешательство персонала); ● автоматические: информационные системы, в которых автоматизация является полной, то есть вмешательство персонала не требуется или требуется только эпизодически. «Ручные ИС» («без компьютера») существовать не могут, поскольку существующие определения предписывают обязательное наличие в составе ИС аппаратно-программных средств. Вследствие этого понятия «автоматизированная информационная система», «компьютерная информационная система» и просто «информационная система» являются синонимами. Классификация по характеру обработки данных По характеру обработки данных ИС делятся на: 13 ● информационно-справочные, или информационно-поисковые ИС, в которых нет сложных алгоритмов обработки данных, а целью системы является поиск и выдача информации в удобном виде; ● ИС обработки данных, или решающие ИС, в которых данные подвергаются обработке по сложным алгоритмам. К таким системам в первую очередь относят автоматизированные системы управления и системы поддержки принятия решений. Классификация по сфере применения Поскольку ИС создаются для удовлетворения информационных потребностей в рамках конкретной предметной области, то каждой предметной области (сфере применения) соответствует свой тип ИС. Перечислять все эти типы не имеет смысла, так как количество предметных областей велико, но можно указать в качестве примера следующие типы ИС: ● Экономическая информационная система — информационная система, предназначенная для выполнения функций управления на предприятии. ● Медицинская информационная система — информационная система, предназначенная для использования в лечебном или лечебно-профилактическом учреждении. ● Географическая информационная система — информационная система, обеспечивающая сбор, хранение, обработку, доступ, отображение и распространение пространственно- координированных данных (пространственных данных). Классификация по охвату задач (масштабности) ● Персональная ИС предназначена для решения некоторого круга задач одного человека. 14 ● Групповая ИС ориентирована на коллективное использование информации членами рабочей группы или подразделения. ● Корпоративная ИС автоматизирует все бизнес-процессы целого предприятия (организации) или их значительную часть[8]:73, достигая их полной безызбыточности называют и информационной прозрачности. информационными Такие системами согласованности, системы иногда предприятия и системами комплексной автоматизации предприятия. 1.4 Востребованность Согласно исследованиям Минтруда РФ, на 2015 год профессии, относящиеся к IT-отрасли (администратор баз данных, программист, разработчик web- и мультимедийных приложений, сетевой и системный администратор, специалист по информационным ресурсам, специалист по информационным системам, специалист по обслуживанию телекоммуникаций, техник по защите информации) входят в список 50 самых востребованных профессий в России. Разработчиками списка было рассмотрено 1620 профессий, опрошено более 13,3 тыс. организаций. Согласно рейтингу профессий CNNMoney/PayScale.com, в США профессии, относящиеся к IT-отрасли, много лет входят в десятку лидеров. 1.5 Постановка задачи Основными целями информационной системы являются: увеличение числа граждан, желающих приобрести мебель. Для достижения поставленных целей требуется решить следующие задачи: 15 ● изучить предметную область (описание предметной области, анализ прототипов системы, выбор программно – аппаратной платформы и среды разработки); ● разработать архитектуру информационной системы; ● описать среду разработки; ● создать интерфейс системы; ● разработать методику испытаний; ● провести испытания компонента. Рассмотрим требования к информационной системе. 1.6 Требования к браузеру Сайт должен обеспечивать корректное отображение данных в следующих браузерах: Internet Explorer 5.0 и выше (Microsoft), Google Chrome, Mozilla Firefox, Opera. Включенная поддержка Javascript. 1.7 Требование к языкам программирования Для реализации страниц должны использоваться: − язык гипертекстовой разметки HTML5; − каскадные таблицы стилей CSS. Для реализации интерактивных элементов использование язык JavaScript. В дальнейшей работе использование языка PHP, для реализации динамических страниц. 16 1.8 Требования к лингвистическому обеспечению Сайт должен быть выполнен на русском языке. В исключение входят названия мебели и комплектующих. 1.9 Требования к структуре и дизайну сайта Дизайн пользовательского интерфейса должен адаптироваться под основные разрешения экранов настольных, портативных (ноутбук) устройств. Максимальное разрешение по горизонтали – 1920px, минимальное – 1024px. В левом и правом верхнем углу соответственно, расположение логотипа и адреса мебельного магазина. Цветовая гамма страниц должна выделять основные элементы. Шрифт страницы должен быть читабелен. Разрабатываемая информационная система имеет достаточно строгую структуру, удобную для любого пользователя. Вертикальное меню содержит пять основных раздела: − главная страница; − корзина; − магазин; − мой аккаунт; − оформление заказа. На главной странице в основном блоке представлена следующая информация: 17 ● описание сайта; ● ссылки на страницы «Корзина», «Магазин», «Мой аккаунт», «Оформление заказа»; ● адрес магазина; ● Популярные товары. ● Акционные товары 1.10Требования к надежности Система должна восстановление быть своих многофункциональной функций в и обеспечивать следующих случаях: сбой электропитания аппаратной части (восстановление после перезагрузки операционной системы). ошибки сайта, не выявленные при отладке и испытании сайта. 1.11 Выводы Для разработки действительно эффективной автоматизированной информационной системы в первую очередь необходимо определиться с назначением и целью создания системы, а также требованиями к ней. Что и было сделано. Целью разработанной информационной системы стала организация эффективной работы компьютерной системы, организация компьютеризации документооборота, учетных операций. Создав удобный пользовательский интерфейс (меню, формы), требуется обеспечить решение следующих задач: ● Ввод, корректировка, просмотр входных данных; ● Анализ и обработку данных; ● Формирование необходимых запросов и отчетов с возможностью вывода результатов на экран монитора или принтер; 18 Были сформулированы следующие требования к разрабатываемой информационной системе: ● эффективное выполнение одной и той же СУБД различных функций предметной области; ● минимизация избыточности хранимых данных; ● предоставление для процессов принятие решений непротиворечивой информации; ● обеспечение управления безопасностью; ● отсутствие повышенных требований к персоналу, связанному с разработкой, поддержанием и совершенствованием прикладных программ при большой производительности и меньших затратах; ● простая физическая реорганизация базы данных; ● возможность централизованного управления базой данных; ● упрощение процедуры эксплуатации ЭВМ. Можно сформулировать ряд требований к разрабатываемой информационной системе. Требования, которым должна удовлетворять СУБД: ● эффективное выполнение одной и той же СУБД различных функций предметной области; ● минимизация избыточности хранимых данных; ● предоставление для процессов принятие решений непротиворечивой информации; ● обеспечение управления безопасностью; ● отсутствие связанному повышенных с требований разработкой, к персоналу, поддержанием и совершенствованием прикладных программ при большой производительности и меньших затратах; 19 ● простая физическая реорганизация базы данных; ● возможность централизованного управления базой данных; ● упрощение процедуры эксплуатации ЭВМ. Сравниваем функциональные возможности wordpress и Joomla Сначала обозначим то, что конкретно сравнивать бессмысленно, так как функционал имеется в обеих CMS. Например, это относится к техническим требованиям в отношении хостинга – они практически идентичны (нужна поддержка PHP и MySQL/MariaDB), в отношении различных языков интерфейса (обе работают с несколькими десятками, русский доступен и там, и там), а также в отношении расширения функционала за счёт сторонних модулей/плагинов (их можно скачать из официального магазина или найти в альтернативных и установить из архива). Тем не менее, функциональные различия есть, ведь это совершенно разные движки. У них кардинально отличается подход к структуре ядра и интеграции модулей/шаблонов. Например, в WordPress во главу угла ставится «наследственность», когда в 99% случаев старые плагины и шаблоны будут совместимы с новой версией кода. В Joomla кодовая база новой мажорной версии может кардинально отличаться (отсюда деление дополнений в каталоге по версиям 1.5, 2.5, 3.0 и т.д.). Плюс, в Joomla более сложная структура компонентов: шаблоны применяются не монолитно, как в случае с WordPress, их нужно детально настраивать, чтобы задать нужное расположение тех или иных элементов интерфейса (модулей). Итого, это как минимум 4 вида расширений: ● языковые пакеты; ● модули; ● плагины; ● шаблоны. 20 Например, после установки компонента «Баннеры», вы получаете отдельный вид материала, у которого есть свои настройки показа для различных категорий пользователей, свои примечания, алиасы (человекопонятные УРЛы) и другие параметры. По каждому созданному элементу можно отслеживать статистику и т.д. Это удобно? Без всяких сомнений. Вы можете собрать страницу из разных блоков, показывать их нужным категориям пользователей, а также отлеживать их эффективность. Но это очень сложно для понимания новичкам. Установка плагинов и шаблонов В случае с WordPress вы получаете доступ ко всему многообразию дополнений и тем оформления непосредственно из админ-панели. Нужно просто нажать кнопку «Установить», и выбранный плагин скачается на ваш сервер автоматически, останется его только активировать. При желании, можно скачать архив с темой или с дополнением со своего ПК. В Joomla, если не активирован протокол HTTPS, вам придётся искать нужное дополнение на официальном сайте или у альтернативных разработчиков, обязательно нужно изучить совместимость с той или иной версией движка, скачать контент на свой ПК и только после этого загрузить архив на свой сервер (через специальную форму, и важно, чтобы внутри архива был служебный файл для установщика). Такой подход более сложен для неопытных пользователей. Аналогичная ситуация со стилями и шаблонами. В официальном каталоге Joomla вообще нет ни одного шаблона или темы оформления. Их придётся искать только на альтернативных площадках. Мало просто скачать, установить и активировать нужный шаблон, его нужно детально настроить: необходимо задать расположение тех или иных модулей (блоков контента) и связать их с категориями материалов. Точно так же задаются настройки меню. Причём, важно помнить про персональные настройки каждого отдельного матер 21 2 ПРАКТИЧЕСКАЯ ЧАСТЬ Для создания сайта я выбрал самый удобный и самый доступный вариант для всех, сделать его на wordpress. Ключевые преимущества сайтов на WordPress заключаются в минимальной стоимости разработки и быстром создании с нуля. Требуется минимально мощный хостинг, а хороший платный шаблон может быть в разы круче решения под ключ без CMS. При чем цена хорошего платного шаблона обычно менее 100$. 2.1 Разработка требований Разработка веб-приложения начинается с разработки требований к нему. Далее представлены выдвинутые нами требования к информационной системе «Бионат». Требования к дизайну интерфейса: − дизайн должен включать в себя все страницы сайта; − дизайн должен быть адаптивным, включать в себя страницы в двух разрешениях: для больших экранов - ширина 1920 px, для мобильных устройств - ширина 480 px. − UX-дизайн должен быть интуитивно понятным и простым; − цветовая палитра, используемая в дизайне, должна ассоциироваться с дезинсекторной компанией. Требования к функциям информационной системы: Пользователь может − зарегистрироваться; − войти в свой аккаунт; − просмотреть список товаров и всю информацию о каждом отдельном наименовании; − найти товар по названию; 22 − изменить информацию своего профиля. Администратор может − войти в свой аккаунт; − просмотреть список товаров и всю информацию о каждом отдельном товаре; − просмотреть список клиентов и их контактные данные; − просмотреть список отложенных товаров; Требования к качеству информационной системы: − приложение должно быть кроссбраузерным; − приложение должно быть быстрым. 2.2 что такое wordpress WordPress — свободно распространяемая система управления содержимым сайта с открытым исходным кодом; написана на PHP; сервер базы данных — MySQL; выпущена под лицензией GNU GPL версии 2. Сфера применения — от блогов до достаточно сложных новостных ресурсов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать проекты широкой функциональной сложности. 12 июня 2001 года Мишель Вальдриги начал разработку движка b2, впоследствии к проекту присоединились Мэтт Мюлленвег и Майк Литтл. В январе 2003 года Вальдриги прекратил разработку, поэтому автором WordPress считается Мэтт Мюлленвег. Права на товарную марку «WordPress» принадлежат некоммерческому фонду WordPress Foundation. В 2003 году компания CNET стала использовать WordPress для своих проектов. Мюлленвег встретился с вице-президентом компании и принял предложение о сотрудничестве. В 2005 году он ушёл из CNET, основал фирму Automattic и посвятил себя разработке проектов на движке WordPress[14]. По данным лаборатории W3Techs, в 2015 году 25 % всех 23 сайтов работали под управлением WordPress, в августе 2018 — более 30 %[16], а в марте 2020 — уже более 41 % (доля рынка систем управления контентом составляет 63 %) 2.3 Почему WordPress WordPress – самая распространенная на сегодняшний день CMS. По данным независимого агентства Web Technology Surveys за март 2022 года, около 64,8 % всех сайтов в мире использует CMS WordPress. Вот главные причины ее успеха: ● бесплатный «движок» – CMS WordPress распространяется по открытому лицензионному соглашению (GNU GPL), так что его можно свободно использовать даже в коммерческих целях; ● неограниченные возможности – с помощью WordPress можно создать интернет-магазин, личный блог, корпоративный сайт, информационный портал, отраслевой ресурс, галерею мультимедиа; ● гибкая настройка внешнего вида и функциональности – доступны платные и бесплатные шаблоны, с помощью плагинов можно решать технические задачи, обеспечивать необходимую функциональность; ● простота администрирования – чтобы работать с WordPress, не нужны специальные знания, все интуитивно понятно; ● компании предоставляют услугу автоматической установки WordPress на хостинг – не нужно самому искать на официальном сайте дистрибутив, скачивать его и заниматься установкой. Например, Beget, предлагает установить на выбор WordPress или Joomla. Для установки CMS достаточно пары кликов. Мелочь, а приятно. 24 ● Масштабируемость - WordPress это уже не только о "Блогах", говоря все о тех же качественных платных шаблонах можно сразу учитывать встроенное E-Commerce решение, оно либо будет уже коробочно работать с нашими платежными системами либо немного допилив правильным пакетом плагинов его можно адаптировать под СНГ реалии.Корпоративные сайты делаются на раз-два. Все, что нужно это хороший копирайтинг текстов для уникальности, правильная структура и продуманный дизайн.Можно сделать вывод, что если у вас не интернет магазин на 500+ позиций с сложной системой категорий, многоуровневой структурой сайта и не криптовалютная биржа, - то вам уже стоит задуматься о WordPress. ● SEO-направленность CMS. Работа над SEO очень важна для современного бизнеса. WP готов к такому запросу разработчиков. Уже есть плагины (например, Yoast SEO), которые помогают продвигать сайт. С их помощью можно ставить метатеги, делать xml-карты и размещать ключевые слова в пару кликов. 2.4 Разработка дизайна Исходя из требований, составленных в предыдущем разделе, нами был разработан дизайн интерфейса информационной системы библиотеки. Первым делом мы определили основные экраны приложения, продумали опыт пользователя. Состоять оно будет из: страниц входа и регистрации, главой страница пользователя и администратора, личного кабинета, страницы товаров. Сразу, после установки, WordPress активирует стандартную тему. Если вам известно название темы, которая идеально вам подойдет, можно отыскать ее, вбив название в строку поиска. Когда тема будет выбрана, достаточно навести на нее курсор и щелкнуть «Установить». После этого у 25 вас будет возможность произвести ее настройки: ищем в меню строку «Внешний вид», нажимаем «Настроить». Благодаря этому будет запущен настройщик темы, который позволит подкорректировать тему на свое усмотрение, а также воспользоваться функцией предварительного просмотра вашего веб-сайта. Не стоит стараться сделать все одним махом, у вас еще будет время для корректировки внешнего вида вашего сайта. В самом начале у ВордПресс предусмотрено две разновидности контента: страницы и записи. Записи – часть блога, они показаны в обратном порядке (новые записи будут показаны в начале). Страницы же представляют собой статический контент, к примеру, страницу контактов, страницу с информацией о вас и т.п. Если не менять ничего в настройках WP, на главной странице сайта будут показаны записи из блога. Есть возможность это изменить, заставив WordPress показывать главной страницей веб-сайта именно ту, которую вы захотите. Вам доступно создание отдельной странички для персонального блога или новостного раздела. По факту, можно создать веб-сайт без блогового раздела. Перейдем же к добавлению контента на веб-сайт. Начать стоит с того, что добавить пару страниц на сайт WP. Не стоит переживать, если сейчас у вас нет того объема контента для этих страниц, который нужен. Это всегда можно исправить путем редактирования и обновления. Переходим в админке на «Страницы», жмем «Добавить» новую страничку. В итоге вы попадете на редактор страниц. Для начала страницу необходимо озаглавить, скажем, «О компании». После этого у вас появится возможность добавления контента в текстовом редакторе, который расположен ниже. Сюда можно добавить текст, вставить видео, ссылку, картинку, аудио и т.п. Редактор в WP основан на блоках, в нем каждый элемент – блок. Благодаря этому вы без труда можете упорядочить статьи на своем сайте и выделить их на свое усмотрение. После того, как контент будет добавлен на 26 страничку, нажимаем «Опубликовать», после чего она размещается на сайте. Если нужно, можно процесс повторить, увеличив количество страниц, каждая из которых будет соответствовать тому или иному разделу сайта. Для публикации записей в блоге, жмем «Записи», а следом – «Добавить новую». Данные манипуляции проводятся в панели инструментов WP. Можно придумать и добавить заголовок к записи, а после в визуальном редакторе вставить контент. У вас будет возможность сохранить запись в качестве черновика, либо же кликнуть «Опубликовать», что приведет к незамедлительному появлению созданной записи на сайте. Но не забывайте про рубрики и метки – это отличный способ фильтрации контента. После того, как первый контент был добавлен на сайт, можно его настроить и представить на своем сайте в презентабельном виде. Настроим для начала статическую переднюю страницу. Переходим в админке WP в «Настройки», а после → «Чтение». Находим опцию «На главной странице отображать», жмем на статическую страницу, после чего выбираем странички, которые были созданы для страниц блога и домашней странички.Обязательно в нижней части экрана жмем «Сохранить изменения». Теперь страничка «О компании» будет использоваться, как главная страничка веб-сайта. Если вами была создана отдельная страничка, предназначенная для блога, и назвали вы ее, к примеру, «Блог», выбираем ее в высветившемся списке как «Страница записей». В процессе установки у вас есть возможность подобрать название для своего сайта. ВордПресс добавит автоматически в название веб-сайта строчку с надписью «Еще один сайт на WordPress». В будущем вы сможете переименовать и название своего сайта, и его слоган. Для этого достаточно перейти в «Настройки», а затем → «Общие». Слоганом вашего сайта может стать любая строка на ваш выбор. Краткое описание, как правило, состоит из одной строки, описывающей ваш портал. Также можно не заполнять поле строки тега, если пожелаете. Чтобы настройки сохранились, не забудьте кликнуть 27 «Сохранить изменения». Предлагаем добавить на наш сайт навигационное меню, тем более, что в этом нет ничего сложного. Переходим на страничку «Внешний вид», а потом → «Меню». Озаглавливаем свое меню и жмем «Создать меню». После этого ваше меню будет создано, вот только пока оно будет незаполненным После этого выбираем странички, которые хотим видеть в меню, и жмем «Добавить в меню». Пустая область навигации будет заполнена страницами, которые вы выбрали. С помощью мыши вы сможете менять их положение, перемещая вверх и вниз. Дальше выбираем место, где будет отображаться меню. Эти места зависят от темы WP, которую вы выбрали. Большая часть тем содержит главное меню, отображаемое сверху. После того, как вы определитесь с расположением меню, нажимаем «Сохранить меню», чтобы навигационное меню сохранилось. Увидеть меню в действии можно, посетив свой сайт. Плагины WordPress являются чем-то вроде приложений для смартфонов, только для сайта. С их помощью вы сможете добавить на свой веб-сайт те или иные функции, которые повысят функциональность вашего сайта и упростят его работу. В бесплатном доступе на данный момент имеется свыше 50 тысяч плагинов. Но есть и платные плагины, продажей которых занимаются разработчики и сторонние сайты. Бэкап – далеко не всегда все идет по плану, порой случается такое явление, как сбой, несущее за собой потерю всей информации сайта. Чтобы этого избежать, необходимо регулярно создавать резервные копии своего сайта. Поэтому рекомендуем уделить внимание выбору плагина для создания резервных копий. Не стоит игнорировать данный шаг, ведь это на самом деле крайне важно! Безопасность – у нас имеется полное руководство по безопасности WP для новичков, с помощью которого вы сможете обезопасить свой веб-сайт. Дизайн и настройка – для этой цели мы советуем воспользоваться либо стандартным редактором блоков, либо же Elementor. Оба редактора 28 помогут вам определится с дизайном главной страницы, создать страницы для определенных целей и даже придумать собственную пользовательскую тему. Если же вы разработчик, то обратите внимание на статью о том, как создать плагин для WordPress. Так же мы использовали плагин WooCommerce. WooCommerce - это плагин для отображения вашего сайта WordPress как бизнес-платформы электронной коммерции. Все в мгновение ока. Никакого программирования, никакого HTML, всего пара щелчков мышью. Главная страница позволяет нам перейти сразу к авторизации.(рисунок 1). На странице входа размещена форма со следующими полями: логин, пароль, кнопка "Войти", кнопка "Регистрация", ведущая на страницу регистрации (рисунок 2). На странице регистрации - форма с другими полями: Фамилия, имя, электронная почта, пароль, пароль повторно, кнопка “Зарегистрироваться” (рисунок 3). В разделе магазин мы можем просмотреть весь спект услуг и товаров, добавив в корзину то что нам нужно, просмотреть их краткое описание(рисунок 4). Перейдя в раздел корзины мы можем просмотреть выбранные товары увидеть итог, подитог и использовать скидочные купоны. Если какие то 29 товары нам не нужны, мы можем тут же удалить их из нашего чека.(рисунок 5). Закончив с проверкой вашей корзины мы переходим к оформлению заказа. Здесь мы указываем наши контактные данные и адрес магазина. Также можно указать какие то особые пожелания или детали. (рисунок 6,7). При разработке дизайна, мы для каждого экрана создали дизайн экрана для настольного компьютера с шириной окно 1920 пикселей и мобильного устройства с шириной 480 пикселей. Так же имеються адаптации для планшетов и мобильных телефонов. 2.5 ПО для разработки дизайна Программа Photoshop — это графический редактор, в котором можно создавать и обрабатывать изображения. Это, пожалуй, самый известный графический редактор, а его название уже стало нарицательным: часто вместо «отредактировать фото» мы слышим «отфотошопить», хотя речь может идти о каком угодно редакторе. А о красивых фотографиях или необычных кадрах говорят — «Это фотошоп!», что переводится как: «Настолько красиво, что невозможно поверить в реальность кадра». Photoshop придумал студент Мичиганского университета Томас Нолл 34 года назад. Тогда программа называлась Display. Но всего через год после запуска её купила Adobe Systems — американская компания — разработчик программного обеспечения. А ещё через год редактор получил новое название — Adobe Photoshop. Три десятка лет Photoshop был главным инструментом для профессиональных дизайнеров и фотографов, а также любителей, а Adobe — монополистом на рынке графических редакторов. Всё это 30 время редактор обрастал новыми функциями, и сейчас его можно сравнить с хорошим швейцарским ножом — Photoshop настолько же универсален. Photoshop — это редактор растровой графики. А растровое изображение — это то, которое состоит из множества точек — пикселей. Чем больше точек, тем больше возможностей для работы с цветом и выше качество картинки на выходе. Photoshop умеет работать с фотографиями, 3D-объектами, анимацией, типографикой. Хоть на рынке уже появились узкоспециализированные программы, с помощью Photoshop до сих пор можно решить любую задачу, например: разработать макеты для сайта; обработать фотографии; сверстать буклет, газету, книгу; оформить уличный билборд; создать гифку или анимацию; подготовить визуалы для социальных сетей; и многое другое. Если составить топ функций Photoshop — от более до менее популярных, то выглядеть он будет так: 1. Обработка изображений. К обработке можно отнести ретушь, коллажирование, цветокоррекцию. До сих пор у Photoshop нет конкурентов с таким же богатым набором инструментов для работы с изображениями. 2. Создание иллюстраций. Хотя профессиональных приложений для иллюстраторов довольно много, всё же остаётся пласт художников, 31 выбирающих именно Photoshop для работы. В нём можно и создать иллюстрацию с нуля, и обработать её как любое другое изображение. Например, надо добавить объёма волосам персонажа — можно не дорисовывать, а использовать инструмент «Пластика». Набором функций Photoshop упрощает работу художникам — не приходится «прыгать» между разными редакторами. 3. Вёрстка сайтов и элементов веба. Ещё недавно Photoshop был лидером и в этой области, но его начали оттеснять узкоспециализированные приложения. Сначала Sketch, потом Figma и конструкторы сайтов. 4. Вёрстка текста. С появлением в пакете Adobe InDesign большинство людей, занимающихся вёрсткой и типографикой, перешли на него. Но для простых задач, например вёрстки лифлета или буклета, многие всё ещё предпочитают пользоваться Photoshop. 5. 3D и анимация. Эти функции используются меньше всего: в анимации предпочтение отдаётся Adobe After Effects, а для создания 3D-моделей есть более профессиональные программы от других разработчиков. Но и Photoshop справляется с этими задачами: можно создать мокап — то есть модель или макет — упаковки или визитки и проектировать дизайн уже на объёмном объекте. Полезно, чтобы представить, как будет выглядеть задумка в жизни. Adobe Illustrator – это программа, созданная для работы с векторной графикой. С помощью Adobe Illustrator дизайнеры создают красочные иллюстрации, иконки, паттерны, логотипы, различные макеты для печати и многое другое. Начинающему дизайнеру будет полезно освоить главные функции редактора, ведь без него как без рук! Давайте посмотрим, что умеет Иллюстратор и как его используют профессионалы. Что такое векторная графика? Векторные изображения состоят из кривых линий, которые образуют геометрические объекты. Такая графика создается программой при помощи математических формул. Создание векторной иллюстрации чем-то 32 напоминает создание аппликации – вы накладываете друг на друга формы и отрезаете половинку круга, чтобы, к примеру, сделать дольку апельсина. Фишка векторной графики в том, что как ни растягивай такое изображение – оно останется четким в абсолютно любом масштабе. Растровое изображение (например, фотография) при сильном приближении покажет вам зазубренные края и точки – пиксели. А вот если вы попробуете приблизить векторную иллюстрацию, она будет масштабироваться бесконечно. Условно говоря, если нарисовать векторный логотип и распечатать на самом большом принтере во вселенной, такой баннер можно демонстрировать из космоса. А если подлететь к нему поближе, то изображение будет очень четким. Это дает возможность использовать одно и то же изображение в любых масштабах. В этом заключается принципиальная разница между Adobe Illustrator и Adobe Photoshop: в первом вы работаете с векторной графикой, а во втором – с растровой (состоящей из пикселей). Основные функции Adobe Illustrator Работа с геометрическими фигурами. В Иллюстраторе можно ловко работать с фигурами - объединять их, вычитать, дополнять другими контурами и так далее. Геометрические формы часто являются основами для иконок и логотипов, поэтому работа с ними – вещь фундаментальная. Создание иллюстраций. Делайте яркие иллюстрации из фигур, линий и контуров, применяйте различные эффекты и текстуры. В Adobe Illustrator можно создавать любые формы, накладывать их друг на друга с помощью слоев и применять различные эффекты: градиенты, тени, текстуры и прочее. Трассировка растровой графики. Иллюстратор дает возможность переводить растровое изображение в векторное за пару кликов. Редактирование контуров. Рисуйте самостоятельно инструментом «Перо» или редактируйте чужие иллюстрации. Вы можете скачивать проекты в Ai-формате со стоков и редактировать каждый элемент. Применение заливок. В Adobe Illustrator можно с легкостью применять различные заливки к объектам и контурам. Пусть все будет так, как вам хочется! 33 Подготовка к печати. Визитки, плакаты или огромные рекламные щиты. Так как векторная графика масштабируется до любых размеров, в Иллюстраторе можно создавать рекламные щиты размером с дом. Параметры экспорта файла позволяют настроить вылеты, цветовой профиль для печати, а также выбрать формат. Работа с монтажными областями. С помощью монтажных областей удобно, к примеру, делать баннеры для сайта в различных размерах. Преобразование текста в кривые. Любой текст в Adobe Illustrator можно перевести в кривые, то есть сделать векторным. Это позволит работать с ним так, будто это векторная форма – можно изменять форму букв, сделать логотип или красивую надпись. Создание кистей. Сделав собственные кисти, вы сможете добавить еще больше уникальности своим иллюстрациям. Если на создание своих кистей времени нет, их можно загружать со сторонних ресурсов. Что можно сделать в Adobe Illustrator? Логотипы Как правило, дизайнеры создают логотипы в векторном формате. Как я говорила выше, это делается для того, чтобы без потери качества иметь возможность масштабировать лого до любых размеров. Начать создавать лого можно на бумаге от руки, а затем импортировать изображение в Illustrator, создать контуры на основе эскиза или строить его с нуля прямо в программе. Для удобства работы можно использовать модульную сетку, чтобы создать лаконичный логотип. Шрифты и надписи Так как в Иллюстраторе можно сделать векторным любой текст, это дает простор для фантазий на тему леттеринга и дизайна текста. Можно растягивать буквы, менять их форму и цвет, гнуть в разные стороны, совмещать с другими фигурами и многое другое. Для леттеринга пригодится инструмент «Трассировка изображения» – можно сделать надпись от руки, сфотографировать и импортировать фото в Иллюстратор. С помощью трассировки программа сама построит векторные контуры вашей надписи – останется их только доработать. А различные кисти и эффекты помогут придать надписи уникальности. Иконки 34 В Adobe Illustrator удобно создавать серии иконок. Вы можете задать стиль оформления элементов и применять его к разным фигурам, чтобы иконки выглядели так, будто они из одной семьи. Чтобы следовать пропорциям, при создании иконок дизайнеры используют сетку, это здесь тоже предусмотрено. Широкий арсенал инструментов позволит сделать иконки в любом стиле – от простых форм до имитации 3D. Иллюстрации В Illustrator можно делать и сложные иллюстрации – настоящие произведения искусства. С этим редактором работают не только дизайнеры, создающие рекламные макеты. Художники-иллюстраторы тоже используют возможности программы для создания изображений. А версия для iPad делает процесс удобнее: на планшете можно рисовать от руки векторными кистями. Макеты для печати Зачастую дизайнеры пользуются Иллюстратором для создания макетов для печати, например визиток, флаеров или плакатов. В общем, всего, что можно сделать в одно- или двухстороннем варианте. Многостраничные документы в Иллюстраторе делать не слишком удобно – для этого есть Adobe InDesign. Так как редактор умеет импортировать растровые изображения, вставить картинку в проект не составит труда. Графика для социальных сетей и сайтов Векторные иллюстрации, созданные в Adobe Illustrator, можно использовать для оформления постов в социальных сетях. Например, вы можете создать парочку шаблонов для Инстаграма или посмотреть, как будет выглядеть серия постов в сетке. Инфографика Инфографику используют для визуализации каких-либо данных. Если для инфографики требуется минималистическое оформление в виде иконок, схем и текста – использовать Illustrator будет отличным решением. К тому же в программе есть инструмент для создания диаграмм: линейной, круговой, столбцами и прочих. Удобно! Графика для анимации 35 С помощью Adobe Illustrator создают элементы для последующего импорта и анимации в After Effects. Да, сначала все это рисовали именно в Иллюстраторе! Стикеры Если вы думаете о создании собственного стикерпака, попробуйте сделать его в Иллюстраторе. Такие стикеры можно использовать в мессенджерах. Иногда компании разрабатывают стикеры, чтобы дарить их своим клиентам в качестве сувенира или оформлять ими упаковку товара. Какие форматы умеет сохранять Adobe Illustrator? Проект, созданный в Adobe Illustrator, можно сохранить в 5 собственных форматах: AI, PDF, EPS, FXG и SVG. Это значит, что в этих форматах полностью сохраняются все данные, которые есть в проекте. Но если вы уже закончили работу, и нужно экспортировать макет для печати или загрузки в интернет, Illustrator предложит вам такие варианты: 1. BMP, 2. JPG, 3. PNG, 4. PSD, 5. SVG, 6. TIF, 7. TGA, 8. CSS, 9. WMF, 10. EMF, 11. DWG, 12. TXT, 13. DXF, 14. PCT. Эти варианты форматов доступны только при выборе пункта «Экспортировать как...». 36 ЗАКЛЮЧЕНИЕ Во время работы над выпускной квалификационной работой на тему “Разработка вебсайта”, нами сначала были описаны и систематизированы необходимые теоретические знания. информационная система - это цельная система, работа всех элементов которой связана между собой. Она состоит из двух подсистем: подсистема комплектования и управления входными потоками информации; подсистема обслуживания пользователей Есть несколько групп информационных процессов, подлежащих автоматизации: управленческие, технологические, библиотечного обслуживания, информационного обеспечения. Технологические процессы и процессы библиотечного обслуживания являются цикличными и часто повторяющимися, поэтому на их автоматизации мы и сконцентрировались. Технологические процессы состоят из некоторых компонентов — технологических операций, процессов, этапов, событий. Мы использовали это при определении функционала информационной системы. Разработка приложения состоит из следующих этапов: инжиниринг требований к программному обеспечению; проектирование; реализация; проверка и оценка качества; развертывание; поддержка; развитие. Мы прошли 4 этапа разработки: инжиниринг требований, проектирование, реализация, оценка качества. Развертывание, поддержка и развитие являются нашей целью в продолжении реализации подготовленного проекта. После обзора теоретической информации по заданной теме, мы разработали информационную систему «Бионат». Реализована она в виде 37 многостраничного веб-приложения. Этот выбор обусловлен несколькими факторами: − доступ к веб-приложению осуществляется через браузер, что гарантирует возможность его использования с любого устройства с выходом в интернет; − динамическое обновление изменяющихся данных; − удобство интеграции информационной системы в работу библиотеки. Для разработки наиболее удобной в использовании информационной системы, мы разработали требования к ее функциональным и качественным характеристикам, к дизайну пользовательского интерфейса. Таким образом, мы разработали информационную систему «Бионат», частично автоматизирующую технологические процессы и процессы библиотечного обслуживания. Она упрощает как работу сотрудников «Бионат», так и доступ покупателям к услугам. Цель работы считаем достигнутой, поставленные нами задачи выполнены. Разработанное нами приложение может быть интегрировано в работу «Бионат» или использоваться как основа для разработки информационной системы с расширенными возможностями для компании. Написанная нами работа может быть использована для получения теоретических знаний по созданию сайта, разработке приложений, автоматизации различных процессов, для более глубокого понимания проектирования архитектуры как фронтенда, так и бэкенда приложений. 38 СПИСОК ЛИТЕРАТУРЫ https://ru.wikipedia.org/wiki/WordPress https://topuch.ru/kafedra-bezopasnosti-informacionnih-sistem-poyasnitelenayazap/index.html https://ru.wikipedia.org/wiki https://www.bibliofond.ru/view.aspx?id=523168 https://help.reg.ru/hc/ru/articles/4408054741777-%D0%A7%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-Wordpress-%D0%BE%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B5%D0%B8-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B5-%D1%81%D0%BD%D0%B5%D0%B9 https://ru.wikipedia.org/wiki/PHP https://ru.wikipedia.org/wiki/MySQL https://webnus.net/ru/elementor-woocommerce-builder/ https://elementor.com/ https://wordpress.com/ru/ https://www.youtube.com/watch?v=MWm5IjjmaaI&ab_channel=GarageBiz https://www.youtube.com/watch?v=G2toms43wI&t=232s&ab_channel=%D0%93%D0%BE%D1%88%D0%B0%D0%94%D1%83%D0%B 4%D0%B0%D1%80%D1%8C https://ru.wordpress.org/plugins/woocommerce/ https://woocommerce.com/ https://www.youtube.com/watch?v=fYJkGF21m10 39 Приложение приложение 1 приложение 2 40 приложение 3 приложение 4 41 приложение 5 приложение 6 42 приложение 7 Приложение 8 43 Приложение 9 44