Наконец-то получил свой инвайт на Dribbble. Если кто не знает, это такой «Твиттер для картинок», созданный дизайнерами для дизайнеров. В Твиттере можно использовать 140 символов, в Дрибббблере же вам доступно 120 000 пикселей. Все клёвые западные, и многие наши дизайнеры уже там и не переставая постят разные картинки. К слову, свой инвайт я ждал около месяца, хотя и висел почти всё время в топе «перспективных» (prospects — список мечтающих получить инвайт).

Дизайнеры выкладывают то, над чем работают в данный момент: иллюстрации, интерфейсы, иконки, логотипы, шрифты. В общем, всё что может быть интересно любому дизайнеру. Естественно, картинки можно отмечать, нажимая «Like». Можно грабить корованы оставлять комментарии. Картинки с наибольшем количеством «лайков» появляются в топе. Тут ничего необычного:

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

Дебютировал я на «Дрибббле» со своей задротской иконкой-переростком Canon 5D Mark II, набрал за сутки более ста «лайков» и полдня провисел на главной. :3 Что, в общем-то, предсказуемо, там такое любят. Правда, больше мне пока выкладывать нечего, всё новое очень сильно не дотягивает до «Марка», боюсь разочаровать фолловеров.

Я уже отметил «лайками» более 800 картинок. В основном это интерфейсы и иконки. Периодически пересматриваю и всячески вдохновляюсь, так сказать.

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

И ещё есть ember, но там открытая регистрация. Никакой «элитарности» — кому он такой нужен?

Мощь! Внушает. Но… зачем?

Очевидно же — хотят заработать на футболках и стикерах.

Также были нарисованы иконки для семейства HTML5-технологий:

А вот эти уже и правда могут пригодиться…

Например, для членомерной кнопочки, которую можно сгенерить на этом же сайте:

Хм, действительно, выглядит довольно фаллично

Я не буду ставить этот шильдик у себя в блоге, хотя некоторые его части уже используют новые теги и CSS3. Потому что это мне чем-то это напоминает время когда все ставили картинки «Valid XHTML», «Valid CSS» (некоторые и до сих пор ставят), а ещё в более давнее время «Best viewed in Internet Explorer 6». Who cares?

P.S. Эх, немного саркастичный пост получился, на самом деле круто это всё. И сайт приятный и типографика. И вообще — нраица.

И вспомнил я, что давно хотел научиться рисовать большие иконки. В векторе… И тут меня переклинило (да так, что остальные иконки для сайта так до сих пор и не сделал ) — я начал изучать инструмент Gradient Mesh в Adobe Illustrator. А так как переклинило меня на иконке фотоаппарата, то через три дня получилось вот это:

Это не трейс. Всё ручками, ручками:

Векторная сетка

В фотошопе дорисовал только «кожаное» покрытие ручки и чуть покрутил кривые.

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

По клику — большая картинка

UPD. Большая картинка на русском.

Больше всего изменился интерфейс. А в остальном — это старая добрая Miranda Me.

Miranda Me базируется на лучшем ICQ-клиенте — Miranda IM, который поддерживает и множество других популярных IM-протоколов, таких как Jabber, Mail.Ru, MSN и благодаря поддержке плагинов обладает практически неограниченными возможностями расширения.

В связи с таким событием был полностью переделан сайт и запущен новый форум на современном и быстром «движке» Vanilla (phpbb тяжеловат). Также у проекта появился официальный твиттер. Надеюсь, что всё это поспособствует дальнейшему развитию проекта.

Это иконка CSS Edit 2, хотя в статье не будет ни слова о CSS Edit 2

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

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

Для начала, пара провокационных советов:

1. Пришло время прекратить поддержку Internet Explorer 6

Возможно, меня закидают камнями, но, сколько можно? Этому браузеру 9… Да, девять лет! Сейчас им пользуется около пяти процентов пользователей рунета, Microsoft делает всё возможное для уменьшения этой цифры. К сожалению, предлагая скачать не намного более современную 8-ю версию своего браузера.
Нет, я не ратую за отказ в доступе к сайтам с устаревших браузеров. Лучшим решением представляется уведомление пользователя, например: «ваш браузер устарел и не поддерживается — функциональность данного сайта может быть ограничена» и ниже привести список рекомендуемых современных браузеров. Так уже сделали на YouTube, Google Docs (к концу 2010 года планируют прекратить поддержку в Google Mail и Calendar) и на многих других популярных сайтах и порталах. Я думаю, это очень хороший повод для того чтобы начать делать так же. А время, которое было бы потрачено на поддержку IE6, лучше потратить на разработку новой полезной функциональности.

2. CSS3

Большинство расценивает CSS3 только как возможность сделать закруглённые уголки и добавить тень. Но, на самом деле, возможностей гораздо больше: загружаемые шрифты, outline, транформации, flexible box layout, многоколоночная вёрстка, текстуры для контуров, медиа-апросы и многие-многие другие чрезвычайно полезные штуки.

Хотя CSS3 ещё в разработке, большинство современных браузеров уже поддерживают основные возможности, зачастую с префиксами (например: -moz-border-radius и -webkit-border-radius для Firefox и Safari/Chrome соотвественно).
Не стоит забывать, что по статистике большая часть пользователей до сих пор пользуется браузерами, не поддерживающими CSS3 (все версии Internet Explorer). Но начинать применять CSS3 стоит уже сейчас.

3. Сброс CSS (CSS Reset)

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

