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

Наиболее часто это происходит при работе со шрифтами. Допустим, имеется ситуация, когда в Photoshop размер шрифта показывается в points. А при верстке макета в CSS правилах необходимо прописать размер шрифта в пикселях или процентах.

Как быть в данной ситуации? Если дело касается Photoshop, то можно установить в настройках этой программы, чтобы она выдавала размер шрифта в пикселях. Данный метод дает приближенное значение размера шрифта в пикселях, так как многое зависит от того, в каком разрешении был создан макет в Photoshop.

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

Пользуясь этой таблицей, можно быстро перевести один размер в другой. В ней представлены единицы измерения point, pixel, em и проценты. То есть, четыре самых распространенных типа, три из которых наиболее часто применяются при создании CSS-правил.

Таблица преобразования points в pixels, ems или проценты

Points Pixels Ems Проценты
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

Отдельно стоит сказать, что не стоит путать point и punct (pt). Это разные единицы измерения.

P.S.

В процессе изучения CSS-типографии столкнулся с очень интересным ресурсом по преобразованию одних единиц измерения в другие - пиксели в em, проценты и пункты (pt) - http://pxtoem.com/:

Конвертировать px в em

Помимо удобного способа конвертации одних единиц измерения в другие сервис предоставляет возможность получить готовый файл normalize.css, отредактированный службой http://pxtoem.com/ под выбранное значение базового шрифта. Плюс к этому, в данный файл включены готовые стили для правильного вертикального ритма под выбранный размер шрифта. Супер!

На этом все.


При верстке макета из psd в HTML и CSS может встретиться такая ситуация, когда фоновая заливка какого-либо объекта на макете выполнена в виде градиента.

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

Во времена CSS2.1 поддержки передачи градиента с помощью стилевых правил не было. Поэтому при верстке выходили из положения путем вырезания части фонового изображения из макета. И затем тиражирования этого изображения, используя правило background-image:url() с сопутствующим ему правилом background-repeat.

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

Но, одно дело знать, как с помощью правил написать градиент в CSS, а другое - как “выбрать” заданный дизайнером градиент из программы Photoshop. Это абсолютно логично - ведь шаблон создается по макету, с максимальной идентичностью ему.

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

К примеру, имеется макет сайта, у которого фоновая заливка шапки имеет градиент. Просто вырезать из нее фоновое изображение и замостить им шапку на html-странице, может было бы и проще. Но это уже прошлый век. К тому же это заметно утяжеляет html-страницу. Мы поступим по другому:

Фрагмент макета с градиентной заливкой

Еще раз внимательно посмотрим на фрагмент макета. Здесь изображена шапка будущего сайта. Хорошо видно, что фоновая заливка выполнена в виде градиента - зеленого цвета, плавно переходящего из одного оттенка в другой снизу вверх (или сверху вниз - это уже как нравиться).

Первое, что необходимо сделать, это открыть слой, отвечающий за прорисовку фонового цвета шапки. Переходим в Панель слоев, находим там такой слой и двойным щелчком мыши открываем его свойства. Появится диалоговое окно, в котором, если для данного объекта установлены какие-либо дополнительные свойства (эффекты), то в списке слева они будут отмечены галочкой. В нашем случае таким свойством будет “Наложение градиента”:

Дополнительные эффекты слоя

Щелкаем по нему в списке мышкой, если он не открылся автоматически. И переводим взгляд в правую часть окна. Что мы здесь видим и что нам здесь будет надо? В этом окне это три свойства слоя, которые нам понадобятся при написании стилевых правил. Первое - тип градиента. Здесь он линейный. Второе - цвет градиента. И третье - угол наложения градиентной заливки. В данном случае это вертикальный градиент (90 градусов). Все, больше в этом окне нам больше ничего не потребуется, так как мы узнали то, что необходимо:

Градиентное наложение

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

Цветовая схема градиента

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

Каким же образом иы узнаем точные значения этих цветов? Все опять просто. Будем последовательны. Наводим курсор мыши на крайний левый маркер и щелкаем по нему. Видим, что сам маркер окрасился в темно-зеленый цвет. А окошко выбора цвета внизу также изменило свой цвет на точно такой же. Это именно тот цвет, который используется в этом градиенте в качестве начального:

Начальный стоп-маркер

Щелкаем на окошке выбора цвета и видим его точное значение. Здесь можно выбрать значение цвета как в rbg, так и в hex - что вы предпочитаете:

Значение начального стоп-цвета

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

Значение конечного стоп-цвета

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

