mirror of
https://github.com/EDeev/mospoly-helper.git
synced 2026-06-15 19:11:11 +03:00
320 lines
22 KiB
HTML
320 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>О проекте - EasyAccess</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/about.css">
|
||
<link rel="icon" href="images/icons/favicon.ico" type="image/x-icon">
|
||
<meta name="description" content="Подробная информация о проекте EasyAccess - браузерном расширении для повышения доступности веб-сайтов для людей с ограниченными возможностями здоровья">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<nav class="main-nav">
|
||
<div class="logo">
|
||
<a href="index.html">
|
||
<img src="images/logo.png" alt="EasyAccess логотип">
|
||
<span>EasyAccess</span>
|
||
</a>
|
||
</div>
|
||
<ul class="nav-links">
|
||
<li><a href="index.html">Главная</a></li>
|
||
<li><a href="about.html" class="active">О проекте</a></li>
|
||
<li><a href="team.html">Участники</a></li>
|
||
<li><a href="journal.html">Журнал</a></li>
|
||
<li><a href="resources.html">Ресурсы</a></li>
|
||
</ul>
|
||
<button class="mobile-menu-toggle" aria-label="Открыть меню">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="page-hero">
|
||
<div class="container">
|
||
<h1>О проекте EasyAccess</h1>
|
||
<p class="page-subtitle">Инновационное решение для повышения доступности веб-сайтов</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="about-intro">
|
||
<div class="container">
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<h2>Что такое EasyAccess?</h2>
|
||
<p>
|
||
EasyAccess представляет собой комплексное браузерное расширение, разработанное для универсальной
|
||
модификации веб-страниц с целью повышения доступности контента, отраженного на сайте.
|
||
Приложения предназначено для лиц с ограниченными возможностями здоровья.
|
||
</p>
|
||
<p>
|
||
Расширение объединяет в себе возможности нескольких специализированных решений и предоставляет
|
||
дополнительные функции, включая работу с документами и распознавание голоса. Основная цель проекта -
|
||
сделать интернет более доступным для всех пользователей, независимо от их физических ограничений.
|
||
</p>
|
||
</div>
|
||
<div class="about-image">
|
||
<img src="images/extension.png" alt="Иллюстрация концепции EasyAccess">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="accessibility-info">
|
||
<div class="container">
|
||
<h2>Проблема веб-доступности</h2>
|
||
<div class="info-blocks">
|
||
<div class="info-block">
|
||
<div class="info-icon">
|
||
<img src="images/icons/problem.svg" alt="Иконка проблемы">
|
||
</div>
|
||
<h3>Статистика</h3>
|
||
<p>
|
||
По данным Всемирной организации здравоохранения, более 1 миллиарда людей в мире живут с той или иной
|
||
формой инвалидности. В России насчитывается около 11,9 миллионов людей с ограниченными возможностями.
|
||
Все эти люди могут испытывать трудности при использовании веб-ресурсов, не адаптированных должным образом.
|
||
</p>
|
||
</div>
|
||
<div class="info-block">
|
||
<div class="info-icon">
|
||
<img src="images/icons/standards.svg" alt="Иконка стандартов">
|
||
</div>
|
||
<h3>Стандарты</h3>
|
||
<p>
|
||
Существуют международные стандарты и рекомендации по обеспечению веб-доступности, такие как WCAG
|
||
(Web Content Accessibility Guidelines), разработанные W3C. В Российской Федерации вопросы доступности
|
||
веб-ресурсов регулируются ГОСТ Р 52872-2019, который устанавливает требования к доступности интернет-ресурсов.
|
||
</p>
|
||
</div>
|
||
<div class="info-block">
|
||
<div class="info-icon">
|
||
<img src="images/icons/solution.svg" alt="Иконка решения">
|
||
</div>
|
||
<h3>Решение</h3>
|
||
<p>
|
||
EasyAccess предлагает уникальный подход к решению проблемы веб-доступности через систему пакетов
|
||
модификаций, которые могут быть применены к определенным веб-сайтам для повышения их доступности.
|
||
Это позволяет адаптировать контент под конкретные потребности пользователей с различными ограничениями.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="project-goals">
|
||
<div class="container">
|
||
<h2>Цели и задачи проекта</h2>
|
||
<div class="goals-content">
|
||
<div class="goal-main">
|
||
<h3>Основная цель</h3>
|
||
<p>
|
||
Разработать универсальное браузерное расширение EasyAccess, способное повышать доступность веб-сайтов
|
||
и добавлять к ним новую функциональность через систему пакетов модификаций.
|
||
</p>
|
||
</div>
|
||
<div class="goals-list">
|
||
<h3>Задачи проекта</h3>
|
||
<ul>
|
||
<li>Провести анализ существующих решений по обеспечению доступности веб-ресурсов</li>
|
||
<li>Разработать архитектуру расширения, позволяющую гибко настраивать его функциональность</li>
|
||
<li>Спроектировать и реализовать базу данных для хранения пакетов модификаций</li>
|
||
<li>Разработать серверную инфраструктуру для обеспечения работы расширения</li>
|
||
<li>Создать систему пакетов модификаций для повышения доступности веб-сайтов</li>
|
||
<li>Реализовать модули для сканирования документов и обработки аудио файлов</li>
|
||
<li>Обеспечить удобный пользовательский интерфейс, соответствующий принципам доступности</li>
|
||
<li>Разработать веб-редактор для создания пакетов модификаций</li>
|
||
<li>Подготовить инфраструктуру для развертывания проекта с использованием Docker</li>
|
||
<li>Сформировать документацию проекта и поддерживать её актуальность</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="project-architecture">
|
||
<div class="container">
|
||
<h2>Архитектура проекта</h2>
|
||
<p class="section-intro">
|
||
Разрабатываемое расширение EasyAccess имеет многокомпонентную архитектуру, которая обеспечивает
|
||
эффективное разделение функциональности, безопасность и высокую производительность приложения.
|
||
</p>
|
||
<div class="architecture-diagram">
|
||
<img src="images/architecture-diagram.png" alt="Диаграмма архитектуры EasyAccess">
|
||
</div>
|
||
<div class="architecture-description">
|
||
<div class="arch-component">
|
||
<h3>Клиентская часть (Frontend)</h3>
|
||
<p>
|
||
Разработана с использованием TypeScript и библиотек React/Solid.js. Клиентская часть включает интерфейс браузерного расширения,
|
||
компоненты для редактирования пакетов модификаций и взаимодействие с Chrome Extension API. Ключевые компоненты разработаны
|
||
с применением реактивной архитектуры для оптимальной производительности.
|
||
</p>
|
||
</div>
|
||
<div class="arch-component">
|
||
<h3>Серверная часть (Backend)</h3>
|
||
<p>
|
||
Реализована на языке Go для основной серверной части и взаимодействия с базой данных. Выбор Go обусловлен
|
||
высокой производительностью и эффективностью при обработке параллельных запросов. Дополнительные модули
|
||
на Python отвечают за обработку данных, распознавание голоса и документов с использованием библиотек машинного обучения.
|
||
</p>
|
||
</div>
|
||
<div class="arch-component">
|
||
<h3>База данных</h3>
|
||
<p>
|
||
Основана на PostgreSQL с расширением TimescaleDB для эффективной работы с временными рядами данных.
|
||
База данных включает 12 основных таблиц и использует материализованные представления для оптимизации
|
||
запросов. Применяется Supabase для управления пользователями и аутентификации.
|
||
</p>
|
||
</div>
|
||
<div class="arch-component">
|
||
<h3>Система пакетов модификаций</h3>
|
||
<p>
|
||
Ключевой компонент расширения, позволяющий создавать, управлять и применять наборы CSS/JavaScript
|
||
модификаций к веб-страницам. Система пакетов реализует изоляцию скриптов и механизмы безопасности
|
||
при внедрении в DOM-структуру страниц.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="unique-features">
|
||
<div class="container">
|
||
<h2>Уникальные преимущества EasyAccess</h2>
|
||
<div class="features-comparison">
|
||
<div class="features-table">
|
||
<div class="table-row table-header">
|
||
<div class="table-cell feature-name">Функциональность</div>
|
||
<div class="table-cell">EasyAccess</div>
|
||
<div class="table-cell">Другие решения</div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell feature-name">Универсальный подход</div>
|
||
<div class="table-cell"><span class="check">✓</span></div>
|
||
<div class="table-cell"><span class="cross">✗</span></div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell feature-name">Система пакетов модификаций</div>
|
||
<div class="table-cell"><span class="check">✓</span></div>
|
||
<div class="table-cell"><span class="cross">✗</span></div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell feature-name">Расширенная функциональность</div>
|
||
<div class="table-cell"><span class="check">✓</span></div>
|
||
<div class="table-cell"><span class="partial">~</span></div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell feature-name">Фокус на российский рынок</div>
|
||
<div class="table-cell"><span class="check">✓</span></div>
|
||
<div class="table-cell"><span class="cross">✗</span></div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell feature-name">Открытая платформа</div>
|
||
<div class="table-cell"><span class="check">✓</span></div>
|
||
<div class="table-cell"><span class="partial">~</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="features-note">
|
||
В результате сравнительного анализа подтверждена актуальность разработки EasyAccess как комплексного
|
||
решения, объединяющего возможности существующих специализированных расширений и предлагающего
|
||
дополнительную функциональность для повышения доступности веб-ресурсов.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="practical-significance">
|
||
<div class="container">
|
||
<h2>Практическая значимость</h2>
|
||
<p class="section-intro">
|
||
Практическая значимость проекта заключается в создании универсального инструмента, который может быть
|
||
использован для решения широкого спектра задач по повышению доступности веб-ресурсов:
|
||
</p>
|
||
<div class="significance-points">
|
||
<div class="point-card">
|
||
<div class="point-icon">
|
||
<img src="images/icons/visual-impaired.svg" alt="Нарушения зрения">
|
||
</div>
|
||
<h3>Для пользователей с нарушениями зрения</h3>
|
||
<p>
|
||
Изменение внешнего вида веб-сайтов: настройка контрастности, размера текста, цветовых схем.
|
||
Добавление альтернативного текста к изображениям и распознавание текста из изображений.
|
||
</p>
|
||
</div>
|
||
<div class="point-card">
|
||
<div class="point-icon">
|
||
<img src="images/icons/motor-impaired.svg" alt="Двигательные нарушения">
|
||
</div>
|
||
<h3>Для пользователей с двигательными нарушениями</h3>
|
||
<p>
|
||
Улучшение навигации и обеспечение полной доступности сайта с клавиатуры.
|
||
Голосовое управление для пользователей с ограниченными возможностями самостоятельного ввода.
|
||
</p>
|
||
</div>
|
||
<div class="point-card">
|
||
<div class="point-icon">
|
||
<img src="images/icons/cognitive-impaired.svg" alt="Когнитивные нарушения">
|
||
</div>
|
||
<h3>Для пользователей с когнитивными нарушениями</h3>
|
||
<p>
|
||
Персонализация интерфейсов: упрощение навигации, удаление отвлекающих элементов,
|
||
структурирование информации для лучшего восприятия.
|
||
</p>
|
||
</div>
|
||
<div class="point-card">
|
||
<div class="point-icon">
|
||
<img src="images/icons/organizations.svg" alt="Организации">
|
||
</div>
|
||
<h3>Для организаций</h3>
|
||
<p>
|
||
Обеспечение доступности веб-ресурсов для всех категорий пользователей без необходимости
|
||
значительной переработки существующих сайтов и приложений.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<img src="images/logo-white.png" alt="EasyAccess логотип">
|
||
<span>EasyAccess</span>
|
||
</div>
|
||
<div class="footer-links">
|
||
<div class="footer-nav">
|
||
<h4>Навигация</h4>
|
||
<ul>
|
||
<li><a href="index.html">Главная</a></li>
|
||
<li><a href="about.html">О проекте</a></li>
|
||
<li><a href="team.html">Участники</a></li>
|
||
<li><a href="journal.html">Журнал</a></li>
|
||
<li><a href="resources.html">Ресурсы</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-nav">
|
||
<h4>Контакты</h4>
|
||
<ul>
|
||
<li><a href="mailto:admin@new-devs.ru">Email</a></li>
|
||
<li><a href="https://github.com/easyaccess-team" target="_blank">GitHub</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2025 EasyAccess. Проектная деятельность, Московский Политех</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|