Как оказалось, я и раньше использовал сброс CSS, но он был очень простой и только для отступов:

1. * {
2. margin: 0;
3. padding: 0;
4. }

Сейчас используемый мной метод гораздо сложнее и объёмнее, его можно увидеть в моей вики на странице CSS Code Style. Да, это самый известный CSS Reset, предложенный известным экспертом по CSS Эриком Мэйером.

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

4. Способы так называемой «очистки потока»

Для того чтобы внешний контейнер (блок, в котором находятся другие блоки) полностью «обтягивал» вложенные плавающие блоки, я использую следующие способы:

1. Совершенно новый способ:

   1. .clearfix {
   2. visibility: hidden;
   3. display: block;
   4. font-size: 0;
   5. content: " ";
   6. clear: both;
   7. height: 0;
   8. }
   9. * html .clearfix { zoom: 1; }
   10. *:first-child+html .clearfix { zoom: 2; }

2. Стиль overflow: hidden; для контейнера (для IE потребуется добавить height: 1%;). C overflow надо быть поосторожнее, так как он скроет все элементы не поместившиеся в блок, для которого он задан.

3. Самый старый, но не очень красивый способ — в конце внешнего контейнера добавляется <div style="clear: both;"></div> или <br clear="all" />

5. Когда нужно прилепить «подвал» к нижней части страницы

HTML будет такой:

1. <html>
2. <body>
3. <div id="content">
4. <div id="footer-clear"></div>
5. </div>
6. <div id="footer"></div>
7. </body>
8. </html>

Стили, для «подвала» высотой в 40 пикселей:

1. html, body {
2. height: 100%;
3. }
4. #content {
5. min-height: 100%;
6. }
7. #footer {
8. height: 40px; margin-top: -40px; position: relative;
9. }
10. #footer-clear {
11. height: 40px; clear: both;
12. }

6. Выравнивание блока по горизонтали

Для того чтобы выровнять блок с заданной шириной по центру, нужно задать параметр auto для левого и правого отступа:

1. /* Content */
2. #content {
3. width: 900px;
4. margin: 0 auto;
5. }

7. Блок, выровненный по центру страницы

Пример для блока размерами 400×300 пикселей (параметры margin-left и margin-top должны быть равны отрицательной половине ширины и высоты соответственно).

1. #content {
2. position: absolute;
3. top: 50%;
4. left: 50%;
5. width: 400px;
6. height: 300px;
7. margin-left: -200px;
8. margin-top: -150px;
9. }

8. Картинка, меняющая размер в зависимости от ширины блока

1. img {
2. max-width: 100%;
3. }

Картинка будет автоматически пропорционально уменьшаться, если внешний блок будет меньше размера самой картинки. Но только тогда, когда не указаны размеры картинки у тега <img> с помощью атрибутов width и height.

9. Замена текста картинкой

1. h1 {
2. text-indent: -9999px;
3. width: 200px;
4. height: 40px;
5. background: url('logo.png') no-repeat;
6. }

Мне не очень нравится этот способ из-за text-indent: -9999px, но он работает.

10. При ограничении максимальной ширины макета удобно задавать max-width в единицах em

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

11. Старайтесь меньше использовать флаг !important

!important повышает приоритет помеченного им свойства. Я использую его в очень редких случаях, в основном, когда требуется что-то быстро исправить. Лучше использовать более строгое наследование.

12. Указывайте несколько шрифтов

Я, например, работаю на платформе Mac и у меня нет многих шрифтов, которые предустановлены в Windows, как и наоборот (тоже самое и с Linux и прочими операционными системами). Поэтому рекомендуется задавать несколько похожих шрифтов, которые присутствуют в разных системах:

1. font-family: 'Lucida Grande', 'Segoe UI', Tahoma, Arial, sans-serif;

В конце указано ключевое слово sans-serif, что означает «шрифт без засечек». Бывают ещё serif (с засечками) и monospace (моноширинный). Шрифты по-умолчанию настраиваются в браузере.
В интернетах есть таблицы «похожести» шрифтов для разных операционных систем.

13. Сокращённые цвета

При задании шестнадцатеричного цвета можно использовать сокращённую запись: например, вместо #000000 записать #000, или вместо #aabbcc — #abc.
Я часто использую следующие цвета:

• Чёрный: #000
• Белый: #fff
• Тёмно-красный (для ошибок): #b00
• Cерый оттенки я всегда указываю в трёх цифрах, подбирая на глаз, Есть и любимые: #666 и #bebebe.

14. Всегда задавайте стиль для посещённых ссылок

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

При указании стиля для разных состояний ссылки нужно помнить о правильном порядке задания правил: :link :visited :hover :active (есть даже специальная фраза для запоминания: LoVe HAte).

15. Не задавайте уже унаследованные свойства

У каждого элемента есть свойства унаследованные или заданные по-умолчанию. Нет никакого смысла их указывать повторно.
Например:

1. body {
2. color: #000;
3. }
4. p {
5. font-weight: normal;
6. color: #000;
7. }

Здесь свойство font-weight у элемента p по-умолчанию равно normal, а цвет текста color был уже задан глобально для body, и наследуется для всех вложенных элементов.

16. Используйте CSS-спрайты

CSS-спрайт — это картинка состоящая из несколько картинок, которые с помощью background-position можно присвоить различным элементам.
Использование спрайтов уменьшает количество запросов и увеличивает скорость загрузки страниц. Спрайты — это очень полезная штука, достойная отдельной статьи. Писать я её не буду, так как по запросу в гугле «CSS спрайты» выводится очень много подробных статей.

