Хей, здравей! :)

Имам вълнуваща новина – новият сайт на Издателство „Паралелна Реалност“ (по-скоро едната част от него, която е оптимизирана за устройства с малък екран) е готов за работа и публикуван! И тъй като съм майсторил 99% от нещата по него, на мен се пада честта да те разведа из това магично уеб пространство. Пътешествието, макар и кратко, ще е вълнуващо и изпъстрено с идеите и преживяванията, които доведоха до крайния резултат, както и ще те потопи в детайли от процеса на създаване.

Приятно пътуване! :)

Малко предистория

Корените на този проект могат да се проследят до 2018-та година, когато си спомням, че се обърнах към хората от Издателството с предложение да направя така, че сайтът им да може да се презентира добре и на малки екрани. В тези далечни времена (от гледна точка на съвременното ниво на технологиите достъпни в уеб по време на писането на тази статия :D), бройката на мобилните устройства, които се подвизават в уеб, вече имаше превес над тази на настолните компютри и все повече се налагаше сайтовете да могат да се адаптират към различните размери, в които се показва съдържанието им. Така беше и със сайта на Издателството. А тогава моята главна страст в уеб разработката беше да „сгъвам“ (уеб) страници в оригами (от байтове), за да могат те да са поне толкова добре изглеждащи и полезни и на малък екран. И предложението беше радушно прието, кодът – подготвен и бе демонстрирано как работи:

Ноо… Реализацията на така замислената идея попадна във времеви капан, където размерността на времето беше сякаш от друга плътност и всеки опит това да се промени, парадоксално попадаше в желязната хватка на забвението. :D

Спестявам излишни детайли и се насочваме към година 2020-та, когато се роди идеята – вместо да се адаптира старият сайт, то наместо туй да се направи изцяло нов. Не бих се наел да описвам фурора си тогава, но помня как си казах: „Ооо, даа, ще направя това място рай за четящия!“. :D

И процесът по съграждане започна в началото на 2021-ва година с… грандиозен идеен фалстарт. :D И това се превърна в повратната точка, след която проектът се раздели на две части – версия на сайта за настолни компютри (която все още е забулена в мистичност и предстои да се появи на бял свят, и в която взимат участие немалко творци /край на спойлера/) и мобилна версия на сайта, която „старите (кибер)кучета“ от Издателство „Паралелна Реалност“ с динозавърска скептичност повериха на мен – ковачът на архаични байтове с адаптивна манифестация. :D

Еволюция на дизайна вкратце

Мисъл-формата, която пуснах да орбитира около проекта, още със самото му започване, беше – „Минималистичен дизайн, с главен фокус върху персонализацията на изгледа за четене, като самият дизайн е тясно свързан със/силно напомня на стария сайт“. Кратко и ясно. Но… :D След множество демонстрации и последвали ги дискусии, всяка от които резултираше в надграждане на дизайна на сайта, плануваният минимализъм капитулира и даде път на визията, която сега се помещава под названието «Тема „Вѣхтъ“» – основната тема на мобилния сайт.

В даден момент от съграждането на вѣхтъ-та тема, възникна идеята за още две теми – светла и тъмна, които също не успяха да се докопат до бленувания минимализъм на изразяване, но пък така построени, носят своя чар (както и вѣхтъ-та тема) с неща/идеи от реалния свят, които по един или друг начин са вкарани в дизайна.

Шрифтове

Компонентът с най-голямо значение за комфорта при четенето на статии е шрифтът!

През 2019-та година град Пловдив беше европейска столица на културата. Тогава е имало експериментален проект (част от официалната програма) за създаване на градски шрифт. В каква връзка казвам това, се питаш сигурно? :) Един ентусиаст-доброволец (от екипа на Издателство „Паралелна Реалност“ :D), който е участвал в проекта и е събирал почерци на гости и жители на града в парк Лаута, ми разказа за…

Българската кирилица!

Ако възкликваш: „Чакай, кирилицата е една и тя е българска“, значи си точно като мен по онова време. :D Всъщност става въпрос за българска графична форма на кирилицата – още един елемент в културната идентичност на българите. Ето малко инфо по темата от първа ръка – част от манифеста на инициативата «За българска кирилица»:

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

През следващите десетилетия новата руска азбука продължава да се развива и през XVIII–XIX век се превръща в основа за реформите, последвали и при другите народи, използващи кирилица. Характерно за руските шрифтове и техните производни става използването на редовни букви с формата на умалени главни.

