Метка «дизайн»
Работа запомнилась мне в первую очередь тем, что для нужд сайта пришлось выдумывать ряд совсем нехарактерных для движка решений. Укрощение «ВордПресса» — это весьма увлекательно.
Почему был выбран именно он? Да потому что я окончательно утвердился во мнении, что это лучшая некоммерческая система управления контентом в нашем уголке галактики (♥♥♥♥). Причем не только для блогов. Февраль текущего года.
ООО «Бухгалтерия и право»
Заказчик попросил бесхитростный сайт-визитку. Что примечательно — без лишней вебдванольщины и прочего китча. Ну так я парадигму KISS вообще крайне жалую, мне такое — как два пальца переслать.
Очень тепло отношусь к данной работе, это был отличный повод попрактиковаться в PHP (терпеть ненавижу изучать что-либо впрок). Сентябрь 2009-го.
ООО «„ГорКон“ Энергетические технологии»
Приметил сейчас на «Хабре» такой вот интересный баннер:
Пирамида «КиноПоиска»
Интенсивно напрягал мозг, вспоминая, почему же он кажется мне таким знакомым. Спиздинг — воистину народный вид спорта.
Написал вчера вечером Лебедеву на электрическую почту о найденном косячке в 83-м параграфе «Ководства». Сейчас глянул — уже всё поправили. Вот как надо работать.
Добрейшей он души человек. А ведь мог бы и бритвочкой полоснуть нахуй послать.
Сегодня утром, покупая в магазине вишневый кексик, был несказанно обрадован — тучная продавщица выдала сдачу новыми (серийными) железными червонцами. Первый раз мне подобные попались в руки. Размером меньше двушки, но больше рубля. Желтые такие.
Сразу же заметил: антиподделочная защита сделана крайне увлекательно — внутри нуля на реверсе монеты проглядывается надпись «руб» или «10» (в зависимости от угла зрения).
Кстати, один очень авторитетный старичок-доминошник с особенно могучим биополем совсем недавно проговорился мне, что через несколько лет эти десятки полностью вытеснят собой «бумажки» такого же номинала. У монет-то как-никак срок службы больше раз эдак в двадцать, а то и в тридцать. Вот такие вот дела.
Аверс унд реверс
Экранную типографику, популяризированную Артемием Лебедевым, несмотря на определенные сложности в реализации, всё чаще и чаще можно лицезреть на «продвинутых» сайтах. Здорово, когда внимание разработчиков обращено не только на рисование градиентов и «мокрых полов», но и на грамотную обработку самого контента. Ведь красивый текст даже читать приятней.
Различать тире и дефис, кавычки и знаки дюйма народ уже худо-бедно научился. Наиболее продвинутые представители оного даже «копирайт» обозначают специальным символом (зажимаем Alt и набираем на цифровом блоке клавиатуры 0, 1, 6, 9). А вот постановка пробела в определенных ситуациях для многих до сих пор неочевидна.
Вот некоторые мои соображения на этот счет:
- Символы единиц измерения (°C тоже), №, § и т. п. отбиваться от цифр должны. Мы же не пишем 500руб.? Вот и 10% писать не надо. Исключения из правила вполне логичны: слитно пишем знаки градуса, минуты и секунды — они обладают очень небольшой массой.
- Пробел между сокращениями (в т. ч. и между инициалами) тоже нужен. Я просто не вижу причин ему там не быть :)
- А еще пробел всегда ставится перед открывающей скобкой. Уважаемый(ая) — стыдоба!
- При указании размеров рекомендуется отбивать разделитель с обеих сторон. Если разделяем обычным «иксом», то это справедливо. При использовании же спeцсимвола ASCII
× (а так и надо) это лишне. И так хорошо смотрится: 120×120×25 мм.
- Юзаем неразрывный пробел (
) для группировки элементов, которые всегда должны быть вместе. Грустно, когда строчка заканчивается фамилией Иванов, а следующая начинается с инициалов И. И. Так быть не должно.
Надо сказать, что пробелы в ряде случаев по типографским правилам должны быть не стандартными, а уменьшенными. Смотрится это действительно лучше. Но поскольку вменяемого способа реализовать это на веб-страницах нету, я думаю, что лучше уж полновесный пробел, чем вообще никакого.
Интересный момент. При оформлении лебедевского «Ководства» к проблеме процента подошли следующим образом: размерность не отбивается от значения, а помещается в строчный контейнер с небольшим отступом слева: <span style="margin-left:2pt;">%</span>. Считаю это излишней въедливостью. К тому же страдает реализация:
«Ководство», § 83
Вообще же на данную тему я рекомендую к ознакомлению ГОСТ 8.417-2002 и труды Аркадия Мильчина. Очень познавательно. Главное — включать голову, экстраполируя прочитанное на особенности веб-верстки. Вот «висячая» пунктуация в данном контексте мне, например, видится самой настоящей блажью.
Написал нехитрый PHP-скрипт для задания случайного цвета элементам веб-страниц. Сценарий работает следующим образом:
- создается массив color из 216-ти элементов, каждый из которых представляет собой один из цветов «безопасной» веб-палитры в трехзначном HEX-формате;
- из массива выбирается один случайный элемент;
- значение этого элемента выводится, а вплотную перед ним вставляется «решетка» (#).
Таким образом, достаточно всего лишь вставить нижеприведенный кусок кода в «тело» PHP-пригодного документа, и цвет текста абзаца будет меняться при каждой новой загрузке страницы.
<p style="color: <?php include('относительный адрес файла color.php'); ?>;">
Выбор случайного цвета средствами PHP. Итак…
</p>
Со времен царя Николая известно, что в общем макеты сайтов можно условно разделить на макеты с фиксированной шириной и «резиновые», которые автоматически подстраиваются под размеры окна. Я уже давно перестал мыслить категориями «„резина“ сложнее в исполнении, а значит, круче» — верстка всегда должна определяться здравым смыслом и поставленными перед сайтом задачами.
Страницу с одной-единственной колонкой, растянутой на всю ширину экрана, чертовски сложно читать. Крупный же новостной портал, содержащий изрядно информационных блоков, просто немыслим в формате фиксированной ширины.
Но я всегда ловлю клина, когда достопочтеннейшие веб-разработчики делают сайты фиксированной ширины, выравненные по левому/правому краю окна. Если на маленьких разрешениях всё выглядит более-менее опрятно, то на разрешениях побольше (скажем, 1680 пикселей по широкой стороне) начинается сущий цирк.
Например, сайт охренительной компании Adobe, раздел про Flash Player. Задизайнен мастерски — просто и со вкусом, техническая реализация выше всяческих похвал — не придерешься; а выглядит, как недоделанный. Но с чем черт не шутит? Может верстальщик и вправду еще не выучил CSS-конструкцию margin: auto, центрирующую целевой блок?
Фиксированная ширина
Массивный выброс веселящего газа в атмосферный воздух произвела компания MediaMarkt. Данная реклама нацелена, похоже, на самых оголтелых паникеров выживальщиков:
Сэкономь и выживи
Одним из самых непростых околодизайнерских действ является изготовление пиктограмм, в частности favicon.ico, предназначенной для отображения в адресной строке браузера и закладках. Уж больно тесно на шестнадцати квадратных пикселях для создания шедевра. Скажу более — этого мало даже для того, чтобы в некоторых случаях вообще понять, что же имел в виду автор фавиконки: то ли фитнес, то ли фистинг — не разберешь.
А вещь эта, между прочим, удобная и полезная. С одной стороны, сразу видно серьезное отношение к созданию сайта, с другой — найти картинку в раскрывающемся списке адресной строки или в журнале значительно проще, чем обычный текст напротив «казенного» листочка с заломленным углом. Привожу два наиболее удобных способа, которыми пользуюсь я сам.
Первый, простой и наглядный. В интернетах имеется ряд сервисов, специально предназначенных для создания favicon.ico. Самый удобный из опробованных мною — favicon.ico Generator:
favicon.ico Generator
Можно загрузить произвольную картинку, которую движок сам сожмет до размера 16×16 пикселей, и корректировать ее. Или рисовать с нуля самому. Результат деятельности отображается в реальном времени в текущем окне браузера, что весьма удобно. Итоги работы сохраняются сразу в формате ico. В наличии всего три инструмента: пипетка для выбора цвета, ластик и хваталка-двигалка. Запутаться чрезвычайно сложно.
Для ценителей BDSM и просто тех, кто любит использовать вещи не по назначению, предусмотрена люто неудобная возможность покадрового создания анимации.
Способ второй, обладающий, определенно, большими возможностями. Я не знаю, почему так получилось, но Adobe Photoshop к своей одиннадцатой версии (CS4) так и не научился сохранять файлы в формате ico. Помочь горемычному можно, установив плагин .ico Plugin. Достаточно скопировать содержимое архива в …\Adobe\Adobe Photoshop CS4\Plug-ins, и тут же появится возможность сохранять проекты в требуемом виде:
Photoshop
Ну а в «Фотошопе» уже можно делать действительно дерзкие вещи: и градиентные заливки, и тени. Особо одаренные рыцари монитора и клавиатуры даже ухитряются изобразить на 256-ти пикселях эффект «мокрого пола». Главное — под конец работы ужать проект до размера 16×16 пикселей любимым алгоритмом и сохранить результат под названием favicon.ico.
Похоже, что современные браузеры могут для отображения иконки «избранного» «сжирать» файлы и других форматов, например gif и png, а также альтернативных размеров. Но лучше все-таки делать максимально отказоустойчивую картинку именно в формате ico (16×16 пикселей) и явно указывать ее расположение внутри тега <head>.
Многие удивляются, почему некоторые браузеры не отображают favicon.ico даже при выполнении описанных выше условий. От этого они волнуются и потеют. А дело вот в чём. Иногда для появления иконки бывает необходимо почистить кэш браузера. А особо говнистые программные продукты (см. «Microsoft Internet Explorer до седьмой версии»), кажут favicon.ico только в том случае, когда страница занесена в «избранное». Отсюда, кстати, и название — FAVorite ICON.
