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

Для разработки приложений, в настоящее время, все чаще используются веб-технологии. Именно они могут занять немаловажное место при разработке МИС. Это связано с тем, что веб-приложения быстро разрабатываются, не требовательны к ресурсам и кроссплатформенны. Такие приложения могут быть применимы для учета медицинских данных (числовых, текстовых, бинарных), их оперативной обработки и передачи.

Сегодня представлено множество инструментов, которые позволяют реализовать качественные веб-приложения за короткое время. К таким технологиям можно отнести программную платформу Node.js, фреймворки для ускорения разработки веб-приложений (Angular.js, ASP.NET, Spring, React.js, Backbone.js и т.д), документо-ориентированные СУБД (MongoDB, CouchDB).

Ввиду того, что современные сети передачи данных все еще не являются идеальными по отказоустойчивости и своей распространенности, существует необходимость в веб-приложениях, которые будут позволять работать с ними без доступа к локальной сети. Помимо работы без доступа к сети требуется хранить данные в локальной базе данных (БД), с последующей синхронизацией данных с БД на сервере.

БД в современных МИС

Основное предпочтение при разработке МИС и других приложений, связанных с централизованным хранением информации, отдается реляционным БД. К достоинствам реляционной модели можно отнести:

1. Простое представление информации для пользователя
2. Она основывается на развитом математическом аппарате
3. Позволяет создавать языки манипулирования данными не процедурного типа
4. Манипулирование данными на уровне выходной БД и возможностью изменения.

К недостаткам можно отнести медленный доступ к данным, а также высокую трудоемкость разработки.

Большая часть современных МИС работает по принципу “Клиент-сервер”. На основе практического опыта было доказано, что необходимость такого решения для создания информационной системы очень высока, так как настольные базы данных, в том числе с использованием файл-сервера, способны поддерживать не более 10 рабочих станций и небольшой объем данных. Помимо этого, большая часть существующих требований к МИС уже реализована в промышленных СУБД, построенных в архитектуре “клиент — сервер”, что позволяет существенно уменьшить время на разработку информационной системы.[1]

Для разработки большинства МИС были использованы СУБД MS SQL, Oracle, Lotus Notes/Domino, Postgress SQL и FireBird. Указанные СУБД обладают хорошими характеристиками для хранения данных, но они не могут обеспечить высокую производительность приложения из-за формы представления данных. Основной смысл реляционных БД – это хранение данных, и их получение по запросу за любой промежуток времени, это чаще используется для формирования отчетов. [2]

При использовании документо-ориентированных СУБД запросы к БД в большинстве случаев одинаковые. Они основываются на этом принципе, создавая индексы на нужные запросы при изменении данных асинхронно. Таким образом, после изменения данных сразу обновляются и индексы для нужных запросов. В SQL индексы тоже есть, но они на более низком уровне. Документо-ориентированныe СУБД строят индексы автоматически при первом запросе. Поэтому это очень похоже на схему lang <-> memcache <-> sql,  но существенно быстрее.
Второе преимущество – это более простая репликация. Третье преимущество – это map/reduce запросы для обработки данных. Выполняются на встроенном языке, например на JavaScript.
В итоге, приложение написанное с использованием документо-ориентированной БД будет быстрее чем аналог на SQL.

Применение документо-ориентированных БД при разработке МИС

В разработке современных приложений все чаще используются веб-технологии. Это связано с тем, что такие приложения являются кроссплатформенными и не зависят от какой-то определенной операционной системы. Помимо этого, такие приложения очень быстро разрабатываются и изменяются, а также легко интегрируются с другими приложениями посредством API. Веб-технологии очень хорошо подходят и для разработки МИС, так как обладают очень широким набором инструментов. Для хранения данных в веб-приложениях могут быть использованы как реляционные СУБД, так и документо-ориентированные. Так как реляционные СУБД не обладают качеством быстрой разработки и скоростью получения информации при запросе к ним, то стоит обратиться к документо-ориентированным СУБД. Самыми популярными документо-ориентированными СУБД являются MongoDB и CouchDB. В статье будет рассматриваться СУБД CouchDB.

