В конце августа был брошен клич: дизайнеры, давайте спасём Георгия в шапке сайта, ведь это главный символ современной непреходящей эпохи как оружие возмездия на толстеющего и пожирающего людские ресурсы Змия, а тут он скатился почти до плинтуса - футера сайта. Многие осуждающе качали головами и говорили - негоже, негоже так поступать с нашим символом. И дизайнеры со стилусами наперевес - появились.

Помимо этого, проведено много других работ по доработке дизайна, и вы можете посмотреть на новую версию по адресу design.aftershock.news, в "шапке" сайта (верхней панели), которая окончательно была спроектирована руками камрада дизайнера asim, нашли отражение обсуждавшиеся идеи, в развитии которых принимали активное участие Poligraf, ДК.

Хотите принять участие в доводке проекта до релиза (до момента, когда проект появится на домене aftershock.news) - просто зайдите на design.aftershock.news и начните пользоваться, как обычным Афтершоком. О замеченных багах просьба сообщать в комментарии к этой статье. Их останется меньше к моменту релиза.

Под катом - детали того, что сделано, а что планируется сделать позже, чтобы сайт стал ещё удобнее.

В конце июля уже было обновление сайта, основным автором и исполнителем которого был давний участник сайта Великий Кукурузо, веб-разработчик по специальности. Он сделал замену устаревших стилей CSS для оформления, ввёл 2 варианта цветового оформления темы сайта - светлую и тёмную, написал и использовал скрипты (Javascript) для поддержки мобильных телефонов. За последние годы существования сайта это - большой шаг вперёд, сделанный всего за 2 месяца. Перед этим у него была известная разработка юзерстилей сайта с тёмным оформлением (стили CSS, размещаемые не на сайте, а в браузерном расширении), что помогло сделать эту работу.

В то же время, за такой короткий период нельзя было решить многочисленные и сложные задачи сайта, часть которых остались нерешёнными и сейчас. Я принимал участие в разработке той первой версии в основном как тестировщик предварительных результатов. По окончании разработки в июле мы решили развить успех и продолжить внедрять улучшения и исправления на сайте. Кроме технических доработок, была задача оформить дизайн, прежде всего, верхней части сайта, "шапки", по которой встречают содержание новые посетители.

В статье про шапку, Георгия и дизайн Алекс выбрал камрада asim как исполнителя дизайна верхней части. Остальная часть, кроме технических доработок, была поправлена моим (atorn) скромным вкладом, хотя профессионально дизайном я никогда не занимался, и часть советов по оформлению я получил от asim, а строгую и неподкупную приёмку осуществлял Алекс. Все участники работали на добровольной основе в свободное время, поэтому работа не была столь быстрой, как это бы делали нанятые профессионалы. Интерес у каждого был - сделать посещаемый нами сайт таким удобным, как это представлялось в наших мечтах, юзер-стилях и дизайн-макетах.

Итак, есть некоторые доработки сайта за прошедшие 3 месяца, которые опубликованы для тестирования на design.aftershock.news и через какие-то дни или недели, если не будет критических замечаний, появятся на рабочем сайте aftershock.news.

Есть и достаточно продолжительные планы на 2-4 месяца, чтобы в этом же неспешном режиме расправиться с остальными известными недостатками сайта. По ним я планировал к релизу новой версии сделать отдельную статью, чтобы потом на неё ссылаться и там собирать отзывы и предложения. Но кое-что упомяну и здесь, чтобы показать, что озвученные ранее проблемы не забыты и в планах сохраняются.

Какие новые функции и достижения сделаны в этой доработке?

Есть длинный и скучный рабочий документ, где, в основном, перечислены эти функции и достижения. Он - для будущих разработчиков, поэтому всё описано в суховатом насыщенном стиле. Чтобы было интереснее читать, вытащу из него самое значительное - в текст, а остальное - под спойлер.

• Зум (увеличение масштаба) страницы - особенно полезен для мобильных устройств. В новых мобильных браузерах обычно уже есть 2 автоматических режима просмотра страниц: мобильный режим с искусственно уменьшенной шириной окна в 4-5 раз, чтобы шрифт был читаемым с экрана, и "десктопный режим", ещё называемый в настройках браузера, "как на ПК". Там шрифт мелкий - вот для этих целей используется "Зум", чтобы стилем CSS zoom увеличить масштаб от 100% до 280%. (Браузер Firefox этой функции не имеет.)

• Тема оформления - основное, с чего началась работа по настройкам. Есть 2 основные темы: светлая и тёмная, названные как "День" и "Ночь". Одна из них выбирается и по настройке "ОС" - в соответствии с системными настройками операционной системы ПК или смартфона.

