Обзор Aperture 3

Aperture 3

Свершилось то самое, чего так долго ждали большевики «подсевшие на яблоки» фотографы — Apple выпустила долгожданную Aperture 3. Хехе, а все ждали обновлённые макбуки. Постараюсь совладать с эмоциями и использовать как можно меньше восклицательных знаков. ;) Я пользуюсь Aperture с самой первой версии и очень ждал этого обновления.

Для тех, кто не в курсе, Aperture — это профессиональная программа для каталогизации и обработки фотографий под Mac.

Как всегда, удивляет количество изменений в новой версии — больше двухсот (во второй версии было чуть больше ста) Получается что 3.0 — это самый значимый апдейт за всё время существования продукта. Хотя, ещё бы — прошло уже два года с момента выпуска предыдущей версии.

Я уже скачал 30-дневную trial-версию и всяко её общупал. :D Размер приложения по сравнению с предыдущей версией увеличился в два раза. :!: Первые впечатления — чрезвычайно положительные.

Aperture 3

Aperture 3

Для сравнения — интерфейс Aperture версии 2.1:

Aperture 2

Aperture 2
Основные изменения в третьей версии Aperture

Miranda Me скачать бесплатно

Недавно приходит письмо следующего содержания (пунктуация и орфография сохранены):

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

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

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

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

Боремся с пылью на матрице

Моему «цифрозеркальному» фотоаппарату Canon 400D уже более двух лет. Первый сменный объектив появился спустя полгода после покупки, и уже в то время на матрице начала появляться пыль. На данный момент в моём «парке объективов» насчитывается уже четыре объектива, меняю я их всё чаще, соответственно пыли становится всё больше. В связи с повышенными требованиями к моим последним фотографиям, я решился наконец почистить матрицу, для начала самыми безопасными способами.

Пыль на матрице

«Микроорганизмы»

Вот эти червячки и микробы и есть пыль.

Как же найти пыль на матрице?

Плюс викификация

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

mozzy's wiki

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

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

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

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

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

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

Кофе с сахаром или обзор редактора Espresso

Когда вышел редактор Coda, я был поражён его интерфейсом и удобстовом. И всё меня в нём устраивало, но вот тут в одной из RSS-лент я увидел сообщение о выходе новой версии редактора Espresso 1.1…

Espresso

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

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

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

Основное окно Espresso
Что меня подкупило в Espresso:
  • Полная поддержка Zen Coding.
  • Наиудобнейшая публикация сайтов.
  • Очень удобный и минималистичный интерфейс.
  • Шустрый редактор с быстрыми подсказками и сворачиванием кода.
  • Навигатор.
  • Автопубликация.
  • Возможность опубликовать папку из контекстного меню (странно, но такой функции до сих пор нет в Coda, там можно выбрать несколько файлов для публикации, но папку — никак).
  • Удобная работа с проектами.
Недостатки по сравнению с Coda:
  • Меньшие возможности и производительность поиска по проекту.
  • Не очень удобные сниппеты. В Coda они появляются во всплывающем окошке, что очень удобно. В Espresso же они ограничены хоть и красивым, но уж слишком компактным жёлтым листочком в панельке Tools.
То, чего нет в Espresso и есть в Coda, но чем я не пользуюсь:
  • SVN-клиент. Пользуюсь клиентом Versions, который по идее заслуживает отедьной статьи. :)
  • Terminal. Системного Terminal вполне хватает.
  • Books — встроенный браузер по справочникам, успешно заменяется Safari с гуглом.

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

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

Описание функциональности Espresso

CSS-хаки для Internet Explorer, Firefox и Opera

IE6. Как много в этой аббревиатуре для сердца верстальщика слилось… :lol: Ежеминутно со всех сторон света на всех языках мира доносятся тысячи проклятий в адрес разработчиков этого замечательного браузера. Но сегодня постараемся обойтись без этого. Хотя, иногда задумываешься, а ведь не было бы IE — как же было бы скучно, да и верстальщикам платили бы меньше. :-D

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.

Семантическая разметка в HTML

В последнее время стало очень модным такое понятие как семантика.

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

Ну а применительно к HTML, простыми словами — теги, названия ID и классов элементов должны соответствовать их содержимому по смыслу.

Приведу простейший пример — у нас есть следующее определение:

Капитан Очевидность (англ. Captain Obvious)
— уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.

Как напишет код верстальщик не знакомый с понятием «семантика»:

  1. <p><strong>Капитан Очевидность (англ. Captain Obvious)</strong><br /> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</p>

А вот как напишет этот код верстальщик, с ним знакомый:

  1. <dl><dt>Капитан Очевидность (англ. Captain Obvious)</dt><dd> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</dd></dl>