CouchDB – это документо-ориентированная система управления базами данных с открытым исходным кодом, не требующая описания схемы данных, распространяется свободно, написана на языке Erlang. Впервые вышла в 2005 году, с 2008 года – проект фонда Apache. Реализована в рамках подхода NoSQL. Для хранения данных используется JSON, для реализации MapReduce-запросов – JavaScript. Одной из особенностей СУБД является поддержка репликации с несколькими ведущими узлами. CouchDB можно рассматривать как сервер веб-приложений; для реализации этой идеи в CouchDB встроен производительный веб-сервер, а программный код, как и данные, сохраняется в той же базе данных. Для автоматизации работы с приложениями используется утилита CouchApp.

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

Для управления конкурентным доступом используется механизм MVCC, благодаря чему возможно избежать необходимости блокировки файла базы данных во время записи. Разрешение конфликтов относится к сфере ответственности логики приложения, разрешение конфликта обычно включает в себя объединение данных в один документ, а затем старый документ удаляется.[3]

Для хранения данных на стороне клиента следует использовать БД PouchDB, которая совместима с CouchDB.

PouchDB – это NoSQL БД с открытым исходным кодом, написанная на JavaScript, которая была разработана по принципу CouchDB, но с возможностью простой работы в браузере. Она была создана для помощи веб разработчикам в создании приложений, которые могут работать без постоянного доступа к сети. PouchDB является базой данных, которая работает в бараузере, что позволяет приложению хранить данные локально, для того чтобы пользователь мог использовать приложение без доступа к сети. Кроме этого, данные могут синхронизироваться между клиентами. PouchDB также может быть запущен на Node.js и может быть использован в качестве прямого интерфейса к CouchDB. API PouchDB работают в различных средах одинаково, поэтому проблем с выбором бразуеров быть не должно. PouchDB поддерживает все современные браузеры, используя IndexedDB, а в случае если браузер его не поддерживает, то он заменяет метод хранения данных на WebSQL. Полностью протестированные браузеры, где это работает:

• Firefox 29+ (включая Firefox OS и Firefox для Android)
• Chrome 30+
• Safari 5+
• Internet Explorer 10+
• Opera 21+
• Android 4.0+
• iOS 7.1+
• Windows Phone 8+

PouchDB является независимой БД, которая может использоваться совместно с Angular, React, Ember, Backbone, или фреймворком собственной разработки.[4]

На основе этих БД была создана портальная МИС с открытым исходным кодом, под названием HospitalRun. Она предназначена для хранения данных о пациенте, лабораторных данных, изображений связанных с диагностикой пациентов и прочие данные. Данная МИС позволяет вести учет данных без доступа к сети, а после получения этого доступа, все данные могут быть синхронизированы с центральной БД. Основной минус этой МИС заключается в том, что это конечное веб-приложение, и для его изменения требуется большое количество времени.[5]

Наша основная идея, это разработка единого JavaScript фреймворка для фронт-энд разработки, на основе PouchDB, с возможностью последующей синхронизации данных из локальной БД в серверную БД CouchDB. Этот фреймворк должен обладать простым набором функций, которые должны определять все типы полей ввода на форме портала. Структура портала в свою очередь описывается разработчиком. На форме могут быть типы полей: input, radio button, check box, каждый тип данных будет описан в фреймворке. Синхронизация данных с CouchDB будет происходить по стандарту JSON. Итоговый вариант этого инструмента будет подключаться на html форме, разработчик описывает структуру страницы и поля для ввода данных, после чего пользователь будет иметь возможность ввести данные, и с появлением доступа к сети эти данные будут переданы на сервер, а если сетевой доступности сервера нет, то эти данные не будут потеряны.

Описанный инструмент будет очень удобен в разработке форм для сбора данных, этот подход в медицине называется «Case report form».

Заключение

В целом, применение документо-ориентированных БД при разработке веб-приложений – это уже не очень большая редкость, а вполне применимая и практичная технология. Представленные примеры наглядно показывают, что веб-технологии и документо-ориентированные БД могут быть применимы в МИС, а также имеют все характеристики для дальнейшего развития и массового распространения данных технологий в этой области. Конечно, эта технология еще требует более детальной проработки, что будет происходить непрерывно, так как рассмотренные технологии постоянно развиваются. В процессе развития, будут добавляться новые возможности и улучшаться их производительность. Разработка нового фреймворка, на основе перечисленных технологий, существенно облегчит работу разработчиков приложений.

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