В средата на XX век в България се появява и развива различна гледна точка.

Редовните букви започват да се различават от главните, придобиват горни и долни дължини, а някои от главните букви се видоизменят.

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

Признавам си, откакто се потопих в темата, съм силно пристра̀стен и малко пристрастѐн. :) Помогнах на няколко места да се сменят шрифтовете на сайтове^[1]. Смених си системния шрифт на операционната система. Даже съм си разпечатал десетина копия на манифеста, винаги са с мен и когато ми попадне удобен случай, питам хора и ако не знаят, им подарявам една разпечатка, за да се шири знанието. :D

Препоръчвам изчерпателната лекция на Борил Караиванов, както и това интервю с него, ако сега научаваш за българската форма на кирилицата.

Шрифтовете в сайта

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

Освен основните – Fira Sans и Vollkorn, има и три шрифта от български автори:

• Fox Book – специални благодарности към автора на този шрифт – Кирил Златков, за съдействието му да добави един липсващ символ в шрифта, който е важен за статиите на Издателството! С този шрифт се внася детска приказност в текстовете. :)
• Plovdiv Typeface – описаният по-горе градски шрифт на Пловдив. :) Специални благодарности и към екипа създал шрифтовата фамилия Plovdiv Typeface, за нанесените промени по наша заявка, които са от значение за статиите.
• Adys – българският шрифт за хора с лека, до средна форма на дислексия при четене. И за разлика от други шрифтове за дислексия, Adys не създава дискомфорт на хора без затруднения при четене.

Освен шрифтовете за четене, има още два шрифта, които се ползват в сайта. Графичните образи на символите в единия шрифт са нарисувани от художник и след това непрофесионално, но работещо, са обединени в шрифт, който е озаглавен Parallel Reality Old Cyrillic. Това е основният шрифт за заглавия на статиите и в менюта на вѣхтъ-та тема. Другият шрифт е GNUTypewriter, който се използва в навигационното меню на бялата тема. Като контраст на изписаните думи преди няколко параграфа, този шрифт не разполага със символи представящи българската форма на кирилицата, поради простата причина, че не намерихме шрифт, който силно да наподобява написан с пишеща машина текст и да има глифите на българската кирилица. Но пък GNUTypewriter създава доста сполучливо настроението, за което е извикан. :)

Визуални теми

Фиг. 2. Първото, което се вижда, когато се зареди мобилният сайт, във всяка една от трите теми

На фиг. 2 се вижда резултатът от дръзката колаборация между пищността и минимализма. :D

Сложени в този ред темите, много е лесно да се обвържат с понятията минало, настояще и бъдеще:

• Вѣхтъ-та тема носи усещане за време старо, когато писането е било повече като медитация и алхимично свързване на света на мислите с видимия свят (H. е написал много хубава статия на тази тематика).
• Светлата тема е като водене на записки в сегашно време, със закачени на корково табло бележки, записки и навързване на открития, но не за някакви реални престъпления, а за престъпления към реалността, каквато си мислим, че я познаваме.
• И тъмната тема, която, напук че е тъмна, има неонови сияния, за да намига за научно-фантастичните дистопии, които повечето от нас са гледали и които ни пренасят в бъдещето, където в тъмнината на мокрите пусти улици, осветени от изкуствените светлини, се спотайват късчета истинско нæписано знание. :)

Мааaлко по-изразителни, спрямо тези настроения, са основните менюта, пак в съответните визуални теми:

Фиг. 3. Основното навигационно меню – в минало, настояще и бъдеще, показани в бъбрив дзен облик :D

Ще споделя любопитна подробност от процесите на създаване на темите, но ще е в края на публикацията.

А сега – продължаваме с една от болните теми на стария сайт:

Търсачката

Ако искаш да търсиш статии в сайта, търсачката се намира в лявото меню, най-отгоре (тавтологията е непреднамерена). Вместо обичайния бутон с лупа, на вѣхтъ-та тема се показва фенер със свещ, която се запалва, когато бъде посочена, и пръска светлина навред. :)

Рисунката на фенера е дело на художника Росен Маринов (RosMarin’o).

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

А те са три:

Опция „Всички думи“

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

Опция „Фраза“

