HTML, CSS, JS, AJAX. Клиентская часть центра тех поддержки.
5094 UAHДве динамические страницы. Клиентская страница и страница редактирования.
ТЗ на центр поддержки Iron Logic
Цель
Предоставить клиенту удобный инструмент для получения информации по оборудованию и ПО. Доступно даже при самом слабом интернете. Пользоваться информацией можно онлайн и автономно (тут предполагается, что база знаний может быть сохранена на клиенте в веб хранилище).
Ограничения:
- минимальный размер кода клиента. Используем непосредственно HTML, CSS, JS
Не используем библиотеки, шаблоны, шрифты и тд. для оформления и ускорения проектирования.
Инструмент для получения информации
Любое устройство способное просматривать веб страницы
База знаний
Для программирования информация делится на два типа:
- Статья – ответ на вопрос – она не имеет перехода на другие ресурсы
- Статья – маршрут – позволяет выбрать направление поиска информации. Как оглавление в книге.
База знаний состоит из статей. Каждая статья является набором блоков. Блок это фрагмент информации в виде текста и/или рисунка или фильма. Блок может иметь ссылку на другую статью или на другой ресурс.
Блок – единичный элемент информации. Состоящий из текста , картинки (фильма) и ссылки.
Два способа поиска информации
- Переходы по пунктам меню
- Поиск по ключевым словам \ группам слов
Массив блока
Номер, версия, текст, ссылка перехода, ссылка картинки (фильма), признак оформления
Массив статьи
Номер, версия, текст (название статьи), массив номеров блоков (ссылок на блоки), количество блоков в строке, массив редакторов
Типы абонентов
Имеют разные задачи и возможности. Для входа используют разные адреса.
- ПОЛЬЗОВАТЕЛЬ, главный получатель информации, тот для кого все это делается. Входит на главную страницу ,например, help8.ru без пароля и регистрации.
- РЕДАКТОР. Готовит информацию на сайте для пользователя. Входит в кабинет по адресу редактор.help8.ru
Описание
При первом входе на сайт получаю страницу и уникальный ID
Далее все запросы отправляю вместе со своим ID. Он хранится в куки или (предпочтительно) в веб хранилище.
Внизу две кнопки. Сохранить статью локально (в веб хранилище). Локально сохраняем и картинки и видео. Смотреть локально. Все это только для одной страницы. Для тестирования такого варианта хранения.
Нажимая на блоки можно передвигаться по статьям в поиске нужной информации.
Обмен данными клиент сервер
Подключение
- Отправляю пустой запрос на сайт (без номера статьи и без ID)
- Получаю HTML, CSS, JS, новый ID
Поиск по меню
- Отправляю серверу номер стартовой статьи = 1( сервер понимает, что это стартовая страница и отрабатывает номер, который назначен стартовым), ID
- Получил статью в виде массива
- Построил страницу
- Догружаю рисунки
- По клику на блоке отправляю серверу номер новой статьи, ID
- Получил новую статью в виде массива
- Переписал блоки
- Догружаю рисунки
- Поиск по ключевым словам (группам слов) – из поисковой строки
- Получил строку поиска, удалил запрещенные символы
- отправляю серверу ID, строку поиска
- Получил статью в виде массива
- Переписал блоки
- Догружаю рисунки
Для заполнения базы используем окно редактирования
Окно редактирования
- Повторяет окно просмотра
- Блок разделен на две части 2/3 и 1/3, левая – переход, правая редактирование, открывается контекстное меню
- Название статьи, левая треть – редактирование статьи
- Контекстное меню
- Добавить
- Удалить – Для статьи вставляется текст “информация удалена” и очищается массив номеров блоков. Для блока – удаляется номер из массива номеров блоков
- Редактировать
- Копировать
- Вставить копию
- Редактировать
- Количество блоков в строке (статья)
- Порядковый номер блока в статье – сортировка (статья)
- Авто нумерация (статья)
- Текст
- Ссылка перехода
- Ссылка на рисунок
- Признак оформления текст/рисунок
- Рисунок – при наведении появляется текст, по клику открывается рисунок в новом маленьком окне
- Текст на фоне рисунка – при наведении появляется рисунок, текст становится полупрозрачным. Текст можно скопировать
Приложения 2
Результаты работы
Отзыв заказчика о сотрудничестве с Юрием Никоненко
HTML, CSS, JS, AJAX. Клиентская часть центра тех поддержки.Проект. Динамическая страница с адаптивным дизайном и автономной работой. HTML, CSS, JS, AJAX, работа с кешем и локальным веб хранилищем, четкая поддержка описанного протокола обмена данными с сервером. Быстро и качественно вникает в суть вопроса, делает то, что нужно заказчику, хорошо работает в команде.
![]()
Отзыв фрилансера о сотрудничестве с заказчиком
HTML, CSS, JS, AJAX. Клиентская часть центра тех поддержки.С Муратом было приятно работать, открытый, приятный человек с хорошими знаниями в Web-сфере, побольше таких заказчиков.
-
Интересный проект. Возможно, у Вас есть большие и сложные проекты с высокими требованиями для профессионалов? Или может знаете, где есть? =)
-

