Контекстът

„Може ли България да улови дигиталната вълна?“ (Can Bulgaria catch the digital wave?¹) е въпрос поставен от Ануар Ариди и Даниел Керехазу в статията им публикувана в brookings.edu, чието заключение е, че България изостава с дигитализацията в сравнение с другите европейски страни и макар статията да е за Икономическия сектор, то този въпрос е валиден за всички сектори. Това доказва и планът за дигитална трансформация на България за периода 2020-2030 година публикуван от Министерството на транспорта и съобщенията². Тoчка 13 от гореспоменатия план „…съответства на приоритет 13 „Култура, наследство и туризъм“ в националната програма „България 2030“, която има за цел да развива и съхранява културното богатство и да използва неговият потенциал като инструмент за социално сближаване, стимулиране на творческото и иновативно мислене, както и да генерира икономически ползи.“

Според Wikipedia:

Друг аспект от ползите на дигитализирането е свързан с Ковид-19 и изолацията, която всъщност показа колко необходим процес е, предвид развитието на технологиите, нашумяла тема. Тази тема е засегната от не малко медии и изследвания, като за пример може посочи интервюто на Спаска Тарандова от Фондация "Глобални библиотеки-България" в студиото на "България сутрин", където се засяга темата за „Бъдещето на библиотеките: Да се кооперират и дигитализират по-бързо“⁴, трудът на Милена Добрева, „Преосмисляне на ролята на библиотеките като „трето място“ след пандемията от COVID-19”⁵ и редица други. Това би могъл да се счете и за повратния момент, в който дигитализацията във всеки един аспект от живота се засили. Изолацията показа необходимостта от нея, но също така и ни показа колко е полезна и колко добре можем да я инкорпорираме в ежедневието си – от „четенето“ на аудио книги на път за работа, през дигитално образователното съдържание, до дигитализирането на културното наследство.

Настоящата теза засяга точно тази тема – дигитализирането на културното наследство е от изключително значение за историята, литературата, лингвистиката и като цяло за всички сфери. Тя (дигитализацията) осигурява моментален достъп винаги и навсякъде, което е важно не само за съхранението и консервирането на културно-историческите извори, но е и от изключително значение за изследователската дейност. Съществена роля играе НАБИС⁶ (англ. NALIS), чиято мисия е описана на сайта по следния начин:

• Функционална интеграция на библиотечно-информационни системи и каталожни регистри на научни институции, университети, големи библиотечни хранилища, училища, музеи, галерии и др.;
• Висока информираност в областта на изследователската и научна дейност;
• Прилагане на съвременни модели на информационно обслужване, отговарящи на световните стандарти;
• Международно сътрудничество в областта на библиотечните информационни и комуникационни системи.
• Основната задача на Фондация НАБИС е да допринася за развитието на науката, образованието и културата в България, като същевременно:
• Съдействие за подобряване на библиотечно-информационната комуникация между научните институции, университетите и по-големите книгохранилища;
• Разработване на различни програми и участие в тяхното изпълнение;
• Организиране на обучение, специализации и квалификации в областта на библиотечните информационни и комуникационни системи;
• Координиране на дейности по определени международни, местни и регионални проекти, свързани с развитието на библиотечно-информационното сътрудничество;
• Организиране на семинари, конференции и форуми;
• Извършване на информационна дейност и издателска дейност.

На интернет страницата на фондацията можем да открием списък с дигитални каталози и колекции и не малка част от тях са български. Тук е редно да се отбележи, че и Националната библиотека "Св. св. Кирил и Методий"⁷ разполога с дигитилизиран сайт като част от ПРОЕКТ BG0046 „ДИГИТАЛИЗАЦИЯ И ЗАПАЗВАНЕ НА ПИСМЕНОТО НАСЛЕДСТВО НА БЪЛГАРИЯ” като част от резултатите описани на официалния сайт са:

Цялостната идея на проекта „София тогава. Дигитални карти и писмени извори“ е да се създаде интернет сайт, който да събира в себе си дигитализирани издания в оригиналният им правопис и по местата и описанията споменати в тях да се пресъздаде и запази обрисуваната от авторите стара София като се използват дигитализирани карти на София от съответните години, в които е писано даденото произведение.

