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

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

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

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

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

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

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

1. $('<div />', {
2. id: 'martini'
3. });

Раньше, как правило, делалось так:

1. $('<div id="martini"></div>');

Если создавать просто один div с id, то это вполне наглядно. А вот если требуется «биндить» события, то новый способ гораздо нагляднее (особенно если вспомнить про сравнение версий в SVN или GIT):

1. $('<div />', {
2. id: 'martini',
3. click: function(e) {
4. e.preventDefault();
5. $(this).animate({opacity: .1});
6. }
7. });

:3

Можно и так:

1. var anchor = $('<a />', {
2. className: 'more-whisky',
3. href: '#whisky',
4. text: 'More whisky',
5. click: function(e) {
6. e.preventDefault();
7. $(this).parent().slideToggle();
8. }
9. });
11. $('li').each(function() {
12. $(this).prepend(anchor.clone());
13. });

Красота! Зачем клонировать элемент? Потому, что переменная ссылается на одиночный элемент. Если вы его не склонируете, то в итоге получите только один вставленный элемент на странице.

И… Данная возможность в jQuery уже год.

Подробнее и ещё несколько примеров в документации.

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

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

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

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

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

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

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

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

Больше всего изменился интерфейс. А в остальном — это старая добрая 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), о котором я уже неоднократно писал.

Сейчас доступны для скачивания две версии пакета: Creative Suite 5 Design Premium и Creative Suite 5 Master Collection.
Ну и отдельно приложения: Photoshop CS5 Extended, Illustrator CS5, Dreamweaver CS5, Flash Professional CS5, Premiere Pro CS5, After Effects CS5, InDesign CS5 ну и Acrobat 9 Pro.

Я тут же скачал первый пакет — CS5 Design Premium. Из всего пакета я пользуюсь только Illustrator и Photoshop (ну очень редко Flash и InDesign). О последнем я и решил написать этот обзор. Так как я счастливый пользователь Мака, естественно, что обозревать я буду маковскую версию.

Дрожащими руками жмакаем на новую иконку и видим новый сплэш:

Как и обещали, новый Photoshop CS5 под Mac был полностью переписан на фреймворк Cocoa и теперь нативно поддерживает 64 бита. Это становится заметно сразу после запуска: теперь нет проблем со Spaces (различные части окна не расползаются по разным рабочим столам). В целом интерфейс теперь работает гораздо шустрее и отзывчивее, окна и панельки перетаскиваются очень плавно, отлепляются и прилепляются без тормозов, как раньше.

Интерфейс

Для любителей пиксельхантинга предлагаю для сравнения два скриншота интерфейса Photoshop CS5 и CS4 (по клику откроется полноразмер):

Photoshop CS5

Photoshop CS4

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

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

• Кнопка закрытия вкладки в «маковой» версии теперь слева (аллилуйя)
• Новые иконки инструментов. Более тёмные, без контуров и менее контрастные
• Появились превьюшки в меню выбора начертания шрифта
• Все кнопки на панелях инструментов теперь плоские (хмм, вроде как это нарушает гайды Apple)
• Когда в панели Layers перетаскиваешь слой, то он становится полупрозрачным, раньше перетаскивался только контур
• При редактировании названия слоя или группы теперь работает горячая клавиша Cmd+A (выделить весь текст)
• Lens Correction переместили в корень меню Filter, раньше надо было ползти в Filter → Distort, и теперь ему присвоили горячую клавишу Cmd+Shift+R
• Странно, но в CS5 разделители пунктов меню занимают больше места, соответственно, до Flatten Image теперь тащить мышку (перо) дальше:
  

  Меню CS5 — слева

Редактирование изображения

Самыми главными фишками новой версии были объявлены функции Refine Selection Edge, Content-Aware Fill и Puppet Warp, о которых я напишу подробно:

Content-Aware Fill

Или заливка с учётом содержания. Продолжает функционал Healing Brush и Spot Healing Brush. Я уже писал об этом инструменте, посему перейдём к практике.

Возьмём, для примера, мою последнюю вертикальную панораму. Я делал её в CS4, отсутствующие части я «заделывал» штампом.

Попробуем заполнить недостающие части с помощью Content-Aware Fill:

