LINUX.ORG.RU

Сообщения Xant1k

 

Текст который ослепляет

https://i.imgur.com/yeVMqQo.png Ну и долго я это буду видеть? Как ваще можно написать код и не посмотреть его результат? Убожество.

 ,

Xant1k ()

true design

Ну что, погоняем современный дизайн сайтов?)

Вступление

Решение поделится своими мыслями появилось задолго до появления этих двух статей Почему сайты свободного софта зачастую такое УГ? и Накидайте примеров хорошего дизайна которые кстати ещё больше подтолкнули к публикации материала.

Последние пару лет меня стали раздражать большинство посещаемых сайтов. Чуть ли не каждый 2-й копирует один и тот же шаблон. Вот посмотрите https://windowstips.ru/, http://chto-takoe.net/, https://losst.ru/. Подобные сайты скорее всего сделаны на Wordpress или Drupal и содержатся каким-нибудь васей с searchengines, гордо называющий себя вебмастером.

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

Немного о ужасах дизайна или как не надо делать

Подавляющие большинство информационных сайтов в сети выглядит так:

  1. https://i.imgur.com/Ca3RmAa.png
  2. https://i.imgur.com/oFb7MQu.png
  3. https://i.imgur.com/xJoZcDS.png
  4. https://i.imgur.com/9JHsD5d.png
  5. https://i.imgur.com/SaPHXIy.png
  6. https://i.imgur.com/DJdlhCU.png
  7. https://vgy.me/yP0LAh.png
  8. https://vgy.me/kMCCs6.png
  9. https://vgy.me/BCmy0M.png
  10. https://vgy.me/7YyJrd.png

Понятно что используется популярный wordpress или drupal шаблон. В нём «дизайнер» почему-то посчитал что раз мне нужно уместить в одном блоке статью и список допустим схожих статей, то визуально разделять их не надо (см. 1 и 2-й скриншот). Другой недостаток — куча свободного пространства (см. 1 и 3-й скриншот). А вот как в одном блоке разделили визуально https://i.imgur.com/G1E637L.png, https://i.imgur.com/EnQh8mh.png, https://i.imgur.com/9ZvUzrP.png, но тоже так себе. Здесь — лучше.

Как надо (но это не точно):

  1. https://i.imgur.com/MVXOBMT.png
  2. https://i.imgur.com/SwIJBM7.png
  3. https://i.imgur.com/9WPZw6j.png
  4. https://i.imgur.com/LIdjFAH.png
  5. https://i.imgur.com/X9H563q.png
  6. https://i.imgur.com/Mt5wihy.png
  7. https://i.imgur.com/vdFt1a2.png
  8. https://i.imgur.com/eGt9Kq1.png
  9. https://i.imgur.com/BoC6n0v.png

На скриншотах хорошая компоновка: основной блок с текстом отделён от дополнительных. Между доп. блоками есть пространство, либо же если доп. блок один внутри применяется разделяющая черта.

Ошибки

1) Отвлекающий фон
Баю-баюшки-баю засыпаю на краю https://pleroma.social/
Но иногда он бывает так сказать «в тему». Увы, хороших примеров не вспомнил/не нашёл.

2) Банеры или картинки на пол экрана
Нееееет. Запомните, картинка должна отражать смысл статьи или итоговый результат.
Вот баба одна сделала сайт (https://veerle.duoh.com/design/create-a-cubical-pattern-in-adobe-illustrator#0). Картинка над статьёй=итоговый результат урока, но всё равно «убивает». Решать вам.

Другой вариант (https://i.imgur.com/5jslkEv.png)
Поймите, черти, уже наконец что людям нафиг не нужна ваша картинка молотка в теме «создаём сайт с помощью ксс и бутстрап». Повторюсь: подбирайте картинки соответствующие статье.

3) Лепка
https://i.imgur.com/iHr8OBf.jpg
Прекратите лепить всё подряд и друг за другом. Пользователь теряется.

4) Тени
https://i.imgur.com/BrBNV8L.png
Зачем?

5) В табло
https://i.imgur.com/XIqCyXk.png, https://vgy.me/rKvBRw.png
Чего б#&$-? Неужели так сложно сделать как в ворде?)