Практическата цел на настоящата теза е да се дигитализира произведението „Драски и шарки“ на Иван Вазов в оригиналния му правопис като се използва изданията от 1893 година (Том I) и от 1895 година (Том II)

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

Крайната цел на практическата част на тезата е да имаме цялостен интернет сайт „София тогава. Дигитални карти и писмени извори“, където ще могат да се открият сортирани по автори дигитализирани произведения. Също така ще бъдат отделени всички места в София срещани в писмените източници. Възможностите, които уебдизайнът ще предлага са:

• падащо меню – достъп до съдържанието и избор на автор, произведение, място или карта на стара София за съответната година, където е отбелязано къде точно се е намирало мястото в контекста на тогавашното развитие на града;
• места – води до списък с местата, който дава възможност да се проследи къде в текста е споменато съответното място и/или да се визуализират мини-статиите с информация за местата;
• картата също ще предоставя възможност да се стигне до мини-статиите.

На втори план, проектът си поставя още една цел – да бъде максимално изчерпателен в употребата си на дигитализираното до този момент културно-историческо наследство, чийто резултат да бъде описан в библиографията към настоящата теза. Тази цел е експеримент, който има за идея да проследи развитието на дигитализацията в България и да провери до колко проблемът с поствизуализацията е разрешен, следвайки притесненията споделени в статията на Андрей Бояджиев, Андрей Лунин и Димитър Григоров, публикувана на SUDigital.org ⁸.

За начална точка на този проект, както и за основа на настоящата теза избрах Иван Вазов и сборника му с разкази „Драски и шарки“. За обосновката на това решение вж. тук Защо Иван Вазов?и Защо „Драски и шарки“?

Мозайката от технологии на сайта

Съвременната дигитализация на културното наследство в голяма степен зависи от използването на технологии с отворен код. След заснемането на изворите, следва работа по разпознаването на текста и неговото форматиране. Един популярен начин за съставяне на подобни приложения е използването на системи за управление на съдържанието ⁹. Друг начин да съставим своя проект е да използваме технологиите на маркиращите езици и по специално на XML. Този подход бе избран и за нашия проект. Сред предимствата на XML са:

• XML използва човешки, а не компютърен език. XML е четим и разбираем дори от начинаещи;
• XML е разширим¹⁰. Може да създавате свои собствени елементи (тагове), като допълните или преформулирате някои от известните модели;
• Имената на елементите и атрибутите са четими и предават значението на данните. Информационната структура се разпознава лесно както от хора, така и от компютри, тъй като всеки XML елемент непосредствено предхожда свързаните данни. Структурата на данните следва забележим и полезен модел, което улеснява манипулирането и обмена на данните;
• Тъй като файловете са форматирани като обикновен текст с вмъкване на метаинформация (елементи, атрибути и техните стойности), информацията се запазва за дълго време и е подходяща за архивиране и обмяна на данни. Независимо от софтуерните решения за четене на тези файлове, данните от тях могат да се запазят на практика за неограничено време;
• XML разбира и използва Unicode – стандарт за оформяне на шрифтове, като създава уникални адреси за всяка буква или вариант на буква.

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

В това изложение ще се спрем на технологията, използвана за осъщестяването на електронното издание на „Драски и шарки“ от Иван Вазов.

Базата от данни

Проектът е организиран с помощта на базата от данни eXist-db. Това е нерелационна база от данни (no-SQL data base, Not only Structured Query Language data base), която е написана на езика Java и работи с помощта на Java сървъра за приложения Jetty. Тази база от данни може да работи с цялото семейство от уеб технологии, които почиват на XML и HTML: XSLT, XQuery, CSS, JavaScript и много други. Това е прави популярна среда за редица проекти, чиято цел е създаването на електронни публикации, каталози и бази от данни, свързани с културното наследство.

Средата на приложението

В областта на дигитализацията на текстове и оформянето им като електронни издания и/или корпуси от данни често се използват технологии с отворен код¹¹. Това позволява създадeният вече код или програма да се използваt отново, при условие. че те са цитирани, описани са промените и е посочен източника. Този тип лицензи или споразумения предполагат промяна на кода на програмата при спазването на различни условия.