Выделяем пустое пространство и вызываем меню Fill

Ждём несколько минут и… получаем это:

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

Puppet Warp

Новый инструмент Puppet Warp, расположенный в меню Edit, предназначен для изменения формы объекта по контрольным точкам, причём процесс очень напоминает управление марионеточной куклой с помощью верёвок.

Долго искал подходящую фотографию в архиве, чтобы руки были видны, в итоге нашёл фотографию трюкача, которую я сделал на Старом Арбате. Надеюсь он не обидится. Воспользуемся усовершенствованным инструментом Quick Selection Tool (а затем и Refine Selection Edge, если нужно) чтобы отделить «модель» от фона, а затем заполним фон с помощью Content-Aware Fill:

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

И вот что может получиться:

Можно придать более выразительную позу или сделать карикатуру.

Я вообще, если честно, плохо представляю как сделать нечто подобное без этого инструмента. Разве что воспользоваться обычным Warp-ом.

Mixer Brush Tool

Насколько я помню, подобный инструмент уже давно есть в Painter. Результат воздействия этой кисти чем-то напоминает работу инструмента Smudge Tool — используются данные о цвете с того участка, на который осуществляется мазок, то есть происходит смешивание цветов, как бы это происходило при реальном рисовании. У кисти очень много настроек для достижения нужного результата.

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

Кстати, при работе с новыми кистями в окошке показывается расположение щетины и угол наклона кисти (которое ускоряется с помощью GPU), в реальном времени. Впечатляет:

Инструмент Mixer Brush и новая кисть

Художники будут просто счастливы.

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

• При увеличении размера холста, теперь можно выбрать цвет, которым будет заполнено увеличенное пространство
• Для инструмента Сrop можно включить сетку с третями
• Был в ужасе от того насколько быстро открылся диалог Save for Web
• При перемещении слоя теперь отображается его контур
• Наконец-то доработали Sharp Tool, теперь его использование не приводит к возникновению мерзких разноцветных артефактов, а также он теперь учитывает силу нажатия пера
• В Camera Raw появились два новых эффекта: зернистость (Grain) и виньетирование (Post Crop Vingetting).
  Сейчас многие (и даже я) любят всячески «портить» фотографии стилизируя их под плёнку: добавлять тёплый ламповый плёночный шум, пыль, царапины. И я подумал, ведь через несколько лет, когда появится Canon 5D Mark IX который не будет шуметь даже на ISO 100000, в Photoshop CS11 появятся специальные профили, которые будут эмулировать цифровой шум «старых» камер, таких как Canon 5D Mark II, Canon 500D и Nikon D90.
• Возможность изменить прозрачность нескольких слоёв одновременно
• Новая опция Straighten у инструмента линейка (Ruler Tool) для выравнивания заваленных горизонтов. Причём после выравнивания фотография автоматически кадрируется. Офигительно! Раньше же приходилось лезть в тормозной Lens Corrections, а потом ещё и кропить вручную.

Ну и как обычно, без ложки дёгтя не обошлось (даже без нескольких ложек):

• MiniBridge. При открытии панельки, в фоне открывается полноценное приложение Adobe Bridge, в панельке же показывается только часть его интерфейса. Вообще само приложение Bridge я недолюбливаю, тормозное и неудобное, мне проще и быстрее воспользоваться Finder. Но ещё потестирую — может моё мнение изменится
• Вместо Carbon-овых часиков вместо курсора, когда приложение чем-то занято, они сделали анимированную ромашку. Почему нельзя было сделать красивый системный разноцветный диск — непонятно.
• Я часто подключаю и отключаю внешний монитор. Проблема в CS4 заключалась в том, что когда работаешь в фотошопе с отключенным монитором, а затем подключаешь его и разворачиваешь Фотошоп на весь экран, то почему-то снизу от окна с картинкой остаётся около 200 пикселей пустого пространства. Помогает только закрытие и повторное открытие окна фотошопа. В CS5 это так и не исправили.
• Lens Correction уныл, чуть более чем полностью — профилей для линз мало (может пока что), так что PTLens — наше всё.
• В русской раскладке при нажатии Cmd+Shift+Opt+S открывается диалог Save As вместо Save for Web
• В idle-режиме новый фотошоп жрёт в средем на 0.3 процента процессорного времени больше:
  

  Сразу после запуска обоих версий фотошопа

