Техническое: анонс нового дизайна aftershock.news (2020-10)

Аватар пользователя atorn

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

Помимо этого, проведено много других работ по доработке дизайна, и вы можете посмотреть на новую версию по адресу 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"}

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

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

 
Настройки и функции АШ, 2020-10


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

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

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

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

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

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

design.aftershock.news,

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

Авторство: 
Авторская работа / переводика

Комментарии

Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

Почему мужик на лошади топчет беременную змейку? За гаражами.

А за кнопки под редактором - спасибо.

Скрытый комментарий МысльВслух (c обсуждением)
Аватар пользователя МысльВслух
МысльВслух(4 года 10 месяцев)

старинная русская традиция

Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

Месье знаток русских традиций?

 

Аватар пользователя МысльВслух
МысльВслух(4 года 10 месяцев)

о то ж

Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

Пишется слитно.

Знаток.

 

Аватар пользователя МысльВслух
МысльВслух(4 года 10 месяцев)

занем, у вас в англиях все слитно

Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

???

Аватар пользователя mastak
mastak(11 лет 3 месяца)

Раз не знаешь отечественных традиций, чего удивляешься ?

Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

английских?

Аватар пользователя МысльВслух
МысльВслух(4 года 10 месяцев)

какой был флаг, туда и ответил smile23.gif

Аватар пользователя v.p.
v.p.(11 лет 6 месяцев)

потому что может, очевидно же. 

Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

Логично.

Аватар пользователя v.p.
v.p.(11 лет 6 месяцев)

.

Скрытый комментарий Grib_ok (c обсуждением)
Аватар пользователя Grib_ok
Grib_ok(8 лет 9 месяцев)

Аватар пользователя Остап
Остап(9 лет 1 месяц)

Это сам Собянин!

Комментарий администрации:  
*** Уличен в сочинениях, что рубли печатают с той же скоростью, что баксы ***
Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

Не, не похож:

 

 

Аватар пользователя Mc_Aaron
Mc_Aaron(9 лет 1 месяц)

Говно дегенерата. Нормальноье говно золотисто желтое, а это черно-красное. Словно дегенерат не срал пять дней, поэтому покакал с кровью черненьким,

 

Аватар пользователя Гуманитарный погром

Хорошо, что не на яйцеглист.smile3.gif

Аватар пользователя Omni
Omni(11 лет 7 месяцев)

Это с другой стороны захваченного объёма внешней среды делается, но сию традицию сажания на кол похоронили в средневековье.

Аватар пользователя Mc_Aaron
Mc_Aaron(9 лет 1 месяц)

В ту ли сторону всадник скачет?

Аватар пользователя Omni
Omni(11 лет 7 месяцев)

Это хороший вопрос, для нас трактовка последовательностей слева-направо, а когда обратно рисуют - это семиты и арабы всякие.

Аватар пользователя Биткоган
Биткоган(4 года 2 месяца)

Я вижу Германа Львовича Стерлигова, который приехал в город на красном коне подрывать электричество. По приказу масонов слева.

Шапка стала еще бредовей 

Комментарий администрации:  
*** Отключен (систематический флуд, срач, оскорбления) ***
Аватар пользователя Postulat
Postulat(7 лет 11 месяцев)

Почему мужик на лошади топчет беременную змейку?

Это Георгий Победоносец берет у змея мазок на COVID-19.

Аватар пользователя Андракс
Андракс(7 лет 3 месяца)

Почему мужик на лошади топчет беременную змейку? За гаражами.

У меня тож такой вопрос... Как-то получается, что красный силует сносит промышленность на заднем плане (они одного черного цвета)...  Можно было и без этого символа обойтись и АШ вписать в заводские постройки (слева/справа по центру).  

Хотя... сейчас деиндустриализация с очковтирательными технологиями рулит, может и правильно красный силует экономику мочит....

Комментарий администрации:  
*** отключен (гнилой хайпожор) ***
Аватар пользователя КришнасВами

Она беременная новым мировым порядком. Акушер Жора помогает ей успешно разрешиться от бремени.

Аватар пользователя Visit0r
Visit0r(7 лет 1 месяц)

Акушер Жора помогает ей успешно разрешиться от бремени.

 

Не все так однозначно. Акушер Жора смахивает на силуэт красной крысы в профиль с разными ушами... Конь в этом случае становится членистоногим подранком. Мутант какой то...

Аватар пользователя Grib_ok
Grib_ok(8 лет 9 месяцев)

На новом адресе слова в заголовках уходят за границу экрана.

Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

не видел этого у себя

а что за браузер и устройство?

Аватар пользователя eprst
eprst(11 лет 11 месяцев)

Не масштабируется в "Комментарии пользователя", текст уходит за край страницы. Опера.

На Главной, Пульсе и Блоги та же история - текст уходит за край. Внутри темы - нормально масштабируется.

Аватар пользователя atorn
atorn(6 лет 1 месяц)

Насколько текуст уходит? Можно скриншот? И при какой ширине экрана?

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

Аватар пользователя eprst
eprst(11 лет 11 месяцев)

Ноутбук, Опера. Текст комментария умещается только при 80%, при увеличении масштаба текст уходит за край