За нашето приложение сме използвали инициативата Digital (scholarly) Editions Base Application. Това приложение, което е създадено за базата от данни eXist, е средата, в която са направени всички промени, описани по-долу. Основните функции на XQuery и XSLT скриптовете разчитат именно на тази среда (framework).

Използване на формуляри (templates)

Идеята на използването на HTML фомуляри е да се спести работата по оформянето на интернет страниците, като раздели кода за визулиализация, от кода, предназначен за трансформацията на данните или за търсенето¹². Идеята е, че веднъж дефиниран стила и възможните приложения за страниците, те могат да се извикват чрез проста връзка.

Проектът използва два файла за осъществяване на тази идея. Първият е основен и е призван за осъществяване на цялостния дизайн на страниците. Той е дефиниран във файла page.html и се състои от няколко основни части

В първата се дефинира метаинформацията и част от основните библиотеки. Тези данни се поместват в елемента head. Тук можем да откроим:

• <title data-template="config:app-title">App Title </title> – основното наименование на приложението, дефинирано във файла
• основната структура на всеки един файл: елементът body, който включва навигационното меню с елемента nav и формата за общото търсене form, следвана от извикването на основното съдържание (div с атрибут id) и накрая частта, която се появява в дъното на всяка страница.
• третата част от файла представлява връзки към отделните JavaScript библиотеки, използвани във всеки файл.

XML и организацията на документите

Изданието е изпълнено с помощта на езика за маркиране XML. То разчита на утвърдените модели за маркиране на текст, предлагани от научния консорциум TEI.

                        <div>
                        <pb n="100"/>
                        <head>II. Дребни впечатления.</head>
                        <p>Кардашевъ мина прѣзъ улица Левски, дѣто, освенъ
                                нѣколко пайтона, возачитѣ на които се псувахѫ по турски, нищо особенно
                                не видѣ; прѣсѣче прѣзъ градската градина, още пуста и безлюдна; само на
                                едно столче сѣдѣше вече една гувернантка и шареше съ омбрелата си
                                пѣсъка, на който си играеше русо дѣтенце. Разумѣва се, нищо вълнующе и
                                потресающе нѣмаше въ тая пълна нѣмцойка и Кардашевъ излѣзе на
                                александровската площадь.  Тука <pb n="101"/> повече минувачи се кръстосвахѫ по
                                посоката на разнитѣ улици, които излазятъ на мегданя: чиновници,
                                търговци, военни, които отивахѫ по службата си, госпожи, които бързахѫ
                                въ моднитѣ магазини – нагиздени.
                                </p>
                            ...
                            </div>
                    

                        <lg>
                        <l>...</l>
                        <l>...</l>
                        </lg>
                    

                        <teiHeader>
                            <fileDesc>
                                <titleStmt>
                                    <title>Драма</title>
                                    <author>Вазов, Иван</author>
                                    <editor xml:id="MJC">Mellany Jane Christy</editor>
                                </titleStmt>
                                <editionStmt>
                                    <edition><date>2023-05-22</date></edition>
                                </editionStmt>
                                <publicationStmt>
                                    <publisher>Sofia University</publisher>
                                    <pubPlace>Sofia</pubPlace>
                                    <date when="2023">2023</date>
                                    <availability>
                                        <licence target="https://creativecommons.org/licenses/by/4.0/" notBefore="2016-08-02">
                                            <p>The Creative Commons Attribution 4.0 International (CC BY 4.0) License applies to this text.</p>
                                            <p>The license was added for the print version of this text on August 2, 2016.</p>
                                            <p>The CC BY 4.0 License also applies to this TEI XML file.</p>
                                        </licence>
                                    </availability>
                                </publicationStmt>
                                <sourceDesc>
                                    <biblStruct>
                                        <monogr>
                                            <title>Драски и шарки (Очерки изъ столичний животъ)</title>
                                            <author><persName>
                                                <surname>Вазов</surname>
                                                <forename>Иван</forename>
                                            </persName></author>
                                            <imprint>
                                                <biblScope unit="volume">1</biblScope>
                                                <pubPlace>София</pubPlace>
                                                <publisher>Книжарница на Ив. Б. Касѫровъ</publisher>
                                                <date>1893</date>
                                            </imprint>
                                        </monogr>
                                    </biblStruct>
                                </sourceDesc>
                            </fileDesc>
                            <revisionDesc>
                                <listChange>
                                    <change when="2023-05-25T17:32:23Z" who="#MJC">първоначална редакция</change>
                                </listChange>
                            </revisionDesc>
                        </teiHeader>
                    