Здесь использованы подходящие по смыслу элементы HTML: <dl> — это Definition List (список определений), <dt> — Definition Term (имя определяемого термина), <dd> — Definition Description (определение термина). А выделение жирным имени термина задано с помощью CSS.

Ну и ещё как пример — классическое меню, сделанное с помощью неупорядоченного списка:

  1. <ul id="nav">
  2. <li><a href="/about/" title="О компании">О компании</a></li>
  3. <li><a href="/services/" title="Услуги">Услуги</a></li>
  4. <li><a href="/contacts/" title="Контактная информация">Контактная информация</a></li>
  5. </ul>

Такую разметку будет потом очень просто оформить с помощью CSS.

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

Что использовать, ID или class?

В интернетах с завидной регулярностью задают этот вопрос, постараюсь ответить.

ID — это имя уникального элемента на странице, я использую его для структурной разметки (#header, #content, #aside, #footer), для элементов формы и для элементов, к которым в дальнейшем планирую обращаться через jQuery. В последнем случае, конечно, можно использовать и классы… Но грамотней использовать ID, так как селектор $("#id") работает гораздо быстрее, чем $(".class"), по причине того, что используется DOM-функция getElementById(). А если элемент не уникален на странице (их несколько), то желательно положить его в блок с ID и обращаться к нему так: $("#id .class"). Такой селектор будет работать быстрее чем $(".class"), так как поиск элемента будет производиться только в блоке #id, а не во всём документе. Отвлёкся немного в сторону jQuery, но это тоже полезно знать. :!:

Регулярно в чужом коде встречаю названия классов привязанные к отображению, например: class="column-red-150-border-black". Это семантически некорректно, и в таком коде разбираться гораздо тяжелее. Не рекомендую такой код. :)

Ещё пример — в моём блоге, в разделе Эбаут используется микроформат hCard (микроформаты вообще интересная штука):

  1. <div class="vcard">
  2. <span class="n"><span class="fn"><span class="family-name">Коромыслов</span> <span class="given-name">Алексей</span></span> <span class="additional-name">Георгиевич</span></span>
  3. <p>Родился <abbr class="bday" title="1987-04-14">14 апреля 1987 года</abbr>. Работаю <abbr title="разработчик ПО" class="role">разработчиком ПО</abbr> в компании «<a href="http://profit-labs.ru/" class="org">ProfIT Labs Ltd</a>».</p>
  4. <p>В сети «известен» под ником «<span class="nickname">lazymozzy</span>».</p>
  5. <h3>Контактные данные</h3>
  6. E-mail: <a class="email" href="mailto:alexey@koromyslov.ru">alexey@koromyslov.ru</a>
  7. Skype: <a class="skype" href="skype:lazymozzy">lazymozzy</a>
    </div>

Используемые здесь полное имя (fn), организация (org), адрес электронной почты (email) и пр. определены с использованием определённых имён классов, а для всего блока задан class="vcard", который показывает, что вложенные классы принадлежат hCard. Например Яндекс уже начал поддерживать микроформаты.

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

Vibrant Ink theme for Coda

Знаменитая тема Vibrant Ink for TextMate была портирована для кучи редакторов, среди которых Espresso, Eclipse, Aptana, Notepad++ и прочие. Но почему-то в этом списке до сих пор не было замечательного маковского редактора Coda, которым я с удовольствием пользуюсь уже около года.

Решил это исправить и сделал цветовую схему для HTML, PHP+HTML, CSS и JavaScript.

Подсветка PHP и HTML

Подсветка PHP и HTML
Подсветка CSS

Подсветка CSS
Подсветка JavaScript

Подсветка JavaScript

Скачать Vibrant Ink theme for Coda (10 KB).

Цветовая дифференциация админок

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

Синяя тема админки WordPress

Синенькую тему для этого блога
Серая тема админки WordPress

…и серенькую — для фотоблога

К сожалению, по-умолчанию темы всего две, так что для тех, у кого блогов больше, рекомендую расширение Easy Admin Color Schemes. Появляется ещё две темы (красная и зелёная) и возможность создавать свои.

Эпичное сравнение интерфейсов браузеров

Война браузеров продолжается. Страсти накаляются. Год назад масла в огонь подлил Google, выпустив Chrome — потрясающе быстрый и удобный браузер с приятным интерфейсом, вобравший в себя все удачные решения остальных браузеров. Не побоюсь признаться, сам перешёл на рабочей машине с любимого Firefox (которым пользовался много лет, начиная ещё с Mozilla) на Chrome, спустя полгода после его выхода. Перешёл бы раньше, но очень не хватало плагина Xmarkrs для синхронизации закладок…

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

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

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

Safari 4 for Mac
Компактный и минималистичный интерфейс
Ещё четырнадцать скриншотов