Особое внимание заслуживает разработка правовых web-платформ. При создании UX-дизайна, обеспечивающего комфортное взаимодействие пользователя с сайтом или мобильным приложением, следует учесть все актуальные тенденции и использовать полный набор инструментов. В том числе и геймификацию юридических процессов (для обучения, моделирования последствий и ряда других функций).

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

В общем случае геймификацию можно определить как процесс использования игровых механик и игрового мышления для решения неигровых проблем или ситуаций с целью вовлечения людей в какой-либо процесс. Техники (индивидуальные и групповые), применяемые в геймификации, отличаются большим разнообразием, что позволяет на их основе построить оптимальную систему взаимодействия с аудиторией в зависимости от специфики преследуемых целей.

Процесс геймификации можно отразить с использованием методологии IDEF0. Функциональная модель, построенная средствами Microsoft Visio, отображена на рисунке ниже.

Рисунок 1. Процесс геймификации

Входящие стрелки (input) отображают вводные параметры, которые необходимы для начала работы: виртуальная валюта, участники и принципы игры. Каждый принцип преследует уникальную цель: формирование команд и сплочённость коллектива на основе внедрения совместной деятельности (командообразующий принцип), стимулирование конкурентной борьбы и выявление лучших из лучших (соревнование) или получение и развитие необходимых навыков (игра без победы или образовательная игра) [3]. Таким образом, положительный эффект воздействия игровых механик выражается в том числе и в увеличении уровня определенных компетенций.

Примером применения геймификации в образовании служит квест-игра по праву, проведённая студенческим обществом юридического факультета Финансового университета при поддержке компании “КонсультантПлюс”. Квест охватил шесть отраслей права, включая налоговое право, финансовое право, гражданское право, теория государства и права, конституционное право, предпринимательское право. Работа в команде способствовала развитию коммуникабельности и обмену знаниями в профессиональной сфере.

Геймификация в образовании позволяет создавать смешанную модель обучения, совмещающую преимуществ непосредственного традиционного обучения с онлайн-уроками за счёт использования цифровых технологий, таких как веб-инструменты и системы управления обучением (Learning Management Systems), включая мотивационные и захватывающие элементы игр. Результаты исследования показывают, что смешанная игровая среда обучения мотивировала учащихся и способствовала совершенствованию когнитивных и прочих навыков и развитию отношений [5].

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

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

Исходящие (output) выводят результаты деятельности. Результаты напрямую зависят от выбранного принципа игры, а также преследуемых целей. Сюда относится исход игры (формирование команды, выявление победителя, образование) и развитие необходимых компетенций.

К ключевым навыкам юриста, помимо освоения видов профессиональной деятельности, прописанных в Стандарте образования бакалавра [1] (правоприменительная, правоохранительная, нормотворческая и экспертно-консультационная), принято относить следующие:

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

Привлечение игровых механик в неигровые процессы формирует компетенции, столь необходимые успешному специалисту сегодня: развитие критического мышления, повышения уровня мотивации к деятельности, способность к сотрудничеству и работе в команде, целеустремлённость, умение преодолевать трудности, оптимизм [4].

Управляющие (control) предназначены для документов, механик и регламентов, на которых базируется рассматриваемый процесс. Это могут быть списки и рейтинги, свод правил, а также игровые механики. Опыт различных образовательных порталов, использующих в своей основе геймификацию (ресурсы для изучения иностранных языков — Duolingo, LinguaLeo; онлайн-платформы по обучению языкам программирования — Codecademy, Sololearn), позволяет сделать вывод, что наиболее часто применяемыми инструментами игрофикации являются: поэтапная подача обучающей информации, диаграммы результатов для отображения игрового прогресса и механика условленной встречи (Appointment Dynamic).

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

Механизмы (mechanism) — ресурсы, требующиеся для выполнения работы. Это компьютерные программы и оболочки, корпоративные сети и т.д.

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

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

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

Прогрессивные веб-приложения (PWA) представляют собой новую парадигму в веб-разработке, сочетающую в себе лучшие качества веб-сайтов и нативных мобильных приложений. Эта концепция быстро набирает популярность благодаря своей способности улучшать пользовательский опыт, увеличивать вовлеченность аудитории и повышать производительность приложений.

Краткий обзор истории и концепции PWA

История PWA началась в 2015 году, когда Google представил концепцию прогрессивных веб-приложений на конференции Chrome Dev Summit. Одним из ключевых моментов было введение Service Workers – скриптов, которые работают в фоновом режиме и позволяют кэшировать ресурсы для работы в автономном режиме.