Итог

Довольный я. Можно покупать.

P.S. Вот мне интересно, после выхода каждой версии в сообществах обязательно находятся люди, которые заявляют: «Ну вот опять, ничего нового, придётся ждать CS8, а пока я на CS3, CS, 7, 2.5, 1.0 (нужное подчеркнуть) посижу». Я вот только ради кнопки закрытия вкладки, перенесённой наконец влево, готов перейти на новый шоп. А тут просто мешок удобностей. И вот же, смотрю — опять кричат. Ну хотя да, это я.

Ещё заказал макрокольца, но о них как-нибудь в следующий раз… Больше ничего интересного у них в каталоге не обнаружилось.

По отзывам заказы оттуда приходят примерно через неделю-две. В наши Мухосрански, я предполагал, что где-нибудь за месяц дойдёт. Так и вышло. События развивались так: 9 марта я сделал заказ, 10-го ребята из GadgetInfinity его отправили, 12-го посылка уже покинула Гонконг. Дальнейшая судьба посылки мне была неизвестна, вплоть до 11-го апреля, когда посылка наконец-то начала трекаться на сайте Почты России, с 11 по 13-е число она была на обработке, 14-го была отправлена в Архангельск, 17-го (в субботу) я получил извещение и тут же сходил и забрал. Локально почта отработала быстро. По всей видимости, посылка долго проторчала на таможне.

Коробка довольно-таки стильная, триггеры внутри неё лежат в плотной пористой резине:

В комплекте

• Передатчик с антенной
• Приемник
• Три кабеля: на 3.5мм, на 6.35мм и PC-синхрокабель (CA-100)
• Две AAA алкалиновые батарейки GP
• Руководство пользователя
• Альбом «When Light Dances» с фотографиями, сделанными с помощью Cactus V4

Технические данные

• Радиочастота 433Mz
• 16 радиоканалов (переключаются на обоих триггерах)
• Время срабатывания: от 1/500 до 1/1000 секунды
• Скорость синхронизации: до 1/500 секунды (у меня срабатывает до 1/350)
• Максимальный радиус действия: 30 метров (пока не проверял)
• Рабочая температура: от -10°C до 45°C

Тестирование

Тестировал я их с камерой Canon 400D и вспышкой Canon Speedlite 430EX. Поддерживаются также и камеры Nikon и выспышки Nikon Speedlight.

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

Пыщь!

В пределах квартиры кактусы работали отлично, несрабатываний зафиксировано не было. Попробовал на улице: заявленные 30 метров отрабатывает — дальше уже работает нестабильно.

Добиться срабатывания на заявленной скорости синхронизации в 1/500 так и не удалось, на выдержках длиннее 1/350 вспышка видна уже не полностью. Но выдержки в 1/350 вполне достаточно, больше и не надо.

Достоинства

• Низкая цена
• Надёжное срабатывание
• Достаточно надёжный конструктив

Недостатки

• Плохо держится крышка батарейного отсека у приёмника (лучше сразу приклеить двухсторонним скотчем, а то потеряется)

Вывод

Идеальный вариант для начинающих стробистов, круче, пожалуй, только PocketWizard с TTL, за 400 долларов.

Совсем скоро мы узнаем какие же иконки будут в CS5. Чёрный фон у страницы, кхм… У иконок с тёмным фоном теперь шансов больше. Кстати, на их странице для рендеринга шрифтов используется тот же jQuery-плагин, что и в моём блоге — cufón. Странно что не тот, который рендерит во flash. Шарят.

Афиша «Metal Warriors II»

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

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

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

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

Здравствуйте ! На сайте написано , что миранда бесплатная аська.Мы скачали ее ,но мало того, что после отправки смс у нас с телефона снялось 305 рублей ???????? так миранда еще и не запускается ???????
Объясните пожалуйста , что мы делаем не так?

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

Будьте внимательны, никогда не отправляйте смс на непонятные номера. Пользуйтесь сервисами операторов по проверке стоимости смс-сообщений.

Качать Miranda Me лучше только с официального сайта. Абсолютно бесплатно.

На место моей личной вики претендовали три популярных вики-движка: 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.