Доброе утро Олег.
Спасибо, что откликнулись на мой проект.
Он предполагает развитие. Сейчас опубликовано ТЗ начального уровня.
По этому, важно, строго придерживаться протокола обмена. Протокол опубликован в проекте, один из прикрепленных файлов.
В нем есть ссылки на возможный вариант адаптивной верстки страницы и примеры реализации протокола связи.
Кроме этого проект предполагает автономную работу и хранение данных на клиенте.
Позже к проекту будет добавлен чат.
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Исправление ошибок, оптимизация конверсии и улучшение UX в Shopify-магазинеТребуется опытный Shopify-разработчик для решения следующих задач: 1. Исправление критических ошибок JavaScript (приоритет) В нескольких сессиях пользователей фиксируются ошибки при добавлении товара в корзину, которые приводят к невозможности оформить заказ. Ошибки… HTML и CSS верстка, Java ∙ 1 час 23 минуты назад ∙ 8 ставок |
SCSS HTML JS FIGMA Верстка
1000 UAH
Нужна верстка шаблона из Figma без dev mode. Хорошо структурированный SCSS, адаптив на ваше усмотрение, все по секциям. Если используете Claude code, это большой +. Нужно еще на вчера. Указывайте цену. Нужно начать сегодня и закончить как можно быстрее (желательно завтра в… HTML и CSS верстка ∙ 4 часа 59 минут назад ∙ 56 ставок |
Интернет-магазин на WordPress
20 000 UAH
Нужен хороший сайт (на WordPress) интернет-магазина (продажа товаров CBD в США).Категория конкурентная, много фото/много товаров, нужно сделать оригинально. ТЗ какое-то есть. Потом нужно будет продвигать его в соц. сетях и Google.Не за все деньги мира полез, потому что реально… HTML и CSS верстка ∙ 5 часов 54 минуты назад ∙ 42 ставки |
Исправить CSS/DOM-верстку карточек в Chrome extension для локализации D&D BeyondЭто расширение Chrome Manifest V3, которое локализует сайт D&D Beyond на украинский язык. Проект написан на TypeScript + WXT. Расширение работает через контентный скрипт: находит английский текст на страницах D&D Beyond и заменяет его украинским переводом. Проблема возникла на… HTML и CSS верстка, Javascript и Typescript ∙ 13 часов 56 минут назад ∙ 31 ставка |
Ищу человека, который поможет наполнить сайт агентства по рекламе на ВордпрессеСоздав в кладе страницы и сейчас это все сделал на Вордпрессе. Ищу человека, который сможет помочь наполнить контентом сайт. Быстро и качественно, определенные фото, наверное, нужно будет сгенерировать в Джипити. Я постараюсь помочь. Страниц примерно 15 AI обработка текстов, HTML и CSS верстка ∙ 2 дня 1 час назад ∙ 40 ставок |