Основные принципы и характеристики PWA

Одной из ключевых особенностей PWA является их способность работать в оффлайн-режиме. Это достигается за счет использования Service Workers, которые представляют собой сценарии JavaScript, которые работают в фоновом режиме браузера. Service Workers могут кешировать данные, такие как HTML, CSS, JavaScript и изображения, и управлять запросами к серверу.

Когда пользователь посещает PWA, Service Worker проверяет наличие кэшированных данных. Если данные доступны, PWA может загружаться и работать полностью в оффлайн-режиме. Если данные недоступны, Service Worker отправит запрос на сервер и кеширует ответ, если запрос выполнен успешно.

PWA спроектированы так, чтобы работать во всех современных браузерах, независимо от устройства или операционной системы. Это достигается за счет использования веб-стандартов, таких как HTML, CSS и JavaScript.

По мере того, как браузеры добавляют новые возможности, PWA постепенно улучшают свой пользовательский интерфейс и функциональность. Например, PWA могут использовать push-уведомления в браузерах, которые их поддерживают, и могут получать доступ к аппаратным возможностям устройства, таким как камера и GPS, в браузерах, которые предоставляют соответствующие API.

Они оптимизированы для работы на устройствах с ограниченными ресурсами, таких как смартфоны и планшеты. Так, они используют легкие технологии, такие как Service Workers и Web App Manifest, и эффективно управляют памятью и пропускной способностью.

Например, Service Workers могут кешировать данные и управлять запросами, что снижает потребление пропускной способности и улучшает время загрузки. В свою очередь, Web App Manifest — это JSON-файл, который предоставляет метаданные о PWA, такие как имя, значок и цвет темы.

PWA можно легко установить на устройства пользователей с помощью значка на главном экране. Они не требуют загрузки из магазина приложений и могут быть установлены непосредственно из браузера.

Когда пользователь посещает PWA, браузер отображает приглашение установить приложение. Пользователь может нажать на приглашение, чтобы добавить значок PWA на главный экран своего устройства. Значок будет вести себя как ярлык для PWA, позволяя пользователям запускать приложение непосредственно с главного экрана.

Также PWA используют адаптивный дизайн, который позволяет им изменять свой макет и пользовательский интерфейс в зависимости от размера экрана и ориентации устройства. Это гарантирует, что PWA всегда отображаются наилучшим образом на любом устройстве.

Преимущества PWA

1)        обеспечение быстрой загрузки, плавной навигации и возможности работы в автономном режиме, что повышает удобство использования и вовлеченность;

2)        установка с сайта одним кликом, обеспечивающая моментальную загрузку контента и удобство для пользователей;

3)        автоматические обновления и небольшой размер приложений, делающие данные приложения экономными;

4)        интегрирование в операционные системы, а также нативный стандарт интерфейса, способствующий удобству пользователей;

5)        индексация поисковыми системами и привлечение дополнительного трафика.

Недостатки PWA

1)        не все браузеры поддерживают полнофункциональную работу PWA, что может привести к неожиданным ошибкам и проблемам с совместимостью;

2)        поскольку PWA работают в браузере, они могут быть уязвимы к атакам безопасности, таким как межсайтовый скриптинг, фишинг и DNS-спуфинг;

3)        PWA могут быть ограничены в доступе к функциям устройства, таким как камера, GPS и уведомления, в отличие от нативных мобильных приложений.

Методы улучшения пользовательского опыта с помощью PWA

Методы улучшения пользовательского опыта с использованием прогрессивных веб-приложений (PWA) представляют собой важную часть современной веб-разработки. PWA сочетают в себе преимущества веб-сайтов и функциональность нативных приложений, обеспечивая пользователям удобство и быстродействие. В данной главе мы рассмотрим несколько ключевых аспектов, которые помогают улучшить пользовательский опыт при использовании PWA.

Так, оптимизация загрузки контента Одним из главных преимуществ PWA является быстрая загрузка контента. Чтобы ускорить загрузку контента, необходимо использовать технологии, такие как Service Workers и Cache API, которые позволяют кэшировать данные на стороне клиента. Это позволяет уменьшить время загрузки и увеличить скорость работы веб-сайта.