background: linear-gradient(top, #77c531, #4d722d);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#77c531), to(#4d722d));
background: -webkit-linear-gradient(top, #77c531, #4d722d);
background: -moz-linear-gradient(top, #77c531, #4d722d);
background: -o-linear-gradient(top, #77c531, #4d722d);
background: -ms-linear-gradient(top, #77c531, #4d722d);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#77c531', endColorstr='#4d722d', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#77c531',endColorstr='#4d722d')";

Разберем первую строку:

background: linear-gradient(top, #77c531, #4d722d);

Мы хотим (точнее - так задумал дизайнер), чтобы градиент “шел” сверху вниз от светло-зеленого к темно-зеленому. Поэтому в правилах указываем начальную точку отсчета для градиента - top (верх). Теперь “отсчет” градиента пойдет сверху вниз. Затем указываем начальный стоп-цвет (светло-зеленый #77c531) и конечный стоп-цвет (темно-зеленый #4d722d). Также не забываем указать атрибут свойства background - linear-gradient, говоря тем самым браузеру, что это линейный градиент. Как видим, в этом правиле мы применили все значения, которые получили из Photoshop.

Но данное правило является самым общим. Чтобы на сегодняшний день все браузеры понимали его, ниже мы прописываем почти точно такие же правила, но с учетом специфики каждого из браузеров.

Для браузеров на движке WebKit (Google Chrome, Safari):

background: -webkit-gradient(linear, 0 0, 0 100%, from(#77c531), to(#4d722d));
background: -webkit-linear-gradient(top, #77c531, #4d722d);

Первая строка нужна, чтобы градиент понимал Chrome ниже версии 4. Вторая - для более новых версий. Как видим, синтаксис под движок webkit более громоздок. Разберем его:

  • background: -webkit-gradient(linear, 0 0, 0 100%, from(#77c531), to(#4d722d));
  • background: -webkit-linear-gradient(top, #77c531, #4d722d);

… указывают, что это градиент линейный. Дальше - 0 0, 0 100% и top указывают начальную точку отсчета. Причем, если во втором случае все просто - это верх top, то в первом несколько сложнее. Первые два нуля указывают положение в процентах начальной точки отсчета. Вместо нулей там могут стоять служебные слова left top (левый верхний угол), right top (правый верхний угол).

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

Исходя из этого, можно легко подсчитать, что конечная точка градиента в нашем случае будет в левом нижнем углу, что равнозначно записи - left bottom. Таким образом, мы указали браузеру, что необходимо построить вертикальный градиент, начинающийся в верхней точке и идущий вертикально (90 градусов) вниз до нижней точки. Осталось задать начальный стоп-цвет from(#77c531) и конечный стоп-цвет to(#4d722d).

Следующие три строки предназначены для браузеров Firefox (префикс -moz), Opera (префикс -o), IE (префикс -ms). В них все просто и ничем не отличается от общего правила, за исключением специфичных префиксов.

Отдельная тема - это версии IE. Здесь без нестандартных приемов не обойтись, иначе градиент просто не будет отображен. Для них применяется фильтр:

filter: progid:dximagetransform.microsoft.gradient(startColorstr='#77c531', endColorstr='#4d722d', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#77c531',endColorstr='#4d722d')";

На этом процесс преобразования градиента в Photoshop в CSS-правила можно считать законченным.

P.S.

Забыл упомянуть, что уже довольно давно существуют различные плагины под Photoshop, которые в автоматическом режиме преобразовывают свойства объектов на макете в правила CSS.

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

На этом все.


В ArchLinux имеется скрипт для настройки конфигурационного файла /etc/pacman.d/mirrorlistrankmirrors.

Что он делает? rankmirrors берет список IP-адресов зеркал репозиториев ArchLinuxlinux из заранее созданного файла и проверяет их на скорость доступа. А затем формирует список самых быстрых зеркал на основе этой проверки.

Что это дает? В результате работы rankmirrors в /etc/pacman.d/mirrorlist мы имеем сервера с самым быстрым (исходяя из местоположения нашей машины) доступом. При обновлении системы или установки какой-либо программы скорость инсталляции существенно возрастает (из чего складывается инсталляция? Из скачивания пакета с сервера и уже затем его установки). rankmirrors является python-скриптом. man-страницы не имеет, но есть опция -help с небольшим выбором команд.

Похожими утилитами являются netselect и особенно – mirrorselect (для Gentoo). Итак, приступим к настройке нашего списка зеркал с помощью rankmirrors.

  1. Так как rankmirrors является python-скриптом, для его работы необходим установленный Python в системе. Устанавливаем, если его нет в системе:
$ sudo pacman -Sy python
  1. Переходим в директорию со списком зеркал pacman’а:
$ cd /etc/pacman.d/
  1. Делаем копию существующего списка зеркал mirrorlist:
$ sudo cp mirrorlist mirrorlist.backup
  1. Открываем копию списка зеркал в своем любимом редакторе и раскомментируем все строки с адресами серверов, географически наиболее близко расположенных к нам (по идее, это и будут сервера с самым быстрым доступом):
$ sudo nano -w mirrorlist.backup
  1. Сохраняем изменения в файле и выходим из него. Запускаем скрипт rankmirrors для выбора зеркал из указанного нами списка (для запуска rankmirrors потребуется войти в учетную запись root‘а. Под sudo у меня скрипт отказался работать, ругаясь на отсутствие прав доступа к файлу mirrorlist).

Переходим в учетную запись root‘а:

$ su -

Запускаем rankmirrors под root‘ом:

# rankmirrors -n 6 mirrorlist.backup > mirrorlist

где:

  • -n 6 – вывести (в нашем случае – записать) 6 сервером с самым маленьким временем отклика
  • mirrorlist.backup – список серверов для теста на время отклика
  • mirrorlist – файл, куда записываются адреса серверов скриптом rankmirros

В результате rankmirrors удалит все раскомментированные строки в mirrorlist и снесет адреса шести самых “быстрых” зеркал. Получится что-то вроде этого:

# Result
 Server = ftp://ftp.nluug.nl/pub/metalab/distributions/ArchLinuxlinux/$repo/os/i686
 Server = ftp://ftp.free.fr/mirrors/ftp.ArchLinuxlinux.org/$repo/os/i686
 Server = ftp://ftp.mfa.kfki.hu/pub/mirrors/ftp.ArchLinuxlinux.org/$repo/os/i686
 Server = http://gd.tuwien.ac.at/opsys/linux/ArchLinuxlinux/$repo/os/i686
 Server = http://ftp.gigabit.nu/$repo/os/i686
 Server = http://mirror.svk.su/ArchLinuxlinux/$repo/os/i686

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

  1. Теперь осталось последнее – заставить pacman перечитать список зеркал и обновить список пакетов.

Делаем:

# pacman -Syy

Результат:

:: Синхронизируются базы данных пакетов…
 core 35,8K
 65,8K/s 00:00:01 [######################] 100%
 extra 443,7K 15,4K/s 00:00:29 [#########################] 100%
 community 367,8K
 18,1K/s 00:00:20 [###########################] 100%
 ArchLinuxlinuxfr 24,7K 5,7K/s 00:00:04 [############################] 100%

Данная статья является вольным переводом (опробованным для своих нужд) из Википедии ArchLinuxlinux.

На этом все.


С недавних пор открыл для себя такой дистрибутив Linux как PCLinuxOS. Поставил его исключительно для того, чтобы сделать скриншоты при написании статьи. Но в процессе установки и краткого пользования мне он понравился даже больше, чем Linux Mint, которым пользовался до этого.

И все бы хорошо, но проблема подкралась незаметно. Нет, она была связана не с PCLinuxOS. Наверное, как не трудно догадаться, это была Windows XP. Я не хочу сказать, что эта операционная система так уж плоха. Хотя бы ради таких прекрасных программ, как Adobe Dreamweaver, Adobe Photoshop, AutoCAD, MS Office ее просто нужно иметь на своем компьютере.

Но вот ее нежелание видеть другие операционные системы и стремление затереть MBR вне зависимости от того, есть там какие-либо записи или нет, напрягает. Все началось с того, что я проглядел статус четвертого раздела на своем жестком диске. А надо было заметить, так как он имел флаг загрузочного раздела. И хотя Windows установилась, как я и указал, на первый раздел, но все ее главные файлы (какие они там - не знаю) расположились на четвертом разделе. Все логично. А четвертый раздел у меня служит в качестве мусорной ямы для всех операционок, установленных на компе.

Результат предсказать нетрудно. В один прекрасный момент я решил основательно почистить мусорку-раздел от лишний файлов. В корзину неглядя полетели и файлы Windows XP. Стоит оговориться, что эта операционная система стоит у меня исключительно для работы, ради программ Adobe Dreamweaver, Adobe Photoshop, ABBYY Lingvo. Потребность в ней у меня есть и серьезная. Поэтому я был весьма опечален, когда в очередной раз загрузил комп и выбрал в меню Windows XP. Но система лишь посоветовала мне нажать волшебную комбинацию клавиш Ctrl+Alt+Del.

Подумал немного и решил, что проще и быстрее мне переустановить Windows. Ничего сложного в этом нет. Но вот запись MBR была затерта. А у меня еще стоят Linux Mint и PCLinuxOS, к которым нужно открыть доступ. Хорошо, у меня сохранился PCLinuxOS LiveCD. С помощью него я быстро и в несколько шагов переустановил Grub в главную загрузочную запись жесткого диска. Ниже приведу 7 последовательный ход действий по восстановлению Grub под PCLinuxOS.

Последовательность действий:

  • Вставляю PCLinuxOS LiveCD в дисковод и перезагружаюсь. В меню BIOS выбираю загрузку с оптического диска. Операционная система PCLinuxOS загружается на компьютер
  • Открываю терминал и захожу в нем под учетную запись root с помощью команды su -. Пароль для root в PCLinuxOS LiveCD имеет значение root (как ни странно!)
  • Ввожу команду grub. При этом приглашение командной строки изменится и примет вид “grub>”

Вход в оболочку Grub

  • Задаю команду для поиска файла stage1 - find /boot/grub/stage1. На моем компьютере Grub отыскал его только на одном разделе - hd0,2. Это абсолютно верно, так как на /dev/sda3 установлена PCLinuxOS.
  • Ввожу команду root (hd0,2)
  • И устанавливаю Grub в MBR - setup (hd0)

Успешная установка Grub

Задача выполнена. Выхожу из оболочки Grub - quit. И перезагружаюсь.

Описанный здесь способ восстановления Grub с помощью PCLinuxOS LiveCD подходит не только для этой операционной системы. Для любого случая, когда в качестве загрузчика используется Grub (но не Grub2), данное описание поможет с высокой долей вероятности.

На этом все.


Одной из полезных возможностей программы Notepad++ является создание и использование макросов.

Пользователям, которые знакомы с популярным офисным пакетом MS Office (и Microsoft Excel в частности) должно быть знакомо понятие макросов. Если не знакомо, то вкратце поясню.

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

Сам процесс записи очень похож на то, как если бы действия в программе записывались на видеокамеру. Только в качестве пленки в этом случае выступает программный код. Точнее, язык программирования, в который переводится все манипуляции, которые пользователь выполняет в программе. Язык программирования может быть разным и целиком зависеть от конкретной программы. Например, в Microsoft Excel таким языком является VBA (Visual Basic for Applications). Для обычного пользователя знать как язык программирования, на котором кодируется действия, совсем необязательно. Ему достаточно уметь записывать макросы и запускать их на выполнение.

Вернемся к программному блокноту Notepad++. Чем могут быть полезны макросы в этом случае. Да тем же самым. Допустим, при написании кода существуют какие-либо его участки (куски), которые повторяются постоянно. Кстати, такие повторяющиеся куски кода называются сниппетами.

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

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

Набор кнопок для работы с макросами в Notepad++

Назначение каждой из них по порядку:

  1. Старт записи макроса
  2. Остановка записи макроса
  3. Воспроизведение записанного макроса
  4. Многократное воспроизведение записанного макроса
  5. Сохранение записанного макроса

Набор совсем несложный и разобраться в нем легко. Теперь давайте приступим к записи какого-либо макроса, чтобы увидеть воочию, как это делается. Предположим, что в качестве часто повторяемого кода (сниппета) у нас будет выступать строка document.write();, которую довольно часто применяют в коде javascript-программисты.

Нажимаем кнопку “Старт записи макроса”. При этом кнопка из красной превратиться в серую, что означает - запись пошла. Без ошибок, аккуратно вводим в основном окне Notepad++ вышеуказанную строку:

Запись макроса в Notepad++

Когда строка введена, нажимаем кнопку “Остановка записи макроса”. Программа Notepad++ записала наши действия. В данном случае - это строка кода, которую мы ввели. Чтобы проверить, что запись была произведена верно, нажмем кнопку “Воспроизведение записанного макроса”. Notepad++ в точности воспроизведет указанную строку, если все было выполнено нами верно. Если нужно воспроизвести записанный макрос несколько раз, можно нажать кнопку “Многократное воспроизведение записанного макроса”.

Теперь необходимо сохранить записанный нами макрос, так как он хранится в оперативной памяти программы Notepad++ только до момента ее закрытия. Как только мы ее закроем, макрос пропадет. Для сохранения нажимаем кнопку “Сохранение записанного макроса”. Появится окно, в котором предлагается задать сочетание “горячих клавиш” для сохраняемого макроса и его имя для сохранения. выбираем любое понравившееся сочетание, а также задаем имя для макроса:

Сохранение макроса в Notepad++

Проверить, произошло ли сохранение макроса, можно двумя способами. Первый - это перейти в меню “Макросы”. В выпадающей списке, наряду с общесистемными командами Notepad++ должен находиться и наш макрос document.write();. Второй способ - это открыть список всех сохраненных в программе макросов. Делается это через меню “Макросы - Изменить гор.клавишу/Удалить макрос”. Откроется окно редактирования, в котором должен быть представлен наш макрос:

Список сохраненных макросов Notepad++

В этом окне можно удалить сохраненный макрос кнопкой “Delete”. Или же изменить сочетание горячих клавиш для этого макроса кнопкой “Modify”.

Как вы уже догадались, с помощью макроса можно сохранять абсолютно любой код. Это может не обязательно javascript-сниппет, но и часть HTML или CSS-кода, если вы занимаетесь версткой в программе Notepad++.

На этом обзор макросов в Notepad++ закончен.