17. Старайтесь использовать относительные размеры шрифтов в em и %

Сейчас я всегда использую следующий способ задания размера для шрифтов: body { font-size: .65%; }
У остальных элементов размер задаю или процентами или em-ами. При этом, font-size: 130% будет равен 13 пикселям, .7em — соответственно, 7 пикселям.
То же применимо и к отступами, если не требуется попиксельного совпадения макета и вёрстки. Тогда при увеличении масштаба страницы отступы будут увеличиваться вместе со шрифтами.

18. Не стоит писать в стилях единицы измерения для нулевых значений

Единицы измерения для значения длины обязательны, кроме двух случаев: line-height и нуля. Ну с нулём всё понятно — нуль он и есть нуль, нет никакого смысла писать после него единицу измерения. А для line-height любое число без знака будет восприниматься как множитель от размера шрифта. Например, значение 1.5 установит полуторный межстрочный интервал.

19. Пробуйте выключать картинки, CSS и JavaScript

Обратите внимание как смотрится сайт и все ли ссылки работают с выключенными скриптами, нет ли белого текста на белом фоне из-за отключенных картинок.

20. Поиск ошибок

Элементарное средство поиска ошибок:

1. * {
2. outline: solid 100%;
3. }

Также я часто задаю либо бордеры, либо фоновый цвет для блока, с которым у меня какие-либо проблемы.
Настоятельно рекомендую разобраться с расширенями браузеров (FireBug в Firefox, Inspector в Safari/Chrome, Dragonfly в Opera) — очень упрощают написание кода и поиск ошибок.

21. Старайтесь красиво форматировать и комментировать код.

Многие верстальщики не ставят пробелы после двоеточий и запятых в CSS.
Смотрится немного кашеобразно:

1. background:#301b18;
2. line-height:1.5;
3. font:.8125em 'Helvetica Neue',Helvetica,Arial,sans-serif;
4. color:#fff;

Так, пожалуй, намного лучше:

1. background: #301b18;
2. line-height: 1.5;
3. font: .8125em 'Helvetica Neue', Helvetica, Arial, sans-serif;
4. color: #fff;

Насчёт комментариев… Кто-то предпочитает самодокументируемый код, кто-то половину времени тратит на написание комментариев. Не стоит комментировать каждую строчку, достаточно выделить основные блоки.

Мой Code Style для HTML и CSS можно глянуть в вики: Code Style.

22. Чувствительность к регистру

Применимо только к случаю, когда CSS используется вместе с XHTML — имена элементов и селекторы становятся чувствительны к регистру. Я всегда использую в селекторах нижний регистр и вам рекомендую.

23. Отступы для вложенных элементов в коде CSS

Неоднократно встречал такие отступы:

1. #content {
2. }
3. .entry {
4. }

Может кому-то будет удобно, я же предпочитаю классическое форматирование:

1. /* Content */
2. #content {
3. }
4. #content .entry {
5. }

24. Указывайте типы элементов только когда это явно нужно

Например, для указания разных стилей для элементов с одинковым классом:

1. span.active {}
2. em.active {}

А вот в данном случае вместо:

1. div#content {}
2. div#aside {}

Лучше писать:

1. #content {}
2. #aside {}

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

1. ul li {}
2. ul li.active {}

Вторая строчка показывает то, что класс active должен задаваться именно для li, а не какого-либо другого элемента.

А вот для ссылки я уже напишу:

1. ul .active a {}

Тут я задаю стили для ссылки, которая находится в активном элементе, неважно в каком именно.

Для ID вообще нет смысла писать тег, так как этот элемент должен быть уникален на странице.

25. Несколько классов для элемента

В HTML можно задать несколько классов для одного элемента.
Пример: на странице есть боковая панель, в ней есть несколько блоков (я называю их виджетами). Сначала я задаю общий стиль для всех виджетов:

1. .widget a {}

Затем задаю стили для специфических виджетов:

1. .widget-news {}
2. .widget-links {}

Я мог бы не писать приставку “widget-”, но так выглядит гораздо нагляднее.
А затем в HTML пишу:

1. <div class="widget widget-news"></div>

26. Иногда можно (и даже нужно) отступать от Code Style в пользу наглядности

Например, когда надо задать размер шрифта у нескольких элементов подряд, можно написать стиль в одну строчку:

1. h1 { font-size: 2.4em; }
2. h2 { font-size: 1.8em; }
3. h3 { font-size: 1.4em; }

Читается гораздо лучше.

27. Указывайте ID или CSS у тега body

Это очень удобно в том случае, когда нужно задать специфические стили для определённой страницы. В данном случае на странице About заголовок будет красный, а на News — зелёный:

1. /* Content */
2. #about h3 {
3. color: #b00;
4. }
5. #news h3 {
6. color: #0b0;
7. }

28. Объединяйте свойства

Вместо двух свойств margin-left: 3px; margin-top: 6px; можно написать: margin: 5px 0 0 5px;

Свойства идут в порядке top right bottom left (для лучшего запоминания советуют слово TRouBLe).
Если задано два значения, то свойства объединяются: top-bottom и right-left.
Если три, то объединяются только правый и левый: top, right-left и bottom.

Тоже самое будет работать для padding и border-width.

