Code Monkey home page Code Monkey logo

alt_access_editor's Introduction

Руководство пользователя 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-текст не должен дублировать текст, который уже присутствует в подписи изображения.

alt_access_editor's People

Contributors

kostenkov-2021 avatar authoress avatar vostrik avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.