Трансформацията от XML в HTML

Трансформацията в HTML се извиква с помощта на функция за сериализация на XML документа с помощта на XQuery¹³. Най-често използваните скриптове се обръщат към две директории в data на сървърното приложение – editions и meta. Тяхната основна структура е почти еднаква.

Файлът editions.xsl в директорията resources/xslt оформя основната структура на всички разкази в базата данни. Той се състои главно от две части. Първата от тях е оформена с елемента card на HTML, а втората извиква допълнителна информация, когато кликнете с мишката в горната част документа върху картинка с информацията.

Горната част на card съдържа общата информация за файла, която се помества най-горе, когато се отвори браусъра:

                    <div class="card card-header">
                        <h2 align="center">
                            <xsl:for-each select="//tei:fileDesc/tei:titleStmt/tei:title">
                                <xsl:apply-templates/>
                                <br/>
                            </xsl:for-each>
                        </h2>
                        <p align="center">
                            <a>
                                <i class="bi bi-info-square" title="Показва информация за документа" data-bs-toggle="modal" data-bs-target="#exampleModalLong"/>
                            </a>
                            | 
                            <a href="{$path2source}">
                                <i class="bi bi-file-arrow-down" title="Показва TEI XML"/>
                            </a>
                        </p>
                    </div>
                

Този код може да се „разчете“ така: за всеки файл, който се намира в директорията editions създай заглавка от второ ниво h2 и избери съдържанието на елемента title, вмъкни празен ред (br). След това създай абзац (елемент p) и в него създай две връзки: 1. модален диалог, който показва информацията за документа; 2. връзка към източника (XML файла). Двете посочки се извикват с помощта на малки картинки, които са от библиотеката на Bootstrap.

Втората част на HTML елемента card извиква основната информация в XML файла, която е затворена в елемента text:

                    <div class="card-body">
                        <xsl:apply-templates select="//tei:text"/>
                    </div>
                

Третата част на card е предазначена за допълнителна, съпътстваща информация. В нея се съдържат бележките под линия и начинът на цитиране на съответния файл:

                    <div class="card-footer">
                        <p style="text-align:center;">
                            <xsl:for-each select="tei:TEI/tei:text/tei:body//tei:note">
                                <div class="footnotes">
                                    <xsl:element name="a">
                                        <xsl:attribute name="name">
                                            <xsl:text>fn</xsl:text>
                                            <xsl:number level="any" format="1" count="tei:note[./tei:p]"/>
                                        </xsl:attribute>
                                        <a>
                                            <xsl:attribute name="href">
                                                <xsl:text>#fna_</xsl:text>
                                                <xsl:number level="any" format="1" count="tei:note"/>
                                            </xsl:attribute>
                                            <sup>
                                                <xsl:number level="any" format="1" count="tei:note[./tei:p]"/>
                                            </sup>
                                        </a>
                                    </xsl:element>
                                    <xsl:apply-templates/>
                                </div>
                            </xsl:for-each>
                        </p>
                        <p>
                            <hr/>
                            <h3>Цитиране</h3>
                            <xsl:value-of select="//tei:titleStmt//tei:editor/text()"/> (ред.) 
                            <xsl:choose>
                                <xsl:when test="//tei:revisionDesc//tei:change/@when">
                                    (revised: <xsl:value-of select="data(.//tei:revisionDesc//tei:change/@when)"/>),
                                </xsl:when>
                                <xsl:otherwise>
                                    2023.
                                </xsl:otherwise>
                            </xsl:choose>
                            '<xsl:value-of select="//tei:titleStmt/tei:title/text()"/>'
                            В: Иван Вазов. <em>Драски и шарки. Електронно издание</em>, URL:
                            <a>
                                <xsl:attribute name="href">
                                    <xsl:value-of select="$backlink"/>
                                </xsl:attribute>
                                
                                <xsl:value-of select="$backlink"/>
                            </a>. 
                            Посетено на: <xsl:value-of select="format-date(current-date(),'[D].[M01].[Y]')"/>
                            <br/>
                            <a class="center">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="$path2source"/>
                                </xsl:attribute>
                                <i class="bi bi-download"/>
                            </a>              
                        </p>
                    </div>
                