Краткие записи существуют и для других свойств:
border-width: 1px;
border-style: solid;
border-color: #000;

В краткой записи будет выглядеть так:
border: 1px solid #000;

Для background (в порядке: color image repeat attachment position):
background: #333 url(bg.png) no-repeat fixed 0 0;

Для font (style variant weight size/line-height family):
border: italic small-caps bold 1em/1.1 'Lucida Grande', 'Segoe UI', Tahoma, Arial sans-serif;

Для list-style (type position image):
list-style: square inside url('li.png');

29. Разработайте свой, так называемый Тулбокс

Тулбокс — набор часто используемых стилей. Для примера, тулбокс от CSS-tricks. У каждого он свой.

30. Используйте условные комментарии (Conditional Comments) вместо хаков

Если есть потребность написать какой-нибудь код для IE определённой версии, то лучше использовать Conditional Comments вместо хаков. Я уже писал статью о хаках и условных комментариях.

31. Стоит делать код проще

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

32. Редактор

Выбор редактора — довольно-таки важный момент. Не слушайте тех кто рекомендует вам блокнот.
Для меня главное в редакторе, это: подсветка синтаксиса, Zen Coding, сниппеты и подсказки по мере набора кода.
Я выбрал Espresso (моя статья про него). Для Mac я также могу порекомендовать Textmate и Coda. Под Windows — e-texteditor (подобие TextMate с поддержкой бандлов оного). А вообще лучше купить Mac. Я серьёзно.
А также Dreamweaver, Eclipse и Aptana, которые присутствуют для обоих платформ. Aptana — пожалуй, лучший редактор из бесплатных.

33. Изучайте чужой код

Именно изучайте, а не бездумно копируйте не предпринимая даже попытки разобраться.
Я лет 5 назад изучил код CSS сайта mozilla.org (и ещё многих других, которых уже не помню) вдоль и поперёк, уж очень он мне казался изяшным и навороченным. Очень многое мне оттуда пригодилось в дальнейшем.

34. Подпишитесь на RSS популярных блогов по веб-разработке

Всегда появляется что-нибудь новенькое. Вот недавно, например, опубликовали новую версию выпадающего меню на списках, без использования javascript, условных комментариев и каких-либо хаков. У блога, что вы сейчас читаете тоже есть RSS.

35. Коллекционируйте шаблоны кода

Собственно, эта статья и есть отличный пример — это часть моей коллекции решений.
Ещё у меня есть укромная папочка, в которой лежат шаблоны для Photoshop с различными сетками и заготовленной структурой папок слоёв. Папка с заготовкой проекта, в котором уже лежит CSS с часто используемыми блоками, пару HTML-страниц с подключенным jQuery, заголовками и стилями, папка для картинок и прочее.
Для этого даже поднял свою вики, в которой для общего доступа открыты две страницы с моим Code Style для HTML и CSS.

36. Изучайте jQuery.

jQuery — это самый популярный JavaScript-фреймворк, для которого написано огромное количество полезных плагинов. Основы должен знать каждый уважающий себя верстальщик.

37. Используйте семантическую вёрстку

Я уже писал небольшую статейку про семантическую вёрстку.

38. Не стоит слишком гоняться за стандартами

Здесь мнения часто расходятся, я нахожусь на стороне тех кто говорит, что главный валидатор — это браузер. Валидация ради шильдика «Valid XHTML & CSS» — лишняя трата времени, да и валидаторы ошибаются. Стандарты стоит знать и стараться им следовать, но без фанатизма.

39. Почитайте про SEO-оптимизацию

Каждый верстальщик должен знать как оптимизировать сайты.

40. Следите за дизайнером

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

41. Полезные ссылки

Консорциум Всемирной паутины (W3C) — там делают интернет. Оооочень много полезной информации (правда, на буржуйском). Там же можно найти валидатор.
Таблица совместимости браузеров.
Хабрахабр. Ну если вы ещё не знаете о этом сайте…

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

Очень красивые коробки

Ну чтож, свершилось — сегодня Adobe официально представила пакет Creative Suite 5 (CS5). С предсказанием иконок я таки облажался, да. У меня, конечно, была мысль, что они могут использовать третье измерение, но… В итоге они сделали нечто параллелепипедо-папкообразное. Передняя плоскость один в один повторяет то, что было в CS3 и CS4, а шрифт теперь обрёл цвет. Мне, конечно, больше нравится мой вариант с белым фоном, но эти тоже вполне ничего:

Не могу дождаться того момента, как они появятся в доке.

Шон Черис, главный дизайнер Adobe’s Desktop Brand, немного рассказал про то как создавался дизайн:

Когда мы начали думать о том, что бы мы хотели сделать для CS5, единственное, c чем мы все согласились, это было то, что мы хотели вернуть бренду чувство радости. Нашей целью было выйти за рамки монолитных образов в CS3 и CS4 и создать более динамичный образ. Мы хотели вернуть вдохновляющие и возвышенные качества системе идентификации, усиливая успешные модели, которые мы использовали в CS3 и CS4. Все скучали по причудливым образам, которые были большей частью наследия Adobe и хотели удивить и вдохновить наших пользователей и дать им что-то новое.

История развития бренда

Части грида, использованные в дизайне

Ладно, хватит уже о дизайне бренда, рассмотрим вкусности нового пакета. Начнём с самого интересного:

Photoshop CS5

Про нововведения подробно расписано на странице продукта.

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