Еще одним ключевым свойством PWA является надежность и безопасность. Усовершенствованные механизмы кеширования и Service Workers решают проблему плохого соединения и даже позволяют PWA продолжить работу в автономном режиме. Пользователям больше не придется смотреть на пустой экран, если интернета нет. По крайней мере, ситуация может быть решена более изящно при помощи простого уведомления «Отсутствует интернет-соединение».

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

Отличительной особенностью PWA является высокая адаптивность к разным устройствам и средам. Они могут легко адаптироваться к разным размерам экранов, работая на равных как на настольных компьютерах, так и на мобильных устройствах. Возможна адаптация под любое мобильное устройство, будь то Android или iOS, планшет или мобильный телефон, десктоп или ноутбук. Данная гибкость позволяет пользователям получать одинаково удобный и качественный пользовательский опыт вне зависимости от устройства, которое они используют для доступа к приложению.

Увеличение производительности веб-приложений благодаря PWA

Как уже говорилось ранее, одним из основных преимуществ PWA является возможность кэширования ресурсов на стороне клиента. Кэширование позволяет значительно сократить время загрузки и улучшить отзывчивость приложений, так как ресурсы могут быть получены из кэша, не требуя повторной загрузки с сервера.

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

Примеры успешной реализации PWA

Рассмотрим несколько примеров успешной реализации PWA различными компаниями и стартапами. Каждая модель позволит показать основные преимущества применения PWA в веб-разработке.

Так, например, AliExpress, один из крупнейших мировых интернет-магазинов, создал PWA версию своего сайта для улучшения работы на мобильных устройствах. Теперь устройство пользователя сохраняет данные, такие, как изображения, CSS-стили и JavaScript-файлы, чтобы при следующей загрузке брать их не с сервера, а из локального кэша.

Ещё одним удачным примером является внедрение PWA в приложение Trivago. Компания использовала PWA для создания интерактивной карты с возможностью работы в офлайн-режиме. Карта делает процесс выбора отеля более наглядным и интерактивным. Также она может отображать повторные запросы пользователя без использования интернета.

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

Вызовы и ограничения внедрения PWA

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

Так, одной из основных проблем является совместимость с некоторыми устройствами и браузерами. Хотя большинство современных браузеров поддерживают необходимые для PWA технологии, некоторые старые браузеры могут не поддерживать их работу. Например, некоторые браузеры не поддерживают работу сервис-воркеров, которые просто необходимы данным приложениям. Это сильно ограничивает возможности использования PWA на редких браузерах и непопулярных устройствах.

Ещё одной важной проблемой является ограничение функционала и производительности в некоторых сценариях использования. Например, некоторые функции устройства, такие как доступ к файловой системе или управление устройствами через Bluetooth, могут быть ограничены или недоступны в PWA из-за безопасности или ограничений браузера. Это сильно стесняет разработку функционала и оптимизацию производительности.

Тем не менее, при всех недостатках внедрения данной технологии, преимущества PWA над аналогами (мобильные веб-приложения, нативные приложения и тд), заключающиеся в их способности сочетать преимущества как нативных, так и веб-приложений, а также низкие затраты на производство и поддержку делают данный тип приложений очень привлекательным для современной веб-разработки. Именно поэтому крупные компании отдают ему предпочтение.

Заключение

PWA открывают новую эру веб-приложений, предлагая решения с высоким уровнем функциональности и доступности. Простота использования в сочетании с экономичностью в разработке делают PWA востребованным типом веб-приложений. Они обеспечивают высокий уровень производительности, а также повышают user-experience, объединяют в себе преимущества веб и наивных приложений, предлагая быстроту загрузки и возможность работать оффлайн.

Также одним из ключевых преимуществ PWA является универсальность и кроссплатформенность, что позволяет разработчикам создавать приложения, которые работают на различных устройствах и браузерах без необходимости разработки отдельных версий под каждую платформу. Все эти факторы показывают, насколько PWA важен в современном мире IT-технологий.

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

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

Процесс публикации ресурса на хостинге Hostland максимально прост и автоматизирован. Сначала необходимо зарегистрировать доступное доменное имя – Hostland предлагает широкий выбор популярных зон, включая .com, .ru, .online и другие. Затем в панели управления требуется прописать серверы DNS, чтобы привязать домен к хостингу. После этого можно приступать к загрузке файлов сайта – для этого предусмотрены встроенные FTP-клиент и инструменты для быстрого деплоймента из Git-репозиториев. Остается только проверить, что все работает корректно, и ваш веб-проект готов к публикации.

