Теги: программирование компьютер сайты web-технологии
Год: 2018
Текст
5
Содержание:
ВВЕДЕНИЕ .................................................................................................................. 6
1. ОПИСАТЕЛЬНЫЙ РАЗДЕЛ ................................................................................... 9
1.1 Описание языков веб-программирования ....................................................... 9
1.2 Выбор программного средства для разработки ............................................ 16
1.3 Описание проекта сайта ................................................................................. 16
2. ТЕХНОЛОГИЧЕСКИЙ РАЗДЕЛ .......................................................................... 19
2.1 Разработка дизайна сайта ............................................................................... 19
2.2 Разработка функционала сайта ...................................................................... 26
3. ОХРАНА ТРУДА ................................................................................................... 38
3.1 Требования техники безопасности при работе за персональным
компьютером ........................................................................................................ 38
3.2. Обеспечение пожарной безопасности .......................................................... 39
4. ЭКСПЕРИМЕНТАЛЬНЫЙ РАЗДЕЛ .................................................................... 41
4.1 Тестирование работоспособности сайта ....................................................... 41
4.2 Анализ результатов тестирования ................................................................. 42
ЗАКЛЮЧЕНИЕ .......................................................................................................... 47
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ.................................................... 48
ПРИЛОЖЕНИЯ.......................................................................................................... 50
6
ВВЕДЕНИЕ
С появлением Web-технологии компьютер начинают использовать
совершенно новые слои населения Земли. Можно выделить две наиболее
характерные группы, находящиеся на разных социальных полюсах, которые были
стремительно вовлечены в новую технологию, возможно, даже помимо их
собственного желания. С одной стороны, это были представители элитарных
групп общества руководители крупных организаций, президенты банков, топ-
менеджеры, влиятельные государственные чиновники и т.д . С другой стороны,
это были представители широчайших слоев населения домохозяйки,
пенсионеры, дети.
При появлении технологии Web компьютеры повернулись лицом к этим
двум совершенно противоположным категориям потенциальных пользователей.
Элиту объединяла одна черта – в силу высочайшей ответственности и
практически стопроцентной занятости “большие люди” никогда не пользовалис ь
компьютером; типичной была ситуация, когда с компьютером работал секретарь.
В какой-то момент времени они поняли, что компьютер им может быть полезен,
что они могут результативно использовать то небольшое время, которое можно
выделить на работу за компьютером. Они вдруг поняли, что компьютер это не
просто модная и дорогая игрушка, но инструмент получения актуальной
информации для бизнеса. При этом им не нужно было тратить сколько -нибудь
заметного времени, чтобы освоить технологию работы с компьютером (по
сравнению с тем, как это было раньше).
Спектр социальных групп, подключающихся к сети Интернет и ищущих
информацию в WWW, все время расширяется за счет пользователей, не
относящихся к категории специалистов в области информационных технологий.
Это врачи, строители, историки, юристы, финансисты, спортсмены,
путешественники, священнослужители, артисты, писатели, художники. Список
можно продолжать бесконечно. Любой, кто ощутил полезность и незаменимость
сети для своей профессиональной деятельности или увлечений, присоединяется к
огромной армии потребителей информации во «Всемирной Паутине».
7
Web-технология полностью перевернула наши представления о работе с
информацией, да и с компьютером вообще. Оказалось, что традиционные
параметры развития вычислительной техники производительность, пропускная
способность, емкость запоминающих устройств не учитывали главного «узкого
места» системы интерфейса с человеком. Устаревший механизм
взаимодействия человека с информационной системой сдерживал внедрение
новых технологий и уменьшал выгоду от их применения. И только когда
интерфейс между человеком и компьютером был упрощен до естественности
восприятия обычным человеком, последовал беспрецедентный взрыв интереса к
возможностям вычислительной техники.
С развитием технологий гипертекстовой разметки в Интернете стало
появляться всё больше сайтов, тематика которых была совершенно различной –
от сайтов крупных компаний, повествующих об успехах компании и её провалах,
до сайтов маленьких фирм, предлагающих посетить их офисы в пределах одного
города.
Развитие Интернет-технологий послужило толчком к появлению новой
ветки в Интернете – Интернет- форумов. Стали появляться сайты, и даже целые
порталы, на которых люди со всех уголков планеты могут общаться, получать
ответы на любые вопросы и, даже, заключать деловые сделки.
Объект исследования - web-технологии.
Предмет исследования – язык разметки web-страниц HTML, PHP, JS и веб-
сервер Nginx+PHP-FPM .
Целью дипломной работы является разработка web-сайта для малого и
среднего бизнеса, с целью увеличить конверсии и продажи услуг и товаров.
Для достижения поставленной цели в работе необходимо решить
следующие задачи:
- ознакомиться с современными Интернет-технологиями;
-
изучить программный инструментарий для разработки и создания Web-
сайтов;
-
выявить и учесть методы и способы представления на Web-страницах
различных видов информации, не препятствующие их доступности;
8
-
ознакомиться с основными правилами и рекомендациями по разработке и
созданию Web-сайтов и неукоснительно следовать им в своей практике;
- определиться со структурой Web-страниц;
- выбрать стратегию разработки и создания Web-сайта.
- изучить документацию по Nginx+PHP-FPM .
- изучить скриптовые языка php и js.
- разработать алгоритм работы с пользователями и реализовать.
-
разработать алгоритм, отвечающий за создание сертификатов и
реализовать.
- реализовать возможность скачивания пользователем сертификата.
World Wide Web - глобальная компьютерная сеть, на сегодняшний день
содержит миллионы сайтов, на которых размещена всевозможная информация.
Люди получают доступ к этой информации посредством использования
технологии Internet. Для навигации в WWW используются специальные
программы - Web-браузеры, которые существенно облегчают путешествие по
бескрайним просторам WWW. Вся информация в Web-браузере отображается в
виде Web-страниц, которые являются основным элементом байтов WWW.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе
различные виды информации: текст, графику, звук, анимацию и видео. От того,
насколько качественно и красиво сделана та или иная Web-страница, зависит во
многом ее успех в Сети.
Пользователю приятно посещать те Web-страницы, которые имеют стильное
оформление, не отягощены чрезмерно графикой и анимацией, быстро
загружаются и правильно отображаются в окне Web-браузера.
Создать Web-страницу непросто, но наверно каждый человек хотел бы
попробовать себя в роли дизайнера.
В своей дипломной работе я разобрался в том, что необходимо знать и уметь для
создания Web-страницы, и какое программное обеспечение является
инструментарием создания Web-страниц, и как его эффективно использовать.
9
1. ОПИСАТЕЛЬНЫЙ РАЗДЕЛ
1.1 Описание языков веб-программирования
PHP - один из лидирующих языков современной веб-разработки. Его отцом
считается датский программист Расмус Лердорф, который в 1994 году создал
набор скриптов на Perl — ту самую «персональную домашнюю страницу»,
которая легла в основу PHP. Со временем к работе над ним подключились
разработчики со всего мира. PHP
—
один из старейших языков в рамках open
source-проекта. Сейчас его поддерживает и разрабатывает группа энтузиастов во
главе с компанией Zend Technologies. Ей руководят Зеев Сураски и Энди Гутманс:
в 1997 году они создали третью версию PHP и активно развивают язык по
сегодняшний день. Главная характеристика PHP — интерпретируемость. В
отличие от Java, которая компилируется, а затем запускается в работу, PHP
создается во время обращения к нему. Человек открывает сайт, на сервер
посылается запрос, и в это время компилируется код. Каждый скрипт
компилируется в реальном времени, а затем выполняется.
HTML – обмен информацией в Интернет осуществляется с помощью
протоколов прикладного уровня, реализующих тот или иной прикладной сервис
(пересылку файлов, гипертекстовой информации, почты и т.д .). Одним из
наиболее молодых и популярных сервисов Интернет, развитие которого и
привело к всплеску популярности самой Интернет, стала World Wide Web
(WWW), основанная на протоколе HTTP (Hyper Text Transfer Protocol - протокол
передачи
гипертекстовой
информации). Гипертекстовые
докуме нты,
представленные в WWW, имеют одно принципиальное отличие от традиционных
гипертекстовых документов - связи, в них использующиеся, не ограничены одним
документом, и более того, не ограничены одним компьютером. Для подготовки
гипертекстовых документов используется язык HTML (Hyper Text Markup
Language – язык разметки гипертекстовых документов), предоставляющий
широкие возможности по форматированию и структурной разметке документов,
организации связей между различными документами, средства включения
графической
и
мультимедийной
информации.
HTML-документы
просматриваются с помощью специальной программы - браузера. Наибольшее
10
распространение в настоящее время получили браузеры Navigator компании
Netscape (NN) и Internet Explorer компании Microsoft (MSIE). Реализации NN
доступны практически для всех современных программных и аппаратных
платформ, реализации MSIE доступны для всех Windows платформ, Macintosh и
некоторых коммерческих Unix-систем. HTML-документ состоит из текста,
представляющего собой содержание документа, и тегов, определяющих его
структуру и внешний вид при отображении браузером. Простейший html-
документ выглядит следующим образом:
<html>
<head>
<title>Название</title>
</head>
<body>
<p>Тело документа
</body>
</html>
Как видно из примера, тег представляет собой ключевое слово, заключенное
в угловые скобки. Различают одинарные теги, как, например, <p>, и парные, как
<body> </body>, в последнем случае действие тега распространяется только на
текст между его открывающей и закрывающей скобкой. Теги также могут иметь
параметры - например, при описании страницы можно задать цвет фона, цвет
шрифта и т.д .: <body bgcolor= "white" text="black">.
Текст всего документа заключается в теги <html>, сам документ разбивается
на две части - заголовок и тело. Заголовок описывается тегами <head>, в которые
могут быть включены название документа (с помощью тегов <title>) и другие
параметры, использующиеся браузером при отображении документа. Тело
документа заключено в теги <body> и содержит собственно информацию,
которую видит пользователь. При отсутствии тегов форматирования весь текст
выводится в окно браузера сплошным потоком, переводы строк, пробелы и
табуляции рассматриваются как пробельные символы, несколько пробельных
11
символов, идущих подряд, заменяются на один. Для форматирования
используются следующие основные теги:
<p> - начало нового абзаца, может иметь параметр, определяющий выравнивание:
<p align=right>;
<br> - перевод строки в пределах текущего абзаца;
<u></u> - выделение текста подчеркиванием
Ссылка на другой документ устанавливается с помощью тега <a
href= "URL">...</a>, где URL - полный или относительный адрес документа. При
этом текст, заключенный в тег <a>, обычно выделяется подчеркиванием и цветом,
и после щелчка мышью по этой ссылке браузер открывает документ, адрес
которого указан в параметре href. Графические изображения вставляются в
документ с помощью тега <img src= "URL">.
JavaScript – изначально JavaScript был создан, чтобы «сделать веб-страницы
живыми». Программы на этом языке называются скриптами. Они могут
встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.
Скрипты распространяются и выполняются, как простой текст. Им не нужна
специальная подготовка или компиляция для запуска. Это отличает JavaScript от
другого языка – Java. Когда JavaScript создавался, у него было другое имя –
«LiveScript». Однако, язык Java был очень популярен в то время, и было решено,
что позиционирование JavaScript как «младшего брата» Java будет полезно. Со
временем JavaScript стал полностью независимым языком со своей собственной
спецификацией, называющейся ECMAScript, и сейчас не имеет никакого
отношения к Java.
Современный JavaScript – это «безопасный» язык программирования. Он не
предоставляет низкоуровневый доступ к памяти или процессору, потому что
изначально был создан для браузеров, не требующих этого.
Возможности JavaScript сильно зависят от окружения, в котором он работает.
Например, Node.JS поддерживает функции чтения/записи произвольных файлов,
выполнения сетевых запросов и т.д .
В браузере для JavaScript доступно всё, что связано с манипулированием веб-
страницами, взаимодействием с пользователем и веб-сервером.
12
Например, в браузере JavaScript может:
Добавлять новый HTML-код на страницу, изменять существующее
содержимое, модифицировать стили.
Реагировать на действия пользователя, щелчки мыши, перемещения
указателя, нажатия клавиш.
Отправлять сетевые запросы на удалённые сервера, скачивать и загружать
файлы (технологии AJAX и COMET).
Получать и устанавливать куки, задавать вопросы посетителю, показывать
сообщения.
Запоминать данные на стороне клиента («local storage»).
MySQL - это реляционная система управления базами данных с открытым
исходным кодом. В настоящее время эта СУБД одна из наиболее популярных в
веб-приложениях — подавляющее большинство CMS использует именно MySQL
(часто только её, без альтернатив), а почти все веб-фреймворки поддерживают
MySQL уже на уровне базовой конфигурации (без дополнительных модулей).
Из преимуществ СУБД MySQL стоит отметить простоту использования,
гибкость, низкую стоимость владения (относительно платных СУБД), а также
масштабируемость и производительность.
MySQL позволяет хранить целочисленные значения со знаком и
беззнаковые, длиной в 1, 2, 3, 4 и 8 байтов, работает со строковыми и текстовыми
данными фиксированной и переменной длины, позволяет осуществлять SQL-
команды SELECT, DELETE, INSERT, REPLACE и UPDATE, обеспечивает
полную поддержку операторов и функций в SELECT- и WHERE- частях запросов,
работает с GROUP BY и ORDER BY, поддерживает групповые функции
COUNT(), AVG(), STD(), SUM(), MAX() и MIN(), позволяет использовать JOIN в
запросах, в т.ч. LEFT OUTER JOIN и RIGHT OUTER JOIN, поддерживает
репликацию, транзакции, работу с внешними ключами и каскадные изменения на
их основе, а также обеспечивает многие другие функциональные возможности.
Гибкость СУБД MySQL обеспечивается поддержкой большого количества
типов таблиц: пользователи могут выбрать как таблицы типа MyISAM,
поддерживающие
полнотекстовый
поиск,
так
и
таблицы InnoDB,
13
поддерживающие транзакции на уровне отдельных записей. Есть и другие типы
таблиц, разработанные сообществом.
СУБД MySQL появилась в 1995. Написана на C и C++, протестирована на
множестве различных компиляторов и работает на различных платформах. C 2010
года разработку и поддержку MySQL осуществляет корпорация Oracle. Продукт
распространяется как под GNU GPL, так и под собственной коммерческой
лицензией. Однако по условиям GPL, если какая -либо программа включает
исходные коды MySQL, то и эта программа тоже должна распространяться по
лицензии GPL. Для нежелающих открывать исходные тексты своих программ как
раз предусмотрена коммерческая лицензия, которая, в дополнение к возможности
разработки под «закрытой» лицензией, обеспечивает качественную сервисную
поддержку. Сообществом разработчиков MySQL созданы различные ответвления
Drizzle, OurDelta, Percona Server и MariaDB, все эти ответвления уже
существовали на момент получения прав на MySQL корпорацией Oracle.
Сейчас MySQL вместе с форком MariaDB занимают почётное первое место,
а следом за ними идёт PostgreSQL. Остальные СУБД в веб-проектах используются
значительно реже.
CSS - это язык для формирования внешнего вида документа, созданного с
помощью языка разметки. CSS обычно применяется в качестве инструмента для
описания веб-страниц, которые ранее были написаны на языках XHTML и HTML.
Дополнительно CSS может использоваться и с другими документами типа
XML, наиболее часто используются документы XUL и SVG.
Чтобы понять, что такое CSS, разберем простой пример. Когда сотрудник
редакции газеты или журнала производит верстку издания, он делает пометки, по
которым затем разрабатывается внешний вид готового материала. Например:
«выделить заголовок красным», «сделать отступ», «увеличить расстояние между
информационными блоками» и так далее. При работе с сайта ми нельзя прописать
подобные заметки обычным языком, браузер не сможет их прочитать. Чтобы он
учел отметки, необходимо прописать их на языке CSS.
CSS применяют, чтобы задать стиль документу. Сюда входит разработка
дизайна, верстка макета в зависимости от типа устройств, на котором будет
14
отображаться. CSS можно прописать как в качестве составного элемента
документа, так и в качестве самостоятельного файла.
Nginx - произносится как «енджин-екс», является известным программным
обеспечением с открытым исходным кодом для веб-сервера. В своём
первоначальном выпуске оно функционировало для веб-обслуживания HTTP.
Однако сегодня оно также служит обратным прокси-сервером, балансировщиком
нагрузки HTTP и почтовым прокси-сервером для IMAP, POP3 и SMTP.
Официальный выпуск NGINX состоялся в октябре 2004 года. Создатель
программного обеспечения, Игорь Сысоев, начал свой проект в 2002 году,
пытаясь ответить на проблему C10k. C10k — это задача одновременного
управления десятью тысячами соединений. Сегодня существует ещё больше
подключений, которые должны обрабатывать веб-серверы. По этой причине
NGINX предлагает управляемую событиями и асинхронную архитектуру. Эта
функция делает NGINX одним из самых надёжных ПО для серверов по скорости
и масштабируемости.
Благодаря превосходной способности обрабатывать большое количество
соединений и скорости, многие сайты с высоким трафиком используют сервис
NGINX. Некоторые из этих онлайн-гигантов — Google, Netflix, Adobe, Cloudflare,
WordPress.com и многие другие. Прежде чем узнать больше о NGINX, давайте
посмотрим, как работает веб-сервер. Когда кто-то делает запрос на открытие веб-
страницы, браузер связывается с сервером этого веб-сайта. Затем сервер ищет
запрошенные файлы для страницы и отправляет их в браузер. Это только самый
простой вид запроса.
Приведённый выше пример также рассматривается как один поток.
Традиционные веб-серверы создают отдельный поток для каждого запроса, но
NGINX не работает таким образом. Как указано выше, NGINX работает с
асинхронной архитектурой, управляемой событиями. Это означает, что
аналогичные потоки управляются одним рабочим процессом, и каждый рабочий
процесс содержит меньшие блоки, называемые рабочими соединения ми. Весь
этот блок отвечает за обработку потоков запросов. Рабочие соединения
доставляют запросы к рабочему процессу, который также отправляет его в
15
главный процесс. Наконец, основной процесс предоставляет результат этих
запросов.
Это может показаться простым, но одно рабочее соединение может
обрабатывать до 1024 похожих запросов. Благодаря этому NGINX может без
проблем обрабатывать тысячи запросов. Это также причина, по которой NGINX
отлично подходит для загруженных веб-сайтов, таких как интернет-магазины,
поисковые системы и облачное хранилище.
Прежде чем читать дальше, подумайте о самой инновационной структуре
хостинга, которая может вам понадобиться для вашего сайта. Hostinger
предлагает виртуальный хостинг, VPS и облачный хостинг для небольших и
готовых к росту веб-сайтов.
PHP-FPM
—
это альтернативная реализация PHP FastCGI с несколькими
дополнительными возможностями, которые обычно используются для
высоконагруженных сайтов. FastCGI это высокопроизводительный и
масштабируемый интерфейс для взаимодействия web-сервера и приложений,
дальнейшее развитие технологии CGI. Основное преимущество FastCGI в
изолировании динамического языка от web-сервера — запуск FastCGI процесса
возможен под пользователем, отличным от пользователя web-сервера, а также
процесс может находиться в chroot'е, отличном от chroot'а web-сервера. Помимо
всего прочего, эта технология позволяет запускать web-сервера и CGI процессы
(php скрипты, в случае php-fpm) на различных хостах, что улучшает
масштабируемость и также способствует безопасности без существенной потери
в производительности.
PHP «умеет» работать в режиме FastCGI и без PHP-FPM, но PHP-FPM
устраняет ряд проблем мешающих использовать PHP в режиме FastCGI на
высоконагруженных системах.
Наиболее часто используется связка nginx и PHP-FPM, которая работает
эффективнее «классического» использования Apache с mod_php, а в ряде случаев
показывает более высокую производительность, нежели более «продвинутое»
использование в качестве фронтенда веб-сервера nginx, а в качестве бекенда —
Apache с mod_php.
16
1.2 Выбор программного средства для разработки
Учитывая сложность разработки проекта, и поставленные задачи заказчика.
А именно, использование чистого PHP без использования фреймворков,
необходимо было делать все в ручную, и именно под клиента. Таким образом, мне
необходимо было, разработать базу данных под проект, ознакомившись с ним
заранее (Техническое задание), создать уникальный и приятный дизайн проекта,
написать фронтед часть, для того, чтобы посылать запросы пользователей на
сервер, и дальше обрабатывать их на бакенде (серверной части).
Были использованы следующие языки программирования и открытые
библиотеки:
PHP.
MySQL.
JQUERY (Фреймворк JavaScript).
Bootstrap (Фреймворк CSS+HTML+JavaScript).
Nginx+PHP-FPM (Веб-сервер).
SublimeText – для написания кода сайта.
Выделенный сервер – где находится веб-сервер, и в принципе все мои
проекты.
Почему я буду использовать именно эту связку, сейчас расскажу по
подробнее. Я выбрал именно эти инструменты, потому что считают что веб-
сервер в связке Nginx+PHP-FPM является более стойким и стабильным по
сравнению с связкой Nginx+Apache, потому что меньше потребляется ресурсов
сервера, более быстрая работа сайтов, больше обрабатывается запросов в единицу
времени, более простая работа с конфигами Nginx.
Таким образом, обозначив все необходимые ресурсы заказчику, я приступил
к написанию плана по разработке данного проекта.
1.3 Описание проекта сайта
Sarafan.Click – это маркетинговый инструмент для бизнеса, разработанный с
целью автоматизации процесса привлечения новых клиентов через канал
рекомендаций ("сарафанного радио").
17
Техническое задание от заказчика – разработать стартап проект, с
административной частью, обозначить пользователям две роли: компания и
рекомендатель. Таким образом функционал личного кабинета должен делиться на
две части, потому что необходимо показывать двум различным ролям разные
личные кабинеты. Потому функционал в каждой роли пользователей кардинально
различается. Так же необходимо разработать базу данных, которая должна
взаимодействовать с внутренними и внешними данными приходящими от
пользователей.
Из чего состоит клиентская часть компании:
1. Авторизация
2. Регистрация (подтверждение почты)
3. Восстановление пароля (через почту)
4. Личный кабинет
4.1 Промокоды
4.2 Аналитика
4.3 Инструменты
4.4 Баланс
4.5 Профиль и настройки
Из чего стоит клиентская часть рекомендателя :
1. Мои ссылки
2. Каталог компаний
3. Баланс
4. Реферальная программа
5. Профиль и настройки
Из чего состоит административная часть сайта:
1. Редактирование данных пользователей
2. Изменение информации о компаниях
3. Аналитика данных по всем компаниям
4. Фильтр данных пользователей
5. Создание, удаление, изменение категорий компаний
6. Настройка тарифных планов
18
7. Настройка реферальной программы, указания процентного вознаграждения
Сайт создается с целью упрощения привлечения новых клиентов в бизнес, а
так же повышение продаж товаров или услуг. С удобной панелью
администрирования сайта, и удобным личным кабинетом пользователей, которые
смогут отслеживать статистику по своим компаниям.
После согласования с заказчиком и подтверждения о начатии работы над
проектом, началось создание стартап-проекта.
19
2. ТЕХНОЛОГИЧЕСКИЙ РАЗДЕЛ
2.1 Разработка дизайна сайта
Для того, чтобы приступить к созданию дизайна сайта, необходимо было
составить HTML документ самого проекта (каркас), определить к каждому блоку
стили, подключить библиотеку Bootstrap, которая позволяет более быстро вести
разработку проекта и реализовывать блоки необходимые проекту.
После составления каркаса, я приступил к рисованию дизайна сайта, первым
делом создавалась шапка сайта (Header), в котором размещаются такие элементы :
логотип сайта, меню сайта, кнопки вход и регистрация.
После создания данного раздела, создается тело сайта , в нем размещается
основной контент, который будет завлекать пользователей и показывать
необходимую информацию проекта. Тем самым описательные разделы,
познавательные блоки, рекомендательные блоки, тарификация, которая
присутствует на сайте и позволяет пользователям понять, какие цены
присутствуют на сайте (для ознакомления).
Дальше идет раздел футер (Footer), в нем содержится вся техническая
информация о сайте, информация позволяющая найти ответы на вопросы
пользователя, либо решить ту или иную проблему.
Адаптивный веб-дизайн (в английском языке «responsive web design») – это
дизайн веб-страниц, обеспечивающий отличное восприятие на различных
устройствах, подключенных к Интернету.
Это значит, что один и тот же сайт можно просматривать на самых разных
устройствах, независимо от разрешения и формата экрана, – смартфонах,
планшетах, ноутбуках и т.д . При этом просмотр будет одинаково удобен для всех
форматов – пользователям мобильных устройств, например, не нужно будет
расширять отдельные области сайта, чтобы не промахнуться мимо нужной
ссылки.
Адаптивный дизайн призван сделать веб-страницы и отображение их
содержимого соответствующими тому устройству, с которого они
просматриваются.
Зачем нужен адаптивный веб-дизайн:
20
Большое разнообразие устройств, с которых можно выходить в Интернет. В
настоящее время существует множество устройств, которыми люди
пользуются, в том числе, и для того, чтобы выходить в Интернет. Все эти
устройства различаются размером экрана, разрешением и, соответственно,
тем, как может отображаться на них веб-сайт. Поэтому важно, чтобы сайт
хорошо смотрелся и правильно отображался у любого из пользователей,
независимо от того, какое устройство он использует.
Популярность мобильных устройств с выходом в Интернет и увеличение
мобильного Интернет-трафика. С ростом популярности мобильных
устройств количества пользователей, которые заходят с них на сайты,
заметно увеличилось, поэтому просто игнорировать их уже нельзя – это не
один-два человека в полгода, это значительная часть вашей аудитории, и им
должно быть удобно пользоваться сайтом (иначе они не будут этого делать).
Отличие адаптивного сайта от мобильной версии (приложения) сайта:
Мобильные версии сайтов и мобильные приложения, специально
разработанные для различных мобильных устройств, также решают
проблему с удобством просмотра сайта, но имеют некоторые недостатки.
Под каждый тип операционной системы нужно свое приложение / версия
сайта. Это требует дополнительных ресурсов, как временных, так и
денежных.
Необходимость загрузки приложения. Для того, чтобы пользоваться вашим
приложением, пользователям необходимо его загрузить. Это требует каких-
то дополнительных усилий от пользователей, и многие не будут этого делать,
если точно не уверены, что приложение им очень нужно и они планируют
регулярно его использовать.
Разделение траффика. С точки зрения продвижения сайта мобильное
приложение не удобно тем, что разделяет весь траффик ресурса на траффик
сайта и траффик приложения, что будет выглядеть, как меньшая
посещаемость сайта.
Необходимость интеграции материалов сайта. В случае с мобильным
приложением необходимо либо синхронизировать сайт с приложением
21
(дополнительные ресурсы), либо делать двойную работу по наполнению
сайта и приложения материалами. В отличие от мобильных приложений,
адаптивный дизайн – это один адрес сайта, один дизайн, одна система
управления и содержание сайта. Безусловно, адаптивный дизайн также имеет
свои минусы, главным из которых является относительная новизна
технологии и, как следствие, недостаток хороших специалистов и знаний о
проектировании адаптивных сайтов.
Принципы адаптивного дизайна
Проектирование начинается с адаптивной версии веб-сайта для мобильных
устройств. На этом этапе дизайнеры стремятся правильно передать смысл и
основные идеи с использованием небольшого экрана и всего одной колонки.
Содержимое при необходимости сокращают, удаляя второстепенные
информационные блоки и оставляя самое важное :
Проектирование для мобильных устройств с самых ранних этапов («mobile
first»);
Применение гибкого макета на основе сетки (flexible, grid-based layout);
Использование гибких изображений (flexible images);
Работа с медиазапросами (media queries);
Применение постепенного улучшения.
Типы адаптивных макетов
1. Резиновый
Простой в реализации и очевидный для пользователя тип представления сайта.
Основные блоки сжимаются до ширины экрана мобильного устройства, где такое
невозможно — перестраиваются в одну длинную ленту.
2. Перенос блоков
Очевидный способ для многоколоночного сайта: при уменьшении ширины экрана
дополнительные блоки (сайдбары) переносятся в нижнюю часть макета.
22
Рис. 1 Перенос блоков
3. Переключение макетов
Этот способ наиболее удобен при чтении сайта с различных устройств: под
каждое разрешение экрана разрабатывается отдельный макет. Способ трудоемок,
поэтому менее популярен, чем предыдущие два.
Рис. 2 Переключение макетов
4. Адаптивность «малой кровью»
Очень простой способ, который подходит для несложных сайтов. Достигается
элементарным масштабированием изображений и типографики. Не очень
популярен, т.к. не обладает гибкостью.
Рис. 3 Адаптивность малой кровью
23
5. Панели
Способ, пришедший из мобильных приложений, где дополнительное меню может
появляться при горизонтальном или вертикальном тапе. Главный недостаток —
неочевидность действий для пользователя: очень непривычно видеть мобильную
навигацию на веб-сайта. Но со временем способ может стать достаточно
популярным.
Рис. 4 Панели
Нужно помнить, что представленные выше макеты не являются универсальными
решениями — для каждого проекта необходимо выбирать наиболее подходящий
под нужды и возможности способ.
Таким образом, использую все популярные методы верстки, у нас
получилась такая главная страница сайта, смотреть на Рис. 5.
Рис. 5 Главная страница
24
Мобильная версия сайта
Мобильная версия сайта – это дублирующая версия основного сайта, для
которой применяется специальная верстка, позволяющая удобно просматривать
и перемещаться по страницам ресурса с мобильных телефонов и планшетов.
Мобильный телефон давно превратился в лучшего друга для большинства
жителей планеты. Современные мобильные гаджеты практически полностью
переняли на себя роль стационарных компьютеров и кардинально изменил
поведение пользователей в интернете. Они одновременно являются источником
информации и средством реализации многих задач. Динамика жизни требует
максимально рационального использования времени, поэтому мы уже давно
изучаем, покупаем и бронируем на ходу.
Каждый проект в интернете имеет свой основной сайт, но разрешение
экранов мобильных устройств отличается от компьютеров и ноутбуков.
Вследствие этого, воспользоваться сайтом с телефона практически невозможно,
поскольку его отображение очень неудобное. Именно поэтому возникла
потребность в наличие оптимизированной версии сайта, которая будет читаемой
для карманных гаджетов.
Зачем нужна мобильная версия сайта
Изобилие тождественных web-ресурсов, как информационных, так и
продающих, порождает дефицит лояльности со стороны посетителей.
Пользователи интернета имеют возможность выбора, поэтому, когда посетитель
натыкается, например, на неудобную навигацию ресурса, он предпочитает не
тратить свое время, а покинуть сайт и уйти к конкуренту. Такая ситуация
вынуждает администраторов создавать максимально комфортные условия для
того, чтобы не только привлечь посетителей, но и мотивировать их задержаться.
Максимальный охват целевой аудитории и создание комфортных условий для
нее - вот для чего нужна мобильная версия сайта.
Отдельная мобильная версия сайта – это реализация комфортного доступа к
сайту с мобильных устройств, которая стала применяться достаточно давно. В
смартфонах сайт отображается в одну колонку, поэтому перед тем, как сделать
мобильную версию сайта разработчику нужно хорошенько продумать дизайн -
25
разместить все так, чтобы ничуть не урезать посетителя в функционале и при том,
сделать взаимодействие с ресурсом максимально удобным.
Как это работает
Принцип, по которому принимается решение, какую версию показывать
посетителю, заключается в том, что, когда пользователь заходит на сайт,
происходит автоматическое определение экрана устройства. Если ширина экрана
идентифицируется, как мобильный гаджет, то запускается переадресация на
мобильную версию ресурса, которая находится на отдельном поддомене. Чтобы
в будущем поисковые системы не воспринимали эту версию как отдельный
ресурс, лучше разместить поддомен на том же домене, что и основной сайт, иначе
продвижение мобильной версии сайта будет контрпродуктивным.
Как перевести сайт на мобильную версию
Существуют определенные принципы, и для их реализации потребуются
навыки программирования и верстки. В моб. версии нужно сохранить общую
концепцию с десктопной версией, но при этом, разработать отдельные
дизайнерские решения, а также максимально удобный для юзабилити интерфейс.
Элементы ресурса на экране посетителей должны быть соответствующе
разнесены, и отображаться достаточно крупно для удобного нажатия пальцем.
После чего, идет тестирование и финальный запуск.
Мобильная версия vs адаптивная верстка
Параллельно с отдельной мобильной версией сайта, существует и другая
интерпретированная вариация – адаптивный дизайн.
Попытаемся разобраться, чем отличается мобильная версия сайта от адаптивной.
Адаптивный сайт – это не отдельная версия ресурса, это и есть основной сайт, и
он автоматически подстраивается под разрешение устройства, с которого
происходит вход.
К преимуществам адаптивной верстки относится тот факт, что она имеет
один адрес с основным сайтом, поэтому перенаправление не требуется. А это
значительно усиливает позиции сайта при ранжировании поисковыми системами.
Во время открытия отображается абсолютно тот же контент сайта и его
26
функционал, но вид его подстраивается под размеры окна. Кроме того, есть
возможность оптимизации ресурса.
Но разработка адаптивной версии является более трудоемким процессом,
соответственно затратная часть мероприятия также будет больше.
Адаптивный дизайн является актуальным для ресурсов, у которых нет большого
оборота посетителей – интернет-магазины, блоги, визитки, а также сайты, их
основная задача заключается в доставке контента.
Плюсы и минусы мобильной версии
Мобильная версия имеет более высокие скорость загрузки и удобство
навигации. Поскольку посетитель видит минимум отвлекающей информации, то
вероятность положительного действия с его стороны выше. Кроме того,
отдельная мобильная версия является полностью автономной от десктопной. Это
дает возможность работать с ними отдельно.
К минусам такой концепции можно отнести определенные трудности в
области SEO продвижения. Поскольку размещение одинакового контента
воспринимается как дубль, — это требует отдельных мероприятий по устранению
негативного влияния на процесс раскрутки сайта. С учетом того, что мобильная
версия не является универсальной, то она требует отдельной статьи расходов
помимо содержания основного сайта.
Такой вариант сайта подходит для больших проектов, которые уже имеют
высокую посещаемость основного сайта, но хотят повысить лояльность к
мобильным устройствам без редизайна. В большинстве случаев, отдельная
мобильная версия актуальна для ресурсов, где важна скорость загрузки –
социальные сети, почтовые сервисы, новостные порталы.
Подводя итоги, можно сказать только то, что сегодня обоснованной
необходимостью для любого интернет-проекта является возможность
корректного отображения сайта на мобильных устройствах. Как это реализовать
—
зависит от целей и задач сайта, бюджета и возможностей.
2.2 Разработка функционала сайта
Первым делом, перед созданием серверной части сайта, необходимо
понимать, какую роль должна играть база данных, это основополагающий
27
элемент в каждом большом проекте. Таким образом, после проектирования базы
данных, были созданы следующие таблицы :
1. Категории
2. Электронные сообщения (дизайн)
3. Промокоды
4. Проверка промокодов
5. Отзывы
6. Сайты
7. Тарифы
8. Транзакции
9. Ссылки
10. Пользователи
Рис. 6 База данных сайта
После того, как была продумана и спроектирована база данных, я принялся
писать фронтед часть, для того, чтобы понимать какой функционал будет у сайта,
необходимо построить схему самого проекта, таким образом я смогу понять какие
28
разделы необходимо разрабатывать первым, чтобы прийти к завершающему
результату.
Рис. 7 Схема функционала сайта
После того, как я создал схему сайта, я должен создать примерную иерархию
файлов части сайта :
/app/ - папка в которой будут расположены все необходимые системные
файлы сайта, это класс подключения к базе данных, необходимые функции,
шаблоны сайта и многое другое.
/media/ - папка где будут расположены все файлы сайта, это
изображения, стили, js скрипты, библиотеки и так далее.
/uploads/ - это папка, куда будут загружаться логотипы компаний.
Index.php – расположен в корне сайта, открывается самым первым при
доступе к главной странице сайта.
Robots.txt – это по большей мере SEO-файл, отвечающий за индексацию
проекта и указании xml карты сайта.
/app/init.php – это файл, который будет подключен в Index.php, он
является основным файлом, куда будут подключаться все необходимые файлы,
это класс базы данных, класс проверки авторизации пользователя, необходимые
функции, и так далее.
29
/app/config.php – это конфигурационный файл сайта, там содержится все
настройки сайта.
/app/mail.php – это класс почтовой службы, через него будут
отправляться письма на почту пользователям, а так же системные сообщения.
/app/mysql.php – это класс подключения к базе данных и работы с ней.
/app/dbconfig.php – это файл где вводятся настройки базы данных, там
хранятся данные для подключения к базе данных.
/app/helper.php – это файл необходимых функций, которые будут
задействованы при разработке сайта.
/app/router.php – это файл, который будет служить для определения URL
адресов сайта, а так же их обработка.
/app/view/ - это папка шаблона сайта, здесь будут указаны файлы
шаблонов, которые будут подключаться в файлах и показываться пользователям
динамически. Данный раздел поделен на две части, это /admin/ - здесь находятся
файлы админ панели, /user/ - здесь находятся файлы пользователей.
/app/inc/ - это папка где находятся файлы модулей сайта, это
авторизация, регистрация и так далее, все файлы функционала сайта, а так же их
обработка.
После того, как была выстроена иерархия сайта, и файловая структура мы
двигаемся дальше и начинаем писать основной код сайта.
Структура серверной части
Данная структура минимизирует усилия по совмещению серверной и
клиентской частей за счет наличия между ними всего лишь одного канала связи.
Это связь между блоками «Клиент» и «Координатор». Координатор иначе можно
назвать интерфейсом для взаимодействия с клиентом. В качестве протокола
общения между клиентом и сервером был выбран режим «запрос-ответ». Это
означает, что клиент посылает серверу сообщение, в котором содержится
информация о том, какое действие хочет совершить клиент.
Сервер анализирует это сообщение и выполняет предписанные действия,
если они возможны. После завершения этих действий, сервер возвращает
результат работы. Все возможные варианты действий должны быть известны
30
клиенту заранее. Так как серверная часть будет иметь дело, как с файловой
системой, так и с базой данных, следует ввести некоторые абстракции, чтобы
уменьшить сложность разработки и повысить масштабируемость системы.
Поэтому был добавлен блок «Менеджер хранилища». Общение с ним происходит
в рамках таких понятий как «страница», «шаблон», «ресурс». Это всё термины
системы создания и управления сайтами. Введение такой прослойки позволяет
значительно уменьшить сложность Координатора.
Менеджер хранилища используется внутри Координатора, т.е . его логика
доступна только разработчику серверной части. Если в Координаторе имеется
некоторая команда «сохранить страницу», то благодаря Менеджеру Хранилища
отпадает необходимость описывать всю логику внутри координатора, достаточно
просто вызвать подходящий метод Менеджера Хранилища. Менеджер хранилища
в зависимости от ситуации общается с Менеджером базы данных и Генератором
сайта.
При инициализации Менеджера Хранилища происходит автоматическая
инициализация Менеджера базы данных в соответствии с настройками системы.
Менеджер базы данных позволяет абстрагироваться от языка запросов SQL, что
повышает скорость разработки и качество отладки. Более того, введение данной
прослойки позволяет выполнить требование адаптации системы под различные
СУБД.
Генератор сайта имеет дело с файловой системой. Его задача - создавать
цельные страницы сайта из поданных на вход данных. То есть он совмещает
шаблоны и содержимое, создавая на диске готовую html-страницу. Генератор
берет на себя функции прямого общения с файловой системой, упрощая логику
Менеджера хранилища. На уровне реализации были использованы объектно-
ориентированные возможности языка PHP для упрощения разработки и
понимания системы.
Диаграмма классов в данном случае излишня, так как классы использованы
только в качестве пространства имен. Менеджер хранилища содержит множество
методов для «смыслового» общения с системой. Например, метод
MccGetTemplates ($project_uid) достает из базы данных список шаблонов,
31
соответствующих проекту $project_uid. Такой подход позволяет понизить
сложность разработки системы в целом. По большому счету, менеджер
хранилища содержит соответствующий метод для каждого действия
координатора. Все доступные методы Менеджера Хранилища представлены в
таблице 1.
Таблица 1. - Методы Менеджера Хранилища
Метод
Описание
AddProject ($project_uid)
Добавляет
новый
проект
AddResource ($uid, $isglobal, $path, $type,
$project_uid, $usedin_uid = NULL, $usedin_type =
NULL)
Добавляет
новый ресурс
AddTemplate
($template_uid,
$draft_uid,
$creation_time, $modification_time, $object_data,
$project_uid)
Добавляет
новый
шаблон
AddPage ($page_uid, $draft_uid, $template_uid,
$creation_time,
$modification_time,
$page_url,
$object_data,
$published,
$generated_modification_time, $generated_draft_uid,
$project_uid)
Добавляет
новую
страницу
AddDraft ($project_uid, $page_uid, $draft_uid,
$template_uid, $creation_time, $modification_time,
$object_data, $published)
Добавляет
новый
черновик для
страницы
SaveTemplate ($project_uid, $template_uid, $draft_uid,
$modification_time = FALSE, $object_data = FALSE,
$new_uid = FALSE)
Изменяет
шаблон
SavePageDraft ($project_uid, $page_uid, $draft_uid,
$template_uid = FALSE, $modification_time = FALSE,
$page_url = FALSE, $object_data = FALSE, $published
Изменяет
черновик
страницы
32
= FALSE, $new_draftuid = FALSE, $new_pageuid =
FALSE)
RemoveResource ($project_uid, $uid, $fromdisk =
FALSE)
Удаляет
ресурс
RemovePage ($project_uid, $uid, $fromdisk = FALSE)
Удаляет
страницу
RemoveTemplate ($project_uid, $uid)
Удаляет
шаблон
RemoveDraft ($project_uid, $page_uid, $draft_uid,
$fromdisk = FALSE)
Удаляет
черновик
страницы
GetTemplate ($project_uid, $template_uid, $draft_uid)
Возвращает
шаблон
GetPageDraft ($project_uid, $page_uid, $draft_uid)
Возвращает
черновик
страницы
MccGetPages ($project_uid)
Возвращает
список всех
страниц
проекта
MccGetTemplates ($project_uid)
Возвращает
список всех
шаблонов
проекта
MccGetStatus ($project_uid)
Возвращает
общую
информацию
о проекте
GetResources ($project_uid, $usedin_type = FALSE,
$usedin_uid = FALSE)
Возвращает
список
ресурсов
33
Посмотрим, как введение Менеджера Хранилища упрощает логику системы
в целом. Возьмем команду Координатора для удаления шаблона.
// Remove template
case «template_remove»:
{(! isset ($_POST['project_uid'])) $project_uid = «default»;$project_uid =
$_POST ['project_uid'];
$template_uid = $_POST ['template_uid'];$stm->RemoveTemplate
($project_uid, $template_uid);
};
В данном представлении использован Менеджер Хранилища. Теперь
попробуем вставить логику Менеджера прямо в Координатор.
// Remove template«template_remove»:
{(! isset ($_POST['project_uid'])) $project_uid = «default»;$project_uid =
$_POST ['project_uid'];
$template_uid = $_POST ['template_uid'];
// Checking if input is correct(! valcheck:isuid ($project_uid) ||!
valcheck:isuid($uid))
{«Bad input»;
}
$this->dbm->SelectDatabase ($this->db_name);
$project_id = $this->getIdByUid ($this->db_tables_projects,
'project_uid',
$project_uid);
// Removing template
$table_name = $this->db_tables_templates;
$condition = array ('template_uid'=>$uid,
'project_id'=>$project_id);
$this->dbm->RemoveData ($table_name, $condition); «OK»;
};
Вместо абстракции мы получаем дополнительный код, который придется
отлаживать внутри Координатора помимо отладки логики самого Координатора.
Данную проблему может решить внедрение простой функции или процедуры, но
34
тогда мы теряем преимущества логического разделения системы на блоки. А
именно - уменьшение числа сущностей для работы и гарантия работоспособности
каждого логического блока в отдельности в случае его успешной отладки.
Менеджер базы данных на уровне кода состоит из интерфейса IDbm,
который реализуется соответсвующим определенной СУБД классом. В данной
версии системы это MysqlDbm, который реализует СУБД MySQL. Интерфейс
позволяет в будущем нарастить число поддерживаемых СУБД путем реализации
его вторично. При этом уже существующая логика системы не будет нарушена,
так как интерфейс гарантирует наличие сходного функционала в производных от
него классах.
Рассмотрим этот момент более детально. Ниже представлен данный
интерфейс.
interface IDbm
{__construct ($host, $user, $password);__destruct();
// Removes dbRemoveDatabase ($db_name);
// Creates new dbCreateDatabase ($db_name);
// Makes db activeSelectDatabase ($db_name);
// Executes multiple queries from.sql fileExecQueryFromFile ($file_name);
// Adds row of data, $values is an arrayAddData ($table_name, $values);
// Executes sql queryExecQuery($query);
// Upadate dataUpdateData ($table_name, $new_data, $condition = NULL);
// Get one row of data with equality conditionGetData ($what, $from, $condition
= NULL);
// Removes data with equality conditionRemoveData ($from, $condition =
NULL);
// Get all rows of data with equality conditionGetAllData ($what, $from,
$condition = NULL);
// Gets number of rows by equality conditionGetCount ($from, $condition =
NULL);
}
35
Для реализации поддержки системой создания и управления сайтами СУБД
MySQL, необходимо реализовать данный интерфейс. Т.е. создать производный от
данного интерфейса класс, в котором существуют все перечислен ные методы.
Если эти методы будут реализованы правильно, то система обретет поддержку
новой БД. Для примера возьмем метод Менеджера Хранилища для удаления
шаблона.
// Removes template
function RemoveTemplate ($project_uid, $uid)
{
// Checking if input is correct(! valcheck:isuid ($project_uid) ||!
valcheck:isuid($uid))
{«Bad input»;
}
$this->dbm->SelectDatabase ($this->db_name);
$project_id = $this->getIdByUid ($this->db_tables_projects,
'project_uid',
$project_uid);
// Removing template
$table_name = $this->db_tables_templates;
$condition = array ('template_uid'=>$uid,
'project_id'=>$project_id);
$this->dbm->RemoveData ($table_name, $condition);
return «OK»;
}
Как видно, он использует метод Менеджера базы данных RemoveData. При
этом нет никакой привязки к конкретному типу БД, потому что поддержка всех
баз данных реализована через общий интерфейс. Поэтому при добавлении новой
БД изменять логику Менеджера Хранилища не требуется, что в разы сокращает
время разработки и отладки.
Описание методов интерфейса представлено в таблице 2.
36
Таблица 2. - Методы интерфейса IDbm
Метод
Описание
__c onstruct
($host,
$user,
$password)
Подключение к базе данных
__destruct()
Отключение от базы данных
RemoveDatabase ($db_name)
Удаление базы данных
CreateDatabase ($db_name)
Создание базы данных
SelectDatabase ($db_name)
Выбор рабочей базы данных
ExecQueryFromFile ($file_name)
Выполнение sql-сценария из
файла
AddData ($table_name, $values)
Добавление строки данных в
таблицу
ExecQuery($query)
Выполнение sql-запроса
UpdateData
($table_name,
$new_data, $condition = NULL)
Обновление
существующих
данных
GetData ($what, $from, $condition =
NULL)
Возвращение строки данных
RemoveData ($from, $condition =
NULL)
Удаление данных
GetAllData
($what,
$from,
$condition = NULL)
Возвращение
всех
строк
данных
GetCount ($from, $condition =
NULL)
Возвращение
числа
строк
данных
Генератор сайта также позволяет упростить логику систему. Именно он
реализует функцию полного кеширования страниц сайта в файловую систему. В
таблице 3 представлены методы Генератора.
37
Таблица 3. - Методы Генератора сайта
Метод
Описание
GeneratePage
($url_name,
$page_data,
$template_data,
$old_url_name = FALSE)
Компанует
страницу
из
содержимого и шаблона и
записывает готовую страницу в
файловую систему
RemovePage ($url_name)
Удаляет страницу
RemoveResourceFile($path)
Удаляет файл ресурса
Менеджеру Хранилища не требуется самому обращаться к файловой
системе. Достаточно вызвать соответсвующий метод Генератора. Также вся
логика совмещения содержимого страниц и соответсвующих шаблонов
переносится на Генератор сайта. Генератор сам определяет, требуется ли
создавать структуру файловой системы или она уже присутствует. Также он сам
обрабатывает специальный формат содержимого и сопоставляет части
содержимого и предназначенные для него места в шаблоне. При этом затраты на
отладку данных действий в Менеджере Хранилища сходят до нуля и переносятся
в Генератор, а в силу многократного использования методов Генератора, отладка
всей системы заметно упрощается.
Рассмотрим на примере связь всех этих модулей между собой. Допустим,
клиент хочет сохранить черновик страницы. Он обращается к Координатору с
командой «page_savedraft». Координатор обрабатывает запрос и вызывает метод
Менеджера Хранилища «SavePageDraft». Менеджер Хранилища обрабатывает
данные и выбирает базу данных с помощью метода «SelectDatabase» Менеджера
базы данных. Далее Менеджер Хранилища обновляет данные с помощью метода
«UpdateData» Менеджера базы данных. Далее происходит публикация страницы.
Для этого с помощью метода «GetData» Менеджер Хранилища производит
выборку шаблона и страницы, и вызывает метод Генератора сайта
«GeneratePage», который обновляет страницу в файловой системе. В конце
Координатор возвращает статус «ОК», сигнализирующий об успешном
выполнении команды.
38
3. ОХРАНА ТРУДА
3.1 Требования техники безопасности при работе за персональным
компьютером
Трудовой кодекс обязывает работодателей обеспечить безопасные условия и
охрану труда работников на каждом рабочем месте (ст. 212 ТК РФ). Посмотрим,
каковы требования техники безопасности при работе за компьютером и в целом
правила работы за компьютером.
Важно, что к работе на персональном компьютере допускаются лишь те
работники, которые прошли обучение безопасным методам труда, вводный
инструктаж и первичный инструктаж на рабочем месте (п. 1.1 Типовой
инструкции по охране труда при работе на персональном компьютере ТОИ Р-45-
084-01). Объясняется это тем, что при эксплуатации компьютера на человека
воздействует электромагнитное излучение, статистическое электричество, он
работает в среде с пониженной ионизацией воздуха, долго находится в одном
физическом положении. Кроме того, происходит перенапряжение зрительных
анализаторов человека (п. 1.2 ТОИ Р-45-084-01).
Техника безопасности за компьютером вводит определенные требования к
организации рабочих мест с компьютерами (пп. 1.4 -1.6 ТОИ Р-45 -084-01).
Рабочие места с компьютерами должны размещаться так, чтобы между боковыми
поверхностями мониторов было не менее 1,2 м, а расстояние между экраном и
тылом двух мониторов было не менее 2,0 м. Монитор надо размещать так, чтобы
естественный свет падал сбоку, преимущественно слева. Оконные проемы в
помещениях с компьютерами должны быть оборудованы жалюзи, занавесками и
прочими средствами защиты от яркого естественного света.
Инструкция устанавливается требования безопасности перед началом
работы (разд. 2 ТОИ Р-45 -084-01), а также непосредственно правила работы за
компьютером (разд. 3 ТОИ Р-45-084-01). В частности, работникам запрещено при
включенном компьютере прикасаться к задней панели системного блока или
переключать разъемы интерфейсных кабелей периферийных устройств.
С целью охраны здоровья работников запрещено непрерывно работать с
компьютером более 2-х часов (п. 3.2 ТОИ Р-45 -084-01). В принципе работникам,
39
работающим за компьютером, положены регламентированные перерывы в
течение рабочего дня, которые входят в рабочее время.
3.2. Обеспечение пожарной безопасности
Каждый сотрудник (работник) независимо от занимаемой должности обязан
знать и строго выполнять правила пожарной безопасности, не допускать
действий, которые могут привести к пожару. Основные причины пожаров на
предприятиях - неосторожное обращение с огнем, оставленные без присмотра
электроприборы, проведение с нарушениями требований правил пожарной
безопасности огневых, строительных и других пожароопасных работ, курение в
не установленных местах, использование легко воспламеняемых веществ,
нарушение технологий и т. п.
Содержание зданий, помещений
Помещения должны содержаться в чистоте. Горючие отходы, мусор
необходимо ежедневно удалять в контейнеры на специально выделенные
площадки. Коридоры, лестничные клетки, двери эвакуационных выходов,
подходы к средствам тушения всегда должны быть свободны и ничем не
загромождены.
Мебель в помещениях не должна препятствовать быстрой эвакуации людей.
Расположение электрических кабелей и различных проводов должно исключать
их повреждение, поражение работников электрическим током, а также они не
должны мешать передвижению по помещению.
Запрещается:
1. хранить и применять горючие жидкости, взрывчатые вещества, баллоны
с газами и др.;
2. использовать электронагревательные приборы;
3. эксплуатировать провода электроприборов с поврежденной изоляцией;
4. пользоваться поврежденными розетками, рубильниками, вилками и
прочим электрооборудованием;
5. обертывать (накрывать) светильники, бытовые приборы бумагой,
тканью и другими горючими материалами;
6. применять открытый огонь;
40
7. курить в помещении;
8. оставлять без наблюдения включенную в сеть радиоэлектронную
аппаратуру, ПЭВМ, оргтехнику, бытовую технику;
9. пользоваться неисправной или незаземленной аппаратурой;
10. нарушать правила эксплуатации ПЭВМ и оргтехники, а также
инструкции по работе на ПЭВМ и средствах оргтехники, действующие в
институте;
11. включать в сетевые фильтры, блоки бесперебойного питания и
специализированные розетки, расположенные в коробах бытовую технику и
другое, не относящееся к ПЭВМ оборудование.
По окончании работы необходимо обесточить все электроприборы и
осмотреть помещения на наличие признаков возгорания. При наличии в
помещении выделенной сети электропитания для ПЭВМ, необходимо выключить
автомат питания в распределительном щите.
41
4. ЭКСПЕРИМЕНТАЛЬНЫЙ РАЗДЕЛ
4.1 Тестирование работоспособности сайта
Для того, чтобы проверить работоспособность сайта, нам предстоит
проверить функционал, который мы разработали, а именно:
Доступность сайта, при вводе имени домена в адресную строку браузера
Авторизацию
Регистрацию
Личный кабинет
При переходе по ссылке https://sarafan.click/ данный сайт успешно
открывается и показывается главная страница сайта.
При регистрации на сайте, в роле рекомендателя, нам необходимо ввести
email, пароль и повтор пароля. Email адрес необходимо вводить реальный, потому
что на него будет отправлено сообщение, после прохождения регистрации, мне
на почту пришло письмо от сайта, и необходимости активировать свой аккаунт.
Рис. 8 Активация аккаунта
Получается, регистрация на сайте работает и все отлично, переходим по
ссылке и получаем сообщение о том, что аккаунт активирован, теперь Вы можете
авторизоваться.
Тестируем авторизацию на сайте, нам необходимо ввести email и пароль, уже
созданного выше нами аккаунта.
42
Рис. 9 Личный кабинет
Получается мы успешно прошли авторизацию, потому что нас
переадресовало в личный кабинет.
Теперь чтобы протестировать личный кабинет, нам необходимо пройтись по
разделам и посмотреть доступны ли они, перейдя по всем пунктам меню, я
получал различные названия и данные в каждом соответствующем разделе,
сделав вывод личный кабинет работает отлично.
4.2 Анализ результатов тестирования
После прохождения выше упомянутых этапов, я выяснил что все разделы
работоспособны, и отлично функционируют должным образом. Стоит отметить,
что все сообщения на электронный адрес приходят без задержек, все ссылки на
сайте работают. Авторизация на сайте работает отлично, послед ввода данных нас
переадресовало на страницу личного кабинета, где можно походить по разделам
и посмотреть работоспособность личного кабинета, что было и сделано.
Регистрация работает тоже превосходно, без каких либо ошибок, тем самым все
сообщения приходят на почту, и подтверждение адреса электронной почты тоже
работает.
Так же были проверены CSS файлы на ошибки:
Существует несколько уровней валидации кода, если это можно так назвать.
Для старых сайтов это CSS Level 2.1 и для современных сайтов это стандарт CSS
Level 3. Прогресс не стоит на месте и скоро появятся новые стандарты верстки,
43
но мы пока будем опираться на последний, что есть на данный момент. Для
проверки сайта на валидность, надо воспользоваться сервисом проверки
валидации. На данном сайте есть три варианта проверки. Можно указать ссылку
сайта, загрузить файл css или вставить код непосредственно в форму.
Рис. 10 Главная страница сайта проверки на ошибки
Для начала я сделал проверку всего сайта и увидел следующий результат:
Рис. 11 Валидатор ошибок
По итогу я получил уведомление о 15 ошибках на сайте. Но стоит ли их
исправлять, давайте поговорим далее об этом. Давайте теперь поговорим, нужно
ли их исправлять. Как всегда, на данный счет есть два мнения. Одна часть веб -
мастеров говорит, что верификация устарела и не поддерживает современные
технологии. Каждый из браузеров поддерживает свою технологию отображения
элементов, поэтому приходится всегда подстраивать стили под каждый из них.
44
От части я согласен с этими мнениями. Вторая часть веб-мастеров твердит,
что нужно строго придерживаться правил, потому что поисковые системы будут
к такому сайту относиться более лояльно, чем к сайту с ошибками. Если в одном
браузере отображается не так как в другом, то это уже проблема браузеров. С этим
мнением, я тоже соглашусь. Теперь давайте объединим эти два мнения и сделаем
один итог.
Сайт нужно проверять хотя бы для того чтобы исправить явные ошибки,
которые могут быть не видны на первый взгляд. Сильно пыхтеть чтобы получить
100% валидацию и при этом чтоб пострадал внешний вид сайта, думаю не
следует. Поэтому мы будем придерживаться золотой середины.
Теперь к делу: каждый сайт содержит кучу css файлов, для начала делаем
тест всего сайта, записываем в каких файлах нашлись ошибки. После чего делаем
отдельный тест для каждого из выписанных файлов, загружая их на сайт. Если
заметили, то над проверкой сайта пишется строка с количеством ошибок,
предупреждений и есть проверенный CSS. Вот именно проверенный CSS нам и
нужен. В нем содержится уже чистый исправленный код. Копируем его и
вставляем в Ваш файл.
Вставили, сохранили, смотрим как работает сайт, что в нем поменялос ь
внешне может какие-то исчезли тени, объемные места или округления.
Желательно это все проверять и просматривать в разных браузерах. Если что -то
пошло не так, то валидный код после теста, можно вставлять частями и проверять
работу сайта. Тем самым найдете, то слабое место и его тогда не меняйте.
Тут важно понимать, что ошибки будут как и у файлов темы, так и у файлов
от плагинов. Мы можем исправить все, но как только произойдет обновление
плагина, то все наши труды будут напрасны. Хочу заметить в моем случае из
плагинов был задет только WP-Recall, остальные прошли без ошибок. Мы создали
дополнительно еще один стилевой файл, чтобы не изменять основной в случае
обновления темы.
После теста на валидность, я решил отказаться от обновлений данного
шаблона и изменить его уже на свое усмотрение и исправить все ошибки
валидности в нем. Чтобы больше не получать обновлений от данного шаблона
45
нужно: в папке вашей темы найти файл style.css и заменить там имя темы на
другое.
Данные из созданного дополнительного стилевого файла, можно перенести
в основой. Работа это очень долгая и муторная. Я целый день потратил, чтобы все
шаблоны и сайт привести к валидному CSS и при этом не потерять всех красот
оформления. На момент написания статьи, сайт полностью соответствовал
стандартам CSS.
Как проверить HTML код на ошибки?
После разработки дизайна программисты верстают страницы сайта —
приводят их к единой структуре в формате HTML. Задача верстальщика —
сделать так, чтобы страницы отображались корректно у всех пользователей на
любых устройствах и браузерах. Такая верстка называется кроссплатформенной
и кроссбраузерной — это обязательное требование при разработке любых сайтов.
Для этого есть специальные стандарты: если им следовать, страницу будут
корректно распознавать все браузеры и гаджеты. Такой стандарт разработал
Консорциумом всемирной паутины — W3C (The World Wide Web Consortium).
HTML-код, который ему соответствует, называют валидным.
Валидность также касается файлов стилей — CSS. Если в CSS есть ошибки,
визуальное отображение элементов может нарушиться.
Разработчикам рекомендуется следовать критериям этих стандартов при
верстке — это поможет избежать ошибок в коде, которые могут навредить сайту.
Типичные ошибки кода — незакрытые или дублированные элементы,
неправильные атрибуты или их отсутствие, отсутствие кодировки UTF-8 или
указания типа документа.
Не нужно вычитывать код и считать символы — для этого есть сервисы и
инструменты проверки валидности HTML онлайн.
Обычно сервисы делят результаты на ошибки и предупреждения. Ошибки —
опечатки в коде, пропущенные или лишние символы, которые скорее всего
создадут проблемы. Предупреждения — бессмысленная разметка, лишние
символы, какие-то другие ошибки, которые скорее всего не навредят сайту, но
идут вразрез с принятым стандартом.
46
Валидаторы не всегда правы — некоторые ошибки не мешают браузерам
воспринимать код корректно, зато, к примеру, минификация сокращает длину
кода, удаляя лишние пробелы, которые не влияют на его отображение.
Англоязычный сервис, онлайн проверяет соответствие HTML стандартам:
можно проверить код по URL, залить файл или вставить код в окошко.
Инструмент покажет список ошибок и предупреждений с пояснениями —
описанием ошибки и ее типом, а также укажет номер строки, в которой нужно
что-то исправить. Цветом отмечены типы предупреждений и строчки с кодом.
После ввода сайта, я получил следующие ошибки:
Рис. 12 Уведомления об ошибках и предупреждениях
После просмотра ошибок, были исправлены все ошибки, а так же некоторые
рекомендации, которые дал сервис.
Таким образом, был получен опыт по выявления ошибок на сайте, и их
исправление.
47
ЗАКЛЮЧЕНИЕ
В ходе выполнения выпускной квалификационной работы был получен
полнофункциональный web-сайт, полностью готовый к применению. Данный
сайт ориентирован на компании и в целом бизнес сферы. С его помощью
пользователи смогут привлекать клиентов, продавать товары и услуги. При
размещении его в глобальной сети география распространения возрастает до
масштабов всего мира.
При разработке web-сайта были проанализированы современные web-
технологии, позволяющие создавать интерактивные web-страницы. Наиболее
подходящими для выполнения поставленной задачи оказались SublimeText и
OpenServer.
Разработанный сайт удовлетворяет всем требованиям, поставленным на
этапе постановки задачи. При разработке web-сайта были созданы все функции,
которые заявлены в ходе создания схемы сайта. Структура сайта и база данных
была проработана под высокие нагрузки и все было оптимизировано.
В качестве дальнейшего совершенствования web-сайта, можно улучшить
функционал, расширить спектр предоставляющих возможностей. Так же
возможна доработка интерфейса сайта с целью дальнейшего повышения его
информативности, привлекательности и удобства.
48
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ
1. Браун, И. Веб-разработка с применением Node и Express / Итан Браун –
Питер, 2017 г. – 336 с. – ISBN 978-5 -496-02156-2
2. Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Джон Дакетт-
Эксмо,2016г. – 480с. - ISBN 978-5 -699 -64193-2
3. Джереми, К. HTML5 для веб-дизайнеров/ Джереми Кит - Манн, Иванов
и Фербер,2016г. - 112с. – ISBN978-5-91657-596-5
4. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-
сайтов. Исчерпывающее руководство / В. Дронов – Эксмо, 2013. – 512с. - ISBN
978-6-644-64193-1
5. Дунаев, В. (Х)HTML, скрипты и стили. Самое необходимое/ В. Дунаев -
БХВ-Петербург,2017г. -496 с. - ISBN 978-5-9775-0322-8
6. Клименко, Р. Веб-мастеринг на 100%/ Р. Клименко-Питер,2017г.
–
560с. - ISBN978-5-496-01564-6
7. Макфарланд, Д. Новая большая книга CSS / Дэвид Макфарланд –
Питер,2018 г. – 720 с. – ISBN 978-5-496-02080-0
8. Мэтью, М. HTML5. Недостающее руководство / М. Мэтью –Питер,
2018г. – 118с. - ISBN 978-0-596-51044-6
9. Никсон, Р. Создаем динамические веб-сайты с помощью PHP, MySQL,
JavaScript, CSS и HTML5 / Робин Никсон - O 'Reilly, 2017 г. - 688с. – ISBN 978-5 -
496-01441-0
10. Пилигрим, М. Погружение в HTML5/ М. Плигрим - БХВ-
Петербург,2018г. – 304с. - ISBN 978-5-9775-0688 -5
11. Сухов, К. HTML 5. Путеводитель по технологиям/К. Сухов-ДМК-
Пресс,2013г. -352с- ISBN 978-5-94074-910-3
12. Уэйншенк, С. 100 главных принципов дизаи
̆
на / Сьюзан Уэйншенк –
Питер, 2017 г. – 272 с. – ISBN 978-5 -459-01077-0
13. Фримен, Э. Изучаем программирование на JavaScript / Эрик Фримен,
Элизабет Робсон Питер, 2018 г. – 640 с. – ISBN 978-5 -496-01257-7
14. Фримен, Э. Изучаем HTML, XHTML и CSS/ Эрик Фримен-
Питер,2016г. -720с. - ISBN 978-5-496-00653-8
49
Интернет-источники:
15. Хабрахабр [электронный ресурс] : [официальный сайт]. –Режим доступа
: http://habrahabr.ru
16. Шклар, Л. Архитектура веб-приложений: принципы, протоколы и
практика: 2-е издание / Леон Шклар, Рич Розен. - Питер, 2013г. – 428с. ISBN 978-
0-470-51860-1
17. Cssmanual [электронный ресурс] : [официальный сайт]. –Режим доступа
: http://css.manual.ru
18. CyberForum [электронный ресурс] : [официальный сайт].
–Режим
доступа : http://cyberforum.ru
19. Htmlbook [электронный ресурс] : [официальный сайт]. – Режим доступа
: http://htmlbook.ru
20. Тостер [электронный ресурс] : [официальный сайт]. –Режим доступа :
http://toster.ru
50
ПРИЛОЖЕНИЯ
Листинг кода:
<?php
if(!defined('HACK_EMPTY ')) { die(); }
$mobile_desktop = true;
include APP_DIR . '/mobile.php';
$mobile_detect = new Mobile_Detect;
if( $mobile_detect->isMobile() ) { $mobile_smartphone = true; $mobile_desktop =
false; }
if( $mobile_detect->isTablet() ) { $mobile_smartphone = false; $mobile_desktop =
false; $mobile_tablet = true; }
require_once APP_DIR . '/lang.php';
require_once APP_DIR . '/config.php';
require_once APP_DIR . '/mail.php';
require_once APP_DIR . '/mysql.php';
require_once APP_DIR . '/dbconfig.php';
require_once APP_DIR . '/helper.php';
require_once APP_DIR . '/router.php';
?>