К новым функциям Content-Aware Fill и Refine Edge отношусь скептически, хотя результат их работы и выглядит впечатляюще. Хотелось бы верить, что они будут работать так же как и на презентации.

Весьма интересна улучшенная обработка HDR, в диалоговом окне появилось много новых крутилок. В популярном плагине Фотоматикс их всё-таки побольше, так что ещё поживёт. Опять же, в интернетах после выхода CS5 значительно увеличится количество вырвиглазных HDR-фотографий.

Были замечены новые иконки инструментов и обесцветившийся логотип в панели инструментов, а также новая панелька Mini Bridge

Новый RAW-конвертер (Camera RAW 6) я уже успел пощупать в бета-версии третьего лайтрума. В нём меня очень порадовало то, как работает шумодав и то, как он обращается с цветным шумом. Плагин Noise Ninja теперь не нужен.

Такеже, весьма меня впечатлили профили в фильтре Lens Correction — теперь одним нажатием кнопки можно исправить искажения, вносимые объективом. Причём параметры дисторсии, виньетирования и хроматических аббераций будут выставлены автоматически из профиля объектива, который определяется из EXIF фотографии.

Photoshop CS5 включает в себя ряд инновационных технологий, которые пришли непосредственно из команды Adobe Labs. Одно из направлений разработки было названо «Just Do It» (JDI). Вместо кардинальных изменений они уделяли больше внимания мелочам. Для того чтобы выбрать функции, которые они могли бы выполнить в рамках JDI менеджер Брайан О’Нейл Хьюз использовал информацию из многих источников, таких как: блоги, пользовательские исследования, отдел продаж, служба поддержки и форумы. Группа рассмотрела огромный список пожеланий и сузило его до самых популярных 50 функций JDI.

Список некоторых функций, выполненные в рамках JDI:

• Добавлена возможность закрыть все изображения без сохранения
• Добавлено правило третей в Crop Tool и Color Picker
• Добавлена возможность менять заливку нескольких слоёв одновременно
• Наконец-то добавлена галочка «Не показывать это сообщение снова» для диалога «Максимальная совместимость»
• Уменьшено значение по-умолчанию для Shadows/Highlights
• Включена возможность двигать выделение, когда активный слой скрыт (аллилуйя!!!)
• Добавлена команда для удаления всех пустых слоёв
• Добавлена настройка выбора папки сохранения по-умолчанию
• Добавлена возможность перетащить файл на открытый PSD для того чтобы создать слой
• В панели Adjustments теперь работает горячая клавиша (Shift-Enter/Return) для того чтобы установить фокус на текстовых полях панели
• Добавлена возможность менять прозрачность нескольких слоёв одновременно
• Добавлен индивидуальные настройки стиля слоя по-умолчанию (настраивается пользователем)
• Добавлен пресет в Gradient Tool для нейтральной плотности
• Сделано 7 изменений в фильтре Lens Correction:
  • Отображение сетки теперь выключено по-умолчанию (аллилуйя!!!)
  • Параметры «показать сетку», «размер сетки» и «цвет сетки» теперь запоминаются
  • Размер сетки по-умолчанию теперь увеличен с 16 до 64 (аллилуйя!!!)
  • Слайдер хроматических аббераций теперь работает с точностью до десятых (ну надо же!)
  • Добавлен третий слайдер для исправления зелёных/фиолетовых аббераций
  • Заменён «Цвет фона» на «Чёрный цвет» и добавлен «Белый цвет» для опции заливки краёв
  • Сброс работает только для сброса настроек калибрования

«Оцените усовершенствованные ресурсы повышения продуктивности … благодаря внедрению десятков новых и улучшенных функций по просьбе пользователей Photoshop» — радует что в Adobe начали прислушиваться к пользователям.

Но больше всего меня интересует насколько быстро будет это всё работать (надеюсь на Cocoa и 64 бита). Как пишут в обзоре: «до десяти раз быстрее», но пока что-то слабо верится. Ещё надеюсь на изменения в интерфейсе, и что наконец перестанут появляться чёрные квадраты при включенной поддержке OpenGL и что будут наконец нормально поддерживаться Spaces.

Illustrator CS5

Вот тут описаны все новые фичи нового Иллюстратора.

На самом деле, «Люстрой» я пока что пользуюсь мало, и то, в основном для создания логотипов, так что не смогу адекватно оценить нужность новых возможностей, но некоторым я был рад:

«Четкость контуров в проектах для веб-приложений и мобильных устройств» — то чего так ждали большевики! Теперь можно рисовать графику для веба не беспокоясь о размытых краях.

Кисти, теперь и в Иллюстраторе! Также очень понравился инструмент «Создание фигур».

Dreamweaver CS5

Подробно нововведения расписаны тут.

Я давным-давно мигрировал со всяческих IDE на текстовые редакторы, но изменения в Dreamweaver мне всё равно интересны.

Поддержка CMS, проверка CSS и всяческие подсказки по коду. Всё.

Остальными продуктами мне пользоваться пока особо не приходилось.

P.S. И блин, постоянно читаю CS5 как CSS, уж очень похоже. Можно начинать ждать CS6.

UPD. Ну чтож, CS5 вышел, и я написал подробный обзор Adobe Photoshop CS5.