6) Подчёркивания
https://i.imgur.com/nlpfF0y.png
Как мы видим буква Д в начале названия заголовка не подчёркнута. Другой неудачный пример https://i.imgur.com/pdmQWsL.png иллюстрирует как низ буквы Щ почти сливается с подчёркиванием. Так или так — лучше.
Статья по теме: https://css-tricks.com/styling-underlines-web/

7) Нумерация строк
Надо/нет? И что ставить после числа: ничего, точку, двоеточие или провести вертикальную линию?

8) Выделение кода
Почти всегда блоки с кодом подсвечивают каким-нибудь фоном и оборачивают в рамку https://i.imgur.com/p7cEmqG.png, https://vgy.me/I1kg6v.png, https://i.imgur.com/1iqpbCZ.png, https://i.imgur.com/pAzlurI.png
Особенно уродско выглядит когда во всю ширину блок. Хватит. В 99% случаев не в тему так сказать.

Выделение более-менее смотрится на старом дизайне css-tricks, но всё равно «перебивает» и заголовок и основной текст.

Другой момент — появившийся горизонтальный скролл. Представьте, что у вас подряд 15 блоков и там этот скролл. Мне такое недавно глаза вырезало.
Иногда встречал, что такие полоски появляются/всплывают когда на блок наводишь, как вам такой ход?

А ещё меня бесит вот такое выделение. Неужели нельзя применить моноширинный шрифт?

9) Перенос текста
https://i.imgur.com/G5KPWmb.png
Без комментариев.

10) Плавающий текст
Должны ли мы располагать текст в пространстве никак не выделяя его (как на medium, например)? Пример: https://i.imgur.com/cJIKFl1.png
Или может стоит поместить внутрь блока, как тут?

11) Меню
a) Не помеченный значок увеличивает когнитивную нагрузку (https://i.imgur.com/Aqp1ZM1.png).
Пример хорошего меню: https://i.imgur.com/UPNv1hc.png

b) На многих сайтах заметил подобное меню слева (http://window.edu.ru/catalog/pdf2txt/936/46936/23254?p_page=1#).
С одной стороны оно хорошее, с другой, когда мы его «сворачиваем» у нас блок с текстом визуально изменяется, что лично меня сильно напрягает.
Вывод: ширина блока для текста должна оставаться неизменной.

12) Уведомления
https://vgy.me/5306aT.jpg, https://i.imgur.com/wYa1NJr.png
Лично меня напрягает, что некоторые из них показываются при заходе на сайт.
Здесь на самом деле сложный момент. Во многих курсах говорят, что нужно сообщать своему зрителю о действиях - нажми там на колокольчик(на ютубе) и подпишись. Это вроде как тру, но с другой стороны может быть назойливым.

Заключение

Всё это говорит нам о том что веб-сайтам необходим дизайн-код.

Что такое дизайн-код?
Это проиллюстрированный набор правил проектирования, требований и рекомендаций. С их помощью должен регулироваться шрифт, размер и форма блоков, анимация и другое.

Надеюсь моё недовольство поможет в создании визуально-гармоничного сайта.

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

 , , ,

Xant1k ()

Github и уведомления о релизах

Как вы следите за выпуском новых версии программы X?

Вот, что получилось найти.