Почти същото както „Всички думи“ като логика на търсене, с разликата, че се взима предвид точната последователност на въведените думи.

„Механиката“ в процеса на търсене е друга и е възможно, ако търсенето с опция „Всички думи“ не намери съвпадения, то опция „Фраза“ да върне резултат.

Опция „Буквално търсене“

Тази опция прави буквално какво казва самата тя. :D

Самото търсене

За повече комфорт при прегледа на търсените резултати, откритите думи се открояват.

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

Потребителски профил

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

Фиг. 7. Бутонът за извеждане на диалоговия прозорец за вписване за всяка от трите теми

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

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

Фиг. 8. Диалоговата кутийка за вписване, създаване на профил и подновяване на парола в трите теми

Статистика

Фиг. 9. Статистиката в трите теми

Статистиката е както в стария сайт, но малко раздвижена и се обновява на всеки 15 минути.

Предпочитания за четене и теми

Теми

Фиг. 10. Бутон за менюто с предпочитания

Както беше описано по-рано, сайтът разполага с три теми, които могат да бъдат избирани от менюто за предпочитания, чрез зъбното колело горе вдясно на дисплея.

Избраната тема се пази като настройка само на текущото устройство, където е зададена. Същото важи и за останалите предпочитания.

Тъмната тема, поради спецификата си, има две допълнителни опции:

Тези опции са:

• изключване на неоновите ефекти, които по подразбиране са включени, и
• опция за намаляване на контраста, когато се чете в напълно тъмно пространство (или ако очите ти са чувствителни към контраста „светли букви на тъмен фон“).

Шрифтове за статии

Описаните по-рано шрифтове се избират от менюто за предпочитания. И те, както и темата, се запазват като настройки само на текущото устройство, където са избрани/зададени.

Размер на шрифта, междуредия и отстъп

Тук вече е фината настройка на текстовете за максимален комфорт на четене. С придвижване настрани на показалеца под ска̀лата на избраната настройка, се променя стойността ѝ.

Габаритните стойности са подбрани според добрите практики, които съм срещал, но ти си този, който ще каже дали са удовлетворени читателските ти изисквания. :)

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

Подравняване

Последната опция от менюто за предпочитания е подравняването на текста. Въпреки, че е активирано естественото сричкопренасяне за модерните браузъри^[2] и съответно в двустранното подравняване на текста не се срещат често огромни дупки от празно пространство, съм сигурен, че има някои читатели предпочитащи ляво подравняване, както и че ще има такива, които предпочитат подравняването на текста да е двустранно (и като правило неписано – винаги ще има хора, поляризиращи се в тандеми като: Левски-ЦСКА, светли-тъмни, либерали-демократи, интервали-табулации, Nikon-Canon :D).

Статиите

На начална страница статиите, както и досега, са подредени в обратен хронологичен ред, т.е. последно написаните са първи. Също така, началната страница има подстраници със старите статии, като тези подстраници могат да бъдат достъпени с навигацията в долната част на страницата:

Категории

От основното меню могат да се достъпят всички категории със статии, като най-общо изгледът е следният:

В списъчна структура се показват статиите от избраната категория, като този списък може да се сортира по заглавие, брой посещения, автор и дата на публикуване посредством докосване на съответните бутони/контроли (обозначени с 2 на фиг. 18), както и да се филтрират заглавията (с писане в полето, обозначено с 1 на фиг. 18 или с докосване на името на автор или категория в списъка).

Добавяне в любими

След вписване в потребителския ти профил, над текста на всяка отворена публикация ще виждаш опция да я добавиш в списъка „Любими публикации“:

А списъкът с любими публикации може да се достъпи от лявото навигационно меню тук:

Прогрес на четене

Прогресът на четене, т.е. докъде си стигнал в статията, се показва като нарастваща или намаляваща по широчина хоризонтална лента, която се намира в горната част на дисплея, точно под заглавната лента.

Отметки (експериментална функция)

Когато отвориш статия, в горния десен ъгъл, до зъбното колелце, се показва край на  вертикална лента:

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

Всяка отметка може да бъде изтрита със знака „×“ пред нея, като за пълно изтриване ще се иска повторно потвърждение, чрез натискане на знака „×“.

Тази функционалност е експериментална, защото в определени случаи не може да гарантира точност на позицията на отметката. А случаите са следните:

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

И все пак – в първия и втория случай позиционирането е приблизително същото, а третият случай не е ежедневие. :D