Споры на тему нужности этого девайса продолжаются. После презентации iPad-а у меня случилось небольшое дежавю… Ах да, презентация iPhone. На этот раз ситуация почти повторяется — Apple опять представила шедевр: тонкий, красивый и стильный корпус, IPS-матрица, 10 часов работы от батарей и «всего» за $499. Не думал, что они модифицируют айфоновскую ось, ожидал увидеть десктопную с какой-либо оболочкой (тут почему-то вдруг вспомнился Стив Баллмер, пытающийся попасть пальцем в полосу прокрутки на планшете от HP).

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

Я пользуюсь айфоном уже более двух лет и заменю его разве что на новый айфон, и мой новый ноутбук/настольный компьютер точно будет от Apple. В первую очередь, дело в интерфейсе, удобстве и эстетической красоте — успех их продукции можно объясняется этим, маркетинг идёт потом. Я бы не стал покупать макбук, будь на нём Windows (за такие деньги, имеется ввиду ). Стыдно вспоминать, но изначально я хотел купить какой-нибудь Asus и поставить туда хакинтош.

Когда смотрел первый видеообзор iPad’а, уже спустя 30 секунд я начал испытывать непреодолимое желание пощупать эту штуковину, а когда досмотрел видео до конца, уже начал думать о внесении данного девайса в бюджет на 2010 год. Примерно тоже самое было когда смотрел первые обзоры айфона.

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

P.S. В итоге iPad в моём бюджете так и не оказался. А вот в подарок с удовольствием бы принял, день рождения уже не за горами.

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

P.P.S. Ну вот, iPad вышел. Спорам конец? Я уверен в одном, что за эту неделю айпад успеет всех зае всем надоесть.

P.P.P.S. Ну вот, и подтверждение последней фразы не заставило себя долго ждать — Обзор сами-знаете-чего от Engadget на Хабре стал постом зла. Я тоже попал под раздачу.

Афиша «Metal Warriors II»

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

Ну и, по модным ныне тенденциям, сделал ещё мини-афишку для богомерзкого вконтакта:

При наведении на эту картинку, можно увидеть версию, пожатую вконтактом. Красные цвета поплыли. Отвратительно.

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

Интерфейс версии CS4, судя по всему, делался под Mac, а потом портировался под винду, ибо смотрится там как нечто инородное. Я долго удивлялся тому, как они умудрились сделать кнопку закрытия вкладки справа. Постоянно мышкой тянусь к левой части. Судя по первым видеороликам Photoshop CS5, кнопку таки перенесли влево!

Больше особо ничего от CS5 и не жду. Хотя… Да! Жду новые иконки приложений!

Немного истории

Перья и бабочки на иконках в версиях CS1 и CS2 были, конечно, красивые и прикольные..:

Иконки основных приложений в пакетах Adobe CS и CS2

Но потом было слияние Adobe и Macromedia. У Adobe стало гораздо больше приложений, причём у многих функциональность пересекалась, хорошо идентифицируемые иконки стало сделать труднее. Для пакета CS3 сделали нечто радикально отличающееся от того что было раньше. Иконки программ были сопряжены с определёнными цветами, и, как правило, основаны на исторической ассоциации с цветом (например, Flash был красный, Dreamweaver — зелёный). Для каждого размера иконки отрисовывались заново, чтобы максимально улучшить читаемость. В принципе, по отдельности они не представляют из себя ничего особенного — просто разноцветный квадрат с двумя буквами. Всю их крутость понимаешь, когда видишь это:

Иконки основных приложений в пакете Adobe CS3

В новой, CS4-й версии пакета, цвет букв на иконках инвертировали — стало слегка мрачнее:

Иконки основных приложений в пакете Adobe CS4

Мой вариант иконок для пакета Adobe CS5

Осмелюсь предположить (точнее — как я хотел бы их видеть), что иконки приложений в CS5 будут выглядеть примерно так (шрифт, который используется в иконках только для корпоративного использования, и не продаётся, поэтому я использовал максимально похожий Myriad Pro):

Предполагаемые иконки основных приложений в пакете Adobe CS5

Возможно, края будут закруглённые.

Немного смущает вышедшая в декабре 2009 года Lightroom Beta 3 (релиз которой, по всей видимости, будет совместно с пакетом CS5), так как иконка в ней такая:

Иконка Adobe Lightroom 3 Beta

Посему, можно предположить ещё один вариант (а может быть он будет в CS6):

Предполагаемые иконки основных приложений в пакете Adobe CS5

Собственно, больше вариантов вроде как не осталось. Чтож, подождём пресс-релиза.

На место моей личной вики претендовали три популярных вики-движка: MediaWiki, PmWiki и DokuWiki. Существует ещё «больше 9000» вики-движков, но все они по тем или иным причинам были отвергнуты.

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

Оставалось два движка, примерно равных по функциональности: DokuWiki и PmWiki. Оба для хранения данных используют файлы, а не БД как MediaWiki, что немного быстрее.

Сначала пользовался DokuWiki, через некоторое время ради эксперимента перелез на PmWiki, а потом, сейчас уже не помню почему, вернулся опять на Доку и… Обратно уже не захотелось. Очень удобный синтаксис, качественный код движка — делать для него скин было одно удовольствие.

Не буду приводить плюсы и минусы обоих движков, всё это есть в очень наглядном виде на сайте WikiMatrix.

На данный момент в моей вики для всеобщего прочтения открыто две страницы: HTML Code Style и CSS Code Style (ссылки на них были/будут приведены в статьях).

И вот уже два месяца я пользуюсь «Эспрессой» и не могу нарадоваться. Вот, решил поделиться радостями в небольшом, сравнительном с Coda, обзорчике.