Аватар пользователя atorn
atorn(6 лет 1 месяц)

В Опере ни разу не тестировал, считая что она - как тот же Хром. Видимо, есть какие-то особенности, спасибо, посмотрю. А так, в группе Хром-Firefoх и периодически Edge и IE11, в основном, шло тестирование.

Аватар пользователя eprst
eprst(11 лет 11 месяцев)

Проверил сейчас в Firefox, Vivaldi, Chromium. Не масштабируется именно в Комментариях пользователя, в остальных местах - нормально. ОС Ubuntu 18.04

Аватар пользователя atorn
atorn(6 лет 1 месяц)

Спасибо, посмотрю их вёрстку отдельно.

Аватар пользователя Grib_ok
Grib_ok(8 лет 9 месяцев)

Хром, редми нот 8 про

Аватар пользователя atorn
atorn(6 лет 1 месяц)

А это всё с настройкой Зума? В версиях Андроида 8-9 он практически не требуется, и имеются 2 режима (на Xiaomi, Huawei): основной мобильный с собственным зумом и хорошим вписыванием в границы, и "режим ПК" с очень мелким масштабом, без эвристик подбора собственного масштаба. Вот для тех Андроидов и Хромов, где эвристики недоработаны или их вообще нет - ввёл настройку Zoom, чтобы хотя бы как-то читабельно всё было с нормальной прокруткой.

Понятно, что по-хорошему надо делать долгую мобильную вёрстку под узкие экраны, но нет у сайта и проекта специальных разработчиков для этого. А на Зум затрачено пара дней настроек и получена возможность смотреть лучше, чем без него. Не случайно он засунут подальше в "Зксперт-режим". И посмотрите не через мобильник - там есть подсказки об этом. А сверху Настроек - лишь потому, что если поставить сразу большой Зум - после этого до него можно не добраться, будет внизу за пределами экрана. Так что это капризная и вынужденная настройка для мобильников, не имеющих собственных средств настройки.

Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

ага, спасибо всем принявшим участие в этом релизе, и особенно atorn-у, asim-у и Великому Кукурузо!

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

 

Аватар пользователя Остап
Остап(9 лет 1 месяц)

И если бы можно было заодно исправить мобильный редактор комментариев... на андроиде просто мучение.

Комментарий администрации:  
*** Уличен в сочинениях, что рубли печатают с той же скоростью, что баксы ***
Аватар пользователя atorn
atorn(6 лет 1 месяц)

Это будет немного позже. Решение уже есть, с августа, но этот релиз держал с оформлением всего.

Аватар пользователя Остап
Остап(9 лет 1 месяц)

Последние пару дней андроидный редактор работает как часы, спасибо большое!


[После предыдущего обновления стал немного странный алгоритм вставки текста, когда на "вставить" выпрыгивает еще одно окно, где надо опять делать "вставить", и где ничего не появляется, но работает, но это уже мелочь]

Комментарий администрации:  
*** Уличен в сочинениях, что рубли печатают с той же скоростью, что баксы ***
Аватар пользователя Breber
Breber(3 года 9 месяцев)

А проблема невозможности выделения своего текста при написании коментария как-то решится? Или это только я один страдаю, если надо комментарий перестрктурировать? 

Аватар пользователя Wasp
Wasp(12 лет 1 месяц)

За большие кнопки «сохранить» и «предпросмотр» - памятник в граните!

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

Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

ободок стаж показывает, сразу визуально можешь старичков от новичков отличить.  а если мышкой навести даст точный стаж

Аватар пользователя Evg_Ban
Evg_Ban(11 лет 7 месяцев)

Можно прикрутить популярометр? Желтую полоску подчеркивания под ником.

Чаще в Лидерах толще хвост длиннее линия.

Аватар пользователя Wasp
Wasp(12 лет 1 месяц)

Жалко, что на айпаде мышки нет… будет неудобно

Аватар пользователя atorn
atorn(6 лет 1 месяц)

Постепенно доделаем доступ мобильников к подсказкам, проблемы в отутствии mouseover понимаем.

Аватар пользователя Wasp
Wasp(12 лет 1 месяц)

Красавчик, чо

Аватар пользователя Ярик FantomI
Ярик FantomI(8 лет 7 месяцев)

Чудненько, но не на мобильном...

Ваще, чистота поля приятно удивила.)) Может я и зануда, но стаж в цифрах для меня имеет прямо-таки сакральное значение.. к примеру я пришел и зарегился после переворота на Украине, точка отсчёта в поисках истины такскать. С этого угла зрения оцениваю и остальных, у каждого свои мотивации соответственно... Удачи.smile440.gif

 

Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

Как раз на узком мобильном этот режим (стаж дугой) особенно полезен, так как сокращает длину служебной строки.  Впрочем по кнопке настройки (щестеренка в углу), можете этот режим отключить:

fbe2af8e2011deb8d1173948ab899f58.png

Аватар пользователя Arkan
Arkan(11 лет 1 месяц)

стаж в цифрах для меня имеет прямо-​таки сакральное значение..

Аналогично. Но нашел как это сделать назад и успокоился.

Страницы