Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



К сожалению огромная армия даже опытных, «модных» и эффектных дизайнеров забывают, что результатом их творчества должен быть сайт, а не только «супер-скриншот» годный только для портфолио.

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

Однажды, устав играть в Counter-Strike 1.6, решил, что можно убить оставшееся время более продуктивно (особенно в условиях мирового финансового кризиса). На память мне пришла притча, приписываемая Лао-Цзы, мораль которой сводилась к тому, что из сложного можно получить простое, даже не прибегая к рисовой водке. Проще говоря, сделал два маленьких улучшения для правой панельки на странице топиков:



Чтобы установить расширения, надо иметь Firefox с установленным GreaseMonkey.

Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.

Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить :-(, тогда мне пришлось использовать прозрачный png.

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

1. Что такое PNG?
2. PNG vs GIF.
3. PNG vs JPEG.
4. Жизнь после Photoshop'а или сжимаем дальше.
5. Adobe Fireworks или PNG-8 с альфа-каналом.
6. Вердикт.

Осторожно, много картинок! Все кликабельны.

Ещё одна мелочь, на которую не вредно обращать внимание — оформление знака охраны авторского права (который часто неграмотно называют «копирайтом»). К сожалению, на сайтах этот элемент подвала страницы зачастую ставят «чтобы был», и оформляют кто во что горазд. Однако, на сей счёт есть не просто сложившиеся правила, а целый ГОСТ Р 7.0.1—2003 (PDF, 652 КБ).

Ничего сложного в оформлении знака охраны авторского права нет, нужно просто знать определённые правила.

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

Сегодня ко мне в слезах прибежала жена — говорит, все MP3 испортились.

Пошёл смотреть. В Windows Media Player файлы проигрываются нормально, а в Winamp, iTunes и на айподе квакают, хрюкают и ведут себя крайне неподобающе.

Натравил на файлы NOD32. Антивирус опознал червя GetCodec, о котором несколько месяцев назад уже писали на Хабре. NOD32 пошуршал, сказал, что всё получилось, но файлы не вылечил.

Я открыл Гугл и стал разбираться. Выяснилось, что червь не пережимает файлы в WMA, а засовывает MP3-поток в контейнер ASF, а потом переименовывает обратно.

В интернете советовали похимичить с тегами, но это, само собой, не помогло. Пережимать файл в MP3 — тоже не вариант. Только через полчаса понял, что поток-то никуда не делся.

Выручил FFmpeg. Лёгким движением руки достаём звук и сохраняем в новый файл:
ffmpeg -i ill.mp3 -vn -acodec copy healthy.mp3

В очередной раз перелистывая мануал по wordpress'у, решил его скомпилировать в один файл, оный и предлагаю Вам для скачивания…

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



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

Вот сделал две голосовалки, опенюз, так сказать.

Выполнив последующие простые инструкции вы сможете «твиттить» прямо из адресной строки Оперы.

Предлагаю вашему вниманию таблицу значений отступов от букв до верха и низа строки, для стандартного значения line-height.
Эта таблица нужна для точного определения padding или margin обрамляющего или близлежащих элементов.

Вот картинка-легенда, чтобы было понятно о чем речь:

Посмотрите на эту страницу. Синим цветом выделены 4 плавающих блока с шириной равной 25% у каждого, которые находятся в контейнере с шириной 50px. Теперь вопрос: Какова ширина каждого блока?

Ширина эта должна быть равна 12.5px, но т.к. мы можем использовать только целые значения, то приходится округлять значения. И тут же возникает вопрос: В какую сторону округлять? В большую, в меньшую или в обе? Результаты думаю вас удивят, как и меня.


В итоге мы имеем три абсолютно разных лагеря.

— Округление в меньшую сторону — И Opera и Safari округлили значение ширины до 12px. В результате чего образовался 2-x пиксельный пробел (помечен зеленым цветом) справа от блоков. Если вы когда-либо озадачивались, почему ваша красивая навигация не заполняет все пространство контейнера, теперь вы знаете ответ.
— Округление в большую сторону — 6-й и 7-й Internet Explorer увеличивают ширину до 13px, что приводит к «поломке» структуры сайта.
— Округление в обе стороны — Firefox 2 и 3 сочетают оба подхода, округляя ширину одних блоков в меньшую сторону, а других в большую. Побочный эффект заключается в том, что ширина блоков теперь имеет разное значение, несмотря на то, что в CSS задано одно значение. К тому же, если получить значение ширины с помощью Javascript, то оно будет равно 12.5px, не давая понять в какую сторону было произведено округление. Есть и еще один неприятный момент. В Firefox 3 меняется порядок округления.

David Baron, один из разработчиков Mozilla, разъяснил ситуацию:

— Мы стараемся соблюдать все нижеописанные правила, которые, однако же, не могут быть удовлетворены одновременно:

1. 4 смежных объекта шириной/высотой 25% (например), начинающиеся у одного края внешнего контейнера, должны заканчиваться у другого. Не должно появляться никаких свободных или лишних пикселей.
2. Объекты, которые являются логически смежными, всегда должны визуально касаться друг друга. Не должно быть никаких пустых пробелов или наложений, возникающих из-за ошибки округления.
3. Объекты с одинаковой шириной должны занимать такое количество пикселей, которое было задано.
4. Границы объектов не должны быть размыты.

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

Задача: менять горизонтальное положение блочных элементов по линейной зависимости при изменении размера окна браузера.
Решение: термин «пропорциональность» подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость — это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X — ширину окна, то задача сводится к определению параметров a и b.

Случилось так, что нам поручили рисовать иконки для нового Хабрахабра (тогда он еще не был Суперхабром). Сначала мы обрадовались, но потом испугались — нашу работу будут строго оценивать все прогрессивные хабралюди, среди которых много дизайнеров и людей понимающих в дизайне. Но мы собрались с силами и принялись за работу. Для начала нужно было выбрать стиль иконок…

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

Здесь представлены