Печатът и други приключения

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

Часове и дни се точеха в опити, демонстрации, търсене на нови шаблони за печати, пак опити и пак демонстрации. И в един момент H. взе решение – трябва да е нещо истинско – реален печат, няма защо да си губим времето в симулации. И имаше едно условие – клишето на печата (а впоследствие и дръжката) да се прави на ръка, а не от машина (и да е със златно покритие)! Това означаваше, че трябва да се намери опитен гравьор, който да го направи. И след проведени разговори на H. с майстори, занимаващи се с гравиране на метал, се намери само един, който се съгласи да го направи на ръка. Това беше майстор Евгени Димов. Срещнахме се с него и обсъдихме идеята. Тогава направихме и една лека корекция на логото на Издателството, а именно – буквите да са с българска форма („Е, къ’!“, както се възклицава по берковския край)! След няколко месеца очакване (майсторът предупреди, че има ангажименти и не може да започне веднага) – откровено си казвам – бях смаян от фините детайли по печата – както дръжката му, така и самото клише!

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

Фиг. 25. Част от процеса по нанасяне на печат

Няма да изброявам неуспешните опити. :D

След резултатите, от които останахме доволни, минахме на следващата фаза – вкарването на получения печат в дигиталния свят:

И крайният резултат, който може да видиш в най-долната част на всяка страница от тема „Вѣхтъ“, е следният:

Друг случай на пренасяне на живия свят във виртуалното компютърно пространство е лентичката „продължи“ на вѣхтъ-та тема и накъсаният стар лист в ляво меню на бялата тема.

Бележки под линия

Малко преди завършването на тази запознаваща те с възможностите на новия сайт статия, бях елегантно сръчкан да упомена и друг елемент от процеса на четене, който също внася допълнително хармония в четенето, а това са бележките под линия. Когато видиш число, оградено в квадратни скоби, с голяма вероятност това е линк (важи за статиите от даден момент нататък), който води към края на публикацията, където е бележката в под линия със съответния номер. При докосването на този номер (ако си на мобилно у-во) ще ти изскочи малка кутийка с текста на съответната бележка. Така няма да се налага да се скача от една част на страницата в друга (а това си е чиста проба стрес за някои читатели и те предпочитат да прескачат бележките; познавам един такъв случай). Ето как изглеждат бележките в трите теми:

Фиг. 28. Бележки под линия, но в кутийка

Картинки на малък екран

Последното, което ще те информирам за мобилния сайт, е, че когато екранът е сравнително малък, в повечето случаи картинката или групата от картинки ще се разпъне по цялата широчина на екрана (при тема Вѣхтъ излиза дори извън обсега на свитъка). Не е бъг, отсега да знаеш.

Все пак това е мини устройство и всеки пиксел е важен. :)

Къде е тоя сайт?

През цялото време говоря за някакъв сайт и му показвам физиономията от различни перспективи, а ти сигурно се дивѝш и маеш „Къде е това чудо?!“.

Ако четеш тази статия на десктоп сайта, отговорът за теб е тук!

А ако си на самия мобилен сайт, то въпросът ти е по-скоро рекурсивно подхлъзване към обятията на реториката. :D

Послепис

Докато се наслаждаваш на четенето тук, ако забележиш нещо, което ти се струва нередно или възпрепятствува четенето ти, не се колебай да се споделиш с нас това!

Сполай и приятно четене! :)

 

 

---

[1] Тук е една подсказка за по-технически ориентираните творци, които още не го знаят – google fonts има доста шрифтове, които поддържат българска форма на кирилицата, но не всички се показват с такава. Това става в случаите, когато българската форма не е подразбираща се. Способът, който винаги е работил, но така и досега не съм забелязал от гугле да са го сложили като опция, е: да се отвори панелът на разработчика (с натискане на F12) и в кода на страницата – html маркера, да се промени свойството lang, като от lang="en" да стане lang="bg" (за незапознатите – това е само временна промяна). По този начин се инструктира страницата, че текстовете са на български и съответно, когато има заложена в някой шрифт българска форма на кирилицата, то текстовете на кирилица се показват с нея (ако така е програмиран шрифтът).

[2] С изключение на това, че думи, започващи с главна буква, не се пренасят на нов ред, както и доста пропуски в логиката на браузърите при сричкопренасянето в българския език…