Файл: Разработка сайта салона красоты «Изумруд».pdf

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

PHP (Hypertext PreProcessor, препроцессор гипертекста) – язык программирования, исполняемый на стороне веб − сервера, спроектированный Расмусом Лердорфом (Rasmus Lerdorf) в качестве инструмента создания динамических и интерактивных веб – сайтов. Этот язык оказался достаточно гибким и мощным, поэтому приобрёл большую популярность и используется в проектах любого масштаба: от простого блога до крупнейших веб-приложений в Интернете.

Достоинства PHP:

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

Недостатки PHP:

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

Вывод

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

---

2 Практическая часть

2.1 Выбор и установка CMS

CMS – это система, которая позволяет в удобном виде создавать и управлять (редактировать, удалять) текстовыми материалами и мультимедиа документами (содержимое или контент) на сайте. Аббревиатура «CMS» появилась от англ. Фразы Content Management System, что и переводится как система управления контентом.

Рутинная работа по ручному созданию сайта с недавнего времени заменена CMS – сайтами. Наиболее распространенными является Joomla и WordPress – система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие индустриально − стандартные реляционные СУБД.

CMS бывают как платные (коммерческие), так и бесплатные. Наиболее популярные CMS среди платных это:

• 1C – Bitrix – компания «1С − Битрикс» занимает лидирующие позиции на российском рынке в области разработки систем управления веб-проектами и корпоративной информацией;
• PHPShop – решение для быстрого создания Интернет-магазина, обеспечивает достаточную гибкость, предоставляет широкие возможности по настройке;
• Simpla – это готовое решение для быстрого создания интернет − магазина с широкими возможностями и хорошим дизайном;
• DataLife Engine – это многопользовательский новостной движок, обладающий большими функциональными возможностями. Движок предназначен в первую очередь для создания новостных блогов и сайтов с большим информационным контентом;
• Amiro – система Amiro.CMS позволяет эффективно управлять контентом веб-сайта, товарным ассортиментом интернет − магазина и обслуживать посетителей интернет − ресурса. С её помощью можно создать полноценный высокофункциональный сетевой ресурс, оснащенный всеми необходимыми модулями;
• HostCMS – эта система предлагает возможность создания на разных доменах (в том числе и на поддоменах) различных сайтов, управляемых одним экземпляром системы управления.

Среди бесплатных, наиболее популярными являются следующие CMS:

• WordPress – это самая популярная система управления контентом для ведения собственного блога. WordPress бесплатен и свободен к распространению. С каждым днем сфера применения WordPress расширяется от блогов до корпоративных сайтов и сложных информационных порталов;
• Joomla! – является одной из самых популярных систем управления сайтов, являясь бесплатной в распространении. Простота в использовании, расширяемость и множество других аспектов позволили CMS Joomla! стать одним из лидирующих программных продуктов для создания сайтов;
• Drupal – архитектура Drupal позволяет применять его для построения различных типов сайтов – от блогов и форумов до информационных архивов или сайтов новостей;
• InstantCMS – это бесплатная многофункциональная система управления сообществами. Она написана на PHP и использует MySQL в качестве базы данных. В первую очередь система ориентирована на создание социальных сетей, сайтов знакомств, онлайн − клубов и городских порталов;
• e107 – благодаря своей простоте E107 прекрасно подходит для создания сайтов любой сложности, от сaйтов визиток до порталов, а широкие возможности этой CMS позволяют сделать крупный ресурс с ежедневной многотысячной посещаемостью;
• MODx – профессиональный инструмент разработки сайтов, позволяющий управлять контентом. На MODx можно построить сайт любой сложности, практически с любым набором функций, при этом система не будет никоим образом влиять на Ваш html – код. MODx бесплатна и распространяется с открытым кодом (лицензия GPL).

---

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

Так как сайт салона красоты «Изумруд» будет в основном предназначен для просмотра списка услуг, акций салона и онлайн записи, то гораздо удобнее будет использовать WordPress.

Главными преимуществами системы Wordpress являются:

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

Чтобы установить Wordpress, необходимо войти в панель управления хостингом и перейти в раздел бесплатные CMS, как показано на рисунке 2.1. В списке необходимо выбрать «WordPress».

Рисунок 2.1 – Выбор CMS для установки

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

• домен для установки;
• логин администратора;
• пароль администратора;
• e − mail администратора;
• описание сайта.

Рисунок 2.2 – Ввод данных для входа на сайт

После заполнения всех данных необходимо нажать на кнопку «установить на сайт», в итоге CMS установлена.

2.2 Разработка структуры сайта

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

Информационная структура разработанного сайта представлена на рисунке 2.3.

Рисунок 2.3 – Структура сайта

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

2.3 Структурирование контента

---

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

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

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

• использовать только один заголовок <H1> на странице;
• иерархически разбивать контент страниц на заголовки и подзаголовки <H1…H6>, не гнать все сплошняком;
• разбивать текст на абзацы для удобства чтения;
• использовать нумерованные и маркированные списки;
• основные мысли в тексте выделять тегами <strong> и <em> не путайте с выделениями ключевых слов на странице;
• разбавлять текст тематическими изображениями;
• по необходимости вставлять видео материалы, если они уместны;
• добавить иконки социальных сетей, чтобы пользователи могли делиться материалами сайта со своими друзьями;
• добавлять ссылки на контент, который может продолжить мысль или может быть полезен пользователям, это также ценится поисковыми системами и учитывается при ранжировании.

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

• контрастность – светлый фон и серый шрифт подобраны для удобства чтения;
• фон – выбран однотонный фон, не отвлекающий от содержимого;
• шрифт – используются шрифты Raleway и Playfair Display (см. рисунок 2.4);
• ссылки имеют цвет темно-серый.

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

Рисунок 2.4 – Примеры шрифтов

2.4 Фирменный стиль

Фирменный стиль – это совокупность деталей: визуальных, графических, цветовых и многих других, которые формируют индивидуальный стиль сайта и помогают сделать её узнаваемой среди многих других.

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

---

Основные элементы фирменного стиля:

• фирменный логотип;
• фирменная иконка;
• фирменный шрифт;
• фирменный цвет;
• схема вёрстки.

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

2.5 Разработка логотипа

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

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

Рисунок 2.5 – Логотип сайта

2.6 Графические макеты страниц

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

В ходе разработки сайта, были установлены дизайн – макеты, ниже на рисунке 2.7 и 2.8 представлены варианты дизайн – макетов типовых страниц, а в приложении А продемонстрированы все остальные дизайн-макеты страниц.

Рисунок 2.7 – Дизайн макета главной страницы

Рисунок 2.8 – Макет редактирования в администрировании

2.7 Программирование страниц

Ниже приведен фрагмент листинга кода главной страницы:

Рисунок 2.9 – код главной страницы

Основной код листинга главной страницы приведен в приложении Б.

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

---