Файл: Проектирование и создание информационной системы для торговой организации.pdf

47 4. Загружается шаблон, соответствующий странице;
5. Согласно меткам, приложение располагает обработанные данные в шаблоне;
6. Загружается основной шаблон all.html, согласно его меткам, в него вставляются заголовок страницы и уже обработанный шаблон страницы;
7. Полученный шаблон отправляется веб-обозревателю пользователя.
Шаблон all.html является основой и большей частью веб-приложения, в нём подключаются скрипты JavaScript и таблицы CSS. Начинается страница с указания (веб-обозревателю) типа текущего документа DTD (document type definition, описание типа документа): - обозначает новейшую, 5 версию HTML.
В интернете долгое время использовались стандарты HTML 4.01,
XHTML 1.0 и XHTML 1.1. Веб-страницы на практике верстались с использованием смешанных особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например, веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.
После объявления типа документа идут основные элементы для
html-страниц (рис. 19):

html - элемент верхнего уровня в документе, для HTML;

head - предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Между открывающим и закрывающим тегами head указана кодировка, язык, подключаемые файлы (CSS, JavaScript и шрифты).

body - предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Т.е. между открывающим и

48 закрывающим тегами данного элемента находится всё то, что видит пользователь: «шапка» сайта, заголовки, контент страницы и «подвал» сайта.
Рис. 19. Пример структуры HTML-документа
В приложении используется кодировка UTF-8, она указана как в «head»
HTML, так и в начале основного PHP-файла. Кроме того, базы данных также хранят информацию в данной кодировке.
UTF-8 (от англ. Unicode Transformation Format, 8-bit — «формат преобразования Юникода, 8-битный») — одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы
Юникода, используя переменное количество байт (от 1 до 6).
Стандарт UTF-8 официально закреплён в документах RFC 3629 и
ISO/IEC 10646 Annex D. Кодировка нашла широкое применение в UNIX- подобных операционных системах и веб-пространстве [13]. Сам же формат
UTF-8 был изобретён 2 сентября 1992 года Кеном Томпсоном и Робом
Пайком и реализован в Plan 9[2]. В качестве BOM использует последовательность байт EF16, BB16, BF16 (что у неё самой является трёхбайтовой реализацией символа FEFF16).
Если HTML указывает где отображаются элементы веб-страницы, то
CSS-правила задают как именно. Сами правила также содержаться в основном шаблоне и прописаны в специальном HTML-теге

49
Перед тем, как описывать стили HTML-элементов в CSS был добавлен normalize.css — это набор стилей, который обеспечивает для HTML- элементов лучшую кроссбраузерность в стилях по умолчанию. Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас
Галахер, @necolas и Джонатан Нил, @jon_neal. Когда элемент имеет различные стили по умолчанию в разных браузерах, normalize.css там, где это возможно, стремится сделать эти стили совместимыми и соответствующими современными стандартам.
Цели normalize.css:

сохранять полезные настройки браузера, а не стирать их;

нормализовать стили для широкого круга HTML-элементов;

корректировать ошибки и основные несоответствия браузера;

совершенствовать юзабилити незаметными улучшениями;

объяснять код, используя комментарии и детальную документацию.
Normalize.css свободно распространяется под лицензией MIT.
С помощью CSS в приложении заданы свойства различных элементов дизайна, к примеру, размер, цвет, семейство, вариант написания шрифта (рис.
20.) как для всей страницы, так и отдельно для некоторых элементов, например, заголовков. Заданы общий фон страницы и фон контента, обрамление таблиц и отступы в их ячейках.
Рис. 20. Пример стилей CSS для HTML-элементов

50
Рис. 21. Диаграмма работы веб-приложения
Разработав back-end и front-end части веб-приложения информационной системы - получен необходимый для функционирования информационной системы функционал. Работая как клиент-серверное приложение, система избавляет конечного пользователя в необходимости установки дополнительного программного обеспечения, т.к. основные процессы (рис. 21.) веб-приложения происходят на стороне сервера.
2.3. Тестирование и обзор информационной системы
Особенности тестирования, ориентированного на клиент-серверное взаимодействие веб-приложения, предполагают наличие навыков находить дефекты как на стороне клиента (веб-браузер), так и на стороне сервера.
Важно учесть дефекты, возникающие при взаимодействии сервера и клиента, такие дефекты зачастую связаны с проблемами в бизнес-логике
(функциональные дефекты) информационной системе. Функциональное тестирование направлено на то, чтобы каждая функция веб-сайта работала в соответствии с требованиями спецификации.
Тестирование функциональности веб-сайта показывает «Что делает система».
Именно поэтому важно изначально проанализировать аспекты разрабатываемой информационной системы и провести проектирование, такой подход изначально позволит избежать данных ошибок.