Hostland предлагает гибкие тарифные планы на любой бюджет – от начальных вариантов до масштабируемых решений для крупных корпоративных сайтов. Независимо от выбранного тарифа, вы всегда можете рассчитывать на высокую производительность и надежность хостинга. Для поддержания максимальной эффективности работы ресурса рекомендуется регулярно проводить его оптимизацию: сжимать изображения, минифицировать CSS и JavaScript, использовать кеширование и CDN. Все необходимые инструменты для этого доступны в интуитивной панели управления Hostland.

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

Инструменты разработки сайта Hostland 

СУБД MySQL

MySQL (МФА: [maɪ ˌɛskjuːˈɛl]) — свободная реляционная система управления базами данных[4]. Разработку и поддержку MySQL осуществляет корпорация Oracle, получившая права на торговую марку вместе с поглощённой Sun Microsystems, которая ранее приобрела шведскую компанию MySQL AB. Продукт распространяется как под GNU General Public License, так и под собственной коммерческой лицензией. Помимо этого, разработчики создают функциональность по заказу лицензионных пользователей. Именно благодаря такому заказу почти в самых ранних версиях появился механизм репликации.

MySQL является решением для малых и средних приложений. Входит в состав серверов WAMP, AppServ, LAMP и в портативные сборки серверов Денвер, XAMPP, VertrigoServ. Обычно MySQL используется в качестве сервера, к которому обращаются локальные или удалённые клиенты, однако в дистрибутив входит библиотека внутреннего сервера, позволяющая включать MySQL в автономные программы.

Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц: пользователи могут выбрать как таблицы типа MyISAM, поддерживающие полнотекстовый поиск, так и таблицы InnoDB, поддерживающие транзакции на уровне отдельных записей. Более того, СУБД MySQL поставляется со специальным типом таблиц EXAMPLE, демонстрирующим принципы создания новых типов таблиц. Благодаря открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются новые типы таблиц.

26 февраля 2008 года Sun Microsystems приобрела MySQL AB за 1 млрд долларов[5], 27 января 2010 года Oracle приобрела Sun Microsystems за 7,4 млрд долларов[6] и включила MySQL в свою линейку СУБД[7].

Сообществом разработчиков MySQL созданы различные форки кода, такие как Drizzle[англ.], OurDelta, Percona Server и MariaDB. Все эти форки уже существовали на момент поглощения компании Sun корпорацией Oracle.

PHP

PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста»; первоначально PHP/FI (Personal Home Page / Form Interpreter), а позже названный Personal Home Page Tools — «Инструменты для создания персональных веб-страниц») — скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Язык и его интерпретатор (Zend Engine) разрабатываются группой энтузиастов в рамках проекта с открытым кодом. Проект распространяется под собственной лицензией, несовместимой с GNU GPL.

В области веб-программирования, в частности, серверной части, PHP — один из популярных сценарных языков (наряду с JSP, Perl и языками, используемыми в ASP.NET).

Популярность в области построения веб-сайтов определяется наличием большого набора встроенных средств и дополнительных модулей для разработки веб-приложений[16]. Основные из них:

Автоматическое извлечение POST- и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

Взаимодействие с большим количеством различных систем управления базами данных через дополнительные модули (MySQL, MySQLi, SQLite, PostgreSQL, Oracle Database (OCI8), Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM, Firebird и InterBase, Paradox File Access, MaxDB, интерфейс PDO, Redis);

Автоматизированная отправка HTTP-заголовков;

Работа с HTTP-авторизацией;

Работа с cookies и сессиями;

Работа с локальными и удалёнными файлами, сокетами;

Обработка файлов, загружаемых на сервер;

Работа с XForms.

Создание и работа с API

Создание приложение с графическим интерфейсом пользователя при использовании фреймворка Qt Designer

Создание консольных приложений

По состоянию на 2022 год используется сотнями тысяч разработчиков; согласно рейтингу корпорации TIOBE, базирующемуся на данных поисковых систем, в декабре 2022 года PHP находился на 10 месте по популярности среди языков программирования.

Входит в LAMP — распространённый набор ПО для создания и хостинга веб-сайтов (Linux, Apache, MySQL, PHP), а также LEMP — не менее распространённый набор ПО (Linux, Nginx, MySQL, PHP).

