Руководство пользователя AltAccess

Об AltAccess

AltAccess -- это веб-приложение для редактирования alt-текстов изображений в HTML-файлах. Из файлов в указанной пользователем локальной папке приложение извлекает тексты из атрибутов alt в тегах <img>, дает возможность отредактировать этот текст и сохранить обратно.

Чтобы приложение успешно извлекло alt-текст из тега <img>, тег должен иметь атрибут id.

Файлы приложения

Основные файлы приложения:

• server.js: серверная часть на Node.js, использующая Express.js для обработки HTTP-запросов.
• app.js: клиентский JavaScript, который обрабатывает взаимодействие с пользователем.
• index.html: основная веб-страница, через которую пользователь взаимодействует с приложением.

Установка и запуск приложения

Установка Node.js

1. С официальныго сайта Node.js скачайте установщик для вашей операционной системы. На сайте доступны две версии для скачивания:
   • LTS (Long Term Support) -- версия с длительным периодом поддержки;
   • Current -- текущая версия. Рекомендуется выбрать версию LTS, так как она обеспечивает наилучшую стабильность и поддержку.
2. Запустите установщик и следуйте его инструкциям.
3. Чтобы проверить успешность установки: a. Запустите командную строку или терминал. В Windows для запуска командной строки нажмите "Пуск", затем введите cmd. b. В командной строке (или терминале) ведите: node -v Если появилось сообщение с номером установленной версии, значит, установка прошла успешно.

Загрузка приложения

Вы можете загрузить приложение одним из следующих способов:

• Если у вас установлен клиент Git, вы можете клонировать репозиторий в произвольную папку: git clone https://github.com/Kostenkov-2021/Alt_access_editor
• Если вы не пользуетесь клиентом Git, вы можете скачать репозиторий с веб-страницы на GitHub. Для этого перейдите на страницу репозитория, нажмите на кнопку Code и в раскрывшемся меню выберите пункт Download ZIP. Распакуйте полученный архив в произвольную папку.

Далее в этой документации мы будем для примера считать, что используется ОС Windows, а файлы и папки приложения (например, файл server.js и папка public) находятся в папке C:\Users\user\Alt_access_editor. Если вы пользователь Linux или Mac OS, для вас изменится способ вызова терминала и пути к файлам, в остальном действуйте по аналогии.

Установка зависимостей

1. Запустите командную строку. В Windows для запуска командной строки нажмите "Пуск", затем введите cmd.
2. Перейдите в каталог проекта при помощи команды cd [путь к папке проекта], например: cd C:\Users\user\Alt_access_editor
3. Выполните команду: npm install Эта команда устанавливает дополнительные компоненты, необходимые для работы приложения.

Запуск и завершение приложения

1. В командной строке перейдите в каталог проекта при помощи команды cd [путь к папке проекта], например: cd C:\Users\user\Alt_access_editor

2. Запустите сервер с помощью команды: node server.js. При успешном запуске сервера отобразится сообщение, содержащее адрес сервера, например: Server running on http://localhost:3000

3. Не закрывая командную строку, откройте браузер. В адресной строке введите адрес сервера, который отобразился на предыдущем шаге, в примере выше это адрес http://localhost:3000. На странице отобразится форма с кнопкой Извлечь alt-тексты. О том, как работать с приложением, см. ниже в разделе "Использование приложения". В процессе работы с приложением не закрывайте командную строку.

4. После завершения работы с приложением вернитесь в командную строку и нажмите CTRL+C. Это остановит сервер и завершит работу приложения.

Использование приложения

В этом разделе для примера мы будем считать, что справка лежит в папке C:\Users\user\documents\help\.

1. Откройте стартовую страницу приложения как описано выше в разделе "Запуск и завершение приложения".

2. В поле Папка с HTML-файлами введите абсолютный путь к папке с HTML-файлами вашей справки, например, C:\Users\user\documents\help\.

3. Нажмите на кнопку Извлечь ALT-тексты. Через некоторое время отобразится список изображений в каждом из HTML-файлов справки. Для каждого изображения отображается имя файла изображения, текущий alt-текст, рекомендации по его улучшению и текстовое поле ввода для нового alt-текста.

4. Введите новые alt-тексты в полях ввода справа. Вы можете посмотреть на изображение, нажав на имя файла изображения в левой части страницы. Изображение откроется в новой вкладке браузера.

5. Для сохранения внесенных изменений в HTML-файле нажмите на кнопку Сохранить изменения в этом файле. Обратите внимание, что сохраняются изменения одновременно для всех изображений в одном HTML-файле, а не для каждого изображения по отдельности.

Выполняемые проверки

• Проверка длины alt-текста, чтобы она не превышала 255 символов.
• Проверка наличия точки в конце alt-текста.
• Проверка количества слов в alt-тексте для соответствия рекомендуемому диапазону от 3 до 15 слов.
• Alt-текст не должен начинаться со слов "рисунок", "изображение" или "картинка".
• Проверка на соответствие изображения критериям значков и соответствующее отсутствие alt-текста.
• Alt-текст не должен дублировать текст, который уже присутствует в подписи изображения.