503 lines
35 KiB
HTML
503 lines
35 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/journal.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">О проекте</a></li>
|
||
<li><a href="team.html">Участники</a></li>
|
||
<li><a href="journal.html" class="active">Журнал</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>Журнал разработки</h1>
|
||
<p class="page-subtitle">Хроника разработки проекта EasyAccess</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="journal-timeline">
|
||
<div class="container">
|
||
<div class="timeline">
|
||
<div class="timeline-entry" id="update-db">
|
||
<div class="entry-date">
|
||
<div class="date-box">
|
||
<span class="day">28</span>
|
||
<span class="month">Февраля</span>
|
||
<span class="year">2025</span>
|
||
</div>
|
||
</div>
|
||
<div class="entry-content">
|
||
<h2>Разработана база данных и серверная часть</h2>
|
||
<div class="entry-meta">
|
||
<span class="entry-author">Автор: Деев Егор</span>
|
||
<span class="entry-category">Категория: Backend</span>
|
||
</div>
|
||
<div class="entry-body">
|
||
<p>
|
||
Завершена работа над базой данных с использованием PostgreSQL и расширения TimescaleDB.
|
||
Структура базы данных спроектирована таким образом, чтобы обеспечить эффективное хранение и
|
||
управление пакетами модификаций, пользовательскими настройками и другими данными расширения.
|
||
</p>
|
||
<p>
|
||
Реализована серверная часть на языке Go, предоставляющая API для взаимодействия с клиентской
|
||
частью расширения. Серверная часть обеспечивает аутентификацию пользователей, управление пакетами
|
||
модификаций и сбор статистики использования.
|
||
</p>
|
||
|
||
<h3>Ключевые достижения:</h3>
|
||
<ul>
|
||
<li>
|
||
Спроектирована и реализована схема базы данных с учетом требований проекта
|
||
</li>
|
||
<li>
|
||
Разработаны миграции для базы данных, обеспечивающие простое развертывание
|
||
</li>
|
||
<li>
|
||
Реализована серверная часть на Go с использованием современных паттернов разработки
|
||
</li>
|
||
<li>
|
||
Протестирована производительность базы данных при высоких нагрузках
|
||
</li>
|
||
<li>
|
||
Настроена интеграция с Supabase для управления пользователями и аутентификации
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="entry-gallery">
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">ER-диаграмма базы данных</span>
|
||
</div>
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Основные API эндпоинты</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="entry-conclusion">
|
||
<p>
|
||
Разработанная база данных и серверная часть обеспечивают надежную основу для
|
||
функционирования всего приложения. Следующим шагом будет интеграция серверной части
|
||
с клиентской частью расширения для обеспечения полной функциональности проекта.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-entry" id="update-ui">
|
||
<div class="entry-date">
|
||
<div class="date-box">
|
||
<span class="day">10</span>
|
||
<span class="month">Марта</span>
|
||
<span class="year">2025</span>
|
||
</div>
|
||
</div>
|
||
<div class="entry-content">
|
||
<h2>Создан интерфейс расширения и маркетплейс</h2>
|
||
<div class="entry-meta">
|
||
<span class="entry-author">Автор: Сапрыкин Пётр</span>
|
||
<span class="entry-category">Категория: Frontend</span>
|
||
</div>
|
||
<div class="entry-body">
|
||
<p>
|
||
Разработан пользовательский интерфейс браузерного расширения с использованием TypeScript
|
||
и библиотеки Solid.js. Интерфейс расширения предоставляет удобный доступ к основной
|
||
функциональности проекта и обеспечивает интуитивно понятное управление пакетами модификаций.
|
||
</p>
|
||
<p>
|
||
Также создан маркетплейс для обмена пакетами модификаций, позволяющий пользователям
|
||
публиковать свои пакеты и устанавливать пакеты, созданные другими пользователями.
|
||
Маркетплейс включает систему рейтингов, поиск и фильтрацию пакетов по различным критериям.
|
||
</p>
|
||
|
||
<h3>Основные компоненты пользовательского интерфейса:</h3>
|
||
<ul>
|
||
<li>
|
||
Главный экран расширения с информацией о текущей вкладке и установленных пакетах
|
||
</li>
|
||
<li>
|
||
Экран управления пакетами модификаций
|
||
</li>
|
||
<li>
|
||
Редактор пакетов для создания и редактирования пакетов модификаций
|
||
</li>
|
||
<li>
|
||
Маркетплейс пакетов модификаций
|
||
</li>
|
||
<li>
|
||
Система настроек расширения
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="entry-gallery">
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Главный экран расширения</span>
|
||
</div>
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Маркетплейс пакетов модификаций</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="entry-conclusion">
|
||
<p>
|
||
Разработанный интерфейс расширения и маркетплейс обеспечивают основу для взаимодействия
|
||
пользователей с проектом EasyAccess. В следующих этапах разработки планируется расширение
|
||
функциональности интерфейса и улучшение пользовательского опыта на основе обратной связи.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-entry" id="update-research">
|
||
<div class="entry-date">
|
||
<div class="date-box">
|
||
<span class="day">25</span>
|
||
<span class="month">Марта</span>
|
||
<span class="year">2025</span>
|
||
</div>
|
||
</div>
|
||
<div class="entry-content">
|
||
<h2>Проведен анализ предметной области</h2>
|
||
<div class="entry-meta">
|
||
<span class="entry-author">Автор: Старков Руслан</span>
|
||
<span class="entry-category">Категория: Исследование</span>
|
||
</div>
|
||
<div class="entry-body">
|
||
<p>
|
||
Проведено исследование предметной области веб-доступности и существующих решений для
|
||
повышения доступности веб-сайтов. Изучены стандарты и рекомендации по обеспечению
|
||
веб-доступности, такие как WCAG (Web Content Accessibility Guidelines) и ГОСТ Р 52872-2019.
|
||
</p>
|
||
<p>
|
||
Выполнен сравнительный анализ существующих аналогов, включая специализированные расширения
|
||
для доступности и универсальные расширения для модификации веб-страниц. На основе анализа
|
||
определены ключевые потребности пользователей и уникальные преимущества проекта EasyAccess.
|
||
</p>
|
||
|
||
<h3>Основные выводы исследования:</h3>
|
||
<ul>
|
||
<li>
|
||
Существующие решения либо специализируются на отдельных аспектах модификации веб-страниц,
|
||
либо на ограниченном наборе функций веб-доступности
|
||
</li>
|
||
<li>
|
||
Большинство решений в области веб-доступности предлагают лишь базовые настройки, не
|
||
обеспечивая глубокой модификации страниц
|
||
</li>
|
||
<li>
|
||
Отсутствуют комплексные решения, объединяющие CSS, JavaScript и конфигурацию в единые пакеты
|
||
</li>
|
||
<li>
|
||
Многие специализированные решения для доступности имеют ограниченную поддержку русского языка
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="entry-gallery">
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Сравнительная таблица аналогов</span>
|
||
</div>
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Ключевые потребности пользователей</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="entry-conclusion">
|
||
<p>
|
||
На основе проведенного исследования разработана архитектура проекта EasyAccess, определены
|
||
ключевые компоненты системы и спланированы этапы разработки. Результаты исследования
|
||
подтверждают актуальность проекта и его уникальные преимущества по сравнению с существующими
|
||
решениями.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-entry">
|
||
<div class="entry-date">
|
||
<div class="date-box">
|
||
<span class="day">15</span>
|
||
<span class="month">Апреля</span>
|
||
<span class="year">2025</span>
|
||
</div>
|
||
</div>
|
||
<div class="entry-content">
|
||
<h2>Интеграция модулей обработки аудио и документов</h2>
|
||
<div class="entry-meta">
|
||
<span class="entry-author">Автор: Петрачков Владимир</span>
|
||
<span class="entry-category">Категория: Backend</span>
|
||
</div>
|
||
<div class="entry-body">
|
||
<p>
|
||
Завершена работа над модулями обработки аудио и документов для расширения EasyAccess.
|
||
Модули разработаны на Python с использованием современных библиотек машинного обучения и
|
||
контейнеризованы с помощью Docker для упрощения развертывания.
|
||
</p>
|
||
<p>
|
||
Компонент распознавания голоса позволяет пользователям управлять веб-сайтами с помощью голосовых
|
||
команд, что особенно важно для людей с двигательными нарушениями. Модуль обработки документов
|
||
обеспечивает распознавание текста из изображений и PDF-файлов, делая их содержимое доступным
|
||
для программ экранного доступа.
|
||
</p>
|
||
|
||
<h3>Ключевые особенности модулей:</h3>
|
||
<ul>
|
||
<li>
|
||
Использование gRPC для эффективного взаимодействия между компонентами на разных языках программирования
|
||
</li>
|
||
<li>
|
||
Оптимизация моделей распознавания для работы в браузерном окружении
|
||
</li>
|
||
<li>
|
||
Поддержка различных форматов документов (PNG, JPG, PDF) с извлечением структурированного текста
|
||
</li>
|
||
<li>
|
||
Реализация системы кэширования для улучшения производительности
|
||
</li>
|
||
<li>
|
||
Интеграция с основным API расширения через REST-интерфейсы
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="entry-gallery">
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Архитектура модуля обработки аудио</span>
|
||
</div>
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Процесс оптического распознавания текста</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="entry-conclusion">
|
||
<p>
|
||
Интеграция модулей обработки аудио и документов существенно расширяет функциональность
|
||
расширения EasyAccess, делая его полноценным решением для обеспечения доступности
|
||
веб-контента. Следующим шагом будет оптимизация производительности и улучшение
|
||
пользовательского опыта при работе с этими функциями.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-entry">
|
||
<div class="entry-date">
|
||
<div class="date-box">
|
||
<span class="day">30</span>
|
||
<span class="month">Апреля</span>
|
||
<span class="year">2025</span>
|
||
</div>
|
||
</div>
|
||
<div class="entry-content">
|
||
<h2>Система безопасности и интеграция с Supabase</h2>
|
||
<div class="entry-meta">
|
||
<span class="entry-author">Автор: Шмыговский Никита</span>
|
||
<span class="entry-category">Категория: Безопасность</span>
|
||
</div>
|
||
<div class="entry-body">
|
||
<p>
|
||
Разработана система безопасности для расширения EasyAccess и интегрирована платформа Supabase
|
||
для аутентификации пользователей и хранения данных. Архитектура безопасности обеспечивает надежную
|
||
защиту пользовательской информации и предотвращает несанкционированный доступ к функциям расширения.
|
||
</p>
|
||
<p>
|
||
Особое внимание уделено безопасности при инъекции скриптов в веб-страницы, что является
|
||
критически важным аспектом работы расширения. Реализованы механизмы проверки и валидации
|
||
пакетов модификаций перед их применением, а также изоляция выполнения скриптов для
|
||
предотвращения конфликтов с основным кодом страницы.
|
||
</p>
|
||
|
||
<h3>Основные компоненты системы безопасности:</h3>
|
||
<ul>
|
||
<li>
|
||
Безопасная аутентификация через Supabase с использованием JWT-токенов
|
||
</li>
|
||
<li>
|
||
Разделение прав доступа и ролевая модель для разных типов пользователей
|
||
</li>
|
||
<li>
|
||
Валидация и санитизация всех пользовательских входных данных
|
||
</li>
|
||
<li>
|
||
Защищенное хранение пользовательских настроек в локальном хранилище
|
||
</li>
|
||
<li>
|
||
Система проверки пакетов модификаций на потенциально вредоносный код
|
||
</li>
|
||
<li>
|
||
Механизмы изоляции скриптов при их выполнении в контексте веб-страниц
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="entry-gallery">
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Схема архитектуры безопасности</span>
|
||
</div>
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Интеграция аутентификации с Supabase</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="entry-conclusion">
|
||
<p>
|
||
Реализованная система безопасности обеспечивает надежную защиту как пользовательских данных,
|
||
так и веб-страниц, на которых применяется расширение. Интеграция с Supabase предоставляет
|
||
масштабируемую и удобную инфраструктуру для управления пользователями и данными без
|
||
необходимости разрабатывать эти системы с нуля.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-entry">
|
||
<div class="entry-date">
|
||
<div class="date-box">
|
||
<span class="day">10</span>
|
||
<span class="month">Мая</span>
|
||
<span class="year">2025</span>
|
||
</div>
|
||
</div>
|
||
<div class="entry-content">
|
||
<h2>Тестирование расширения и исправление ошибок</h2>
|
||
<div class="entry-meta">
|
||
<span class="entry-author">Авторы: Момина Антонина, Николенко Дарья, Старков Руслан</span>
|
||
<span class="entry-category">Категория: QA</span>
|
||
</div>
|
||
<div class="entry-body">
|
||
<p>
|
||
Проведено комплексное тестирование расширения EasyAccess на различных веб-сайтах
|
||
и в разных браузерах. В процессе тестирования были выявлены и исправлены различные
|
||
ошибки и проблемы с совместимостью, что позволило повысить стабильность и
|
||
надежность работы расширения.
|
||
</p>
|
||
<p>
|
||
Особое внимание было уделено тестированию доступности, чтобы убедиться, что
|
||
расширение действительно улучшает использование веб-сайтов для людей с
|
||
различными ограничениями. Для этого были привлечены потенциальные пользователи
|
||
с ограниченными возможностями, которые предоставили ценную обратную связь.
|
||
</p>
|
||
|
||
<h3>Основные направления тестирования:</h3>
|
||
<ul>
|
||
<li>
|
||
Функциональное тестирование всех компонентов расширения
|
||
</li>
|
||
<li>
|
||
Тестирование совместимости с различными браузерами (Chrome, Edge, Firefox)
|
||
</li>
|
||
<li>
|
||
Проверка работы на популярных веб-сайтах и порталах
|
||
</li>
|
||
<li>
|
||
Тестирование пользовательского интерфейса на доступность
|
||
</li>
|
||
<li>
|
||
Проверка корректности работы пакетов модификаций
|
||
</li>
|
||
<li>
|
||
Тестирование безопасности и производительности
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="entry-gallery">
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Схема процесса тестирования</span>
|
||
</div>
|
||
<div class="gallery-item">
|
||
|
||
<span class="image-caption">Система отслеживания ошибок</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="entry-conclusion">
|
||
<p>
|
||
В результате тестирования было выявлено и исправлено более 30 ошибок и проблем,
|
||
что значительно повысило качество расширения. Обратная связь от потенциальных
|
||
пользователей позволила лучше понять их потребности и внести соответствующие
|
||
улучшения в интерфейс и функциональность расширения.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|