Для Chrome и Firefox существует расширение Release Notifier for Github. Его репозитории на гитхабе. Однако в обсуждениях (https://github.com/crimx/ext-github-release-notifier/issues/10) указывают на лимит Chrome quota storage который ограничивает число релизов за которыми можно следить до 100. Кстати, о Chrome storage quota не смог найти инфы какой объём он составляет.

Другой вариант использование веб-приложения https://releases.netlify.com/ которое хостится на Firebase(?). Такой вариант смущает безопасностью и возможным закрытием облачной платформы.

UPD: Нашёл ещё несколько решений.

  1. Telegram bot
  2. Уведомления на email: https://hubnotify.com/, https://gitpunch.com/, https://coderelease.io/, https://newreleases.io/
  3. Получаем электронное письмо о выходе релиза. self-hosted утилита для получения уведомлений на email или через push с помощью pushbullet.
  4. Отслеживаем изменения с помощью RSS
  5. Создание rss фидов для релизов всех отмеченных репозиториев.
    1. Необходимо получить список отмеченных звездой репозиториев из API GitHub: https://api.github.com/users/USERNAME/starred?page=1&per_page=100
    2. Открыть Инструменты разработчика (Web developer tools) в браузере. Выбрать pre тэг и выполнить js код во вкладке Console: JSON.parse($0.innerText).map(function(repo) { return 'https://github.com/' + repo.full_name + '/releases.atom' }).join('\n') Сгенерируется список адресов фид релизов.
    3. Скопировать список url в http://opml-gen.ovh/, сгенерировать и сохранить на диск. Если есть более 100 помеченных звездой репозиториев, нужно каждый раз увеличивать страницу в url на шаге 1.
    4. Импортировать OPML файл в rss читалку с поддержкой OPML формата.
    Способ найден здесь.
  6. Другое: https://bandito.re/

А здесь народ обсуждает и делится найденными способами.

Если вы знаете другие интересные решения - сообщите о них.

 , ,

Xant1k ()

«Погоняем» современный дизайн мессенджеров

Для тех не понял название заголовка поясняю: погонять — в смысле поругать=)

Предыстория

Хотелось пообщаться на разные темы касающиеся дизайна сайтов, обсудить какие инструменты есть, как решаются те или иные задачи. Но не найдя ни одного живого форума, пришлось смотреть в сторону чатиков внутри мессенджеров. Меня ждало большое разочарование, и не только в недостатке конструктивного общения и обоснования..., но и в дизайне интерфейса. Ради чего и создавалась тема.

Начну со..

Slack https://vgy.me/BtZnUB.png

Вычитал что развёрнут он на Java. Сразу стало понятно откуда такая резина (кончает проектировщик с именем Зина). В веб-версии настройки куда-то спрятаны, всё плывёт, скрываешь панельку справа у тебя текст расползается и читать становится неудобно. Клиент для него это всемогущий Electron. Тут и обсуждать нечего, можно выпиливаться.

Telegram https://vgy.me/SL0BZb.png

Дизайн. Его, что простите, тупая тёлка рисовала которая в детстве в классики переиграла? Вот эти блоки облегающие текст по длине, постоянно запинаешься! А непонимание основ типографики привело меня в шок. Кнопки скрытия, разворачивания и закрытия окна мелкие. Не всегда попадал по ним, приходилось целиться=)

IRC-клиенты

Например «Квас», он же Quassel https://vgy.me/qcU6a8.png Тут куда всё гармоничнее, приятнее и удобнее. А главное можно кастомизировать как угодно.

Про Jabber-клиенты добавлю позднее.

Перемещено leave из web-development

 ,

Xant1k ()

Веб-морда для сервера с древовидной структурой папок

Хочу на арендованом серваке раздавать файлы. Чтобы человечег зашёл и мог пощёлкать по папочкам с древовидным видом, ну чтобы удобнее навигация была. Попробовал Syncthing, Nextcloud и не обнаружил такой возможности. Может что ещё годного есть? FTP и HFS не хочу. Да и вряд ли там есть такая возможность.

 ,

Xant1k ()

Выбираем лучший Android эмулятор: достоинства и недостатки

Nox Player, AMIDuOS, Genymotion или может быть ваш вариант?

 ,

Xant1k ()

Отображение стран ip-адресов на карте

Ищу софт похожии на Graphical Network Monitor. Суть в следующем: Когда в софте начинается соединение с айпи-адресом (отдача или принятие данных) нужно отображать его рядом со страной на карте к которой он принадлежит. Или сойдёт отображение в колонке вида ip: flag country (название страны на русском/английском).

 , ,

Xant1k ()

«помощник» по markdown для гитхаба

Ищу что-то подобное http://i.imgur.com/BcDObd2.png Не важно - расширение, юзерскрипт или css, главное чтобы можно было выделить написанное и автоматически обернуть в тег, или же заранее вставить тег и далее добавить текст.

 , , ,

Xant1k ()

RSS подписка на новые темы