В първата част на този пример са поместени бележките под линия: <xsl:for-each select="tei:TEI/tei:text/tei:body//tei:note"> ... </xsl:for-each>, форматира всяка една с нарастваща номерация с арабски цифри ( <xsl:number level="any" format="1" count="tei:note[./tei:p]"/>) и създава обратна връзка към текста, където е поместена¹⁴.

Вторият абзац обхваща начина на цитиране на текста. Тук обратната връзка (backlink) е дефинирана отделно в началото на файла, а тук е само посочена:

 
           <xsl:variable name="backlink">
                 <xsl:value-of select="concat('https://slav.uni-sofia.bg/exist/apps/draski/pages/show.html?document=', $document)"/>
           </xsl:variable>
                   

В този отрязък под $document се разбира името на файла.

Последната част от файла е посветена на т. нар. модален диалогов прозорец. Той се извиква от най-горната част на екрана на браусъра – <i class="bi bi-info-square" title="Показва информация за документа" data-bs-toggle="modal" data-bs-target="#exampleModalLong"/>. Самият код се дели на три части:

• заглавната част на файла (title) и възможност да се затвори диалоговия прозорец:

  
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true"/>
                              </button>
                      

• Кратка информация за авторската отговорност и лиценза;
• В дъното на диалоговия прозорец е поместена още веднъж възможност за неговото затваряне, този път като се кликне върху думата „Затваряне“

  
                          <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Затваряне</button>
                          </div>
                      

Файлът, който трансформира XML файла в HTML при документите в директория metaследва същата подредба. Разликите са във възможността да се направи съдържание в началото на файла и да се посочи друг адрес на цитиране в стойността backlink. Тук в допълнение към информацията в editions.xsl е добавена директорията и наименованието на XSLT файла – <xsl:text>&directory=meta&stylesheet=meta</xsl:text>. Самото съдържание се форматира като неномериран списък:

                    <xsl:when test="//tei:div/tei:head">
                        <h4>
                            Съдържание
                        </h4>
                        <xsl:element name="ul">
                            <xsl:for-each select="//tei:div//tei:head">
                                <xsl:element name="li">
                                    <xsl:element name="a">
                                        <xsl:attribute name="href">
                                            <xsl:text>#text_</xsl:text>
                                            <xsl:value-of select="."/>
                                        </xsl:attribute>
                                        <xsl:attribute name="id">
                                            <xsl:text>nav_</xsl:text>
                                            <xsl:value-of select="."/>
                                        </xsl:attribute>
                                        <xsl:value-of select="."/>
                                    </xsl:element>  
                                </xsl:element>
                            </xsl:for-each>
                        </xsl:element>
                        <xsl:apply-templates select="//tei:text"/>
                    </xsl:when>
                

В началото и на двата файла има отпратка към base.xml: <xsl:import href="shared/base.xsl"/>. В този файл са дефинирани трансформациите на всички останали елементи от структурата на TEI. Така например скрипта за трансформация на подзаглавията изглежда така:

                    <xsl:template match="tei:head">
                        <xsl:element name="h3">
                            <xsl:element name="a">
                                <xsl:attribute name="id">
                                    <xsl:text>text_</xsl:text>
                                    <xsl:value-of select="."/>
                                </xsl:attribute>
                                <xsl:attribute name="href">
                                    <xsl:text>#nav_</xsl:text>
                                    <xsl:value-of select="."/>
                                </xsl:attribute>
                                <xsl:attribute name="class">
                                    <xsl:text>text-primary-emphasis</xsl:text>
                                </xsl:attribute>
                                <xsl:attribute name="style">
                                    <xsl:text>text-decoration: none;</xsl:text>
                                </xsl:attribute>
                                <xsl:apply-templates/>
                            </xsl:element>
                        </xsl:element>
                    </xsl:template>
                

Това означава, че всички заглавки са оформени с помощта на HTML елемента h3, който има идендификатор (id), чиято стойност се формира от заглавието, както и няколко атрибута за обратна връзка към съдържанието и нейното форматиране – href, class и style.

Използването на XQuery