Среди сайтов, использующих PHP — Facebook, Wikipedia, Yahoo!, Baidu.

Также, на PHP написаны такие системы управления сайтами (CMS) и фреймворки (CMF), как Drupal, Joomla, Laravel, Symfony, WordPress, Yii и другие.

Инструменты веб-разработки

HTML

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.

Элементы HTML являются строительными блоками HTML страниц. С помощью HTML разные конструкции, изображения и другие объекты, такие как интерактивная веб-форма, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов. Элементы HTML выделяются тегами, записанными с использованием угловых скобок. Такие теги, как <img> и <input>, напрямую вводят контент на страницу. Другие теги, такие как <p>, окружают и оформляют текст внутри себя и могут включать другие теги в качестве подэлементов. Браузеры не отображают HTML-теги, но используют их для интерпретации содержимого страницы.

Язык XHTML является более строгим вариантом HTML, он следует синтаксису XML и является приложением языка XML в области разметки гипертекста.

В HTML можно встроить язык программирования JavaScript с помощью тега.

Также включение CSS в HTML позволяет задавать внешний вид и макет страницы.

CSS

CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык декодирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.

Введение. Развитие веб-технологий привело к возможности использования трёхмерной графики непосредственно в интернет-браузерах. Стандарт WebGL обеспечивает доступ к аппаратному ускорению графики, однако его использование требует глубоких знаний в области компьютерной графики. В связи с этим широкое распространение получили высокоуровневые библиотеки, упрощающие процесс создания 3D-сцен.
Одной из наиболее популярных библиотек является Three.js, предоставляющая удобные средства для создания и визуализации трёхмерных объектов. Целью данной работы является демонстрация применения библиотеки Three.js для визуализации простого геометрического объекта и анализа основных этапов построения трёхмерной сцены.
Для реализации трёхмерной визуализации были использованы следующие технологии:

1. Язык гипертекстовой разметки HTML5;
2. Язык программирования JavaScript;
3. Библиотека Three.js версии r128;
4. Графический API WebGL;
5. Модуль OrbitControls для управления камерой.

Использование CDN-подключений позволяет обеспечить корректную работу приложения на различных платформах без дополнительной установки программного обеспечения.

Приложение построено по классической архитектуре Three.js и включает следующие основные элементы:

1. Сцену (THREE.Scene), содержащую все объекты визуализации;
   
2. Перспективную камеру (THREE.PerspectiveCamera);
   
3. Рендерер (THREE.WebGLRenderer), осуществляющий вывод изображения;
   
4. Источники освещения;
   
5. Трёхмерную модель объекта;
   
6. Средства пользовательского управления камерой.
   

Подобная структура обеспечивает модульность и возможность дальнейшего расширения функциональности.

Построение трёхмерной модели. Модель креста формируется из двух параллелепипедов, созданных с использованием класса BoxGeometry. Вертикальный элемент имеет размеры 6×60×3, горизонтальный — 40×6×3 и смещён относительно центра по оси Y.
Для объединения элементов используется объект THREE.Group, позволяющий рассматривать модель как единое целое. В качестве материала применяется MeshPhongMaterial, обеспечивающий корректное освещение и визуальное восприятие формы объекта.

Освещение сцены реализовано с помощью двух источников света: рассеянного (AmbientLight) и направленного (DirectionalLight). Такое сочетание позволяет добиться равномерной освещённости и визуального подчёркивания формы объекта.
Для управления камерой используется модуль OrbitControls, обеспечивающий вращение сцены, масштабирование и плавное перемещение точки наблюдения. Это повышает интерактивность и удобство работы с трёхмерной моделью.

HTML код приложения:

<!DOCTYPE html>

<html lang=”ru”>

<head>

    <title>three.js — Простой крест</title>

    <meta charset=”utf-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

</head>

<body>

<div id=”info”>Простой крест</div>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>

<script src=”https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js”></script>