Кстати, это продукт компании Macrabbit. Да-да, именно они выпустили удивительный CSSEdit, которым, правда, я так и не смог пользоваться из-за непобедимой привычки писать CSS ручками.

Основное окно Espresso

Что меня подкупило в Espresso:

• Полная поддержка Zen Coding.
• Наиудобнейшая публикация сайтов.
• Очень удобный и минималистичный интерфейс.
• Шустрый редактор с быстрыми подсказками и сворачиванием кода.
• Навигатор.
• Автопубликация.
• Возможность опубликовать папку из контекстного меню (странно, но такой функции до сих пор нет в Coda, там можно выбрать несколько файлов для публикации, но папку — никак).
• Удобная работа с проектами.

Недостатки по сравнению с Coda:

• Меньшие возможности и производительность поиска по проекту.
• Не очень удобные сниппеты. В Coda они появляются во всплывающем окошке, что очень удобно. В Espresso же они ограничены хоть и красивым, но уж слишком компактным жёлтым листочком в панельке Tools.

То, чего нет в Espresso и есть в Coda, но чем я не пользуюсь:

• SVN-клиент. Пользуюсь клиентом Versions, который по идее заслуживает отедьной статьи.
• Terminal. Системного Terminal вполне хватает.
• Books — встроенный браузер по справочникам, успешно заменяется Safari с гуглом.

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

Ну и немного подробнее опишу фишки, которые мне очень понравились:

«Сахарный» Zen Coding

Забавные эти ребята из MacRabbit, плагины для Espresso назвали Sugar. Один «сахар» уже сразу встроен в редактор и называется TEA (расшифровывается как «Text Editor Actions»). Эспрессо, сахар, чай? Что ещё? Этот плагин добавляет TextMate-овские экшны для HTML, горячие клавиши, и, что самое главное, полную функциональность Zen Coding.

Про Zen Coding не написал только ленивый веб-разработчик, так что не буду в подробностях описывать все возможности, скажу только что вот эту строку: div#header>h1#logo+div#nav>ul>li.n$*5>a можно в одно нажатие клавиш превратить в:

1. <div id="header">
2. <h1 id="logo"></h1>
3. <div id="nav">
4. <ul>
5. <li class="n1"><a href=""></a></li>
6. <li class="n2"><a href=""></a></li>
7. <li class="n3"><a href=""></a></li>
8. <li class="n4"><a href=""></a></li>
9. <li class="n5"><a href=""></a></li>
10. </ul>
11. </div>
12. </div>

Очень круто, скорость написания HTML возрастает в разы. Если заинтересовались, то вам прямая дорога на страницу проекта за плагинами и документацией.

Публикация в Espresso

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

В Espresso эта проблема решены добавлением во встроенном FTP-клиенте функций Update, Merge и Mirror.

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

Некоторые проекты по различным причинам могут быть не настроены для локального выполнения, поэтому приходится просматривать изменения удалённо. В этом случае очень удобна фича Quick Publish, включаемая для отдельных файлов. Я включаю обычно для style.css. Вношу изменения, нажимаю горячую клавишу сохранения — и в эту же секунду файл уже залит на FTP. В Coda же приходилось после каждого сохранения нажимать на иконку закачки рядом с файлом.

Редактор

Субъективно редактор работает быстрее чем в Coda. В HTML и CSS работает автоотступы, подсказки для кода появляются быстрее чем в Coda. Присутсвует возможность сворачивания кода, которой в Coda нет. В остальном редакторы почти идентичны.

И ещё из мелочей

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

Вертикальная область Workspace для меня гораздо удобней горизонтальных вкладок в Coda. В последней проблема заключается в том, что когда открыто много вкладок, то переключение между ними становится затруднительным из-за малого размера вкладки и обрезанного названия файла. В Espresso список рабочих файлов выводится в вертикальной панели Workspaces, которая находится над списком всех файлов проекта. Если количество открытых файлов превышает определённое количество, то появляется прокрутка.

В Espresso можно просто взять и вытащить вкладку в отдельное окно, как в Safari:

Цена

Espresso стоит $79.95 против $99 за Coda.

P.S. Мне кажется, пришло время, когда компания Panic (создатель Coda) должна оправдать своё название — начать паниковать и срочно выпустить Coda 2, а то все перебегут как я.

P.P.S. А ещё скоро обещают TextMate 2. Первый я пробовал (да, это тот самый редактор ради которого многие девелоперы переходят на Mac и куча недоклонов которого была сделано под Windows), и знаю о его возможностях. Не самая удобная работа с проектами, отсуствие встроенного FTP-клиента/паблишера, да тот же Zen Coding поддерживается не полностью. Все нужные мне возможности, которые были в бандлах, уже реализованы в плагине TEA для Espresso. В общем, подружиться не удалось.

IE7 тоже тот ещё продукт, но хоть PNG с прозрачностью отображает нормально. А вот IE8 уже гораздо больше любит стандарты, но всё равно жуткий тормоз… Ну вот и как после этого хорошо относиться к продуктам Microsoft? Так, я же не хотел!

В этом посте я собрал все CSS-хаки, что смог найти в сети. Сам стараюсь их не использовать, за исключением редких случаев. Один случай как раз был недавно — замечательная Noname CMS заказчика автоматом вырезала все комментарии из HTML-шаблонов (в том числе и условные, в которых были стили для IE6). Ну чтож, пришлось переделать на хаки…