• Кроме названных 3 основных настроек для экспериментов, дальнейшей доработки и по пожеланиям пользователей иметь менее контрастные темы, созданы (для начала) также темы "Рассвет", "Песок", "Море".

• Второе основное, для чего были задуманы настройки - выбор шрифта. На самом деле, достаточно одного шрифта или максимум 2-3, но для интереса добавлены ещё ряд шрифтов разного рода (рубленые, с засечками, моноширинные), которые можно попробовать для чтения. Всего - 11 вариантов интересных и читабельных шрифтов. Часть из них (7) - загружается с сервера (веб-шрифты), поэтому одинаково будут выглядеть на разных устройствах. Остальные - подбираются на локальных ПК из имеющихся из нескольких вариантов (конкретный приоритет выбора легко можно увидеть в DevTools браузера, но это - скорее, для интересующихся темой и специалистов, а для всех - достаточно просто названия и того, как будут выглядеть тексты со шрифтом этого названия.

Исторически оставлен привычный Arial, но более качественно выполнен Roboto (веб-шрифт), он используется для сайта по умолчанию.

• Размер шрифта - кроме "Зума", масштаб текстов изменяется размером шрифта. Полезно владельцам крупных или мелких мониторов. Картинки и размеры колонок этой настройкой не меняются, поэтому результат может оказаться более качественным.

• Детальность настроек. 3 градации,. Чтобы новым пользователям в настройках не вываливать сразу десятки пунктов, подробность разделена на 3 градации: базовые настройки, расширенные и "для экспертов". В последней добавляется небольшое число тестовых и экспериментальных функций. Некоторые даже не доработаны, но нужны для тестирования на телефонах. Поэтому спрятаны туда. Можно раскрыть все и познакомиться с подсказками, которые появляются в списке по наведению мыши.

Есть и такие экэотические (были просьбы сделать), как скрытие шапки сайта. То есть, красота оформления, на которую мы лишний месяц потратили, некоторым пользователям не нужна, они хотят голую правду, информацию из статей, без Георгия в голове. И они её получат, в таком урезанном и извращённом виде.

Ознакомившись с тем, что хорошего можно настроить под себя, вы затем один раз настраиваете браузер, и какое-то время настройки будут не нужны - браузер их запомнит. Если установили новую ОС или новый браузер - придётся снова один раз что-то настроить (или импортировать из настроенного) и пользоваться.

Если нужно скопировать настройки в разные браузеры, в настройках есть функция экспорта-импорта. Сначала их экспортируют (в текст), получают примерно в таком виде:

{"_d":"Fri Oct 23 2020 10:37:34 GMT+0300 (Москва, стандартное время)", "themeLastLight": "light", "themeLastDark": "sea", "font": "Segoe", "settDetail": "expert", "toTop": "no", "hideReformal": "hide"}

, а в другой браузер - импортируют. Через секунду они уже применяются к странице и всем вкладкам сайта.

Другие настройки и функции (под спойлером)

Что ещё не сделано и планируется в следующих доработках?

• В редакторе - в поле ввода комментариев и статей - ещё не исправлена "багофича" от разработчиков редактора, про которую они уверяют пользователей, что не показывать нативное контекстное меню по клику правой кнопки мыши - это хорошо. У них даже плагина нет, который это отменяет, придётся делать патч.
• попробуем сделать так, чтобы ответ на комментарий не требовал вызова промежуточной страницы без текста статьи.
• будет настройка, включающая "более воздушный" режим показа, когда между колонками - больше пустого пространства.
• поборемся с багами несохранения частично набранного текста статьи.
• могут появиться режимы (по настройкам) более компактного отображения частей сайта - малые аватары, компактное упоминание подписей администрации, сжатый дизайн комментариев (меньше пустоты вокруг).
• * прямая связь с астралом - не, это уже есть
• * темы оформления "Розовый пони" и "Хакерская консоль"

Задачи для доработоу черпаются из предложений, которые пишут пользователи в комментариях к статьям на АШ на технческие темы оформления сайта (как эта). Полный список задач и планов их выполнения будет опубликован в отдельной статье.

По запуску функций в экзотических средах типа WinMobile

Бывают запросы и на такие работы - в основном - исправить баг, чтобы на каком-то старом устройстве это вообще заработало. Владельцам таких устройств при появлении проблем - просьба связаться со мной напрямую по ЛС или для начала - здесь в комментарии. Наличие у вас такого устройства для тестирования может помочь за несколько шагов решить какую-нибудь проблему (читал, что такая была с новым дизайном и старым устройством в каком-то месте интерфейса).

Просим принять участие в тестировании и использовании сайта на адресе

design.aftershock.news,

чтобы к моменту релиза на нём осталось меньше недоработок! И, может быть, возникнут другие идеи по новым функциям или особые пожелания.

AfterShock • Каким будет завтра?