Основната технология, която се прилага в базата от данни eXist е езикът XQuery. XQuery е език за намиране и извличане на елементи и атрибути от XML документи. При XML документите това е технологията за структурирано търсене. Основните функции, които предоставят различни функционалности на сайта са съсредоточени във файла app.xql, който се намира в директорията modules на сървъра. За целите на нашето издание ние направихме редица промени във функциите, част от този файл. Така например, бе добавена функция за извикване на съдържанието на отделните части от „Драски и шарки“:

                    declare function app:tocPart1($node as node(), $model as map(*)) {
                    for $doc in (collection(concat($config:app-root, '/data/editions'))//tei:TEI[@type='Part1'])
                    let $collection := functx:substring-after-last(util:collection-name($doc), '/')
                    let $title := $doc//tei:titleStmt/tei:title
                    let $page := $doc//tei:div/tei:pb[1]
                    return
                    <tr>
                        <td>[{data($doc/@n)}]</td>
                        <td>{data($page/@n)}</td>
                        <td>
                            <a href="{app:hrefToDoc($doc)}">{$title//text()}
                            </a>
                        </td>
                    </tr>   
                    };
                

Тук функцията app:tocPart1 извиква всички документи в директория /data/editions, които имат като атрибут type стойността Part1. След това избират заглавията на този документ (let $title := $doc//tei:titleStmt/tei:title), както и първата поява на елемента pb ( let $page := $doc//tei:div/tei:pb[1]). Веднъж избрани отделните части на файлове, следват инструкциите как трябва те да се изобразяват (частта след return). В случая сме решили да ги изобразим под формата на таблица с три колони (HTML eлементите tr и td). В последната колона е поместен линк към файла и неговото заглавие. Подобна е функцията app:tocPart2. Единствената разлика е в реда for $doc in (collection(concat($config:app-root, '/data/editions'))//tei:TEI[@type='Part1']), където стойността Part1 е заменена с Part2. Така оформени двете функции предполагат, че в XML файловете на разказите присъства една от двете стойности.

Така създадена функциите предполагат, че е нужно да се конструира интернет страница, където те да бъдат извикани. Създаването на подобна страница разчита на вече създадената рамка (template). Ето как би могла да изглежда една от страниците с тези функции:

                    <div data-template="templates:surround" data-template-with="templates/datatable.html" data-template-at="datatable">
                        <br/>
                        <div class="card mb-3">
                            <div class="card-header">
                                <h3>Съдържание на Част 1.</h3>
                                <div data-template="app:tocHeader"/>
                            </div>
                            <div class="card-body containingloader">
                                <div class="loader" id="loader"/>
                                <table id="myTable" style="width:100%;" class="table table-striped table-condensed table-hover table-secondary">
                                    <thead>
                                        <tr class="table-secondary">
                                            <th>Последователност</th>
                                            <th>От страница</th>
                                            <th>Текст</th>
                                        </tr>
                                        <tr id="filterrow" class="table-secondary">
                                            <th>Последователност</th>
                                            <th>От страница</th>
                                            <th>Текст</th>
                                        </tr>
                                    </thead>
                                    <tr data-template="app:tocPart1" class="table-secondary"/>
                                </table>
                            </div>
                        </div>
                        <div data-template="app:tocModal"/>
                        
                        <script type="text/javascript" src="../resources/js/datatables.custom.js"/>
                    </div>
                

Страницата извиква формуляра datables.html, който изобразява таблицата със съдържанието. Самата таблица е оформена с елемента <div class="card mb-3">, който има заглавна част и се състои от таблица с три колони. Заглавията на всяка колона са дадени като част елемента thead – това са подлементите th. Самото съдържание на таблицата е посочено като връзка към функцията app:tocPart1. На края на страницата се извиква модалния диалог (app:tocModal), както и промените, които са направени в скрипта datatables (например българския превод).

За да бъде извикана тази HTML страница е нужна още една стъпка. Към нея трябва да се направи връзка от менюто на нашето приложение, което е дефинирано в основния формуляр page.html. Така в менюто за навигация бе създадена рубриката Съдържание с два дяла: Част 1 и Част 2. В момента кодът изглежда така:

                   <li class="nav-item dropdown">
                       <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            Съдържание
                       </a>
                       <div class="dropdown-menu">
                           <a class="dropdown-item" href="toc1.html">Част 1</a>
                           <a class="dropdown-item" href="toc2.html">Част 2</a>
                       </div>
                   </li>
                

Уеб дизайнът

Външният вид на страницата разчита на библиотеката от функции на HTML, CSS и JavaScript Bootstrap. Тази библиотека не се съхранява на сървъра, а се „извиква“ чрез връзки в страницата page.html:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/
umd/popper.min.js"  integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" 
crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" 
crossorigin="anonymous"/>
                

Към нея е добавено стиловото оформление (тема), взето от Bootswatch – свободни и безплатни теми за CSS. Избраният стил Morph бе свален и копиран в директорията resources/css на сървъра. След това към стила бяха добавени някои нужни промени, като например промяна на шрифта на Arimo¹⁵, промяната на основата на таблиците на по-светъл, както и цветът на шрифта на черен в по-голямата част от сайта. Тези промени в готовите библиотеки отново се извикват от страницата page.html, която служи за основа на всички страници на сайта: <link rel="stylesheet" type="text/css" href="$app-root/resources/css/style.css"/>. Ето един пример за подобна промяна:

                    .footnotes p {
                    color:#000;
                    }
                

Този код на CSS променя всички случаи, където абзацът (p) е част от елемента с клас footnotes (.footnotes) на черен, вместо тъмносин, както е в оригиналния стил Morph на Bootswatch.

Java Script библиотеките

Въпреки че Bootstrap има редица вградени функции на JavaScript, за осъществяването на различни възможности на интернет страниците бе нужно да се добавят няколко библиотеки от готови модули. Заедно с приложението dsebaseapp идват няколко скрипта, които са използвани и на този сайт.

На първо място това е библиотеката Datatables. Тя е отговорна за таблиците на сайта. В нашето приложение тя е осъвременена до най-новата ѝ версия, налична към този момент, като е добавен и превод на български ("language": { "url": "https://cdn.datatables.net/plug-ins/1.12.1/i18n/bg.json")

За да е възможно използването на Datatables, бе нужно да се включи в приложението и популярната библиотека JQuery, тъй като това е една от зависимостите на Datatables. Версията на JQuery бе осъвременена до последната налична версия към момента: <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"/>

Скриптът HR.js се използва без промяна. Той е отговорен за отличаването на част от текст при търсене. Резултатът се оцветява с жълта подложка.

При четенето на страницата в дясната долна част се появява стрелка на по-тъмен фон, която сочи нагоре. При натискането ѝ страницата се премества в своето начало. За тази функционалност е отговорен друг JavaScript. Това е Scroll-To-Top. Съвсем малка промяна бе нужна за неговото използване. Тя е свързана с изменение на цвета на основата на стрелката, така че да отговаря на общия дизайн на страниците.

Стандарти, препоръки и цитирана литература

• Bootstrap:Библиотека от HTML, CSS и JavaScript, съчетани в единна среда (Страница)
• Bootswatch:Безплатни (и свободни) теми за Bootstrap (Страница)
• CSS:Език за форматиране на интернет страниците, написани на HTML или XML (Страница)
• Datatables:Добавка за Java Script към библиотеката jQuery за форматиране на таблици (Страница)
• eXist-db:Нерелационна база от данни за XML (Страница)
• HR.js:Tiny JavaScript plugin for highlighting and replacing text in the DOM (Страница)
• HTML:HyperText Markup Language (Страница)
• Java: програмен език (Oracle Java; OpenJDK)
• JavaScript или ECMAScript: програмен език (Страница)
• Jetty: контейнер за сървлети (приложения за сървъри), написан на Java, използван за уеб сървър (Страница)
• JQuery: библиотека с JavaScript (Страница)
• Lucene: Apache Lucene – търсеща програма с отворен код (Страница)
• Scroll-To-Top: jQuery Plugin For Fixed Positioned Scroll To Top Button - ap-scroll-top (Страница)
• TEI: Text Encoding Initiative Guidelines (Страница)
• Unicode: The World Standard for Text and Emoji (Страница)
• XML: Extensible Markup Language Страница
• XQuery: Extensible Markup Language Страница
• XSLT: Extensible Stylesheet Language for Transformations Страница