Новый dyranov.ru

Этот сайт появился в 2008 году. Я переехал сюда из ЖЖ, в который переехал с narod.ru. 10 лет сайт выглядел так:

dyranov.jpg

В 2015 я решил перевести сайт с Вордпресса на MODX и выложить здесь своё портфолио.. Ну долго ли сделать блог? Перенос занял 3 года. Почему? Ну хочется же сделать идеально! Это же сайт дизайнера — он должен быть идеальным!

Сначала я заморочился по поводу переноса контента с вордпресса. Сам сайт я сделал достаточно быстро, но потом подумал, что надо бы упростить админку. Так появились плагин для TynyMCE, а потом и пакет Content Editor Tools для MODX. Там новый текствый редактор, модуль для загрузки фоток и даже тема для админки.

Естественно, свой сайт — задача не приоритетная, поэтому делался он в свободное от основной работы время. И от основных развлечений. То есть сильно эпизодически.

Когда сайт был более-менее готов, я посмотрел на него и мне не понравилось. Всё уже как-то устарело. «Нууу, такоее... » Вот тут, и там можно сделать лучше. Я переделал. А потом выяснилось, что можно перенести данные из вордпресса полнее. А потом я переделал всё ещё раз. Конечно, делал эпизодически. Задача-то ВООБЩЕ не приоритетная.

Иногда у меня появлялось желание написать что-то в блог, но не писать же в старый — новый почти готов. Почти, но не совсем. Сколько постов потерялось по пути...

В новогодние каникулы 2018-го я решил, что «хватит это терпеть» ©. Сел и начал херачить. Херачил так, что спину надорвал (я пытаюсь сделать лимонад из этого лимона, но об этом в другой раз). И опять не обошлось без «вот эту вот фичу надо обязательно сделать». И я сделал свой текстовый редактор в комментариях (он называется edtr и я о нём ещё расскажу, и дам скачать).

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

Я делаю сайты с 2001 года (это за деньги, для себя раньше). С 2006 я делаю сайты на MODX. Я прекрасно понимаю, что очень часто нельзя сделать сразу всё идеально. Что процесс улучшения бесконечен. Знаю, что такое работа итерациями, метод прогрессивного джипега и вот это вот всё. Но всё-равно попал в эту ловушку. Ну как же? Это же САЙТ ДИЗАЙНЕРА.

Мне очень хочется улучшить и ещё упростить авторизацию. Подробнее расписать некоторые проекты. Переоформить некоторые посты в блоге. Сделать главную страницу поинтереснее. Написать свой правильный модуль для тегов. Допилить, наконец, Content Editor Tools (ещё один «неприоритетный» проект). Сделать свой интерфейс добавления постов. Написать свою CMS...

Но перфекционизм мешает двигаться вперёд. В работе над другими сайтами избавится от перфекционизма помогают другие заказчики — они не будут ждать. Со своими проетками такое не работает. Но до меня наконец дошло, что нужно относиться к ним как к проектам со сроками. Я поставил себе срок до 24 матра. И вот новая версия dyranov.ru. Такая как есть. Она будет допиливаться, но не сейчас.

12 января 2018 Темы: Дизайн Lytdybr
1 комментарий

Чекбоксы в фильтрах

Фильтр на сайте по умолчанию обычно выключен. Ничего не фильтруется. И только когда пользователь сужает параметры фильтра, выбрав, например, только телефоны с 4 Гб оперативки, фильтр становится активным.

checkbox_defoult_on0.pngТеперь нам должны отобразиться телефоны с 4 Гб оперативки, но внутренняя память и слот для карты не выбранны вообще — все варианты выключены. А если все варианты выключены, то результат должен быть нулевой. Ну то есть нам должны отобразиться все телефоны с 4 Гб оперативки, но вообще без встроенной памяти и без слота. Это немножко взрывает мозг, но ведь именно это нам и показывается.

Покаызвать все варианты, когда должен возвращаться ноль — это какая-то логика программиста.

Читать дальше ↓
12 января 2018 Темы: Дизайн
3 комментария

Используте (хэш)теги правильно!

Куча народу не понимает что такое теги (хештеги) и как ими пользоваться. Все видели такое в соцсетях.

Тег — элемент навигации. Ссылка, нажатие на которую открывает список элементов, помеченных этим тегом: постов в блоге, фоток в инстаграме. Для того, чтобы тег работал, он должен быть присвоен хотя бы двум элементам. Нет никакого смысла в теге, нажатие на который отобразит вам только тот элемент, на котором вы на этот тег нажали.

Отличие тега от хештега в том, что первый отображает посты автора, помеченные этим тегом (в блогах, в ЖЖ), а второй отображает все посты в соцсети. Хэштег так называется потому что начинается с символа «hash» — #.