51
Для нахождения ошибок в коде разработанного веб-приложения были использованы стандартные средства и методики. Для PHP-кода – это вывод ошибок при исполнении скрипта. Такое тестирование производилось в процессе написания кода и проверки его функционирования. При значимых, критических ошибках PHP-код не исполняется и выводит соответствующее сообщение, указав на проблемный участок кода (рис. 21.).
Рис. 21. Вывод PHP-ошибки в браузере
В PHP имеется широкий функционал по настройке вывода и обработки таких ошибок – их можно выводить в клиентский браузер, специальный текстовый файл, записывать в базу данных, никуда не выводить. PHP предоставляет функционал для создания собственных обработок ошибок, благодаря которым, их можно дополнить ошибками с собственной классификацией (к примеру при ошибках в бизнес-логике). Стандартно ошибки в PHP классифицируются так:

фатальные (неустранимые, при возникновении таких скрипт прекращает работу);

не фатальные (устранимые, скрипт не прекращает работу);

смешанные (фатальные, но только, если не обработаны функцией, определенной пользователем);

предупреждения (не являются ошибками, однако, указывают на недостатки в исполняемом коде).
Существует и реже используемый способ проверки PHP кода на наличие ошибок – это стороннее программное обеспечение, проверяющее загруженный в них код или онлайн сервисы, как правило они проверяет только синтаксис, не исполняя его. Примером может служить сервис на сайте
Piliapp.com (https://ru.piliapp.com/php-syntax-check/).

52
Тестирование ошибок на стороне клиента (в веб-браузере) во многом осуществлялось благодаря предоставленному в браузерах инструментарию для веб-разработчиков (рис. 22.).
Рис. 22. Инструменты веб-разработчиков в Mozilla Firefox
Инструменты для веб-разработчиков – это комплекс средств, представляющий из себя специальную панель и включающий такие средства как[25]:

Инспектор – даёт возможность редактировать DOM-модель в реальном времени (все изменения сразу отображаются на странице);

Консоль – незаменимый инструмент, показывающий ошибки в выполнении JavaScript, CSS, ошибки при загрузке файлов и т.д.;

Запросы (сеть) – показывает все http запросы, их заголовки, ответы, содержание. Отобразит соответствующую информацию, если к примеру, не удалось загрузить изображение с сервера;

Хранилище – показывает и позволяет редактировать данные содержащиеся в различных хранилищах клиента, таких как Cookie,
Indexed DB, сессионное хранилище, хранилище кэша.

Стили – похож на инспектора, но ориентирован на CSS;

Память – показывает на выполнение и загрузку чего тратиться соответствующий ресурс клиента;

53

Профайлер – мощный инструмент для глубокого анализа процессов происходящих при загрузке страницы, построении DOM, применении стилей и многого другого;

Адаптивный дизайн – помогает разрабатывать и проверять страницу на правильное отображение в экранах разного размера, что особенно актуально в нынешнее время, когда сайтами в равной степени пользуются как с мобильных устройств, так и с десктопных.
Также в зависимости от браузера и его версии присутствуют и другие инструменты, такие как линейка, скриншот страницы, пипетка, редактор
JavaScript и другие.
Написание выполняющегося кода не всегда является залогом его эффективного функционирования и получения одинакового результата в различных браузерах. Такая проблема совместимости во многом исключается при написании кода с соблюдением соответствующих стандартов и исключается полностью при тестировании дополнительными проверками.
Для этого W3C (Консорциум Всемирной паутины) создал автоматизированные тесты (рис. 23.) совместимости для CSS, HTML и
JavaScript. Данные тесты производятся как на отдельных участках кода, так и на готовых веб-приложениях доступных в глобальной сети. По результатам проверки выводятся рекомендации по исправлению. Такие проверки дополняют многие IT-гиганты (такие как Google и Яндекс) заинтересованные в росте качества интернет ресурсов [11]. Популярнейшим тестом у корпорации Google [1,11], является тест на скорость (рис. 24.) загрузки веб- страниц и наличие свойства адаптивности у веб-интерфейса для отображения на различных устройствах. Яндекс в 2017 году встроил комплекс таких и других проверок для пользователей сервиса «Яндекс Вебмастер» [24,29,36]
(рис. 25.).

54
Рис. 23. Ошибки в HTML показанные валидатором кода от W3C
Рис. 24. Google PageSpeed Insights – проверка на скорость загрузки сайта
Рис. 25. Диагностика ошибок в Яндекс.Вебмастере
Кроме стандартных и автоматизированных средств и методик нахождения дефектов, каждый веб-разработчик с появлением опыта начинает составлять свою стратегию и свои «чек листы» для проверки информационных систем и их составляющих. Такие проверки могут быть узконаправленными и составляться непосредственно для данной системы во

55 время проектирования или иметь список для проверки частых ошибок в любой информационной системе.
Чек-лист для тестирования веб-интерфейса пользователя:

Тестирование ссылок o
Исходящие ссылки o
Корректность внутренних ссылок o
Отсутствие ссылок, ведущих к одной странице o
Есть ли страницы, на которые не указаны ссылки o
Отсутствие неработающих ссылок

Тестирование форм для всех страниц o
Действительность входных данных o
Допустимые значения для поля данных o
Недопустимые входные значения для поля данных o
Параметры форм, в которых возможно удаление или любая другая модификация данных.

Тестирование cookies o
Проверьте сайт с отключенными cookies o
Проверьте сайт с включенными cookies o
Убедитесь, что файлы cookies зашифрованы перед записью на компьютер пользователя o
Проверьте аспекты безопасности при удалении файлов cookies. o
Если cookies имеют продолжительность действия, то следует проверить, активны ли они в указанный период времени.

Убедитесь, что сайт доступен для поисковых машин.
Во многом тестирование упрощает унифицированное написание кода и повторное использование компонентов. В среде веб-интерфейсов в этом способствует разработка веб-приложения по методологии БЭМ, а при написании PHP-кода стандарты PSR. Немаловажным является подготовка к созданию базы данных, которая предполагает её проектирование путём составления инфологической и даталогической моделей.

56
Обследуя область тестирования веб-приложения нельзя не упомянуть маркетинговые исследования. Такие исследования должны проводиться специалистами компетентными в сфере маркетинга, однако, по ранее описанным методологиям веб-разработки, каждый участник команды (или специалист единолично разрабатывающий ИС) должен иметь понимание и долю компетенции на каждой ступени разработки и проектирования информационной системы. Маркетинговые исследования в области разработки информационных систем являются формой бизнес-исследования, сфокусированного на понимании поведения, желаний и предпочтений потребителей конечного продукта, а также предпочтений, диктуемых рынком экономики. Такие исследования являются важной и неотъемлемой частью как проектирования, так и тестирования ИС в экономическом секторе.
Наиболее универсальным и распространённым методом в маркетинговых исследованиях является A/B тестирование. Цель данного тестирования – это улучшение целевого показателя. Достигается это путём сравнения контрольной группы с тестовыми группами, в которых один или несколько показателей были изменены. Такой метод часто используется в веб-приложениях для улучшения показателей дизайна, из типичных примеров можно выделить: влияние цветовой схемы, расположение и размеры элементов веб-интерфейса сайта с целью увеличить важный целевой показатель - конверсия. В таком примере A/B тестирование показывает разным пользователям разный вариант исполнения дизайна, а по накоплению необходимого числа показов, происходит сравнение числовых показателей достижения цели, из чего выбирается наиболее подходящий вариант дизайна.
Использование в комплексе вышеперечисленных методов и инструментов для тестирования ошибок в коде, логике и процессах взаимодействия информационных систем, основанных на веб-приложениях, позволило не только исключить возникновение ошибок, но и повысить рабочие характеристики и важные показатели на более качественный уровень.