<script>

    var camera, scene, renderer;

    var controls;

    init();

    animate();

    function init() {

        scene = new THREE.Scene();

        scene.background = new THREE.Color(0xf0f0f0);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

        camera.position.set(0, 0, 100);

        renderer = new THREE.WebGLRenderer({ antialias: true });

        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);

        var ambientLight = new THREE.AmbientLight(0xffffff, 0.6);

        scene.add(ambientLight);

        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

        directionalLight.position.set(1, 1, 1);

        scene.add(directionalLight);

        createSimpleCross();

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        controls.enableDamping = true;

        controls.dampingFactor = 0.05;

        window.addEventListener(‘resize’, onWindowResize, false);

    }

    function createSimpleCross() {

        var group = new THREE.Group();

        var verticalGeometry = new THREE.BoxGeometry(6, 60, 3);

        var verticalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });

        var vertical = new THREE.Mesh(verticalGeometry, verticalMaterial);

        group.add(vertical);

        var horizontalGeometry = new THREE.BoxGeometry(40, 6, 3);

        var horizontalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });

        var horizontal = new THREE.Mesh(horizontalGeometry, horizontalMaterial);

        horizontal.position.y = 8;

        group.add(horizontal);

        scene.add(group);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {

        requestAnimationFrame(animate);

        controls.update();

        renderer.render(scene, camera);

    }

</script>

</body>

</html>

В результате выполнения программы в браузере отображается интерактивная трёхмерная модель простого креста. Пользователь может изменять ракурс обзора и масштаб, что позволяет детально рассмотреть объект с различных сторон.

Рисунок 1. Интерактивная трёхмерная модель простого креста

Полученные результаты подтверждают, что библиотека Three.js является эффективным инструментом для визуализации простых и сложных трёхмерных объектов в веб-приложениях, включая образовательные и демонстрационные системы.

Заключение. В работе рассмотрен пример использования библиотеки Three.js для создания интерактивной трёхмерной визуализации. Показано, что применение высокоуровневых средств позволяет существенно упростить процесс разработки 3D-графики в веб-среде. Рассмотренный пример может служить основой для дальнейших исследований и разработки более сложных визуальных моделей.

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

Целью данной работы является создание веб-приложения «Музыкальная студия», позволяющего пользователю тренировать навыки распознавания музыкальных инструментов по их изображениям. Игра предназначена для широкой аудитории — от детей до взрослых, интересующихся музыкой или изучающих её основы.

Для реализации проекта были использованы технологии HTML5, CSS3 и JavaScript (ES6). Визуальная составляющая включает фоновое изображение студии и отдельные PNG-изображения десяти музыкальных инструментов: акустическая гитара, электрогитара, бас-гитара, ударная установка (бочка и малый барабан), балалайка, коровий бубен, флейта, пианино и саксофон. Все элементы позиционируются абсолютно внутри контейнера с фиксированными размерами (900×600 пикселей), что обеспечивает стабильное отображение на экранах с достаточным разрешением.

Рисунок 1. Рабочее поле игры

Подготовим изображения (рисунок 2). Рисунки лучше подготовить в формате .png, в котором поддерживается прозрачный фон.

Рисунок 2. Спрайты для игры

Логика игры построена следующим образом. При запуске страницы формируется массив из названий инструментов, который перемешивается с помощью алгоритма Фишера–Йейтса:

const MASSIV = [

    "Acoustic-guitar",

    "Electric-guitar",

    "Bass-guitar",

    "Kick",

    "Snare",

    "Balalaika",

    "Cowbell",

    "Flute",

    "Piano",

    "Saxophone"

];

Затем пользователю последовательно предлагается найти на сцене указанный инструмент. После клика по правильному объекту:

— проигрывается звуковой сигнал подтверждения;

— элемент клонируется и заменяется на копию без обработчика события (во избежание повторного нажатия);

— к клону применяется CSS-переход, плавно уменьшающий его прозрачность до нуля.

Этот подход обеспечивает чистоту игрового процесса и визуальную обратную связь. После нахождения всех десяти инструментов выводится сообщение «Вы прошли игру!» и проигрывается финальный звук.

Рисунок 3. Окончание игры

Преимущества предложенного решения:

— минимальная зависимость от внешних библиотек;

— адаптивность к различным темам (достаточно заменить изображения и массив);

— использование открытых аудио- и графических ресурсов;

— поддержка принципов доступности и простоты интерфейса.

Таким образом, игра «Музыкальная студия» демонстрирует, как базовые веб-технологии могут быть эффективно применены для создания образовательного контента. Подобные приложения могут использоваться как в самостоятельном обучении, так и в рамках школьных или дополнительных образовательных программ по музыке и информатике.