Если у вас в инстаграме 1 фотка с тегом #ЛучшийОтпускСветыПердушкиной, то нажатие на этот тег отобразит вам только эту самую фотку. Если где то в инстаграме существует ещё один человек, который пометил свою фотку так же, тогда разультатов будет уже два. Но это маловероятно. И поэтому бессмысленно.

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

В блогах та же проблема. Люди ставят кучу тегов со всем, что упомяналось в статье. Я сам так делал. Ну вдруг я когда-нибудь снова напишу что-то о разрешении 720i?

Тег, присвоенный единственному элементу не выполняет свою функцию и отображаться не должен.

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

Ещё одна проблема, когда забываешь под каким тегом ты пишешь на какую-то тему.

Список из самых популярных тегов должен отображаться на странице ленты. Не надо прятать элементы навигаци.

Тут ещё вопрос как отобразить этот список тегов. Раньше были популярны «Облака» — теги по алфавиту, и частоиспользуемые крупнее. Из-за прыгающего шрифта читать такое не очень удобно. Облако даёт ответ на вопрос: «о чём чаще пишет автор», но второстепенные темы пропадают из виду.

Но на самом деле проблема тут возникает только в том, случае, когда тегов много. Если на вашем сайте используется 10 тегов — отображайте как хотите: хоть по популярности, хоть по алфавиту.

Если материалов много, они разные и нужно много тегов, тогда стоит делать жёсткие иерархические струкуры или какие-то вложенные теги:

  • Графдизайн
    • Айдентика
    • Вёрстка
    • Иллюстрации
    • Типографика
    • Шрифты
    • ...
  • Программирование
    • С
    • С#
    • С++
    • Java
    • Javascript
    • ...

Список тегов должен быть коротким или структурированным.

И проблема, уже совсем техническая, когда «Дизайн» и «дизайн» считаются двумя разыми тегами.

При заполненни тегов должна работать автоподстановка.

12 января 2018 Темы: Дизайн
Оставить комментарий

Кат, подкат и перекат

Сейчас куча блогеров перестала использовать кат (или подкат) — скрытие части поста под ссылкой. Раньше спрятать часть длинного поста было нормой и проявлением заботы: если вам это не интересно, листайте дальше. Отказ от подката мотвируется так:

— Я же старался, писал, душу в этот текст вложил, а вы его проматываете и не читаете!

— Вы подписались на мой блог, значит я вам интересен. Зачем вам нажимать на лишнюю ссылку?

Любишь подкат? Иди на#%$.
Артемий Лебедев

Лишние ссылки — это не только лишнее действие от пользователя, но ешё и время на загрузку отдельной страницы. Но блогеры часто пишут на совершенно разные темы. И если ваши мысли по поводу дизайна мне интересны, то смотреть 40 фоточек из последней поездки я не хочу. Тем более если я на каком-нибудь лимитированном мобильном интернете.

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

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

Стоит ли открывать остаток статьи прямо в ленте или переходить на отдельную страницу? Если можете подгружать остаток статьи только при раскрытии, чтоб вся лента не грузилась слишком долго. И если комментарии в вашем блоге не главное.

В отсутствие ката удобна кнопка, позволяющая перемотать ленту к следующей статье. Получается эээмм… «перекат»? :)

Используйте кат, но не увлекайтесь. Он нужен когда статья действительно большая. Нет смысла прятать под кат одну единственную фотку. И две. И три. Только если у вас куча фото/видео портянка текста на три листа А4.

12 января 2018 Темы: Дизайн
Оставить комментарий

Материалы для смартфонов

По-моему лучший материал для корпуса смартфона — пластик. Давайте сравним.

Металл выглядит хорошо, но он не проводит радиоволны. То есть беспроводная зарядка не получится. Да и с антенами на корпусе нужно заморачиваться. Помните проблему с iPhone 4? Он хорошо проводит тепло. Приятно холодит руку, но промерзает зимой (что плохо для аккумулятора), и жарит при нагрузке. Кажется, что металл прочный, но он мнётся и следы от падения уже не исправить.

Стекло. Это может быть хоть Горилла Глас 10, но оно всё-равно бьётся. А во многих современных смартфонах замена заднего стекла дороже замены экрана. И как на зло стекло скользкое.

30030164b.jpg

iPhone X. При цене телефона в 80 000 ₽, замена дисплея — $279 (16 000 ₽), замена задней панели — $549 (31 000 ₽).

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

Почему пластик сейчас не пользуется популярностью? Он «недостаточно премиальный». Я слышал мнение, что какой-то телефон вообще не стоит рассматривать потому что он пластиковый. Хотя пластик бывает разный. Он может выглядеть не хуже стекла. Пластик софт-тач приятен на ощупь. Но нет.

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

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

Пластик существует в куче различных вариантов. Некоторые виды лекго царапаются. С некоторых облазит краска. Но есть и такие, что не уступают стеклу и металлу.

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

