Документация на проекта „Римските цифри – от древността до наши дни“

IV. Цели на проекта

Основната цел, която си поставихме, беше създаването на семпъл, ясен и удобен уебсайт, посветен изцяло на римските цифри. Идеята е сайтът да помага на ученици (основно от прогимназиален и гимназиален етап) да разберат по-лесно и интуитивно как функционират римските числа – как се образуват, какви са правилата за събиране и изваждане, кои са основните символи и защо някои комбинации са валидни, а други не.

Освен чисто учебна цел, сайтът може да бъде полезен и при изпълнение на различни училищни проекти по история, математика или гражданско образование. В интернет вече съществуват немалко сайтове и калкулатори за римски цифри, но много от тях страдат от един или повече недостатъци: прекалено сложен интерфейс, твърде много рекламни банери, излишна или трудно разбираема информация, остарял дизайн. Затова се стремяхме нашият сайт да бъде максимално опростен, визуално приятен и фокусиран върху същността – бързо и лесно разбиране на материала.

V. Основни етапи на разработката

Работата по проекта премина през няколко логически последователни фази. Започнахме с подробно обсъждане и грубо скициране на структурата – какви страници ще има сайтът, каква ще бъде навигацията и какъв ще е основният поток за потребителя. След като имахме ясна визия, преминахме към писане на HTML кода за всички основни страници.

Следващата важна стъпка беше обновяването и сериозното опростяване на файла css/style.css. Премахнахме почти всички излишни стилове, стари класове и ненужни декоративни елементи, които бяха останали от предишни версии или експерименти. Целта беше да постигнем чист, модерен и особено – много четим дизайн.

Към края добавихме JavaScript кода, който отговаря за интерактивните елементи – главно конверторът между арабски и римски цифри, валидацията на въведените стойности и показването на обяснения/грешки в реално време. Финалната фаза включваше подробно тестване във всички основни браузъри, проверка за грешки в конверсията и отстраняване на малки визуални и функционални проблеми.

VI. Ниво на сложност и основни предизвикателства

Проектът не беше нито тривиален, нито изключително сложен – намираше се някъде по средата. За хора с базови познания по HTML/CSS/JS той е напълно постижим за няколко седмици работа на части.

Най-голямото предизвикателство се оказа оформлението на Hero секцията на началната страница. Имахме няколко опита да я направим визуално привлекателна, едновременно информативна и добре балансирана на различни размери екрани. Проблемите идваха главно от комбинацията между голямо заглавие, подзаглавие, бутон за действие и фоново изображение/градиент – трудно беше да се постигне хармония, без да изглежда претрупано или празно.

VII. Логическа и функционална структура на решението

Сайтът е изграден върху класическата триада HTML – CSS – JavaScript, като всяка технология изпълнява своята ясна роля:

HTML файловете носят цялата семантична структура и съдържание – заглавия, параграфи, списъци, таблици с примери, форми за конвертор и т.н.
CSS файлът (и евентуално малки допълнителни стилове) отговаря за цялата визуална представа – цветова палитра в исторически стил, типография, отстояния, адаптивна мрежа, hover ефекти и responsive поведение.
JavaScript добавя интерактивността – обработка на потребителския вход, алгоритъм за преобразуване в римски цифри, валидация, динамично обновяване на резултата и показване на пояснителни съобщения.

Трите слоя са добре разделени, което прави кода четим, лесен за поддръжка и разширяване в бъдеще.

VIII. Техническа реализация

За разработка използвахме единствено HTML5, CSS3 и vanilla JavaScript (без фреймуърци и библиотеки). Кодът се пишеше в редактора Visual Studio Code с няколко полезни разширения за по-бърза работа.

Локално сайтът се стартираше чрез Apache2 уеб сървър, което позволяваше да тестваме поведението точно както на истински сървър (включително правилни пътища, .htaccess ако имаше нужда и т.н.).

IX. Инсталация и стартиране

За да пуснеш сайта локално или на сървър, са нужни следните стъпки:

Инсталирай Apache2 (на Linux обикновено чрез sudo apt install apache2, на Windows чрез XAMPP, WAMP или ръчна инсталация).
Копирай цялата папка с проекта в главната директория за уеб съдържание:
Linux: /var/www/html
Windows (XAMPP): C:\xampp\htdocs
Windows (самостоятелен Apache): C:\apache2\htdocs (или където си го инсталирал)
Стартирай Apache (ако не стартира автоматично).
Отвори браузър и отиди на http://localhost (или http://localhost/име-на-папката, ако си я сложил в подпапка).

X. Мобилна версия и адаптивност

От самото начало целта беше сайтът да работи добре и на мобилни устройства – телефони и таблети. Затова още в CSS-а заложихме на computer-first подход и използвахме медийни заявки (@media) за по-малки екрани.

На малки екрани:

Менюто се свива в хамбургер икона
Текстовете се увеличават леко за по-добра четимост
Формата за конвертор заема почти цялата ширина
Hero секцията се подрежда вертикално (заглавие → подзаглавие → бутон)
Таблиците с примери стават scrollable хоризонтално или се преформатират в картички
Всички бутони и интерактивни елементи са с достатъчно големи тач-зони (минимум 44×44 px)

Тествахме сайта на реални устройства (iPhone, Android телефони, iPad) и в DevTools на Chrome/Firefox в различни резолюции. Основните проблеми (най-вече с подравняването в Hero и с височината на viewport на мобилни) бяха отстранени чрез комбинация от min-height, clamp() за шрифтове и внимателно боравене с vh единици.

XI. Заключение и перспективи

В резултат получихме функционален, визуално приятен и образователен сайт, който изпълнява основната си цел – да помага на ученици да разберат и прилагат римските цифри по-лесно.

В бъдеще сайтът може да се развие в няколко посоки:

Добавяне на малки интерактивни тестове и викторини
Упражнения тип „попълни празното“ или „подреди символите“
Анимации, които показват стъпка по стъпка как се образува дадено число
Галерия с реални примери от надписи, часовници, филми и архитектура
Мултимедийно съдържание – кратки видеа или инфографики
Версия на английски език за по-широка аудитория
Добавяне на още теми, за да стане цяла образователна платформа

Проектът се оказа полезно и приятно упражнение, което съчетава технически умения с реална образователна стойност.