пятница, 27 апреля 2012 г.

Пакетная обработка изображений в GIMP

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


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


Пакет доступен также и для Windows.

Скачать английскую версию можно с сайта автора.
Также есть и русифицированная версия, её можно скачать здесь.

Установка элементарна — распакуйте архив, make install. Всё.

вторник, 17 апреля 2012 г.

Архивация встроенных web-шрифтов

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

Как показывает статистика (спасибо, Stoyan Stefanov!) выгода от использования сжатия файлов шрифтов лежит в пределах 40-45% от исходного размера, что весьма не мало!

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

Там надо указать новые типы файлов:

Addtype font/otf .otf
Addtype font/ttf .ttf
Addtype font/eot .eot

А затем указать Apache сжимать их (вместе с текстовыми файлами):

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript font/otf font/ttf font/eot

Фоновое изображение как ссылка


Делая сайт для своей группы столкнулся с проблемой — логотип был сделан в виде background-image в div#header, тем самым не было возможности напрямую использовать его как ссылку на главную страницу.

Однако всё решается довольно просто путём добавления ссылки в виде элемента <span> и помещения его в блок с абсолютным позиционированием с размерами, равными размеру фонового изображения, вкупе со скрытием содержимого <span> через CSS.

Следующий код наглядно иллюстрирует этот способ:

HTML-часть:

...
<div id="header">
  <a href="index.php" id="logo"><span>На главную</span></a> 
...

CSS-часть:

...
div#header
{
   height:145px; 
   padding:0 0 0 0; 
   background: url(../image/stamp_new.png) no-repeat; /* логотип */
}

a#logo
{
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
    height: 145px;
}

a#logo span {display: none;}
...