К чему я это? Я не призываю покупать исключительно пластиковые смартфоны. Но не навешивайте ярлыки. 3-й айФон был пластиковым и ни кто не считал его бюджетным.

Ножницы на верёвочке

Вот ножницы на верёвочке.

Cd6ynGdUAAEClOS.jpg

Есть варианты с ножом, и прочее подобное. И люди смеются: «привязали чтоб не украли, дураки! Этими же ножницами можно верёвку перерезать». Кстати, у этой картинки куча ретвитов и комментариев, где обсуждаются умственные способности сотрудников почты, на которой фотка сделана.

Привязывают, не чтоб не украли. Привязывают, чтоб не забрали случайно. Каждому курильщику знакома ситуция, когда ты дал прикурить другому и остался без зажигалки, потому что тот, неосознанно, сунул её себе в карман. Для борьбы с этим бессознательным привязываются ручки и прочие предметы. Кому нужны эти старые ножницы? Но человек может забрать их неосознанно. Или просто уйти с ними в другое место и забыть их там — придётся искать где он их оставил.

Есть подозрение, что в попытках «обучить дураков» не одни такие ножницы были отрезаны от верёвки и действительно украдены. Типа, вы, идиоты, привязали, чтоб не украли, а вот я украл. В следующий раз привязывайте на цепь.

Ножницы на верёвочке — хорошая иллюстрация поспешных выводов. Кроме того, это иллюстрация оценки дизайна без понимания задчи, стоящей перед дизайнером.

12 января 2018 Темы: Дизайн
Оставить комментарий

Обновление ПО

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

А вот ролик, наглядно демонстрирующий все прелести обновления в windows 10:

Это, конечно, за гранью.

Но самое ужасное, что, судя по всему, это становится нормой. Не только windows 10 может вас достать (хотя она в этом преуспела больше остальных). В моём списке занудных дятлов есть драйвера от nVidia, Steam, и (дожили!) Apple. На Маке ещё куда ни шло. Выскакивает сообщение где-то там сбоку. Хотя тоже его в один клик не уберёшь. Но на телефоне, это уже что-то близкое к занудству Винды. Окно с сообщением об обновлении блокирует экран и закрывается только со второго нажатия на «Отвали». Я начинаю ненавидеть апдейты.

IMG_1611.jpg

А ведь казалось бы — вот браузеры...

О дизайнерских задачах

В идеальном мире дизайнер создаёт шедевры — один лучше другого и каждая его работа умна, уникальна, свежа и получает red dot design award. В реальном мире дизайнер решает задачи. И часто часть задачи звучит как «нужно вчера», «у нас нет таких денег», и «чтоб понравилось моему коту». Эти слова обычно печалят дизайнера. Особенно, если он уже настроился на red dot design award. Однако, если дизайнер считает своей основной деятельностью решение задач клиента, то он постарается сделать что просят, да ещё и так чтоб «перед пацанами не стыдно».

«Нужно вчера», «у нас нет таких денег», и «чтоб понравилось моему коту» — это ещё одна часть задачи, которую нужно решить. Иногда, это может сделать задау ещё интереснее, а дизайнера, соответственно, счастливее.

12 января 2018 Темы: Дизайн
Оставить комментарий

Отображение тикета в админке

Появилась бы отдельностоящая версия TicketComments, чтоб можно было бы просто комментарии цеплять к обычным ресурсам (или товарам) — было бы мне счастье. Но пока так. И в том виде, в котором сейчас существует Tickets меня напрягает одна вещь — то как тикеты отображаются в админке.

Поле с контентом становится очень узким, чтоб в правой части экрана отобразись дополнительные поля. Та же история в Articles, кстати. Зачем оно так мне совершенно не понятно. Поэтому я залез своими грязными лапами в файлик ticket.common.js (/assets/components/tickets/js/mgr/ticket/), чтоб сделать тикеты внешне похожими на обычные ресурсы modx.

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

Собственно, вот мой ticket.common.js.

Изначально опубликовано на mod.pro.

MODX Articles

Решил, наконец-то, перевести этот сайт на MODX.

Что предлагает MODX для блогов? Есть такой модуль (плагин, экста?) Articles. Как раз предназначен для ведения блога. Там импорт, комментарии, посты удобно объединяются в дереве ресурсов. Вроде как всё ок. НО!

Вот стандартный ресурс в MODX. Зелёное — полезная область, куда вбивается контент, красное — левые поля для настроки параметорв ресурса, которые нужны далеко не всегда.

articles1-650

А вот модуль ДЛЯ ВЕДЕНИЯ БЛОГА Articles.

articles2-650

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

А вот Вордпресс 4.1

wp41

 

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

12 января 2018 Темы: MODX Дизайн
2 комментария