Начнём с нашего «любимого» браузера:

Internet Explorer 6

1. .class { _color: #666; }

Internet Explorer 6 и 7

1. * html .class { color: #666; }

1. .class { *color: #666; }

Internet Explorer 7

1. *:first-child+html .class { color: #666; }

1. *+html .class { color: #666; }

1. html>body .class { *color: #666; }

Internet Explorer 8

1. .class { color /*\**/: #666\9; }

Существуют хаки и для нормальных браузеров, мне ни разу не приходилось ими пользоваться, но их тоже полезно знать:

Firefox

1. @-moz-document url-prefix() {
2. .class { color: #666; }
3. }

Opera

1. @media all and (min-width: 0) {
2. .class { color: #666; }
3. }

1. .class, x:-moz-any-link { color: #666; }

1. *|html[xmlns*=""] .class { color: #666; }

1. html:first-child .class { color: #666; }

.class можно заменить вашим названием или вообще любым элементом, соответственно вместо color: #666 может быть любое свойство.

Внимание! Использование большинства из этих хаков приведёт к ошибке валидации CSS-документа, что не очень страшно, но всё равно настоятельно рекомендую использовать вместо хаков условные комментарии и отдельные CSS-файлы для разных браузеров:

Условные комментарии (Conditional Comments)

1. <link rel="stylesheet" href="style.css" />
2. <!--[if lte IE 7]><link rel="stylesheet" href="lteie7.css" /><![endif]-->
3. <!--[if IE 8]><link rel="stylesheet" href="ie8.css" /><![endif]-->

01 подключится во всех браузерах.
02 подключится в Internet Explorer, версия которого меньше или равна 7.
03 подключится только в Internet Explorer 8.

После выхода Chrome разработчики других браузеров немного забеспокоились, ведь Хром значительно опережал по быстродействию их детища. И активно занялись ускорением своих движков, что привело к тому, что сейчас последние версии Safari, Firefoх и свежая альфа Opera 10.5 приближаются по скорости к Chrome, и на этом фронте силы постепенно уравниваются. Ребята из Microsoft не беспокоятся, их «детище» до сих пор самое медленное в мире, и в последней, восьмой версии браузера мало что изменилось…

И вот начинается «битва» на другом фронте… Интерфейс. Я сделал кучу скриншотов различных браузеров в двух операционных системах с комментариями:

Браузеры под Mac OS

Компактный и минималистичный интерфейс

Ужасные, ужасные круглые кнопки, нерациональное использование пространства, кнопка закрытия вкладки непривычно и по-виндовому справа…

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

Интерфейс явно перегружен и тёмный фон у вкладок здесь лишний. Семь (!) плохо отрисованных навигационных кнопок в ряд

Свежая альфа. Уже лучше, избавились от синего фона и лишней линии. Но опять эти кнопки…

Очень, очень неплохо. Достаточно минималистично и красиво. Но за что таскать окно? За тоненькую полосочку сверху вкладок? За активную вкладку?
Не зря Apple перед релизом четвёртой версии Safari выпустила превью-версию с вкладками сверху. Было компактно, но неудобно. Особенно я мучался с планшетом, пытаясь переключить вкладку, вместо этого двигалось окно. В итоге, в финальном выпуске отказались и сделали снизу. Слава богу

Не маке мой выбор — Safari. Удобный, быстрый и нативный браузер. Наброски Firefox 4 выглядят неплохо, посмотрим что будет в финальной версии.

P.S. Мне кажется, Apple задала новое направление в дизайне приложений, выпустив iTunes 9. Я бы делал сделал новый браузер айтюнсоподобным.

Браузеры под Windows

Во времена Windows XP этот стиль смотрелся ещё более-менее. Но с выходом Vista и 7 он тут же устарел… Мне, к слову, он никогда не нравился, всегда ставил другую тему (чаще Modern).

Металлический блеск кнопок, полупрозрачность, оранжевая кнопка приложения… Да это будет лучший дизайн! Но дата выхода «четвёрки» запланирована на начало 2011 года…

…хотя не обязательно ждать так долго, «вкусняшку» можно попробовать и сейчас. Энтузиасты уже сделали тему Strata40, по возможности повторяющую наброски Firefox 4.

Компактный и минималистичный интерфейс

Напоминает перевёрнутый Chrome. Как-то неаккуратно: текст в строке адреса вниз съехал, да и сама панель адреса ниже чем хотелось бы

Было бы не так уж и плохо, если бы не было так перегружено. Во вкладках даже текст не помещается

Самый громоздкий и перегруженный интерфейс из всех, те же беды что и в версии под Mac, только здесь ещё меню лишнее место занимает

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

Под Windows я выбрал Google Chrome, но возлагаю большие надежды на Firefox 4, если он будет хотя бы настолько же быстр как Хром и концепт интерфейса не успеют испортить, то я с превеликим удовольствием вернусь обратно на Файрфокс.

Интересно, что и Chrome и Safari присутствуют под обе операционные системы, но удобно пользоваться ими только под те системы, под которые они изначально были разработаны. Safari (как и iTunes) воспринимается под Windows как нечто инородное. В случае Chrome это прослеживается немного меньше…

P.S. Очевидно, что интерфейс в большинстве браузеров можно настроить, но 90% пользователей после установки ничего не настраивают и я в их числе.

P.P.S. «Скриншоты» набросков Firefox 4 взяты из блога дизайнера, их нарисовавшего.